From bb85d795df8e500ecedca33bf93779b7d362d923 Mon Sep 17 00:00:00 2001
From: nghiatt15_onemount <nghiatt15@onemount.com>
Date: Fri, 11 Sep 2026 15:44:29 +0700
Subject: [PATCH 1/2] feat(ui)!: add collapsible groups, compact overlays and
 remove charts

Add collapsible form-builder groups and per-group Sidebar V3 expansion.
Move hover-copy/query-builder popups outside clipped containers and use
compact CDK menus for table command children and selection actions.
Refine pill/segmented tab hover styling and align drawer, modal and
bottom-sheet header, body and footer padding at 12px 16px.

Remove bundled chart components and Chart.js; update consumer migration
notes, Showcase examples and all four Angular-major workspaces.

BREAKING CHANGE: chart components and exports are removed. Consumers must
choose and configure their own chart library. sd-org-chart remains supported.

Verification: v19 full suite (5372 tests), focused overlay suite (115 tests),
menu regression suite (12 tests), full v19 lint, library and Showcase builds,
repository script tests and four-line sync checks passed. Browser checks
covered desktop/mobile padding, tab hover, menus, keyboard and focus.
---
 CHANGELOG.md                                  |  27 +++
 README.md                                     |   2 +-
 README.npm.md                                 |   6 +-
 .../generate-showcase-route-shells.test.mjs   |   5 +-
 scripts/lint-phase.mjs                        |   1 -
 showcase/package-lock.json                    |  19 --
 showcase/package.json                         |   1 -
 .../docs/core/documentation.registry.spec.ts  |  13 +-
 .../app/docs/core/documentation.registry.ts   |  13 --
 .../generated/example-manifest.generated.ts   |  30 +--
 .../generated/example-sources.generated.ts    | 219 ++----------------
 .../components/chart/chart-demo.component.ts  | 141 -----------
 .../form-generic-demo.component.ts            |   6 +-
 .../components/modal/modal-demo.component.ts  |   2 +-
 .../components/table/table-demo.component.ts  |  11 +-
 .../modules/layout/layout-demo.component.ts   |   2 +-
 versions/v19/README.md                        |   2 +-
 versions/v19/SYNC-STATUS.md                   |   2 +-
 versions/v19/package-lock.json                |  19 --
 versions/v19/package.json                     |   1 -
 .../v19/projects/sdcorejs-angular/README.md   |   6 +-
 .../components/chart/index.ts                 |   4 -
 .../components/chart/ng-package.json          |   6 -
 .../components/chart/sd-chart.md              | 140 -----------
 .../chart/src/bar-chart.component.ts          |  88 -------
 .../chart/src/doughnut-chart.component.ts     |  64 -----
 .../chart/src/line-chart.component.ts         |  88 -------
 .../chart/src/pie-chart.component.ts          |  64 -----
 .../form-generic/sd-form-generic.md           |  19 ++
 .../attribute/group-attribute.component.html  |   4 +
 .../group-attribute.component.spec.ts         |  61 +++++
 .../attribute/group-attribute.component.ts    |   3 +-
 .../form-render/form-render.component.html    |   2 +-
 .../form-render/form-render.component.spec.ts | 103 ++++++++
 .../models/form-generic-component.model.ts    |   1 +
 .../components/history/sd-history.md          |   2 +-
 .../sdcorejs-angular/components/index.ts      |   1 -
 .../components/modal/sd-modal.md              |   4 +-
 .../components/modal/src/modal.component.scss |  13 +-
 .../query-builder/sd-query-builder.md         |   5 +-
 .../src/query-builder-overlay.spec.ts         | 135 +++++++++++
 .../src/query-builder.component.html          |  35 ++-
 .../src/query-builder.component.scss          |   8 -
 .../src/query-builder.component.ts            |  35 ++-
 .../components/side-drawer/sd-side-drawer.md  |   6 +-
 .../src/side-drawer.component.scss            |  14 +-
 .../sdcorejs-angular/components/tab/sd-tab.md |   2 +-
 .../tab/src/tab-group.component.scss          |  20 +-
 .../components/table/sd-table.md              |   4 +-
 .../components/action-menu/action-menu.scss   |  67 ++++++
 .../src/components/action-menu/action-menu.ts |  67 ++++++
 .../command/desktop-command.component.html    |  32 ++-
 .../command/desktop-command.component.scss    |  15 +-
 .../command/desktop-command.component.spec.ts |  67 +++++-
 .../command/desktop-command.component.ts      |   6 +-
 .../selector-action-layout.component.spec.ts  |  48 ++++
 .../selector-action.component.html            | 119 ++++++----
 .../selector-action.component.scss            |   8 +-
 .../selector-action.component.ts              |   5 +-
 .../src/sd-hover-copy-overlay.spec.ts         |  96 ++++++++
 .../src/sd-hover-copy.directive.spec.ts       |  25 +-
 .../directives/src/sd-hover-copy.directive.ts |  55 ++++-
 .../directives/src/sd-hover-copy.md           |   7 +-
 .../projects/sdcorejs-angular/i18n/src/en.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ja.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ko.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/vi.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/zh.ts  |   1 +
 .../projects/sdcorejs-angular/karma.conf.js   |   2 +-
 .../shared/menu-tree/menu-tree.component.html |  74 +++---
 .../shared/menu-tree/menu-tree.component.scss |  20 +-
 .../menu-tree/menu-tree.component.spec.ts     |   1 +
 .../shared/menu-tree/menu-tree.component.ts   |  20 +-
 .../components/sidebar-v3/main.component.html |   2 +
 .../sidebar-v3/main.component.spec.ts         | 136 ++++++++++-
 .../components/sidebar-v3/main.component.ts   |  20 ++
 .../modules/layout/sd-layout.md               |   4 +
 .../projects/sdcorejs-angular/ng-package.json |   1 -
 .../projects/sdcorejs-angular/package.json    |   2 -
 versions/v20/README.md                        |   2 +-
 versions/v20/SYNC-STATUS.md                   |   2 +-
 versions/v20/package-lock.json                |  19 --
 versions/v20/package.json                     |   1 -
 .../v20/projects/sdcorejs-angular/README.md   |   6 +-
 .../components/chart/index.ts                 |   4 -
 .../components/chart/ng-package.json          |   6 -
 .../components/chart/sd-chart.md              | 140 -----------
 .../chart/src/bar-chart.component.ts          |  88 -------
 .../chart/src/doughnut-chart.component.ts     |  64 -----
 .../chart/src/line-chart.component.ts         |  88 -------
 .../chart/src/pie-chart.component.ts          |  64 -----
 .../form-generic/sd-form-generic.md           |  19 ++
 .../attribute/group-attribute.component.html  |   4 +
 .../group-attribute.component.spec.ts         |  61 +++++
 .../attribute/group-attribute.component.ts    |   3 +-
 .../form-render/form-render.component.html    |   2 +-
 .../form-render/form-render.component.spec.ts | 103 ++++++++
 .../models/form-generic-component.model.ts    |   1 +
 .../components/history/sd-history.md          |   2 +-
 .../sdcorejs-angular/components/index.ts      |   1 -
 .../components/modal/sd-modal.md              |   4 +-
 .../components/modal/src/modal.component.scss |  13 +-
 .../query-builder/sd-query-builder.md         |   5 +-
 .../src/query-builder-overlay.spec.ts         | 135 +++++++++++
 .../src/query-builder.component.html          |  35 ++-
 .../src/query-builder.component.scss          |   8 -
 .../src/query-builder.component.ts            |  35 ++-
 .../components/side-drawer/sd-side-drawer.md  |   6 +-
 .../src/side-drawer.component.scss            |  14 +-
 .../sdcorejs-angular/components/tab/sd-tab.md |   2 +-
 .../tab/src/tab-group.component.scss          |  20 +-
 .../components/table/sd-table.md              |   4 +-
 .../components/action-menu/action-menu.scss   |  67 ++++++
 .../src/components/action-menu/action-menu.ts |  67 ++++++
 .../command/desktop-command.component.html    |  32 ++-
 .../command/desktop-command.component.scss    |  15 +-
 .../command/desktop-command.component.spec.ts |  67 +++++-
 .../command/desktop-command.component.ts      |   6 +-
 .../selector-action-layout.component.spec.ts  |  48 ++++
 .../selector-action.component.html            | 119 ++++++----
 .../selector-action.component.scss            |   8 +-
 .../selector-action.component.ts              |   5 +-
 .../src/sd-hover-copy-overlay.spec.ts         |  96 ++++++++
 .../src/sd-hover-copy.directive.spec.ts       |  25 +-
 .../directives/src/sd-hover-copy.directive.ts |  55 ++++-
 .../directives/src/sd-hover-copy.md           |   7 +-
 .../projects/sdcorejs-angular/i18n/src/en.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ja.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ko.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/vi.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/zh.ts  |   1 +
 .../projects/sdcorejs-angular/karma.conf.js   |   2 +-
 .../shared/menu-tree/menu-tree.component.html |  74 +++---
 .../shared/menu-tree/menu-tree.component.scss |  20 +-
 .../menu-tree/menu-tree.component.spec.ts     |   1 +
 .../shared/menu-tree/menu-tree.component.ts   |  20 +-
 .../components/sidebar-v3/main.component.html |   2 +
 .../sidebar-v3/main.component.spec.ts         | 136 ++++++++++-
 .../components/sidebar-v3/main.component.ts   |  20 ++
 .../modules/layout/sd-layout.md               |   4 +
 .../projects/sdcorejs-angular/ng-package.json |   1 -
 .../projects/sdcorejs-angular/package.json    |   2 -
 versions/v21/README.md                        |   2 +-
 versions/v21/SYNC-STATUS.md                   |   2 +-
 versions/v21/package-lock.json                |  19 --
 versions/v21/package.json                     |   1 -
 .../v21/projects/sdcorejs-angular/README.md   |   6 +-
 .../components/chart/index.ts                 |   4 -
 .../components/chart/ng-package.json          |   6 -
 .../components/chart/sd-chart.md              | 140 -----------
 .../chart/src/bar-chart.component.ts          |  88 -------
 .../chart/src/doughnut-chart.component.ts     |  64 -----
 .../chart/src/line-chart.component.ts         |  88 -------
 .../chart/src/pie-chart.component.ts          |  64 -----
 .../form-generic/sd-form-generic.md           |  19 ++
 .../attribute/group-attribute.component.html  |   4 +
 .../group-attribute.component.spec.ts         |  61 +++++
 .../attribute/group-attribute.component.ts    |   3 +-
 .../form-render/form-render.component.html    |   2 +-
 .../form-render/form-render.component.spec.ts | 103 ++++++++
 .../models/form-generic-component.model.ts    |   1 +
 .../components/history/sd-history.md          |   2 +-
 .../sdcorejs-angular/components/index.ts      |   1 -
 .../components/modal/sd-modal.md              |   4 +-
 .../components/modal/src/modal.component.scss |  13 +-
 .../query-builder/sd-query-builder.md         |   5 +-
 .../src/query-builder-overlay.spec.ts         | 135 +++++++++++
 .../src/query-builder.component.html          |  35 ++-
 .../src/query-builder.component.scss          |   8 -
 .../src/query-builder.component.ts            |  35 ++-
 .../components/side-drawer/sd-side-drawer.md  |   6 +-
 .../src/side-drawer.component.scss            |  14 +-
 .../sdcorejs-angular/components/tab/sd-tab.md |   2 +-
 .../tab/src/tab-group.component.scss          |  20 +-
 .../components/table/sd-table.md              |   4 +-
 .../components/action-menu/action-menu.scss   |  67 ++++++
 .../src/components/action-menu/action-menu.ts |  67 ++++++
 .../command/desktop-command.component.html    |  32 ++-
 .../command/desktop-command.component.scss    |  15 +-
 .../command/desktop-command.component.spec.ts |  67 +++++-
 .../command/desktop-command.component.ts      |   6 +-
 .../selector-action-layout.component.spec.ts  |  48 ++++
 .../selector-action.component.html            | 119 ++++++----
 .../selector-action.component.scss            |   8 +-
 .../selector-action.component.ts              |   5 +-
 .../src/sd-hover-copy-overlay.spec.ts         |  96 ++++++++
 .../src/sd-hover-copy.directive.spec.ts       |  25 +-
 .../directives/src/sd-hover-copy.directive.ts |  55 ++++-
 .../directives/src/sd-hover-copy.md           |   7 +-
 .../projects/sdcorejs-angular/i18n/src/en.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ja.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ko.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/vi.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/zh.ts  |   1 +
 .../projects/sdcorejs-angular/karma.conf.js   |   2 +-
 .../shared/menu-tree/menu-tree.component.html |  74 +++---
 .../shared/menu-tree/menu-tree.component.scss |  20 +-
 .../menu-tree/menu-tree.component.spec.ts     |   1 +
 .../shared/menu-tree/menu-tree.component.ts   |  20 +-
 .../components/sidebar-v3/main.component.html |   2 +
 .../sidebar-v3/main.component.spec.ts         | 136 ++++++++++-
 .../components/sidebar-v3/main.component.ts   |  20 ++
 .../modules/layout/sd-layout.md               |   4 +
 .../projects/sdcorejs-angular/ng-package.json |   1 -
 .../projects/sdcorejs-angular/package.json    |   2 -
 versions/v22/README.md                        |   2 +-
 versions/v22/SYNC-STATUS.md                   |   2 +-
 versions/v22/package-lock.json                |  19 --
 versions/v22/package.json                     |   1 -
 .../v22/projects/sdcorejs-angular/README.md   |   6 +-
 .../components/chart/index.ts                 |   4 -
 .../components/chart/ng-package.json          |   6 -
 .../components/chart/sd-chart.md              | 140 -----------
 .../chart/src/bar-chart.component.ts          |  88 -------
 .../chart/src/doughnut-chart.component.ts     |  64 -----
 .../chart/src/line-chart.component.ts         |  88 -------
 .../chart/src/pie-chart.component.ts          |  64 -----
 .../form-generic/sd-form-generic.md           |  19 ++
 .../attribute/group-attribute.component.html  |   4 +
 .../group-attribute.component.spec.ts         |  61 +++++
 .../attribute/group-attribute.component.ts    |   3 +-
 .../form-render/form-render.component.html    |   2 +-
 .../form-render/form-render.component.spec.ts | 103 ++++++++
 .../models/form-generic-component.model.ts    |   1 +
 .../components/history/sd-history.md          |   2 +-
 .../sdcorejs-angular/components/index.ts      |   1 -
 .../components/modal/sd-modal.md              |   4 +-
 .../components/modal/src/modal.component.scss |  13 +-
 .../query-builder/sd-query-builder.md         |   5 +-
 .../src/query-builder-overlay.spec.ts         | 137 +++++++++++
 .../src/query-builder.component.html          |  35 ++-
 .../src/query-builder.component.scss          |   8 -
 .../src/query-builder.component.ts            |  35 ++-
 .../components/side-drawer/sd-side-drawer.md  |   6 +-
 .../src/side-drawer.component.scss            |  14 +-
 .../sdcorejs-angular/components/tab/sd-tab.md |   2 +-
 .../tab/src/tab-group.component.scss          |  20 +-
 .../components/table/sd-table.md              |   4 +-
 .../components/action-menu/action-menu.scss   |  67 ++++++
 .../src/components/action-menu/action-menu.ts |  67 ++++++
 .../command/desktop-command.component.html    |  32 ++-
 .../command/desktop-command.component.scss    |  15 +-
 .../command/desktop-command.component.spec.ts |  67 +++++-
 .../command/desktop-command.component.ts      |   6 +-
 .../selector-action-layout.component.spec.ts  |  48 ++++
 .../selector-action.component.html            | 119 ++++++----
 .../selector-action.component.scss            |   8 +-
 .../selector-action.component.ts              |   5 +-
 .../src/sd-hover-copy-overlay.spec.ts         |  98 ++++++++
 .../src/sd-hover-copy.directive.spec.ts       |  25 +-
 .../directives/src/sd-hover-copy.directive.ts |  55 ++++-
 .../directives/src/sd-hover-copy.md           |   7 +-
 .../projects/sdcorejs-angular/i18n/src/en.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ja.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/ko.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/vi.ts  |   1 +
 .../projects/sdcorejs-angular/i18n/src/zh.ts  |   1 +
 .../projects/sdcorejs-angular/karma.conf.js   |   2 +-
 .../shared/menu-tree/menu-tree.component.html |  74 +++---
 .../shared/menu-tree/menu-tree.component.scss |  20 +-
 .../menu-tree/menu-tree.component.spec.ts     |   1 +
 .../shared/menu-tree/menu-tree.component.ts   |  20 +-
 .../components/sidebar-v3/main.component.html |   2 +
 .../sidebar-v3/main.component.spec.ts         | 136 ++++++++++-
 .../components/sidebar-v3/main.component.ts   |  20 ++
 .../modules/layout/sd-layout.md               |   4 +
 .../projects/sdcorejs-angular/ng-package.json |   1 -
 .../projects/sdcorejs-angular/package.json    |   2 -
 268 files changed, 4803 insertions(+), 3159 deletions(-)
 delete mode 100644 showcase/src/app/pages/components/chart/chart-demo.component.ts
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/index.ts
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/ng-package.json
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/sd-chart.md
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
 delete mode 100644 versions/v19/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
 create mode 100644 versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
 create mode 100644 versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
 create mode 100644 versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
 create mode 100644 versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
 create mode 100644 versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/index.ts
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/ng-package.json
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/sd-chart.md
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
 delete mode 100644 versions/v20/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
 create mode 100644 versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
 create mode 100644 versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
 create mode 100644 versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
 create mode 100644 versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
 create mode 100644 versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/index.ts
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/ng-package.json
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/sd-chart.md
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
 delete mode 100644 versions/v21/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
 create mode 100644 versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
 create mode 100644 versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
 create mode 100644 versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
 create mode 100644 versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
 create mode 100644 versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/index.ts
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/ng-package.json
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/sd-chart.md
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
 delete mode 100644 versions/v22/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
 create mode 100644 versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
 create mode 100644 versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
 create mode 100644 versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
 create mode 100644 versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
 create mode 100644 versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76ad1c00c..149c0e13f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,33 @@ Format dựa trên [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Maj
 
 ## [Unreleased]
 
+### Changed (BREAKING for consumers)
+
+- Remove `@sdcorejs/angular/components/chart` and its `SdLineChartComponent`, `SdBarChartComponent`, `SdPieChartComponent`, and `SdDoughnutChartComponent` exports (also removed from the root/components barrels). Chart.js is no longer a Core UI dependency; consumers choose, install, and configure their own chart library. `sd-org-chart` remains available.
+
+  Migration: remove the Core UI chart imports and replace `<sd-line-chart>`, `<sd-bar-chart>`, `<sd-pie-chart>`, and `<sd-doughnut-chart>` in consumer templates. If retaining Chart.js, declare `chart.js` as a direct application dependency and own its canvas lifecycle and registration:
+
+  ```diff
+  - import { SdLineChartComponent } from '@sdcorejs/angular/components/chart';
+  - // Component imports: [SdLineChartComponent]
+  + import { Chart, registerables } from 'chart.js'; // installed by the consumer
+  + Chart.register(...registerables);
+  + // Create a Chart on the application's canvas and destroy it during teardown.
+  ```
+
+### Added
+
+- Sidebar V3 supports independent expand/collapse of menu groups at every depth, with keyboard-accessible disclosure buttons. Group state survives search and sidebar rail toggles; navigation opens the active branch, and selecting a group icon in the rail opens that group.
+- Form builder groups support `properties.collapsible` (default `false`), matching `sd-section`. Enable it to expand/collapse groups in preview and form render while preserving child values and validation. Group conditions remain limited to visibility; disabled-when rules belong to child fields.
+
+### Fixed
+
+- Table row-command children and selection-action menus use a compact white CDK menu with 36px rows, 18px icons and 8px corners. Preserve child filtering, disabled commands, callbacks, keyboard navigation, focus restoration and overlay placement outside clipped cells; touch targets remain 44px.
+- Side drawer, dialog and bottom-sheet headers/footers share a white background and use compact 12px vertical and 16px horizontal padding. Body content also uses `12px 16px` padding on desktop and mobile, including its own top spacing below the separate header surface; mobile safe-area spacing and touch targets remain supported.
+- Tab group pills clip hover/ripple effects to their rounded shape and retain the active fill on hover. Segmented tabs have a 4px gap so adjacent hover backgrounds remain separate.
+- Hover-copy confirmation tooltips render in a CDK overlay above table rows and outside clipped cells. Scrolling, disabling and teardown clean up the overlay; initial rendering creates only one copy button.
+- Query builder's add-condition/group menu renders outside ancestor overflow, keeping both actions visible in short modal bodies. Backdrop/Escape dismissal and focus restoration keep the surrounding modal open.
+
 ## [2.8] - 2026-09-11
 
 Release suffix `2.8` targets `19.2.8`, `20.2.8`, `21.2.8`, and `22.2.8`.
diff --git a/README.md b/README.md
index daffba2a6..161822cad 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
 
 | Area                 | What the library provides                                                                                                                  |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| UI components        | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, and editors                                   |
+| UI components        | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, and editors                                           |
 | Data and workflow    | Local/server tables, query builders, entity/tree pickers, unsaved-change guards, background tasks, file upload, and Excel import           |
 | Form controls        | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, color, and inline text |
 | Application services | Typed API/retry/cancel, ref-counted loading, graph-safe storage/cache/persistence, viewport signals, notifications, and Excel               |
diff --git a/README.npm.md b/README.npm.md
index e84c41a42..234a3770d 100644
--- a/README.npm.md
+++ b/README.npm.md
@@ -91,18 +91,20 @@ Replace the timer with your typed service call and reset `saving` in a `finally`
 
 | Area              | Representative APIs                                                                                                             |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, editors, and document tooling      |
+| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, editors, and document tooling              |
 | Data and workflow | Local/server tables, entity/tree pickers, query builders, unsaved-change guards, background tasks, upload, and Excel import     |
 | Form controls     | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, and color   |
 | Services          | Typed API/retry/cancel, ref-counted loading, graph-safe persistence/cache/storage, viewport signals, notifications, and exports |
 | Portal modules    | Auth, Keycloak, permission, layout, and icon modules                                                                            |
 | Localization      | Built-in `vi`, `en`, `ja`, `ko`, and `zh` catalogs, plus a synchronous custom-catalog provider                                  |
 
+Charting libraries are selected, installed, and configured by the consuming application. Core UI does not bundle a chart engine; `sd-org-chart` remains available for organizational hierarchies.
+
 The [live showcase](https://sdcorejs.github.io/sdcorejs-angular/) demonstrates components, forms, and services. The [latest API manifest](https://sdcorejs.github.io/sdcorejs-angular/docs/latest/index.json) lists every published reference document without duplicating the full API here.
 
 ## Standalone and subpath imports
 
-Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. The package declares `sideEffects: false`.
+Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. Stylesheets and editor registration entry points are retained as side effects.
 
 ```ts
 import { SdButton } from '@sdcorejs/angular/components/button';
diff --git a/scripts/generate-showcase-route-shells.test.mjs b/scripts/generate-showcase-route-shells.test.mjs
index 8dae79906..48755a3ea 100644
--- a/scripts/generate-showcase-route-shells.test.mjs
+++ b/scripts/generate-showcase-route-shells.test.mjs
@@ -184,7 +184,8 @@ test('matches the canonical v19 runtime registry and expected deployment route c
       .map(category => [category, pages.filter(page => page.category === category).length])
   );
 
-  assert.equal(pages.length, 99);
+  assert.equal(pages.length, 98);
+  assert.ok(!pages.some(page => page.category === 'components' && page.slug === 'chart'));
   assert.ok(pages.some(page => page.category === 'pipes-utilities' && page.slug === 'read-state'));
 
   // why: `routes.length` từng là hằng số 5941 và đã mục ngay khi release 1.6 ra (thực tế 7426).
@@ -201,7 +202,7 @@ test('matches the canonical v19 runtime registry and expected deployment route c
     'total = 1 root redirect + one identical block per release'
   );
   assert.deepEqual(categoryCounts, {
-    components: 37,
+    components: 36,
     directives: 6,
     forms: 22,
     guides: 3,
diff --git a/scripts/lint-phase.mjs b/scripts/lint-phase.mjs
index 952e731f8..6c6cafeaf 100644
--- a/scripts/lint-phase.mjs
+++ b/scripts/lint-phase.mjs
@@ -30,7 +30,6 @@ const phasePaths = {
     'projects/sdcorejs-angular/components/avatar',
     'projects/sdcorejs-angular/components/badge',
     'projects/sdcorejs-angular/components/button',
-    'projects/sdcorejs-angular/components/chart',
   ],
   'components-editor': [
     'projects/sdcorejs-angular/components/ckeditor-styles',
diff --git a/showcase/package-lock.json b/showcase/package-lock.json
index 23568242c..9c3114b1e 100644
--- a/showcase/package-lock.json
+++ b/showcase/package-lock.json
@@ -24,7 +24,6 @@
         "@lucide/angular": "^1.22.0",
         "@sdcorejs/angular-material-datetime": "1.0.4",
         "@sdcorejs/utils": "1.1.4",
-        "chart.js": "^4.5.1",
         "ckeditor5": "48.0.0",
         "date-fns": "^3.6.0",
         "exceljs": "^4.4.0",
@@ -4708,12 +4707,6 @@
         "tslib": "2"
       }
     },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -8291,18 +8284,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
diff --git a/showcase/package.json b/showcase/package.json
index 58a2b3b50..52a32ea10 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -29,7 +29,6 @@
     "@lucide/angular": "^1.22.0",
     "@sdcorejs/angular-material-datetime": "1.0.4",
     "@sdcorejs/utils": "1.1.4",
-    "chart.js": "^4.5.1",
     "ckeditor5": "48.0.0",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
diff --git a/showcase/src/app/docs/core/documentation.registry.spec.ts b/showcase/src/app/docs/core/documentation.registry.spec.ts
index c68b4c61e..bcf888ac3 100644
--- a/showcase/src/app/docs/core/documentation.registry.spec.ts
+++ b/showcase/src/app/docs/core/documentation.registry.spec.ts
@@ -4,7 +4,7 @@ import { SHOWCASE_EXAMPLE_SOURCES } from '../generated/example-sources.generated
 
 const EXPECTED_CATEGORY_COUNTS = {
   guides: 3,
-  components: 37,
+  components: 36,
   forms: 22,
   directives: 6,
   services: 11,
@@ -17,14 +17,15 @@ describe('documentation registry', () => {
     const publishedIds = DOC_PAGES.map(page => page.publishedDocId).filter(id => id !== null);
     const localOnlyPages = DOC_PAGES.filter(page => page.publishedDocId === null);
 
-    expect(DOC_PAGES).toHaveSize(99);
-    expect(new Set(publishedIds).size).toBe(99);
+    expect(DOC_PAGES).toHaveSize(98);
+    expect(new Set(publishedIds).size).toBe(98);
+    expect(DOC_PAGES.some(page => page.category === 'components' && page.slug === 'chart')).toBeFalse();
     expect(localOnlyPages).toHaveSize(0);
     expect(DOC_CATEGORIES).toHaveSize(7);
     for (const category of DOC_CATEGORIES) {
       expect(getDocPagesByCategory(category)).withContext(category).toHaveSize(EXPECTED_CATEGORY_COUNTS[category]);
     }
-    expect(DOC_PAGES.reduce((total, page) => total + page.demoSectionCount, 0)).toBe(360);
+    expect(DOC_PAGES.reduce((total, page) => total + page.demoSectionCount, 0)).toBe(357);
   });
 
   it('uses unique stable page ids and category/slug pairs', () => {
@@ -46,7 +47,7 @@ describe('documentation registry', () => {
     const exampleIds = DOC_PAGES.flatMap(page => page.examples.map(example => example.id));
 
     expect(new Set(exampleIds).size).toBe(exampleIds.length);
-    expect(exampleIds).toHaveSize(360);
+    expect(exampleIds).toHaveSize(357);
     expect(findDocPage('components', 'table')?.examples.map(example => example.sectionId)).toContain('example-quick-search');
     expect(findDocPage('components', 'table')?.examples.map(example => example.sectionId)).toContain('example-external-filters');
     for (const page of DOC_PAGES) {
@@ -61,7 +62,7 @@ describe('documentation registry', () => {
   });
 
   it('derives navigation groups and canonical/legacy lookup helpers from the registry', () => {
-    expect(DOC_NAV_GROUPS.map(group => group.pages.length)).toEqual([3, 37, 22, 6, 11, 10, 10]);
+    expect(DOC_NAV_GROUPS.map(group => group.pages.length)).toEqual([3, 36, 22, 6, 11, 10, 10]);
     expect(findDocPage('components', 'button')?.title).toBe('Button');
     expect(findDocPage('directives', 'tooltip')?.publishedDocId).toBe('directives/src/sd-tooltip');
     expect(findDocPage('components', 'generic')?.title).toBe('Form Generic');
diff --git a/showcase/src/app/docs/core/documentation.registry.ts b/showcase/src/app/docs/core/documentation.registry.ts
index 55a038b53..04c57d586 100644
--- a/showcase/src/app/docs/core/documentation.registry.ts
+++ b/showcase/src/app/docs/core/documentation.registry.ts
@@ -202,19 +202,6 @@ const COMPONENT_PAGES = [
     demoSectionCount: 3,
     loadComponent: () => import('../../pages/components/breadcrumb/breadcrumb-demo.component').then(m => m.BreadcrumbDemoComponent),
   }),
-  defineDocPage({
-    category: 'components',
-    slug: 'chart',
-    title: 'Chart',
-    description: 'Biểu đồ Chart.js cho dashboard và báo cáo: line, bar, pie và doughnut.',
-    selector: 'sd-line-chart, sd-bar-chart, sd-pie-chart, sd-doughnut-chart',
-    importPath: '@sdcorejs/angular/components/chart',
-    publishedDocId: 'components/chart/sd-chart',
-    keywords: ['chart.js', 'dashboard', 'report', 'visualization'],
-    status: 'stable',
-    demoSectionCount: 3,
-    loadComponent: () => import('../../pages/components/chart/chart-demo.component').then(m => m.ChartDemoComponent),
-  }),
   defineDocPage({
     category: 'components',
     slug: 'code-editor',
diff --git a/showcase/src/app/docs/generated/example-manifest.generated.ts b/showcase/src/app/docs/generated/example-manifest.generated.ts
index f4ac4012f..3fb43bb3a 100644
--- a/showcase/src/app/docs/generated/example-manifest.generated.ts
+++ b/showcase/src/app/docs/generated/example-manifest.generated.ts
@@ -48,9 +48,6 @@ export type ShowcaseExampleSourceKey =
   | "components/card/example-object-comparewith"
   | "components/card/example-single-selection"
   | "components/card/example-standalone-card"
-  | "components/chart/example-bieu-do-bar"
-  | "components/chart/example-bieu-do-line"
-  | "components/chart/example-bieu-do-pie-doughnut"
   | "components/code-editor/example-che-do-xem-json"
   | "components/code-editor/example-ngon-ngu-html"
   | "components/code-editor/example-ngon-ngu-typescript"
@@ -694,27 +691,6 @@ export const SHOWCASE_EXAMPLE_MANIFEST = [
     title: "Disabled và color",
     description: "Gồm selected+disabled, group disabled, inherited color, override color và standalone selected state.",
   },
-  {
-    sourceKey: "components/chart/example-bieu-do-line",
-    pageKey: "components/chart",
-    sectionId: "example-bieu-do-line",
-    title: "Biểu đồ Line",
-    description: "Existing “Biểu đồ Line” scenario preserved from the showcase.",
-  },
-  {
-    sourceKey: "components/chart/example-bieu-do-bar",
-    pageKey: "components/chart",
-    sectionId: "example-bieu-do-bar",
-    title: "Biểu đồ Bar",
-    description: "Existing “Biểu đồ Bar” scenario preserved from the showcase.",
-  },
-  {
-    sourceKey: "components/chart/example-bieu-do-pie-doughnut",
-    pageKey: "components/chart",
-    sectionId: "example-bieu-do-pie-doughnut",
-    title: "Biểu đồ Pie & Doughnut",
-    description: "Existing “Biểu đồ Pie & Doughnut” scenario preserved from the showcase.",
-  },
   {
     sourceKey: "components/code-editor/example-ngon-ngu-typescript",
     pageKey: "components/code-editor",
@@ -804,7 +780,7 @@ export const SHOWCASE_EXAMPLE_MANIFEST = [
     pageKey: "components/form-generic",
     sectionId: "example-builder-render",
     title: "Builder + Render",
-    description: "Existing “Builder + Render” scenario preserved from the showcase.",
+    description: "Group có thể thu gọn/mở rộng trong preview; điều kiện vô hiệu hóa được cấu hình trên từng trường con.",
   },
   {
     sourceKey: "components/history/example-luong-phe-duyet",
@@ -1574,7 +1550,7 @@ export const SHOWCASE_EXAMPLE_MANIFEST = [
     pageKey: "components/table",
     sectionId: "example-lenh-dong-co-menu-con",
     title: "Lệnh dòng có menu con",
-    description: "Command có children sẽ render thành nút menu; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.",
+    description: "Command và action children dùng menu gọn nền trắng. Chọn dòng để thử action nhóm; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.",
   },
   {
     sourceKey: "components/table/example-keo-tha-doi-thu-tu",
@@ -2512,7 +2488,7 @@ export const SHOWCASE_EXAMPLE_MANIFEST = [
     pageKey: "modules/layout",
     sectionId: "example-sidebar-v3-collapsible",
     title: "Sidebar V3 - Collapsible",
-    description: "Root icons, text-only nested branches and a compact search field on desktop; shared pinned and recent menus.",
+    description: "Bấm từng nhóm menu để đóng/mở các mục con trên desktop. Tìm kiếm vẫn thấy mục trong nhóm đã đóng; thu gọn cả sidebar giữ trạng thái từng nhóm.",
   },
   {
     sourceKey: "pipes-utilities/empty/example-gia-tri-rong-hien-thi-dau-gach",
diff --git a/showcase/src/app/docs/generated/example-sources.generated.ts b/showcase/src/app/docs/generated/example-sources.generated.ts
index 2e7ded5a1..642335969 100644
--- a/showcase/src/app/docs/generated/example-sources.generated.ts
+++ b/showcase/src/app/docs/generated/example-sources.generated.ts
@@ -1538,165 +1538,6 @@ export class CardStandaloneExampleComponent {
   margin: 0;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 12px;
-}`,
-  },
-  "components/chart": {
-    typescript: `import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ChartData, ChartOptions } from 'chart.js';
-import { DemoPageComponent, DemoSectionComponent } from '../../../shared/demo-page.component';
-import {
-  SdLineChartComponent,
-  SdBarChartComponent,
-  SdPieChartComponent,
-  SdDoughnutChartComponent,
-} from '@sdcorejs/angular/components/chart';
-
-@Component({
-  selector: 'app-chart-demo',
-  standalone: true,
-  imports: [
-    DemoPageComponent,
-    DemoSectionComponent,
-    SdLineChartComponent,
-    SdBarChartComponent,
-    SdPieChartComponent,
-    SdDoughnutChartComponent,
-  ],
-  template: \`
-    <demo-page #demoPage
-      title="Chart"
-      description="Bộ biểu đồ dựa trên Chart.js — line / bar / pie / doughnut. Thường dùng trên dashboard và báo cáo.">
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-line') {
-      <demo-section heading="Biểu đồ Line" [props]="[{ name: 'type', value: 'line' }]">
-        <div class="chart-box">
-          <sd-line-chart [data]="lineData" [options]="lineOptions"></sd-line-chart>
-        </div>
-      </demo-section>
-      }
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-bar') {
-      <demo-section heading="Biểu đồ Bar" [props]="[{ name: 'type', value: 'bar' }]">
-        <div class="chart-box">
-          <sd-bar-chart [data]="barData" [options]="barOptions"></sd-bar-chart>
-        </div>
-      </demo-section>
-      }
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-pie-doughnut') {
-      <demo-section heading="Biểu đồ Pie & Doughnut" [props]="[{ name: 'type', value: 'pie / doughnut' }]">
-        <div class="row">
-          <div class="chart-box small">
-            <sd-pie-chart [data]="pieData"></sd-pie-chart>
-          </div>
-          <div class="chart-box small">
-            <sd-doughnut-chart [data]="doughnutData"></sd-doughnut-chart>
-          </div>
-        </div>
-      </demo-section>
-      }
-    </demo-page>
-  \`,
-  styles: [\`
-    .chart-box {
-      width: 100%;
-      height: 320px;
-    }
-    .chart-box.small {
-      height: 280px;
-      flex: 1;
-      min-width: 280px;
-    }
-    .row {
-      display: flex;
-      gap: 24px;
-      width: 100%;
-      flex-wrap: wrap;
-    }
-  \`],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChartDemoComponent {
-  readonly lineData: ChartData<'line'> = {
-    labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-    datasets: [
-      {
-        label: 'Doanh thu (tỷ VND)',
-        data: [12.5, 14.2, 13.8, 16.4, 18.1, 19.5],
-        borderColor: '#005cbb',
-        backgroundColor: 'rgba(0, 92, 187, 0.14)',
-        fill: true,
-        tension: 0.35,
-      },
-      {
-        label: 'Chi phí (tỷ VND)',
-        data: [9.4, 10.1, 10.6, 11.0, 11.8, 12.3],
-        borderColor: '#e64a19',
-        backgroundColor: 'rgba(230, 74, 25, 0.10)',
-        fill: true,
-        tension: 0.35,
-      },
-    ],
-  };
-
-  readonly lineOptions: ChartOptions<'line'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: { legend: { position: 'bottom' } },
-  };
-
-  readonly barData: ChartData<'bar'> = {
-    labels: ['Công nghệ', 'Kinh doanh', 'Nhân sự', 'Tài chính', 'Marketing'],
-    datasets: [
-      {
-        label: 'KPI đạt được (%)',
-        data: [92, 110, 85, 96, 102],
-        backgroundColor: ['#005cbb', '#2e7d32', '#f9a825', '#6a1b9a', '#0277bd'],
-      },
-    ],
-  };
-
-  readonly barOptions: ChartOptions<'bar'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: { legend: { display: false } },
-  };
-
-  readonly pieData: ChartData<'pie'> = {
-    labels: ['Nhân sự', 'Marketing', 'Vận hành', 'Khác'],
-    datasets: [
-      {
-        data: [42, 23, 25, 10],
-        backgroundColor: ['#005cbb', '#e64a19', '#2e7d32', '#9e9e9e'],
-      },
-    ],
-  };
-
-  readonly doughnutData: ChartData<'doughnut'> = {
-    labels: ['Nhân sự', 'Marketing', 'Vận hành', 'Khác'],
-    datasets: [
-      {
-        data: [42, 23, 25, 10],
-        backgroundColor: ['#005cbb', '#e64a19', '#2e7d32', '#9e9e9e'],
-      },
-    ],
-  };
-}
-`,
-    scss: `.chart-box {
-  width: 100%;
-  height: 320px;
-}
-.chart-box.small {
-  height: 280px;
-  flex: 1;
-  min-width: 280px;
-}
-.row {
-  display: flex;
-  gap: 24px;
-  width: 100%;
-  flex-wrap: wrap;
 }`,
   },
   "components/code-editor": {
@@ -2284,7 +2125,7 @@ const SEED: SdFormGeneric = {
       type: 'group',
       label: 'Địa chỉ giao hàng',
       layout: { columns: '12' },
-      properties: { icon: 'inventory_2', color: 'secondary' },
+      properties: { icon: 'inventory_2', color: 'secondary', collapsible: true },
       components: [
         {
           id: 'g1c1',
@@ -2461,7 +2302,9 @@ const DRAG_DROP_POPUP_SEED: SdFormGeneric = {
       title="Form Generic"
       description="Dynamic form builder and renderer with schema-safe drag/drop, group detail editing, query-builder conditions, and runtime preview.">
       @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-builder-render') {
-      <demo-section heading="Builder + Render" [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }]">
+      <demo-section heading="Builder + Render"
+        [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }, { name: 'properties.collapsible', value: 'true' }]"
+        note="Group có thể thu gọn/mở rộng trong preview; điều kiện vô hiệu hóa được cấu hình trên từng trường con.">
         <div class="row-actions">
           <sd-button type="outline" color="primary" title="Đặt lại" prefixIcon="restart_alt" (click)="reset()"></sd-button>
           <sd-button type="outline" color="secondary" title="Tải form rỗng" prefixIcon="layers_clear" (click)="loadEmpty()"></sd-button>
@@ -3651,7 +3494,7 @@ import { SdSection, SdSectionItem } from '@sdcorejs/angular/components/section';
           heading="Basic modal + footer right"
           [props]="[
             { name: 'sdFooterRight', value: 'template' },
-            { name: 'body inset', value: '24px / 16px' },
+            { name: 'body padding', value: '12px 16px' },
           ]">
           <sd-button type="fill" color="primary" prefixIcon="info" title="Open detail" (click)="basic.open()"></sd-button>
 
@@ -6863,7 +6706,7 @@ const TASKS: Task[] = [
           { name: 'command.commands[].children', value: 'SdTableCommandNormal[]' },
           { name: 'command.align', value: 'right' }
         ]"
-        note="Command có children sẽ render thành nút menu; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
+        note="Command và action children dùng menu gọn nền trắng. Chọn dòng để thử action nhóm; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
         <div class="table-box">
           <sd-table [option]="commandChildrenOption"><ng-template [sdTableRowMobileDef]="commandChildrenOption" let-row="item"><strong>{{ row.code }}</strong><div>{{ row.name }}</div></ng-template></sd-table>
         </div>
@@ -7430,6 +7273,15 @@ export class TableDemoComponent {
     type: 'local',
     items: () => PRODUCTS,
     filler: { enabled: true },
+    selector: {
+      visible: true,
+      actions: [{
+        title: 'Xử lý đã chọn', icon: 'checklist', children: [
+          { title: 'Kiểm kho', icon: 'inventory_2', click: rows => alert('Kiểm kho ' + rows?.length + ' sản phẩm') },
+          { title: 'Xóa', icon: 'delete', color: 'error', click: rows => alert('Xóa ' + rows?.length + ' sản phẩm') },
+        ],
+      }],
+    },
     command: {
       align: 'right',
       commands: [
@@ -12415,7 +12267,7 @@ export class LayoutVersionPreviewComponent {
         <demo-section
           data-layout-showcase="3"
           heading="Sidebar V3 - Collapsible"
-          note="Root icons, text-only nested branches and a compact search field on desktop; shared pinned and recent menus."
+          note="Bấm từng nhóm menu để đóng/mở các mục con trên desktop. Tìm kiếm vẫn thấy mục trong nhóm đã đóng; thu gọn cả sidebar giữ trạng thái từng nhóm."
           [props]="[
             { name: 'version', value: '3' },
             { name: 'mobileBreakpoint', value: '900' },
@@ -15483,35 +15335,6 @@ export const SHOWCASE_EXAMPLE_SOURCES = {
   </sd-card>
   <p class="model-readout">selected(): {{ lastSelected() }}</p>
 </div>`,
-  },
-  "components/chart/example-bieu-do-bar": {
-    ...SHOWCASE_PAGE_SOURCES["components/chart"],
-    html: `<demo-section heading="Biểu đồ Bar" [props]="[{ name: 'type', value: 'bar' }]">
-    <div class="chart-box">
-      <sd-bar-chart [data]="barData" [options]="barOptions"></sd-bar-chart>
-    </div>
-  </demo-section>`,
-  },
-  "components/chart/example-bieu-do-line": {
-    ...SHOWCASE_PAGE_SOURCES["components/chart"],
-    html: `<demo-section heading="Biểu đồ Line" [props]="[{ name: 'type', value: 'line' }]">
-    <div class="chart-box">
-      <sd-line-chart [data]="lineData" [options]="lineOptions"></sd-line-chart>
-    </div>
-  </demo-section>`,
-  },
-  "components/chart/example-bieu-do-pie-doughnut": {
-    ...SHOWCASE_PAGE_SOURCES["components/chart"],
-    html: `<demo-section heading="Biểu đồ Pie & Doughnut" [props]="[{ name: 'type', value: 'pie / doughnut' }]">
-    <div class="row">
-      <div class="chart-box small">
-        <sd-pie-chart [data]="pieData"></sd-pie-chart>
-      </div>
-      <div class="chart-box small">
-        <sd-doughnut-chart [data]="doughnutData"></sd-doughnut-chart>
-      </div>
-    </div>
-  </demo-section>`,
   },
   "components/code-editor/example-che-do-xem-json": {
     ...SHOWCASE_PAGE_SOURCES["components/code-editor"],
@@ -15713,7 +15536,9 @@ export const SHOWCASE_EXAMPLE_SOURCES = {
   },
   "components/form-generic/example-builder-render": {
     ...SHOWCASE_PAGE_SOURCES["components/form-generic"],
-    html: `<demo-section heading="Builder + Render" [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }]">
+    html: `<demo-section heading="Builder + Render"
+    [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }, { name: 'properties.collapsible', value: 'true' }]"
+    note="Group có thể thu gọn/mở rộng trong preview; điều kiện vô hiệu hóa được cấu hình trên từng trường con.">
     <div class="row-actions">
       <sd-button type="outline" color="primary" title="Đặt lại" prefixIcon="restart_alt" (click)="reset()"></sd-button>
       <sd-button type="outline" color="secondary" title="Tải form rỗng" prefixIcon="layers_clear" (click)="loadEmpty()"></sd-button>
@@ -15998,7 +15823,7 @@ export const SHOWCASE_EXAMPLE_SOURCES = {
       heading="Basic modal + footer right"
       [props]="[
         { name: 'sdFooterRight', value: 'template' },
-        { name: 'body inset', value: '24px / 16px' },
+        { name: 'body padding', value: '12px 16px' },
       ]">
       <sd-button type="fill" color="primary" prefixIcon="info" title="Open detail" (click)="basic.open()"></sd-button>
 
@@ -17568,7 +17393,7 @@ export const SHOWCASE_EXAMPLE_SOURCES = {
       { name: 'command.commands[].children', value: 'SdTableCommandNormal[]' },
       { name: 'command.align', value: 'right' }
     ]"
-    note="Command có children sẽ render thành nút menu; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
+    note="Command và action children dùng menu gọn nền trắng. Chọn dòng để thử action nhóm; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
     <div class="table-box">
       <sd-table [option]="commandChildrenOption"><ng-template [sdTableRowMobileDef]="commandChildrenOption" let-row="item"><strong>{{ row.code }}</strong><div>{{ row.name }}</div></ng-template></sd-table>
     </div>
@@ -19638,7 +19463,7 @@ export const SHOWCASE_EXAMPLE_SOURCES = {
     html: `<demo-section
       data-layout-showcase="3"
       heading="Sidebar V3 - Collapsible"
-      note="Root icons, text-only nested branches and a compact search field on desktop; shared pinned and recent menus."
+      note="Bấm từng nhóm menu để đóng/mở các mục con trên desktop. Tìm kiếm vẫn thấy mục trong nhóm đã đóng; thu gọn cả sidebar giữ trạng thái từng nhóm."
       [props]="[
         { name: 'version', value: '3' },
         { name: 'mobileBreakpoint', value: '900' },
diff --git a/showcase/src/app/pages/components/chart/chart-demo.component.ts b/showcase/src/app/pages/components/chart/chart-demo.component.ts
deleted file mode 100644
index 66f388a2e..000000000
--- a/showcase/src/app/pages/components/chart/chart-demo.component.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ChartData, ChartOptions } from 'chart.js';
-import { DemoPageComponent, DemoSectionComponent } from '../../../shared/demo-page.component';
-import {
-  SdLineChartComponent,
-  SdBarChartComponent,
-  SdPieChartComponent,
-  SdDoughnutChartComponent,
-} from '@sdcorejs/angular/components/chart';
-
-@Component({
-  selector: 'app-chart-demo',
-  standalone: true,
-  imports: [
-    DemoPageComponent,
-    DemoSectionComponent,
-    SdLineChartComponent,
-    SdBarChartComponent,
-    SdPieChartComponent,
-    SdDoughnutChartComponent,
-  ],
-  template: `
-    <demo-page #demoPage
-      title="Chart"
-      description="Bộ biểu đồ dựa trên Chart.js — line / bar / pie / doughnut. Thường dùng trên dashboard và báo cáo.">
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-line') {
-      <demo-section heading="Biểu đồ Line" [props]="[{ name: 'type', value: 'line' }]">
-        <div class="chart-box">
-          <sd-line-chart [data]="lineData" [options]="lineOptions"></sd-line-chart>
-        </div>
-      </demo-section>
-      }
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-bar') {
-      <demo-section heading="Biểu đồ Bar" [props]="[{ name: 'type', value: 'bar' }]">
-        <div class="chart-box">
-          <sd-bar-chart [data]="barData" [options]="barOptions"></sd-bar-chart>
-        </div>
-      </demo-section>
-      }
-
-      @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-bieu-do-pie-doughnut') {
-      <demo-section heading="Biểu đồ Pie & Doughnut" [props]="[{ name: 'type', value: 'pie / doughnut' }]">
-        <div class="row">
-          <div class="chart-box small">
-            <sd-pie-chart [data]="pieData"></sd-pie-chart>
-          </div>
-          <div class="chart-box small">
-            <sd-doughnut-chart [data]="doughnutData"></sd-doughnut-chart>
-          </div>
-        </div>
-      </demo-section>
-      }
-    </demo-page>
-  `,
-  styles: [`
-    .chart-box {
-      width: 100%;
-      height: 320px;
-    }
-    .chart-box.small {
-      height: 280px;
-      flex: 1;
-      min-width: 280px;
-    }
-    .row {
-      display: flex;
-      gap: 24px;
-      width: 100%;
-      flex-wrap: wrap;
-    }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChartDemoComponent {
-  readonly lineData: ChartData<'line'> = {
-    labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-    datasets: [
-      {
-        label: 'Doanh thu (tỷ VND)',
-        data: [12.5, 14.2, 13.8, 16.4, 18.1, 19.5],
-        borderColor: '#005cbb',
-        backgroundColor: 'rgba(0, 92, 187, 0.14)',
-        fill: true,
-        tension: 0.35,
-      },
-      {
-        label: 'Chi phí (tỷ VND)',
-        data: [9.4, 10.1, 10.6, 11.0, 11.8, 12.3],
-        borderColor: '#e64a19',
-        backgroundColor: 'rgba(230, 74, 25, 0.10)',
-        fill: true,
-        tension: 0.35,
-      },
-    ],
-  };
-
-  readonly lineOptions: ChartOptions<'line'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: { legend: { position: 'bottom' } },
-  };
-
-  readonly barData: ChartData<'bar'> = {
-    labels: ['Công nghệ', 'Kinh doanh', 'Nhân sự', 'Tài chính', 'Marketing'],
-    datasets: [
-      {
-        label: 'KPI đạt được (%)',
-        data: [92, 110, 85, 96, 102],
-        backgroundColor: ['#005cbb', '#2e7d32', '#f9a825', '#6a1b9a', '#0277bd'],
-      },
-    ],
-  };
-
-  readonly barOptions: ChartOptions<'bar'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: { legend: { display: false } },
-  };
-
-  readonly pieData: ChartData<'pie'> = {
-    labels: ['Nhân sự', 'Marketing', 'Vận hành', 'Khác'],
-    datasets: [
-      {
-        data: [42, 23, 25, 10],
-        backgroundColor: ['#005cbb', '#e64a19', '#2e7d32', '#9e9e9e'],
-      },
-    ],
-  };
-
-  readonly doughnutData: ChartData<'doughnut'> = {
-    labels: ['Nhân sự', 'Marketing', 'Vận hành', 'Khác'],
-    datasets: [
-      {
-        data: [42, 23, 25, 10],
-        backgroundColor: ['#005cbb', '#e64a19', '#2e7d32', '#9e9e9e'],
-      },
-    ],
-  };
-}
diff --git a/showcase/src/app/pages/components/form-generic/form-generic-demo.component.ts b/showcase/src/app/pages/components/form-generic/form-generic-demo.component.ts
index ffc502c53..bda0c1220 100644
--- a/showcase/src/app/pages/components/form-generic/form-generic-demo.component.ts
+++ b/showcase/src/app/pages/components/form-generic/form-generic-demo.component.ts
@@ -146,7 +146,7 @@ const SEED: SdFormGeneric = {
       type: 'group',
       label: 'Địa chỉ giao hàng',
       layout: { columns: '12' },
-      properties: { icon: 'inventory_2', color: 'secondary' },
+      properties: { icon: 'inventory_2', color: 'secondary', collapsible: true },
       components: [
         {
           id: 'g1c1',
@@ -323,7 +323,9 @@ const DRAG_DROP_POPUP_SEED: SdFormGeneric = {
       title="Form Generic"
       description="Dynamic form builder and renderer with schema-safe drag/drop, group detail editing, query-builder conditions, and runtime preview.">
       @if (!demoPage.focusedSectionId || demoPage.focusedSectionId === 'example-builder-render') {
-      <demo-section heading="Builder + Render" [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }]">
+      <demo-section heading="Builder + Render"
+        [props]="[{ name: 'formGeneric', value: 'SdFormGeneric' }, { name: 'properties.collapsible', value: 'true' }]"
+        note="Group có thể thu gọn/mở rộng trong preview; điều kiện vô hiệu hóa được cấu hình trên từng trường con.">
         <div class="row-actions">
           <sd-button type="outline" color="primary" title="Đặt lại" prefixIcon="restart_alt" (click)="reset()"></sd-button>
           <sd-button type="outline" color="secondary" title="Tải form rỗng" prefixIcon="layers_clear" (click)="loadEmpty()"></sd-button>
diff --git a/showcase/src/app/pages/components/modal/modal-demo.component.ts b/showcase/src/app/pages/components/modal/modal-demo.component.ts
index 114ad1645..8be600cbf 100644
--- a/showcase/src/app/pages/components/modal/modal-demo.component.ts
+++ b/showcase/src/app/pages/components/modal/modal-demo.component.ts
@@ -19,7 +19,7 @@ import { SdSection, SdSectionItem } from '@sdcorejs/angular/components/section';
           heading="Basic modal + footer right"
           [props]="[
             { name: 'sdFooterRight', value: 'template' },
-            { name: 'body inset', value: '24px / 16px' },
+            { name: 'body padding', value: '12px 16px' },
           ]">
           <sd-button type="fill" color="primary" prefixIcon="info" title="Open detail" (click)="basic.open()"></sd-button>
 
diff --git a/showcase/src/app/pages/components/table/table-demo.component.ts b/showcase/src/app/pages/components/table/table-demo.component.ts
index 42aa09657..a88bd9d94 100644
--- a/showcase/src/app/pages/components/table/table-demo.component.ts
+++ b/showcase/src/app/pages/components/table/table-demo.component.ts
@@ -480,7 +480,7 @@ const TASKS: Task[] = [
           { name: 'command.commands[].children', value: 'SdTableCommandNormal[]' },
           { name: 'command.align', value: 'right' }
         ]"
-        note="Command có children sẽ render thành nút menu; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
+        note="Command và action children dùng menu gọn nền trắng. Chọn dòng để thử action nhóm; các child command vẫn hỗ trợ icon, title, color, disabled, hidden và click theo từng row.">
         <div class="table-box">
           <sd-table [option]="commandChildrenOption"><ng-template [sdTableRowMobileDef]="commandChildrenOption" let-row="item"><strong>{{ row.code }}</strong><div>{{ row.name }}</div></ng-template></sd-table>
         </div>
@@ -1047,6 +1047,15 @@ export class TableDemoComponent {
     type: 'local',
     items: () => PRODUCTS,
     filler: { enabled: true },
+    selector: {
+      visible: true,
+      actions: [{
+        title: 'Xử lý đã chọn', icon: 'checklist', children: [
+          { title: 'Kiểm kho', icon: 'inventory_2', click: rows => alert('Kiểm kho ' + rows?.length + ' sản phẩm') },
+          { title: 'Xóa', icon: 'delete', color: 'error', click: rows => alert('Xóa ' + rows?.length + ' sản phẩm') },
+        ],
+      }],
+    },
     command: {
       align: 'right',
       commands: [
diff --git a/showcase/src/app/pages/modules/layout/layout-demo.component.ts b/showcase/src/app/pages/modules/layout/layout-demo.component.ts
index 6277f7213..025bf1902 100644
--- a/showcase/src/app/pages/modules/layout/layout-demo.component.ts
+++ b/showcase/src/app/pages/modules/layout/layout-demo.component.ts
@@ -384,7 +384,7 @@ export class LayoutVersionPreviewComponent {
         <demo-section
           data-layout-showcase="3"
           heading="Sidebar V3 - Collapsible"
-          note="Root icons, text-only nested branches and a compact search field on desktop; shared pinned and recent menus."
+          note="Bấm từng nhóm menu để đóng/mở các mục con trên desktop. Tìm kiếm vẫn thấy mục trong nhóm đã đóng; thu gọn cả sidebar giữ trạng thái từng nhóm."
           [props]="[
             { name: 'version', value: '3' },
             { name: 'mobileBreakpoint', value: '900' },
diff --git a/versions/v19/README.md b/versions/v19/README.md
index 095db5a3a..67e7ef8cc 100644
--- a/versions/v19/README.md
+++ b/versions/v19/README.md
@@ -176,7 +176,7 @@ Mỗi component / form control / service / module là 1 entry point độc lập
 
 | Group | Items |
 | --- | --- |
-| Display | `badge` · `avatar` · `chart` · `section` · `view` · `inform` |
+| Display | `badge` · `avatar` · `section` · `view` · `inform` |
 | Action | `button` · `quick-action` · `operator` |
 | Layout | `splitter` · `side-drawer` · `tab` · `tab-router` · `stepper` · `modal` · `anchor` |
 | Data | `table` · `tree` · `org-chart` · `query-bar` · `query-builder` · `preview` · `history` |
diff --git a/versions/v19/SYNC-STATUS.md b/versions/v19/SYNC-STATUS.md
index 285736024..6842e1107 100644
--- a/versions/v19/SYNC-STATUS.md
+++ b/versions/v19/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 19 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 09:50:52 |
+| Updated At | 2026-09-11 15:35:26 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v19/package-lock.json b/versions/v19/package-lock.json
index cf102b093..077b0308d 100644
--- a/versions/v19/package-lock.json
+++ b/versions/v19/package-lock.json
@@ -23,7 +23,6 @@
         "@lucide/angular": "^1.22.0",
         "@sdcorejs/angular-material-datetime": "1.0.4",
         "@sdcorejs/utils": "1.1.4",
-        "chart.js": "^4.5.1",
         "ckeditor5": "48.0.0",
         "date-fns": "^3.6.0",
         "exceljs": "^4.4.0",
@@ -5377,12 +5376,6 @@
         "tslib": "2"
       }
     },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -9955,18 +9948,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
diff --git a/versions/v19/package.json b/versions/v19/package.json
index 8ccb30362..c527d8a9c 100644
--- a/versions/v19/package.json
+++ b/versions/v19/package.json
@@ -35,7 +35,6 @@
     "@lucide/angular": "^1.22.0",
     "@sdcorejs/angular-material-datetime": "1.0.4",
     "@sdcorejs/utils": "1.1.4",
-    "chart.js": "^4.5.1",
     "ckeditor5": "48.0.0",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
diff --git a/versions/v19/projects/sdcorejs-angular/README.md b/versions/v19/projects/sdcorejs-angular/README.md
index e84c41a42..234a3770d 100644
--- a/versions/v19/projects/sdcorejs-angular/README.md
+++ b/versions/v19/projects/sdcorejs-angular/README.md
@@ -91,18 +91,20 @@ Replace the timer with your typed service call and reset `saving` in a `finally`
 
 | Area              | Representative APIs                                                                                                             |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, editors, and document tooling      |
+| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, editors, and document tooling              |
 | Data and workflow | Local/server tables, entity/tree pickers, query builders, unsaved-change guards, background tasks, upload, and Excel import     |
 | Form controls     | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, and color   |
 | Services          | Typed API/retry/cancel, ref-counted loading, graph-safe persistence/cache/storage, viewport signals, notifications, and exports |
 | Portal modules    | Auth, Keycloak, permission, layout, and icon modules                                                                            |
 | Localization      | Built-in `vi`, `en`, `ja`, `ko`, and `zh` catalogs, plus a synchronous custom-catalog provider                                  |
 
+Charting libraries are selected, installed, and configured by the consuming application. Core UI does not bundle a chart engine; `sd-org-chart` remains available for organizational hierarchies.
+
 The [live showcase](https://sdcorejs.github.io/sdcorejs-angular/) demonstrates components, forms, and services. The [latest API manifest](https://sdcorejs.github.io/sdcorejs-angular/docs/latest/index.json) lists every published reference document without duplicating the full API here.
 
 ## Standalone and subpath imports
 
-Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. The package declares `sideEffects: false`.
+Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. Stylesheets and editor registration entry points are retained as side effects.
 
 ```ts
 import { SdButton } from '@sdcorejs/angular/components/button';
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/index.ts b/versions/v19/projects/sdcorejs-angular/components/chart/index.ts
deleted file mode 100644
index 7551d46c3..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './src/bar-chart.component';
-export * from './src/line-chart.component';
-export * from './src/pie-chart.component';
-export * from './src/doughnut-chart.component';
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/ng-package.json b/versions/v19/projects/sdcorejs-angular/components/chart/ng-package.json
deleted file mode 100644
index 19e3f2bcb..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/ng-package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/sd-chart.md b/versions/v19/projects/sdcorejs-angular/components/chart/sd-chart.md
deleted file mode 100644
index 8df787871..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/sd-chart.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# `<sd-bar-chart>` / `<sd-line-chart>` / `<sd-pie-chart>` / `<sd-doughnut-chart>`
-
-**Type**: Component family (4 separate components, one per chart type)
-**Selectors**: `sd-bar-chart`, `sd-line-chart`, `sd-pie-chart`, `sd-doughnut-chart`
-**Import path**: `@sdcorejs/angular/components/chart` (or barrel: `@sdcorejs/angular/components`)
-**Classes**: `SdBarChartComponent`, `SdLineChartComponent`, `SdPieChartComponent`, `SdDoughnutChartComponent`
-**Standalone**: yes
-**Change detection**: `OnPush`
-**Underlying engine**: [Chart.js](https://www.chartjs.org/) (all `registerables` registered)
-
-## One-line purpose
-Thin signal-based wrappers around Chart.js — render bar / line / pie / doughnut visualizations from declarative `data` / `options` / `plugins` inputs, with auto-update on signal changes.
-
-## When to use
-- Dashboards: KPI cards, time-series, breakdown by category
-- Reports: monthly/quarterly comparisons, share-of-total
-- Analytics widgets inside detail pages
-- Any place a Chart.js chart fits — these wrappers don't add domain styling, they relay Chart.js config
-
-## When NOT to use
-- For sparkline / inline trend cells in tables — use a smaller dedicated component
-- For non-Chart.js visualizations (D3, ECharts, mermaid) — use those libraries directly
-- For numeric "stat tiles" without a graph — use a card + typography
-- When data updates faster than ~10 fps — Chart.js redraw cost will dominate; consider canvas-level rendering
-
-## Inputs (identical shape across all 4 charts; the generic chart-type changes)
-
-### `<sd-bar-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'bar'>` | (required) | Chart.js v4 bar dataset (`labels`, `datasets[]`). |
-| `options` | `ChartOptions<'bar'>` | `undefined` | Chart.js options (scales, plugins, legend, tooltips, …). |
-| `plugins` | `Plugin<'bar'>[]` | `[]` | Chart.js plugins (chart-local; `Chart.register(...registerables)` is already called globally). |
-
-### `<sd-line-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'line'>` | (required) | Chart.js v4 line dataset. |
-| `options` | `ChartOptions<'line'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'line'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-pie-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'pie'>` | (required) | Chart.js v4 pie dataset. |
-| `options` | `ChartOptions<'pie'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'pie'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-doughnut-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'doughnut'>` | (required) | Chart.js v4 doughnut dataset. |
-| `options` | `ChartOptions<'doughnut'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'doughnut'>[]` | `[]` | Chart-local plugins. |
-
-## Outputs
-None. To respond to user interaction, attach Chart.js plugins or pass `options.onClick` / `options.onHover` callbacks via `options`.
-
-## Content projection (slots)
-None — these are pure canvas wrappers.
-
-## Behavior notes
-- An internal `effect()` watches `data`/`options` signals and calls `chart.update()` on change (no destroy/recreate, so animations are smooth).
-- The chart instance is created in `ngOnInit` and destroyed in `ngOnDestroy`.
-- **Bar and line** add a horizontal-scroll wrapper when `data.labels.length > 15`: the inner div gets `min-width = labels.length * 50 px` and the outer wrapper gets `overflow-x: auto`. This avoids cramped axes on dense series.
-- **Pie and doughnut** are 100% width / 100% height of their host — set the host's size via CSS.
-
-## Visual cues
-- **Bar**: vertical bars over a horizontal label axis; horizontally scrollable when many labels.
-- **Line**: time-series line(s) with optional area fill (per Chart.js config); horizontally scrollable when many labels.
-- **Pie**: full-circle slice diagram, 100%-of-total proportions.
-- **Doughnut**: same as pie with a hollow center (good for a centered KPI label).
-- All four obey `data.datasets[*].backgroundColor` / `borderColor` — colors come from the data, not the component.
-
-## Examples
-
-### 1. Monthly revenue bar chart
-```ts
-revenueData = signal<ChartData<'bar'>>({
-  labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-  datasets: [{
-    label: 'Doanh thu (triệu đồng)',
-    data: [120, 135, 110, 160, 180, 150],
-    backgroundColor: '#3498db',
-  }],
-});
-revenueOptions: ChartOptions<'bar'> = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: { legend: { position: 'top' } },
-};
-```
-```html
-<div style="height: 320px;">
-  <sd-bar-chart [data]="revenueData()" [options]="revenueOptions"></sd-bar-chart>
-</div>
-```
-
-### 2. Multi-series line chart
-```html
-<div style="height: 280px;">
-  <sd-line-chart [data]="trafficData()" [options]="trafficOptions"></sd-line-chart>
-</div>
-```
-
-### 3. Pie chart for category breakdown
-```ts
-breakdownData = signal<ChartData<'pie'>>({
-  labels: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C'],
-  datasets: [{ data: [45, 30, 25], backgroundColor: ['#1abc9c', '#3498db', '#e67e22'] }],
-});
-```
-```html
-<div style="height: 240px; width: 240px;">
-  <sd-pie-chart [data]="breakdownData()"></sd-pie-chart>
-</div>
-```
-
-### 4. Doughnut KPI with center label (via plugin)
-```html
-<div style="height: 200px; width: 200px; position: relative;">
-  <sd-doughnut-chart
-    [data]="kpiData()"
-    [options]="kpiOptions"
-    [plugins]="[centerLabelPlugin]">
-  </sd-doughnut-chart>
-</div>
-```
-
-## Anti-patterns
-- Forgetting to set a height on the host — Chart.js needs a sized container to render; `height: 0` produces a blank canvas
-- Passing brand-new object references on every change-detection cycle for `options` — every change triggers `chart.update()`; memoize when possible
-- Using these wrappers for fundamentally different chart types (radar, scatter, polar) without adding a corresponding component — these 4 selectors are typed to specific chart types
-- Manually calling `Chart.register(...)` again — already registered at module load
-- Putting these inside a `*ngIf` that toggles rapidly — destroys/recreates the canvas; consider keeping mounted and toggling visibility
-
-## Related
-- `<sd-card>` — common host for charts on a dashboard
-- `<sd-tab>` — to switch between multiple chart views
-- `<sd-page>` — page shell containing reporting dashboards
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts b/versions/v19/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
deleted file mode 100644
index 908389590..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-bar-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdBarChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'bar'>> = input.required<ChartData<'bar'>>();
-  options: InputSignal<ChartOptions<'bar'> | undefined> = input<ChartOptions<'bar'>>();
-  plugins: InputSignal<Plugin<'bar'>[]> = input<Plugin<'bar'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'bar'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData as any;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'bar',
-        data: this.data() as any,
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts b/versions/v19/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
deleted file mode 100644
index d166ee3a8..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-doughnut-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdDoughnutChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'doughnut'>> = input.required<ChartData<'doughnut'>>();
-  options: InputSignal<ChartOptions<'doughnut'> | undefined> = input<ChartOptions<'doughnut'>>();
-  plugins: InputSignal<Plugin<'doughnut'>[]> = input<Plugin<'doughnut'>[]>([]);
-
-  chart: Chart<'doughnut'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'doughnut',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts b/versions/v19/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
deleted file mode 100644
index 20512d49b..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-line-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdLineChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'line'>> = input.required<ChartData<'line'>>();
-  options: InputSignal<ChartOptions<'line'> | undefined> = input<ChartOptions<'line'>>();
-  plugins: InputSignal<Plugin<'line'>[]> = input<Plugin<'line'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'line'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'line',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v19/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts b/versions/v19/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
deleted file mode 100644
index 7c6899819..000000000
--- a/versions/v19/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-pie-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdPieChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'pie'>> = input.required<ChartData<'pie'>>();
-  options: InputSignal<ChartOptions<'pie'> | undefined> = input<ChartOptions<'pie'>>();
-  plugins: InputSignal<Plugin<'pie'>[]> = input<Plugin<'pie'>[]>([]);
-
-  chart: Chart<'pie'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'pie',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md b/versions/v19/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
index e288032ab..0254e79de 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
@@ -113,6 +113,25 @@ interface SdFormGenericComponentBase {
 
 `SdFormGenericGroup` is not a field — it is a titled container with its own `layout`, a nested `components` array, and required `properties.{icon, color}`. Groups do not nest: the builder hides `group` from the palette while you are editing one.
 
+Groups support `properties.hidden`, `hiddenWhenExpression` and `visibleWhenExpression` for visibility. They have **no disabled-when option** (`disabledWhenExpression`) or required rule; configure those on individual child fields. Legacy group-level disable conditions are ignored by the renderer.
+
+| Group property | Type | Default | Behaviour |
+| --- | --- | --- | --- |
+| `properties.collapsible` | `boolean` | `false` | Allows expanding/collapsing the group in builder preview and `<sd-form-render>`, including viewed mode. Uses the same `collapsible` property as `<sd-section>`. |
+
+```ts
+const group: SdFormGenericGroup = {
+  id: 'details',
+  type: 'group',
+  label: 'Details',
+  layout: { columns: '12' },
+  properties: { icon: 'category', color: 'primary', collapsible: true },
+  components: [/* child fields */],
+};
+```
+
+Groups start expanded. Collapsing changes presentation only: child controls keep their values, touched state and validation. The expanded/collapsed state belongs to the rendered section instance and is not saved to the schema. The design canvas remains available for editing group contents through Details.
+
 `SdFormGenericValues` is a convenience alias for `SdFormGenericRadio | SdFormGenericSelect | SdFormGenericChecklist`. Their inline `values` entries are `SdFormGenericSelectionStaticItem` — `{ value: string; label: string }` (note `label`, not `display`; the `display` spelling belongs to `SdFormGenericSelectionItem`, which is what a `valuesKey` lookup returns).
 
 ### Expressions
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
index 84c442546..9c9a4ccad 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
@@ -8,6 +8,10 @@
   </summary>
   <div class="fb-section__body">
     <attribute-input [form]="form" [(model)]="_group.label" [label]="'core.component.form-builder.label' | sdTranslate"></attribute-input>
+    <attribute-switch
+      [form]="form"
+      [(model)]="_group.properties.collapsible"
+      [label]="'core.component.form-builder.collapsible' | sdTranslate"></attribute-switch>
 
     <div class="fb-field">
       <div class="fb-field__label">{{ 'core.component.form-builder.group-icon' | sdTranslate }}</div>
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
new file mode 100644
index 000000000..53f7ecaa7
--- /dev/null
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { I18nService } from '@sdcorejs/angular/i18n';
+import { SdFormGenericGroup } from '../../../../../models';
+import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
+import { GroupAttribute } from './group-attribute.component';
+
+describe('GroupAttribute', () => {
+  let fixture: ComponentFixture<GroupAttribute>;
+  let group: SdFormGenericGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [GroupAttribute, NoopAnimationsModule] });
+    group = {
+      id: 'group',
+      type: 'group',
+      label: 'Details',
+      layout: { columns: '12' },
+      components: [],
+      properties: { icon: 'category', color: 'primary' },
+    };
+    fixture = TestBed.createComponent(GroupAttribute);
+    fixture.componentRef.setInput('group', group);
+    fixture.detectChanges();
+  });
+
+  it('offers visibility expressions without a disabled-when option', () => {
+    const i18n = TestBed.inject(I18nService);
+    const labels = fixture.debugElement
+      .queryAll(By.directive(AttributeExpression))
+      .map(element => (element.componentInstance as AttributeExpression).label);
+    expect(labels).toEqual([i18n.t('core.component.form-builder.visible-when'), i18n.t('core.component.form-builder.hidden-when')]);
+    expect('disabledWhenExpression' in group.properties).toBeFalse();
+  });
+
+  it('defaults collapsible to false and saves both choices in group properties', () => {
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (!optionElement) return;
+    const option = optionElement.componentInstance as AttributeSwitch;
+    expect(option.model).toBeFalse();
+
+    option.modelChange.emit(true);
+    fixture.detectChanges();
+    expect((JSON.parse(JSON.stringify(group)) as SdFormGenericGroup).properties.collapsible).toBeTrue();
+
+    option.modelChange.emit(false);
+    fixture.detectChanges();
+    expect(group.properties.collapsible).toBeFalse();
+  });
+
+  it('restores the collapsible choice from a loaded schema', () => {
+    fixture.componentRef.setInput('group', { ...group, properties: { ...group.properties, collapsible: true } });
+    fixture.detectChanges();
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (optionElement) expect((optionElement.componentInstance as AttributeSwitch).model).toBeTrue();
+  });
+});
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
index d7190d45c..3d496daf5 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
@@ -5,6 +5,7 @@ import { SD_COMPONENT_ICONS, SdFormGenericComponent, SdFormGenericGroup } from '
 import { BuilderService } from '../../../services';
 import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
 import { AttributeInput } from '../../attribute-input/attribute-input.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
 
 const ICON_PRESETS = ['category', 'folder', 'inventory_2', 'group_work', 'workspaces', 'view_quilt'] as const;
 const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as const;
@@ -14,7 +15,7 @@ const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as
   templateUrl: './group-attribute.component.html',
   styleUrl: './group-attribute.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AttributeInput, AttributeExpression, SdTranslatePipe],
+  imports: [AttributeInput, AttributeExpression, AttributeSwitch, SdTranslatePipe],
 })
 export class GroupAttribute {
   // ── constants ────────────────────────────────────────────────────────
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
index 17fdf59bb..0e79e21d1 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
@@ -6,7 +6,7 @@
         @if (component.type === 'group') {
           @if (!!component.components.length) {
             <div class="col-12 mt-16">
-              <sd-section [title]="component.label" [icon]="component.properties.icon">
+              <sd-section [title]="component.label" [icon]="component.properties.icon" [collapsible]="component.properties.collapsible ?? false">
                 <!-- why: `.sd-section-body` để padding 0 (mỗi nội dung tự quyết), nên các field chỉ
                      còn px-8/py-8 của riêng chúng và dính sát khung section. Group tự chừa lề. -->
                 <div class="row mx-0 c-group-body">
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
index 0ca6931fc..5d4a36a1e 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SdFormRender } from './form-render.component';
 
 describe('SdFormRender - configuration data safety', () => {
@@ -68,6 +69,108 @@ describe('SdFormRender - configuration data safety', () => {
   });
 });
 
+describe('SdFormRender - group collapse', () => {
+  let fixture: ComponentFixture<SdFormRender>;
+  let form: FormGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [SdFormRender, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(SdFormRender);
+    form = new FormGroup({});
+    fixture.componentRef.setInput('form', form);
+  });
+
+  function render(properties: Record<string, unknown> = {}, viewed = false) {
+    fixture.componentRef.setInput('viewed', viewed);
+    fixture.componentRef.setInput('configuration', {
+      components: [
+        {
+          id: 'group',
+          type: 'group',
+          label: 'Details',
+          layout: { columns: '12' },
+          properties: { icon: 'category', color: 'primary', ...properties },
+          components: [
+            {
+              id: 'name',
+              key: 'name',
+              type: 'textfield',
+              label: 'Name',
+              layout: { columns: '12' },
+              validate: { required: true },
+              properties: {},
+            },
+          ],
+        },
+      ],
+    });
+    fixture.detectChanges();
+    flushMicrotasks();
+    fixture.detectChanges();
+  }
+
+  for (const collapsible of [undefined, false]) {
+    it(`keeps the group expanded without a toggle when collapsible is ${collapsible}`, fakeAsync(() => {
+      render({ collapsible });
+      expect(fixture.nativeElement.querySelector('.sd-section-body')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('.sd-section-collapse-toggle')).toBeNull();
+    }));
+  }
+
+  it('collapses and expands without losing child control state, value or validation', fakeAsync(() => {
+    render({ collapsible: true });
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    const control = form.get('name')!;
+    expect(control.hasError('required')).toBeTrue();
+    control.markAsTouched();
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(fixture.nativeElement.querySelector('.sd-section-body')).toBeNull();
+    expect(form.get('name')).toBe(control);
+    expect(control.touched).toBeTrue();
+    expect(control.hasError('required')).toBeTrue();
+    control.setValue('Saved name');
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(fixture.nativeElement.querySelector('sd-input input').value).toBe('Saved name');
+    expect(form.get('name')).toBe(control);
+    expect(control.valid).toBeTrue();
+    fixture.destroy();
+  }));
+
+  it('allows collapse in viewed mode', fakeAsync(() => {
+    render({ collapsible: true }, true);
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  }));
+
+  it('ignores legacy group disable conditions and keeps visibility rules', fakeAsync(() => {
+    fixture.componentRef.setInput('entity', { locked: true });
+    render({
+      disabledWhenExpression: {
+        key: 'disable-group',
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [{ key: 'locked', type: 'condition', field: 'locked', operator: 'EQUAL', value: true, dayInfo: {} }],
+      },
+    });
+    expect(form.get('name')?.enabled).toBeTrue();
+    expect(fixture.nativeElement.querySelector('sd-input input').disabled).toBeFalse();
+    render({ collapsible: true, hidden: true });
+    expect(fixture.nativeElement.querySelector('sd-section')).toBeNull();
+  }));
+});
+
 describe('SdFormRender - initial preview render', () => {
   let fixture: ComponentFixture<SdFormRender>;
 
diff --git a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
index 0e86d0062..27598908b 100644
--- a/versions/v19/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
@@ -279,6 +279,7 @@ export interface SdFormGenericGroup {
   properties: {
     icon: string;
     color: Color;
+    collapsible?: boolean;
     hidden?: boolean;
     hiddenWhenExpression?: SdFormGenericExpression;
     visibleWhenExpression?: SdFormGenericExpression;
diff --git a/versions/v19/projects/sdcorejs-angular/components/history/sd-history.md b/versions/v19/projects/sdcorejs-angular/components/history/sd-history.md
index b1d7413a3..0a9be5689 100644
--- a/versions/v19/projects/sdcorejs-angular/components/history/sd-history.md
+++ b/versions/v19/projects/sdcorejs-angular/components/history/sd-history.md
@@ -20,7 +20,7 @@ Vertical timeline that renders a list of history/audit events — each with titl
 ## When NOT to use
 - For a list of records the user can act on → use a table / list component
 - For chat/messaging → use a dedicated chat thread component
-- For a chart of events over time → use `<sd-chart>` with a time axis
+- For a chart of events over time → use a chart library selected and installed by the consuming application
 - For a single most-recent event → just render plain text with a `<sd-badge>`
 
 ## Inputs
diff --git a/versions/v19/projects/sdcorejs-angular/components/index.ts b/versions/v19/projects/sdcorejs-angular/components/index.ts
index b5f5ba3b4..c938d0c73 100644
--- a/versions/v19/projects/sdcorejs-angular/components/index.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/index.ts
@@ -22,7 +22,6 @@ export * from '@sdcorejs/angular/components/import-excel';
 export * from '@sdcorejs/angular/components/mini-editor';
 export * from '@sdcorejs/angular/components/view';
 export * from '@sdcorejs/angular/components/code-editor';
-export * from '@sdcorejs/angular/components/chart';
 export * from '@sdcorejs/angular/components/editor';
 export * from '@sdcorejs/angular/components/splitter';
 export * from '@sdcorejs/angular/components/preview';
diff --git a/versions/v19/projects/sdcorejs-angular/components/modal/sd-modal.md b/versions/v19/projects/sdcorejs-angular/components/modal/sd-modal.md
index 7b2f22ae5..571ac1427 100644
--- a/versions/v19/projects/sdcorejs-angular/components/modal/sd-modal.md
+++ b/versions/v19/projects/sdcorejs-angular/components/modal/sd-modal.md
@@ -41,7 +41,7 @@ import { SdModal } from '@sdcorejs/angular/components/modal';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Dialog and bottom-sheet body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -101,4 +101,4 @@ The real dialog/bottom-sheet container is associated with its visible heading us
 
 ## Overlay presentation refresh
 
-Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Header/body/footer use aligned 24px horizontal insets (16px on narrow screens), 18px titles and 44px mobile action targets. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
+Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Dialog and bottom-sheet header/footer share 12px vertical padding, 16px horizontal insets and a white background (`--sd-white`, default `#fff`). Body content aligns to the 16px inset; titles remain 18px and mobile action targets remain 44px. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
diff --git a/versions/v19/projects/sdcorejs-angular/components/modal/src/modal.component.scss b/versions/v19/projects/sdcorejs-angular/components/modal/src/modal.component.scss
index 820b54dd8..73e50c93b 100644
--- a/versions/v19/projects/sdcorejs-angular/components/modal/src/modal.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/modal/src/modal.component.scss
@@ -66,8 +66,7 @@
 }
 
 .sd-modal-header {
-  min-height: 64px;
-  padding: 16px;
+  min-height: 56px;
   display: flex;
   align-items: center;
   gap: 16px;
@@ -175,7 +174,6 @@
 
 .sd-modal-footer {
   min-height: 56px;
-  padding: 16px;
   border-top: 1px solid var(--sd-modal-border);
   display: flex;
   align-items: center;
@@ -213,7 +211,8 @@
 .sd-modal-header,
 .sd-modal-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background: var(--sd-white, #fff);
 }
 .sd-modal-title {
   font-size: 18px;
@@ -222,17 +221,13 @@
   overflow-wrap: anywhere;
 }
 .sd-modal-body {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
   box-sizing: border-box;
 }
 @media (max-width: 600px) {
   .sd-modal-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-modal-body {
-    padding: 0 16px 16px;
-  }
   .sd-modal-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v19/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md b/versions/v19/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
index 092e98f86..881fbeffe 100644
--- a/versions/v19/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
+++ b/versions/v19/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
@@ -285,5 +285,6 @@ fields: SdQueryBuilderField[] = [
 ## Accessibility
 
 - The builder container is `role="group"` (a set of controls, not a widget) so it takes no tab stop of its own — Tab goes straight to the buttons and pickers inside.
-- "Click empty space to close open dropdowns" is a mouse-only affordance; **Escape** now does the same thing, so keyboard users can dismiss an open add-menu.
-- The add-menu dropdown is `role="group"` and swallows Enter as well as click, so activating a button inside it never reaches the container's "close all" handler.
+- The add-menu renders in a CDK connected overlay on the document body, so modal scroll regions, table cells and other ancestor overflow cannot clip its actions. It anchors to the group's `+` button, can flip above when space below is insufficient, and stays within the viewport.
+- Clicking the transparent backdrop or pressing **Escape** closes the menu. Escape is consumed before it reaches the surrounding modal; only the menu closes.
+- The add-menu is `role="group"` with two native buttons. Opening it focuses the first action, Tab stays within its actions, and closing it restores focus to the `+` trigger. `aria-expanded` on the trigger follows the menu state. Only one group's add-menu can be open at a time; adding a condition or group closes it.
diff --git a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
new file mode 100644
index 000000000..9a1793a27
--- /dev/null
+++ b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { LayoutTestTheme } from '../../../testing/layout-theme.spec';
+import { SdQueryBuilder } from './query-builder.component';
+import { SdQbGroup } from './query-builder.model';
+
+@Component({
+  imports: [SdQueryBuilder, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div data-clip style="position: relative; overflow: hidden; height: 90px; width: 500px; margin: 80px 24px">
+      <sd-query-builder [disabled]="disabled" />
+    </div>
+  `,
+})
+class ClippedBuilderHost {
+  disabled = false;
+}
+
+describe('SdQueryBuilder add-menu overlay', () => {
+  let fixture: ComponentFixture<ClippedBuilderHost>;
+  let builder: SdQueryBuilder;
+  let overlays: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedBuilderHost, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(ClippedBuilderHost);
+    fixture.detectChanges();
+    builder = fixture.debugElement.query(By.directive(SdQueryBuilder)).componentInstance;
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function open(index = 0): HTMLButtonElement {
+    const trigger = fixture.nativeElement.querySelectorAll('.qb-btn-add')[index] as HTMLButtonElement;
+    trigger.focus();
+    trigger.click();
+    fixture.detectChanges();
+    tick();
+    return trigger;
+  }
+
+  it('renders both actions outside the clipped container and keeps the lower action clickable', fakeAsync(() => {
+    open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const actions = menu.querySelectorAll('button');
+    expect(actions.length).toBe(2);
+    const lower = actions[1].getBoundingClientRect();
+    expect(lower.height).toBeGreaterThan(0);
+    expect(lower.bottom).toBeGreaterThan(fixture.nativeElement.querySelector('[data-clip]').getBoundingClientRect().bottom);
+    expect(actions[1].contains(document.elementFromPoint(lower.x + lower.width / 2, lower.y + lower.height / 2))).toBeTrue();
+    actions[1].click();
+    fixture.detectChanges();
+    tick();
+    expect(builder.tree().children[0].kind).toBe('group');
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+  }));
+
+  it('adds a condition to the selected nested group and allows only one open menu', fakeAsync(() => {
+    builder.addGroup(builder.tree());
+    fixture.detectChanges();
+    open(0);
+    builder.toggleDropdown(builder.tree().children[0] as SdQbGroup, new Event('click'));
+    fixture.detectChanges();
+    tick();
+    const menus = overlays.querySelectorAll('.qb-dropdown');
+    expect(menus.length).toBe(1);
+    if (!menus.length) return;
+    (menus[0].querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    expect((builder.tree().children[0] as SdQbGroup).children.length).toBe(2);
+    expect(builder.tree().children.length).toBe(1);
+  }));
+
+  it('closes on Escape without bubbling to the modal and restores focus to the trigger', fakeAsync(() => {
+    const trigger = open();
+    const action = overlays.querySelector('.qb-dropdown button') as HTMLButtonElement | null;
+    expect(action).not.toBeNull();
+    if (!action) return;
+    expect(document.activeElement).toBe(action);
+    const escaped = jasmine.createSpy('document escape');
+    document.addEventListener('keydown', escaped);
+    try {
+      action.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      fixture.detectChanges();
+      tick();
+      expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+      expect(document.activeElement).toBe(trigger);
+      expect(escaped).not.toHaveBeenCalled();
+    } finally {
+      document.removeEventListener('keydown', escaped);
+    }
+  }));
+
+  it('closes on backdrop click and removes the overlay when disabled or destroyed', fakeAsync(() => {
+    open();
+    const backdrop = overlays.querySelector('.cdk-overlay-backdrop') as HTMLElement | null;
+    expect(backdrop).not.toBeNull();
+    if (!backdrop) return;
+    backdrop.click();
+    fixture.detectChanges();
+    tick(500);
+    expect(builder.tree().open).toBeFalse();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    expect(builder.tree().open).toBeFalse();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.destroy();
+    flush();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips above the trigger near the bottom of the viewport', fakeAsync(() => {
+    const clip = fixture.nativeElement.querySelector('[data-clip]') as HTMLElement;
+    Object.assign(clip.style, { position: 'fixed', bottom: '0', margin: '0' });
+    const trigger = open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const rect = menu.getBoundingClientRect();
+    expect(rect.bottom).toBeLessThanOrEqual(trigger.getBoundingClientRect().top);
+    expect(rect.top).toBeGreaterThanOrEqual(8);
+  }));
+});
diff --git a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
index 7fcbbbf57..977263a0b 100644
--- a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
@@ -25,26 +25,39 @@
 <!-- Recursive group node -->
 <ng-template #groupTpl let-group let-isRoot="isRoot" let-parent="parent" let-index="index">
   @let _removeGroupLabel = removeGroupLabel();
+  @let _addNodeLabel = addNodeLabel();
+  @let _disabled = resolvedDisabled();
   <div class="qb-group" [class.is-root]="isRoot">
-    <div class="qb-header" [class.is-open]="group.open">
+    <div class="qb-header">
       <div class="qb-logic-switch">
-        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'AND')">AND</button>
-        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'OR')">OR</button>
+        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="_disabled" (click)="setGroupLogic(group, 'AND')">AND</button>
+        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="_disabled" (click)="setGroupLogic(group, 'OR')">OR</button>
       </div>
 
       <div class="qb-actions">
-        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="addNodeLabel()" [disabled]="resolvedDisabled()" (click)="toggleDropdown(group, $event)">+</button>
-        @if (group.open) {
-          <!-- why: dropdown là NHÓM hai nút (role="group"), không phải nút — không nhận tabindex,
-               tab đi thẳng vào hai nút. stopPropagation cho cả click lẫn Enter để thao tác bên
-               trong dropdown không kích hoạt handler "đóng tất cả" của container. -->
-          <div class="qb-dropdown" role="group" (click)="$event.stopPropagation()" (keydown.enter)="$event.stopPropagation()">
+        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="_addNodeLabel" [disabled]="_disabled"
+          cdkOverlayOrigin #addOrigin="cdkOverlayOrigin" [attr.aria-expanded]="!!group.open && !_disabled"
+          (click)="toggleDropdown(group, $event)">+</button>
+        <!-- why: overlay nằm ngoài ancestor overflow; focus trap trả focus về nút + khi đóng. -->
+        <ng-template cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="addOrigin"
+          [cdkConnectedOverlayOpen]="!!group.open && !_disabled"
+          [cdkConnectedOverlayPositions]="addMenuPositions"
+          [cdkConnectedOverlayViewportMargin]="8"
+          [cdkConnectedOverlayFlexibleDimensions]="false"
+          [cdkConnectedOverlayPush]="true"
+          [cdkConnectedOverlayHasBackdrop]="true"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+          (backdropClick)="closeAllDropdowns()"
+          (overlayKeydown)="onAddMenuKeydown($event)">
+          <div class="qb-dropdown" role="group" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" [attr.aria-label]="_addNodeLabel">
             <button type="button" (click)="addRule(group)">+ {{ conditionLabel() }}</button>
             <button type="button" (click)="addGroup(group)">+ {{ groupLabel() }}</button>
           </div>
-        }
+        </ng-template>
         @if (!isRoot) {
-          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="resolvedDisabled()" (click)="removeNode(parent, index)">✕</button>
+          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="_disabled" (click)="removeNode(parent, index)">✕</button>
         }
       </div>
     </div>
diff --git a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
index 3025f6831..e631045ce 100644
--- a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
@@ -87,9 +87,6 @@ $node-gap: 12px;
   position: relative;
   z-index: 1;
 
-  &.is-open {
-    z-index: 1000;
-  }
 }
 
 // AND / OR segmented toggle — active side uses primary.
@@ -167,16 +164,11 @@ $node-gap: 12px;
 }
 
 .qb-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
   background: #fff;
   border: 1px solid $border;
   box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
   border-radius: 6px;
   min-width: 150px;
-  z-index: 100;
   overflow: hidden;
 
   button {
diff --git a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
index b8957417f..c90472925 100644
--- a/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
@@ -1,4 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -70,12 +72,31 @@ const QB_EMPTY_FIELDS: SdQueryBuilderField[] = [];
   selector: 'sd-query-builder',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, NgTemplateOutlet, SdOperator, SdSelect, SdInput, SdInputNumber, SdDate, SdDatetime, SdItemDefDefDirective],
+  imports: [
+    SdIcon,
+    NgTemplateOutlet,
+    SdOperator,
+    SdSelect,
+    SdInput,
+    SdInputNumber,
+    SdDate,
+    SdDatetime,
+    SdItemDefDefDirective,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    CdkTrapFocus,
+  ],
   templateUrl: './query-builder.component.html',
   styleUrl: './query-builder.component.scss',
 })
 export class SdQueryBuilder {
   readonly #i18n = inject(I18nService);
+  protected readonly addMenuPositions: ConnectedPosition[] = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  ];
 
   // -------------------------------------------------------------------------
   // Inputs
@@ -232,6 +253,11 @@ export class SdQueryBuilder {
   readonly fieldIcon = sdQbFieldIcon;
 
   constructor() {
+    effect(() => {
+      if (this.resolvedDisabled() || this.isView()) {
+        untracked(() => this.closeAllDropdowns());
+      }
+    });
     // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
     // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
     effect(() => {
@@ -311,6 +337,13 @@ export class SdQueryBuilder {
     this.#bumpTree();
   }
 
+  protected onAddMenuKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeAllDropdowns();
+  }
+
   #hasOpenDropdown(node: SdQbNode): boolean {
     if (!sdIsQbGroup(node)) return false;
     return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
diff --git a/versions/v19/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md b/versions/v19/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
index 0344e62c9..e2d011c0f 100644
--- a/versions/v19/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
+++ b/versions/v19/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
@@ -37,7 +37,7 @@ import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -88,7 +88,7 @@ Do not write `document.body.style.overflow` yourself while a drawer is open; the
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: 0; // The drawer supplies the content insets.
 }
 ```
 
@@ -105,4 +105,4 @@ Each open creates a CDK focus trap around the drawer content. Focus moves inside
 
 Opening makes the drawer visible immediately so focus can enter before the slide/fade animation finishes. Closing delays the hidden state until that animation completes. Reduced motion removes these transitions.
 
-The default radius is 8px, overridable through --sd-overlay-radius. Header/body/footer align at 24px horizontally (16px below 600px); the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
+The default radius is 8px, overridable through --sd-overlay-radius. Header/footer use 12px vertical padding and header/body/footer align at 16px horizontally; the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
diff --git a/versions/v19/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss b/versions/v19/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
index 1c1ea5c49..603a8d8cb 100644
--- a/versions/v19/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
@@ -37,8 +37,7 @@
   }
 
   &-header {
-    min-height: 64px;
-    padding: 16px;
+    min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -131,8 +130,6 @@
 
   &-footer {
     border-top: 1px solid var(--sd-side-drawer-border);
-    padding: 16px;
-    background-color: var(--sd-side-drawer-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -197,22 +194,19 @@
 .sd-side-drawer-header,
 .sd-side-drawer-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background-color: var(--sd-white, #fff);
 }
 .sd-side-drawer-content {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
 }
 @media (max-width: 600px) {
   .sd-side-drawer {
     --sd-side-drawer-inset: 8px;
   }
   .sd-side-drawer-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-side-drawer-content {
-    padding: 0 16px 16px;
-  }
   .sd-side-drawer-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v19/projects/sdcorejs-angular/components/tab/sd-tab.md b/versions/v19/projects/sdcorejs-angular/components/tab/sd-tab.md
index 918663850..5d4a9439f 100644
--- a/versions/v19/projects/sdcorejs-angular/components/tab/sd-tab.md
+++ b/versions/v19/projects/sdcorejs-angular/components/tab/sd-tab.md
@@ -34,7 +34,7 @@ Declarative tab container that wraps Angular Material's `mat-tab-group` with a s
 | Name                | Type                                                                                  | Default     | Notes                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `selectedIndex`     | `number` (model — two-way)                                                            | `0`         | Index of the active tab. Two-way bindable via `[(selectedIndex)]`. Auto-clamped to `[0, tabs.length-1]` when the tab count shrinks.                                                                                                                                                                                                                           |
-| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a single bordered container with flush tabs (iOS segmented-control style). |
+| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a shared container with a 4px gap between tabs (iOS segmented-control style). Hover/ripple layers follow each tab's rounded shape; active pills retain their filled color on hover. |
 | `color`             | `Color` (`'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'`) | `'primary'` | Drives the active-tab + indicator + badge colors via the Core CSS vars (`--sd-<color>`, `--sd-<color>-light`). Same palette as `<sd-button>`, `<sd-badge>` — pick `'warning'` for filter bars surfacing pending items, `'success'` for confirmed flows, etc.                                                                                                  |
 | `headerPosition`    | `'above' \| 'below'`                                                                  | `'above'`   | Forwarded to `mat-tab-group.headerPosition`.                                                                                                                                                                                                                                                                                                                  |
 | `alignTabs`         | `'start' \| 'center' \| 'end'`                                                        | `'start'`   | Forwarded to `mat-tab-group`'s `[mat-align-tabs]` input. **Only takes effect when `stretchTabs` is `false`** — otherwise tabs fill the row evenly and there's nothing to align.                                                                                                                                                                               |
diff --git a/versions/v19/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss b/versions/v19/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
index 7179666c2..b2949f7ca 100644
--- a/versions/v19/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
@@ -102,6 +102,14 @@
   opacity: 0 !important;
 }
 
+// Material renders hover and click ripples in a separate rectangular layer.
+// Clip that layer to the tab shape without clipping the label's focus indicator.
+:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple,
+:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
 // =============================================================================
 // Variant: pills — rounded pill tabs, active filled with primary.
 // Good for nested tab groups, filter bars, light contexts.
@@ -132,7 +140,7 @@
     background: transparent;
     transition: background-color 120ms ease, color 120ms ease;
 
-    &:hover:not(.mat-mdc-tab-disabled) {
+    &:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active) {
       background: var(--sd-tab-badge-bg);
     }
 
@@ -143,12 +151,6 @@
       background: var(--sd-tab-label-active-color);
       .mdc-tab__text-label { color: #ffffff; }
     }
-
-    // why: active pill darken on hover instead of the default whitish state-layer.
-    // box-shadow inset > filter because filter would dim text + icons too.
-    &.mdc-tab--active:hover:not(.mat-mdc-tab-disabled) {
-      box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
-    }
   }
 
   // Inside the pill we still allow the sd-tab__label inline-flex with icon/badge/close.
@@ -166,7 +168,7 @@
 }
 
 // =============================================================================
-// Variant: segmented — single bordered container, tabs sit flush.
+// Variant: segmented — shared container with a small gap between tabs.
 // iOS-style segmented control.
 // =============================================================================
 :host(.sd-tab-group--segmented) ::ng-deep {
@@ -185,7 +187,7 @@
     padding: 3px;
   }
 
-  .mat-mdc-tab-labels { gap: 0; }
+  .mat-mdc-tab-labels { gap: 4px; }
 
   .mat-mdc-tab {
     min-width: 0;
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/sd-table.md b/versions/v19/projects/sdcorejs-angular/components/table/sd-table.md
index eee0bf1bc..bd8134c44 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/sd-table.md
+++ b/versions/v19/projects/sdcorejs-angular/components/table/sd-table.md
@@ -401,9 +401,11 @@ Client-side matching sống ở `matchesColumnFilter` (`services/table-local/tab
 
 Command icons default to Material Symbols Outlined (`material-icons-outlined`). Child command menu items use the same default unless `child.fontSet` is provided. Use icon + title for child commands so menu rows align consistently.
 
+Desktop command `children`, selection action `children` and the selection toolbar More menu use a compact CDK overlay menu: white background, 8px corners, 36px minimum rows, 18px icons and a 4px gap from the trigger. Touch/narrow-screen menu rows remain at least 44px. Menus escape clipped table cells, support arrow-key/typeahead navigation and restore trigger focus on Escape or selection. Existing child visibility, disabled state, custom HTML and callbacks remain supported; no consumer configuration changes are required.
+
 Desktop row commands keep their touch targets within each 24px button so adjacent actions and menu triggers remain independently clickable. Mobile action controls retain their existing sizing.
 
-Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Child menu items retain Material's disabled opacity.
+Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Disabled child menu items are muted and cannot be activated.
 
 ```ts
 command: {
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
new file mode 100644
index 000000000..0a0a9bbc5
--- /dev/null
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -0,0 +1,67 @@
+.sd-table-action-menu {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(360px, calc(100dvh - 16px));
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--sd-border, #dde0e5);
+  border-radius: 8px;
+  background: var(--sd-white, #fff);
+  color: var(--sd-text, #1a1b1f);
+  box-shadow:
+    0 4px 12px rgba(15, 23, 42, 0.14),
+    0 1px 3px rgba(15, 23, 42, 0.1);
+
+  [cdkMenuItem] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: start;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      background: var(--sd-black100, #f3f3f3);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sd-primary, #005cbb);
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+  }
+
+  .sd-table-action-menu__icon {
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+
+@media (max-width: 600px), (pointer: coarse) {
+  .sd-table-action-menu [cdkMenuItem] {
+    min-height: 44px;
+  }
+}
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
new file mode 100644
index 000000000..7cfd448fc
--- /dev/null
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
@@ -0,0 +1,67 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { Directive, ElementRef, afterRenderEffect, inject, DestroyRef, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SdButton } from '@sdcorejs/angular/components/button';
+
+export const TABLE_ACTION_MENU_POSITIONS: ConnectedPosition[] = [
+  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+  { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+];
+
+// why: CDK gắn trên host sd-button, nhưng focus/ARIA và Enter/Space phải thuộc nút HTML bên trong.
+@Directive({
+  selector: 'sd-button[sdTableMenuButton]',
+  standalone: true,
+  hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: sdTableMenuButton'] }],
+})
+export class SdTableMenuButtonDirective {
+  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  readonly #trigger = inject(CdkMenuTrigger);
+  readonly #sdButton = inject(SdButton);
+  readonly #opened = signal(false);
+  #button?: HTMLButtonElement;
+
+  constructor() {
+    this.#trigger.menuPosition = TABLE_ACTION_MENU_POSITIONS;
+    const destroyRef = inject(DestroyRef);
+    this.#trigger.opened.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => this.#opened.set(true));
+    this.#trigger.closed.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+      this.#opened.set(false);
+      if (this.#button?.isConnected && this.#trigger.getMenu()?.nativeElement.contains(this.#host.ownerDocument.activeElement)) {
+        this.#button.focus();
+      }
+    });
+    afterRenderEffect(() => {
+      this.#sdButton.type();
+      this.#opened();
+      this.#syncButton();
+    });
+    destroyRef.onDestroy(() => this.#button?.removeEventListener('keydown', this.#nativeActivation, true));
+  }
+
+  readonly #nativeActivation = (event: KeyboardEvent): void => {
+    // why: để nút native tự phát click đúng một lần, không cho CDK toggle thêm ở keydown của host.
+    if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+  };
+
+  #syncButton(): void {
+    const button = this.#host.querySelector('button') ?? undefined;
+    if (button !== this.#button) {
+      this.#button?.removeEventListener('keydown', this.#nativeActivation, true);
+      this.#button = button;
+      button?.addEventListener('keydown', this.#nativeActivation, true);
+    }
+    button?.setAttribute('aria-haspopup', 'menu');
+    button?.setAttribute('aria-expanded', String(this.#trigger.isOpen()));
+    const menuId = this.#trigger.getMenu()?.nativeElement.id;
+    if (menuId) button?.setAttribute('aria-controls', menuId);
+    else button?.removeAttribute('aria-controls');
+    this.#host.removeAttribute('role');
+    this.#host.removeAttribute('aria-haspopup');
+    this.#host.removeAttribute('aria-expanded');
+    this.#host.removeAttribute('aria-controls');
+  }
+}
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 38cfbc7b3..9ed43877f 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -24,7 +24,9 @@
       <button
         type="button"
         [attr.data-autoid]="_autoId + '-' + command.key"
-        [matMenuTriggerFor]="menu"
+        [cdkMenuTriggerFor]="menu"
+        [cdkMenuPosition]="menuPositions"
+        [disabled]="_meta.disabled"
         [attr.aria-label]="_meta.title"
         aria-haspopup="menu"
         mat-icon-button>
@@ -34,29 +36,41 @@
           <sd-icon class="c-icon" [fontSet]="command.fontSet" name="more_vert"></sd-icon>
         }
       </button>
-      <mat-menu #menu="matMenu" [attr.data-autoid]="_autoId + '-' + command.key + '-menu'">
-        <span>
+      <ng-template #menu>
+        <div
+          cdkMenu
+          tabindex="-1"
+          class="sd-table-action-menu"
+          [attr.aria-label]="_meta.title"
+          [attr.data-autoid]="_autoId + '-' + command.key + '-menu'"
+          (keydown.escape)="$event.stopPropagation()">
           @for (childCommand of command.children; track childCommand.key) {
             @let _childMeta = _item | command: childCommand;
             <button
               [attr.data-autoid]="_autoId + '-' + command.key + '-' + childCommand.key"
-              mat-menu-item
-              (click)="childCommand.click(_item.data)"
+              type="button"
+              cdkMenuItem
+              [cdkMenuItemDisabled]="_childMeta.disabled"
+              [cdkMenuitemTypeaheadLabel]="_childMeta.title"
+              [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
               [disabled]="_childMeta.disabled">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
                 <span class="sd-command-menu-item__content">
-                  <sd-icon class="sd-command-menu-item__icon"
+                  <sd-icon
+                    class="sd-table-action-menu__icon"
                     [color]="childCommand.color || 'secondary'"
-                    [fontSet]="childCommand.fontSet" [name]="_childMeta.icon"></sd-icon>
+                    [fontSet]="childCommand.fontSet"
+                    [name]="_childMeta.icon"></sd-icon>
                   <span class="sd-command-menu-item__title">{{ _childMeta.title }}</span>
                 </span>
               }
             </button>
           }
-        </span>
-      </mat-menu>
+        </div>
+      </ng-template>
     }
   }
 }
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
index c90841d55..fe78277aa 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../../assets/scss/core/color.scss' as color;
 @use 'sass:map';
+@use '../action-menu/action-menu';
 
 :host {
   display: flex;
@@ -42,20 +43,8 @@ button[mat-icon-button]:disabled sd-icon.c-icon {
   width: 100%;
 }
 
-// why: `margin-right: 0 !important` ở đây từng để chặn margin Material gắn vào `.mat-icon` trong
-// mat-menu. sd-icon đã trung hoà ở component nên bỏ được; khoảng cách với nhãn là `gap` của
-// .sd-command-menu-item__content.
-.sd-command-menu-item__icon {
-  color: map.get(color.$color_map, 'text-secondary') !important;
-  width: 24px;
-  height: 24px;
-  font-size: 18px;
-  line-height: 24px !important;
-  flex: 0 0 24px;
-}
-
 .sd-command-menu-item__title {
   min-width: 0;
   line-height: 20px;
-  white-space: nowrap;
+  white-space: normal;
 }
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 79a9b04b1..03e5eff62 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -54,7 +54,7 @@ describe('DesktopCommand', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const menu = document.body.querySelector('.mat-mdc-menu-panel') as HTMLElement;
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     const content = menu.querySelector('.sd-command-menu-item__content') as HTMLElement;
     const icon = menu.querySelector('mat-icon') as HTMLElement;
     const title = menu.querySelector('.sd-command-menu-item__title') as HTMLElement;
@@ -62,6 +62,71 @@ describe('DesktopCommand', () => {
     expect(content).not.toBeNull();
     expect(icon.classList).toContain('material-icons-outlined');
     expect(title.textContent?.trim()).toBe('Edit');
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(menu.querySelector('button')!.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+  });
+
+  it('keeps hidden/disabled child rules and restores the command trigger after Escape', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    fixture.componentInstance.commands = [
+      {
+        title: 'More',
+        children: [
+          { title: 'Hidden', hidden: async () => true, click: clicked },
+          { title: 'Disabled', disabled: true, click: clicked },
+          { title: 'Allowed', click: clicked },
+        ],
+      },
+    ];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.textContent).not.toContain('Hidden');
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    items[0].click();
+    expect(clicked).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(items[1]);
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
+    items[1].dispatchEvent(escape);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('renders outside a clipped row and invokes the child once with its row data', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    Object.assign(fixture.nativeElement.style, {
+      position: 'fixed',
+      top: '32px',
+      left: '32px',
+      width: '80px',
+      height: '24px',
+      overflow: 'hidden',
+    });
+    fixture.componentInstance.commands = [{ title: 'More', children: [{ title: 'Run', click: clicked }] }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(fixture.nativeElement.contains(menu)).toBeFalse();
+    const item = menu.querySelector('button')!;
+    const bounds = item.getBoundingClientRect();
+    expect(document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2)?.closest('button')).toBe(item);
+    item.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(clicked).toHaveBeenCalledOnceWith(fixture.componentInstance.item.data);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
   });
 
   // why: hai nút command từng mang aria-hidden="true" — chúng là <button> THẬT, vẫn nhận tab focus
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
index 803bb0976..feab3cae1 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { TABLE_ACTION_MENU_POSITIONS } from '../action-menu/action-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdTableCommand } from '../../models/table-command.model';
 import { SdTableItem } from '../../models/table-item.model';
@@ -18,9 +19,10 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   host: {
     '[attr.data-autoid]': 'autoId()',
   },
-  imports: [SdIcon, CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, CommandPipe, CommandFilterPipe],
+  imports: [SdIcon, CommonModule, MatTooltipModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, MatButtonModule, CommandPipe, CommandFilterPipe],
 })
 export class DesktopCommand {
+  readonly menuPositions = TABLE_ACTION_MENU_POSITIONS;
   readonly autoIdInput = input<string | null | undefined>(undefined, { alias: 'autoId' });
   readonly item = input.required<SdTableItem>();
   readonly itemIndex = input.required<number>();
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
index 50634c03e..5706edc7a 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
@@ -58,6 +58,54 @@ describe('Table selection toolbar layout and overflow', () => {
     expect(clear).toHaveBeenCalledTimes(1);
   });
 
+  it('opens compact child actions from the native button and returns focus after Escape', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(menu.id);
+    const first = menu.querySelector('button')!;
+    expect(first.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+    expect(document.activeElement).toBe(first);
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]')).toBeNull();
+  });
+
+  it('dismisses child actions after running them and removes an open menu when selection clears', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const overlay = TestBed.inject(OverlayContainer).getContainerElement();
+    overlay.querySelector<HTMLButtonElement>('button')!.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(callbacks[2]).toHaveBeenCalledOnceWith([{ id: 1 }, { id: 2 }]);
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+    // SdButton throttles repeated pointer clicks; ArrowDown opens immediately.
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeTruthy();
+    fixture.componentRef.setInput('selectedTableItems', []);
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+  });
+
   it('keeps grouped overflow actions and excludes children unavailable to one selected row', () => {
     const group = { title: 'Reports', children: actions.slice(2) };
     fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [...actions.slice(0, 2), group] } });
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
index af44d23c9..93ebca5d3 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
@@ -1,4 +1,5 @@
 @let _autoId = autoId();
+@let _moreLabel = moreLabel();
 @let _direct = directActions();
 @let _overflow = overflowActions();
 @if (opened()) {
@@ -33,21 +34,30 @@
             [type]="action.type || 'light'"
             [fontSet]="action.fontSet"
             [title]="action.title"
-            [matMenuTriggerFor]="childrenMenu" />
-          <mat-menu #childrenMenu="matMenu">
-            @for (child of action.children; track $index) {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                (click)="onClickAction(child)">
-                @if (child.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                }
-                <span>{{ child.title }}</span>
-              </button>
-            }
-          </mat-menu>
+            [sdTableMenuButton]="childrenMenu" />
+          <ng-template #childrenMenu>
+            <div
+              cdkMenu
+              tabindex="-1"
+              class="sd-table-action-menu"
+              [attr.aria-label]="action.title || _moreLabel"
+              (keydown.escape)="$event.stopPropagation()">
+              @for (child of action.children; track $index) {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                  [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                  [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(child)">
+                  @if (child.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                  }
+                  <span>{{ child.title }}</span>
+                </button>
+              }
+            </div>
+          </ng-template>
         }
       }
       @if (_overflow.length) {
@@ -55,44 +65,55 @@
           class="sd-selection-more"
           size="sm"
           prefixIcon="more_horiz"
-          [title]="moreLabel()"
+          [title]="_moreLabel"
           color="secondary"
           type="light"
           [autoId]="_autoId ? _autoId + '-more-actions' : null"
-          [matMenuTriggerFor]="moreMenu" />
-        <mat-menu #moreMenu="matMenu">
-          @for (entry of _overflow; track entry.index) {
-            @let action = entry.action;
-            @if (action.variant === 'normal') {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
-                (click)="onClickAction(action)">
-                @if (action.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
-                }
-                <span>{{ action.title }}</span>
-              </button>
-            } @else {
-              <div role="group" [attr.aria-label]="action.title">
-                <div class="sd-selection-menu-heading">{{ action.title }}</div>
-                @for (child of action.children; track $index) {
-                  <button
-                    mat-menu-item
-                    type="button"
-                    [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                    (click)="onClickAction(child)">
-                    @if (child.icon) {
-                      <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                    }
-                    <span>{{ child.title }}</span>
-                  </button>
-                }
-              </div>
+          [sdTableMenuButton]="moreMenu" />
+        <ng-template #moreMenu>
+          <div
+            cdkMenu
+            tabindex="-1"
+            class="sd-table-action-menu"
+            [attr.aria-label]="_moreLabel"
+            (keydown.escape)="$event.stopPropagation()">
+            @for (entry of _overflow; track entry.index) {
+              @let action = entry.action;
+              @if (action.variant === 'normal') {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
+                  [cdkMenuitemTypeaheadLabel]="action.title || ''"
+                  [style.color]="action.color ? 'var(--sd-' + action.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(action)">
+                  @if (action.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
+                  }
+                  <span>{{ action.title }}</span>
+                </button>
+              } @else {
+                <div role="group" [attr.aria-label]="action.title">
+                  <div class="sd-selection-menu-heading">{{ action.title }}</div>
+                  @for (child of action.children; track $index) {
+                    <button
+                      cdkMenuItem
+                      type="button"
+                      [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                      [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                      [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                      (cdkMenuItemTriggered)="onClickAction(child)">
+                      @if (child.icon) {
+                        <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                      }
+                      <span>{{ child.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
             }
-          }
-        </mat-menu>
+          </div>
+        </ng-template>
       }
       <button
         type="button"
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
index a2dcbfda0..60c0d0791 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
@@ -1,3 +1,5 @@
+@use '../action-menu/action-menu';
+
 :host {
   display: block;
   flex-shrink: 0;
@@ -61,12 +63,8 @@
     font-size: 18px;
   }
 }
-.sd-selection-menu-icon {
-  margin-right: 12px;
-  vertical-align: middle;
-}
 .sd-selection-menu-heading {
-  padding: 8px 16px 4px;
+  padding: 6px 12px 4px;
   color: var(--sd-text-secondary, #62676d);
   font-size: 12px;
   font-weight: 600;
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
index 58819c6cd..7c3edccec 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { SdTableMenuButtonDirective } from '../action-menu/action-menu';
 import { SdButton } from '@sdcorejs/angular/components/button';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
@@ -13,7 +14,7 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   templateUrl: './selector-action.component.html',
   styleUrl: './selector-action.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, MatMenuModule, SdButton, SdQuickAction],
+  imports: [SdIcon, CdkMenu, CdkMenuItem, SdTableMenuButtonDirective, SdButton, SdQuickAction],
 })
 export class SelectorActionComponent {
   // ==========================================
diff --git a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
new file mode 100644
index 000000000..eadd9b4e2
--- /dev/null
+++ b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
@@ -0,0 +1,96 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { BrowserUtilities } from '@sdcorejs/utils/fns';
+import { LayoutTestTheme } from '../../testing/layout-theme.spec';
+import { SdHoverCopyDirective } from './sd-hover-copy.directive';
+
+@Component({
+  imports: [SdHoverCopyDirective, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div style="overflow: hidden; width: 260px; margin: 80px 24px">
+      <table style="width: 100%; border-collapse: separate">
+        <tr style="position: relative; z-index: 20; background: white">
+          <td style="height: 40px">Previous row</td>
+        </tr>
+        <tr>
+          <td style="height: 40px; overflow: hidden" sdHoverCopy="cell-value" [sdHoverCopyDisabled]="disabled">Cell value</td>
+        </tr>
+      </table>
+    </div>
+  `,
+})
+class ClippedCopyHost {
+  disabled = false;
+}
+
+describe('SdHoverCopy overlay in table cells', () => {
+  let fixture: ComponentFixture<ClippedCopyHost>;
+  let overlays: HTMLElement;
+  let cell: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedCopyHost] });
+    spyOn(BrowserUtilities, 'copyToClipboard');
+    fixture = TestBed.createComponent(ClippedCopyHost);
+    fixture.detectChanges();
+    cell = fixture.nativeElement.querySelector('[sdHoverCopy]');
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function copy() {
+    cell.dispatchEvent(new MouseEvent('mouseenter'));
+    (cell.querySelector('button:last-of-type') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    tick();
+  }
+
+  it('paints the copied tooltip above adjacent rows outside the clipped cell', fakeAsync(() => {
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]') as HTMLElement | null;
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.height).toBeGreaterThan(0);
+    expect(getComputedStyle(tooltip.closest('.cdk-overlay-pane')!).pointerEvents).toBe('none');
+    expect(rect.top).toBeLessThan(cell.getBoundingClientRect().top);
+    // why: tooltip intentionally ignores pointer events; enable hit testing only for the paint-order probe.
+    tooltip.style.pointerEvents = 'auto';
+    expect(tooltip.contains(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2))).toBeTrue();
+    tooltip.style.pointerEvents = 'none';
+    tick(1000);
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+  }));
+
+  it('keeps one button and cleans up the overlay on scroll, disable and destroy', fakeAsync(() => {
+    expect(cell.querySelectorAll('button').length).toBe(1);
+    copy();
+    cell.parentElement!.dispatchEvent(new Event('scroll'));
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+    copy();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(cell.querySelector('button')).toBeNull();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    copy();
+    fixture.destroy();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips below the button when the cell is at the top of the viewport', fakeAsync(() => {
+    const table = cell.closest('table')!;
+    Object.assign(table.parentElement!.style, { position: 'fixed', top: '0', margin: '0' });
+    table.rows[0].style.display = 'none';
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.top).toBeGreaterThanOrEqual(cell.querySelector('button')!.getBoundingClientRect().bottom);
+    expect(rect.left).toBeGreaterThanOrEqual(8);
+    fixture.destroy();
+  }));
+});
diff --git a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
index 003fd69b6..8b0da141e 100644
--- a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
@@ -1,18 +1,9 @@
-/**
- * SdHoverCopyDirective spec
- *
- * Note: the directive creates its copy button both in `ngOnChanges` (for the
- * initial-value change on the `sdHoverCopyDisabled` input) and again in
- * `ngOnInit`.  The directive's internal `#copyButton` reference always points
- * to the LAST button created (the one from `ngOnInit`).  Tests that care about
- * the button managed by the directive use `getDirectiveButton()` which finds
- * the element whose listener and style are wired to `#copyButton`.
- */
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { SdHoverCopyDirective } from './sd-hover-copy.directive';
 
 @Component({
@@ -47,19 +38,13 @@ describe('SdHoverCopyDirective', () => {
     directiveInstance = fixture.debugElement.query(By.directive(SdHoverCopyDirective)).injector.get(SdHoverCopyDirective);
   });
 
-  /**
-   * The directive keeps `#copyButton` as its last-created button.
-   * `querySelectorAll('button')` returns all buttons; the directive manages the
-   * LAST one appended (ngOnInit fires after ngOnChanges creates the first).
-   */
   function getDirectiveButton(): HTMLElement | null {
-    const all = hostEl.querySelectorAll('button');
-    return all.length ? (all[all.length - 1] as HTMLElement) : null;
+    return hostEl.querySelector('button');
   }
 
   function getTooltip(): HTMLElement | null {
     const btn = getDirectiveButton();
-    return btn ? (btn.querySelector('span') as HTMLElement) : null;
+    return btn?.querySelector('span') ?? TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="tooltip"]');
   }
 
   // ─── creation ────────────────────────────────────────────────────────────────
@@ -69,8 +54,8 @@ describe('SdHoverCopyDirective', () => {
       expect(host).toBeTruthy();
     });
 
-    it('appends at least one copy button inside the host element on init', () => {
-      expect(hostEl.querySelector('button')).not.toBeNull();
+    it('appends exactly one copy button inside the host element on init', () => {
+      expect(hostEl.querySelectorAll('button').length).toBe(1);
     });
 
     it('sets host element position to relative', () => {
diff --git a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
index ca6cc7e17..83ca46159 100644
--- a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
+++ b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
@@ -1,4 +1,7 @@
 import { DestroyRef, Directive, ElementRef, inject, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges, input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { DomPortal } from '@angular/cdk/portal';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
 
@@ -14,9 +17,14 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
   readonly #i18n = inject(I18nService);
   readonly #destroyRef = inject(DestroyRef);
+  readonly #overlay = inject(Overlay);
+  readonly #document = inject(DOCUMENT);
 
   #copyButton: HTMLElement | null = null;
   #tooltip!: HTMLElement;
+  #tooltipOverlay: OverlayRef | null = null;
+  #unlistenCopy: (() => void) | null = null;
+  readonly #onScroll = () => this.#hideTooltip();
   #hideTooltipTimer: ReturnType<typeof setTimeout> | null = null;
   get #defaultTooltip(): string {
     return this.#i18n.t('core.directive.hover-copy.tooltip');
@@ -34,7 +42,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     // why: timeout 1s ẩn tooltip trước đây không được lưu lại cũng không huỷ, mà directive lại
     // không có teardown nào. Host bị destroy trong vòng 1s đó thì callback vẫn chạy và ghi style
     // lên node đã tháo khỏi DOM (timer sống lâu hơn view).
-    this.#destroyRef.onDestroy(() => this.#clearHideTooltipTimer());
+    this.#destroyRef.onDestroy(() => this.#removeCopyButton());
   }
 
   // https://onemount.atlassian.net/browse/SM-2287
@@ -61,6 +69,8 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #createAndAppendCopyButton(): void {
+    // why: ngOnChanges có thể tạo nút trước ngOnInit; chỉ giữ một nút và một overlay owner.
+    if (this.#copyButton) return;
     const parent = this.el.nativeElement;
     this.renderer.setStyle(parent, 'position', 'relative');
 
@@ -102,12 +112,9 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
     // Tooltip
     this.#tooltip = this.renderer.createElement('span');
+    this.renderer.setAttribute(this.#tooltip, 'role', 'tooltip');
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
-    this.renderer.setStyle(this.#tooltip, 'position', 'absolute');
-    this.renderer.setStyle(this.#tooltip, 'bottom', '100%');
-    this.renderer.setStyle(this.#tooltip, 'left', '50%');
-    this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');
-    this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
     this.renderer.setStyle(this.#tooltip, 'background', '#333');
     this.renderer.setStyle(this.#tooltip, 'color', '#fff');
     this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');
@@ -123,7 +130,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     this.renderer.appendChild(parent, this.#copyButton);
 
     // Listen click
-    this.renderer.listen(this.#copyButton, 'click', () => {
+    this.#unlistenCopy = this.renderer.listen(this.#copyButton, 'click', () => {
       const copyText = this.copyText();
       if (copyText && !this.sdHoverCopyDisabled()) {
         BrowserUtilities.copyToClipboard(String(copyText));
@@ -144,8 +151,12 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #removeCopyButton(): void {
-    // why: tooltip nằm trong button — bỏ button mà để timer chạy tiếp là ghi style lên node đã gỡ.
     this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.dispose();
+    this.#tooltipOverlay = null;
+    this.#unlistenCopy?.();
+    this.#unlistenCopy = null;
     if (this.#copyButton) {
       this.renderer.removeChild(this.el.nativeElement, this.#copyButton);
       this.#copyButton = null;
@@ -153,13 +164,41 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #showTooltip(message: string) {
+    if (!this.#copyButton) return;
+    if (!this.#tooltipOverlay) {
+      // why: portal thoát khỏi overflow/stacking context của table cell và modal body.
+      this.#tooltipOverlay = this.#overlay.create({
+        positionStrategy: this.#overlay
+          .position()
+          .flexibleConnectedTo(this.#copyButton)
+          .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+          ])
+          .withFlexibleDimensions(false)
+          .withViewportMargin(8)
+          .withPush(true),
+      });
+    }
     this.renderer.setProperty(this.#tooltip, 'innerText', message);
+    this.renderer.setStyle(this.#tooltip, 'display', 'block');
     this.renderer.setStyle(this.#tooltip, 'opacity', '1');
+    if (!this.#tooltipOverlay.hasAttached()) {
+      this.#tooltipOverlay.attach(new DomPortal(this.#tooltip));
+    }
+    this.renderer.setStyle(this.#tooltipOverlay.overlayElement, 'pointerEvents', 'none');
+    this.#tooltipOverlay.updatePosition();
+    // why: capture bắt cả scroll ở ancestor không khai cdkScrollable, tránh tooltip trôi khỏi cell.
+    this.#document.addEventListener('scroll', this.#onScroll, true);
   }
 
   #hideTooltip() {
+    this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.detach();
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
     this.renderer.setStyle(this.#tooltip, 'opacity', '0');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
   }
 
   @HostListener('mouseenter')
diff --git a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.md b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
index ed13ac3db..80fb5c776 100644
--- a/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
+++ b/versions/v19/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
@@ -29,11 +29,13 @@ None.
 
 ## Behavior
 - `ngOnChanges` (fires before `ngOnInit`): if `sdHoverCopyDisabled` changes to `false` and no button exists yet, creates one; if it changes to `true`, removes the existing button from the DOM.
-- `ngOnInit`: if not disabled, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. Also appends a tooltip `<span>` seeded from `core.directive.hover-copy.tooltip`.
+- `ngOnInit`: if not disabled and no button exists, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. The tooltip starts hidden inside the button; creation is idempotent across `ngOnChanges` and `ngOnInit`.
 - `mouseenter` on host: shows the button (`display: block`); skipped when `sdHoverCopyDisabled` is `true` or the button was never created.
 - `mouseleave` on host: hides the button (`display: none`) and resets the tooltip to `core.directive.hover-copy.tooltip` with `opacity: 0`.
 - Clicking the copy button: calls `BrowserUtilities.copyToClipboard(String(copyText))`, swaps the tooltip to `core.directive.hover-copy.copied` with `opacity: 1`, then auto-hides after 1000 ms by resetting to `core.directive.hover-copy.tooltip` with `opacity: 0`.
-- **Teardown**: the 1000 ms auto-hide timer is stored and cleared via `DestroyRef.onDestroy`, and also when the button is removed (`sdHoverCopyDisabled` → `true`). A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
+- The visible tooltip is portalled into the CDK overlay container on the document body, outside table row stacking contexts and ancestor overflow. It anchors above the copy button, falls back below near the viewport edge, and stays within an 8px viewport margin. It does not intercept pointer events.
+- Scrolling any ancestor hides the tooltip, including scroll containers without `cdkScrollable`. Mouse leave and the auto-hide timer also detach it from the overlay.
+- **Teardown**: disabling or destroying the host clears the timer, removes the scroll/click listeners, disposes the overlay and removes the copy button. A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
 
 ## i18n
 Both tooltip strings resolve through `I18nService` at the moment they are shown, so they follow the
@@ -45,7 +47,6 @@ active language (VI `Sao chép` / `Đã sao chép`, EN `Copy` / `Copied`, …):
 | Confirmation after a copy | `core.directive.hover-copy.copied` |
 
 ## Known issues
-- **Double-button creation on first render**: because `ngOnChanges` fires before `ngOnInit`, both hooks create a copy button when `sdHoverCopyDisabled` starts as `false`. The directive's internal reference points to the second button (created in `ngOnInit`), so behaviour is correct, but an orphaned first button element stays in the host's DOM. Tracked as a follow-up to SM-2287.
 - **No `aria-label`**: the generated `<button>` has no accessible label. Screen-reader users cannot identify its purpose. A future fix should add `aria-label="Sao chép"` (or the localised equivalent) to the button element.
 
 ## Examples
diff --git a/versions/v19/projects/sdcorejs-angular/i18n/src/en.ts b/versions/v19/projects/sdcorejs-angular/i18n/src/en.ts
index cb10863c9..06b465fe8 100644
--- a/versions/v19/projects/sdcorejs-angular/i18n/src/en.ts
+++ b/versions/v19/projects/sdcorejs-angular/i18n/src/en.ts
@@ -418,6 +418,7 @@ export const EN_MESSAGES = {
   'core.component.form-builder.group-children': 'Children',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Accent color',
+  'core.component.form-builder.collapsible': 'Allow expand/collapse',
   'core.component.form-builder.group-no-children': 'No fields yet. Add or drag fields into this group.',
   'core.component.form-builder.break': 'Break',
 
diff --git a/versions/v19/projects/sdcorejs-angular/i18n/src/ja.ts b/versions/v19/projects/sdcorejs-angular/i18n/src/ja.ts
index 5dffdabf6..a3a89bdaa 100644
--- a/versions/v19/projects/sdcorejs-angular/i18n/src/ja.ts
+++ b/versions/v19/projects/sdcorejs-angular/i18n/src/ja.ts
@@ -420,6 +420,7 @@ export const JA_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子要素',
   'core.component.form-builder.group-icon': 'アイコン',
   'core.component.form-builder.group-accent-color': 'アクセントカラー',
+  'core.component.form-builder.collapsible': '展開・折りたたみを許可',
   'core.component.form-builder.group-no-children': 'フィールドがまだありません。このグループにフィールドを追加またはドラッグしてください。',
   'core.component.form-builder.break': '改行',
 
diff --git a/versions/v19/projects/sdcorejs-angular/i18n/src/ko.ts b/versions/v19/projects/sdcorejs-angular/i18n/src/ko.ts
index 950f8c05d..e4e8c4b3c 100644
--- a/versions/v19/projects/sdcorejs-angular/i18n/src/ko.ts
+++ b/versions/v19/projects/sdcorejs-angular/i18n/src/ko.ts
@@ -419,6 +419,7 @@ export const KO_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '하위 요소',
   'core.component.form-builder.group-icon': '아이콘',
   'core.component.form-builder.group-accent-color': '강조 색상',
+  'core.component.form-builder.collapsible': '펼치기/접기 허용',
   'core.component.form-builder.group-no-children': '필드가 아직 없습니다. 이 그룹에 필드를 추가하거나 드래그하세요.',
   'core.component.form-builder.break': '줄 바꿈',
 
diff --git a/versions/v19/projects/sdcorejs-angular/i18n/src/vi.ts b/versions/v19/projects/sdcorejs-angular/i18n/src/vi.ts
index ac26c06b0..dbe94ea22 100644
--- a/versions/v19/projects/sdcorejs-angular/i18n/src/vi.ts
+++ b/versions/v19/projects/sdcorejs-angular/i18n/src/vi.ts
@@ -419,6 +419,7 @@ export const VI_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': 'Thành phần con',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Màu nhấn',
+  'core.component.form-builder.collapsible': 'Cho phép thu gọn/mở rộng',
   'core.component.form-builder.group-no-children': 'Chưa có trường nào. Thêm hoặc kéo trường vào group này.',
   'core.component.form-builder.break': 'Ngắt dòng',
 
diff --git a/versions/v19/projects/sdcorejs-angular/i18n/src/zh.ts b/versions/v19/projects/sdcorejs-angular/i18n/src/zh.ts
index b429856af..066257b96 100644
--- a/versions/v19/projects/sdcorejs-angular/i18n/src/zh.ts
+++ b/versions/v19/projects/sdcorejs-angular/i18n/src/zh.ts
@@ -419,6 +419,7 @@ export const ZH_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子项',
   'core.component.form-builder.group-icon': '图标',
   'core.component.form-builder.group-accent-color': '强调色',
+  'core.component.form-builder.collapsible': '允许展开/折叠',
   'core.component.form-builder.group-no-children': '尚无字段。请向此分组添加或拖入字段。',
   'core.component.form-builder.break': '换行',
 
diff --git a/versions/v19/projects/sdcorejs-angular/karma.conf.js b/versions/v19/projects/sdcorejs-angular/karma.conf.js
index adbeaf7da..ee95161f9 100644
--- a/versions/v19/projects/sdcorejs-angular/karma.conf.js
+++ b/versions/v19/projects/sdcorejs-angular/karma.conf.js
@@ -98,7 +98,7 @@ module.exports = function (config) {
     reporters: ['progress', 'kjhtml', 'coverage'],
     // why: từ khi `coverage-includes.spec.ts` kéo TOÀN BỘ source vào bundle (để mẫu số coverage
     // gồm cả file không spec nào import), page load đầu tiên nặng hẳn lên — bundle đã instrument,
-    // cộng ckeditor/pdfjs/exceljs/chart.js. Với default (`browserNoActivityTimeout` 30s,
+    // cộng ckeditor/pdfjs/exceljs. Với default (`browserNoActivityTimeout` 30s,
     // `browserDisconnectTimeout` 2s, `pingTimeout` 5s) Chrome bị coi là chết TRƯỚC KHI chạy
     // spec đầu tiên: "Disconnected reconnect failed before timeout of 2000ms (ping timeout)",
     // 0 spec chạy, exit 0 — tức là một run rỗng trông như run xanh. Các mốc dưới đây là để chờ
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
index a7a554540..390baf397 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
@@ -1,30 +1,38 @@
+@let _structured = structured();
+@let _showPin = showPin();
+@let _iconFontSet = iconFontSet();
 <nav
   class="sd-layout-menu-tree d-flex flex-column gap-4"
-  [class.sd-layout-menu-tree--structured]="structured()"
-  [class.sd-layout-menu-tree--pinnable]="showPin()"
+  [class.sd-layout-menu-tree--structured]="_structured"
+  [class.sd-layout-menu-tree--pinnable]="_showPin"
   aria-label="Navigation menu">
   @for (node of nodes(); track node.key) {
     @if (node.isGroup) {
-      <div
-        class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
-        [class.sd-layout-menu-tree__root]="node.isRoot"
-        [style.padding-left.px]="node.paddingLeft">
-        @for (offset of node.branchOffsets; track offset) {
-          <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
-        }
-        @if (node.showIcon) {
-          @if (structured() && node.menu.iconUrl) {
-            <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
-          } @else {
-            <sd-icon
-              data-menu-icon
-              [name]="node.menu.icon || 'folder'"
-              [fontSet]="iconFontSet()"
-              [size]="structured() ? '20px' : undefined"></sd-icon>
-          }
-        }
-        <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
-      </div>
+      @if (node.isCollapsible) {
+        <button
+          type="button"
+          class="sd-layout-menu-tree__group sd-layout-menu-tree__group-toggle d-flex align-items-center gap-8 T12M text-black400"
+          [attr.data-menu-group]="node.key"
+          [attr.aria-label]="node.title"
+          [attr.aria-expanded]="node.isExpanded"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft"
+          (click)="onToggleGroup(node.key)">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+          <sd-icon
+            class="sd-layout-menu-tree__disclosure"
+            [name]="node.isExpanded ? 'expand_more' : 'chevron_right'"
+            size="18px"
+            aria-hidden="true"></sd-icon>
+        </button>
+      } @else {
+        <div
+          class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+        </div>
+      }
     } @else {
       <div
         class="sd-layout-menu-tree__route d-flex align-items-center gap-4"
@@ -52,13 +60,13 @@
               <sd-icon
                 data-menu-icon
                 [name]="node.menu.icon || 'chevron_right'"
-                [fontSet]="iconFontSet()"
-                [size]="structured() ? '20px' : undefined"></sd-icon>
+              [fontSet]="_iconFontSet"
+              [size]="_structured ? '20px' : undefined"></sd-icon>
             }
           }
-          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
+          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
         </button>
-        @if (showPin()) {
+        @if (_showPin) {
           <button
             type="button"
             class="sd-layout-menu-tree__pin d-flex align-items-center justify-content-center"
@@ -78,3 +86,17 @@
     </div>
   }
 </nav>
+
+<ng-template #groupContent let-node>
+  @for (offset of node.branchOffsets; track offset) {
+    <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
+  }
+  @if (node.showIcon) {
+    @if (_structured && node.menu.iconUrl) {
+      <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
+    } @else {
+      <sd-icon data-menu-icon [name]="node.menu.icon || 'folder'" [fontSet]="_iconFontSet" [size]="_structured ? '20px' : undefined"></sd-icon>
+    }
+  }
+  <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
+</ng-template>
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
index 92309d494..875a4c557 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
@@ -1,5 +1,6 @@
 // why: Route and pin actions need a navigation-specific hit area not provided by a Core UI component.
 .sd-layout-menu-tree__route-button,
+.sd-layout-menu-tree__group-toggle,
 .sd-layout-menu-tree__pin {
   min-height: 40px;
   border: 0;
@@ -21,6 +22,7 @@
 
 // why: Navigation rows need a token-based hover surface without adding a second button component.
 .sd-layout-menu-tree__route-button:hover,
+.sd-layout-menu-tree__group-toggle:hover,
 .sd-layout-menu-tree__pin:hover {
   background: var(--sd-black100, var(--sd-surface-muted, #f3f3f3));
   color: var(--sd-primary, #005cbb);
@@ -32,6 +34,7 @@
 
 // why: Keyboard users need a visible focus indicator on custom navigation actions.
 .sd-layout-menu-tree__route-button:focus-visible,
+.sd-layout-menu-tree__group-toggle:focus-visible,
 .sd-layout-menu-tree__pin:focus-visible {
   outline: 2px solid var(--sd-primary);
   outline-offset: 2px;
@@ -61,6 +64,17 @@
   min-height: 32px;
 }
 
+.sd-layout-menu-tree__group-toggle {
+  text-align: left;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.sd-layout-menu-tree__disclosure {
+  flex: 0 0 18px;
+  margin-left: auto;
+}
+
 // why: Consumer-provided image icons need the same footprint as SdIcon glyphs.
 .sd-layout-menu-tree__icon-image {
   width: 20px;
@@ -144,7 +158,8 @@
     color: var(--menu-muted);
   }
 
-  .sd-layout-menu-tree__route-button:hover {
+  .sd-layout-menu-tree__route-button:hover,
+  .sd-layout-menu-tree__group-toggle:hover {
     background: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--menu-surface));
   }
 
@@ -190,12 +205,14 @@
   }
 
   .sd-layout-menu-tree__route-button:focus-visible,
+  .sd-layout-menu-tree__group-toggle:focus-visible,
   .sd-layout-menu-tree__pin:focus-visible {
     outline-offset: -2px;
   }
 
   @media (pointer: coarse) {
     .sd-layout-menu-tree__route .sd-layout-menu-tree__route-button,
+    .sd-layout-menu-tree__group-toggle,
     .sd-layout-menu-tree__pin {
       min-height: 44px;
     }
@@ -212,6 +229,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .sd-layout-menu-tree__route-button,
+  .sd-layout-menu-tree__group-toggle,
   .sd-layout-menu-tree__pin {
     transition: none;
   }
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
index d0c4c32e9..417f8c6aa 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
@@ -29,6 +29,7 @@ describe('SdLayoutMenuTreeComponent', () => {
   });
 
   it('preserves nested menu icons and spacing in the default V2/mobile presentation', () => {
+    expect(fixture.nativeElement.querySelector('[data-menu-group]')).toBeNull();
     const route = fixture.nativeElement.querySelector('[data-menu-key="id:reports"]') as HTMLElement;
     expect(route.querySelector('sd-icon')).not.toBeNull();
     expect(getComputedStyle(route).paddingLeft).toBe('28px');
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
index 46a50a4f6..5cf5e0c8a 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, output, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, model, output, signal } from '@angular/core';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 import { SdLayoutMenu, SdLayoutRootMenu, getMenuStableKey, searchMenuLeaves } from '../../../services';
@@ -15,6 +16,8 @@ interface SdLayoutMenuTreeNode {
   showIcon: boolean;
   isRoot: boolean;
   isGroup: boolean;
+  isCollapsible: boolean;
+  isExpanded: boolean;
   isActive: boolean;
   isPinned: boolean;
   isPinVisible: boolean;
@@ -25,7 +28,7 @@ interface SdLayoutMenuTreeNode {
 @Component({
   selector: 'sd-layout-menu-tree',
   standalone: true,
-  imports: [SdIcon],
+  imports: [SdIcon, NgTemplateOutlet],
   templateUrl: './menu-tree.component.html',
   styleUrl: './menu-tree.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +47,8 @@ export class SdLayoutMenuTreeComponent {
   pinVisibility = input<'hover' | 'always'>('hover');
   /** V3 hierarchy and flat shortcuts are opt-in; V2/mobile retain the default presentation. */
   presentation = input<'default' | 'hierarchy' | 'shortcuts'>('default');
+  collapsible = input(false);
+  collapsedGroupKeys = model<string[]>([]);
   structured = computed(() => this.presentation() !== 'default');
   iconFontSet = computed(() => (this.structured() ? ('material-icons-outlined' as const) : undefined));
   navigate = output<SdLayoutRootMenu>();
@@ -56,6 +61,8 @@ export class SdLayoutMenuTreeComponent {
     const query = this.query().trim();
     const structured = this.structured();
     const hierarchy = this.presentation() === 'hierarchy' && !query;
+    const collapsible = this.collapsible() && !query;
+    const collapsedKeys = new Set(this.collapsedGroupKeys());
     const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
     // Nhiều menu cùng khớp route thì chỉ path sát nhất sáng: ở '/appointment/cs' thì '/appointment' không sáng nữa
     const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
@@ -69,6 +76,7 @@ export class SdLayoutMenuTreeComponent {
         const path = 'path' in menu ? menu.path : '';
         const title = menu.title ?? menu.tooltipTitle ?? '';
         const isPinned = pinnedKeys.has(key);
+        const isExpanded = !collapsible || !collapsedKeys.has(key);
         nodes.push({
           menu,
           key,
@@ -80,6 +88,8 @@ export class SdLayoutMenuTreeComponent {
           showIcon: !structured || (hierarchy && depth === 0),
           isRoot: depth === 0 && (!structured || hierarchy),
           isGroup,
+          isCollapsible: isGroup && collapsible,
+          isExpanded,
           isActive: !!path && path === activeMenuPath,
           isPinned,
           isPinVisible: alwaysShowPin || isPinned || hoveredPinKey === key,
@@ -88,7 +98,7 @@ export class SdLayoutMenuTreeComponent {
           // quyết định vị trí. Tính trong `nodes` computed nên tự cập nhật khi đổi ngôn ngữ.
           pinLabel: this.#i18n.t(isPinned ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin', { title }),
         });
-        if (isGroup && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
+        if (isGroup && isExpanded && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
       }
     };
 
@@ -104,6 +114,10 @@ export class SdLayoutMenuTreeComponent {
     if ('path' in menu) this.navigate.emit(menu);
   }
 
+  onToggleGroup(key: string): void {
+    this.collapsedGroupKeys.update(keys => (keys.includes(key) ? keys.filter(value => value !== key) : [...keys, key]));
+  }
+
   onTogglePinned(event: MouseEvent, menu: SdLayoutMenu): void {
     event.stopPropagation();
     this.togglePinned.emit(menu);
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
index de417f7f0..5261ea32c 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
@@ -87,6 +87,8 @@ <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.rece
           <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.all-menu' | sdTranslate }}</h2>
           <sd-layout-menu-tree
             presentation="hierarchy"
+            [collapsible]="true"
+            [(collapsedGroupKeys)]="collapsedGroupKeys"
             [menus]="menus()"
             [query]="searchText()"
             [activePath]="activePath()"
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
index 976591419..d412e5dea 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
@@ -44,6 +44,139 @@ describe('SdSidebarV3', () => {
     expect(fixture.componentInstance.isCollapsed()).toBeFalse();
   });
 
+  const groupButton = (key: string): HTMLButtonElement | null =>
+    fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-group="${key}"]`);
+  const allRoute = (key: string): HTMLButtonElement | null => fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-key="${key}"]`);
+
+  it('toggles a group with a focusable disclosure without navigating or pinning', () => {
+    create();
+    const navigate = spyOn(TestBed.inject(Router), 'navigate');
+    const pin = spyOn(TestBed.inject(SdLayoutNavigationStateService), 'togglePinned');
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    expect(group.tagName).toBe('BUTTON');
+    expect(group.type).toBe('button');
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    group.focus();
+    group.click();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(group);
+    expect(group.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(pin).not.toHaveBeenCalled();
+    group.click();
+    fixture.detectChanges();
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('preserves independent nested disclosures when a parent is closed and reopened', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }, dashboard] },
+      { id: 'other', title: 'Other', children: [{ ...dashboard, id: 'other-leaf' }] },
+    ]);
+    fixture.detectChanges();
+    const nested = groupButton('id:nested');
+    expect(nested).not.toBeNull();
+    if (!nested) return;
+    nested.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).toBeNull();
+    expect(allRoute('id:other-leaf')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+  });
+
+  it('searches closed groups and preserves disclosures through query and rail toggles', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.detectChanges();
+    fixture.componentInstance.searchText.set('BAO CAO');
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('id:work')).toBeNull();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    fixture.componentInstance.searchText.set('');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('reveals the exact active branch on navigation without reopening unrelated branches', async () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }] },
+      { id: 'other', title: 'Other', children: [dashboard] },
+    ]);
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).not.toBeNull();
+    if (!groupButton('id:nested')) return;
+    for (const key of ['id:nested', 'id:work', 'id:other']) {
+      groupButton(key)!.click();
+      fixture.detectChanges();
+    }
+    const router = TestBed.inject(Router);
+    router.resetConfig([{ path: 'reports/:id', children: [] }]);
+    await router.navigateByUrl('/reports/42?source=test#details');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')!.getAttribute('aria-current')).toBe('page');
+    expect(groupButton('id:other')!.getAttribute('aria-expanded')).toBe('false');
+    // An explicit close remains respected while the current route stays unchanged.
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('opens a closed root group when its compact rail icon is activated', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('.sd-sidebar-v3__collapsed-action').click();
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('distinguishes same-title groups by their ancestor fallback keys', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { title: 'First', children: [{ title: 'Shared', children: [dashboard] }] },
+      { title: 'Second', children: [{ title: 'Shared', children: [reports] }] },
+    ]);
+    fixture.detectChanges();
+    const first = groupButton('group:first/shared');
+    expect(first).not.toBeNull();
+    if (!first) return;
+    first.click();
+    fixture.detectChanges();
+    expect(allRoute('id:dashboard')).toBeNull();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('group:second/shared')!.getAttribute('aria-expanded')).toBe('true');
+  });
+
   it('uses defaultCollapsed when no preference exists', () => {
     create({ version: 3, defaultCollapsed: true });
 
@@ -176,7 +309,8 @@ describe('SdSidebarV3', () => {
     expect(tree.querySelectorAll('[data-menu-icon]').length).toBe(2);
     expect(tree.querySelector('img[src="/nested-icon.svg"]')).toBeNull();
     const groups = tree.querySelectorAll<HTMLElement>('.sd-layout-menu-tree__group');
-    expect(groups[1].querySelector('sd-icon')).toBeNull();
+    expect(groups[1].querySelector('[data-menu-icon]')).toBeNull();
+    expect(groups[1].querySelector('.sd-layout-menu-tree__disclosure')).not.toBeNull();
     const leaf = tree.querySelector<HTMLButtonElement>('[data-menu-key="id:reports"]')!;
     expect(leaf.querySelector('sd-icon, img')).toBeNull();
     expect(leaf.getAttribute('aria-current')).toBe('page');
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
index c41d3b56f..42167cf99 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
@@ -9,6 +9,7 @@ import { SdLayoutMenuTreeComponent } from '../shared/menu-tree/menu-tree.compone
 import { SdLayoutSearchFieldComponent } from '../shared/search-field/search-field.component';
 import { SdLayoutUserMenuComponent } from '../shared/user-menu/user-menu.component';
 import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+import { containsMenuPath, resolveActiveMenuPath } from '../../utils';
 
 @Component({
   selector: 'sd-sidebar-v3',
@@ -28,6 +29,7 @@ export class SdSidebarV3 {
   userInfo = input.required<SdLayoutUserInfo>();
   sidebar = input.required<SidebarConfigurationV3>();
   isCollapsed = signal(false);
+  protected readonly collapsedGroupKeys = signal<string[]>([]);
   searchText = signal('');
   activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '');
   searchResults = computed<SdLayoutRootMenu[]>(() => searchMenuLeaves(this.menus(), this.searchText()));
@@ -55,6 +57,23 @@ export class SdSidebarV3 {
     this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
       if (event instanceof NavigationEnd) this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
     });
+    effect(() => {
+      const menus = this.menus();
+      const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
+      if (!activeMenuPath) return;
+      const activeGroupKeys = new Set<string>();
+      const visit = (items: SdLayoutMenu[], ancestors: string[]): void => {
+        for (const menu of items) {
+          if (!('children' in menu) || !containsMenuPath(menu, activeMenuPath)) continue;
+          const key = getMenuStableKey(menu, ancestors);
+          activeGroupKeys.add(key);
+          visit(menu.children ?? [], [...ancestors, menu.title ?? key]);
+        }
+      };
+      visit(menus, []);
+      // why: Chỉ mở nhánh khi route/menu đổi; người dùng vẫn được đóng nhánh đang active.
+      untracked(() => this.collapsedGroupKeys.update(keys => keys.filter(key => !activeGroupKeys.has(key))));
+    });
   }
 
   toggleCollapsed(): void {
@@ -66,6 +85,7 @@ export class SdSidebarV3 {
     if ('path' in menu) this.navigateMenu(menu);
     else {
       this.isCollapsed.set(false);
+      this.collapsedGroupKeys.update(keys => keys.filter(key => key !== getMenuStableKey(menu)));
       this.#navigationState.patchVersionState(3, { collapsed: false });
     }
   }
diff --git a/versions/v19/projects/sdcorejs-angular/modules/layout/sd-layout.md b/versions/v19/projects/sdcorejs-angular/modules/layout/sd-layout.md
index 09d64b249..a71a963f1 100644
--- a/versions/v19/projects/sdcorejs-angular/modules/layout/sd-layout.md
+++ b/versions/v19/projects/sdcorejs-angular/modules/layout/sd-layout.md
@@ -246,6 +246,10 @@ const menus: SdLayoutMenu[] = [
 
 V2 honors up to three valid `primaryMenuIds` in the supplied order, fills missing slots from the remaining visible roots, and exposes overflow through More. V3 search is accent-insensitive and searches the filtered menu tree.
 
+Desktop V3 menu groups support expand/collapse at every depth without additional configuration. Groups start expanded; click the group row or focus it with Tab and press Enter/Space to toggle its children. The disclosure chevron and `aria-expanded` reflect the current state. Closing a parent preserves each nested group's state, and group toggles do not navigate or pin items.
+
+Group state belongs to the mounted V3 sidebar: search still finds leaves inside closed groups, clearing the query restores the tree state, and toggling the whole sidebar between drawer and icon rail preserves it. Activating a group icon in the rail opens the drawer and that root group. A route change opens the ancestors of the most exact active menu; unrelated groups retain their state. Group state resets when the sidebar is recreated and is not stored in local storage. Pinned/Recent shortcuts, V2 and mobile navigation retain their existing behavior.
+
 ### Active menu resolution prefers the most exact path
 
 A menu is active only when it owns the longest `path` that matches the current route. With both `/appointment` and `/appointment/cs` declared, standing on `/appointment/cs` highlights the child alone — the ancestor entry is no longer lit up, and `aria-current="page"` is set on that one row. `resolveActiveMenuPath(menus, routePath)` from the layout `utils` is the single decision point: V1 uses it for node focus, menu-group binding and branch expansion, and the shared `sd-layout-menu-tree` (V2, V3 and their mobile variants) uses it for `isActive`. Matching stays segment-based, so `/appointment` never matches `/appointments`, and a route with no menu of its own (`/appointment/cs/123`) still activates its closest declared ancestor. `MenuFocusPipe` takes the resolved path as its third argument; called with two arguments it keeps the previous prefix matching.
diff --git a/versions/v19/projects/sdcorejs-angular/ng-package.json b/versions/v19/projects/sdcorejs-angular/ng-package.json
index a3dd12272..7f559acb7 100644
--- a/versions/v19/projects/sdcorejs-angular/ng-package.json
+++ b/versions/v19/projects/sdcorejs-angular/ng-package.json
@@ -14,7 +14,6 @@
     "@bjorn3/browser_wasi_shim",
     "keycloak-js",
     "prismjs",
-    "chart.js",
     "pdfjs-dist",
     "@lucide/angular"
   ],
diff --git a/versions/v19/projects/sdcorejs-angular/package.json b/versions/v19/projects/sdcorejs-angular/package.json
index 6b3d295f6..e9d43e03b 100644
--- a/versions/v19/projects/sdcorejs-angular/package.json
+++ b/versions/v19/projects/sdcorejs-angular/package.json
@@ -45,7 +45,6 @@
     "@lucide/angular": "^1.22.0",
     "@ckeditor/ckeditor5-angular": "11.1.2",
     "ckeditor5": "48.0.0",
-    "chart.js": "^4.5.1",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
     "keycloak-js": "^26.0.0",
@@ -56,7 +55,6 @@
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
-    "./fesm2022/sdcorejs-angular-components-chart.mjs",
     "./fesm2022/sdcorejs-angular-components-code-editor.mjs",
     "./fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs"
   ]
diff --git a/versions/v20/README.md b/versions/v20/README.md
index 095db5a3a..67e7ef8cc 100644
--- a/versions/v20/README.md
+++ b/versions/v20/README.md
@@ -176,7 +176,7 @@ Mỗi component / form control / service / module là 1 entry point độc lập
 
 | Group | Items |
 | --- | --- |
-| Display | `badge` · `avatar` · `chart` · `section` · `view` · `inform` |
+| Display | `badge` · `avatar` · `section` · `view` · `inform` |
 | Action | `button` · `quick-action` · `operator` |
 | Layout | `splitter` · `side-drawer` · `tab` · `tab-router` · `stepper` · `modal` · `anchor` |
 | Data | `table` · `tree` · `org-chart` · `query-bar` · `query-builder` · `preview` · `history` |
diff --git a/versions/v20/SYNC-STATUS.md b/versions/v20/SYNC-STATUS.md
index fa9ec5504..5fe80941d 100644
--- a/versions/v20/SYNC-STATUS.md
+++ b/versions/v20/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 20 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 09:50:52 |
+| Updated At | 2026-09-11 15:35:26 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v20 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v20/package-lock.json b/versions/v20/package-lock.json
index 690813934..3122b0ecb 100644
--- a/versions/v20/package-lock.json
+++ b/versions/v20/package-lock.json
@@ -23,7 +23,6 @@
                 "@lucide/angular": "^1.22.0",
                 "@sdcorejs/angular-material-datetime": "1.0.4",
                 "@sdcorejs/utils": "1.1.4",
-                "chart.js": "^4.5.1",
                 "ckeditor5": "48.0.0",
                 "date-fns": "^3.6.0",
                 "exceljs": "^4.4.0",
@@ -6117,12 +6116,6 @@
                 "tslib": "2"
             }
         },
-        "node_modules/@kurkle/color": {
-            "version": "0.3.4",
-            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-            "license": "MIT"
-        },
         "node_modules/@leichtgewicht/ip-codec": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -10978,18 +10971,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/chart.js": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-            "license": "MIT",
-            "dependencies": {
-                "@kurkle/color": "^0.3.0"
-            },
-            "engines": {
-                "pnpm": ">=8"
-            }
-        },
         "node_modules/chokidar": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
diff --git a/versions/v20/package.json b/versions/v20/package.json
index d91377de4..f72741ed3 100644
--- a/versions/v20/package.json
+++ b/versions/v20/package.json
@@ -35,7 +35,6 @@
     "@lucide/angular": "^1.22.0",
     "@sdcorejs/angular-material-datetime": "1.0.4",
     "@sdcorejs/utils": "1.1.4",
-    "chart.js": "^4.5.1",
     "ckeditor5": "48.0.0",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
diff --git a/versions/v20/projects/sdcorejs-angular/README.md b/versions/v20/projects/sdcorejs-angular/README.md
index e84c41a42..234a3770d 100644
--- a/versions/v20/projects/sdcorejs-angular/README.md
+++ b/versions/v20/projects/sdcorejs-angular/README.md
@@ -91,18 +91,20 @@ Replace the timer with your typed service call and reset `saving` in a `finally`
 
 | Area              | Representative APIs                                                                                                             |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, editors, and document tooling      |
+| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, editors, and document tooling              |
 | Data and workflow | Local/server tables, entity/tree pickers, query builders, unsaved-change guards, background tasks, upload, and Excel import     |
 | Form controls     | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, and color   |
 | Services          | Typed API/retry/cancel, ref-counted loading, graph-safe persistence/cache/storage, viewport signals, notifications, and exports |
 | Portal modules    | Auth, Keycloak, permission, layout, and icon modules                                                                            |
 | Localization      | Built-in `vi`, `en`, `ja`, `ko`, and `zh` catalogs, plus a synchronous custom-catalog provider                                  |
 
+Charting libraries are selected, installed, and configured by the consuming application. Core UI does not bundle a chart engine; `sd-org-chart` remains available for organizational hierarchies.
+
 The [live showcase](https://sdcorejs.github.io/sdcorejs-angular/) demonstrates components, forms, and services. The [latest API manifest](https://sdcorejs.github.io/sdcorejs-angular/docs/latest/index.json) lists every published reference document without duplicating the full API here.
 
 ## Standalone and subpath imports
 
-Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. The package declares `sideEffects: false`.
+Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. Stylesheets and editor registration entry points are retained as side effects.
 
 ```ts
 import { SdButton } from '@sdcorejs/angular/components/button';
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/index.ts b/versions/v20/projects/sdcorejs-angular/components/chart/index.ts
deleted file mode 100644
index 7551d46c3..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './src/bar-chart.component';
-export * from './src/line-chart.component';
-export * from './src/pie-chart.component';
-export * from './src/doughnut-chart.component';
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/ng-package.json b/versions/v20/projects/sdcorejs-angular/components/chart/ng-package.json
deleted file mode 100644
index 19e3f2bcb..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/ng-package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/sd-chart.md b/versions/v20/projects/sdcorejs-angular/components/chart/sd-chart.md
deleted file mode 100644
index 8df787871..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/sd-chart.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# `<sd-bar-chart>` / `<sd-line-chart>` / `<sd-pie-chart>` / `<sd-doughnut-chart>`
-
-**Type**: Component family (4 separate components, one per chart type)
-**Selectors**: `sd-bar-chart`, `sd-line-chart`, `sd-pie-chart`, `sd-doughnut-chart`
-**Import path**: `@sdcorejs/angular/components/chart` (or barrel: `@sdcorejs/angular/components`)
-**Classes**: `SdBarChartComponent`, `SdLineChartComponent`, `SdPieChartComponent`, `SdDoughnutChartComponent`
-**Standalone**: yes
-**Change detection**: `OnPush`
-**Underlying engine**: [Chart.js](https://www.chartjs.org/) (all `registerables` registered)
-
-## One-line purpose
-Thin signal-based wrappers around Chart.js — render bar / line / pie / doughnut visualizations from declarative `data` / `options` / `plugins` inputs, with auto-update on signal changes.
-
-## When to use
-- Dashboards: KPI cards, time-series, breakdown by category
-- Reports: monthly/quarterly comparisons, share-of-total
-- Analytics widgets inside detail pages
-- Any place a Chart.js chart fits — these wrappers don't add domain styling, they relay Chart.js config
-
-## When NOT to use
-- For sparkline / inline trend cells in tables — use a smaller dedicated component
-- For non-Chart.js visualizations (D3, ECharts, mermaid) — use those libraries directly
-- For numeric "stat tiles" without a graph — use a card + typography
-- When data updates faster than ~10 fps — Chart.js redraw cost will dominate; consider canvas-level rendering
-
-## Inputs (identical shape across all 4 charts; the generic chart-type changes)
-
-### `<sd-bar-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'bar'>` | (required) | Chart.js v4 bar dataset (`labels`, `datasets[]`). |
-| `options` | `ChartOptions<'bar'>` | `undefined` | Chart.js options (scales, plugins, legend, tooltips, …). |
-| `plugins` | `Plugin<'bar'>[]` | `[]` | Chart.js plugins (chart-local; `Chart.register(...registerables)` is already called globally). |
-
-### `<sd-line-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'line'>` | (required) | Chart.js v4 line dataset. |
-| `options` | `ChartOptions<'line'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'line'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-pie-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'pie'>` | (required) | Chart.js v4 pie dataset. |
-| `options` | `ChartOptions<'pie'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'pie'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-doughnut-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'doughnut'>` | (required) | Chart.js v4 doughnut dataset. |
-| `options` | `ChartOptions<'doughnut'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'doughnut'>[]` | `[]` | Chart-local plugins. |
-
-## Outputs
-None. To respond to user interaction, attach Chart.js plugins or pass `options.onClick` / `options.onHover` callbacks via `options`.
-
-## Content projection (slots)
-None — these are pure canvas wrappers.
-
-## Behavior notes
-- An internal `effect()` watches `data`/`options` signals and calls `chart.update()` on change (no destroy/recreate, so animations are smooth).
-- The chart instance is created in `ngOnInit` and destroyed in `ngOnDestroy`.
-- **Bar and line** add a horizontal-scroll wrapper when `data.labels.length > 15`: the inner div gets `min-width = labels.length * 50 px` and the outer wrapper gets `overflow-x: auto`. This avoids cramped axes on dense series.
-- **Pie and doughnut** are 100% width / 100% height of their host — set the host's size via CSS.
-
-## Visual cues
-- **Bar**: vertical bars over a horizontal label axis; horizontally scrollable when many labels.
-- **Line**: time-series line(s) with optional area fill (per Chart.js config); horizontally scrollable when many labels.
-- **Pie**: full-circle slice diagram, 100%-of-total proportions.
-- **Doughnut**: same as pie with a hollow center (good for a centered KPI label).
-- All four obey `data.datasets[*].backgroundColor` / `borderColor` — colors come from the data, not the component.
-
-## Examples
-
-### 1. Monthly revenue bar chart
-```ts
-revenueData = signal<ChartData<'bar'>>({
-  labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-  datasets: [{
-    label: 'Doanh thu (triệu đồng)',
-    data: [120, 135, 110, 160, 180, 150],
-    backgroundColor: '#3498db',
-  }],
-});
-revenueOptions: ChartOptions<'bar'> = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: { legend: { position: 'top' } },
-};
-```
-```html
-<div style="height: 320px;">
-  <sd-bar-chart [data]="revenueData()" [options]="revenueOptions"></sd-bar-chart>
-</div>
-```
-
-### 2. Multi-series line chart
-```html
-<div style="height: 280px;">
-  <sd-line-chart [data]="trafficData()" [options]="trafficOptions"></sd-line-chart>
-</div>
-```
-
-### 3. Pie chart for category breakdown
-```ts
-breakdownData = signal<ChartData<'pie'>>({
-  labels: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C'],
-  datasets: [{ data: [45, 30, 25], backgroundColor: ['#1abc9c', '#3498db', '#e67e22'] }],
-});
-```
-```html
-<div style="height: 240px; width: 240px;">
-  <sd-pie-chart [data]="breakdownData()"></sd-pie-chart>
-</div>
-```
-
-### 4. Doughnut KPI with center label (via plugin)
-```html
-<div style="height: 200px; width: 200px; position: relative;">
-  <sd-doughnut-chart
-    [data]="kpiData()"
-    [options]="kpiOptions"
-    [plugins]="[centerLabelPlugin]">
-  </sd-doughnut-chart>
-</div>
-```
-
-## Anti-patterns
-- Forgetting to set a height on the host — Chart.js needs a sized container to render; `height: 0` produces a blank canvas
-- Passing brand-new object references on every change-detection cycle for `options` — every change triggers `chart.update()`; memoize when possible
-- Using these wrappers for fundamentally different chart types (radar, scatter, polar) without adding a corresponding component — these 4 selectors are typed to specific chart types
-- Manually calling `Chart.register(...)` again — already registered at module load
-- Putting these inside a `*ngIf` that toggles rapidly — destroys/recreates the canvas; consider keeping mounted and toggling visibility
-
-## Related
-- `<sd-card>` — common host for charts on a dashboard
-- `<sd-tab>` — to switch between multiple chart views
-- `<sd-page>` — page shell containing reporting dashboards
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts b/versions/v20/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
deleted file mode 100644
index 908389590..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-bar-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdBarChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'bar'>> = input.required<ChartData<'bar'>>();
-  options: InputSignal<ChartOptions<'bar'> | undefined> = input<ChartOptions<'bar'>>();
-  plugins: InputSignal<Plugin<'bar'>[]> = input<Plugin<'bar'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'bar'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData as any;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'bar',
-        data: this.data() as any,
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts b/versions/v20/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
deleted file mode 100644
index d166ee3a8..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-doughnut-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdDoughnutChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'doughnut'>> = input.required<ChartData<'doughnut'>>();
-  options: InputSignal<ChartOptions<'doughnut'> | undefined> = input<ChartOptions<'doughnut'>>();
-  plugins: InputSignal<Plugin<'doughnut'>[]> = input<Plugin<'doughnut'>[]>([]);
-
-  chart: Chart<'doughnut'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'doughnut',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts b/versions/v20/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
deleted file mode 100644
index 20512d49b..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-line-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdLineChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'line'>> = input.required<ChartData<'line'>>();
-  options: InputSignal<ChartOptions<'line'> | undefined> = input<ChartOptions<'line'>>();
-  plugins: InputSignal<Plugin<'line'>[]> = input<Plugin<'line'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'line'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'line',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v20/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts b/versions/v20/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
deleted file mode 100644
index 7c6899819..000000000
--- a/versions/v20/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-pie-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdPieChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'pie'>> = input.required<ChartData<'pie'>>();
-  options: InputSignal<ChartOptions<'pie'> | undefined> = input<ChartOptions<'pie'>>();
-  plugins: InputSignal<Plugin<'pie'>[]> = input<Plugin<'pie'>[]>([]);
-
-  chart: Chart<'pie'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'pie',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md b/versions/v20/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
index e288032ab..0254e79de 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
@@ -113,6 +113,25 @@ interface SdFormGenericComponentBase {
 
 `SdFormGenericGroup` is not a field — it is a titled container with its own `layout`, a nested `components` array, and required `properties.{icon, color}`. Groups do not nest: the builder hides `group` from the palette while you are editing one.
 
+Groups support `properties.hidden`, `hiddenWhenExpression` and `visibleWhenExpression` for visibility. They have **no disabled-when option** (`disabledWhenExpression`) or required rule; configure those on individual child fields. Legacy group-level disable conditions are ignored by the renderer.
+
+| Group property | Type | Default | Behaviour |
+| --- | --- | --- | --- |
+| `properties.collapsible` | `boolean` | `false` | Allows expanding/collapsing the group in builder preview and `<sd-form-render>`, including viewed mode. Uses the same `collapsible` property as `<sd-section>`. |
+
+```ts
+const group: SdFormGenericGroup = {
+  id: 'details',
+  type: 'group',
+  label: 'Details',
+  layout: { columns: '12' },
+  properties: { icon: 'category', color: 'primary', collapsible: true },
+  components: [/* child fields */],
+};
+```
+
+Groups start expanded. Collapsing changes presentation only: child controls keep their values, touched state and validation. The expanded/collapsed state belongs to the rendered section instance and is not saved to the schema. The design canvas remains available for editing group contents through Details.
+
 `SdFormGenericValues` is a convenience alias for `SdFormGenericRadio | SdFormGenericSelect | SdFormGenericChecklist`. Their inline `values` entries are `SdFormGenericSelectionStaticItem` — `{ value: string; label: string }` (note `label`, not `display`; the `display` spelling belongs to `SdFormGenericSelectionItem`, which is what a `valuesKey` lookup returns).
 
 ### Expressions
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
index 84c442546..9c9a4ccad 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
@@ -8,6 +8,10 @@
   </summary>
   <div class="fb-section__body">
     <attribute-input [form]="form" [(model)]="_group.label" [label]="'core.component.form-builder.label' | sdTranslate"></attribute-input>
+    <attribute-switch
+      [form]="form"
+      [(model)]="_group.properties.collapsible"
+      [label]="'core.component.form-builder.collapsible' | sdTranslate"></attribute-switch>
 
     <div class="fb-field">
       <div class="fb-field__label">{{ 'core.component.form-builder.group-icon' | sdTranslate }}</div>
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
new file mode 100644
index 000000000..53f7ecaa7
--- /dev/null
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { I18nService } from '@sdcorejs/angular/i18n';
+import { SdFormGenericGroup } from '../../../../../models';
+import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
+import { GroupAttribute } from './group-attribute.component';
+
+describe('GroupAttribute', () => {
+  let fixture: ComponentFixture<GroupAttribute>;
+  let group: SdFormGenericGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [GroupAttribute, NoopAnimationsModule] });
+    group = {
+      id: 'group',
+      type: 'group',
+      label: 'Details',
+      layout: { columns: '12' },
+      components: [],
+      properties: { icon: 'category', color: 'primary' },
+    };
+    fixture = TestBed.createComponent(GroupAttribute);
+    fixture.componentRef.setInput('group', group);
+    fixture.detectChanges();
+  });
+
+  it('offers visibility expressions without a disabled-when option', () => {
+    const i18n = TestBed.inject(I18nService);
+    const labels = fixture.debugElement
+      .queryAll(By.directive(AttributeExpression))
+      .map(element => (element.componentInstance as AttributeExpression).label);
+    expect(labels).toEqual([i18n.t('core.component.form-builder.visible-when'), i18n.t('core.component.form-builder.hidden-when')]);
+    expect('disabledWhenExpression' in group.properties).toBeFalse();
+  });
+
+  it('defaults collapsible to false and saves both choices in group properties', () => {
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (!optionElement) return;
+    const option = optionElement.componentInstance as AttributeSwitch;
+    expect(option.model).toBeFalse();
+
+    option.modelChange.emit(true);
+    fixture.detectChanges();
+    expect((JSON.parse(JSON.stringify(group)) as SdFormGenericGroup).properties.collapsible).toBeTrue();
+
+    option.modelChange.emit(false);
+    fixture.detectChanges();
+    expect(group.properties.collapsible).toBeFalse();
+  });
+
+  it('restores the collapsible choice from a loaded schema', () => {
+    fixture.componentRef.setInput('group', { ...group, properties: { ...group.properties, collapsible: true } });
+    fixture.detectChanges();
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (optionElement) expect((optionElement.componentInstance as AttributeSwitch).model).toBeTrue();
+  });
+});
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
index d7190d45c..3d496daf5 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
@@ -5,6 +5,7 @@ import { SD_COMPONENT_ICONS, SdFormGenericComponent, SdFormGenericGroup } from '
 import { BuilderService } from '../../../services';
 import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
 import { AttributeInput } from '../../attribute-input/attribute-input.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
 
 const ICON_PRESETS = ['category', 'folder', 'inventory_2', 'group_work', 'workspaces', 'view_quilt'] as const;
 const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as const;
@@ -14,7 +15,7 @@ const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as
   templateUrl: './group-attribute.component.html',
   styleUrl: './group-attribute.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AttributeInput, AttributeExpression, SdTranslatePipe],
+  imports: [AttributeInput, AttributeExpression, AttributeSwitch, SdTranslatePipe],
 })
 export class GroupAttribute {
   // ── constants ────────────────────────────────────────────────────────
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
index 17fdf59bb..0e79e21d1 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
@@ -6,7 +6,7 @@
         @if (component.type === 'group') {
           @if (!!component.components.length) {
             <div class="col-12 mt-16">
-              <sd-section [title]="component.label" [icon]="component.properties.icon">
+              <sd-section [title]="component.label" [icon]="component.properties.icon" [collapsible]="component.properties.collapsible ?? false">
                 <!-- why: `.sd-section-body` để padding 0 (mỗi nội dung tự quyết), nên các field chỉ
                      còn px-8/py-8 của riêng chúng và dính sát khung section. Group tự chừa lề. -->
                 <div class="row mx-0 c-group-body">
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
index 0ca6931fc..5d4a36a1e 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SdFormRender } from './form-render.component';
 
 describe('SdFormRender - configuration data safety', () => {
@@ -68,6 +69,108 @@ describe('SdFormRender - configuration data safety', () => {
   });
 });
 
+describe('SdFormRender - group collapse', () => {
+  let fixture: ComponentFixture<SdFormRender>;
+  let form: FormGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [SdFormRender, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(SdFormRender);
+    form = new FormGroup({});
+    fixture.componentRef.setInput('form', form);
+  });
+
+  function render(properties: Record<string, unknown> = {}, viewed = false) {
+    fixture.componentRef.setInput('viewed', viewed);
+    fixture.componentRef.setInput('configuration', {
+      components: [
+        {
+          id: 'group',
+          type: 'group',
+          label: 'Details',
+          layout: { columns: '12' },
+          properties: { icon: 'category', color: 'primary', ...properties },
+          components: [
+            {
+              id: 'name',
+              key: 'name',
+              type: 'textfield',
+              label: 'Name',
+              layout: { columns: '12' },
+              validate: { required: true },
+              properties: {},
+            },
+          ],
+        },
+      ],
+    });
+    fixture.detectChanges();
+    flushMicrotasks();
+    fixture.detectChanges();
+  }
+
+  for (const collapsible of [undefined, false]) {
+    it(`keeps the group expanded without a toggle when collapsible is ${collapsible}`, fakeAsync(() => {
+      render({ collapsible });
+      expect(fixture.nativeElement.querySelector('.sd-section-body')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('.sd-section-collapse-toggle')).toBeNull();
+    }));
+  }
+
+  it('collapses and expands without losing child control state, value or validation', fakeAsync(() => {
+    render({ collapsible: true });
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    const control = form.get('name')!;
+    expect(control.hasError('required')).toBeTrue();
+    control.markAsTouched();
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(fixture.nativeElement.querySelector('.sd-section-body')).toBeNull();
+    expect(form.get('name')).toBe(control);
+    expect(control.touched).toBeTrue();
+    expect(control.hasError('required')).toBeTrue();
+    control.setValue('Saved name');
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(fixture.nativeElement.querySelector('sd-input input').value).toBe('Saved name');
+    expect(form.get('name')).toBe(control);
+    expect(control.valid).toBeTrue();
+    fixture.destroy();
+  }));
+
+  it('allows collapse in viewed mode', fakeAsync(() => {
+    render({ collapsible: true }, true);
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  }));
+
+  it('ignores legacy group disable conditions and keeps visibility rules', fakeAsync(() => {
+    fixture.componentRef.setInput('entity', { locked: true });
+    render({
+      disabledWhenExpression: {
+        key: 'disable-group',
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [{ key: 'locked', type: 'condition', field: 'locked', operator: 'EQUAL', value: true, dayInfo: {} }],
+      },
+    });
+    expect(form.get('name')?.enabled).toBeTrue();
+    expect(fixture.nativeElement.querySelector('sd-input input').disabled).toBeFalse();
+    render({ collapsible: true, hidden: true });
+    expect(fixture.nativeElement.querySelector('sd-section')).toBeNull();
+  }));
+});
+
 describe('SdFormRender - initial preview render', () => {
   let fixture: ComponentFixture<SdFormRender>;
 
diff --git a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
index 0e86d0062..27598908b 100644
--- a/versions/v20/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
@@ -279,6 +279,7 @@ export interface SdFormGenericGroup {
   properties: {
     icon: string;
     color: Color;
+    collapsible?: boolean;
     hidden?: boolean;
     hiddenWhenExpression?: SdFormGenericExpression;
     visibleWhenExpression?: SdFormGenericExpression;
diff --git a/versions/v20/projects/sdcorejs-angular/components/history/sd-history.md b/versions/v20/projects/sdcorejs-angular/components/history/sd-history.md
index b1d7413a3..0a9be5689 100644
--- a/versions/v20/projects/sdcorejs-angular/components/history/sd-history.md
+++ b/versions/v20/projects/sdcorejs-angular/components/history/sd-history.md
@@ -20,7 +20,7 @@ Vertical timeline that renders a list of history/audit events — each with titl
 ## When NOT to use
 - For a list of records the user can act on → use a table / list component
 - For chat/messaging → use a dedicated chat thread component
-- For a chart of events over time → use `<sd-chart>` with a time axis
+- For a chart of events over time → use a chart library selected and installed by the consuming application
 - For a single most-recent event → just render plain text with a `<sd-badge>`
 
 ## Inputs
diff --git a/versions/v20/projects/sdcorejs-angular/components/index.ts b/versions/v20/projects/sdcorejs-angular/components/index.ts
index b5f5ba3b4..c938d0c73 100644
--- a/versions/v20/projects/sdcorejs-angular/components/index.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/index.ts
@@ -22,7 +22,6 @@ export * from '@sdcorejs/angular/components/import-excel';
 export * from '@sdcorejs/angular/components/mini-editor';
 export * from '@sdcorejs/angular/components/view';
 export * from '@sdcorejs/angular/components/code-editor';
-export * from '@sdcorejs/angular/components/chart';
 export * from '@sdcorejs/angular/components/editor';
 export * from '@sdcorejs/angular/components/splitter';
 export * from '@sdcorejs/angular/components/preview';
diff --git a/versions/v20/projects/sdcorejs-angular/components/modal/sd-modal.md b/versions/v20/projects/sdcorejs-angular/components/modal/sd-modal.md
index 7b2f22ae5..571ac1427 100644
--- a/versions/v20/projects/sdcorejs-angular/components/modal/sd-modal.md
+++ b/versions/v20/projects/sdcorejs-angular/components/modal/sd-modal.md
@@ -41,7 +41,7 @@ import { SdModal } from '@sdcorejs/angular/components/modal';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Dialog and bottom-sheet body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -101,4 +101,4 @@ The real dialog/bottom-sheet container is associated with its visible heading us
 
 ## Overlay presentation refresh
 
-Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Header/body/footer use aligned 24px horizontal insets (16px on narrow screens), 18px titles and 44px mobile action targets. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
+Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Dialog and bottom-sheet header/footer share 12px vertical padding, 16px horizontal insets and a white background (`--sd-white`, default `#fff`). Body content aligns to the 16px inset; titles remain 18px and mobile action targets remain 44px. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
diff --git a/versions/v20/projects/sdcorejs-angular/components/modal/src/modal.component.scss b/versions/v20/projects/sdcorejs-angular/components/modal/src/modal.component.scss
index 820b54dd8..73e50c93b 100644
--- a/versions/v20/projects/sdcorejs-angular/components/modal/src/modal.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/modal/src/modal.component.scss
@@ -66,8 +66,7 @@
 }
 
 .sd-modal-header {
-  min-height: 64px;
-  padding: 16px;
+  min-height: 56px;
   display: flex;
   align-items: center;
   gap: 16px;
@@ -175,7 +174,6 @@
 
 .sd-modal-footer {
   min-height: 56px;
-  padding: 16px;
   border-top: 1px solid var(--sd-modal-border);
   display: flex;
   align-items: center;
@@ -213,7 +211,8 @@
 .sd-modal-header,
 .sd-modal-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background: var(--sd-white, #fff);
 }
 .sd-modal-title {
   font-size: 18px;
@@ -222,17 +221,13 @@
   overflow-wrap: anywhere;
 }
 .sd-modal-body {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
   box-sizing: border-box;
 }
 @media (max-width: 600px) {
   .sd-modal-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-modal-body {
-    padding: 0 16px 16px;
-  }
   .sd-modal-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v20/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md b/versions/v20/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
index 092e98f86..881fbeffe 100644
--- a/versions/v20/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
+++ b/versions/v20/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
@@ -285,5 +285,6 @@ fields: SdQueryBuilderField[] = [
 ## Accessibility
 
 - The builder container is `role="group"` (a set of controls, not a widget) so it takes no tab stop of its own — Tab goes straight to the buttons and pickers inside.
-- "Click empty space to close open dropdowns" is a mouse-only affordance; **Escape** now does the same thing, so keyboard users can dismiss an open add-menu.
-- The add-menu dropdown is `role="group"` and swallows Enter as well as click, so activating a button inside it never reaches the container's "close all" handler.
+- The add-menu renders in a CDK connected overlay on the document body, so modal scroll regions, table cells and other ancestor overflow cannot clip its actions. It anchors to the group's `+` button, can flip above when space below is insufficient, and stays within the viewport.
+- Clicking the transparent backdrop or pressing **Escape** closes the menu. Escape is consumed before it reaches the surrounding modal; only the menu closes.
+- The add-menu is `role="group"` with two native buttons. Opening it focuses the first action, Tab stays within its actions, and closing it restores focus to the `+` trigger. `aria-expanded` on the trigger follows the menu state. Only one group's add-menu can be open at a time; adding a condition or group closes it.
diff --git a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
new file mode 100644
index 000000000..9a1793a27
--- /dev/null
+++ b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { LayoutTestTheme } from '../../../testing/layout-theme.spec';
+import { SdQueryBuilder } from './query-builder.component';
+import { SdQbGroup } from './query-builder.model';
+
+@Component({
+  imports: [SdQueryBuilder, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div data-clip style="position: relative; overflow: hidden; height: 90px; width: 500px; margin: 80px 24px">
+      <sd-query-builder [disabled]="disabled" />
+    </div>
+  `,
+})
+class ClippedBuilderHost {
+  disabled = false;
+}
+
+describe('SdQueryBuilder add-menu overlay', () => {
+  let fixture: ComponentFixture<ClippedBuilderHost>;
+  let builder: SdQueryBuilder;
+  let overlays: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedBuilderHost, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(ClippedBuilderHost);
+    fixture.detectChanges();
+    builder = fixture.debugElement.query(By.directive(SdQueryBuilder)).componentInstance;
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function open(index = 0): HTMLButtonElement {
+    const trigger = fixture.nativeElement.querySelectorAll('.qb-btn-add')[index] as HTMLButtonElement;
+    trigger.focus();
+    trigger.click();
+    fixture.detectChanges();
+    tick();
+    return trigger;
+  }
+
+  it('renders both actions outside the clipped container and keeps the lower action clickable', fakeAsync(() => {
+    open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const actions = menu.querySelectorAll('button');
+    expect(actions.length).toBe(2);
+    const lower = actions[1].getBoundingClientRect();
+    expect(lower.height).toBeGreaterThan(0);
+    expect(lower.bottom).toBeGreaterThan(fixture.nativeElement.querySelector('[data-clip]').getBoundingClientRect().bottom);
+    expect(actions[1].contains(document.elementFromPoint(lower.x + lower.width / 2, lower.y + lower.height / 2))).toBeTrue();
+    actions[1].click();
+    fixture.detectChanges();
+    tick();
+    expect(builder.tree().children[0].kind).toBe('group');
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+  }));
+
+  it('adds a condition to the selected nested group and allows only one open menu', fakeAsync(() => {
+    builder.addGroup(builder.tree());
+    fixture.detectChanges();
+    open(0);
+    builder.toggleDropdown(builder.tree().children[0] as SdQbGroup, new Event('click'));
+    fixture.detectChanges();
+    tick();
+    const menus = overlays.querySelectorAll('.qb-dropdown');
+    expect(menus.length).toBe(1);
+    if (!menus.length) return;
+    (menus[0].querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    expect((builder.tree().children[0] as SdQbGroup).children.length).toBe(2);
+    expect(builder.tree().children.length).toBe(1);
+  }));
+
+  it('closes on Escape without bubbling to the modal and restores focus to the trigger', fakeAsync(() => {
+    const trigger = open();
+    const action = overlays.querySelector('.qb-dropdown button') as HTMLButtonElement | null;
+    expect(action).not.toBeNull();
+    if (!action) return;
+    expect(document.activeElement).toBe(action);
+    const escaped = jasmine.createSpy('document escape');
+    document.addEventListener('keydown', escaped);
+    try {
+      action.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      fixture.detectChanges();
+      tick();
+      expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+      expect(document.activeElement).toBe(trigger);
+      expect(escaped).not.toHaveBeenCalled();
+    } finally {
+      document.removeEventListener('keydown', escaped);
+    }
+  }));
+
+  it('closes on backdrop click and removes the overlay when disabled or destroyed', fakeAsync(() => {
+    open();
+    const backdrop = overlays.querySelector('.cdk-overlay-backdrop') as HTMLElement | null;
+    expect(backdrop).not.toBeNull();
+    if (!backdrop) return;
+    backdrop.click();
+    fixture.detectChanges();
+    tick(500);
+    expect(builder.tree().open).toBeFalse();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    expect(builder.tree().open).toBeFalse();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.destroy();
+    flush();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips above the trigger near the bottom of the viewport', fakeAsync(() => {
+    const clip = fixture.nativeElement.querySelector('[data-clip]') as HTMLElement;
+    Object.assign(clip.style, { position: 'fixed', bottom: '0', margin: '0' });
+    const trigger = open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const rect = menu.getBoundingClientRect();
+    expect(rect.bottom).toBeLessThanOrEqual(trigger.getBoundingClientRect().top);
+    expect(rect.top).toBeGreaterThanOrEqual(8);
+  }));
+});
diff --git a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
index 7fcbbbf57..977263a0b 100644
--- a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
@@ -25,26 +25,39 @@
 <!-- Recursive group node -->
 <ng-template #groupTpl let-group let-isRoot="isRoot" let-parent="parent" let-index="index">
   @let _removeGroupLabel = removeGroupLabel();
+  @let _addNodeLabel = addNodeLabel();
+  @let _disabled = resolvedDisabled();
   <div class="qb-group" [class.is-root]="isRoot">
-    <div class="qb-header" [class.is-open]="group.open">
+    <div class="qb-header">
       <div class="qb-logic-switch">
-        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'AND')">AND</button>
-        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'OR')">OR</button>
+        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="_disabled" (click)="setGroupLogic(group, 'AND')">AND</button>
+        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="_disabled" (click)="setGroupLogic(group, 'OR')">OR</button>
       </div>
 
       <div class="qb-actions">
-        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="addNodeLabel()" [disabled]="resolvedDisabled()" (click)="toggleDropdown(group, $event)">+</button>
-        @if (group.open) {
-          <!-- why: dropdown là NHÓM hai nút (role="group"), không phải nút — không nhận tabindex,
-               tab đi thẳng vào hai nút. stopPropagation cho cả click lẫn Enter để thao tác bên
-               trong dropdown không kích hoạt handler "đóng tất cả" của container. -->
-          <div class="qb-dropdown" role="group" (click)="$event.stopPropagation()" (keydown.enter)="$event.stopPropagation()">
+        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="_addNodeLabel" [disabled]="_disabled"
+          cdkOverlayOrigin #addOrigin="cdkOverlayOrigin" [attr.aria-expanded]="!!group.open && !_disabled"
+          (click)="toggleDropdown(group, $event)">+</button>
+        <!-- why: overlay nằm ngoài ancestor overflow; focus trap trả focus về nút + khi đóng. -->
+        <ng-template cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="addOrigin"
+          [cdkConnectedOverlayOpen]="!!group.open && !_disabled"
+          [cdkConnectedOverlayPositions]="addMenuPositions"
+          [cdkConnectedOverlayViewportMargin]="8"
+          [cdkConnectedOverlayFlexibleDimensions]="false"
+          [cdkConnectedOverlayPush]="true"
+          [cdkConnectedOverlayHasBackdrop]="true"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+          (backdropClick)="closeAllDropdowns()"
+          (overlayKeydown)="onAddMenuKeydown($event)">
+          <div class="qb-dropdown" role="group" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" [attr.aria-label]="_addNodeLabel">
             <button type="button" (click)="addRule(group)">+ {{ conditionLabel() }}</button>
             <button type="button" (click)="addGroup(group)">+ {{ groupLabel() }}</button>
           </div>
-        }
+        </ng-template>
         @if (!isRoot) {
-          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="resolvedDisabled()" (click)="removeNode(parent, index)">✕</button>
+          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="_disabled" (click)="removeNode(parent, index)">✕</button>
         }
       </div>
     </div>
diff --git a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
index 3025f6831..e631045ce 100644
--- a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
@@ -87,9 +87,6 @@ $node-gap: 12px;
   position: relative;
   z-index: 1;
 
-  &.is-open {
-    z-index: 1000;
-  }
 }
 
 // AND / OR segmented toggle — active side uses primary.
@@ -167,16 +164,11 @@ $node-gap: 12px;
 }
 
 .qb-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
   background: #fff;
   border: 1px solid $border;
   box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
   border-radius: 6px;
   min-width: 150px;
-  z-index: 100;
   overflow: hidden;
 
   button {
diff --git a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
index b8957417f..c90472925 100644
--- a/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
@@ -1,4 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -70,12 +72,31 @@ const QB_EMPTY_FIELDS: SdQueryBuilderField[] = [];
   selector: 'sd-query-builder',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, NgTemplateOutlet, SdOperator, SdSelect, SdInput, SdInputNumber, SdDate, SdDatetime, SdItemDefDefDirective],
+  imports: [
+    SdIcon,
+    NgTemplateOutlet,
+    SdOperator,
+    SdSelect,
+    SdInput,
+    SdInputNumber,
+    SdDate,
+    SdDatetime,
+    SdItemDefDefDirective,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    CdkTrapFocus,
+  ],
   templateUrl: './query-builder.component.html',
   styleUrl: './query-builder.component.scss',
 })
 export class SdQueryBuilder {
   readonly #i18n = inject(I18nService);
+  protected readonly addMenuPositions: ConnectedPosition[] = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  ];
 
   // -------------------------------------------------------------------------
   // Inputs
@@ -232,6 +253,11 @@ export class SdQueryBuilder {
   readonly fieldIcon = sdQbFieldIcon;
 
   constructor() {
+    effect(() => {
+      if (this.resolvedDisabled() || this.isView()) {
+        untracked(() => this.closeAllDropdowns());
+      }
+    });
     // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
     // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
     effect(() => {
@@ -311,6 +337,13 @@ export class SdQueryBuilder {
     this.#bumpTree();
   }
 
+  protected onAddMenuKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeAllDropdowns();
+  }
+
   #hasOpenDropdown(node: SdQbNode): boolean {
     if (!sdIsQbGroup(node)) return false;
     return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
diff --git a/versions/v20/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md b/versions/v20/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
index 0344e62c9..e2d011c0f 100644
--- a/versions/v20/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
+++ b/versions/v20/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
@@ -37,7 +37,7 @@ import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -88,7 +88,7 @@ Do not write `document.body.style.overflow` yourself while a drawer is open; the
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: 0; // The drawer supplies the content insets.
 }
 ```
 
@@ -105,4 +105,4 @@ Each open creates a CDK focus trap around the drawer content. Focus moves inside
 
 Opening makes the drawer visible immediately so focus can enter before the slide/fade animation finishes. Closing delays the hidden state until that animation completes. Reduced motion removes these transitions.
 
-The default radius is 8px, overridable through --sd-overlay-radius. Header/body/footer align at 24px horizontally (16px below 600px); the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
+The default radius is 8px, overridable through --sd-overlay-radius. Header/footer use 12px vertical padding and header/body/footer align at 16px horizontally; the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
diff --git a/versions/v20/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss b/versions/v20/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
index 1c1ea5c49..603a8d8cb 100644
--- a/versions/v20/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
@@ -37,8 +37,7 @@
   }
 
   &-header {
-    min-height: 64px;
-    padding: 16px;
+    min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -131,8 +130,6 @@
 
   &-footer {
     border-top: 1px solid var(--sd-side-drawer-border);
-    padding: 16px;
-    background-color: var(--sd-side-drawer-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -197,22 +194,19 @@
 .sd-side-drawer-header,
 .sd-side-drawer-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background-color: var(--sd-white, #fff);
 }
 .sd-side-drawer-content {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
 }
 @media (max-width: 600px) {
   .sd-side-drawer {
     --sd-side-drawer-inset: 8px;
   }
   .sd-side-drawer-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-side-drawer-content {
-    padding: 0 16px 16px;
-  }
   .sd-side-drawer-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v20/projects/sdcorejs-angular/components/tab/sd-tab.md b/versions/v20/projects/sdcorejs-angular/components/tab/sd-tab.md
index 918663850..5d4a9439f 100644
--- a/versions/v20/projects/sdcorejs-angular/components/tab/sd-tab.md
+++ b/versions/v20/projects/sdcorejs-angular/components/tab/sd-tab.md
@@ -34,7 +34,7 @@ Declarative tab container that wraps Angular Material's `mat-tab-group` with a s
 | Name                | Type                                                                                  | Default     | Notes                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `selectedIndex`     | `number` (model — two-way)                                                            | `0`         | Index of the active tab. Two-way bindable via `[(selectedIndex)]`. Auto-clamped to `[0, tabs.length-1]` when the tab count shrinks.                                                                                                                                                                                                                           |
-| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a single bordered container with flush tabs (iOS segmented-control style). |
+| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a shared container with a 4px gap between tabs (iOS segmented-control style). Hover/ripple layers follow each tab's rounded shape; active pills retain their filled color on hover. |
 | `color`             | `Color` (`'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'`) | `'primary'` | Drives the active-tab + indicator + badge colors via the Core CSS vars (`--sd-<color>`, `--sd-<color>-light`). Same palette as `<sd-button>`, `<sd-badge>` — pick `'warning'` for filter bars surfacing pending items, `'success'` for confirmed flows, etc.                                                                                                  |
 | `headerPosition`    | `'above' \| 'below'`                                                                  | `'above'`   | Forwarded to `mat-tab-group.headerPosition`.                                                                                                                                                                                                                                                                                                                  |
 | `alignTabs`         | `'start' \| 'center' \| 'end'`                                                        | `'start'`   | Forwarded to `mat-tab-group`'s `[mat-align-tabs]` input. **Only takes effect when `stretchTabs` is `false`** — otherwise tabs fill the row evenly and there's nothing to align.                                                                                                                                                                               |
diff --git a/versions/v20/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss b/versions/v20/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
index 7179666c2..b2949f7ca 100644
--- a/versions/v20/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
@@ -102,6 +102,14 @@
   opacity: 0 !important;
 }
 
+// Material renders hover and click ripples in a separate rectangular layer.
+// Clip that layer to the tab shape without clipping the label's focus indicator.
+:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple,
+:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
 // =============================================================================
 // Variant: pills — rounded pill tabs, active filled with primary.
 // Good for nested tab groups, filter bars, light contexts.
@@ -132,7 +140,7 @@
     background: transparent;
     transition: background-color 120ms ease, color 120ms ease;
 
-    &:hover:not(.mat-mdc-tab-disabled) {
+    &:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active) {
       background: var(--sd-tab-badge-bg);
     }
 
@@ -143,12 +151,6 @@
       background: var(--sd-tab-label-active-color);
       .mdc-tab__text-label { color: #ffffff; }
     }
-
-    // why: active pill darken on hover instead of the default whitish state-layer.
-    // box-shadow inset > filter because filter would dim text + icons too.
-    &.mdc-tab--active:hover:not(.mat-mdc-tab-disabled) {
-      box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
-    }
   }
 
   // Inside the pill we still allow the sd-tab__label inline-flex with icon/badge/close.
@@ -166,7 +168,7 @@
 }
 
 // =============================================================================
-// Variant: segmented — single bordered container, tabs sit flush.
+// Variant: segmented — shared container with a small gap between tabs.
 // iOS-style segmented control.
 // =============================================================================
 :host(.sd-tab-group--segmented) ::ng-deep {
@@ -185,7 +187,7 @@
     padding: 3px;
   }
 
-  .mat-mdc-tab-labels { gap: 0; }
+  .mat-mdc-tab-labels { gap: 4px; }
 
   .mat-mdc-tab {
     min-width: 0;
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/sd-table.md b/versions/v20/projects/sdcorejs-angular/components/table/sd-table.md
index eee0bf1bc..bd8134c44 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/sd-table.md
+++ b/versions/v20/projects/sdcorejs-angular/components/table/sd-table.md
@@ -401,9 +401,11 @@ Client-side matching sống ở `matchesColumnFilter` (`services/table-local/tab
 
 Command icons default to Material Symbols Outlined (`material-icons-outlined`). Child command menu items use the same default unless `child.fontSet` is provided. Use icon + title for child commands so menu rows align consistently.
 
+Desktop command `children`, selection action `children` and the selection toolbar More menu use a compact CDK overlay menu: white background, 8px corners, 36px minimum rows, 18px icons and a 4px gap from the trigger. Touch/narrow-screen menu rows remain at least 44px. Menus escape clipped table cells, support arrow-key/typeahead navigation and restore trigger focus on Escape or selection. Existing child visibility, disabled state, custom HTML and callbacks remain supported; no consumer configuration changes are required.
+
 Desktop row commands keep their touch targets within each 24px button so adjacent actions and menu triggers remain independently clickable. Mobile action controls retain their existing sizing.
 
-Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Child menu items retain Material's disabled opacity.
+Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Disabled child menu items are muted and cannot be activated.
 
 ```ts
 command: {
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
new file mode 100644
index 000000000..0a0a9bbc5
--- /dev/null
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -0,0 +1,67 @@
+.sd-table-action-menu {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(360px, calc(100dvh - 16px));
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--sd-border, #dde0e5);
+  border-radius: 8px;
+  background: var(--sd-white, #fff);
+  color: var(--sd-text, #1a1b1f);
+  box-shadow:
+    0 4px 12px rgba(15, 23, 42, 0.14),
+    0 1px 3px rgba(15, 23, 42, 0.1);
+
+  [cdkMenuItem] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: start;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      background: var(--sd-black100, #f3f3f3);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sd-primary, #005cbb);
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+  }
+
+  .sd-table-action-menu__icon {
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+
+@media (max-width: 600px), (pointer: coarse) {
+  .sd-table-action-menu [cdkMenuItem] {
+    min-height: 44px;
+  }
+}
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
new file mode 100644
index 000000000..7cfd448fc
--- /dev/null
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
@@ -0,0 +1,67 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { Directive, ElementRef, afterRenderEffect, inject, DestroyRef, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SdButton } from '@sdcorejs/angular/components/button';
+
+export const TABLE_ACTION_MENU_POSITIONS: ConnectedPosition[] = [
+  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+  { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+];
+
+// why: CDK gắn trên host sd-button, nhưng focus/ARIA và Enter/Space phải thuộc nút HTML bên trong.
+@Directive({
+  selector: 'sd-button[sdTableMenuButton]',
+  standalone: true,
+  hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: sdTableMenuButton'] }],
+})
+export class SdTableMenuButtonDirective {
+  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  readonly #trigger = inject(CdkMenuTrigger);
+  readonly #sdButton = inject(SdButton);
+  readonly #opened = signal(false);
+  #button?: HTMLButtonElement;
+
+  constructor() {
+    this.#trigger.menuPosition = TABLE_ACTION_MENU_POSITIONS;
+    const destroyRef = inject(DestroyRef);
+    this.#trigger.opened.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => this.#opened.set(true));
+    this.#trigger.closed.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+      this.#opened.set(false);
+      if (this.#button?.isConnected && this.#trigger.getMenu()?.nativeElement.contains(this.#host.ownerDocument.activeElement)) {
+        this.#button.focus();
+      }
+    });
+    afterRenderEffect(() => {
+      this.#sdButton.type();
+      this.#opened();
+      this.#syncButton();
+    });
+    destroyRef.onDestroy(() => this.#button?.removeEventListener('keydown', this.#nativeActivation, true));
+  }
+
+  readonly #nativeActivation = (event: KeyboardEvent): void => {
+    // why: để nút native tự phát click đúng một lần, không cho CDK toggle thêm ở keydown của host.
+    if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+  };
+
+  #syncButton(): void {
+    const button = this.#host.querySelector('button') ?? undefined;
+    if (button !== this.#button) {
+      this.#button?.removeEventListener('keydown', this.#nativeActivation, true);
+      this.#button = button;
+      button?.addEventListener('keydown', this.#nativeActivation, true);
+    }
+    button?.setAttribute('aria-haspopup', 'menu');
+    button?.setAttribute('aria-expanded', String(this.#trigger.isOpen()));
+    const menuId = this.#trigger.getMenu()?.nativeElement.id;
+    if (menuId) button?.setAttribute('aria-controls', menuId);
+    else button?.removeAttribute('aria-controls');
+    this.#host.removeAttribute('role');
+    this.#host.removeAttribute('aria-haspopup');
+    this.#host.removeAttribute('aria-expanded');
+    this.#host.removeAttribute('aria-controls');
+  }
+}
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 38cfbc7b3..9ed43877f 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -24,7 +24,9 @@
       <button
         type="button"
         [attr.data-autoid]="_autoId + '-' + command.key"
-        [matMenuTriggerFor]="menu"
+        [cdkMenuTriggerFor]="menu"
+        [cdkMenuPosition]="menuPositions"
+        [disabled]="_meta.disabled"
         [attr.aria-label]="_meta.title"
         aria-haspopup="menu"
         mat-icon-button>
@@ -34,29 +36,41 @@
           <sd-icon class="c-icon" [fontSet]="command.fontSet" name="more_vert"></sd-icon>
         }
       </button>
-      <mat-menu #menu="matMenu" [attr.data-autoid]="_autoId + '-' + command.key + '-menu'">
-        <span>
+      <ng-template #menu>
+        <div
+          cdkMenu
+          tabindex="-1"
+          class="sd-table-action-menu"
+          [attr.aria-label]="_meta.title"
+          [attr.data-autoid]="_autoId + '-' + command.key + '-menu'"
+          (keydown.escape)="$event.stopPropagation()">
           @for (childCommand of command.children; track childCommand.key) {
             @let _childMeta = _item | command: childCommand;
             <button
               [attr.data-autoid]="_autoId + '-' + command.key + '-' + childCommand.key"
-              mat-menu-item
-              (click)="childCommand.click(_item.data)"
+              type="button"
+              cdkMenuItem
+              [cdkMenuItemDisabled]="_childMeta.disabled"
+              [cdkMenuitemTypeaheadLabel]="_childMeta.title"
+              [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
               [disabled]="_childMeta.disabled">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
                 <span class="sd-command-menu-item__content">
-                  <sd-icon class="sd-command-menu-item__icon"
+                  <sd-icon
+                    class="sd-table-action-menu__icon"
                     [color]="childCommand.color || 'secondary'"
-                    [fontSet]="childCommand.fontSet" [name]="_childMeta.icon"></sd-icon>
+                    [fontSet]="childCommand.fontSet"
+                    [name]="_childMeta.icon"></sd-icon>
                   <span class="sd-command-menu-item__title">{{ _childMeta.title }}</span>
                 </span>
               }
             </button>
           }
-        </span>
-      </mat-menu>
+        </div>
+      </ng-template>
     }
   }
 }
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
index c90841d55..fe78277aa 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../../assets/scss/core/color.scss' as color;
 @use 'sass:map';
+@use '../action-menu/action-menu';
 
 :host {
   display: flex;
@@ -42,20 +43,8 @@ button[mat-icon-button]:disabled sd-icon.c-icon {
   width: 100%;
 }
 
-// why: `margin-right: 0 !important` ở đây từng để chặn margin Material gắn vào `.mat-icon` trong
-// mat-menu. sd-icon đã trung hoà ở component nên bỏ được; khoảng cách với nhãn là `gap` của
-// .sd-command-menu-item__content.
-.sd-command-menu-item__icon {
-  color: map.get(color.$color_map, 'text-secondary') !important;
-  width: 24px;
-  height: 24px;
-  font-size: 18px;
-  line-height: 24px !important;
-  flex: 0 0 24px;
-}
-
 .sd-command-menu-item__title {
   min-width: 0;
   line-height: 20px;
-  white-space: nowrap;
+  white-space: normal;
 }
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 79a9b04b1..03e5eff62 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -54,7 +54,7 @@ describe('DesktopCommand', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const menu = document.body.querySelector('.mat-mdc-menu-panel') as HTMLElement;
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     const content = menu.querySelector('.sd-command-menu-item__content') as HTMLElement;
     const icon = menu.querySelector('mat-icon') as HTMLElement;
     const title = menu.querySelector('.sd-command-menu-item__title') as HTMLElement;
@@ -62,6 +62,71 @@ describe('DesktopCommand', () => {
     expect(content).not.toBeNull();
     expect(icon.classList).toContain('material-icons-outlined');
     expect(title.textContent?.trim()).toBe('Edit');
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(menu.querySelector('button')!.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+  });
+
+  it('keeps hidden/disabled child rules and restores the command trigger after Escape', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    fixture.componentInstance.commands = [
+      {
+        title: 'More',
+        children: [
+          { title: 'Hidden', hidden: async () => true, click: clicked },
+          { title: 'Disabled', disabled: true, click: clicked },
+          { title: 'Allowed', click: clicked },
+        ],
+      },
+    ];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.textContent).not.toContain('Hidden');
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    items[0].click();
+    expect(clicked).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(items[1]);
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
+    items[1].dispatchEvent(escape);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('renders outside a clipped row and invokes the child once with its row data', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    Object.assign(fixture.nativeElement.style, {
+      position: 'fixed',
+      top: '32px',
+      left: '32px',
+      width: '80px',
+      height: '24px',
+      overflow: 'hidden',
+    });
+    fixture.componentInstance.commands = [{ title: 'More', children: [{ title: 'Run', click: clicked }] }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(fixture.nativeElement.contains(menu)).toBeFalse();
+    const item = menu.querySelector('button')!;
+    const bounds = item.getBoundingClientRect();
+    expect(document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2)?.closest('button')).toBe(item);
+    item.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(clicked).toHaveBeenCalledOnceWith(fixture.componentInstance.item.data);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
   });
 
   // why: hai nút command từng mang aria-hidden="true" — chúng là <button> THẬT, vẫn nhận tab focus
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
index 803bb0976..feab3cae1 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { TABLE_ACTION_MENU_POSITIONS } from '../action-menu/action-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdTableCommand } from '../../models/table-command.model';
 import { SdTableItem } from '../../models/table-item.model';
@@ -18,9 +19,10 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   host: {
     '[attr.data-autoid]': 'autoId()',
   },
-  imports: [SdIcon, CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, CommandPipe, CommandFilterPipe],
+  imports: [SdIcon, CommonModule, MatTooltipModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, MatButtonModule, CommandPipe, CommandFilterPipe],
 })
 export class DesktopCommand {
+  readonly menuPositions = TABLE_ACTION_MENU_POSITIONS;
   readonly autoIdInput = input<string | null | undefined>(undefined, { alias: 'autoId' });
   readonly item = input.required<SdTableItem>();
   readonly itemIndex = input.required<number>();
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
index 50634c03e..5706edc7a 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
@@ -58,6 +58,54 @@ describe('Table selection toolbar layout and overflow', () => {
     expect(clear).toHaveBeenCalledTimes(1);
   });
 
+  it('opens compact child actions from the native button and returns focus after Escape', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(menu.id);
+    const first = menu.querySelector('button')!;
+    expect(first.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+    expect(document.activeElement).toBe(first);
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]')).toBeNull();
+  });
+
+  it('dismisses child actions after running them and removes an open menu when selection clears', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const overlay = TestBed.inject(OverlayContainer).getContainerElement();
+    overlay.querySelector<HTMLButtonElement>('button')!.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(callbacks[2]).toHaveBeenCalledOnceWith([{ id: 1 }, { id: 2 }]);
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+    // SdButton throttles repeated pointer clicks; ArrowDown opens immediately.
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeTruthy();
+    fixture.componentRef.setInput('selectedTableItems', []);
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+  });
+
   it('keeps grouped overflow actions and excludes children unavailable to one selected row', () => {
     const group = { title: 'Reports', children: actions.slice(2) };
     fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [...actions.slice(0, 2), group] } });
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
index af44d23c9..93ebca5d3 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
@@ -1,4 +1,5 @@
 @let _autoId = autoId();
+@let _moreLabel = moreLabel();
 @let _direct = directActions();
 @let _overflow = overflowActions();
 @if (opened()) {
@@ -33,21 +34,30 @@
             [type]="action.type || 'light'"
             [fontSet]="action.fontSet"
             [title]="action.title"
-            [matMenuTriggerFor]="childrenMenu" />
-          <mat-menu #childrenMenu="matMenu">
-            @for (child of action.children; track $index) {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                (click)="onClickAction(child)">
-                @if (child.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                }
-                <span>{{ child.title }}</span>
-              </button>
-            }
-          </mat-menu>
+            [sdTableMenuButton]="childrenMenu" />
+          <ng-template #childrenMenu>
+            <div
+              cdkMenu
+              tabindex="-1"
+              class="sd-table-action-menu"
+              [attr.aria-label]="action.title || _moreLabel"
+              (keydown.escape)="$event.stopPropagation()">
+              @for (child of action.children; track $index) {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                  [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                  [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(child)">
+                  @if (child.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                  }
+                  <span>{{ child.title }}</span>
+                </button>
+              }
+            </div>
+          </ng-template>
         }
       }
       @if (_overflow.length) {
@@ -55,44 +65,55 @@
           class="sd-selection-more"
           size="sm"
           prefixIcon="more_horiz"
-          [title]="moreLabel()"
+          [title]="_moreLabel"
           color="secondary"
           type="light"
           [autoId]="_autoId ? _autoId + '-more-actions' : null"
-          [matMenuTriggerFor]="moreMenu" />
-        <mat-menu #moreMenu="matMenu">
-          @for (entry of _overflow; track entry.index) {
-            @let action = entry.action;
-            @if (action.variant === 'normal') {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
-                (click)="onClickAction(action)">
-                @if (action.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
-                }
-                <span>{{ action.title }}</span>
-              </button>
-            } @else {
-              <div role="group" [attr.aria-label]="action.title">
-                <div class="sd-selection-menu-heading">{{ action.title }}</div>
-                @for (child of action.children; track $index) {
-                  <button
-                    mat-menu-item
-                    type="button"
-                    [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                    (click)="onClickAction(child)">
-                    @if (child.icon) {
-                      <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                    }
-                    <span>{{ child.title }}</span>
-                  </button>
-                }
-              </div>
+          [sdTableMenuButton]="moreMenu" />
+        <ng-template #moreMenu>
+          <div
+            cdkMenu
+            tabindex="-1"
+            class="sd-table-action-menu"
+            [attr.aria-label]="_moreLabel"
+            (keydown.escape)="$event.stopPropagation()">
+            @for (entry of _overflow; track entry.index) {
+              @let action = entry.action;
+              @if (action.variant === 'normal') {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
+                  [cdkMenuitemTypeaheadLabel]="action.title || ''"
+                  [style.color]="action.color ? 'var(--sd-' + action.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(action)">
+                  @if (action.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
+                  }
+                  <span>{{ action.title }}</span>
+                </button>
+              } @else {
+                <div role="group" [attr.aria-label]="action.title">
+                  <div class="sd-selection-menu-heading">{{ action.title }}</div>
+                  @for (child of action.children; track $index) {
+                    <button
+                      cdkMenuItem
+                      type="button"
+                      [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                      [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                      [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                      (cdkMenuItemTriggered)="onClickAction(child)">
+                      @if (child.icon) {
+                        <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                      }
+                      <span>{{ child.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
             }
-          }
-        </mat-menu>
+          </div>
+        </ng-template>
       }
       <button
         type="button"
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
index a2dcbfda0..60c0d0791 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
@@ -1,3 +1,5 @@
+@use '../action-menu/action-menu';
+
 :host {
   display: block;
   flex-shrink: 0;
@@ -61,12 +63,8 @@
     font-size: 18px;
   }
 }
-.sd-selection-menu-icon {
-  margin-right: 12px;
-  vertical-align: middle;
-}
 .sd-selection-menu-heading {
-  padding: 8px 16px 4px;
+  padding: 6px 12px 4px;
   color: var(--sd-text-secondary, #62676d);
   font-size: 12px;
   font-weight: 600;
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
index 58819c6cd..7c3edccec 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { SdTableMenuButtonDirective } from '../action-menu/action-menu';
 import { SdButton } from '@sdcorejs/angular/components/button';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
@@ -13,7 +14,7 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   templateUrl: './selector-action.component.html',
   styleUrl: './selector-action.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, MatMenuModule, SdButton, SdQuickAction],
+  imports: [SdIcon, CdkMenu, CdkMenuItem, SdTableMenuButtonDirective, SdButton, SdQuickAction],
 })
 export class SelectorActionComponent {
   // ==========================================
diff --git a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
new file mode 100644
index 000000000..eadd9b4e2
--- /dev/null
+++ b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
@@ -0,0 +1,96 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { BrowserUtilities } from '@sdcorejs/utils/fns';
+import { LayoutTestTheme } from '../../testing/layout-theme.spec';
+import { SdHoverCopyDirective } from './sd-hover-copy.directive';
+
+@Component({
+  imports: [SdHoverCopyDirective, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div style="overflow: hidden; width: 260px; margin: 80px 24px">
+      <table style="width: 100%; border-collapse: separate">
+        <tr style="position: relative; z-index: 20; background: white">
+          <td style="height: 40px">Previous row</td>
+        </tr>
+        <tr>
+          <td style="height: 40px; overflow: hidden" sdHoverCopy="cell-value" [sdHoverCopyDisabled]="disabled">Cell value</td>
+        </tr>
+      </table>
+    </div>
+  `,
+})
+class ClippedCopyHost {
+  disabled = false;
+}
+
+describe('SdHoverCopy overlay in table cells', () => {
+  let fixture: ComponentFixture<ClippedCopyHost>;
+  let overlays: HTMLElement;
+  let cell: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedCopyHost] });
+    spyOn(BrowserUtilities, 'copyToClipboard');
+    fixture = TestBed.createComponent(ClippedCopyHost);
+    fixture.detectChanges();
+    cell = fixture.nativeElement.querySelector('[sdHoverCopy]');
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function copy() {
+    cell.dispatchEvent(new MouseEvent('mouseenter'));
+    (cell.querySelector('button:last-of-type') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    tick();
+  }
+
+  it('paints the copied tooltip above adjacent rows outside the clipped cell', fakeAsync(() => {
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]') as HTMLElement | null;
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.height).toBeGreaterThan(0);
+    expect(getComputedStyle(tooltip.closest('.cdk-overlay-pane')!).pointerEvents).toBe('none');
+    expect(rect.top).toBeLessThan(cell.getBoundingClientRect().top);
+    // why: tooltip intentionally ignores pointer events; enable hit testing only for the paint-order probe.
+    tooltip.style.pointerEvents = 'auto';
+    expect(tooltip.contains(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2))).toBeTrue();
+    tooltip.style.pointerEvents = 'none';
+    tick(1000);
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+  }));
+
+  it('keeps one button and cleans up the overlay on scroll, disable and destroy', fakeAsync(() => {
+    expect(cell.querySelectorAll('button').length).toBe(1);
+    copy();
+    cell.parentElement!.dispatchEvent(new Event('scroll'));
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+    copy();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(cell.querySelector('button')).toBeNull();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    copy();
+    fixture.destroy();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips below the button when the cell is at the top of the viewport', fakeAsync(() => {
+    const table = cell.closest('table')!;
+    Object.assign(table.parentElement!.style, { position: 'fixed', top: '0', margin: '0' });
+    table.rows[0].style.display = 'none';
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.top).toBeGreaterThanOrEqual(cell.querySelector('button')!.getBoundingClientRect().bottom);
+    expect(rect.left).toBeGreaterThanOrEqual(8);
+    fixture.destroy();
+  }));
+});
diff --git a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
index 003fd69b6..8b0da141e 100644
--- a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
@@ -1,18 +1,9 @@
-/**
- * SdHoverCopyDirective spec
- *
- * Note: the directive creates its copy button both in `ngOnChanges` (for the
- * initial-value change on the `sdHoverCopyDisabled` input) and again in
- * `ngOnInit`.  The directive's internal `#copyButton` reference always points
- * to the LAST button created (the one from `ngOnInit`).  Tests that care about
- * the button managed by the directive use `getDirectiveButton()` which finds
- * the element whose listener and style are wired to `#copyButton`.
- */
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { SdHoverCopyDirective } from './sd-hover-copy.directive';
 
 @Component({
@@ -47,19 +38,13 @@ describe('SdHoverCopyDirective', () => {
     directiveInstance = fixture.debugElement.query(By.directive(SdHoverCopyDirective)).injector.get(SdHoverCopyDirective);
   });
 
-  /**
-   * The directive keeps `#copyButton` as its last-created button.
-   * `querySelectorAll('button')` returns all buttons; the directive manages the
-   * LAST one appended (ngOnInit fires after ngOnChanges creates the first).
-   */
   function getDirectiveButton(): HTMLElement | null {
-    const all = hostEl.querySelectorAll('button');
-    return all.length ? (all[all.length - 1] as HTMLElement) : null;
+    return hostEl.querySelector('button');
   }
 
   function getTooltip(): HTMLElement | null {
     const btn = getDirectiveButton();
-    return btn ? (btn.querySelector('span') as HTMLElement) : null;
+    return btn?.querySelector('span') ?? TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="tooltip"]');
   }
 
   // ─── creation ────────────────────────────────────────────────────────────────
@@ -69,8 +54,8 @@ describe('SdHoverCopyDirective', () => {
       expect(host).toBeTruthy();
     });
 
-    it('appends at least one copy button inside the host element on init', () => {
-      expect(hostEl.querySelector('button')).not.toBeNull();
+    it('appends exactly one copy button inside the host element on init', () => {
+      expect(hostEl.querySelectorAll('button').length).toBe(1);
     });
 
     it('sets host element position to relative', () => {
diff --git a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
index ca6cc7e17..83ca46159 100644
--- a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
+++ b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
@@ -1,4 +1,7 @@
 import { DestroyRef, Directive, ElementRef, inject, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges, input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { DomPortal } from '@angular/cdk/portal';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
 
@@ -14,9 +17,14 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
   readonly #i18n = inject(I18nService);
   readonly #destroyRef = inject(DestroyRef);
+  readonly #overlay = inject(Overlay);
+  readonly #document = inject(DOCUMENT);
 
   #copyButton: HTMLElement | null = null;
   #tooltip!: HTMLElement;
+  #tooltipOverlay: OverlayRef | null = null;
+  #unlistenCopy: (() => void) | null = null;
+  readonly #onScroll = () => this.#hideTooltip();
   #hideTooltipTimer: ReturnType<typeof setTimeout> | null = null;
   get #defaultTooltip(): string {
     return this.#i18n.t('core.directive.hover-copy.tooltip');
@@ -34,7 +42,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     // why: timeout 1s ẩn tooltip trước đây không được lưu lại cũng không huỷ, mà directive lại
     // không có teardown nào. Host bị destroy trong vòng 1s đó thì callback vẫn chạy và ghi style
     // lên node đã tháo khỏi DOM (timer sống lâu hơn view).
-    this.#destroyRef.onDestroy(() => this.#clearHideTooltipTimer());
+    this.#destroyRef.onDestroy(() => this.#removeCopyButton());
   }
 
   // https://onemount.atlassian.net/browse/SM-2287
@@ -61,6 +69,8 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #createAndAppendCopyButton(): void {
+    // why: ngOnChanges có thể tạo nút trước ngOnInit; chỉ giữ một nút và một overlay owner.
+    if (this.#copyButton) return;
     const parent = this.el.nativeElement;
     this.renderer.setStyle(parent, 'position', 'relative');
 
@@ -102,12 +112,9 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
     // Tooltip
     this.#tooltip = this.renderer.createElement('span');
+    this.renderer.setAttribute(this.#tooltip, 'role', 'tooltip');
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
-    this.renderer.setStyle(this.#tooltip, 'position', 'absolute');
-    this.renderer.setStyle(this.#tooltip, 'bottom', '100%');
-    this.renderer.setStyle(this.#tooltip, 'left', '50%');
-    this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');
-    this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
     this.renderer.setStyle(this.#tooltip, 'background', '#333');
     this.renderer.setStyle(this.#tooltip, 'color', '#fff');
     this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');
@@ -123,7 +130,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     this.renderer.appendChild(parent, this.#copyButton);
 
     // Listen click
-    this.renderer.listen(this.#copyButton, 'click', () => {
+    this.#unlistenCopy = this.renderer.listen(this.#copyButton, 'click', () => {
       const copyText = this.copyText();
       if (copyText && !this.sdHoverCopyDisabled()) {
         BrowserUtilities.copyToClipboard(String(copyText));
@@ -144,8 +151,12 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #removeCopyButton(): void {
-    // why: tooltip nằm trong button — bỏ button mà để timer chạy tiếp là ghi style lên node đã gỡ.
     this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.dispose();
+    this.#tooltipOverlay = null;
+    this.#unlistenCopy?.();
+    this.#unlistenCopy = null;
     if (this.#copyButton) {
       this.renderer.removeChild(this.el.nativeElement, this.#copyButton);
       this.#copyButton = null;
@@ -153,13 +164,41 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #showTooltip(message: string) {
+    if (!this.#copyButton) return;
+    if (!this.#tooltipOverlay) {
+      // why: portal thoát khỏi overflow/stacking context của table cell và modal body.
+      this.#tooltipOverlay = this.#overlay.create({
+        positionStrategy: this.#overlay
+          .position()
+          .flexibleConnectedTo(this.#copyButton)
+          .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+          ])
+          .withFlexibleDimensions(false)
+          .withViewportMargin(8)
+          .withPush(true),
+      });
+    }
     this.renderer.setProperty(this.#tooltip, 'innerText', message);
+    this.renderer.setStyle(this.#tooltip, 'display', 'block');
     this.renderer.setStyle(this.#tooltip, 'opacity', '1');
+    if (!this.#tooltipOverlay.hasAttached()) {
+      this.#tooltipOverlay.attach(new DomPortal(this.#tooltip));
+    }
+    this.renderer.setStyle(this.#tooltipOverlay.overlayElement, 'pointerEvents', 'none');
+    this.#tooltipOverlay.updatePosition();
+    // why: capture bắt cả scroll ở ancestor không khai cdkScrollable, tránh tooltip trôi khỏi cell.
+    this.#document.addEventListener('scroll', this.#onScroll, true);
   }
 
   #hideTooltip() {
+    this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.detach();
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
     this.renderer.setStyle(this.#tooltip, 'opacity', '0');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
   }
 
   @HostListener('mouseenter')
diff --git a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.md b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
index ed13ac3db..80fb5c776 100644
--- a/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
+++ b/versions/v20/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
@@ -29,11 +29,13 @@ None.
 
 ## Behavior
 - `ngOnChanges` (fires before `ngOnInit`): if `sdHoverCopyDisabled` changes to `false` and no button exists yet, creates one; if it changes to `true`, removes the existing button from the DOM.
-- `ngOnInit`: if not disabled, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. Also appends a tooltip `<span>` seeded from `core.directive.hover-copy.tooltip`.
+- `ngOnInit`: if not disabled and no button exists, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. The tooltip starts hidden inside the button; creation is idempotent across `ngOnChanges` and `ngOnInit`.
 - `mouseenter` on host: shows the button (`display: block`); skipped when `sdHoverCopyDisabled` is `true` or the button was never created.
 - `mouseleave` on host: hides the button (`display: none`) and resets the tooltip to `core.directive.hover-copy.tooltip` with `opacity: 0`.
 - Clicking the copy button: calls `BrowserUtilities.copyToClipboard(String(copyText))`, swaps the tooltip to `core.directive.hover-copy.copied` with `opacity: 1`, then auto-hides after 1000 ms by resetting to `core.directive.hover-copy.tooltip` with `opacity: 0`.
-- **Teardown**: the 1000 ms auto-hide timer is stored and cleared via `DestroyRef.onDestroy`, and also when the button is removed (`sdHoverCopyDisabled` → `true`). A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
+- The visible tooltip is portalled into the CDK overlay container on the document body, outside table row stacking contexts and ancestor overflow. It anchors above the copy button, falls back below near the viewport edge, and stays within an 8px viewport margin. It does not intercept pointer events.
+- Scrolling any ancestor hides the tooltip, including scroll containers without `cdkScrollable`. Mouse leave and the auto-hide timer also detach it from the overlay.
+- **Teardown**: disabling or destroying the host clears the timer, removes the scroll/click listeners, disposes the overlay and removes the copy button. A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
 
 ## i18n
 Both tooltip strings resolve through `I18nService` at the moment they are shown, so they follow the
@@ -45,7 +47,6 @@ active language (VI `Sao chép` / `Đã sao chép`, EN `Copy` / `Copied`, …):
 | Confirmation after a copy | `core.directive.hover-copy.copied` |
 
 ## Known issues
-- **Double-button creation on first render**: because `ngOnChanges` fires before `ngOnInit`, both hooks create a copy button when `sdHoverCopyDisabled` starts as `false`. The directive's internal reference points to the second button (created in `ngOnInit`), so behaviour is correct, but an orphaned first button element stays in the host's DOM. Tracked as a follow-up to SM-2287.
 - **No `aria-label`**: the generated `<button>` has no accessible label. Screen-reader users cannot identify its purpose. A future fix should add `aria-label="Sao chép"` (or the localised equivalent) to the button element.
 
 ## Examples
diff --git a/versions/v20/projects/sdcorejs-angular/i18n/src/en.ts b/versions/v20/projects/sdcorejs-angular/i18n/src/en.ts
index cb10863c9..06b465fe8 100644
--- a/versions/v20/projects/sdcorejs-angular/i18n/src/en.ts
+++ b/versions/v20/projects/sdcorejs-angular/i18n/src/en.ts
@@ -418,6 +418,7 @@ export const EN_MESSAGES = {
   'core.component.form-builder.group-children': 'Children',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Accent color',
+  'core.component.form-builder.collapsible': 'Allow expand/collapse',
   'core.component.form-builder.group-no-children': 'No fields yet. Add or drag fields into this group.',
   'core.component.form-builder.break': 'Break',
 
diff --git a/versions/v20/projects/sdcorejs-angular/i18n/src/ja.ts b/versions/v20/projects/sdcorejs-angular/i18n/src/ja.ts
index 5dffdabf6..a3a89bdaa 100644
--- a/versions/v20/projects/sdcorejs-angular/i18n/src/ja.ts
+++ b/versions/v20/projects/sdcorejs-angular/i18n/src/ja.ts
@@ -420,6 +420,7 @@ export const JA_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子要素',
   'core.component.form-builder.group-icon': 'アイコン',
   'core.component.form-builder.group-accent-color': 'アクセントカラー',
+  'core.component.form-builder.collapsible': '展開・折りたたみを許可',
   'core.component.form-builder.group-no-children': 'フィールドがまだありません。このグループにフィールドを追加またはドラッグしてください。',
   'core.component.form-builder.break': '改行',
 
diff --git a/versions/v20/projects/sdcorejs-angular/i18n/src/ko.ts b/versions/v20/projects/sdcorejs-angular/i18n/src/ko.ts
index 950f8c05d..e4e8c4b3c 100644
--- a/versions/v20/projects/sdcorejs-angular/i18n/src/ko.ts
+++ b/versions/v20/projects/sdcorejs-angular/i18n/src/ko.ts
@@ -419,6 +419,7 @@ export const KO_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '하위 요소',
   'core.component.form-builder.group-icon': '아이콘',
   'core.component.form-builder.group-accent-color': '강조 색상',
+  'core.component.form-builder.collapsible': '펼치기/접기 허용',
   'core.component.form-builder.group-no-children': '필드가 아직 없습니다. 이 그룹에 필드를 추가하거나 드래그하세요.',
   'core.component.form-builder.break': '줄 바꿈',
 
diff --git a/versions/v20/projects/sdcorejs-angular/i18n/src/vi.ts b/versions/v20/projects/sdcorejs-angular/i18n/src/vi.ts
index ac26c06b0..dbe94ea22 100644
--- a/versions/v20/projects/sdcorejs-angular/i18n/src/vi.ts
+++ b/versions/v20/projects/sdcorejs-angular/i18n/src/vi.ts
@@ -419,6 +419,7 @@ export const VI_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': 'Thành phần con',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Màu nhấn',
+  'core.component.form-builder.collapsible': 'Cho phép thu gọn/mở rộng',
   'core.component.form-builder.group-no-children': 'Chưa có trường nào. Thêm hoặc kéo trường vào group này.',
   'core.component.form-builder.break': 'Ngắt dòng',
 
diff --git a/versions/v20/projects/sdcorejs-angular/i18n/src/zh.ts b/versions/v20/projects/sdcorejs-angular/i18n/src/zh.ts
index b429856af..066257b96 100644
--- a/versions/v20/projects/sdcorejs-angular/i18n/src/zh.ts
+++ b/versions/v20/projects/sdcorejs-angular/i18n/src/zh.ts
@@ -419,6 +419,7 @@ export const ZH_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子项',
   'core.component.form-builder.group-icon': '图标',
   'core.component.form-builder.group-accent-color': '强调色',
+  'core.component.form-builder.collapsible': '允许展开/折叠',
   'core.component.form-builder.group-no-children': '尚无字段。请向此分组添加或拖入字段。',
   'core.component.form-builder.break': '换行',
 
diff --git a/versions/v20/projects/sdcorejs-angular/karma.conf.js b/versions/v20/projects/sdcorejs-angular/karma.conf.js
index adbeaf7da..ee95161f9 100644
--- a/versions/v20/projects/sdcorejs-angular/karma.conf.js
+++ b/versions/v20/projects/sdcorejs-angular/karma.conf.js
@@ -98,7 +98,7 @@ module.exports = function (config) {
     reporters: ['progress', 'kjhtml', 'coverage'],
     // why: từ khi `coverage-includes.spec.ts` kéo TOÀN BỘ source vào bundle (để mẫu số coverage
     // gồm cả file không spec nào import), page load đầu tiên nặng hẳn lên — bundle đã instrument,
-    // cộng ckeditor/pdfjs/exceljs/chart.js. Với default (`browserNoActivityTimeout` 30s,
+    // cộng ckeditor/pdfjs/exceljs. Với default (`browserNoActivityTimeout` 30s,
     // `browserDisconnectTimeout` 2s, `pingTimeout` 5s) Chrome bị coi là chết TRƯỚC KHI chạy
     // spec đầu tiên: "Disconnected reconnect failed before timeout of 2000ms (ping timeout)",
     // 0 spec chạy, exit 0 — tức là một run rỗng trông như run xanh. Các mốc dưới đây là để chờ
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
index a7a554540..390baf397 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
@@ -1,30 +1,38 @@
+@let _structured = structured();
+@let _showPin = showPin();
+@let _iconFontSet = iconFontSet();
 <nav
   class="sd-layout-menu-tree d-flex flex-column gap-4"
-  [class.sd-layout-menu-tree--structured]="structured()"
-  [class.sd-layout-menu-tree--pinnable]="showPin()"
+  [class.sd-layout-menu-tree--structured]="_structured"
+  [class.sd-layout-menu-tree--pinnable]="_showPin"
   aria-label="Navigation menu">
   @for (node of nodes(); track node.key) {
     @if (node.isGroup) {
-      <div
-        class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
-        [class.sd-layout-menu-tree__root]="node.isRoot"
-        [style.padding-left.px]="node.paddingLeft">
-        @for (offset of node.branchOffsets; track offset) {
-          <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
-        }
-        @if (node.showIcon) {
-          @if (structured() && node.menu.iconUrl) {
-            <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
-          } @else {
-            <sd-icon
-              data-menu-icon
-              [name]="node.menu.icon || 'folder'"
-              [fontSet]="iconFontSet()"
-              [size]="structured() ? '20px' : undefined"></sd-icon>
-          }
-        }
-        <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
-      </div>
+      @if (node.isCollapsible) {
+        <button
+          type="button"
+          class="sd-layout-menu-tree__group sd-layout-menu-tree__group-toggle d-flex align-items-center gap-8 T12M text-black400"
+          [attr.data-menu-group]="node.key"
+          [attr.aria-label]="node.title"
+          [attr.aria-expanded]="node.isExpanded"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft"
+          (click)="onToggleGroup(node.key)">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+          <sd-icon
+            class="sd-layout-menu-tree__disclosure"
+            [name]="node.isExpanded ? 'expand_more' : 'chevron_right'"
+            size="18px"
+            aria-hidden="true"></sd-icon>
+        </button>
+      } @else {
+        <div
+          class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+        </div>
+      }
     } @else {
       <div
         class="sd-layout-menu-tree__route d-flex align-items-center gap-4"
@@ -52,13 +60,13 @@
               <sd-icon
                 data-menu-icon
                 [name]="node.menu.icon || 'chevron_right'"
-                [fontSet]="iconFontSet()"
-                [size]="structured() ? '20px' : undefined"></sd-icon>
+              [fontSet]="_iconFontSet"
+              [size]="_structured ? '20px' : undefined"></sd-icon>
             }
           }
-          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
+          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
         </button>
-        @if (showPin()) {
+        @if (_showPin) {
           <button
             type="button"
             class="sd-layout-menu-tree__pin d-flex align-items-center justify-content-center"
@@ -78,3 +86,17 @@
     </div>
   }
 </nav>
+
+<ng-template #groupContent let-node>
+  @for (offset of node.branchOffsets; track offset) {
+    <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
+  }
+  @if (node.showIcon) {
+    @if (_structured && node.menu.iconUrl) {
+      <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
+    } @else {
+      <sd-icon data-menu-icon [name]="node.menu.icon || 'folder'" [fontSet]="_iconFontSet" [size]="_structured ? '20px' : undefined"></sd-icon>
+    }
+  }
+  <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
+</ng-template>
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
index 92309d494..875a4c557 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
@@ -1,5 +1,6 @@
 // why: Route and pin actions need a navigation-specific hit area not provided by a Core UI component.
 .sd-layout-menu-tree__route-button,
+.sd-layout-menu-tree__group-toggle,
 .sd-layout-menu-tree__pin {
   min-height: 40px;
   border: 0;
@@ -21,6 +22,7 @@
 
 // why: Navigation rows need a token-based hover surface without adding a second button component.
 .sd-layout-menu-tree__route-button:hover,
+.sd-layout-menu-tree__group-toggle:hover,
 .sd-layout-menu-tree__pin:hover {
   background: var(--sd-black100, var(--sd-surface-muted, #f3f3f3));
   color: var(--sd-primary, #005cbb);
@@ -32,6 +34,7 @@
 
 // why: Keyboard users need a visible focus indicator on custom navigation actions.
 .sd-layout-menu-tree__route-button:focus-visible,
+.sd-layout-menu-tree__group-toggle:focus-visible,
 .sd-layout-menu-tree__pin:focus-visible {
   outline: 2px solid var(--sd-primary);
   outline-offset: 2px;
@@ -61,6 +64,17 @@
   min-height: 32px;
 }
 
+.sd-layout-menu-tree__group-toggle {
+  text-align: left;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.sd-layout-menu-tree__disclosure {
+  flex: 0 0 18px;
+  margin-left: auto;
+}
+
 // why: Consumer-provided image icons need the same footprint as SdIcon glyphs.
 .sd-layout-menu-tree__icon-image {
   width: 20px;
@@ -144,7 +158,8 @@
     color: var(--menu-muted);
   }
 
-  .sd-layout-menu-tree__route-button:hover {
+  .sd-layout-menu-tree__route-button:hover,
+  .sd-layout-menu-tree__group-toggle:hover {
     background: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--menu-surface));
   }
 
@@ -190,12 +205,14 @@
   }
 
   .sd-layout-menu-tree__route-button:focus-visible,
+  .sd-layout-menu-tree__group-toggle:focus-visible,
   .sd-layout-menu-tree__pin:focus-visible {
     outline-offset: -2px;
   }
 
   @media (pointer: coarse) {
     .sd-layout-menu-tree__route .sd-layout-menu-tree__route-button,
+    .sd-layout-menu-tree__group-toggle,
     .sd-layout-menu-tree__pin {
       min-height: 44px;
     }
@@ -212,6 +229,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .sd-layout-menu-tree__route-button,
+  .sd-layout-menu-tree__group-toggle,
   .sd-layout-menu-tree__pin {
     transition: none;
   }
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
index d0c4c32e9..417f8c6aa 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
@@ -29,6 +29,7 @@ describe('SdLayoutMenuTreeComponent', () => {
   });
 
   it('preserves nested menu icons and spacing in the default V2/mobile presentation', () => {
+    expect(fixture.nativeElement.querySelector('[data-menu-group]')).toBeNull();
     const route = fixture.nativeElement.querySelector('[data-menu-key="id:reports"]') as HTMLElement;
     expect(route.querySelector('sd-icon')).not.toBeNull();
     expect(getComputedStyle(route).paddingLeft).toBe('28px');
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
index 46a50a4f6..5cf5e0c8a 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, output, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, model, output, signal } from '@angular/core';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 import { SdLayoutMenu, SdLayoutRootMenu, getMenuStableKey, searchMenuLeaves } from '../../../services';
@@ -15,6 +16,8 @@ interface SdLayoutMenuTreeNode {
   showIcon: boolean;
   isRoot: boolean;
   isGroup: boolean;
+  isCollapsible: boolean;
+  isExpanded: boolean;
   isActive: boolean;
   isPinned: boolean;
   isPinVisible: boolean;
@@ -25,7 +28,7 @@ interface SdLayoutMenuTreeNode {
 @Component({
   selector: 'sd-layout-menu-tree',
   standalone: true,
-  imports: [SdIcon],
+  imports: [SdIcon, NgTemplateOutlet],
   templateUrl: './menu-tree.component.html',
   styleUrl: './menu-tree.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +47,8 @@ export class SdLayoutMenuTreeComponent {
   pinVisibility = input<'hover' | 'always'>('hover');
   /** V3 hierarchy and flat shortcuts are opt-in; V2/mobile retain the default presentation. */
   presentation = input<'default' | 'hierarchy' | 'shortcuts'>('default');
+  collapsible = input(false);
+  collapsedGroupKeys = model<string[]>([]);
   structured = computed(() => this.presentation() !== 'default');
   iconFontSet = computed(() => (this.structured() ? ('material-icons-outlined' as const) : undefined));
   navigate = output<SdLayoutRootMenu>();
@@ -56,6 +61,8 @@ export class SdLayoutMenuTreeComponent {
     const query = this.query().trim();
     const structured = this.structured();
     const hierarchy = this.presentation() === 'hierarchy' && !query;
+    const collapsible = this.collapsible() && !query;
+    const collapsedKeys = new Set(this.collapsedGroupKeys());
     const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
     // Nhiều menu cùng khớp route thì chỉ path sát nhất sáng: ở '/appointment/cs' thì '/appointment' không sáng nữa
     const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
@@ -69,6 +76,7 @@ export class SdLayoutMenuTreeComponent {
         const path = 'path' in menu ? menu.path : '';
         const title = menu.title ?? menu.tooltipTitle ?? '';
         const isPinned = pinnedKeys.has(key);
+        const isExpanded = !collapsible || !collapsedKeys.has(key);
         nodes.push({
           menu,
           key,
@@ -80,6 +88,8 @@ export class SdLayoutMenuTreeComponent {
           showIcon: !structured || (hierarchy && depth === 0),
           isRoot: depth === 0 && (!structured || hierarchy),
           isGroup,
+          isCollapsible: isGroup && collapsible,
+          isExpanded,
           isActive: !!path && path === activeMenuPath,
           isPinned,
           isPinVisible: alwaysShowPin || isPinned || hoveredPinKey === key,
@@ -88,7 +98,7 @@ export class SdLayoutMenuTreeComponent {
           // quyết định vị trí. Tính trong `nodes` computed nên tự cập nhật khi đổi ngôn ngữ.
           pinLabel: this.#i18n.t(isPinned ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin', { title }),
         });
-        if (isGroup && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
+        if (isGroup && isExpanded && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
       }
     };
 
@@ -104,6 +114,10 @@ export class SdLayoutMenuTreeComponent {
     if ('path' in menu) this.navigate.emit(menu);
   }
 
+  onToggleGroup(key: string): void {
+    this.collapsedGroupKeys.update(keys => (keys.includes(key) ? keys.filter(value => value !== key) : [...keys, key]));
+  }
+
   onTogglePinned(event: MouseEvent, menu: SdLayoutMenu): void {
     event.stopPropagation();
     this.togglePinned.emit(menu);
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
index de417f7f0..5261ea32c 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
@@ -87,6 +87,8 @@ <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.rece
           <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.all-menu' | sdTranslate }}</h2>
           <sd-layout-menu-tree
             presentation="hierarchy"
+            [collapsible]="true"
+            [(collapsedGroupKeys)]="collapsedGroupKeys"
             [menus]="menus()"
             [query]="searchText()"
             [activePath]="activePath()"
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
index 976591419..d412e5dea 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
@@ -44,6 +44,139 @@ describe('SdSidebarV3', () => {
     expect(fixture.componentInstance.isCollapsed()).toBeFalse();
   });
 
+  const groupButton = (key: string): HTMLButtonElement | null =>
+    fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-group="${key}"]`);
+  const allRoute = (key: string): HTMLButtonElement | null => fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-key="${key}"]`);
+
+  it('toggles a group with a focusable disclosure without navigating or pinning', () => {
+    create();
+    const navigate = spyOn(TestBed.inject(Router), 'navigate');
+    const pin = spyOn(TestBed.inject(SdLayoutNavigationStateService), 'togglePinned');
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    expect(group.tagName).toBe('BUTTON');
+    expect(group.type).toBe('button');
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    group.focus();
+    group.click();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(group);
+    expect(group.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(pin).not.toHaveBeenCalled();
+    group.click();
+    fixture.detectChanges();
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('preserves independent nested disclosures when a parent is closed and reopened', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }, dashboard] },
+      { id: 'other', title: 'Other', children: [{ ...dashboard, id: 'other-leaf' }] },
+    ]);
+    fixture.detectChanges();
+    const nested = groupButton('id:nested');
+    expect(nested).not.toBeNull();
+    if (!nested) return;
+    nested.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).toBeNull();
+    expect(allRoute('id:other-leaf')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+  });
+
+  it('searches closed groups and preserves disclosures through query and rail toggles', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.detectChanges();
+    fixture.componentInstance.searchText.set('BAO CAO');
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('id:work')).toBeNull();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    fixture.componentInstance.searchText.set('');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('reveals the exact active branch on navigation without reopening unrelated branches', async () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }] },
+      { id: 'other', title: 'Other', children: [dashboard] },
+    ]);
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).not.toBeNull();
+    if (!groupButton('id:nested')) return;
+    for (const key of ['id:nested', 'id:work', 'id:other']) {
+      groupButton(key)!.click();
+      fixture.detectChanges();
+    }
+    const router = TestBed.inject(Router);
+    router.resetConfig([{ path: 'reports/:id', children: [] }]);
+    await router.navigateByUrl('/reports/42?source=test#details');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')!.getAttribute('aria-current')).toBe('page');
+    expect(groupButton('id:other')!.getAttribute('aria-expanded')).toBe('false');
+    // An explicit close remains respected while the current route stays unchanged.
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('opens a closed root group when its compact rail icon is activated', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('.sd-sidebar-v3__collapsed-action').click();
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('distinguishes same-title groups by their ancestor fallback keys', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { title: 'First', children: [{ title: 'Shared', children: [dashboard] }] },
+      { title: 'Second', children: [{ title: 'Shared', children: [reports] }] },
+    ]);
+    fixture.detectChanges();
+    const first = groupButton('group:first/shared');
+    expect(first).not.toBeNull();
+    if (!first) return;
+    first.click();
+    fixture.detectChanges();
+    expect(allRoute('id:dashboard')).toBeNull();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('group:second/shared')!.getAttribute('aria-expanded')).toBe('true');
+  });
+
   it('uses defaultCollapsed when no preference exists', () => {
     create({ version: 3, defaultCollapsed: true });
 
@@ -176,7 +309,8 @@ describe('SdSidebarV3', () => {
     expect(tree.querySelectorAll('[data-menu-icon]').length).toBe(2);
     expect(tree.querySelector('img[src="/nested-icon.svg"]')).toBeNull();
     const groups = tree.querySelectorAll<HTMLElement>('.sd-layout-menu-tree__group');
-    expect(groups[1].querySelector('sd-icon')).toBeNull();
+    expect(groups[1].querySelector('[data-menu-icon]')).toBeNull();
+    expect(groups[1].querySelector('.sd-layout-menu-tree__disclosure')).not.toBeNull();
     const leaf = tree.querySelector<HTMLButtonElement>('[data-menu-key="id:reports"]')!;
     expect(leaf.querySelector('sd-icon, img')).toBeNull();
     expect(leaf.getAttribute('aria-current')).toBe('page');
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
index c41d3b56f..42167cf99 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
@@ -9,6 +9,7 @@ import { SdLayoutMenuTreeComponent } from '../shared/menu-tree/menu-tree.compone
 import { SdLayoutSearchFieldComponent } from '../shared/search-field/search-field.component';
 import { SdLayoutUserMenuComponent } from '../shared/user-menu/user-menu.component';
 import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+import { containsMenuPath, resolveActiveMenuPath } from '../../utils';
 
 @Component({
   selector: 'sd-sidebar-v3',
@@ -28,6 +29,7 @@ export class SdSidebarV3 {
   userInfo = input.required<SdLayoutUserInfo>();
   sidebar = input.required<SidebarConfigurationV3>();
   isCollapsed = signal(false);
+  protected readonly collapsedGroupKeys = signal<string[]>([]);
   searchText = signal('');
   activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '');
   searchResults = computed<SdLayoutRootMenu[]>(() => searchMenuLeaves(this.menus(), this.searchText()));
@@ -55,6 +57,23 @@ export class SdSidebarV3 {
     this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
       if (event instanceof NavigationEnd) this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
     });
+    effect(() => {
+      const menus = this.menus();
+      const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
+      if (!activeMenuPath) return;
+      const activeGroupKeys = new Set<string>();
+      const visit = (items: SdLayoutMenu[], ancestors: string[]): void => {
+        for (const menu of items) {
+          if (!('children' in menu) || !containsMenuPath(menu, activeMenuPath)) continue;
+          const key = getMenuStableKey(menu, ancestors);
+          activeGroupKeys.add(key);
+          visit(menu.children ?? [], [...ancestors, menu.title ?? key]);
+        }
+      };
+      visit(menus, []);
+      // why: Chỉ mở nhánh khi route/menu đổi; người dùng vẫn được đóng nhánh đang active.
+      untracked(() => this.collapsedGroupKeys.update(keys => keys.filter(key => !activeGroupKeys.has(key))));
+    });
   }
 
   toggleCollapsed(): void {
@@ -66,6 +85,7 @@ export class SdSidebarV3 {
     if ('path' in menu) this.navigateMenu(menu);
     else {
       this.isCollapsed.set(false);
+      this.collapsedGroupKeys.update(keys => keys.filter(key => key !== getMenuStableKey(menu)));
       this.#navigationState.patchVersionState(3, { collapsed: false });
     }
   }
diff --git a/versions/v20/projects/sdcorejs-angular/modules/layout/sd-layout.md b/versions/v20/projects/sdcorejs-angular/modules/layout/sd-layout.md
index 09d64b249..a71a963f1 100644
--- a/versions/v20/projects/sdcorejs-angular/modules/layout/sd-layout.md
+++ b/versions/v20/projects/sdcorejs-angular/modules/layout/sd-layout.md
@@ -246,6 +246,10 @@ const menus: SdLayoutMenu[] = [
 
 V2 honors up to three valid `primaryMenuIds` in the supplied order, fills missing slots from the remaining visible roots, and exposes overflow through More. V3 search is accent-insensitive and searches the filtered menu tree.
 
+Desktop V3 menu groups support expand/collapse at every depth without additional configuration. Groups start expanded; click the group row or focus it with Tab and press Enter/Space to toggle its children. The disclosure chevron and `aria-expanded` reflect the current state. Closing a parent preserves each nested group's state, and group toggles do not navigate or pin items.
+
+Group state belongs to the mounted V3 sidebar: search still finds leaves inside closed groups, clearing the query restores the tree state, and toggling the whole sidebar between drawer and icon rail preserves it. Activating a group icon in the rail opens the drawer and that root group. A route change opens the ancestors of the most exact active menu; unrelated groups retain their state. Group state resets when the sidebar is recreated and is not stored in local storage. Pinned/Recent shortcuts, V2 and mobile navigation retain their existing behavior.
+
 ### Active menu resolution prefers the most exact path
 
 A menu is active only when it owns the longest `path` that matches the current route. With both `/appointment` and `/appointment/cs` declared, standing on `/appointment/cs` highlights the child alone — the ancestor entry is no longer lit up, and `aria-current="page"` is set on that one row. `resolveActiveMenuPath(menus, routePath)` from the layout `utils` is the single decision point: V1 uses it for node focus, menu-group binding and branch expansion, and the shared `sd-layout-menu-tree` (V2, V3 and their mobile variants) uses it for `isActive`. Matching stays segment-based, so `/appointment` never matches `/appointments`, and a route with no menu of its own (`/appointment/cs/123`) still activates its closest declared ancestor. `MenuFocusPipe` takes the resolved path as its third argument; called with two arguments it keeps the previous prefix matching.
diff --git a/versions/v20/projects/sdcorejs-angular/ng-package.json b/versions/v20/projects/sdcorejs-angular/ng-package.json
index a3dd12272..7f559acb7 100644
--- a/versions/v20/projects/sdcorejs-angular/ng-package.json
+++ b/versions/v20/projects/sdcorejs-angular/ng-package.json
@@ -14,7 +14,6 @@
     "@bjorn3/browser_wasi_shim",
     "keycloak-js",
     "prismjs",
-    "chart.js",
     "pdfjs-dist",
     "@lucide/angular"
   ],
diff --git a/versions/v20/projects/sdcorejs-angular/package.json b/versions/v20/projects/sdcorejs-angular/package.json
index 43a71f406..377d3a3d0 100644
--- a/versions/v20/projects/sdcorejs-angular/package.json
+++ b/versions/v20/projects/sdcorejs-angular/package.json
@@ -45,7 +45,6 @@
     "@lucide/angular": "^1.22.0",
     "@ckeditor/ckeditor5-angular": "11.1.2",
     "ckeditor5": "48.0.0",
-    "chart.js": "^4.5.1",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
     "keycloak-js": "^26.0.0",
@@ -56,7 +55,6 @@
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
-    "./fesm2022/sdcorejs-angular-components-chart.mjs",
     "./fesm2022/sdcorejs-angular-components-code-editor.mjs",
     "./fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs"
   ]
diff --git a/versions/v21/README.md b/versions/v21/README.md
index 095db5a3a..67e7ef8cc 100644
--- a/versions/v21/README.md
+++ b/versions/v21/README.md
@@ -176,7 +176,7 @@ Mỗi component / form control / service / module là 1 entry point độc lập
 
 | Group | Items |
 | --- | --- |
-| Display | `badge` · `avatar` · `chart` · `section` · `view` · `inform` |
+| Display | `badge` · `avatar` · `section` · `view` · `inform` |
 | Action | `button` · `quick-action` · `operator` |
 | Layout | `splitter` · `side-drawer` · `tab` · `tab-router` · `stepper` · `modal` · `anchor` |
 | Data | `table` · `tree` · `org-chart` · `query-bar` · `query-builder` · `preview` · `history` |
diff --git a/versions/v21/SYNC-STATUS.md b/versions/v21/SYNC-STATUS.md
index 39577f0a3..cac994bfd 100644
--- a/versions/v21/SYNC-STATUS.md
+++ b/versions/v21/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 21 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 09:50:52 |
+| Updated At | 2026-09-11 15:35:26 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v21 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v21/package-lock.json b/versions/v21/package-lock.json
index 0a4c89b6b..e405606c2 100644
--- a/versions/v21/package-lock.json
+++ b/versions/v21/package-lock.json
@@ -23,7 +23,6 @@
                 "@lucide/angular": "^1.22.0",
                 "@sdcorejs/angular-material-datetime": "1.0.4",
                 "@sdcorejs/utils": "1.1.4",
-                "chart.js": "^4.5.1",
                 "ckeditor5": "48.0.0",
                 "date-fns": "^3.6.0",
                 "exceljs": "^4.4.0",
@@ -6727,12 +6726,6 @@
                 "tslib": "2"
             }
         },
-        "node_modules/@kurkle/color": {
-            "version": "0.3.4",
-            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-            "license": "MIT"
-        },
         "node_modules/@leichtgewicht/ip-codec": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -11230,18 +11223,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/chart.js": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-            "license": "MIT",
-            "dependencies": {
-                "@kurkle/color": "^0.3.0"
-            },
-            "engines": {
-                "pnpm": ">=8"
-            }
-        },
         "node_modules/chokidar": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
diff --git a/versions/v21/package.json b/versions/v21/package.json
index c548e926d..63f12ac01 100644
--- a/versions/v21/package.json
+++ b/versions/v21/package.json
@@ -35,7 +35,6 @@
     "@lucide/angular": "^1.22.0",
     "@sdcorejs/angular-material-datetime": "1.0.4",
     "@sdcorejs/utils": "1.1.4",
-    "chart.js": "^4.5.1",
     "ckeditor5": "48.0.0",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
diff --git a/versions/v21/projects/sdcorejs-angular/README.md b/versions/v21/projects/sdcorejs-angular/README.md
index e84c41a42..234a3770d 100644
--- a/versions/v21/projects/sdcorejs-angular/README.md
+++ b/versions/v21/projects/sdcorejs-angular/README.md
@@ -91,18 +91,20 @@ Replace the timer with your typed service call and reset `saving` in a `finally`
 
 | Area              | Representative APIs                                                                                                             |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, editors, and document tooling      |
+| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, editors, and document tooling              |
 | Data and workflow | Local/server tables, entity/tree pickers, query builders, unsaved-change guards, background tasks, upload, and Excel import     |
 | Form controls     | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, and color   |
 | Services          | Typed API/retry/cancel, ref-counted loading, graph-safe persistence/cache/storage, viewport signals, notifications, and exports |
 | Portal modules    | Auth, Keycloak, permission, layout, and icon modules                                                                            |
 | Localization      | Built-in `vi`, `en`, `ja`, `ko`, and `zh` catalogs, plus a synchronous custom-catalog provider                                  |
 
+Charting libraries are selected, installed, and configured by the consuming application. Core UI does not bundle a chart engine; `sd-org-chart` remains available for organizational hierarchies.
+
 The [live showcase](https://sdcorejs.github.io/sdcorejs-angular/) demonstrates components, forms, and services. The [latest API manifest](https://sdcorejs.github.io/sdcorejs-angular/docs/latest/index.json) lists every published reference document without duplicating the full API here.
 
 ## Standalone and subpath imports
 
-Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. The package declares `sideEffects: false`.
+Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. Stylesheets and editor registration entry points are retained as side effects.
 
 ```ts
 import { SdButton } from '@sdcorejs/angular/components/button';
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/index.ts b/versions/v21/projects/sdcorejs-angular/components/chart/index.ts
deleted file mode 100644
index 7551d46c3..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './src/bar-chart.component';
-export * from './src/line-chart.component';
-export * from './src/pie-chart.component';
-export * from './src/doughnut-chart.component';
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/ng-package.json b/versions/v21/projects/sdcorejs-angular/components/chart/ng-package.json
deleted file mode 100644
index 19e3f2bcb..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/ng-package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/sd-chart.md b/versions/v21/projects/sdcorejs-angular/components/chart/sd-chart.md
deleted file mode 100644
index 8df787871..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/sd-chart.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# `<sd-bar-chart>` / `<sd-line-chart>` / `<sd-pie-chart>` / `<sd-doughnut-chart>`
-
-**Type**: Component family (4 separate components, one per chart type)
-**Selectors**: `sd-bar-chart`, `sd-line-chart`, `sd-pie-chart`, `sd-doughnut-chart`
-**Import path**: `@sdcorejs/angular/components/chart` (or barrel: `@sdcorejs/angular/components`)
-**Classes**: `SdBarChartComponent`, `SdLineChartComponent`, `SdPieChartComponent`, `SdDoughnutChartComponent`
-**Standalone**: yes
-**Change detection**: `OnPush`
-**Underlying engine**: [Chart.js](https://www.chartjs.org/) (all `registerables` registered)
-
-## One-line purpose
-Thin signal-based wrappers around Chart.js — render bar / line / pie / doughnut visualizations from declarative `data` / `options` / `plugins` inputs, with auto-update on signal changes.
-
-## When to use
-- Dashboards: KPI cards, time-series, breakdown by category
-- Reports: monthly/quarterly comparisons, share-of-total
-- Analytics widgets inside detail pages
-- Any place a Chart.js chart fits — these wrappers don't add domain styling, they relay Chart.js config
-
-## When NOT to use
-- For sparkline / inline trend cells in tables — use a smaller dedicated component
-- For non-Chart.js visualizations (D3, ECharts, mermaid) — use those libraries directly
-- For numeric "stat tiles" without a graph — use a card + typography
-- When data updates faster than ~10 fps — Chart.js redraw cost will dominate; consider canvas-level rendering
-
-## Inputs (identical shape across all 4 charts; the generic chart-type changes)
-
-### `<sd-bar-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'bar'>` | (required) | Chart.js v4 bar dataset (`labels`, `datasets[]`). |
-| `options` | `ChartOptions<'bar'>` | `undefined` | Chart.js options (scales, plugins, legend, tooltips, …). |
-| `plugins` | `Plugin<'bar'>[]` | `[]` | Chart.js plugins (chart-local; `Chart.register(...registerables)` is already called globally). |
-
-### `<sd-line-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'line'>` | (required) | Chart.js v4 line dataset. |
-| `options` | `ChartOptions<'line'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'line'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-pie-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'pie'>` | (required) | Chart.js v4 pie dataset. |
-| `options` | `ChartOptions<'pie'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'pie'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-doughnut-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'doughnut'>` | (required) | Chart.js v4 doughnut dataset. |
-| `options` | `ChartOptions<'doughnut'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'doughnut'>[]` | `[]` | Chart-local plugins. |
-
-## Outputs
-None. To respond to user interaction, attach Chart.js plugins or pass `options.onClick` / `options.onHover` callbacks via `options`.
-
-## Content projection (slots)
-None — these are pure canvas wrappers.
-
-## Behavior notes
-- An internal `effect()` watches `data`/`options` signals and calls `chart.update()` on change (no destroy/recreate, so animations are smooth).
-- The chart instance is created in `ngOnInit` and destroyed in `ngOnDestroy`.
-- **Bar and line** add a horizontal-scroll wrapper when `data.labels.length > 15`: the inner div gets `min-width = labels.length * 50 px` and the outer wrapper gets `overflow-x: auto`. This avoids cramped axes on dense series.
-- **Pie and doughnut** are 100% width / 100% height of their host — set the host's size via CSS.
-
-## Visual cues
-- **Bar**: vertical bars over a horizontal label axis; horizontally scrollable when many labels.
-- **Line**: time-series line(s) with optional area fill (per Chart.js config); horizontally scrollable when many labels.
-- **Pie**: full-circle slice diagram, 100%-of-total proportions.
-- **Doughnut**: same as pie with a hollow center (good for a centered KPI label).
-- All four obey `data.datasets[*].backgroundColor` / `borderColor` — colors come from the data, not the component.
-
-## Examples
-
-### 1. Monthly revenue bar chart
-```ts
-revenueData = signal<ChartData<'bar'>>({
-  labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-  datasets: [{
-    label: 'Doanh thu (triệu đồng)',
-    data: [120, 135, 110, 160, 180, 150],
-    backgroundColor: '#3498db',
-  }],
-});
-revenueOptions: ChartOptions<'bar'> = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: { legend: { position: 'top' } },
-};
-```
-```html
-<div style="height: 320px;">
-  <sd-bar-chart [data]="revenueData()" [options]="revenueOptions"></sd-bar-chart>
-</div>
-```
-
-### 2. Multi-series line chart
-```html
-<div style="height: 280px;">
-  <sd-line-chart [data]="trafficData()" [options]="trafficOptions"></sd-line-chart>
-</div>
-```
-
-### 3. Pie chart for category breakdown
-```ts
-breakdownData = signal<ChartData<'pie'>>({
-  labels: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C'],
-  datasets: [{ data: [45, 30, 25], backgroundColor: ['#1abc9c', '#3498db', '#e67e22'] }],
-});
-```
-```html
-<div style="height: 240px; width: 240px;">
-  <sd-pie-chart [data]="breakdownData()"></sd-pie-chart>
-</div>
-```
-
-### 4. Doughnut KPI with center label (via plugin)
-```html
-<div style="height: 200px; width: 200px; position: relative;">
-  <sd-doughnut-chart
-    [data]="kpiData()"
-    [options]="kpiOptions"
-    [plugins]="[centerLabelPlugin]">
-  </sd-doughnut-chart>
-</div>
-```
-
-## Anti-patterns
-- Forgetting to set a height on the host — Chart.js needs a sized container to render; `height: 0` produces a blank canvas
-- Passing brand-new object references on every change-detection cycle for `options` — every change triggers `chart.update()`; memoize when possible
-- Using these wrappers for fundamentally different chart types (radar, scatter, polar) without adding a corresponding component — these 4 selectors are typed to specific chart types
-- Manually calling `Chart.register(...)` again — already registered at module load
-- Putting these inside a `*ngIf` that toggles rapidly — destroys/recreates the canvas; consider keeping mounted and toggling visibility
-
-## Related
-- `<sd-card>` — common host for charts on a dashboard
-- `<sd-tab>` — to switch between multiple chart views
-- `<sd-page>` — page shell containing reporting dashboards
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts b/versions/v21/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
deleted file mode 100644
index 908389590..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-bar-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdBarChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'bar'>> = input.required<ChartData<'bar'>>();
-  options: InputSignal<ChartOptions<'bar'> | undefined> = input<ChartOptions<'bar'>>();
-  plugins: InputSignal<Plugin<'bar'>[]> = input<Plugin<'bar'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'bar'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData as any;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'bar',
-        data: this.data() as any,
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts b/versions/v21/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
deleted file mode 100644
index d166ee3a8..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-doughnut-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdDoughnutChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'doughnut'>> = input.required<ChartData<'doughnut'>>();
-  options: InputSignal<ChartOptions<'doughnut'> | undefined> = input<ChartOptions<'doughnut'>>();
-  plugins: InputSignal<Plugin<'doughnut'>[]> = input<Plugin<'doughnut'>[]>([]);
-
-  chart: Chart<'doughnut'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'doughnut',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts b/versions/v21/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
deleted file mode 100644
index 20512d49b..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-line-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdLineChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'line'>> = input.required<ChartData<'line'>>();
-  options: InputSignal<ChartOptions<'line'> | undefined> = input<ChartOptions<'line'>>();
-  plugins: InputSignal<Plugin<'line'>[]> = input<Plugin<'line'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'line'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'line',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v21/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts b/versions/v21/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
deleted file mode 100644
index 7c6899819..000000000
--- a/versions/v21/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-pie-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdPieChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'pie'>> = input.required<ChartData<'pie'>>();
-  options: InputSignal<ChartOptions<'pie'> | undefined> = input<ChartOptions<'pie'>>();
-  plugins: InputSignal<Plugin<'pie'>[]> = input<Plugin<'pie'>[]>([]);
-
-  chart: Chart<'pie'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'pie',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md b/versions/v21/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
index e288032ab..0254e79de 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
@@ -113,6 +113,25 @@ interface SdFormGenericComponentBase {
 
 `SdFormGenericGroup` is not a field — it is a titled container with its own `layout`, a nested `components` array, and required `properties.{icon, color}`. Groups do not nest: the builder hides `group` from the palette while you are editing one.
 
+Groups support `properties.hidden`, `hiddenWhenExpression` and `visibleWhenExpression` for visibility. They have **no disabled-when option** (`disabledWhenExpression`) or required rule; configure those on individual child fields. Legacy group-level disable conditions are ignored by the renderer.
+
+| Group property | Type | Default | Behaviour |
+| --- | --- | --- | --- |
+| `properties.collapsible` | `boolean` | `false` | Allows expanding/collapsing the group in builder preview and `<sd-form-render>`, including viewed mode. Uses the same `collapsible` property as `<sd-section>`. |
+
+```ts
+const group: SdFormGenericGroup = {
+  id: 'details',
+  type: 'group',
+  label: 'Details',
+  layout: { columns: '12' },
+  properties: { icon: 'category', color: 'primary', collapsible: true },
+  components: [/* child fields */],
+};
+```
+
+Groups start expanded. Collapsing changes presentation only: child controls keep their values, touched state and validation. The expanded/collapsed state belongs to the rendered section instance and is not saved to the schema. The design canvas remains available for editing group contents through Details.
+
 `SdFormGenericValues` is a convenience alias for `SdFormGenericRadio | SdFormGenericSelect | SdFormGenericChecklist`. Their inline `values` entries are `SdFormGenericSelectionStaticItem` — `{ value: string; label: string }` (note `label`, not `display`; the `display` spelling belongs to `SdFormGenericSelectionItem`, which is what a `valuesKey` lookup returns).
 
 ### Expressions
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
index 84c442546..9c9a4ccad 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
@@ -8,6 +8,10 @@
   </summary>
   <div class="fb-section__body">
     <attribute-input [form]="form" [(model)]="_group.label" [label]="'core.component.form-builder.label' | sdTranslate"></attribute-input>
+    <attribute-switch
+      [form]="form"
+      [(model)]="_group.properties.collapsible"
+      [label]="'core.component.form-builder.collapsible' | sdTranslate"></attribute-switch>
 
     <div class="fb-field">
       <div class="fb-field__label">{{ 'core.component.form-builder.group-icon' | sdTranslate }}</div>
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
new file mode 100644
index 000000000..53f7ecaa7
--- /dev/null
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { I18nService } from '@sdcorejs/angular/i18n';
+import { SdFormGenericGroup } from '../../../../../models';
+import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
+import { GroupAttribute } from './group-attribute.component';
+
+describe('GroupAttribute', () => {
+  let fixture: ComponentFixture<GroupAttribute>;
+  let group: SdFormGenericGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [GroupAttribute, NoopAnimationsModule] });
+    group = {
+      id: 'group',
+      type: 'group',
+      label: 'Details',
+      layout: { columns: '12' },
+      components: [],
+      properties: { icon: 'category', color: 'primary' },
+    };
+    fixture = TestBed.createComponent(GroupAttribute);
+    fixture.componentRef.setInput('group', group);
+    fixture.detectChanges();
+  });
+
+  it('offers visibility expressions without a disabled-when option', () => {
+    const i18n = TestBed.inject(I18nService);
+    const labels = fixture.debugElement
+      .queryAll(By.directive(AttributeExpression))
+      .map(element => (element.componentInstance as AttributeExpression).label);
+    expect(labels).toEqual([i18n.t('core.component.form-builder.visible-when'), i18n.t('core.component.form-builder.hidden-when')]);
+    expect('disabledWhenExpression' in group.properties).toBeFalse();
+  });
+
+  it('defaults collapsible to false and saves both choices in group properties', () => {
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (!optionElement) return;
+    const option = optionElement.componentInstance as AttributeSwitch;
+    expect(option.model).toBeFalse();
+
+    option.modelChange.emit(true);
+    fixture.detectChanges();
+    expect((JSON.parse(JSON.stringify(group)) as SdFormGenericGroup).properties.collapsible).toBeTrue();
+
+    option.modelChange.emit(false);
+    fixture.detectChanges();
+    expect(group.properties.collapsible).toBeFalse();
+  });
+
+  it('restores the collapsible choice from a loaded schema', () => {
+    fixture.componentRef.setInput('group', { ...group, properties: { ...group.properties, collapsible: true } });
+    fixture.detectChanges();
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (optionElement) expect((optionElement.componentInstance as AttributeSwitch).model).toBeTrue();
+  });
+});
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
index d7190d45c..3d496daf5 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
@@ -5,6 +5,7 @@ import { SD_COMPONENT_ICONS, SdFormGenericComponent, SdFormGenericGroup } from '
 import { BuilderService } from '../../../services';
 import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
 import { AttributeInput } from '../../attribute-input/attribute-input.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
 
 const ICON_PRESETS = ['category', 'folder', 'inventory_2', 'group_work', 'workspaces', 'view_quilt'] as const;
 const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as const;
@@ -14,7 +15,7 @@ const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as
   templateUrl: './group-attribute.component.html',
   styleUrl: './group-attribute.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AttributeInput, AttributeExpression, SdTranslatePipe],
+  imports: [AttributeInput, AttributeExpression, AttributeSwitch, SdTranslatePipe],
 })
 export class GroupAttribute {
   // ── constants ────────────────────────────────────────────────────────
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
index 17fdf59bb..0e79e21d1 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
@@ -6,7 +6,7 @@
         @if (component.type === 'group') {
           @if (!!component.components.length) {
             <div class="col-12 mt-16">
-              <sd-section [title]="component.label" [icon]="component.properties.icon">
+              <sd-section [title]="component.label" [icon]="component.properties.icon" [collapsible]="component.properties.collapsible ?? false">
                 <!-- why: `.sd-section-body` để padding 0 (mỗi nội dung tự quyết), nên các field chỉ
                      còn px-8/py-8 của riêng chúng và dính sát khung section. Group tự chừa lề. -->
                 <div class="row mx-0 c-group-body">
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
index 0ca6931fc..5d4a36a1e 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SdFormRender } from './form-render.component';
 
 describe('SdFormRender - configuration data safety', () => {
@@ -68,6 +69,108 @@ describe('SdFormRender - configuration data safety', () => {
   });
 });
 
+describe('SdFormRender - group collapse', () => {
+  let fixture: ComponentFixture<SdFormRender>;
+  let form: FormGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [SdFormRender, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(SdFormRender);
+    form = new FormGroup({});
+    fixture.componentRef.setInput('form', form);
+  });
+
+  function render(properties: Record<string, unknown> = {}, viewed = false) {
+    fixture.componentRef.setInput('viewed', viewed);
+    fixture.componentRef.setInput('configuration', {
+      components: [
+        {
+          id: 'group',
+          type: 'group',
+          label: 'Details',
+          layout: { columns: '12' },
+          properties: { icon: 'category', color: 'primary', ...properties },
+          components: [
+            {
+              id: 'name',
+              key: 'name',
+              type: 'textfield',
+              label: 'Name',
+              layout: { columns: '12' },
+              validate: { required: true },
+              properties: {},
+            },
+          ],
+        },
+      ],
+    });
+    fixture.detectChanges();
+    flushMicrotasks();
+    fixture.detectChanges();
+  }
+
+  for (const collapsible of [undefined, false]) {
+    it(`keeps the group expanded without a toggle when collapsible is ${collapsible}`, fakeAsync(() => {
+      render({ collapsible });
+      expect(fixture.nativeElement.querySelector('.sd-section-body')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('.sd-section-collapse-toggle')).toBeNull();
+    }));
+  }
+
+  it('collapses and expands without losing child control state, value or validation', fakeAsync(() => {
+    render({ collapsible: true });
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    const control = form.get('name')!;
+    expect(control.hasError('required')).toBeTrue();
+    control.markAsTouched();
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(fixture.nativeElement.querySelector('.sd-section-body')).toBeNull();
+    expect(form.get('name')).toBe(control);
+    expect(control.touched).toBeTrue();
+    expect(control.hasError('required')).toBeTrue();
+    control.setValue('Saved name');
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(fixture.nativeElement.querySelector('sd-input input').value).toBe('Saved name');
+    expect(form.get('name')).toBe(control);
+    expect(control.valid).toBeTrue();
+    fixture.destroy();
+  }));
+
+  it('allows collapse in viewed mode', fakeAsync(() => {
+    render({ collapsible: true }, true);
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  }));
+
+  it('ignores legacy group disable conditions and keeps visibility rules', fakeAsync(() => {
+    fixture.componentRef.setInput('entity', { locked: true });
+    render({
+      disabledWhenExpression: {
+        key: 'disable-group',
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [{ key: 'locked', type: 'condition', field: 'locked', operator: 'EQUAL', value: true, dayInfo: {} }],
+      },
+    });
+    expect(form.get('name')?.enabled).toBeTrue();
+    expect(fixture.nativeElement.querySelector('sd-input input').disabled).toBeFalse();
+    render({ collapsible: true, hidden: true });
+    expect(fixture.nativeElement.querySelector('sd-section')).toBeNull();
+  }));
+});
+
 describe('SdFormRender - initial preview render', () => {
   let fixture: ComponentFixture<SdFormRender>;
 
diff --git a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
index 0e86d0062..27598908b 100644
--- a/versions/v21/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
@@ -279,6 +279,7 @@ export interface SdFormGenericGroup {
   properties: {
     icon: string;
     color: Color;
+    collapsible?: boolean;
     hidden?: boolean;
     hiddenWhenExpression?: SdFormGenericExpression;
     visibleWhenExpression?: SdFormGenericExpression;
diff --git a/versions/v21/projects/sdcorejs-angular/components/history/sd-history.md b/versions/v21/projects/sdcorejs-angular/components/history/sd-history.md
index b1d7413a3..0a9be5689 100644
--- a/versions/v21/projects/sdcorejs-angular/components/history/sd-history.md
+++ b/versions/v21/projects/sdcorejs-angular/components/history/sd-history.md
@@ -20,7 +20,7 @@ Vertical timeline that renders a list of history/audit events — each with titl
 ## When NOT to use
 - For a list of records the user can act on → use a table / list component
 - For chat/messaging → use a dedicated chat thread component
-- For a chart of events over time → use `<sd-chart>` with a time axis
+- For a chart of events over time → use a chart library selected and installed by the consuming application
 - For a single most-recent event → just render plain text with a `<sd-badge>`
 
 ## Inputs
diff --git a/versions/v21/projects/sdcorejs-angular/components/index.ts b/versions/v21/projects/sdcorejs-angular/components/index.ts
index b5f5ba3b4..c938d0c73 100644
--- a/versions/v21/projects/sdcorejs-angular/components/index.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/index.ts
@@ -22,7 +22,6 @@ export * from '@sdcorejs/angular/components/import-excel';
 export * from '@sdcorejs/angular/components/mini-editor';
 export * from '@sdcorejs/angular/components/view';
 export * from '@sdcorejs/angular/components/code-editor';
-export * from '@sdcorejs/angular/components/chart';
 export * from '@sdcorejs/angular/components/editor';
 export * from '@sdcorejs/angular/components/splitter';
 export * from '@sdcorejs/angular/components/preview';
diff --git a/versions/v21/projects/sdcorejs-angular/components/modal/sd-modal.md b/versions/v21/projects/sdcorejs-angular/components/modal/sd-modal.md
index 7b2f22ae5..571ac1427 100644
--- a/versions/v21/projects/sdcorejs-angular/components/modal/sd-modal.md
+++ b/versions/v21/projects/sdcorejs-angular/components/modal/sd-modal.md
@@ -41,7 +41,7 @@ import { SdModal } from '@sdcorejs/angular/components/modal';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Dialog and bottom-sheet body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -101,4 +101,4 @@ The real dialog/bottom-sheet container is associated with its visible heading us
 
 ## Overlay presentation refresh
 
-Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Header/body/footer use aligned 24px horizontal insets (16px on narrow screens), 18px titles and 44px mobile action targets. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
+Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Dialog and bottom-sheet header/footer share 12px vertical padding, 16px horizontal insets and a white background (`--sd-white`, default `#fff`). Body content aligns to the 16px inset; titles remain 18px and mobile action targets remain 44px. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
diff --git a/versions/v21/projects/sdcorejs-angular/components/modal/src/modal.component.scss b/versions/v21/projects/sdcorejs-angular/components/modal/src/modal.component.scss
index 820b54dd8..73e50c93b 100644
--- a/versions/v21/projects/sdcorejs-angular/components/modal/src/modal.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/modal/src/modal.component.scss
@@ -66,8 +66,7 @@
 }
 
 .sd-modal-header {
-  min-height: 64px;
-  padding: 16px;
+  min-height: 56px;
   display: flex;
   align-items: center;
   gap: 16px;
@@ -175,7 +174,6 @@
 
 .sd-modal-footer {
   min-height: 56px;
-  padding: 16px;
   border-top: 1px solid var(--sd-modal-border);
   display: flex;
   align-items: center;
@@ -213,7 +211,8 @@
 .sd-modal-header,
 .sd-modal-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background: var(--sd-white, #fff);
 }
 .sd-modal-title {
   font-size: 18px;
@@ -222,17 +221,13 @@
   overflow-wrap: anywhere;
 }
 .sd-modal-body {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
   box-sizing: border-box;
 }
 @media (max-width: 600px) {
   .sd-modal-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-modal-body {
-    padding: 0 16px 16px;
-  }
   .sd-modal-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v21/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md b/versions/v21/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
index 092e98f86..881fbeffe 100644
--- a/versions/v21/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
+++ b/versions/v21/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
@@ -285,5 +285,6 @@ fields: SdQueryBuilderField[] = [
 ## Accessibility
 
 - The builder container is `role="group"` (a set of controls, not a widget) so it takes no tab stop of its own — Tab goes straight to the buttons and pickers inside.
-- "Click empty space to close open dropdowns" is a mouse-only affordance; **Escape** now does the same thing, so keyboard users can dismiss an open add-menu.
-- The add-menu dropdown is `role="group"` and swallows Enter as well as click, so activating a button inside it never reaches the container's "close all" handler.
+- The add-menu renders in a CDK connected overlay on the document body, so modal scroll regions, table cells and other ancestor overflow cannot clip its actions. It anchors to the group's `+` button, can flip above when space below is insufficient, and stays within the viewport.
+- Clicking the transparent backdrop or pressing **Escape** closes the menu. Escape is consumed before it reaches the surrounding modal; only the menu closes.
+- The add-menu is `role="group"` with two native buttons. Opening it focuses the first action, Tab stays within its actions, and closing it restores focus to the `+` trigger. `aria-expanded` on the trigger follows the menu state. Only one group's add-menu can be open at a time; adding a condition or group closes it.
diff --git a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
new file mode 100644
index 000000000..9a1793a27
--- /dev/null
+++ b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { LayoutTestTheme } from '../../../testing/layout-theme.spec';
+import { SdQueryBuilder } from './query-builder.component';
+import { SdQbGroup } from './query-builder.model';
+
+@Component({
+  imports: [SdQueryBuilder, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div data-clip style="position: relative; overflow: hidden; height: 90px; width: 500px; margin: 80px 24px">
+      <sd-query-builder [disabled]="disabled" />
+    </div>
+  `,
+})
+class ClippedBuilderHost {
+  disabled = false;
+}
+
+describe('SdQueryBuilder add-menu overlay', () => {
+  let fixture: ComponentFixture<ClippedBuilderHost>;
+  let builder: SdQueryBuilder;
+  let overlays: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedBuilderHost, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(ClippedBuilderHost);
+    fixture.detectChanges();
+    builder = fixture.debugElement.query(By.directive(SdQueryBuilder)).componentInstance;
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function open(index = 0): HTMLButtonElement {
+    const trigger = fixture.nativeElement.querySelectorAll('.qb-btn-add')[index] as HTMLButtonElement;
+    trigger.focus();
+    trigger.click();
+    fixture.detectChanges();
+    tick();
+    return trigger;
+  }
+
+  it('renders both actions outside the clipped container and keeps the lower action clickable', fakeAsync(() => {
+    open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const actions = menu.querySelectorAll('button');
+    expect(actions.length).toBe(2);
+    const lower = actions[1].getBoundingClientRect();
+    expect(lower.height).toBeGreaterThan(0);
+    expect(lower.bottom).toBeGreaterThan(fixture.nativeElement.querySelector('[data-clip]').getBoundingClientRect().bottom);
+    expect(actions[1].contains(document.elementFromPoint(lower.x + lower.width / 2, lower.y + lower.height / 2))).toBeTrue();
+    actions[1].click();
+    fixture.detectChanges();
+    tick();
+    expect(builder.tree().children[0].kind).toBe('group');
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+  }));
+
+  it('adds a condition to the selected nested group and allows only one open menu', fakeAsync(() => {
+    builder.addGroup(builder.tree());
+    fixture.detectChanges();
+    open(0);
+    builder.toggleDropdown(builder.tree().children[0] as SdQbGroup, new Event('click'));
+    fixture.detectChanges();
+    tick();
+    const menus = overlays.querySelectorAll('.qb-dropdown');
+    expect(menus.length).toBe(1);
+    if (!menus.length) return;
+    (menus[0].querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    expect((builder.tree().children[0] as SdQbGroup).children.length).toBe(2);
+    expect(builder.tree().children.length).toBe(1);
+  }));
+
+  it('closes on Escape without bubbling to the modal and restores focus to the trigger', fakeAsync(() => {
+    const trigger = open();
+    const action = overlays.querySelector('.qb-dropdown button') as HTMLButtonElement | null;
+    expect(action).not.toBeNull();
+    if (!action) return;
+    expect(document.activeElement).toBe(action);
+    const escaped = jasmine.createSpy('document escape');
+    document.addEventListener('keydown', escaped);
+    try {
+      action.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      fixture.detectChanges();
+      tick();
+      expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+      expect(document.activeElement).toBe(trigger);
+      expect(escaped).not.toHaveBeenCalled();
+    } finally {
+      document.removeEventListener('keydown', escaped);
+    }
+  }));
+
+  it('closes on backdrop click and removes the overlay when disabled or destroyed', fakeAsync(() => {
+    open();
+    const backdrop = overlays.querySelector('.cdk-overlay-backdrop') as HTMLElement | null;
+    expect(backdrop).not.toBeNull();
+    if (!backdrop) return;
+    backdrop.click();
+    fixture.detectChanges();
+    tick(500);
+    expect(builder.tree().open).toBeFalse();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    expect(builder.tree().open).toBeFalse();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.destroy();
+    flush();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips above the trigger near the bottom of the viewport', fakeAsync(() => {
+    const clip = fixture.nativeElement.querySelector('[data-clip]') as HTMLElement;
+    Object.assign(clip.style, { position: 'fixed', bottom: '0', margin: '0' });
+    const trigger = open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const rect = menu.getBoundingClientRect();
+    expect(rect.bottom).toBeLessThanOrEqual(trigger.getBoundingClientRect().top);
+    expect(rect.top).toBeGreaterThanOrEqual(8);
+  }));
+});
diff --git a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
index 7fcbbbf57..977263a0b 100644
--- a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
@@ -25,26 +25,39 @@
 <!-- Recursive group node -->
 <ng-template #groupTpl let-group let-isRoot="isRoot" let-parent="parent" let-index="index">
   @let _removeGroupLabel = removeGroupLabel();
+  @let _addNodeLabel = addNodeLabel();
+  @let _disabled = resolvedDisabled();
   <div class="qb-group" [class.is-root]="isRoot">
-    <div class="qb-header" [class.is-open]="group.open">
+    <div class="qb-header">
       <div class="qb-logic-switch">
-        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'AND')">AND</button>
-        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'OR')">OR</button>
+        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="_disabled" (click)="setGroupLogic(group, 'AND')">AND</button>
+        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="_disabled" (click)="setGroupLogic(group, 'OR')">OR</button>
       </div>
 
       <div class="qb-actions">
-        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="addNodeLabel()" [disabled]="resolvedDisabled()" (click)="toggleDropdown(group, $event)">+</button>
-        @if (group.open) {
-          <!-- why: dropdown là NHÓM hai nút (role="group"), không phải nút — không nhận tabindex,
-               tab đi thẳng vào hai nút. stopPropagation cho cả click lẫn Enter để thao tác bên
-               trong dropdown không kích hoạt handler "đóng tất cả" của container. -->
-          <div class="qb-dropdown" role="group" (click)="$event.stopPropagation()" (keydown.enter)="$event.stopPropagation()">
+        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="_addNodeLabel" [disabled]="_disabled"
+          cdkOverlayOrigin #addOrigin="cdkOverlayOrigin" [attr.aria-expanded]="!!group.open && !_disabled"
+          (click)="toggleDropdown(group, $event)">+</button>
+        <!-- why: overlay nằm ngoài ancestor overflow; focus trap trả focus về nút + khi đóng. -->
+        <ng-template cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="addOrigin"
+          [cdkConnectedOverlayOpen]="!!group.open && !_disabled"
+          [cdkConnectedOverlayPositions]="addMenuPositions"
+          [cdkConnectedOverlayViewportMargin]="8"
+          [cdkConnectedOverlayFlexibleDimensions]="false"
+          [cdkConnectedOverlayPush]="true"
+          [cdkConnectedOverlayHasBackdrop]="true"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+          (backdropClick)="closeAllDropdowns()"
+          (overlayKeydown)="onAddMenuKeydown($event)">
+          <div class="qb-dropdown" role="group" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" [attr.aria-label]="_addNodeLabel">
             <button type="button" (click)="addRule(group)">+ {{ conditionLabel() }}</button>
             <button type="button" (click)="addGroup(group)">+ {{ groupLabel() }}</button>
           </div>
-        }
+        </ng-template>
         @if (!isRoot) {
-          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="resolvedDisabled()" (click)="removeNode(parent, index)">✕</button>
+          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="_disabled" (click)="removeNode(parent, index)">✕</button>
         }
       </div>
     </div>
diff --git a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
index 3025f6831..e631045ce 100644
--- a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
@@ -87,9 +87,6 @@ $node-gap: 12px;
   position: relative;
   z-index: 1;
 
-  &.is-open {
-    z-index: 1000;
-  }
 }
 
 // AND / OR segmented toggle — active side uses primary.
@@ -167,16 +164,11 @@ $node-gap: 12px;
 }
 
 .qb-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
   background: #fff;
   border: 1px solid $border;
   box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
   border-radius: 6px;
   min-width: 150px;
-  z-index: 100;
   overflow: hidden;
 
   button {
diff --git a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
index b8957417f..c90472925 100644
--- a/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
@@ -1,4 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -70,12 +72,31 @@ const QB_EMPTY_FIELDS: SdQueryBuilderField[] = [];
   selector: 'sd-query-builder',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, NgTemplateOutlet, SdOperator, SdSelect, SdInput, SdInputNumber, SdDate, SdDatetime, SdItemDefDefDirective],
+  imports: [
+    SdIcon,
+    NgTemplateOutlet,
+    SdOperator,
+    SdSelect,
+    SdInput,
+    SdInputNumber,
+    SdDate,
+    SdDatetime,
+    SdItemDefDefDirective,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    CdkTrapFocus,
+  ],
   templateUrl: './query-builder.component.html',
   styleUrl: './query-builder.component.scss',
 })
 export class SdQueryBuilder {
   readonly #i18n = inject(I18nService);
+  protected readonly addMenuPositions: ConnectedPosition[] = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  ];
 
   // -------------------------------------------------------------------------
   // Inputs
@@ -232,6 +253,11 @@ export class SdQueryBuilder {
   readonly fieldIcon = sdQbFieldIcon;
 
   constructor() {
+    effect(() => {
+      if (this.resolvedDisabled() || this.isView()) {
+        untracked(() => this.closeAllDropdowns());
+      }
+    });
     // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
     // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
     effect(() => {
@@ -311,6 +337,13 @@ export class SdQueryBuilder {
     this.#bumpTree();
   }
 
+  protected onAddMenuKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeAllDropdowns();
+  }
+
   #hasOpenDropdown(node: SdQbNode): boolean {
     if (!sdIsQbGroup(node)) return false;
     return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
diff --git a/versions/v21/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md b/versions/v21/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
index 0344e62c9..e2d011c0f 100644
--- a/versions/v21/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
+++ b/versions/v21/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
@@ -37,7 +37,7 @@ import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -88,7 +88,7 @@ Do not write `document.body.style.overflow` yourself while a drawer is open; the
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: 0; // The drawer supplies the content insets.
 }
 ```
 
@@ -105,4 +105,4 @@ Each open creates a CDK focus trap around the drawer content. Focus moves inside
 
 Opening makes the drawer visible immediately so focus can enter before the slide/fade animation finishes. Closing delays the hidden state until that animation completes. Reduced motion removes these transitions.
 
-The default radius is 8px, overridable through --sd-overlay-radius. Header/body/footer align at 24px horizontally (16px below 600px); the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
+The default radius is 8px, overridable through --sd-overlay-radius. Header/footer use 12px vertical padding and header/body/footer align at 16px horizontally; the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
diff --git a/versions/v21/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss b/versions/v21/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
index 1c1ea5c49..603a8d8cb 100644
--- a/versions/v21/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
@@ -37,8 +37,7 @@
   }
 
   &-header {
-    min-height: 64px;
-    padding: 16px;
+    min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -131,8 +130,6 @@
 
   &-footer {
     border-top: 1px solid var(--sd-side-drawer-border);
-    padding: 16px;
-    background-color: var(--sd-side-drawer-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -197,22 +194,19 @@
 .sd-side-drawer-header,
 .sd-side-drawer-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background-color: var(--sd-white, #fff);
 }
 .sd-side-drawer-content {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
 }
 @media (max-width: 600px) {
   .sd-side-drawer {
     --sd-side-drawer-inset: 8px;
   }
   .sd-side-drawer-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-side-drawer-content {
-    padding: 0 16px 16px;
-  }
   .sd-side-drawer-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v21/projects/sdcorejs-angular/components/tab/sd-tab.md b/versions/v21/projects/sdcorejs-angular/components/tab/sd-tab.md
index 918663850..5d4a9439f 100644
--- a/versions/v21/projects/sdcorejs-angular/components/tab/sd-tab.md
+++ b/versions/v21/projects/sdcorejs-angular/components/tab/sd-tab.md
@@ -34,7 +34,7 @@ Declarative tab container that wraps Angular Material's `mat-tab-group` with a s
 | Name                | Type                                                                                  | Default     | Notes                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `selectedIndex`     | `number` (model — two-way)                                                            | `0`         | Index of the active tab. Two-way bindable via `[(selectedIndex)]`. Auto-clamped to `[0, tabs.length-1]` when the tab count shrinks.                                                                                                                                                                                                                           |
-| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a single bordered container with flush tabs (iOS segmented-control style). |
+| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a shared container with a 4px gap between tabs (iOS segmented-control style). Hover/ripple layers follow each tab's rounded shape; active pills retain their filled color on hover. |
 | `color`             | `Color` (`'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'`) | `'primary'` | Drives the active-tab + indicator + badge colors via the Core CSS vars (`--sd-<color>`, `--sd-<color>-light`). Same palette as `<sd-button>`, `<sd-badge>` — pick `'warning'` for filter bars surfacing pending items, `'success'` for confirmed flows, etc.                                                                                                  |
 | `headerPosition`    | `'above' \| 'below'`                                                                  | `'above'`   | Forwarded to `mat-tab-group.headerPosition`.                                                                                                                                                                                                                                                                                                                  |
 | `alignTabs`         | `'start' \| 'center' \| 'end'`                                                        | `'start'`   | Forwarded to `mat-tab-group`'s `[mat-align-tabs]` input. **Only takes effect when `stretchTabs` is `false`** — otherwise tabs fill the row evenly and there's nothing to align.                                                                                                                                                                               |
diff --git a/versions/v21/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss b/versions/v21/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
index 7179666c2..b2949f7ca 100644
--- a/versions/v21/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
@@ -102,6 +102,14 @@
   opacity: 0 !important;
 }
 
+// Material renders hover and click ripples in a separate rectangular layer.
+// Clip that layer to the tab shape without clipping the label's focus indicator.
+:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple,
+:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
 // =============================================================================
 // Variant: pills — rounded pill tabs, active filled with primary.
 // Good for nested tab groups, filter bars, light contexts.
@@ -132,7 +140,7 @@
     background: transparent;
     transition: background-color 120ms ease, color 120ms ease;
 
-    &:hover:not(.mat-mdc-tab-disabled) {
+    &:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active) {
       background: var(--sd-tab-badge-bg);
     }
 
@@ -143,12 +151,6 @@
       background: var(--sd-tab-label-active-color);
       .mdc-tab__text-label { color: #ffffff; }
     }
-
-    // why: active pill darken on hover instead of the default whitish state-layer.
-    // box-shadow inset > filter because filter would dim text + icons too.
-    &.mdc-tab--active:hover:not(.mat-mdc-tab-disabled) {
-      box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
-    }
   }
 
   // Inside the pill we still allow the sd-tab__label inline-flex with icon/badge/close.
@@ -166,7 +168,7 @@
 }
 
 // =============================================================================
-// Variant: segmented — single bordered container, tabs sit flush.
+// Variant: segmented — shared container with a small gap between tabs.
 // iOS-style segmented control.
 // =============================================================================
 :host(.sd-tab-group--segmented) ::ng-deep {
@@ -185,7 +187,7 @@
     padding: 3px;
   }
 
-  .mat-mdc-tab-labels { gap: 0; }
+  .mat-mdc-tab-labels { gap: 4px; }
 
   .mat-mdc-tab {
     min-width: 0;
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/sd-table.md b/versions/v21/projects/sdcorejs-angular/components/table/sd-table.md
index eee0bf1bc..bd8134c44 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/sd-table.md
+++ b/versions/v21/projects/sdcorejs-angular/components/table/sd-table.md
@@ -401,9 +401,11 @@ Client-side matching sống ở `matchesColumnFilter` (`services/table-local/tab
 
 Command icons default to Material Symbols Outlined (`material-icons-outlined`). Child command menu items use the same default unless `child.fontSet` is provided. Use icon + title for child commands so menu rows align consistently.
 
+Desktop command `children`, selection action `children` and the selection toolbar More menu use a compact CDK overlay menu: white background, 8px corners, 36px minimum rows, 18px icons and a 4px gap from the trigger. Touch/narrow-screen menu rows remain at least 44px. Menus escape clipped table cells, support arrow-key/typeahead navigation and restore trigger focus on Escape or selection. Existing child visibility, disabled state, custom HTML and callbacks remain supported; no consumer configuration changes are required.
+
 Desktop row commands keep their touch targets within each 24px button so adjacent actions and menu triggers remain independently clickable. Mobile action controls retain their existing sizing.
 
-Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Child menu items retain Material's disabled opacity.
+Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Disabled child menu items are muted and cannot be activated.
 
 ```ts
 command: {
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
new file mode 100644
index 000000000..0a0a9bbc5
--- /dev/null
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -0,0 +1,67 @@
+.sd-table-action-menu {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(360px, calc(100dvh - 16px));
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--sd-border, #dde0e5);
+  border-radius: 8px;
+  background: var(--sd-white, #fff);
+  color: var(--sd-text, #1a1b1f);
+  box-shadow:
+    0 4px 12px rgba(15, 23, 42, 0.14),
+    0 1px 3px rgba(15, 23, 42, 0.1);
+
+  [cdkMenuItem] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: start;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      background: var(--sd-black100, #f3f3f3);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sd-primary, #005cbb);
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+  }
+
+  .sd-table-action-menu__icon {
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+
+@media (max-width: 600px), (pointer: coarse) {
+  .sd-table-action-menu [cdkMenuItem] {
+    min-height: 44px;
+  }
+}
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
new file mode 100644
index 000000000..7cfd448fc
--- /dev/null
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
@@ -0,0 +1,67 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { Directive, ElementRef, afterRenderEffect, inject, DestroyRef, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SdButton } from '@sdcorejs/angular/components/button';
+
+export const TABLE_ACTION_MENU_POSITIONS: ConnectedPosition[] = [
+  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+  { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+];
+
+// why: CDK gắn trên host sd-button, nhưng focus/ARIA và Enter/Space phải thuộc nút HTML bên trong.
+@Directive({
+  selector: 'sd-button[sdTableMenuButton]',
+  standalone: true,
+  hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: sdTableMenuButton'] }],
+})
+export class SdTableMenuButtonDirective {
+  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  readonly #trigger = inject(CdkMenuTrigger);
+  readonly #sdButton = inject(SdButton);
+  readonly #opened = signal(false);
+  #button?: HTMLButtonElement;
+
+  constructor() {
+    this.#trigger.menuPosition = TABLE_ACTION_MENU_POSITIONS;
+    const destroyRef = inject(DestroyRef);
+    this.#trigger.opened.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => this.#opened.set(true));
+    this.#trigger.closed.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+      this.#opened.set(false);
+      if (this.#button?.isConnected && this.#trigger.getMenu()?.nativeElement.contains(this.#host.ownerDocument.activeElement)) {
+        this.#button.focus();
+      }
+    });
+    afterRenderEffect(() => {
+      this.#sdButton.type();
+      this.#opened();
+      this.#syncButton();
+    });
+    destroyRef.onDestroy(() => this.#button?.removeEventListener('keydown', this.#nativeActivation, true));
+  }
+
+  readonly #nativeActivation = (event: KeyboardEvent): void => {
+    // why: để nút native tự phát click đúng một lần, không cho CDK toggle thêm ở keydown của host.
+    if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+  };
+
+  #syncButton(): void {
+    const button = this.#host.querySelector('button') ?? undefined;
+    if (button !== this.#button) {
+      this.#button?.removeEventListener('keydown', this.#nativeActivation, true);
+      this.#button = button;
+      button?.addEventListener('keydown', this.#nativeActivation, true);
+    }
+    button?.setAttribute('aria-haspopup', 'menu');
+    button?.setAttribute('aria-expanded', String(this.#trigger.isOpen()));
+    const menuId = this.#trigger.getMenu()?.nativeElement.id;
+    if (menuId) button?.setAttribute('aria-controls', menuId);
+    else button?.removeAttribute('aria-controls');
+    this.#host.removeAttribute('role');
+    this.#host.removeAttribute('aria-haspopup');
+    this.#host.removeAttribute('aria-expanded');
+    this.#host.removeAttribute('aria-controls');
+  }
+}
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 38cfbc7b3..9ed43877f 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -24,7 +24,9 @@
       <button
         type="button"
         [attr.data-autoid]="_autoId + '-' + command.key"
-        [matMenuTriggerFor]="menu"
+        [cdkMenuTriggerFor]="menu"
+        [cdkMenuPosition]="menuPositions"
+        [disabled]="_meta.disabled"
         [attr.aria-label]="_meta.title"
         aria-haspopup="menu"
         mat-icon-button>
@@ -34,29 +36,41 @@
           <sd-icon class="c-icon" [fontSet]="command.fontSet" name="more_vert"></sd-icon>
         }
       </button>
-      <mat-menu #menu="matMenu" [attr.data-autoid]="_autoId + '-' + command.key + '-menu'">
-        <span>
+      <ng-template #menu>
+        <div
+          cdkMenu
+          tabindex="-1"
+          class="sd-table-action-menu"
+          [attr.aria-label]="_meta.title"
+          [attr.data-autoid]="_autoId + '-' + command.key + '-menu'"
+          (keydown.escape)="$event.stopPropagation()">
           @for (childCommand of command.children; track childCommand.key) {
             @let _childMeta = _item | command: childCommand;
             <button
               [attr.data-autoid]="_autoId + '-' + command.key + '-' + childCommand.key"
-              mat-menu-item
-              (click)="childCommand.click(_item.data)"
+              type="button"
+              cdkMenuItem
+              [cdkMenuItemDisabled]="_childMeta.disabled"
+              [cdkMenuitemTypeaheadLabel]="_childMeta.title"
+              [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
               [disabled]="_childMeta.disabled">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
                 <span class="sd-command-menu-item__content">
-                  <sd-icon class="sd-command-menu-item__icon"
+                  <sd-icon
+                    class="sd-table-action-menu__icon"
                     [color]="childCommand.color || 'secondary'"
-                    [fontSet]="childCommand.fontSet" [name]="_childMeta.icon"></sd-icon>
+                    [fontSet]="childCommand.fontSet"
+                    [name]="_childMeta.icon"></sd-icon>
                   <span class="sd-command-menu-item__title">{{ _childMeta.title }}</span>
                 </span>
               }
             </button>
           }
-        </span>
-      </mat-menu>
+        </div>
+      </ng-template>
     }
   }
 }
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
index c90841d55..fe78277aa 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../../assets/scss/core/color.scss' as color;
 @use 'sass:map';
+@use '../action-menu/action-menu';
 
 :host {
   display: flex;
@@ -42,20 +43,8 @@ button[mat-icon-button]:disabled sd-icon.c-icon {
   width: 100%;
 }
 
-// why: `margin-right: 0 !important` ở đây từng để chặn margin Material gắn vào `.mat-icon` trong
-// mat-menu. sd-icon đã trung hoà ở component nên bỏ được; khoảng cách với nhãn là `gap` của
-// .sd-command-menu-item__content.
-.sd-command-menu-item__icon {
-  color: map.get(color.$color_map, 'text-secondary') !important;
-  width: 24px;
-  height: 24px;
-  font-size: 18px;
-  line-height: 24px !important;
-  flex: 0 0 24px;
-}
-
 .sd-command-menu-item__title {
   min-width: 0;
   line-height: 20px;
-  white-space: nowrap;
+  white-space: normal;
 }
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 79a9b04b1..03e5eff62 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -54,7 +54,7 @@ describe('DesktopCommand', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const menu = document.body.querySelector('.mat-mdc-menu-panel') as HTMLElement;
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     const content = menu.querySelector('.sd-command-menu-item__content') as HTMLElement;
     const icon = menu.querySelector('mat-icon') as HTMLElement;
     const title = menu.querySelector('.sd-command-menu-item__title') as HTMLElement;
@@ -62,6 +62,71 @@ describe('DesktopCommand', () => {
     expect(content).not.toBeNull();
     expect(icon.classList).toContain('material-icons-outlined');
     expect(title.textContent?.trim()).toBe('Edit');
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(menu.querySelector('button')!.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+  });
+
+  it('keeps hidden/disabled child rules and restores the command trigger after Escape', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    fixture.componentInstance.commands = [
+      {
+        title: 'More',
+        children: [
+          { title: 'Hidden', hidden: async () => true, click: clicked },
+          { title: 'Disabled', disabled: true, click: clicked },
+          { title: 'Allowed', click: clicked },
+        ],
+      },
+    ];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.textContent).not.toContain('Hidden');
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    items[0].click();
+    expect(clicked).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(items[1]);
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
+    items[1].dispatchEvent(escape);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('renders outside a clipped row and invokes the child once with its row data', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    Object.assign(fixture.nativeElement.style, {
+      position: 'fixed',
+      top: '32px',
+      left: '32px',
+      width: '80px',
+      height: '24px',
+      overflow: 'hidden',
+    });
+    fixture.componentInstance.commands = [{ title: 'More', children: [{ title: 'Run', click: clicked }] }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(fixture.nativeElement.contains(menu)).toBeFalse();
+    const item = menu.querySelector('button')!;
+    const bounds = item.getBoundingClientRect();
+    expect(document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2)?.closest('button')).toBe(item);
+    item.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(clicked).toHaveBeenCalledOnceWith(fixture.componentInstance.item.data);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
   });
 
   // why: hai nút command từng mang aria-hidden="true" — chúng là <button> THẬT, vẫn nhận tab focus
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
index 803bb0976..feab3cae1 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { TABLE_ACTION_MENU_POSITIONS } from '../action-menu/action-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdTableCommand } from '../../models/table-command.model';
 import { SdTableItem } from '../../models/table-item.model';
@@ -18,9 +19,10 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   host: {
     '[attr.data-autoid]': 'autoId()',
   },
-  imports: [SdIcon, CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, CommandPipe, CommandFilterPipe],
+  imports: [SdIcon, CommonModule, MatTooltipModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, MatButtonModule, CommandPipe, CommandFilterPipe],
 })
 export class DesktopCommand {
+  readonly menuPositions = TABLE_ACTION_MENU_POSITIONS;
   readonly autoIdInput = input<string | null | undefined>(undefined, { alias: 'autoId' });
   readonly item = input.required<SdTableItem>();
   readonly itemIndex = input.required<number>();
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
index 50634c03e..5706edc7a 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
@@ -58,6 +58,54 @@ describe('Table selection toolbar layout and overflow', () => {
     expect(clear).toHaveBeenCalledTimes(1);
   });
 
+  it('opens compact child actions from the native button and returns focus after Escape', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(menu.id);
+    const first = menu.querySelector('button')!;
+    expect(first.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+    expect(document.activeElement).toBe(first);
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]')).toBeNull();
+  });
+
+  it('dismisses child actions after running them and removes an open menu when selection clears', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const overlay = TestBed.inject(OverlayContainer).getContainerElement();
+    overlay.querySelector<HTMLButtonElement>('button')!.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(callbacks[2]).toHaveBeenCalledOnceWith([{ id: 1 }, { id: 2 }]);
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+    // SdButton throttles repeated pointer clicks; ArrowDown opens immediately.
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeTruthy();
+    fixture.componentRef.setInput('selectedTableItems', []);
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+  });
+
   it('keeps grouped overflow actions and excludes children unavailable to one selected row', () => {
     const group = { title: 'Reports', children: actions.slice(2) };
     fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [...actions.slice(0, 2), group] } });
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
index af44d23c9..93ebca5d3 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
@@ -1,4 +1,5 @@
 @let _autoId = autoId();
+@let _moreLabel = moreLabel();
 @let _direct = directActions();
 @let _overflow = overflowActions();
 @if (opened()) {
@@ -33,21 +34,30 @@
             [type]="action.type || 'light'"
             [fontSet]="action.fontSet"
             [title]="action.title"
-            [matMenuTriggerFor]="childrenMenu" />
-          <mat-menu #childrenMenu="matMenu">
-            @for (child of action.children; track $index) {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                (click)="onClickAction(child)">
-                @if (child.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                }
-                <span>{{ child.title }}</span>
-              </button>
-            }
-          </mat-menu>
+            [sdTableMenuButton]="childrenMenu" />
+          <ng-template #childrenMenu>
+            <div
+              cdkMenu
+              tabindex="-1"
+              class="sd-table-action-menu"
+              [attr.aria-label]="action.title || _moreLabel"
+              (keydown.escape)="$event.stopPropagation()">
+              @for (child of action.children; track $index) {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                  [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                  [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(child)">
+                  @if (child.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                  }
+                  <span>{{ child.title }}</span>
+                </button>
+              }
+            </div>
+          </ng-template>
         }
       }
       @if (_overflow.length) {
@@ -55,44 +65,55 @@
           class="sd-selection-more"
           size="sm"
           prefixIcon="more_horiz"
-          [title]="moreLabel()"
+          [title]="_moreLabel"
           color="secondary"
           type="light"
           [autoId]="_autoId ? _autoId + '-more-actions' : null"
-          [matMenuTriggerFor]="moreMenu" />
-        <mat-menu #moreMenu="matMenu">
-          @for (entry of _overflow; track entry.index) {
-            @let action = entry.action;
-            @if (action.variant === 'normal') {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
-                (click)="onClickAction(action)">
-                @if (action.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
-                }
-                <span>{{ action.title }}</span>
-              </button>
-            } @else {
-              <div role="group" [attr.aria-label]="action.title">
-                <div class="sd-selection-menu-heading">{{ action.title }}</div>
-                @for (child of action.children; track $index) {
-                  <button
-                    mat-menu-item
-                    type="button"
-                    [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                    (click)="onClickAction(child)">
-                    @if (child.icon) {
-                      <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                    }
-                    <span>{{ child.title }}</span>
-                  </button>
-                }
-              </div>
+          [sdTableMenuButton]="moreMenu" />
+        <ng-template #moreMenu>
+          <div
+            cdkMenu
+            tabindex="-1"
+            class="sd-table-action-menu"
+            [attr.aria-label]="_moreLabel"
+            (keydown.escape)="$event.stopPropagation()">
+            @for (entry of _overflow; track entry.index) {
+              @let action = entry.action;
+              @if (action.variant === 'normal') {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
+                  [cdkMenuitemTypeaheadLabel]="action.title || ''"
+                  [style.color]="action.color ? 'var(--sd-' + action.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(action)">
+                  @if (action.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
+                  }
+                  <span>{{ action.title }}</span>
+                </button>
+              } @else {
+                <div role="group" [attr.aria-label]="action.title">
+                  <div class="sd-selection-menu-heading">{{ action.title }}</div>
+                  @for (child of action.children; track $index) {
+                    <button
+                      cdkMenuItem
+                      type="button"
+                      [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                      [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                      [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                      (cdkMenuItemTriggered)="onClickAction(child)">
+                      @if (child.icon) {
+                        <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                      }
+                      <span>{{ child.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
             }
-          }
-        </mat-menu>
+          </div>
+        </ng-template>
       }
       <button
         type="button"
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
index a2dcbfda0..60c0d0791 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
@@ -1,3 +1,5 @@
+@use '../action-menu/action-menu';
+
 :host {
   display: block;
   flex-shrink: 0;
@@ -61,12 +63,8 @@
     font-size: 18px;
   }
 }
-.sd-selection-menu-icon {
-  margin-right: 12px;
-  vertical-align: middle;
-}
 .sd-selection-menu-heading {
-  padding: 8px 16px 4px;
+  padding: 6px 12px 4px;
   color: var(--sd-text-secondary, #62676d);
   font-size: 12px;
   font-weight: 600;
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
index 58819c6cd..7c3edccec 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { SdTableMenuButtonDirective } from '../action-menu/action-menu';
 import { SdButton } from '@sdcorejs/angular/components/button';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
@@ -13,7 +14,7 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   templateUrl: './selector-action.component.html',
   styleUrl: './selector-action.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, MatMenuModule, SdButton, SdQuickAction],
+  imports: [SdIcon, CdkMenu, CdkMenuItem, SdTableMenuButtonDirective, SdButton, SdQuickAction],
 })
 export class SelectorActionComponent {
   // ==========================================
diff --git a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
new file mode 100644
index 000000000..eadd9b4e2
--- /dev/null
+++ b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
@@ -0,0 +1,96 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { BrowserUtilities } from '@sdcorejs/utils/fns';
+import { LayoutTestTheme } from '../../testing/layout-theme.spec';
+import { SdHoverCopyDirective } from './sd-hover-copy.directive';
+
+@Component({
+  imports: [SdHoverCopyDirective, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div style="overflow: hidden; width: 260px; margin: 80px 24px">
+      <table style="width: 100%; border-collapse: separate">
+        <tr style="position: relative; z-index: 20; background: white">
+          <td style="height: 40px">Previous row</td>
+        </tr>
+        <tr>
+          <td style="height: 40px; overflow: hidden" sdHoverCopy="cell-value" [sdHoverCopyDisabled]="disabled">Cell value</td>
+        </tr>
+      </table>
+    </div>
+  `,
+})
+class ClippedCopyHost {
+  disabled = false;
+}
+
+describe('SdHoverCopy overlay in table cells', () => {
+  let fixture: ComponentFixture<ClippedCopyHost>;
+  let overlays: HTMLElement;
+  let cell: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedCopyHost] });
+    spyOn(BrowserUtilities, 'copyToClipboard');
+    fixture = TestBed.createComponent(ClippedCopyHost);
+    fixture.detectChanges();
+    cell = fixture.nativeElement.querySelector('[sdHoverCopy]');
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function copy() {
+    cell.dispatchEvent(new MouseEvent('mouseenter'));
+    (cell.querySelector('button:last-of-type') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    tick();
+  }
+
+  it('paints the copied tooltip above adjacent rows outside the clipped cell', fakeAsync(() => {
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]') as HTMLElement | null;
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.height).toBeGreaterThan(0);
+    expect(getComputedStyle(tooltip.closest('.cdk-overlay-pane')!).pointerEvents).toBe('none');
+    expect(rect.top).toBeLessThan(cell.getBoundingClientRect().top);
+    // why: tooltip intentionally ignores pointer events; enable hit testing only for the paint-order probe.
+    tooltip.style.pointerEvents = 'auto';
+    expect(tooltip.contains(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2))).toBeTrue();
+    tooltip.style.pointerEvents = 'none';
+    tick(1000);
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+  }));
+
+  it('keeps one button and cleans up the overlay on scroll, disable and destroy', fakeAsync(() => {
+    expect(cell.querySelectorAll('button').length).toBe(1);
+    copy();
+    cell.parentElement!.dispatchEvent(new Event('scroll'));
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+    copy();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(cell.querySelector('button')).toBeNull();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    copy();
+    fixture.destroy();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips below the button when the cell is at the top of the viewport', fakeAsync(() => {
+    const table = cell.closest('table')!;
+    Object.assign(table.parentElement!.style, { position: 'fixed', top: '0', margin: '0' });
+    table.rows[0].style.display = 'none';
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.top).toBeGreaterThanOrEqual(cell.querySelector('button')!.getBoundingClientRect().bottom);
+    expect(rect.left).toBeGreaterThanOrEqual(8);
+    fixture.destroy();
+  }));
+});
diff --git a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
index 003fd69b6..8b0da141e 100644
--- a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
@@ -1,18 +1,9 @@
-/**
- * SdHoverCopyDirective spec
- *
- * Note: the directive creates its copy button both in `ngOnChanges` (for the
- * initial-value change on the `sdHoverCopyDisabled` input) and again in
- * `ngOnInit`.  The directive's internal `#copyButton` reference always points
- * to the LAST button created (the one from `ngOnInit`).  Tests that care about
- * the button managed by the directive use `getDirectiveButton()` which finds
- * the element whose listener and style are wired to `#copyButton`.
- */
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { SdHoverCopyDirective } from './sd-hover-copy.directive';
 
 @Component({
@@ -47,19 +38,13 @@ describe('SdHoverCopyDirective', () => {
     directiveInstance = fixture.debugElement.query(By.directive(SdHoverCopyDirective)).injector.get(SdHoverCopyDirective);
   });
 
-  /**
-   * The directive keeps `#copyButton` as its last-created button.
-   * `querySelectorAll('button')` returns all buttons; the directive manages the
-   * LAST one appended (ngOnInit fires after ngOnChanges creates the first).
-   */
   function getDirectiveButton(): HTMLElement | null {
-    const all = hostEl.querySelectorAll('button');
-    return all.length ? (all[all.length - 1] as HTMLElement) : null;
+    return hostEl.querySelector('button');
   }
 
   function getTooltip(): HTMLElement | null {
     const btn = getDirectiveButton();
-    return btn ? (btn.querySelector('span') as HTMLElement) : null;
+    return btn?.querySelector('span') ?? TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="tooltip"]');
   }
 
   // ─── creation ────────────────────────────────────────────────────────────────
@@ -69,8 +54,8 @@ describe('SdHoverCopyDirective', () => {
       expect(host).toBeTruthy();
     });
 
-    it('appends at least one copy button inside the host element on init', () => {
-      expect(hostEl.querySelector('button')).not.toBeNull();
+    it('appends exactly one copy button inside the host element on init', () => {
+      expect(hostEl.querySelectorAll('button').length).toBe(1);
     });
 
     it('sets host element position to relative', () => {
diff --git a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
index ca6cc7e17..83ca46159 100644
--- a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
+++ b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
@@ -1,4 +1,7 @@
 import { DestroyRef, Directive, ElementRef, inject, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges, input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { DomPortal } from '@angular/cdk/portal';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
 
@@ -14,9 +17,14 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
   readonly #i18n = inject(I18nService);
   readonly #destroyRef = inject(DestroyRef);
+  readonly #overlay = inject(Overlay);
+  readonly #document = inject(DOCUMENT);
 
   #copyButton: HTMLElement | null = null;
   #tooltip!: HTMLElement;
+  #tooltipOverlay: OverlayRef | null = null;
+  #unlistenCopy: (() => void) | null = null;
+  readonly #onScroll = () => this.#hideTooltip();
   #hideTooltipTimer: ReturnType<typeof setTimeout> | null = null;
   get #defaultTooltip(): string {
     return this.#i18n.t('core.directive.hover-copy.tooltip');
@@ -34,7 +42,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     // why: timeout 1s ẩn tooltip trước đây không được lưu lại cũng không huỷ, mà directive lại
     // không có teardown nào. Host bị destroy trong vòng 1s đó thì callback vẫn chạy và ghi style
     // lên node đã tháo khỏi DOM (timer sống lâu hơn view).
-    this.#destroyRef.onDestroy(() => this.#clearHideTooltipTimer());
+    this.#destroyRef.onDestroy(() => this.#removeCopyButton());
   }
 
   // https://onemount.atlassian.net/browse/SM-2287
@@ -61,6 +69,8 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #createAndAppendCopyButton(): void {
+    // why: ngOnChanges có thể tạo nút trước ngOnInit; chỉ giữ một nút và một overlay owner.
+    if (this.#copyButton) return;
     const parent = this.el.nativeElement;
     this.renderer.setStyle(parent, 'position', 'relative');
 
@@ -102,12 +112,9 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
     // Tooltip
     this.#tooltip = this.renderer.createElement('span');
+    this.renderer.setAttribute(this.#tooltip, 'role', 'tooltip');
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
-    this.renderer.setStyle(this.#tooltip, 'position', 'absolute');
-    this.renderer.setStyle(this.#tooltip, 'bottom', '100%');
-    this.renderer.setStyle(this.#tooltip, 'left', '50%');
-    this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');
-    this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
     this.renderer.setStyle(this.#tooltip, 'background', '#333');
     this.renderer.setStyle(this.#tooltip, 'color', '#fff');
     this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');
@@ -123,7 +130,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     this.renderer.appendChild(parent, this.#copyButton);
 
     // Listen click
-    this.renderer.listen(this.#copyButton, 'click', () => {
+    this.#unlistenCopy = this.renderer.listen(this.#copyButton, 'click', () => {
       const copyText = this.copyText();
       if (copyText && !this.sdHoverCopyDisabled()) {
         BrowserUtilities.copyToClipboard(String(copyText));
@@ -144,8 +151,12 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #removeCopyButton(): void {
-    // why: tooltip nằm trong button — bỏ button mà để timer chạy tiếp là ghi style lên node đã gỡ.
     this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.dispose();
+    this.#tooltipOverlay = null;
+    this.#unlistenCopy?.();
+    this.#unlistenCopy = null;
     if (this.#copyButton) {
       this.renderer.removeChild(this.el.nativeElement, this.#copyButton);
       this.#copyButton = null;
@@ -153,13 +164,41 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #showTooltip(message: string) {
+    if (!this.#copyButton) return;
+    if (!this.#tooltipOverlay) {
+      // why: portal thoát khỏi overflow/stacking context của table cell và modal body.
+      this.#tooltipOverlay = this.#overlay.create({
+        positionStrategy: this.#overlay
+          .position()
+          .flexibleConnectedTo(this.#copyButton)
+          .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+          ])
+          .withFlexibleDimensions(false)
+          .withViewportMargin(8)
+          .withPush(true),
+      });
+    }
     this.renderer.setProperty(this.#tooltip, 'innerText', message);
+    this.renderer.setStyle(this.#tooltip, 'display', 'block');
     this.renderer.setStyle(this.#tooltip, 'opacity', '1');
+    if (!this.#tooltipOverlay.hasAttached()) {
+      this.#tooltipOverlay.attach(new DomPortal(this.#tooltip));
+    }
+    this.renderer.setStyle(this.#tooltipOverlay.overlayElement, 'pointerEvents', 'none');
+    this.#tooltipOverlay.updatePosition();
+    // why: capture bắt cả scroll ở ancestor không khai cdkScrollable, tránh tooltip trôi khỏi cell.
+    this.#document.addEventListener('scroll', this.#onScroll, true);
   }
 
   #hideTooltip() {
+    this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.detach();
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
     this.renderer.setStyle(this.#tooltip, 'opacity', '0');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
   }
 
   @HostListener('mouseenter')
diff --git a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.md b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
index ed13ac3db..80fb5c776 100644
--- a/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
+++ b/versions/v21/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
@@ -29,11 +29,13 @@ None.
 
 ## Behavior
 - `ngOnChanges` (fires before `ngOnInit`): if `sdHoverCopyDisabled` changes to `false` and no button exists yet, creates one; if it changes to `true`, removes the existing button from the DOM.
-- `ngOnInit`: if not disabled, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. Also appends a tooltip `<span>` seeded from `core.directive.hover-copy.tooltip`.
+- `ngOnInit`: if not disabled and no button exists, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. The tooltip starts hidden inside the button; creation is idempotent across `ngOnChanges` and `ngOnInit`.
 - `mouseenter` on host: shows the button (`display: block`); skipped when `sdHoverCopyDisabled` is `true` or the button was never created.
 - `mouseleave` on host: hides the button (`display: none`) and resets the tooltip to `core.directive.hover-copy.tooltip` with `opacity: 0`.
 - Clicking the copy button: calls `BrowserUtilities.copyToClipboard(String(copyText))`, swaps the tooltip to `core.directive.hover-copy.copied` with `opacity: 1`, then auto-hides after 1000 ms by resetting to `core.directive.hover-copy.tooltip` with `opacity: 0`.
-- **Teardown**: the 1000 ms auto-hide timer is stored and cleared via `DestroyRef.onDestroy`, and also when the button is removed (`sdHoverCopyDisabled` → `true`). A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
+- The visible tooltip is portalled into the CDK overlay container on the document body, outside table row stacking contexts and ancestor overflow. It anchors above the copy button, falls back below near the viewport edge, and stays within an 8px viewport margin. It does not intercept pointer events.
+- Scrolling any ancestor hides the tooltip, including scroll containers without `cdkScrollable`. Mouse leave and the auto-hide timer also detach it from the overlay.
+- **Teardown**: disabling or destroying the host clears the timer, removes the scroll/click listeners, disposes the overlay and removes the copy button. A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
 
 ## i18n
 Both tooltip strings resolve through `I18nService` at the moment they are shown, so they follow the
@@ -45,7 +47,6 @@ active language (VI `Sao chép` / `Đã sao chép`, EN `Copy` / `Copied`, …):
 | Confirmation after a copy | `core.directive.hover-copy.copied` |
 
 ## Known issues
-- **Double-button creation on first render**: because `ngOnChanges` fires before `ngOnInit`, both hooks create a copy button when `sdHoverCopyDisabled` starts as `false`. The directive's internal reference points to the second button (created in `ngOnInit`), so behaviour is correct, but an orphaned first button element stays in the host's DOM. Tracked as a follow-up to SM-2287.
 - **No `aria-label`**: the generated `<button>` has no accessible label. Screen-reader users cannot identify its purpose. A future fix should add `aria-label="Sao chép"` (or the localised equivalent) to the button element.
 
 ## Examples
diff --git a/versions/v21/projects/sdcorejs-angular/i18n/src/en.ts b/versions/v21/projects/sdcorejs-angular/i18n/src/en.ts
index cb10863c9..06b465fe8 100644
--- a/versions/v21/projects/sdcorejs-angular/i18n/src/en.ts
+++ b/versions/v21/projects/sdcorejs-angular/i18n/src/en.ts
@@ -418,6 +418,7 @@ export const EN_MESSAGES = {
   'core.component.form-builder.group-children': 'Children',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Accent color',
+  'core.component.form-builder.collapsible': 'Allow expand/collapse',
   'core.component.form-builder.group-no-children': 'No fields yet. Add or drag fields into this group.',
   'core.component.form-builder.break': 'Break',
 
diff --git a/versions/v21/projects/sdcorejs-angular/i18n/src/ja.ts b/versions/v21/projects/sdcorejs-angular/i18n/src/ja.ts
index 5dffdabf6..a3a89bdaa 100644
--- a/versions/v21/projects/sdcorejs-angular/i18n/src/ja.ts
+++ b/versions/v21/projects/sdcorejs-angular/i18n/src/ja.ts
@@ -420,6 +420,7 @@ export const JA_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子要素',
   'core.component.form-builder.group-icon': 'アイコン',
   'core.component.form-builder.group-accent-color': 'アクセントカラー',
+  'core.component.form-builder.collapsible': '展開・折りたたみを許可',
   'core.component.form-builder.group-no-children': 'フィールドがまだありません。このグループにフィールドを追加またはドラッグしてください。',
   'core.component.form-builder.break': '改行',
 
diff --git a/versions/v21/projects/sdcorejs-angular/i18n/src/ko.ts b/versions/v21/projects/sdcorejs-angular/i18n/src/ko.ts
index 950f8c05d..e4e8c4b3c 100644
--- a/versions/v21/projects/sdcorejs-angular/i18n/src/ko.ts
+++ b/versions/v21/projects/sdcorejs-angular/i18n/src/ko.ts
@@ -419,6 +419,7 @@ export const KO_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '하위 요소',
   'core.component.form-builder.group-icon': '아이콘',
   'core.component.form-builder.group-accent-color': '강조 색상',
+  'core.component.form-builder.collapsible': '펼치기/접기 허용',
   'core.component.form-builder.group-no-children': '필드가 아직 없습니다. 이 그룹에 필드를 추가하거나 드래그하세요.',
   'core.component.form-builder.break': '줄 바꿈',
 
diff --git a/versions/v21/projects/sdcorejs-angular/i18n/src/vi.ts b/versions/v21/projects/sdcorejs-angular/i18n/src/vi.ts
index ac26c06b0..dbe94ea22 100644
--- a/versions/v21/projects/sdcorejs-angular/i18n/src/vi.ts
+++ b/versions/v21/projects/sdcorejs-angular/i18n/src/vi.ts
@@ -419,6 +419,7 @@ export const VI_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': 'Thành phần con',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Màu nhấn',
+  'core.component.form-builder.collapsible': 'Cho phép thu gọn/mở rộng',
   'core.component.form-builder.group-no-children': 'Chưa có trường nào. Thêm hoặc kéo trường vào group này.',
   'core.component.form-builder.break': 'Ngắt dòng',
 
diff --git a/versions/v21/projects/sdcorejs-angular/i18n/src/zh.ts b/versions/v21/projects/sdcorejs-angular/i18n/src/zh.ts
index b429856af..066257b96 100644
--- a/versions/v21/projects/sdcorejs-angular/i18n/src/zh.ts
+++ b/versions/v21/projects/sdcorejs-angular/i18n/src/zh.ts
@@ -419,6 +419,7 @@ export const ZH_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子项',
   'core.component.form-builder.group-icon': '图标',
   'core.component.form-builder.group-accent-color': '强调色',
+  'core.component.form-builder.collapsible': '允许展开/折叠',
   'core.component.form-builder.group-no-children': '尚无字段。请向此分组添加或拖入字段。',
   'core.component.form-builder.break': '换行',
 
diff --git a/versions/v21/projects/sdcorejs-angular/karma.conf.js b/versions/v21/projects/sdcorejs-angular/karma.conf.js
index adbeaf7da..ee95161f9 100644
--- a/versions/v21/projects/sdcorejs-angular/karma.conf.js
+++ b/versions/v21/projects/sdcorejs-angular/karma.conf.js
@@ -98,7 +98,7 @@ module.exports = function (config) {
     reporters: ['progress', 'kjhtml', 'coverage'],
     // why: từ khi `coverage-includes.spec.ts` kéo TOÀN BỘ source vào bundle (để mẫu số coverage
     // gồm cả file không spec nào import), page load đầu tiên nặng hẳn lên — bundle đã instrument,
-    // cộng ckeditor/pdfjs/exceljs/chart.js. Với default (`browserNoActivityTimeout` 30s,
+    // cộng ckeditor/pdfjs/exceljs. Với default (`browserNoActivityTimeout` 30s,
     // `browserDisconnectTimeout` 2s, `pingTimeout` 5s) Chrome bị coi là chết TRƯỚC KHI chạy
     // spec đầu tiên: "Disconnected reconnect failed before timeout of 2000ms (ping timeout)",
     // 0 spec chạy, exit 0 — tức là một run rỗng trông như run xanh. Các mốc dưới đây là để chờ
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
index a7a554540..390baf397 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
@@ -1,30 +1,38 @@
+@let _structured = structured();
+@let _showPin = showPin();
+@let _iconFontSet = iconFontSet();
 <nav
   class="sd-layout-menu-tree d-flex flex-column gap-4"
-  [class.sd-layout-menu-tree--structured]="structured()"
-  [class.sd-layout-menu-tree--pinnable]="showPin()"
+  [class.sd-layout-menu-tree--structured]="_structured"
+  [class.sd-layout-menu-tree--pinnable]="_showPin"
   aria-label="Navigation menu">
   @for (node of nodes(); track node.key) {
     @if (node.isGroup) {
-      <div
-        class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
-        [class.sd-layout-menu-tree__root]="node.isRoot"
-        [style.padding-left.px]="node.paddingLeft">
-        @for (offset of node.branchOffsets; track offset) {
-          <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
-        }
-        @if (node.showIcon) {
-          @if (structured() && node.menu.iconUrl) {
-            <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
-          } @else {
-            <sd-icon
-              data-menu-icon
-              [name]="node.menu.icon || 'folder'"
-              [fontSet]="iconFontSet()"
-              [size]="structured() ? '20px' : undefined"></sd-icon>
-          }
-        }
-        <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
-      </div>
+      @if (node.isCollapsible) {
+        <button
+          type="button"
+          class="sd-layout-menu-tree__group sd-layout-menu-tree__group-toggle d-flex align-items-center gap-8 T12M text-black400"
+          [attr.data-menu-group]="node.key"
+          [attr.aria-label]="node.title"
+          [attr.aria-expanded]="node.isExpanded"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft"
+          (click)="onToggleGroup(node.key)">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+          <sd-icon
+            class="sd-layout-menu-tree__disclosure"
+            [name]="node.isExpanded ? 'expand_more' : 'chevron_right'"
+            size="18px"
+            aria-hidden="true"></sd-icon>
+        </button>
+      } @else {
+        <div
+          class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+        </div>
+      }
     } @else {
       <div
         class="sd-layout-menu-tree__route d-flex align-items-center gap-4"
@@ -52,13 +60,13 @@
               <sd-icon
                 data-menu-icon
                 [name]="node.menu.icon || 'chevron_right'"
-                [fontSet]="iconFontSet()"
-                [size]="structured() ? '20px' : undefined"></sd-icon>
+              [fontSet]="_iconFontSet"
+              [size]="_structured ? '20px' : undefined"></sd-icon>
             }
           }
-          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
+          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
         </button>
-        @if (showPin()) {
+        @if (_showPin) {
           <button
             type="button"
             class="sd-layout-menu-tree__pin d-flex align-items-center justify-content-center"
@@ -78,3 +86,17 @@
     </div>
   }
 </nav>
+
+<ng-template #groupContent let-node>
+  @for (offset of node.branchOffsets; track offset) {
+    <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
+  }
+  @if (node.showIcon) {
+    @if (_structured && node.menu.iconUrl) {
+      <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
+    } @else {
+      <sd-icon data-menu-icon [name]="node.menu.icon || 'folder'" [fontSet]="_iconFontSet" [size]="_structured ? '20px' : undefined"></sd-icon>
+    }
+  }
+  <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
+</ng-template>
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
index 92309d494..875a4c557 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
@@ -1,5 +1,6 @@
 // why: Route and pin actions need a navigation-specific hit area not provided by a Core UI component.
 .sd-layout-menu-tree__route-button,
+.sd-layout-menu-tree__group-toggle,
 .sd-layout-menu-tree__pin {
   min-height: 40px;
   border: 0;
@@ -21,6 +22,7 @@
 
 // why: Navigation rows need a token-based hover surface without adding a second button component.
 .sd-layout-menu-tree__route-button:hover,
+.sd-layout-menu-tree__group-toggle:hover,
 .sd-layout-menu-tree__pin:hover {
   background: var(--sd-black100, var(--sd-surface-muted, #f3f3f3));
   color: var(--sd-primary, #005cbb);
@@ -32,6 +34,7 @@
 
 // why: Keyboard users need a visible focus indicator on custom navigation actions.
 .sd-layout-menu-tree__route-button:focus-visible,
+.sd-layout-menu-tree__group-toggle:focus-visible,
 .sd-layout-menu-tree__pin:focus-visible {
   outline: 2px solid var(--sd-primary);
   outline-offset: 2px;
@@ -61,6 +64,17 @@
   min-height: 32px;
 }
 
+.sd-layout-menu-tree__group-toggle {
+  text-align: left;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.sd-layout-menu-tree__disclosure {
+  flex: 0 0 18px;
+  margin-left: auto;
+}
+
 // why: Consumer-provided image icons need the same footprint as SdIcon glyphs.
 .sd-layout-menu-tree__icon-image {
   width: 20px;
@@ -144,7 +158,8 @@
     color: var(--menu-muted);
   }
 
-  .sd-layout-menu-tree__route-button:hover {
+  .sd-layout-menu-tree__route-button:hover,
+  .sd-layout-menu-tree__group-toggle:hover {
     background: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--menu-surface));
   }
 
@@ -190,12 +205,14 @@
   }
 
   .sd-layout-menu-tree__route-button:focus-visible,
+  .sd-layout-menu-tree__group-toggle:focus-visible,
   .sd-layout-menu-tree__pin:focus-visible {
     outline-offset: -2px;
   }
 
   @media (pointer: coarse) {
     .sd-layout-menu-tree__route .sd-layout-menu-tree__route-button,
+    .sd-layout-menu-tree__group-toggle,
     .sd-layout-menu-tree__pin {
       min-height: 44px;
     }
@@ -212,6 +229,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .sd-layout-menu-tree__route-button,
+  .sd-layout-menu-tree__group-toggle,
   .sd-layout-menu-tree__pin {
     transition: none;
   }
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
index d0c4c32e9..417f8c6aa 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
@@ -29,6 +29,7 @@ describe('SdLayoutMenuTreeComponent', () => {
   });
 
   it('preserves nested menu icons and spacing in the default V2/mobile presentation', () => {
+    expect(fixture.nativeElement.querySelector('[data-menu-group]')).toBeNull();
     const route = fixture.nativeElement.querySelector('[data-menu-key="id:reports"]') as HTMLElement;
     expect(route.querySelector('sd-icon')).not.toBeNull();
     expect(getComputedStyle(route).paddingLeft).toBe('28px');
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
index 46a50a4f6..5cf5e0c8a 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, output, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, model, output, signal } from '@angular/core';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 import { SdLayoutMenu, SdLayoutRootMenu, getMenuStableKey, searchMenuLeaves } from '../../../services';
@@ -15,6 +16,8 @@ interface SdLayoutMenuTreeNode {
   showIcon: boolean;
   isRoot: boolean;
   isGroup: boolean;
+  isCollapsible: boolean;
+  isExpanded: boolean;
   isActive: boolean;
   isPinned: boolean;
   isPinVisible: boolean;
@@ -25,7 +28,7 @@ interface SdLayoutMenuTreeNode {
 @Component({
   selector: 'sd-layout-menu-tree',
   standalone: true,
-  imports: [SdIcon],
+  imports: [SdIcon, NgTemplateOutlet],
   templateUrl: './menu-tree.component.html',
   styleUrl: './menu-tree.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +47,8 @@ export class SdLayoutMenuTreeComponent {
   pinVisibility = input<'hover' | 'always'>('hover');
   /** V3 hierarchy and flat shortcuts are opt-in; V2/mobile retain the default presentation. */
   presentation = input<'default' | 'hierarchy' | 'shortcuts'>('default');
+  collapsible = input(false);
+  collapsedGroupKeys = model<string[]>([]);
   structured = computed(() => this.presentation() !== 'default');
   iconFontSet = computed(() => (this.structured() ? ('material-icons-outlined' as const) : undefined));
   navigate = output<SdLayoutRootMenu>();
@@ -56,6 +61,8 @@ export class SdLayoutMenuTreeComponent {
     const query = this.query().trim();
     const structured = this.structured();
     const hierarchy = this.presentation() === 'hierarchy' && !query;
+    const collapsible = this.collapsible() && !query;
+    const collapsedKeys = new Set(this.collapsedGroupKeys());
     const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
     // Nhiều menu cùng khớp route thì chỉ path sát nhất sáng: ở '/appointment/cs' thì '/appointment' không sáng nữa
     const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
@@ -69,6 +76,7 @@ export class SdLayoutMenuTreeComponent {
         const path = 'path' in menu ? menu.path : '';
         const title = menu.title ?? menu.tooltipTitle ?? '';
         const isPinned = pinnedKeys.has(key);
+        const isExpanded = !collapsible || !collapsedKeys.has(key);
         nodes.push({
           menu,
           key,
@@ -80,6 +88,8 @@ export class SdLayoutMenuTreeComponent {
           showIcon: !structured || (hierarchy && depth === 0),
           isRoot: depth === 0 && (!structured || hierarchy),
           isGroup,
+          isCollapsible: isGroup && collapsible,
+          isExpanded,
           isActive: !!path && path === activeMenuPath,
           isPinned,
           isPinVisible: alwaysShowPin || isPinned || hoveredPinKey === key,
@@ -88,7 +98,7 @@ export class SdLayoutMenuTreeComponent {
           // quyết định vị trí. Tính trong `nodes` computed nên tự cập nhật khi đổi ngôn ngữ.
           pinLabel: this.#i18n.t(isPinned ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin', { title }),
         });
-        if (isGroup && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
+        if (isGroup && isExpanded && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
       }
     };
 
@@ -104,6 +114,10 @@ export class SdLayoutMenuTreeComponent {
     if ('path' in menu) this.navigate.emit(menu);
   }
 
+  onToggleGroup(key: string): void {
+    this.collapsedGroupKeys.update(keys => (keys.includes(key) ? keys.filter(value => value !== key) : [...keys, key]));
+  }
+
   onTogglePinned(event: MouseEvent, menu: SdLayoutMenu): void {
     event.stopPropagation();
     this.togglePinned.emit(menu);
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
index de417f7f0..5261ea32c 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
@@ -87,6 +87,8 @@ <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.rece
           <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.all-menu' | sdTranslate }}</h2>
           <sd-layout-menu-tree
             presentation="hierarchy"
+            [collapsible]="true"
+            [(collapsedGroupKeys)]="collapsedGroupKeys"
             [menus]="menus()"
             [query]="searchText()"
             [activePath]="activePath()"
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
index 976591419..d412e5dea 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
@@ -44,6 +44,139 @@ describe('SdSidebarV3', () => {
     expect(fixture.componentInstance.isCollapsed()).toBeFalse();
   });
 
+  const groupButton = (key: string): HTMLButtonElement | null =>
+    fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-group="${key}"]`);
+  const allRoute = (key: string): HTMLButtonElement | null => fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-key="${key}"]`);
+
+  it('toggles a group with a focusable disclosure without navigating or pinning', () => {
+    create();
+    const navigate = spyOn(TestBed.inject(Router), 'navigate');
+    const pin = spyOn(TestBed.inject(SdLayoutNavigationStateService), 'togglePinned');
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    expect(group.tagName).toBe('BUTTON');
+    expect(group.type).toBe('button');
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    group.focus();
+    group.click();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(group);
+    expect(group.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(pin).not.toHaveBeenCalled();
+    group.click();
+    fixture.detectChanges();
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('preserves independent nested disclosures when a parent is closed and reopened', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }, dashboard] },
+      { id: 'other', title: 'Other', children: [{ ...dashboard, id: 'other-leaf' }] },
+    ]);
+    fixture.detectChanges();
+    const nested = groupButton('id:nested');
+    expect(nested).not.toBeNull();
+    if (!nested) return;
+    nested.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).toBeNull();
+    expect(allRoute('id:other-leaf')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+  });
+
+  it('searches closed groups and preserves disclosures through query and rail toggles', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.detectChanges();
+    fixture.componentInstance.searchText.set('BAO CAO');
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('id:work')).toBeNull();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    fixture.componentInstance.searchText.set('');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('reveals the exact active branch on navigation without reopening unrelated branches', async () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }] },
+      { id: 'other', title: 'Other', children: [dashboard] },
+    ]);
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).not.toBeNull();
+    if (!groupButton('id:nested')) return;
+    for (const key of ['id:nested', 'id:work', 'id:other']) {
+      groupButton(key)!.click();
+      fixture.detectChanges();
+    }
+    const router = TestBed.inject(Router);
+    router.resetConfig([{ path: 'reports/:id', children: [] }]);
+    await router.navigateByUrl('/reports/42?source=test#details');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')!.getAttribute('aria-current')).toBe('page');
+    expect(groupButton('id:other')!.getAttribute('aria-expanded')).toBe('false');
+    // An explicit close remains respected while the current route stays unchanged.
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('opens a closed root group when its compact rail icon is activated', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('.sd-sidebar-v3__collapsed-action').click();
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('distinguishes same-title groups by their ancestor fallback keys', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { title: 'First', children: [{ title: 'Shared', children: [dashboard] }] },
+      { title: 'Second', children: [{ title: 'Shared', children: [reports] }] },
+    ]);
+    fixture.detectChanges();
+    const first = groupButton('group:first/shared');
+    expect(first).not.toBeNull();
+    if (!first) return;
+    first.click();
+    fixture.detectChanges();
+    expect(allRoute('id:dashboard')).toBeNull();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('group:second/shared')!.getAttribute('aria-expanded')).toBe('true');
+  });
+
   it('uses defaultCollapsed when no preference exists', () => {
     create({ version: 3, defaultCollapsed: true });
 
@@ -176,7 +309,8 @@ describe('SdSidebarV3', () => {
     expect(tree.querySelectorAll('[data-menu-icon]').length).toBe(2);
     expect(tree.querySelector('img[src="/nested-icon.svg"]')).toBeNull();
     const groups = tree.querySelectorAll<HTMLElement>('.sd-layout-menu-tree__group');
-    expect(groups[1].querySelector('sd-icon')).toBeNull();
+    expect(groups[1].querySelector('[data-menu-icon]')).toBeNull();
+    expect(groups[1].querySelector('.sd-layout-menu-tree__disclosure')).not.toBeNull();
     const leaf = tree.querySelector<HTMLButtonElement>('[data-menu-key="id:reports"]')!;
     expect(leaf.querySelector('sd-icon, img')).toBeNull();
     expect(leaf.getAttribute('aria-current')).toBe('page');
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
index c41d3b56f..42167cf99 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
@@ -9,6 +9,7 @@ import { SdLayoutMenuTreeComponent } from '../shared/menu-tree/menu-tree.compone
 import { SdLayoutSearchFieldComponent } from '../shared/search-field/search-field.component';
 import { SdLayoutUserMenuComponent } from '../shared/user-menu/user-menu.component';
 import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+import { containsMenuPath, resolveActiveMenuPath } from '../../utils';
 
 @Component({
   selector: 'sd-sidebar-v3',
@@ -28,6 +29,7 @@ export class SdSidebarV3 {
   userInfo = input.required<SdLayoutUserInfo>();
   sidebar = input.required<SidebarConfigurationV3>();
   isCollapsed = signal(false);
+  protected readonly collapsedGroupKeys = signal<string[]>([]);
   searchText = signal('');
   activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '');
   searchResults = computed<SdLayoutRootMenu[]>(() => searchMenuLeaves(this.menus(), this.searchText()));
@@ -55,6 +57,23 @@ export class SdSidebarV3 {
     this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
       if (event instanceof NavigationEnd) this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
     });
+    effect(() => {
+      const menus = this.menus();
+      const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
+      if (!activeMenuPath) return;
+      const activeGroupKeys = new Set<string>();
+      const visit = (items: SdLayoutMenu[], ancestors: string[]): void => {
+        for (const menu of items) {
+          if (!('children' in menu) || !containsMenuPath(menu, activeMenuPath)) continue;
+          const key = getMenuStableKey(menu, ancestors);
+          activeGroupKeys.add(key);
+          visit(menu.children ?? [], [...ancestors, menu.title ?? key]);
+        }
+      };
+      visit(menus, []);
+      // why: Chỉ mở nhánh khi route/menu đổi; người dùng vẫn được đóng nhánh đang active.
+      untracked(() => this.collapsedGroupKeys.update(keys => keys.filter(key => !activeGroupKeys.has(key))));
+    });
   }
 
   toggleCollapsed(): void {
@@ -66,6 +85,7 @@ export class SdSidebarV3 {
     if ('path' in menu) this.navigateMenu(menu);
     else {
       this.isCollapsed.set(false);
+      this.collapsedGroupKeys.update(keys => keys.filter(key => key !== getMenuStableKey(menu)));
       this.#navigationState.patchVersionState(3, { collapsed: false });
     }
   }
diff --git a/versions/v21/projects/sdcorejs-angular/modules/layout/sd-layout.md b/versions/v21/projects/sdcorejs-angular/modules/layout/sd-layout.md
index 09d64b249..a71a963f1 100644
--- a/versions/v21/projects/sdcorejs-angular/modules/layout/sd-layout.md
+++ b/versions/v21/projects/sdcorejs-angular/modules/layout/sd-layout.md
@@ -246,6 +246,10 @@ const menus: SdLayoutMenu[] = [
 
 V2 honors up to three valid `primaryMenuIds` in the supplied order, fills missing slots from the remaining visible roots, and exposes overflow through More. V3 search is accent-insensitive and searches the filtered menu tree.
 
+Desktop V3 menu groups support expand/collapse at every depth without additional configuration. Groups start expanded; click the group row or focus it with Tab and press Enter/Space to toggle its children. The disclosure chevron and `aria-expanded` reflect the current state. Closing a parent preserves each nested group's state, and group toggles do not navigate or pin items.
+
+Group state belongs to the mounted V3 sidebar: search still finds leaves inside closed groups, clearing the query restores the tree state, and toggling the whole sidebar between drawer and icon rail preserves it. Activating a group icon in the rail opens the drawer and that root group. A route change opens the ancestors of the most exact active menu; unrelated groups retain their state. Group state resets when the sidebar is recreated and is not stored in local storage. Pinned/Recent shortcuts, V2 and mobile navigation retain their existing behavior.
+
 ### Active menu resolution prefers the most exact path
 
 A menu is active only when it owns the longest `path` that matches the current route. With both `/appointment` and `/appointment/cs` declared, standing on `/appointment/cs` highlights the child alone — the ancestor entry is no longer lit up, and `aria-current="page"` is set on that one row. `resolveActiveMenuPath(menus, routePath)` from the layout `utils` is the single decision point: V1 uses it for node focus, menu-group binding and branch expansion, and the shared `sd-layout-menu-tree` (V2, V3 and their mobile variants) uses it for `isActive`. Matching stays segment-based, so `/appointment` never matches `/appointments`, and a route with no menu of its own (`/appointment/cs/123`) still activates its closest declared ancestor. `MenuFocusPipe` takes the resolved path as its third argument; called with two arguments it keeps the previous prefix matching.
diff --git a/versions/v21/projects/sdcorejs-angular/ng-package.json b/versions/v21/projects/sdcorejs-angular/ng-package.json
index a3dd12272..7f559acb7 100644
--- a/versions/v21/projects/sdcorejs-angular/ng-package.json
+++ b/versions/v21/projects/sdcorejs-angular/ng-package.json
@@ -14,7 +14,6 @@
     "@bjorn3/browser_wasi_shim",
     "keycloak-js",
     "prismjs",
-    "chart.js",
     "pdfjs-dist",
     "@lucide/angular"
   ],
diff --git a/versions/v21/projects/sdcorejs-angular/package.json b/versions/v21/projects/sdcorejs-angular/package.json
index 27c09a3b1..439ff11d2 100644
--- a/versions/v21/projects/sdcorejs-angular/package.json
+++ b/versions/v21/projects/sdcorejs-angular/package.json
@@ -45,7 +45,6 @@
     "@lucide/angular": "^1.22.0",
     "@ckeditor/ckeditor5-angular": "11.1.2",
     "ckeditor5": "48.0.0",
-    "chart.js": "^4.5.1",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
     "keycloak-js": "^26.0.0",
@@ -56,7 +55,6 @@
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
-    "./fesm2022/sdcorejs-angular-components-chart.mjs",
     "./fesm2022/sdcorejs-angular-components-code-editor.mjs",
     "./fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs"
   ]
diff --git a/versions/v22/README.md b/versions/v22/README.md
index 095db5a3a..67e7ef8cc 100644
--- a/versions/v22/README.md
+++ b/versions/v22/README.md
@@ -176,7 +176,7 @@ Mỗi component / form control / service / module là 1 entry point độc lập
 
 | Group | Items |
 | --- | --- |
-| Display | `badge` · `avatar` · `chart` · `section` · `view` · `inform` |
+| Display | `badge` · `avatar` · `section` · `view` · `inform` |
 | Action | `button` · `quick-action` · `operator` |
 | Layout | `splitter` · `side-drawer` · `tab` · `tab-router` · `stepper` · `modal` · `anchor` |
 | Data | `table` · `tree` · `org-chart` · `query-bar` · `query-builder` · `preview` · `history` |
diff --git a/versions/v22/SYNC-STATUS.md b/versions/v22/SYNC-STATUS.md
index 48708e685..968f2cc7c 100644
--- a/versions/v22/SYNC-STATUS.md
+++ b/versions/v22/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 22 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 09:50:52 |
+| Updated At | 2026-09-11 15:35:26 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v22 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v22/package-lock.json b/versions/v22/package-lock.json
index eb7975521..5a89f070a 100644
--- a/versions/v22/package-lock.json
+++ b/versions/v22/package-lock.json
@@ -23,7 +23,6 @@
         "@lucide/angular": "^1.22.0",
         "@sdcorejs/angular-material-datetime": "1.0.4",
         "@sdcorejs/utils": "1.1.4",
-        "chart.js": "^4.5.1",
         "ckeditor5": "48.0.0",
         "date-fns": "^3.6.0",
         "exceljs": "^4.4.0",
@@ -5359,12 +5358,6 @@
         "tslib": "2"
       }
     },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -10155,18 +10148,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
diff --git a/versions/v22/package.json b/versions/v22/package.json
index e3903615a..2a3cf60c8 100644
--- a/versions/v22/package.json
+++ b/versions/v22/package.json
@@ -38,7 +38,6 @@
     "@lucide/angular": "^1.22.0",
     "@sdcorejs/angular-material-datetime": "1.0.4",
     "@sdcorejs/utils": "1.1.4",
-    "chart.js": "^4.5.1",
     "ckeditor5": "48.0.0",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
diff --git a/versions/v22/projects/sdcorejs-angular/README.md b/versions/v22/projects/sdcorejs-angular/README.md
index e84c41a42..234a3770d 100644
--- a/versions/v22/projects/sdcorejs-angular/README.md
+++ b/versions/v22/projects/sdcorejs-angular/README.md
@@ -91,18 +91,20 @@ Replace the timer with your typed service call and reset `saving` in a `finally`
 
 | Area              | Representative APIs                                                                                                             |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, charts, editors, and document tooling      |
+| UI components     | Navigation/data state, PDF preview, job progress, audit diff, modals, drawers, tabs, editors, and document tooling              |
 | Data and workflow | Local/server tables, entity/tree pickers, query builders, unsaved-change guards, background tasks, upload, and Excel import     |
 | Form controls     | Text/mask, number, time/time range, date/date range, datetime, select, autocomplete, checkbox, radio, switch, chip, and color   |
 | Services          | Typed API/retry/cancel, ref-counted loading, graph-safe persistence/cache/storage, viewport signals, notifications, and exports |
 | Portal modules    | Auth, Keycloak, permission, layout, and icon modules                                                                            |
 | Localization      | Built-in `vi`, `en`, `ja`, `ko`, and `zh` catalogs, plus a synchronous custom-catalog provider                                  |
 
+Charting libraries are selected, installed, and configured by the consuming application. Core UI does not bundle a chart engine; `sd-org-chart` remains available for organizational hierarchies.
+
 The [live showcase](https://sdcorejs.github.io/sdcorejs-angular/) demonstrates components, forms, and services. The [latest API manifest](https://sdcorejs.github.io/sdcorejs-angular/docs/latest/index.json) lists every published reference document without duplicating the full API here.
 
 ## Standalone and subpath imports
 
-Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. The package declares `sideEffects: false`.
+Prefer public leaf entry points so dependencies stay explicit and unused entry points can be removed from the application graph. Stylesheets and editor registration entry points are retained as side effects.
 
 ```ts
 import { SdButton } from '@sdcorejs/angular/components/button';
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/index.ts b/versions/v22/projects/sdcorejs-angular/components/chart/index.ts
deleted file mode 100644
index 7551d46c3..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './src/bar-chart.component';
-export * from './src/line-chart.component';
-export * from './src/pie-chart.component';
-export * from './src/doughnut-chart.component';
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/ng-package.json b/versions/v22/projects/sdcorejs-angular/components/chart/ng-package.json
deleted file mode 100644
index 19e3f2bcb..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/ng-package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/sd-chart.md b/versions/v22/projects/sdcorejs-angular/components/chart/sd-chart.md
deleted file mode 100644
index 8df787871..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/sd-chart.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# `<sd-bar-chart>` / `<sd-line-chart>` / `<sd-pie-chart>` / `<sd-doughnut-chart>`
-
-**Type**: Component family (4 separate components, one per chart type)
-**Selectors**: `sd-bar-chart`, `sd-line-chart`, `sd-pie-chart`, `sd-doughnut-chart`
-**Import path**: `@sdcorejs/angular/components/chart` (or barrel: `@sdcorejs/angular/components`)
-**Classes**: `SdBarChartComponent`, `SdLineChartComponent`, `SdPieChartComponent`, `SdDoughnutChartComponent`
-**Standalone**: yes
-**Change detection**: `OnPush`
-**Underlying engine**: [Chart.js](https://www.chartjs.org/) (all `registerables` registered)
-
-## One-line purpose
-Thin signal-based wrappers around Chart.js — render bar / line / pie / doughnut visualizations from declarative `data` / `options` / `plugins` inputs, with auto-update on signal changes.
-
-## When to use
-- Dashboards: KPI cards, time-series, breakdown by category
-- Reports: monthly/quarterly comparisons, share-of-total
-- Analytics widgets inside detail pages
-- Any place a Chart.js chart fits — these wrappers don't add domain styling, they relay Chart.js config
-
-## When NOT to use
-- For sparkline / inline trend cells in tables — use a smaller dedicated component
-- For non-Chart.js visualizations (D3, ECharts, mermaid) — use those libraries directly
-- For numeric "stat tiles" without a graph — use a card + typography
-- When data updates faster than ~10 fps — Chart.js redraw cost will dominate; consider canvas-level rendering
-
-## Inputs (identical shape across all 4 charts; the generic chart-type changes)
-
-### `<sd-bar-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'bar'>` | (required) | Chart.js v4 bar dataset (`labels`, `datasets[]`). |
-| `options` | `ChartOptions<'bar'>` | `undefined` | Chart.js options (scales, plugins, legend, tooltips, …). |
-| `plugins` | `Plugin<'bar'>[]` | `[]` | Chart.js plugins (chart-local; `Chart.register(...registerables)` is already called globally). |
-
-### `<sd-line-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'line'>` | (required) | Chart.js v4 line dataset. |
-| `options` | `ChartOptions<'line'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'line'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-pie-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'pie'>` | (required) | Chart.js v4 pie dataset. |
-| `options` | `ChartOptions<'pie'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'pie'>[]` | `[]` | Chart-local plugins. |
-
-### `<sd-doughnut-chart>`
-| Name | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `data` | `ChartData<'doughnut'>` | (required) | Chart.js v4 doughnut dataset. |
-| `options` | `ChartOptions<'doughnut'>` | `undefined` | Chart.js options. |
-| `plugins` | `Plugin<'doughnut'>[]` | `[]` | Chart-local plugins. |
-
-## Outputs
-None. To respond to user interaction, attach Chart.js plugins or pass `options.onClick` / `options.onHover` callbacks via `options`.
-
-## Content projection (slots)
-None — these are pure canvas wrappers.
-
-## Behavior notes
-- An internal `effect()` watches `data`/`options` signals and calls `chart.update()` on change (no destroy/recreate, so animations are smooth).
-- The chart instance is created in `ngOnInit` and destroyed in `ngOnDestroy`.
-- **Bar and line** add a horizontal-scroll wrapper when `data.labels.length > 15`: the inner div gets `min-width = labels.length * 50 px` and the outer wrapper gets `overflow-x: auto`. This avoids cramped axes on dense series.
-- **Pie and doughnut** are 100% width / 100% height of their host — set the host's size via CSS.
-
-## Visual cues
-- **Bar**: vertical bars over a horizontal label axis; horizontally scrollable when many labels.
-- **Line**: time-series line(s) with optional area fill (per Chart.js config); horizontally scrollable when many labels.
-- **Pie**: full-circle slice diagram, 100%-of-total proportions.
-- **Doughnut**: same as pie with a hollow center (good for a centered KPI label).
-- All four obey `data.datasets[*].backgroundColor` / `borderColor` — colors come from the data, not the component.
-
-## Examples
-
-### 1. Monthly revenue bar chart
-```ts
-revenueData = signal<ChartData<'bar'>>({
-  labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
-  datasets: [{
-    label: 'Doanh thu (triệu đồng)',
-    data: [120, 135, 110, 160, 180, 150],
-    backgroundColor: '#3498db',
-  }],
-});
-revenueOptions: ChartOptions<'bar'> = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: { legend: { position: 'top' } },
-};
-```
-```html
-<div style="height: 320px;">
-  <sd-bar-chart [data]="revenueData()" [options]="revenueOptions"></sd-bar-chart>
-</div>
-```
-
-### 2. Multi-series line chart
-```html
-<div style="height: 280px;">
-  <sd-line-chart [data]="trafficData()" [options]="trafficOptions"></sd-line-chart>
-</div>
-```
-
-### 3. Pie chart for category breakdown
-```ts
-breakdownData = signal<ChartData<'pie'>>({
-  labels: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C'],
-  datasets: [{ data: [45, 30, 25], backgroundColor: ['#1abc9c', '#3498db', '#e67e22'] }],
-});
-```
-```html
-<div style="height: 240px; width: 240px;">
-  <sd-pie-chart [data]="breakdownData()"></sd-pie-chart>
-</div>
-```
-
-### 4. Doughnut KPI with center label (via plugin)
-```html
-<div style="height: 200px; width: 200px; position: relative;">
-  <sd-doughnut-chart
-    [data]="kpiData()"
-    [options]="kpiOptions"
-    [plugins]="[centerLabelPlugin]">
-  </sd-doughnut-chart>
-</div>
-```
-
-## Anti-patterns
-- Forgetting to set a height on the host — Chart.js needs a sized container to render; `height: 0` produces a blank canvas
-- Passing brand-new object references on every change-detection cycle for `options` — every change triggers `chart.update()`; memoize when possible
-- Using these wrappers for fundamentally different chart types (radar, scatter, polar) without adding a corresponding component — these 4 selectors are typed to specific chart types
-- Manually calling `Chart.register(...)` again — already registered at module load
-- Putting these inside a `*ngIf` that toggles rapidly — destroys/recreates the canvas; consider keeping mounted and toggling visibility
-
-## Related
-- `<sd-card>` — common host for charts on a dashboard
-- `<sd-tab>` — to switch between multiple chart views
-- `<sd-page>` — page shell containing reporting dashboards
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts b/versions/v22/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
deleted file mode 100644
index 908389590..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/src/bar-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-bar-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdBarChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'bar'>> = input.required<ChartData<'bar'>>();
-  options: InputSignal<ChartOptions<'bar'> | undefined> = input<ChartOptions<'bar'>>();
-  plugins: InputSignal<Plugin<'bar'>[]> = input<Plugin<'bar'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'bar'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData as any;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'bar',
-        data: this.data() as any,
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts b/versions/v22/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
deleted file mode 100644
index d166ee3a8..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/src/doughnut-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-doughnut-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdDoughnutChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'doughnut'>> = input.required<ChartData<'doughnut'>>();
-  options: InputSignal<ChartOptions<'doughnut'> | undefined> = input<ChartOptions<'doughnut'>>();
-  plugins: InputSignal<Plugin<'doughnut'>[]> = input<Plugin<'doughnut'>[]>([]);
-
-  chart: Chart<'doughnut'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'doughnut',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts b/versions/v22/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
deleted file mode 100644
index 20512d49b..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/src/line-chart.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-  effect,
-  input,
-  computed,
-  viewChild,
-} from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-line-chart',
-  template: `
-    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
-      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
-        <canvas #canvas></canvas>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdLineChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'line'>> = input.required<ChartData<'line'>>();
-  options: InputSignal<ChartOptions<'line'> | undefined> = input<ChartOptions<'line'>>();
-  plugins: InputSignal<Plugin<'line'>[]> = input<Plugin<'line'>[]>([]);
-
-  isScrollable = computed(() => {
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength > 15;
-  });
-
-  computedMinWidth = computed(() => {
-    if (!this.isScrollable()) return null;
-    const labelsLength = this.data()?.labels?.length || 0;
-    return labelsLength * 50;
-  });
-
-  chart: Chart<'line'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'line',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v22/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts b/versions/v22/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
deleted file mode 100644
index 7c6899819..000000000
--- a/versions/v22/projects/sdcorejs-angular/components/chart/src/pie-chart.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, InputSignal, OnDestroy, OnInit, effect, input, viewChild } from '@angular/core';
-import { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';
-
-Chart.register(...registerables);
-
-@Component({
-  selector: 'sd-pie-chart',
-  template: `
-    <div style="position: relative; height: 100%; width: 100%;">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class SdPieChartComponent implements OnInit, OnDestroy {
-  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
-
-  data: InputSignal<ChartData<'pie'>> = input.required<ChartData<'pie'>>();
-  options: InputSignal<ChartOptions<'pie'> | undefined> = input<ChartOptions<'pie'>>();
-  plugins: InputSignal<Plugin<'pie'>[]> = input<Plugin<'pie'>[]>([]);
-
-  chart: Chart<'pie'> | undefined;
-
-  constructor() {
-    effect(() => {
-      const currentData = this.data();
-      const currentOptions = this.options();
-
-      if (this.chart) {
-        this.chart.data = currentData;
-        if (currentOptions) {
-          this.chart.options = currentOptions;
-        }
-        this.chart.update();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.#initChart();
-  }
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  #initChart() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    const ctx = this.canvas().nativeElement.getContext('2d');
-    if (ctx) {
-      this.chart = new Chart(ctx, {
-        type: 'pie',
-        data: this.data(),
-        options: this.options() || {},
-        plugins: this.plugins(),
-      });
-    }
-  }
-}
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md b/versions/v22/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
index e288032ab..0254e79de 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/sd-form-generic.md
@@ -113,6 +113,25 @@ interface SdFormGenericComponentBase {
 
 `SdFormGenericGroup` is not a field — it is a titled container with its own `layout`, a nested `components` array, and required `properties.{icon, color}`. Groups do not nest: the builder hides `group` from the palette while you are editing one.
 
+Groups support `properties.hidden`, `hiddenWhenExpression` and `visibleWhenExpression` for visibility. They have **no disabled-when option** (`disabledWhenExpression`) or required rule; configure those on individual child fields. Legacy group-level disable conditions are ignored by the renderer.
+
+| Group property | Type | Default | Behaviour |
+| --- | --- | --- | --- |
+| `properties.collapsible` | `boolean` | `false` | Allows expanding/collapsing the group in builder preview and `<sd-form-render>`, including viewed mode. Uses the same `collapsible` property as `<sd-section>`. |
+
+```ts
+const group: SdFormGenericGroup = {
+  id: 'details',
+  type: 'group',
+  label: 'Details',
+  layout: { columns: '12' },
+  properties: { icon: 'category', color: 'primary', collapsible: true },
+  components: [/* child fields */],
+};
+```
+
+Groups start expanded. Collapsing changes presentation only: child controls keep their values, touched state and validation. The expanded/collapsed state belongs to the rendered section instance and is not saved to the schema. The design canvas remains available for editing group contents through Details.
+
 `SdFormGenericValues` is a convenience alias for `SdFormGenericRadio | SdFormGenericSelect | SdFormGenericChecklist`. Their inline `values` entries are `SdFormGenericSelectionStaticItem` — `{ value: string; label: string }` (note `label`, not `display`; the `display` spelling belongs to `SdFormGenericSelectionItem`, which is what a `valuesKey` lookup returns).
 
 ### Expressions
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
index 84c442546..9c9a4ccad 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.html
@@ -8,6 +8,10 @@
   </summary>
   <div class="fb-section__body">
     <attribute-input [form]="form" [(model)]="_group.label" [label]="'core.component.form-builder.label' | sdTranslate"></attribute-input>
+    <attribute-switch
+      [form]="form"
+      [(model)]="_group.properties.collapsible"
+      [label]="'core.component.form-builder.collapsible' | sdTranslate"></attribute-switch>
 
     <div class="fb-field">
       <div class="fb-field__label">{{ 'core.component.form-builder.group-icon' | sdTranslate }}</div>
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
new file mode 100644
index 000000000..53f7ecaa7
--- /dev/null
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.spec.ts
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { I18nService } from '@sdcorejs/angular/i18n';
+import { SdFormGenericGroup } from '../../../../../models';
+import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
+import { GroupAttribute } from './group-attribute.component';
+
+describe('GroupAttribute', () => {
+  let fixture: ComponentFixture<GroupAttribute>;
+  let group: SdFormGenericGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [GroupAttribute, NoopAnimationsModule] });
+    group = {
+      id: 'group',
+      type: 'group',
+      label: 'Details',
+      layout: { columns: '12' },
+      components: [],
+      properties: { icon: 'category', color: 'primary' },
+    };
+    fixture = TestBed.createComponent(GroupAttribute);
+    fixture.componentRef.setInput('group', group);
+    fixture.detectChanges();
+  });
+
+  it('offers visibility expressions without a disabled-when option', () => {
+    const i18n = TestBed.inject(I18nService);
+    const labels = fixture.debugElement
+      .queryAll(By.directive(AttributeExpression))
+      .map(element => (element.componentInstance as AttributeExpression).label);
+    expect(labels).toEqual([i18n.t('core.component.form-builder.visible-when'), i18n.t('core.component.form-builder.hidden-when')]);
+    expect('disabledWhenExpression' in group.properties).toBeFalse();
+  });
+
+  it('defaults collapsible to false and saves both choices in group properties', () => {
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (!optionElement) return;
+    const option = optionElement.componentInstance as AttributeSwitch;
+    expect(option.model).toBeFalse();
+
+    option.modelChange.emit(true);
+    fixture.detectChanges();
+    expect((JSON.parse(JSON.stringify(group)) as SdFormGenericGroup).properties.collapsible).toBeTrue();
+
+    option.modelChange.emit(false);
+    fixture.detectChanges();
+    expect(group.properties.collapsible).toBeFalse();
+  });
+
+  it('restores the collapsible choice from a loaded schema', () => {
+    fixture.componentRef.setInput('group', { ...group, properties: { ...group.properties, collapsible: true } });
+    fixture.detectChanges();
+    const optionElement = fixture.debugElement.query(By.directive(AttributeSwitch));
+    expect(optionElement).not.toBeNull();
+    if (optionElement) expect((optionElement.componentInstance as AttributeSwitch).model).toBeTrue();
+  });
+});
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
index d7190d45c..3d496daf5 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.ts
@@ -5,6 +5,7 @@ import { SD_COMPONENT_ICONS, SdFormGenericComponent, SdFormGenericGroup } from '
 import { BuilderService } from '../../../services';
 import { AttributeExpression } from '../../attribute-expression/attribute-expression.component';
 import { AttributeInput } from '../../attribute-input/attribute-input.component';
+import { AttributeSwitch } from '../../attribute-switch/attribute-switch.component';
 
 const ICON_PRESETS = ['category', 'folder', 'inventory_2', 'group_work', 'workspaces', 'view_quilt'] as const;
 const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as const;
@@ -14,7 +15,7 @@ const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'] as
   templateUrl: './group-attribute.component.html',
   styleUrl: './group-attribute.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AttributeInput, AttributeExpression, SdTranslatePipe],
+  imports: [AttributeInput, AttributeExpression, AttributeSwitch, SdTranslatePipe],
 })
 export class GroupAttribute {
   // ── constants ────────────────────────────────────────────────────────
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
index 17fdf59bb..0e79e21d1 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.html
@@ -6,7 +6,7 @@
         @if (component.type === 'group') {
           @if (!!component.components.length) {
             <div class="col-12 mt-16">
-              <sd-section [title]="component.label" [icon]="component.properties.icon">
+              <sd-section [title]="component.label" [icon]="component.properties.icon" [collapsible]="component.properties.collapsible ?? false">
                 <!-- why: `.sd-section-body` để padding 0 (mỗi nội dung tự quyết), nên các field chỉ
                      còn px-8/py-8 của riêng chúng và dính sát khung section. Group tự chừa lề. -->
                 <div class="row mx-0 c-group-body">
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
index 0ca6931fc..5d4a36a1e 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/components/form-render/form-render.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SdFormRender } from './form-render.component';
 
 describe('SdFormRender - configuration data safety', () => {
@@ -68,6 +69,108 @@ describe('SdFormRender - configuration data safety', () => {
   });
 });
 
+describe('SdFormRender - group collapse', () => {
+  let fixture: ComponentFixture<SdFormRender>;
+  let form: FormGroup;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [SdFormRender, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(SdFormRender);
+    form = new FormGroup({});
+    fixture.componentRef.setInput('form', form);
+  });
+
+  function render(properties: Record<string, unknown> = {}, viewed = false) {
+    fixture.componentRef.setInput('viewed', viewed);
+    fixture.componentRef.setInput('configuration', {
+      components: [
+        {
+          id: 'group',
+          type: 'group',
+          label: 'Details',
+          layout: { columns: '12' },
+          properties: { icon: 'category', color: 'primary', ...properties },
+          components: [
+            {
+              id: 'name',
+              key: 'name',
+              type: 'textfield',
+              label: 'Name',
+              layout: { columns: '12' },
+              validate: { required: true },
+              properties: {},
+            },
+          ],
+        },
+      ],
+    });
+    fixture.detectChanges();
+    flushMicrotasks();
+    fixture.detectChanges();
+  }
+
+  for (const collapsible of [undefined, false]) {
+    it(`keeps the group expanded without a toggle when collapsible is ${collapsible}`, fakeAsync(() => {
+      render({ collapsible });
+      expect(fixture.nativeElement.querySelector('.sd-section-body')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('.sd-section-collapse-toggle')).toBeNull();
+    }));
+  }
+
+  it('collapses and expands without losing child control state, value or validation', fakeAsync(() => {
+    render({ collapsible: true });
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    const control = form.get('name')!;
+    expect(control.hasError('required')).toBeTrue();
+    control.markAsTouched();
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(fixture.nativeElement.querySelector('.sd-section-body')).toBeNull();
+    expect(form.get('name')).toBe(control);
+    expect(control.touched).toBeTrue();
+    expect(control.hasError('required')).toBeTrue();
+    control.setValue('Saved name');
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(fixture.nativeElement.querySelector('sd-input input').value).toBe('Saved name');
+    expect(form.get('name')).toBe(control);
+    expect(control.valid).toBeTrue();
+    fixture.destroy();
+  }));
+
+  it('allows collapse in viewed mode', fakeAsync(() => {
+    render({ collapsible: true }, true);
+    const trigger = fixture.nativeElement.querySelector('.sd-section-collapse-toggle') as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+    if (!trigger) return;
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  }));
+
+  it('ignores legacy group disable conditions and keeps visibility rules', fakeAsync(() => {
+    fixture.componentRef.setInput('entity', { locked: true });
+    render({
+      disabledWhenExpression: {
+        key: 'disable-group',
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [{ key: 'locked', type: 'condition', field: 'locked', operator: 'EQUAL', value: true, dayInfo: {} }],
+      },
+    });
+    expect(form.get('name')?.enabled).toBeTrue();
+    expect(fixture.nativeElement.querySelector('sd-input input').disabled).toBeFalse();
+    render({ collapsible: true, hidden: true });
+    expect(fixture.nativeElement.querySelector('sd-section')).toBeNull();
+  }));
+});
+
 describe('SdFormRender - initial preview render', () => {
   let fixture: ComponentFixture<SdFormRender>;
 
diff --git a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
index 0e86d0062..27598908b 100644
--- a/versions/v22/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/form-generic/src/models/form-generic-component.model.ts
@@ -279,6 +279,7 @@ export interface SdFormGenericGroup {
   properties: {
     icon: string;
     color: Color;
+    collapsible?: boolean;
     hidden?: boolean;
     hiddenWhenExpression?: SdFormGenericExpression;
     visibleWhenExpression?: SdFormGenericExpression;
diff --git a/versions/v22/projects/sdcorejs-angular/components/history/sd-history.md b/versions/v22/projects/sdcorejs-angular/components/history/sd-history.md
index b1d7413a3..0a9be5689 100644
--- a/versions/v22/projects/sdcorejs-angular/components/history/sd-history.md
+++ b/versions/v22/projects/sdcorejs-angular/components/history/sd-history.md
@@ -20,7 +20,7 @@ Vertical timeline that renders a list of history/audit events — each with titl
 ## When NOT to use
 - For a list of records the user can act on → use a table / list component
 - For chat/messaging → use a dedicated chat thread component
-- For a chart of events over time → use `<sd-chart>` with a time axis
+- For a chart of events over time → use a chart library selected and installed by the consuming application
 - For a single most-recent event → just render plain text with a `<sd-badge>`
 
 ## Inputs
diff --git a/versions/v22/projects/sdcorejs-angular/components/index.ts b/versions/v22/projects/sdcorejs-angular/components/index.ts
index b5f5ba3b4..c938d0c73 100644
--- a/versions/v22/projects/sdcorejs-angular/components/index.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/index.ts
@@ -22,7 +22,6 @@ export * from '@sdcorejs/angular/components/import-excel';
 export * from '@sdcorejs/angular/components/mini-editor';
 export * from '@sdcorejs/angular/components/view';
 export * from '@sdcorejs/angular/components/code-editor';
-export * from '@sdcorejs/angular/components/chart';
 export * from '@sdcorejs/angular/components/editor';
 export * from '@sdcorejs/angular/components/splitter';
 export * from '@sdcorejs/angular/components/preview';
diff --git a/versions/v22/projects/sdcorejs-angular/components/modal/sd-modal.md b/versions/v22/projects/sdcorejs-angular/components/modal/sd-modal.md
index 7b2f22ae5..571ac1427 100644
--- a/versions/v22/projects/sdcorejs-angular/components/modal/sd-modal.md
+++ b/versions/v22/projects/sdcorejs-angular/components/modal/sd-modal.md
@@ -41,7 +41,7 @@ import { SdModal } from '@sdcorejs/angular/components/modal';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Dialog and bottom-sheet body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -101,4 +101,4 @@ The real dialog/bottom-sheet container is associated with its visible heading us
 
 ## Overlay presentation refresh
 
-Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Header/body/footer use aligned 24px horizontal insets (16px on narrow screens), 18px titles and 44px mobile action targets. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
+Default dialog radius is 8px and bottom-sheet radius is 12px; existing --sd-overlay-radius and --sd-overlay-bottom-sheet-radius overrides remain supported. Dialog and bottom-sheet header/footer share 12px vertical padding, 16px horizontal insets and a white background (`--sd-white`, default `#fff`). Body content aligns to the 16px inset; titles remain 18px and mobile action targets remain 44px. Long content scrolls in the body and footer actions wrap; safe-area bottom padding and reduced-motion transitions are handled locally. Existing projected slots, width/view options and guarded dismissal remain available.
diff --git a/versions/v22/projects/sdcorejs-angular/components/modal/src/modal.component.scss b/versions/v22/projects/sdcorejs-angular/components/modal/src/modal.component.scss
index 820b54dd8..73e50c93b 100644
--- a/versions/v22/projects/sdcorejs-angular/components/modal/src/modal.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/modal/src/modal.component.scss
@@ -66,8 +66,7 @@
 }
 
 .sd-modal-header {
-  min-height: 64px;
-  padding: 16px;
+  min-height: 56px;
   display: flex;
   align-items: center;
   gap: 16px;
@@ -175,7 +174,6 @@
 
 .sd-modal-footer {
   min-height: 56px;
-  padding: 16px;
   border-top: 1px solid var(--sd-modal-border);
   display: flex;
   align-items: center;
@@ -213,7 +211,8 @@
 .sd-modal-header,
 .sd-modal-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background: var(--sd-white, #fff);
 }
 .sd-modal-title {
   font-size: 18px;
@@ -222,17 +221,13 @@
   overflow-wrap: anywhere;
 }
 .sd-modal-body {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
   box-sizing: border-box;
 }
 @media (max-width: 600px) {
   .sd-modal-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-modal-body {
-    padding: 0 16px 16px;
-  }
   .sd-modal-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v22/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md b/versions/v22/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
index 092e98f86..881fbeffe 100644
--- a/versions/v22/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
+++ b/versions/v22/projects/sdcorejs-angular/components/query-builder/sd-query-builder.md
@@ -285,5 +285,6 @@ fields: SdQueryBuilderField[] = [
 ## Accessibility
 
 - The builder container is `role="group"` (a set of controls, not a widget) so it takes no tab stop of its own — Tab goes straight to the buttons and pickers inside.
-- "Click empty space to close open dropdowns" is a mouse-only affordance; **Escape** now does the same thing, so keyboard users can dismiss an open add-menu.
-- The add-menu dropdown is `role="group"` and swallows Enter as well as click, so activating a button inside it never reaches the container's "close all" handler.
+- The add-menu renders in a CDK connected overlay on the document body, so modal scroll regions, table cells and other ancestor overflow cannot clip its actions. It anchors to the group's `+` button, can flip above when space below is insufficient, and stays within the viewport.
+- Clicking the transparent backdrop or pressing **Escape** closes the menu. Escape is consumed before it reaches the surrounding modal; only the menu closes.
+- The add-menu is `role="group"` with two native buttons. Opening it focuses the first action, Tab stays within its actions, and closing it restores focus to the `+` trigger. `aria-expanded` on the trigger follows the menu state. Only one group's add-menu can be open at a time; adding a condition or group closes it.
diff --git a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
new file mode 100644
index 000000000..d2f859c13
--- /dev/null
+++ b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder-overlay.spec.ts
@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy as SdAngular22ChangeDetectionStrategy } from '@angular/core';
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { LayoutTestTheme } from '../../../testing/layout-theme.spec';
+import { SdQueryBuilder } from './query-builder.component';
+import { SdQbGroup } from './query-builder.model';
+
+@Component({
+  changeDetection: SdAngular22ChangeDetectionStrategy.Eager,
+  imports: [SdQueryBuilder, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div data-clip style="position: relative; overflow: hidden; height: 90px; width: 500px; margin: 80px 24px">
+      <sd-query-builder [disabled]="disabled" />
+    </div>
+  `,
+})
+class ClippedBuilderHost {
+  disabled = false;
+}
+
+describe('SdQueryBuilder add-menu overlay', () => {
+  let fixture: ComponentFixture<ClippedBuilderHost>;
+  let builder: SdQueryBuilder;
+  let overlays: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedBuilderHost, NoopAnimationsModule] });
+    fixture = TestBed.createComponent(ClippedBuilderHost);
+    fixture.detectChanges();
+    builder = fixture.debugElement.query(By.directive(SdQueryBuilder)).componentInstance;
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function open(index = 0): HTMLButtonElement {
+    const trigger = fixture.nativeElement.querySelectorAll('.qb-btn-add')[index] as HTMLButtonElement;
+    trigger.focus();
+    trigger.click();
+    fixture.detectChanges();
+    tick();
+    return trigger;
+  }
+
+  it('renders both actions outside the clipped container and keeps the lower action clickable', fakeAsync(() => {
+    open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const actions = menu.querySelectorAll('button');
+    expect(actions.length).toBe(2);
+    const lower = actions[1].getBoundingClientRect();
+    expect(lower.height).toBeGreaterThan(0);
+    expect(lower.bottom).toBeGreaterThan(fixture.nativeElement.querySelector('[data-clip]').getBoundingClientRect().bottom);
+    expect(actions[1].contains(document.elementFromPoint(lower.x + lower.width / 2, lower.y + lower.height / 2))).toBeTrue();
+    actions[1].click();
+    fixture.detectChanges();
+    tick();
+    expect(builder.tree().children[0].kind).toBe('group');
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+  }));
+
+  it('adds a condition to the selected nested group and allows only one open menu', fakeAsync(() => {
+    builder.addGroup(builder.tree());
+    fixture.detectChanges();
+    open(0);
+    builder.toggleDropdown(builder.tree().children[0] as SdQbGroup, new Event('click'));
+    fixture.detectChanges();
+    tick();
+    const menus = overlays.querySelectorAll('.qb-dropdown');
+    expect(menus.length).toBe(1);
+    if (!menus.length) return;
+    (menus[0].querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    expect((builder.tree().children[0] as SdQbGroup).children.length).toBe(2);
+    expect(builder.tree().children.length).toBe(1);
+  }));
+
+  it('closes on Escape without bubbling to the modal and restores focus to the trigger', fakeAsync(() => {
+    const trigger = open();
+    const action = overlays.querySelector('.qb-dropdown button') as HTMLButtonElement | null;
+    expect(action).not.toBeNull();
+    if (!action) return;
+    expect(document.activeElement).toBe(action);
+    const escaped = jasmine.createSpy('document escape');
+    document.addEventListener('keydown', escaped);
+    try {
+      action.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      fixture.detectChanges();
+      tick();
+      expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+      expect(document.activeElement).toBe(trigger);
+      expect(escaped).not.toHaveBeenCalled();
+    } finally {
+      document.removeEventListener('keydown', escaped);
+    }
+  }));
+
+  it('closes on backdrop click and removes the overlay when disabled or destroyed', fakeAsync(() => {
+    open();
+    const backdrop = overlays.querySelector('.cdk-overlay-backdrop') as HTMLElement | null;
+    expect(backdrop).not.toBeNull();
+    if (!backdrop) return;
+    backdrop.click();
+    fixture.detectChanges();
+    tick(500);
+    expect(builder.tree().open).toBeFalse();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    expect(builder.tree().open).toBeFalse();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    expect(overlays.querySelector('.qb-dropdown')).toBeNull();
+    open();
+    fixture.destroy();
+    flush();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips above the trigger near the bottom of the viewport', fakeAsync(() => {
+    const clip = fixture.nativeElement.querySelector('[data-clip]') as HTMLElement;
+    Object.assign(clip.style, { position: 'fixed', bottom: '0', margin: '0' });
+    const trigger = open();
+    const menu = overlays.querySelector('.qb-dropdown');
+    expect(menu).not.toBeNull();
+    if (!menu) return;
+    const rect = menu.getBoundingClientRect();
+    expect(rect.bottom).toBeLessThanOrEqual(trigger.getBoundingClientRect().top);
+    expect(rect.top).toBeGreaterThanOrEqual(8);
+  }));
+});
diff --git a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
index 7fcbbbf57..977263a0b 100644
--- a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html
@@ -25,26 +25,39 @@
 <!-- Recursive group node -->
 <ng-template #groupTpl let-group let-isRoot="isRoot" let-parent="parent" let-index="index">
   @let _removeGroupLabel = removeGroupLabel();
+  @let _addNodeLabel = addNodeLabel();
+  @let _disabled = resolvedDisabled();
   <div class="qb-group" [class.is-root]="isRoot">
-    <div class="qb-header" [class.is-open]="group.open">
+    <div class="qb-header">
       <div class="qb-logic-switch">
-        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'AND')">AND</button>
-        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="resolvedDisabled()" (click)="setGroupLogic(group, 'OR')">OR</button>
+        <button type="button" [class.active]="group.logic === 'AND'" [disabled]="_disabled" (click)="setGroupLogic(group, 'AND')">AND</button>
+        <button type="button" [class.active]="group.logic === 'OR'" [disabled]="_disabled" (click)="setGroupLogic(group, 'OR')">OR</button>
       </div>
 
       <div class="qb-actions">
-        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="addNodeLabel()" [disabled]="resolvedDisabled()" (click)="toggleDropdown(group, $event)">+</button>
-        @if (group.open) {
-          <!-- why: dropdown là NHÓM hai nút (role="group"), không phải nút — không nhận tabindex,
-               tab đi thẳng vào hai nút. stopPropagation cho cả click lẫn Enter để thao tác bên
-               trong dropdown không kích hoạt handler "đóng tất cả" của container. -->
-          <div class="qb-dropdown" role="group" (click)="$event.stopPropagation()" (keydown.enter)="$event.stopPropagation()">
+        <button type="button" class="qb-btn qb-btn-add" [title]="addLabel()" [attr.aria-label]="_addNodeLabel" [disabled]="_disabled"
+          cdkOverlayOrigin #addOrigin="cdkOverlayOrigin" [attr.aria-expanded]="!!group.open && !_disabled"
+          (click)="toggleDropdown(group, $event)">+</button>
+        <!-- why: overlay nằm ngoài ancestor overflow; focus trap trả focus về nút + khi đóng. -->
+        <ng-template cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="addOrigin"
+          [cdkConnectedOverlayOpen]="!!group.open && !_disabled"
+          [cdkConnectedOverlayPositions]="addMenuPositions"
+          [cdkConnectedOverlayViewportMargin]="8"
+          [cdkConnectedOverlayFlexibleDimensions]="false"
+          [cdkConnectedOverlayPush]="true"
+          [cdkConnectedOverlayHasBackdrop]="true"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+          (backdropClick)="closeAllDropdowns()"
+          (overlayKeydown)="onAddMenuKeydown($event)">
+          <div class="qb-dropdown" role="group" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" [attr.aria-label]="_addNodeLabel">
             <button type="button" (click)="addRule(group)">+ {{ conditionLabel() }}</button>
             <button type="button" (click)="addGroup(group)">+ {{ groupLabel() }}</button>
           </div>
-        }
+        </ng-template>
         @if (!isRoot) {
-          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="resolvedDisabled()" (click)="removeNode(parent, index)">✕</button>
+          <button type="button" class="qb-btn qb-btn-remove" [title]="_removeGroupLabel" [attr.aria-label]="_removeGroupLabel" [disabled]="_disabled" (click)="removeNode(parent, index)">✕</button>
         }
       </div>
     </div>
diff --git a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
index 3025f6831..e631045ce 100644
--- a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.scss
@@ -87,9 +87,6 @@ $node-gap: 12px;
   position: relative;
   z-index: 1;
 
-  &.is-open {
-    z-index: 1000;
-  }
 }
 
 // AND / OR segmented toggle — active side uses primary.
@@ -167,16 +164,11 @@ $node-gap: 12px;
 }
 
 .qb-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
   background: #fff;
   border: 1px solid $border;
   box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
   border-radius: 6px;
   min-width: 150px;
-  z-index: 100;
   overflow: hidden;
 
   button {
diff --git a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
index b8957417f..c90472925 100644
--- a/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts
@@ -1,4 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -70,12 +72,31 @@ const QB_EMPTY_FIELDS: SdQueryBuilderField[] = [];
   selector: 'sd-query-builder',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, NgTemplateOutlet, SdOperator, SdSelect, SdInput, SdInputNumber, SdDate, SdDatetime, SdItemDefDefDirective],
+  imports: [
+    SdIcon,
+    NgTemplateOutlet,
+    SdOperator,
+    SdSelect,
+    SdInput,
+    SdInputNumber,
+    SdDate,
+    SdDatetime,
+    SdItemDefDefDirective,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    CdkTrapFocus,
+  ],
   templateUrl: './query-builder.component.html',
   styleUrl: './query-builder.component.scss',
 })
 export class SdQueryBuilder {
   readonly #i18n = inject(I18nService);
+  protected readonly addMenuPositions: ConnectedPosition[] = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  ];
 
   // -------------------------------------------------------------------------
   // Inputs
@@ -232,6 +253,11 @@ export class SdQueryBuilder {
   readonly fieldIcon = sdQbFieldIcon;
 
   constructor() {
+    effect(() => {
+      if (this.resolvedDisabled() || this.isView()) {
+        untracked(() => this.closeAllDropdowns());
+      }
+    });
     // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
     // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
     effect(() => {
@@ -311,6 +337,13 @@ export class SdQueryBuilder {
     this.#bumpTree();
   }
 
+  protected onAddMenuKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeAllDropdowns();
+  }
+
   #hasOpenDropdown(node: SdQbNode): boolean {
     if (!sdIsQbGroup(node)) return false;
     return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
diff --git a/versions/v22/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md b/versions/v22/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
index 0344e62c9..e2d011c0f 100644
--- a/versions/v22/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
+++ b/versions/v22/projects/sdcorejs-angular/components/side-drawer/sd-side-drawer.md
@@ -37,7 +37,7 @@ import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 | `[sdFooterLeft]`  | Footer left action group.                           |
 | `[sdFooterRight]` | Footer right action group.                          |
 
-Header, body and footer align to 24px horizontal insets (16px on mobile). Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
+Header and footer use a white background (`--sd-white`, default `#fff`) and compact 12px vertical / 16px horizontal padding. Body content uses `padding: 12px 16px` on desktop and mobile, giving it its own top and bottom spacing within the separate body surface. Body content scrolls, while the footer remains available and wraps on narrow screens. The footer is hidden when both footer slots are empty.
 
 ## Public API
 
@@ -88,7 +88,7 @@ Do not write `document.body.style.overflow` yourself while a drawer is open; the
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: 0; // The drawer supplies the content insets.
 }
 ```
 
@@ -105,4 +105,4 @@ Each open creates a CDK focus trap around the drawer content. Focus moves inside
 
 Opening makes the drawer visible immediately so focus can enter before the slide/fade animation finishes. Closing delays the hidden state until that animation completes. Reduced motion removes these transitions.
 
-The default radius is 8px, overridable through --sd-overlay-radius. Header/body/footer align at 24px horizontally (16px below 600px); the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
+The default radius is 8px, overridable through --sd-overlay-radius. Header/footer use 12px vertical padding and header/body/footer align at 16px horizontally; the body scrolls while footer actions remain available. Close/actions are at least 44px on mobile, footer groups wrap, and reduced motion is enforced by the component itself.
diff --git a/versions/v22/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss b/versions/v22/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
index 1c1ea5c49..603a8d8cb 100644
--- a/versions/v22/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.scss
@@ -37,8 +37,7 @@
   }
 
   &-header {
-    min-height: 64px;
-    padding: 16px;
+    min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -131,8 +130,6 @@
 
   &-footer {
     border-top: 1px solid var(--sd-side-drawer-border);
-    padding: 16px;
-    background-color: var(--sd-side-drawer-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -197,22 +194,19 @@
 .sd-side-drawer-header,
 .sd-side-drawer-footer {
   flex-shrink: 0;
-  padding: 20px 24px;
+  padding: 12px 16px;
+  background-color: var(--sd-white, #fff);
 }
 .sd-side-drawer-content {
-  padding: 0 24px 20px;
+  padding: 12px 16px;
 }
 @media (max-width: 600px) {
   .sd-side-drawer {
     --sd-side-drawer-inset: 8px;
   }
   .sd-side-drawer-header {
-    padding: 16px;
     gap: 8px;
   }
-  .sd-side-drawer-content {
-    padding: 0 16px 16px;
-  }
   .sd-side-drawer-footer {
     padding: 12px 16px max(12px, env(safe-area-inset-bottom));
     flex-wrap: wrap;
diff --git a/versions/v22/projects/sdcorejs-angular/components/tab/sd-tab.md b/versions/v22/projects/sdcorejs-angular/components/tab/sd-tab.md
index 918663850..5d4a9439f 100644
--- a/versions/v22/projects/sdcorejs-angular/components/tab/sd-tab.md
+++ b/versions/v22/projects/sdcorejs-angular/components/tab/sd-tab.md
@@ -34,7 +34,7 @@ Declarative tab container that wraps Angular Material's `mat-tab-group` with a s
 | Name                | Type                                                                                  | Default     | Notes                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `selectedIndex`     | `number` (model — two-way)                                                            | `0`         | Index of the active tab. Two-way bindable via `[(selectedIndex)]`. Auto-clamped to `[0, tabs.length-1]` when the tab count shrinks.                                                                                                                                                                                                                           |
-| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a single bordered container with flush tabs (iOS segmented-control style). |
+| `variant`           | `'line' \| 'pills' \| 'segmented'`                                                    | `'line'`    | Visual skin. `'line'` is Material's default underline ink-bar. `'pills'` renders each tab as a rounded pill with a filled active state (no underline) — useful for nested tab groups and filter bars where the default underline competes with the parent's. `'segmented'` renders a shared container with a 4px gap between tabs (iOS segmented-control style). Hover/ripple layers follow each tab's rounded shape; active pills retain their filled color on hover. |
 | `color`             | `Color` (`'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'`) | `'primary'` | Drives the active-tab + indicator + badge colors via the Core CSS vars (`--sd-<color>`, `--sd-<color>-light`). Same palette as `<sd-button>`, `<sd-badge>` — pick `'warning'` for filter bars surfacing pending items, `'success'` for confirmed flows, etc.                                                                                                  |
 | `headerPosition`    | `'above' \| 'below'`                                                                  | `'above'`   | Forwarded to `mat-tab-group.headerPosition`.                                                                                                                                                                                                                                                                                                                  |
 | `alignTabs`         | `'start' \| 'center' \| 'end'`                                                        | `'start'`   | Forwarded to `mat-tab-group`'s `[mat-align-tabs]` input. **Only takes effect when `stretchTabs` is `false`** — otherwise tabs fill the row evenly and there's nothing to align.                                                                                                                                                                               |
diff --git a/versions/v22/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss b/versions/v22/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
index 7179666c2..b2949f7ca 100644
--- a/versions/v22/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/tab/src/tab-group.component.scss
@@ -102,6 +102,14 @@
   opacity: 0 !important;
 }
 
+// Material renders hover and click ripples in a separate rectangular layer.
+// Clip that layer to the tab shape without clipping the label's focus indicator.
+:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple,
+:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mat-mdc-tab-ripple {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
 // =============================================================================
 // Variant: pills — rounded pill tabs, active filled with primary.
 // Good for nested tab groups, filter bars, light contexts.
@@ -132,7 +140,7 @@
     background: transparent;
     transition: background-color 120ms ease, color 120ms ease;
 
-    &:hover:not(.mat-mdc-tab-disabled) {
+    &:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active) {
       background: var(--sd-tab-badge-bg);
     }
 
@@ -143,12 +151,6 @@
       background: var(--sd-tab-label-active-color);
       .mdc-tab__text-label { color: #ffffff; }
     }
-
-    // why: active pill darken on hover instead of the default whitish state-layer.
-    // box-shadow inset > filter because filter would dim text + icons too.
-    &.mdc-tab--active:hover:not(.mat-mdc-tab-disabled) {
-      box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
-    }
   }
 
   // Inside the pill we still allow the sd-tab__label inline-flex with icon/badge/close.
@@ -166,7 +168,7 @@
 }
 
 // =============================================================================
-// Variant: segmented — single bordered container, tabs sit flush.
+// Variant: segmented — shared container with a small gap between tabs.
 // iOS-style segmented control.
 // =============================================================================
 :host(.sd-tab-group--segmented) ::ng-deep {
@@ -185,7 +187,7 @@
     padding: 3px;
   }
 
-  .mat-mdc-tab-labels { gap: 0; }
+  .mat-mdc-tab-labels { gap: 4px; }
 
   .mat-mdc-tab {
     min-width: 0;
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/sd-table.md b/versions/v22/projects/sdcorejs-angular/components/table/sd-table.md
index eee0bf1bc..bd8134c44 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/sd-table.md
+++ b/versions/v22/projects/sdcorejs-angular/components/table/sd-table.md
@@ -401,9 +401,11 @@ Client-side matching sống ở `matchesColumnFilter` (`services/table-local/tab
 
 Command icons default to Material Symbols Outlined (`material-icons-outlined`). Child command menu items use the same default unless `child.fontSet` is provided. Use icon + title for child commands so menu rows align consistently.
 
+Desktop command `children`, selection action `children` and the selection toolbar More menu use a compact CDK overlay menu: white background, 8px corners, 36px minimum rows, 18px icons and a 4px gap from the trigger. Touch/narrow-screen menu rows remain at least 44px. Menus escape clipped table cells, support arrow-key/typeahead navigation and restore trigger focus on Escape or selection. Existing child visibility, disabled state, custom HTML and callbacks remain supported; no consumer configuration changes are required.
+
 Desktop row commands keep their touch targets within each 24px button so adjacent actions and menu triggers remain independently clickable. Mobile action controls retain their existing sizing.
 
-Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Child menu items retain Material's disabled opacity.
+Disabled desktop row-command icons inherit the button's disabled color from the Material theme, making them visibly muted instead of retaining the active icon color. Disabled child menu items are muted and cannot be activated.
 
 ```ts
 command: {
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
new file mode 100644
index 000000000..0a0a9bbc5
--- /dev/null
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -0,0 +1,67 @@
+.sd-table-action-menu {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(360px, calc(100dvh - 16px));
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--sd-border, #dde0e5);
+  border-radius: 8px;
+  background: var(--sd-white, #fff);
+  color: var(--sd-text, #1a1b1f);
+  box-shadow:
+    0 4px 12px rgba(15, 23, 42, 0.14),
+    0 1px 3px rgba(15, 23, 42, 0.1);
+
+  [cdkMenuItem] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: start;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      background: var(--sd-black100, #f3f3f3);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sd-primary, #005cbb);
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+  }
+
+  .sd-table-action-menu__icon {
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+
+@media (max-width: 600px), (pointer: coarse) {
+  .sd-table-action-menu [cdkMenuItem] {
+    min-height: 44px;
+  }
+}
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
new file mode 100644
index 000000000..7cfd448fc
--- /dev/null
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.ts
@@ -0,0 +1,67 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { Directive, ElementRef, afterRenderEffect, inject, DestroyRef, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SdButton } from '@sdcorejs/angular/components/button';
+
+export const TABLE_ACTION_MENU_POSITIONS: ConnectedPosition[] = [
+  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+  { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+];
+
+// why: CDK gắn trên host sd-button, nhưng focus/ARIA và Enter/Space phải thuộc nút HTML bên trong.
+@Directive({
+  selector: 'sd-button[sdTableMenuButton]',
+  standalone: true,
+  hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: sdTableMenuButton'] }],
+})
+export class SdTableMenuButtonDirective {
+  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  readonly #trigger = inject(CdkMenuTrigger);
+  readonly #sdButton = inject(SdButton);
+  readonly #opened = signal(false);
+  #button?: HTMLButtonElement;
+
+  constructor() {
+    this.#trigger.menuPosition = TABLE_ACTION_MENU_POSITIONS;
+    const destroyRef = inject(DestroyRef);
+    this.#trigger.opened.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => this.#opened.set(true));
+    this.#trigger.closed.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+      this.#opened.set(false);
+      if (this.#button?.isConnected && this.#trigger.getMenu()?.nativeElement.contains(this.#host.ownerDocument.activeElement)) {
+        this.#button.focus();
+      }
+    });
+    afterRenderEffect(() => {
+      this.#sdButton.type();
+      this.#opened();
+      this.#syncButton();
+    });
+    destroyRef.onDestroy(() => this.#button?.removeEventListener('keydown', this.#nativeActivation, true));
+  }
+
+  readonly #nativeActivation = (event: KeyboardEvent): void => {
+    // why: để nút native tự phát click đúng một lần, không cho CDK toggle thêm ở keydown của host.
+    if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+  };
+
+  #syncButton(): void {
+    const button = this.#host.querySelector('button') ?? undefined;
+    if (button !== this.#button) {
+      this.#button?.removeEventListener('keydown', this.#nativeActivation, true);
+      this.#button = button;
+      button?.addEventListener('keydown', this.#nativeActivation, true);
+    }
+    button?.setAttribute('aria-haspopup', 'menu');
+    button?.setAttribute('aria-expanded', String(this.#trigger.isOpen()));
+    const menuId = this.#trigger.getMenu()?.nativeElement.id;
+    if (menuId) button?.setAttribute('aria-controls', menuId);
+    else button?.removeAttribute('aria-controls');
+    this.#host.removeAttribute('role');
+    this.#host.removeAttribute('aria-haspopup');
+    this.#host.removeAttribute('aria-expanded');
+    this.#host.removeAttribute('aria-controls');
+  }
+}
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 38cfbc7b3..9ed43877f 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -24,7 +24,9 @@
       <button
         type="button"
         [attr.data-autoid]="_autoId + '-' + command.key"
-        [matMenuTriggerFor]="menu"
+        [cdkMenuTriggerFor]="menu"
+        [cdkMenuPosition]="menuPositions"
+        [disabled]="_meta.disabled"
         [attr.aria-label]="_meta.title"
         aria-haspopup="menu"
         mat-icon-button>
@@ -34,29 +36,41 @@
           <sd-icon class="c-icon" [fontSet]="command.fontSet" name="more_vert"></sd-icon>
         }
       </button>
-      <mat-menu #menu="matMenu" [attr.data-autoid]="_autoId + '-' + command.key + '-menu'">
-        <span>
+      <ng-template #menu>
+        <div
+          cdkMenu
+          tabindex="-1"
+          class="sd-table-action-menu"
+          [attr.aria-label]="_meta.title"
+          [attr.data-autoid]="_autoId + '-' + command.key + '-menu'"
+          (keydown.escape)="$event.stopPropagation()">
           @for (childCommand of command.children; track childCommand.key) {
             @let _childMeta = _item | command: childCommand;
             <button
               [attr.data-autoid]="_autoId + '-' + command.key + '-' + childCommand.key"
-              mat-menu-item
-              (click)="childCommand.click(_item.data)"
+              type="button"
+              cdkMenuItem
+              [cdkMenuItemDisabled]="_childMeta.disabled"
+              [cdkMenuitemTypeaheadLabel]="_childMeta.title"
+              [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
               [disabled]="_childMeta.disabled">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
                 <span class="sd-command-menu-item__content">
-                  <sd-icon class="sd-command-menu-item__icon"
+                  <sd-icon
+                    class="sd-table-action-menu__icon"
                     [color]="childCommand.color || 'secondary'"
-                    [fontSet]="childCommand.fontSet" [name]="_childMeta.icon"></sd-icon>
+                    [fontSet]="childCommand.fontSet"
+                    [name]="_childMeta.icon"></sd-icon>
                   <span class="sd-command-menu-item__title">{{ _childMeta.title }}</span>
                 </span>
               }
             </button>
           }
-        </span>
-      </mat-menu>
+        </div>
+      </ng-template>
     }
   }
 }
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
index c90841d55..fe78277aa 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../../assets/scss/core/color.scss' as color;
 @use 'sass:map';
+@use '../action-menu/action-menu';
 
 :host {
   display: flex;
@@ -42,20 +43,8 @@ button[mat-icon-button]:disabled sd-icon.c-icon {
   width: 100%;
 }
 
-// why: `margin-right: 0 !important` ở đây từng để chặn margin Material gắn vào `.mat-icon` trong
-// mat-menu. sd-icon đã trung hoà ở component nên bỏ được; khoảng cách với nhãn là `gap` của
-// .sd-command-menu-item__content.
-.sd-command-menu-item__icon {
-  color: map.get(color.$color_map, 'text-secondary') !important;
-  width: 24px;
-  height: 24px;
-  font-size: 18px;
-  line-height: 24px !important;
-  flex: 0 0 24px;
-}
-
 .sd-command-menu-item__title {
   min-width: 0;
   line-height: 20px;
-  white-space: nowrap;
+  white-space: normal;
 }
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 9e6a20aed..98e74035f 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -56,7 +56,7 @@ describe('DesktopCommand', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const menu = document.body.querySelector('.mat-mdc-menu-panel') as HTMLElement;
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     const content = menu.querySelector('.sd-command-menu-item__content') as HTMLElement;
     const icon = menu.querySelector('mat-icon') as HTMLElement;
     const title = menu.querySelector('.sd-command-menu-item__title') as HTMLElement;
@@ -64,6 +64,71 @@ describe('DesktopCommand', () => {
     expect(content).not.toBeNull();
     expect(icon.classList).toContain('material-icons-outlined');
     expect(title.textContent?.trim()).toBe('Edit');
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(menu.querySelector('button')!.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+  });
+
+  it('keeps hidden/disabled child rules and restores the command trigger after Escape', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    fixture.componentInstance.commands = [
+      {
+        title: 'More',
+        children: [
+          { title: 'Hidden', hidden: async () => true, click: clicked },
+          { title: 'Disabled', disabled: true, click: clicked },
+          { title: 'Allowed', click: clicked },
+        ],
+      },
+    ];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.textContent).not.toContain('Hidden');
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    items[0].click();
+    expect(clicked).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(items[1]);
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
+    items[1].dispatchEvent(escape);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('renders outside a clipped row and invokes the child once with its row data', async () => {
+    const clicked = jasmine.createSpy('clicked');
+    Object.assign(fixture.nativeElement.style, {
+      position: 'fixed',
+      top: '32px',
+      left: '32px',
+      width: '80px',
+      height: '24px',
+      overflow: 'hidden',
+    });
+    fixture.componentInstance.commands = [{ title: 'More', children: [{ title: 'Run', click: clicked }] }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
+    expect(fixture.nativeElement.contains(menu)).toBeFalse();
+    const item = menu.querySelector('button')!;
+    const bounds = item.getBoundingClientRect();
+    expect(document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2)?.closest('button')).toBe(item);
+    item.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(clicked).toHaveBeenCalledOnceWith(fixture.componentInstance.item.data);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
   });
 
   // why: hai nút command từng mang aria-hidden="true" — chúng là <button> THẬT, vẫn nhận tab focus
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
index 803bb0976..feab3cae1 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { TABLE_ACTION_MENU_POSITIONS } from '../action-menu/action-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdTableCommand } from '../../models/table-command.model';
 import { SdTableItem } from '../../models/table-item.model';
@@ -18,9 +19,10 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   host: {
     '[attr.data-autoid]': 'autoId()',
   },
-  imports: [SdIcon, CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, CommandPipe, CommandFilterPipe],
+  imports: [SdIcon, CommonModule, MatTooltipModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, MatButtonModule, CommandPipe, CommandFilterPipe],
 })
 export class DesktopCommand {
+  readonly menuPositions = TABLE_ACTION_MENU_POSITIONS;
   readonly autoIdInput = input<string | null | undefined>(undefined, { alias: 'autoId' });
   readonly item = input.required<SdTableItem>();
   readonly itemIndex = input.required<number>();
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
index 50634c03e..5706edc7a 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action-layout.component.spec.ts
@@ -58,6 +58,54 @@ describe('Table selection toolbar layout and overflow', () => {
     expect(clear).toHaveBeenCalledTimes(1);
   });
 
+  it('opens compact child actions from the native button and returns focus after Escape', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const menu = TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.classList).toContain('sd-table-action-menu');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(menu.id);
+    const first = menu.querySelector('button')!;
+    expect(first.getBoundingClientRect().height).toBeLessThanOrEqual(36);
+    expect(document.activeElement).toBe(first);
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="menu"]')).toBeNull();
+  });
+
+  it('dismisses child actions after running them and removes an open menu when selection clears', async () => {
+    const group = { title: 'Reports', children: actions.slice(2) };
+    fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [group] } });
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('.sd-selection-direct button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const overlay = TestBed.inject(OverlayContainer).getContainerElement();
+    overlay.querySelector<HTMLButtonElement>('button')!.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(callbacks[2]).toHaveBeenCalledOnceWith([{ id: 1 }, { id: 2 }]);
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+    // SdButton throttles repeated pointer clicks; ArrowDown opens immediately.
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeTruthy();
+    fixture.componentRef.setInput('selectedTableItems', []);
+    fixture.detectChanges();
+    expect(overlay.querySelector('[role="menu"]')).toBeNull();
+  });
+
   it('keeps grouped overflow actions and excludes children unavailable to one selected row', () => {
     const group = { title: 'Reports', children: actions.slice(2) };
     fixture.componentRef.setInput('tableOption', { type: 'local', columns: [], selector: { actions: [...actions.slice(0, 2), group] } });
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
index af44d23c9..93ebca5d3 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.html
@@ -1,4 +1,5 @@
 @let _autoId = autoId();
+@let _moreLabel = moreLabel();
 @let _direct = directActions();
 @let _overflow = overflowActions();
 @if (opened()) {
@@ -33,21 +34,30 @@
             [type]="action.type || 'light'"
             [fontSet]="action.fontSet"
             [title]="action.title"
-            [matMenuTriggerFor]="childrenMenu" />
-          <mat-menu #childrenMenu="matMenu">
-            @for (child of action.children; track $index) {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                (click)="onClickAction(child)">
-                @if (child.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                }
-                <span>{{ child.title }}</span>
-              </button>
-            }
-          </mat-menu>
+            [sdTableMenuButton]="childrenMenu" />
+          <ng-template #childrenMenu>
+            <div
+              cdkMenu
+              tabindex="-1"
+              class="sd-table-action-menu"
+              [attr.aria-label]="action.title || _moreLabel"
+              (keydown.escape)="$event.stopPropagation()">
+              @for (child of action.children; track $index) {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                  [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                  [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(child)">
+                  @if (child.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                  }
+                  <span>{{ child.title }}</span>
+                </button>
+              }
+            </div>
+          </ng-template>
         }
       }
       @if (_overflow.length) {
@@ -55,44 +65,55 @@
           class="sd-selection-more"
           size="sm"
           prefixIcon="more_horiz"
-          [title]="moreLabel()"
+          [title]="_moreLabel"
           color="secondary"
           type="light"
           [autoId]="_autoId ? _autoId + '-more-actions' : null"
-          [matMenuTriggerFor]="moreMenu" />
-        <mat-menu #moreMenu="matMenu">
-          @for (entry of _overflow; track entry.index) {
-            @let action = entry.action;
-            @if (action.variant === 'normal') {
-              <button
-                mat-menu-item
-                type="button"
-                [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
-                (click)="onClickAction(action)">
-                @if (action.icon) {
-                  <sd-icon class="sd-selection-menu-icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
-                }
-                <span>{{ action.title }}</span>
-              </button>
-            } @else {
-              <div role="group" [attr.aria-label]="action.title">
-                <div class="sd-selection-menu-heading">{{ action.title }}</div>
-                @for (child of action.children; track $index) {
-                  <button
-                    mat-menu-item
-                    type="button"
-                    [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
-                    (click)="onClickAction(child)">
-                    @if (child.icon) {
-                      <sd-icon class="sd-selection-menu-icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
-                    }
-                    <span>{{ child.title }}</span>
-                  </button>
-                }
-              </div>
+          [sdTableMenuButton]="moreMenu" />
+        <ng-template #moreMenu>
+          <div
+            cdkMenu
+            tabindex="-1"
+            class="sd-table-action-menu"
+            [attr.aria-label]="_moreLabel"
+            (keydown.escape)="$event.stopPropagation()">
+            @for (entry of _overflow; track entry.index) {
+              @let action = entry.action;
+              @if (action.variant === 'normal') {
+                <button
+                  cdkMenuItem
+                  type="button"
+                  [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index : null"
+                  [cdkMenuitemTypeaheadLabel]="action.title || ''"
+                  [style.color]="action.color ? 'var(--sd-' + action.color + ')' : null"
+                  (cdkMenuItemTriggered)="onClickAction(action)">
+                  @if (action.icon) {
+                    <sd-icon class="sd-table-action-menu__icon" [fontSet]="action.fontSet" [name]="action.icon" [color]="action.color" />
+                  }
+                  <span>{{ action.title }}</span>
+                </button>
+              } @else {
+                <div role="group" [attr.aria-label]="action.title">
+                  <div class="sd-selection-menu-heading">{{ action.title }}</div>
+                  @for (child of action.children; track $index) {
+                    <button
+                      cdkMenuItem
+                      type="button"
+                      [attr.data-autoid]="_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null"
+                      [cdkMenuitemTypeaheadLabel]="child.title || ''"
+                      [style.color]="child.color ? 'var(--sd-' + child.color + ')' : null"
+                      (cdkMenuItemTriggered)="onClickAction(child)">
+                      @if (child.icon) {
+                        <sd-icon class="sd-table-action-menu__icon" [fontSet]="child.fontSet" [name]="child.icon" [color]="child.color" />
+                      }
+                      <span>{{ child.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
             }
-          }
-        </mat-menu>
+          </div>
+        </ng-template>
       }
       <button
         type="button"
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
index a2dcbfda0..60c0d0791 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.scss
@@ -1,3 +1,5 @@
+@use '../action-menu/action-menu';
+
 :host {
   display: block;
   flex-shrink: 0;
@@ -61,12 +63,8 @@
     font-size: 18px;
   }
 }
-.sd-selection-menu-icon {
-  margin-right: 12px;
-  vertical-align: middle;
-}
 .sd-selection-menu-heading {
-  padding: 8px 16px 4px;
+  padding: 6px 12px 4px;
   color: var(--sd-text-secondary, #62676d);
   font-size: 12px;
   font-weight: 600;
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
index 58819c6cd..7c3edccec 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/selector-action/selector-action.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { MatMenuModule } from '@angular/material/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { SdTableMenuButtonDirective } from '../action-menu/action-menu';
 import { SdButton } from '@sdcorejs/angular/components/button';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
@@ -13,7 +14,7 @@ import { SdIcon } from '@sdcorejs/angular/modules/icon';
   templateUrl: './selector-action.component.html',
   styleUrl: './selector-action.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SdIcon, MatMenuModule, SdButton, SdQuickAction],
+  imports: [SdIcon, CdkMenu, CdkMenuItem, SdTableMenuButtonDirective, SdButton, SdQuickAction],
 })
 export class SelectorActionComponent {
   // ==========================================
diff --git a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
new file mode 100644
index 000000000..aa25164e5
--- /dev/null
+++ b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy-overlay.spec.ts
@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy as SdAngular22ChangeDetectionStrategy } from '@angular/core';
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { BrowserUtilities } from '@sdcorejs/utils/fns';
+import { LayoutTestTheme } from '../../testing/layout-theme.spec';
+import { SdHoverCopyDirective } from './sd-hover-copy.directive';
+
+@Component({
+  changeDetection: SdAngular22ChangeDetectionStrategy.Eager,
+  imports: [SdHoverCopyDirective, LayoutTestTheme],
+  template: `
+    <sd-layout-test-theme />
+    <div style="overflow: hidden; width: 260px; margin: 80px 24px">
+      <table style="width: 100%; border-collapse: separate">
+        <tr style="position: relative; z-index: 20; background: white">
+          <td style="height: 40px">Previous row</td>
+        </tr>
+        <tr>
+          <td style="height: 40px; overflow: hidden" sdHoverCopy="cell-value" [sdHoverCopyDisabled]="disabled">Cell value</td>
+        </tr>
+      </table>
+    </div>
+  `,
+})
+class ClippedCopyHost {
+  disabled = false;
+}
+
+describe('SdHoverCopy overlay in table cells', () => {
+  let fixture: ComponentFixture<ClippedCopyHost>;
+  let overlays: HTMLElement;
+  let cell: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ClippedCopyHost] });
+    spyOn(BrowserUtilities, 'copyToClipboard');
+    fixture = TestBed.createComponent(ClippedCopyHost);
+    fixture.detectChanges();
+    cell = fixture.nativeElement.querySelector('[sdHoverCopy]');
+    overlays = TestBed.inject(OverlayContainer).getContainerElement();
+  });
+
+  function copy() {
+    cell.dispatchEvent(new MouseEvent('mouseenter'));
+    (cell.querySelector('button:last-of-type') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    tick();
+  }
+
+  it('paints the copied tooltip above adjacent rows outside the clipped cell', fakeAsync(() => {
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]') as HTMLElement | null;
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.height).toBeGreaterThan(0);
+    expect(getComputedStyle(tooltip.closest('.cdk-overlay-pane')!).pointerEvents).toBe('none');
+    expect(rect.top).toBeLessThan(cell.getBoundingClientRect().top);
+    // why: tooltip intentionally ignores pointer events; enable hit testing only for the paint-order probe.
+    tooltip.style.pointerEvents = 'auto';
+    expect(tooltip.contains(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2))).toBeTrue();
+    tooltip.style.pointerEvents = 'none';
+    tick(1000);
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+  }));
+
+  it('keeps one button and cleans up the overlay on scroll, disable and destroy', fakeAsync(() => {
+    expect(cell.querySelectorAll('button').length).toBe(1);
+    copy();
+    cell.parentElement!.dispatchEvent(new Event('scroll'));
+    expect(overlays.querySelector('[role="tooltip"]')).toBeNull();
+    copy();
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(cell.querySelector('button')).toBeNull();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+    fixture.componentInstance.disabled = false;
+    fixture.detectChanges();
+    copy();
+    fixture.destroy();
+    expect(overlays.querySelector('.cdk-overlay-pane')).toBeNull();
+  }));
+
+  it('flips below the button when the cell is at the top of the viewport', fakeAsync(() => {
+    const table = cell.closest('table')!;
+    Object.assign(table.parentElement!.style, { position: 'fixed', top: '0', margin: '0' });
+    table.rows[0].style.display = 'none';
+    copy();
+    const tooltip = overlays.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    if (!tooltip) return;
+    const rect = tooltip.getBoundingClientRect();
+    expect(rect.top).toBeGreaterThanOrEqual(cell.querySelector('button')!.getBoundingClientRect().bottom);
+    expect(rect.left).toBeGreaterThanOrEqual(8);
+    fixture.destroy();
+  }));
+});
diff --git a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
index 26c7de7c6..860d19fd7 100644
--- a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.spec.ts
@@ -1,19 +1,10 @@
-/**
- * SdHoverCopyDirective spec
- *
- * Note: the directive creates its copy button both in `ngOnChanges` (for the
- * initial-value change on the `sdHoverCopyDisabled` input) and again in
- * `ngOnInit`.  The directive's internal `#copyButton` reference always points
- * to the LAST button created (the one from `ngOnInit`).  Tests that care about
- * the button managed by the directive use `getDirectiveButton()` which finds
- * the element whose listener and style are wired to `#copyButton`.
- */
 import { ChangeDetectionStrategy as SdAngular22ChangeDetectionStrategy } from '@angular/core';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { SdHoverCopyDirective } from './sd-hover-copy.directive';
 
 @Component({
@@ -49,19 +40,13 @@ describe('SdHoverCopyDirective', () => {
     directiveInstance = fixture.debugElement.query(By.directive(SdHoverCopyDirective)).injector.get(SdHoverCopyDirective);
   });
 
-  /**
-   * The directive keeps `#copyButton` as its last-created button.
-   * `querySelectorAll('button')` returns all buttons; the directive manages the
-   * LAST one appended (ngOnInit fires after ngOnChanges creates the first).
-   */
   function getDirectiveButton(): HTMLElement | null {
-    const all = hostEl.querySelectorAll('button');
-    return all.length ? (all[all.length - 1] as HTMLElement) : null;
+    return hostEl.querySelector('button');
   }
 
   function getTooltip(): HTMLElement | null {
     const btn = getDirectiveButton();
-    return btn ? (btn.querySelector('span') as HTMLElement) : null;
+    return btn?.querySelector('span') ?? TestBed.inject(OverlayContainer).getContainerElement().querySelector('[role="tooltip"]');
   }
 
   // ─── creation ────────────────────────────────────────────────────────────────
@@ -71,8 +56,8 @@ describe('SdHoverCopyDirective', () => {
       expect(host).toBeTruthy();
     });
 
-    it('appends at least one copy button inside the host element on init', () => {
-      expect(hostEl.querySelector('button')).not.toBeNull();
+    it('appends exactly one copy button inside the host element on init', () => {
+      expect(hostEl.querySelectorAll('button').length).toBe(1);
     });
 
     it('sets host element position to relative', () => {
diff --git a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
index ca6cc7e17..83ca46159 100644
--- a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
+++ b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.directive.ts
@@ -1,4 +1,7 @@
 import { DestroyRef, Directive, ElementRef, inject, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges, input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { DomPortal } from '@angular/cdk/portal';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { I18nService } from '@sdcorejs/angular/i18n';
 
@@ -14,9 +17,14 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
   readonly #i18n = inject(I18nService);
   readonly #destroyRef = inject(DestroyRef);
+  readonly #overlay = inject(Overlay);
+  readonly #document = inject(DOCUMENT);
 
   #copyButton: HTMLElement | null = null;
   #tooltip!: HTMLElement;
+  #tooltipOverlay: OverlayRef | null = null;
+  #unlistenCopy: (() => void) | null = null;
+  readonly #onScroll = () => this.#hideTooltip();
   #hideTooltipTimer: ReturnType<typeof setTimeout> | null = null;
   get #defaultTooltip(): string {
     return this.#i18n.t('core.directive.hover-copy.tooltip');
@@ -34,7 +42,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     // why: timeout 1s ẩn tooltip trước đây không được lưu lại cũng không huỷ, mà directive lại
     // không có teardown nào. Host bị destroy trong vòng 1s đó thì callback vẫn chạy và ghi style
     // lên node đã tháo khỏi DOM (timer sống lâu hơn view).
-    this.#destroyRef.onDestroy(() => this.#clearHideTooltipTimer());
+    this.#destroyRef.onDestroy(() => this.#removeCopyButton());
   }
 
   // https://onemount.atlassian.net/browse/SM-2287
@@ -61,6 +69,8 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #createAndAppendCopyButton(): void {
+    // why: ngOnChanges có thể tạo nút trước ngOnInit; chỉ giữ một nút và một overlay owner.
+    if (this.#copyButton) return;
     const parent = this.el.nativeElement;
     this.renderer.setStyle(parent, 'position', 'relative');
 
@@ -102,12 +112,9 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
 
     // Tooltip
     this.#tooltip = this.renderer.createElement('span');
+    this.renderer.setAttribute(this.#tooltip, 'role', 'tooltip');
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
-    this.renderer.setStyle(this.#tooltip, 'position', 'absolute');
-    this.renderer.setStyle(this.#tooltip, 'bottom', '100%');
-    this.renderer.setStyle(this.#tooltip, 'left', '50%');
-    this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');
-    this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
     this.renderer.setStyle(this.#tooltip, 'background', '#333');
     this.renderer.setStyle(this.#tooltip, 'color', '#fff');
     this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');
@@ -123,7 +130,7 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
     this.renderer.appendChild(parent, this.#copyButton);
 
     // Listen click
-    this.renderer.listen(this.#copyButton, 'click', () => {
+    this.#unlistenCopy = this.renderer.listen(this.#copyButton, 'click', () => {
       const copyText = this.copyText();
       if (copyText && !this.sdHoverCopyDisabled()) {
         BrowserUtilities.copyToClipboard(String(copyText));
@@ -144,8 +151,12 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #removeCopyButton(): void {
-    // why: tooltip nằm trong button — bỏ button mà để timer chạy tiếp là ghi style lên node đã gỡ.
     this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.dispose();
+    this.#tooltipOverlay = null;
+    this.#unlistenCopy?.();
+    this.#unlistenCopy = null;
     if (this.#copyButton) {
       this.renderer.removeChild(this.el.nativeElement, this.#copyButton);
       this.#copyButton = null;
@@ -153,13 +164,41 @@ export class SdHoverCopyDirective implements OnInit, OnChanges {
   }
 
   #showTooltip(message: string) {
+    if (!this.#copyButton) return;
+    if (!this.#tooltipOverlay) {
+      // why: portal thoát khỏi overflow/stacking context của table cell và modal body.
+      this.#tooltipOverlay = this.#overlay.create({
+        positionStrategy: this.#overlay
+          .position()
+          .flexibleConnectedTo(this.#copyButton)
+          .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+          ])
+          .withFlexibleDimensions(false)
+          .withViewportMargin(8)
+          .withPush(true),
+      });
+    }
     this.renderer.setProperty(this.#tooltip, 'innerText', message);
+    this.renderer.setStyle(this.#tooltip, 'display', 'block');
     this.renderer.setStyle(this.#tooltip, 'opacity', '1');
+    if (!this.#tooltipOverlay.hasAttached()) {
+      this.#tooltipOverlay.attach(new DomPortal(this.#tooltip));
+    }
+    this.renderer.setStyle(this.#tooltipOverlay.overlayElement, 'pointerEvents', 'none');
+    this.#tooltipOverlay.updatePosition();
+    // why: capture bắt cả scroll ở ancestor không khai cdkScrollable, tránh tooltip trôi khỏi cell.
+    this.#document.addEventListener('scroll', this.#onScroll, true);
   }
 
   #hideTooltip() {
+    this.#clearHideTooltipTimer();
+    this.#document.removeEventListener('scroll', this.#onScroll, true);
+    this.#tooltipOverlay?.detach();
     this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);
     this.renderer.setStyle(this.#tooltip, 'opacity', '0');
+    this.renderer.setStyle(this.#tooltip, 'display', 'none');
   }
 
   @HostListener('mouseenter')
diff --git a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.md b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
index ed13ac3db..80fb5c776 100644
--- a/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
+++ b/versions/v22/projects/sdcorejs-angular/directives/src/sd-hover-copy.md
@@ -29,11 +29,13 @@ None.
 
 ## Behavior
 - `ngOnChanges` (fires before `ngOnInit`): if `sdHoverCopyDisabled` changes to `false` and no button exists yet, creates one; if it changes to `true`, removes the existing button from the DOM.
-- `ngOnInit`: if not disabled, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. Also appends a tooltip `<span>` seeded from `core.directive.hover-copy.tooltip`.
+- `ngOnInit`: if not disabled and no button exists, creates a small `<button>` (with inline copy SVG) absolutely positioned at the right of the host (`top: 50%, right: 4px, translateY(-50%)`), initially `display: none`. Forces host to `position: relative`. The tooltip starts hidden inside the button; creation is idempotent across `ngOnChanges` and `ngOnInit`.
 - `mouseenter` on host: shows the button (`display: block`); skipped when `sdHoverCopyDisabled` is `true` or the button was never created.
 - `mouseleave` on host: hides the button (`display: none`) and resets the tooltip to `core.directive.hover-copy.tooltip` with `opacity: 0`.
 - Clicking the copy button: calls `BrowserUtilities.copyToClipboard(String(copyText))`, swaps the tooltip to `core.directive.hover-copy.copied` with `opacity: 1`, then auto-hides after 1000 ms by resetting to `core.directive.hover-copy.tooltip` with `opacity: 0`.
-- **Teardown**: the 1000 ms auto-hide timer is stored and cleared via `DestroyRef.onDestroy`, and also when the button is removed (`sdHoverCopyDisabled` → `true`). A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
+- The visible tooltip is portalled into the CDK overlay container on the document body, outside table row stacking contexts and ancestor overflow. It anchors above the copy button, falls back below near the viewport edge, and stays within an 8px viewport margin. It does not intercept pointer events.
+- Scrolling any ancestor hides the tooltip, including scroll containers without `cdkScrollable`. Mouse leave and the auto-hide timer also detach it from the overlay.
+- **Teardown**: disabling or destroying the host clears the timer, removes the scroll/click listeners, disposes the overlay and removes the copy button. A host destroyed within that second no longer runs the reset against a detached node, and clicking twice restarts the timer instead of leaving the first one pending.
 
 ## i18n
 Both tooltip strings resolve through `I18nService` at the moment they are shown, so they follow the
@@ -45,7 +47,6 @@ active language (VI `Sao chép` / `Đã sao chép`, EN `Copy` / `Copied`, …):
 | Confirmation after a copy | `core.directive.hover-copy.copied` |
 
 ## Known issues
-- **Double-button creation on first render**: because `ngOnChanges` fires before `ngOnInit`, both hooks create a copy button when `sdHoverCopyDisabled` starts as `false`. The directive's internal reference points to the second button (created in `ngOnInit`), so behaviour is correct, but an orphaned first button element stays in the host's DOM. Tracked as a follow-up to SM-2287.
 - **No `aria-label`**: the generated `<button>` has no accessible label. Screen-reader users cannot identify its purpose. A future fix should add `aria-label="Sao chép"` (or the localised equivalent) to the button element.
 
 ## Examples
diff --git a/versions/v22/projects/sdcorejs-angular/i18n/src/en.ts b/versions/v22/projects/sdcorejs-angular/i18n/src/en.ts
index cb10863c9..06b465fe8 100644
--- a/versions/v22/projects/sdcorejs-angular/i18n/src/en.ts
+++ b/versions/v22/projects/sdcorejs-angular/i18n/src/en.ts
@@ -418,6 +418,7 @@ export const EN_MESSAGES = {
   'core.component.form-builder.group-children': 'Children',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Accent color',
+  'core.component.form-builder.collapsible': 'Allow expand/collapse',
   'core.component.form-builder.group-no-children': 'No fields yet. Add or drag fields into this group.',
   'core.component.form-builder.break': 'Break',
 
diff --git a/versions/v22/projects/sdcorejs-angular/i18n/src/ja.ts b/versions/v22/projects/sdcorejs-angular/i18n/src/ja.ts
index 5dffdabf6..a3a89bdaa 100644
--- a/versions/v22/projects/sdcorejs-angular/i18n/src/ja.ts
+++ b/versions/v22/projects/sdcorejs-angular/i18n/src/ja.ts
@@ -420,6 +420,7 @@ export const JA_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子要素',
   'core.component.form-builder.group-icon': 'アイコン',
   'core.component.form-builder.group-accent-color': 'アクセントカラー',
+  'core.component.form-builder.collapsible': '展開・折りたたみを許可',
   'core.component.form-builder.group-no-children': 'フィールドがまだありません。このグループにフィールドを追加またはドラッグしてください。',
   'core.component.form-builder.break': '改行',
 
diff --git a/versions/v22/projects/sdcorejs-angular/i18n/src/ko.ts b/versions/v22/projects/sdcorejs-angular/i18n/src/ko.ts
index 950f8c05d..e4e8c4b3c 100644
--- a/versions/v22/projects/sdcorejs-angular/i18n/src/ko.ts
+++ b/versions/v22/projects/sdcorejs-angular/i18n/src/ko.ts
@@ -419,6 +419,7 @@ export const KO_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '하위 요소',
   'core.component.form-builder.group-icon': '아이콘',
   'core.component.form-builder.group-accent-color': '강조 색상',
+  'core.component.form-builder.collapsible': '펼치기/접기 허용',
   'core.component.form-builder.group-no-children': '필드가 아직 없습니다. 이 그룹에 필드를 추가하거나 드래그하세요.',
   'core.component.form-builder.break': '줄 바꿈',
 
diff --git a/versions/v22/projects/sdcorejs-angular/i18n/src/vi.ts b/versions/v22/projects/sdcorejs-angular/i18n/src/vi.ts
index ac26c06b0..dbe94ea22 100644
--- a/versions/v22/projects/sdcorejs-angular/i18n/src/vi.ts
+++ b/versions/v22/projects/sdcorejs-angular/i18n/src/vi.ts
@@ -419,6 +419,7 @@ export const VI_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': 'Thành phần con',
   'core.component.form-builder.group-icon': 'Icon',
   'core.component.form-builder.group-accent-color': 'Màu nhấn',
+  'core.component.form-builder.collapsible': 'Cho phép thu gọn/mở rộng',
   'core.component.form-builder.group-no-children': 'Chưa có trường nào. Thêm hoặc kéo trường vào group này.',
   'core.component.form-builder.break': 'Ngắt dòng',
 
diff --git a/versions/v22/projects/sdcorejs-angular/i18n/src/zh.ts b/versions/v22/projects/sdcorejs-angular/i18n/src/zh.ts
index b429856af..066257b96 100644
--- a/versions/v22/projects/sdcorejs-angular/i18n/src/zh.ts
+++ b/versions/v22/projects/sdcorejs-angular/i18n/src/zh.ts
@@ -419,6 +419,7 @@ export const ZH_MESSAGES: Record<keyof typeof EN_MESSAGES, string> = {
   'core.component.form-builder.group-children': '子项',
   'core.component.form-builder.group-icon': '图标',
   'core.component.form-builder.group-accent-color': '强调色',
+  'core.component.form-builder.collapsible': '允许展开/折叠',
   'core.component.form-builder.group-no-children': '尚无字段。请向此分组添加或拖入字段。',
   'core.component.form-builder.break': '换行',
 
diff --git a/versions/v22/projects/sdcorejs-angular/karma.conf.js b/versions/v22/projects/sdcorejs-angular/karma.conf.js
index adbeaf7da..ee95161f9 100644
--- a/versions/v22/projects/sdcorejs-angular/karma.conf.js
+++ b/versions/v22/projects/sdcorejs-angular/karma.conf.js
@@ -98,7 +98,7 @@ module.exports = function (config) {
     reporters: ['progress', 'kjhtml', 'coverage'],
     // why: từ khi `coverage-includes.spec.ts` kéo TOÀN BỘ source vào bundle (để mẫu số coverage
     // gồm cả file không spec nào import), page load đầu tiên nặng hẳn lên — bundle đã instrument,
-    // cộng ckeditor/pdfjs/exceljs/chart.js. Với default (`browserNoActivityTimeout` 30s,
+    // cộng ckeditor/pdfjs/exceljs. Với default (`browserNoActivityTimeout` 30s,
     // `browserDisconnectTimeout` 2s, `pingTimeout` 5s) Chrome bị coi là chết TRƯỚC KHI chạy
     // spec đầu tiên: "Disconnected reconnect failed before timeout of 2000ms (ping timeout)",
     // 0 spec chạy, exit 0 — tức là một run rỗng trông như run xanh. Các mốc dưới đây là để chờ
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
index a7a554540..390baf397 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.html
@@ -1,30 +1,38 @@
+@let _structured = structured();
+@let _showPin = showPin();
+@let _iconFontSet = iconFontSet();
 <nav
   class="sd-layout-menu-tree d-flex flex-column gap-4"
-  [class.sd-layout-menu-tree--structured]="structured()"
-  [class.sd-layout-menu-tree--pinnable]="showPin()"
+  [class.sd-layout-menu-tree--structured]="_structured"
+  [class.sd-layout-menu-tree--pinnable]="_showPin"
   aria-label="Navigation menu">
   @for (node of nodes(); track node.key) {
     @if (node.isGroup) {
-      <div
-        class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
-        [class.sd-layout-menu-tree__root]="node.isRoot"
-        [style.padding-left.px]="node.paddingLeft">
-        @for (offset of node.branchOffsets; track offset) {
-          <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
-        }
-        @if (node.showIcon) {
-          @if (structured() && node.menu.iconUrl) {
-            <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
-          } @else {
-            <sd-icon
-              data-menu-icon
-              [name]="node.menu.icon || 'folder'"
-              [fontSet]="iconFontSet()"
-              [size]="structured() ? '20px' : undefined"></sd-icon>
-          }
-        }
-        <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
-      </div>
+      @if (node.isCollapsible) {
+        <button
+          type="button"
+          class="sd-layout-menu-tree__group sd-layout-menu-tree__group-toggle d-flex align-items-center gap-8 T12M text-black400"
+          [attr.data-menu-group]="node.key"
+          [attr.aria-label]="node.title"
+          [attr.aria-expanded]="node.isExpanded"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft"
+          (click)="onToggleGroup(node.key)">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+          <sd-icon
+            class="sd-layout-menu-tree__disclosure"
+            [name]="node.isExpanded ? 'expand_more' : 'chevron_right'"
+            size="18px"
+            aria-hidden="true"></sd-icon>
+        </button>
+      } @else {
+        <div
+          class="sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400"
+          [class.sd-layout-menu-tree__root]="node.isRoot"
+          [style.padding-left.px]="node.paddingLeft">
+          <ng-container [ngTemplateOutlet]="groupContent" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+        </div>
+      }
     } @else {
       <div
         class="sd-layout-menu-tree__route d-flex align-items-center gap-4"
@@ -52,13 +60,13 @@
               <sd-icon
                 data-menu-icon
                 [name]="node.menu.icon || 'chevron_right'"
-                [fontSet]="iconFontSet()"
-                [size]="structured() ? '20px' : undefined"></sd-icon>
+              [fontSet]="_iconFontSet"
+              [size]="_structured ? '20px' : undefined"></sd-icon>
             }
           }
-          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!structured()">{{ node.title }}</span>
+          <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
         </button>
-        @if (showPin()) {
+        @if (_showPin) {
           <button
             type="button"
             class="sd-layout-menu-tree__pin d-flex align-items-center justify-content-center"
@@ -78,3 +86,17 @@
     </div>
   }
 </nav>
+
+<ng-template #groupContent let-node>
+  @for (offset of node.branchOffsets; track offset) {
+    <span data-menu-branch class="sd-layout-menu-tree__branch" [style.left.px]="offset" aria-hidden="true"></span>
+  }
+  @if (node.showIcon) {
+    @if (_structured && node.menu.iconUrl) {
+      <img data-menu-icon class="sd-layout-menu-tree__icon-image" [src]="node.menu.iconUrl" alt="" />
+    } @else {
+      <sd-icon data-menu-icon [name]="node.menu.icon || 'folder'" [fontSet]="_iconFontSet" [size]="_structured ? '20px' : undefined"></sd-icon>
+    }
+  }
+  <span class="sd-layout-menu-tree__label" [class.text-ellipsis]="!_structured">{{ node.title }}</span>
+</ng-template>
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
index 92309d494..875a4c557 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.scss
@@ -1,5 +1,6 @@
 // why: Route and pin actions need a navigation-specific hit area not provided by a Core UI component.
 .sd-layout-menu-tree__route-button,
+.sd-layout-menu-tree__group-toggle,
 .sd-layout-menu-tree__pin {
   min-height: 40px;
   border: 0;
@@ -21,6 +22,7 @@
 
 // why: Navigation rows need a token-based hover surface without adding a second button component.
 .sd-layout-menu-tree__route-button:hover,
+.sd-layout-menu-tree__group-toggle:hover,
 .sd-layout-menu-tree__pin:hover {
   background: var(--sd-black100, var(--sd-surface-muted, #f3f3f3));
   color: var(--sd-primary, #005cbb);
@@ -32,6 +34,7 @@
 
 // why: Keyboard users need a visible focus indicator on custom navigation actions.
 .sd-layout-menu-tree__route-button:focus-visible,
+.sd-layout-menu-tree__group-toggle:focus-visible,
 .sd-layout-menu-tree__pin:focus-visible {
   outline: 2px solid var(--sd-primary);
   outline-offset: 2px;
@@ -61,6 +64,17 @@
   min-height: 32px;
 }
 
+.sd-layout-menu-tree__group-toggle {
+  text-align: left;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.sd-layout-menu-tree__disclosure {
+  flex: 0 0 18px;
+  margin-left: auto;
+}
+
 // why: Consumer-provided image icons need the same footprint as SdIcon glyphs.
 .sd-layout-menu-tree__icon-image {
   width: 20px;
@@ -144,7 +158,8 @@
     color: var(--menu-muted);
   }
 
-  .sd-layout-menu-tree__route-button:hover {
+  .sd-layout-menu-tree__route-button:hover,
+  .sd-layout-menu-tree__group-toggle:hover {
     background: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--menu-surface));
   }
 
@@ -190,12 +205,14 @@
   }
 
   .sd-layout-menu-tree__route-button:focus-visible,
+  .sd-layout-menu-tree__group-toggle:focus-visible,
   .sd-layout-menu-tree__pin:focus-visible {
     outline-offset: -2px;
   }
 
   @media (pointer: coarse) {
     .sd-layout-menu-tree__route .sd-layout-menu-tree__route-button,
+    .sd-layout-menu-tree__group-toggle,
     .sd-layout-menu-tree__pin {
       min-height: 44px;
     }
@@ -212,6 +229,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .sd-layout-menu-tree__route-button,
+  .sd-layout-menu-tree__group-toggle,
   .sd-layout-menu-tree__pin {
     transition: none;
   }
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
index d0c4c32e9..417f8c6aa 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.spec.ts
@@ -29,6 +29,7 @@ describe('SdLayoutMenuTreeComponent', () => {
   });
 
   it('preserves nested menu icons and spacing in the default V2/mobile presentation', () => {
+    expect(fixture.nativeElement.querySelector('[data-menu-group]')).toBeNull();
     const route = fixture.nativeElement.querySelector('[data-menu-key="id:reports"]') as HTMLElement;
     expect(route.querySelector('sd-icon')).not.toBeNull();
     expect(getComputedStyle(route).paddingLeft).toBe('28px');
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
index 46a50a4f6..5cf5e0c8a 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/shared/menu-tree/menu-tree.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, output, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, model, output, signal } from '@angular/core';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 import { SdLayoutMenu, SdLayoutRootMenu, getMenuStableKey, searchMenuLeaves } from '../../../services';
@@ -15,6 +16,8 @@ interface SdLayoutMenuTreeNode {
   showIcon: boolean;
   isRoot: boolean;
   isGroup: boolean;
+  isCollapsible: boolean;
+  isExpanded: boolean;
   isActive: boolean;
   isPinned: boolean;
   isPinVisible: boolean;
@@ -25,7 +28,7 @@ interface SdLayoutMenuTreeNode {
 @Component({
   selector: 'sd-layout-menu-tree',
   standalone: true,
-  imports: [SdIcon],
+  imports: [SdIcon, NgTemplateOutlet],
   templateUrl: './menu-tree.component.html',
   styleUrl: './menu-tree.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +47,8 @@ export class SdLayoutMenuTreeComponent {
   pinVisibility = input<'hover' | 'always'>('hover');
   /** V3 hierarchy and flat shortcuts are opt-in; V2/mobile retain the default presentation. */
   presentation = input<'default' | 'hierarchy' | 'shortcuts'>('default');
+  collapsible = input(false);
+  collapsedGroupKeys = model<string[]>([]);
   structured = computed(() => this.presentation() !== 'default');
   iconFontSet = computed(() => (this.structured() ? ('material-icons-outlined' as const) : undefined));
   navigate = output<SdLayoutRootMenu>();
@@ -56,6 +61,8 @@ export class SdLayoutMenuTreeComponent {
     const query = this.query().trim();
     const structured = this.structured();
     const hierarchy = this.presentation() === 'hierarchy' && !query;
+    const collapsible = this.collapsible() && !query;
+    const collapsedKeys = new Set(this.collapsedGroupKeys());
     const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
     // Nhiều menu cùng khớp route thì chỉ path sát nhất sáng: ở '/appointment/cs' thì '/appointment' không sáng nữa
     const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
@@ -69,6 +76,7 @@ export class SdLayoutMenuTreeComponent {
         const path = 'path' in menu ? menu.path : '';
         const title = menu.title ?? menu.tooltipTitle ?? '';
         const isPinned = pinnedKeys.has(key);
+        const isExpanded = !collapsible || !collapsedKeys.has(key);
         nodes.push({
           menu,
           key,
@@ -80,6 +88,8 @@ export class SdLayoutMenuTreeComponent {
           showIcon: !structured || (hierarchy && depth === 0),
           isRoot: depth === 0 && (!structured || hierarchy),
           isGroup,
+          isCollapsible: isGroup && collapsible,
+          isExpanded,
           isActive: !!path && path === activeMenuPath,
           isPinned,
           isPinVisible: alwaysShowPin || isPinned || hoveredPinKey === key,
@@ -88,7 +98,7 @@ export class SdLayoutMenuTreeComponent {
           // quyết định vị trí. Tính trong `nodes` computed nên tự cập nhật khi đổi ngôn ngữ.
           pinLabel: this.#i18n.t(isPinned ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin', { title }),
         });
-        if (isGroup && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
+        if (isGroup && isExpanded && 'children' in menu) append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
       }
     };
 
@@ -104,6 +114,10 @@ export class SdLayoutMenuTreeComponent {
     if ('path' in menu) this.navigate.emit(menu);
   }
 
+  onToggleGroup(key: string): void {
+    this.collapsedGroupKeys.update(keys => (keys.includes(key) ? keys.filter(value => value !== key) : [...keys, key]));
+  }
+
   onTogglePinned(event: MouseEvent, menu: SdLayoutMenu): void {
     event.stopPropagation();
     this.togglePinned.emit(menu);
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
index de417f7f0..5261ea32c 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.html
@@ -87,6 +87,8 @@ <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.rece
           <h2 class="sd-sidebar-v3__section-title m-0">{{ 'core.module.layout.sidebar.all-menu' | sdTranslate }}</h2>
           <sd-layout-menu-tree
             presentation="hierarchy"
+            [collapsible]="true"
+            [(collapsedGroupKeys)]="collapsedGroupKeys"
             [menus]="menus()"
             [query]="searchText()"
             [activePath]="activePath()"
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
index 976591419..d412e5dea 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.spec.ts
@@ -44,6 +44,139 @@ describe('SdSidebarV3', () => {
     expect(fixture.componentInstance.isCollapsed()).toBeFalse();
   });
 
+  const groupButton = (key: string): HTMLButtonElement | null =>
+    fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-group="${key}"]`);
+  const allRoute = (key: string): HTMLButtonElement | null => fixture.nativeElement.querySelector(`[data-v3-all] [data-menu-key="${key}"]`);
+
+  it('toggles a group with a focusable disclosure without navigating or pinning', () => {
+    create();
+    const navigate = spyOn(TestBed.inject(Router), 'navigate');
+    const pin = spyOn(TestBed.inject(SdLayoutNavigationStateService), 'togglePinned');
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    expect(group.tagName).toBe('BUTTON');
+    expect(group.type).toBe('button');
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    group.focus();
+    group.click();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(group);
+    expect(group.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(pin).not.toHaveBeenCalled();
+    group.click();
+    fixture.detectChanges();
+    expect(group.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('preserves independent nested disclosures when a parent is closed and reopened', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }, dashboard] },
+      { id: 'other', title: 'Other', children: [{ ...dashboard, id: 'other-leaf' }] },
+    ]);
+    fixture.detectChanges();
+    const nested = groupButton('id:nested');
+    expect(nested).not.toBeNull();
+    if (!nested) return;
+    nested.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).toBeNull();
+    expect(allRoute('id:other-leaf')).not.toBeNull();
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+    expect(allRoute('id:dashboard')).not.toBeNull();
+  });
+
+  it('searches closed groups and preserves disclosures through query and rail toggles', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.detectChanges();
+    fixture.componentInstance.searchText.set('BAO CAO');
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('id:work')).toBeNull();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).not.toBeNull();
+    fixture.componentInstance.searchText.set('');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('false');
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('reveals the exact active branch on navigation without reopening unrelated branches', async () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { id: 'work', title: 'Work', children: [{ id: 'nested', title: 'Nested', children: [reports] }] },
+      { id: 'other', title: 'Other', children: [dashboard] },
+    ]);
+    fixture.detectChanges();
+    expect(groupButton('id:nested')).not.toBeNull();
+    if (!groupButton('id:nested')) return;
+    for (const key of ['id:nested', 'id:work', 'id:other']) {
+      groupButton(key)!.click();
+      fixture.detectChanges();
+    }
+    const router = TestBed.inject(Router);
+    router.resetConfig([{ path: 'reports/:id', children: [] }]);
+    await router.navigateByUrl('/reports/42?source=test#details');
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(groupButton('id:nested')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')!.getAttribute('aria-current')).toBe('page');
+    expect(groupButton('id:other')!.getAttribute('aria-expanded')).toBe('false');
+    // An explicit close remains respected while the current route stays unchanged.
+    groupButton('id:work')!.click();
+    fixture.detectChanges();
+    expect(allRoute('id:reports')).toBeNull();
+  });
+
+  it('opens a closed root group when its compact rail icon is activated', () => {
+    create();
+    const group = groupButton('id:work');
+    expect(group).not.toBeNull();
+    if (!group) return;
+    group.click();
+    fixture.componentInstance.toggleCollapsed();
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('.sd-sidebar-v3__collapsed-action').click();
+    fixture.detectChanges();
+    expect(groupButton('id:work')!.getAttribute('aria-expanded')).toBe('true');
+    expect(allRoute('id:reports')).not.toBeNull();
+  });
+
+  it('distinguishes same-title groups by their ancestor fallback keys', () => {
+    create();
+    fixture.componentRef.setInput('menus', [
+      { title: 'First', children: [{ title: 'Shared', children: [dashboard] }] },
+      { title: 'Second', children: [{ title: 'Shared', children: [reports] }] },
+    ]);
+    fixture.detectChanges();
+    const first = groupButton('group:first/shared');
+    expect(first).not.toBeNull();
+    if (!first) return;
+    first.click();
+    fixture.detectChanges();
+    expect(allRoute('id:dashboard')).toBeNull();
+    expect(allRoute('id:reports')).not.toBeNull();
+    expect(groupButton('group:second/shared')!.getAttribute('aria-expanded')).toBe('true');
+  });
+
   it('uses defaultCollapsed when no preference exists', () => {
     create({ version: 3, defaultCollapsed: true });
 
@@ -176,7 +309,8 @@ describe('SdSidebarV3', () => {
     expect(tree.querySelectorAll('[data-menu-icon]').length).toBe(2);
     expect(tree.querySelector('img[src="/nested-icon.svg"]')).toBeNull();
     const groups = tree.querySelectorAll<HTMLElement>('.sd-layout-menu-tree__group');
-    expect(groups[1].querySelector('sd-icon')).toBeNull();
+    expect(groups[1].querySelector('[data-menu-icon]')).toBeNull();
+    expect(groups[1].querySelector('.sd-layout-menu-tree__disclosure')).not.toBeNull();
     const leaf = tree.querySelector<HTMLButtonElement>('[data-menu-key="id:reports"]')!;
     expect(leaf.querySelector('sd-icon, img')).toBeNull();
     expect(leaf.getAttribute('aria-current')).toBe('page');
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
index c41d3b56f..42167cf99 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/components/sidebar-v3/main.component.ts
@@ -9,6 +9,7 @@ import { SdLayoutMenuTreeComponent } from '../shared/menu-tree/menu-tree.compone
 import { SdLayoutSearchFieldComponent } from '../shared/search-field/search-field.component';
 import { SdLayoutUserMenuComponent } from '../shared/user-menu/user-menu.component';
 import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+import { containsMenuPath, resolveActiveMenuPath } from '../../utils';
 
 @Component({
   selector: 'sd-sidebar-v3',
@@ -28,6 +29,7 @@ export class SdSidebarV3 {
   userInfo = input.required<SdLayoutUserInfo>();
   sidebar = input.required<SidebarConfigurationV3>();
   isCollapsed = signal(false);
+  protected readonly collapsedGroupKeys = signal<string[]>([]);
   searchText = signal('');
   activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '');
   searchResults = computed<SdLayoutRootMenu[]>(() => searchMenuLeaves(this.menus(), this.searchText()));
@@ -55,6 +57,23 @@ export class SdSidebarV3 {
     this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
       if (event instanceof NavigationEnd) this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
     });
+    effect(() => {
+      const menus = this.menus();
+      const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
+      if (!activeMenuPath) return;
+      const activeGroupKeys = new Set<string>();
+      const visit = (items: SdLayoutMenu[], ancestors: string[]): void => {
+        for (const menu of items) {
+          if (!('children' in menu) || !containsMenuPath(menu, activeMenuPath)) continue;
+          const key = getMenuStableKey(menu, ancestors);
+          activeGroupKeys.add(key);
+          visit(menu.children ?? [], [...ancestors, menu.title ?? key]);
+        }
+      };
+      visit(menus, []);
+      // why: Chỉ mở nhánh khi route/menu đổi; người dùng vẫn được đóng nhánh đang active.
+      untracked(() => this.collapsedGroupKeys.update(keys => keys.filter(key => !activeGroupKeys.has(key))));
+    });
   }
 
   toggleCollapsed(): void {
@@ -66,6 +85,7 @@ export class SdSidebarV3 {
     if ('path' in menu) this.navigateMenu(menu);
     else {
       this.isCollapsed.set(false);
+      this.collapsedGroupKeys.update(keys => keys.filter(key => key !== getMenuStableKey(menu)));
       this.#navigationState.patchVersionState(3, { collapsed: false });
     }
   }
diff --git a/versions/v22/projects/sdcorejs-angular/modules/layout/sd-layout.md b/versions/v22/projects/sdcorejs-angular/modules/layout/sd-layout.md
index 09d64b249..a71a963f1 100644
--- a/versions/v22/projects/sdcorejs-angular/modules/layout/sd-layout.md
+++ b/versions/v22/projects/sdcorejs-angular/modules/layout/sd-layout.md
@@ -246,6 +246,10 @@ const menus: SdLayoutMenu[] = [
 
 V2 honors up to three valid `primaryMenuIds` in the supplied order, fills missing slots from the remaining visible roots, and exposes overflow through More. V3 search is accent-insensitive and searches the filtered menu tree.
 
+Desktop V3 menu groups support expand/collapse at every depth without additional configuration. Groups start expanded; click the group row or focus it with Tab and press Enter/Space to toggle its children. The disclosure chevron and `aria-expanded` reflect the current state. Closing a parent preserves each nested group's state, and group toggles do not navigate or pin items.
+
+Group state belongs to the mounted V3 sidebar: search still finds leaves inside closed groups, clearing the query restores the tree state, and toggling the whole sidebar between drawer and icon rail preserves it. Activating a group icon in the rail opens the drawer and that root group. A route change opens the ancestors of the most exact active menu; unrelated groups retain their state. Group state resets when the sidebar is recreated and is not stored in local storage. Pinned/Recent shortcuts, V2 and mobile navigation retain their existing behavior.
+
 ### Active menu resolution prefers the most exact path
 
 A menu is active only when it owns the longest `path` that matches the current route. With both `/appointment` and `/appointment/cs` declared, standing on `/appointment/cs` highlights the child alone — the ancestor entry is no longer lit up, and `aria-current="page"` is set on that one row. `resolveActiveMenuPath(menus, routePath)` from the layout `utils` is the single decision point: V1 uses it for node focus, menu-group binding and branch expansion, and the shared `sd-layout-menu-tree` (V2, V3 and their mobile variants) uses it for `isActive`. Matching stays segment-based, so `/appointment` never matches `/appointments`, and a route with no menu of its own (`/appointment/cs/123`) still activates its closest declared ancestor. `MenuFocusPipe` takes the resolved path as its third argument; called with two arguments it keeps the previous prefix matching.
diff --git a/versions/v22/projects/sdcorejs-angular/ng-package.json b/versions/v22/projects/sdcorejs-angular/ng-package.json
index a3dd12272..7f559acb7 100644
--- a/versions/v22/projects/sdcorejs-angular/ng-package.json
+++ b/versions/v22/projects/sdcorejs-angular/ng-package.json
@@ -14,7 +14,6 @@
     "@bjorn3/browser_wasi_shim",
     "keycloak-js",
     "prismjs",
-    "chart.js",
     "pdfjs-dist",
     "@lucide/angular"
   ],
diff --git a/versions/v22/projects/sdcorejs-angular/package.json b/versions/v22/projects/sdcorejs-angular/package.json
index a4d392633..cb874d0c5 100644
--- a/versions/v22/projects/sdcorejs-angular/package.json
+++ b/versions/v22/projects/sdcorejs-angular/package.json
@@ -45,7 +45,6 @@
     "@lucide/angular": "^1.22.0",
     "@ckeditor/ckeditor5-angular": "11.1.2",
     "ckeditor5": "48.0.0",
-    "chart.js": "^4.5.1",
     "date-fns": "^3.6.0",
     "exceljs": "^4.4.0",
     "keycloak-js": "^26.0.0",
@@ -56,7 +55,6 @@
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
-    "./fesm2022/sdcorejs-angular-components-chart.mjs",
     "./fesm2022/sdcorejs-angular-components-code-editor.mjs",
     "./fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs"
   ]

From 6d9fc9b55c253f56941a9435a4526a011e879b0d Mon Sep 17 00:00:00 2001
From: nghiatt15_onemount <nghiatt15@onemount.com>
Date: Fri, 11 Sep 2026 16:00:03 +0700
Subject: [PATCH 2/2] fix(table): preserve disabled menu focus with CDK 22

Use CDK disabled state for command menu items so Angular 22 can focus disabled entries while suppressing pointer and keyboard activation. Preserve disabled styling and verify navigation to enabled actions across CDK versions.

Validated 12 command/action menu tests on both Angular 19 and Angular 22, scoped ESLint, and four-version synchronization.
---
 versions/v19/SYNC-STATUS.md                                | 2 +-
 .../table/src/components/action-menu/action-menu.scss      | 5 +++--
 .../src/components/command/desktop-command.component.html  | 3 +--
 .../components/command/desktop-command.component.spec.ts   | 7 +++++++
 versions/v20/SYNC-STATUS.md                                | 2 +-
 .../table/src/components/action-menu/action-menu.scss      | 5 +++--
 .../src/components/command/desktop-command.component.html  | 3 +--
 .../components/command/desktop-command.component.spec.ts   | 7 +++++++
 versions/v21/SYNC-STATUS.md                                | 2 +-
 .../table/src/components/action-menu/action-menu.scss      | 5 +++--
 .../src/components/command/desktop-command.component.html  | 3 +--
 .../components/command/desktop-command.component.spec.ts   | 7 +++++++
 versions/v22/SYNC-STATUS.md                                | 2 +-
 .../table/src/components/action-menu/action-menu.scss      | 5 +++--
 .../src/components/command/desktop-command.component.html  | 3 +--
 .../components/command/desktop-command.component.spec.ts   | 7 +++++++
 16 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/versions/v19/SYNC-STATUS.md b/versions/v19/SYNC-STATUS.md
index 6842e1107..50727106d 100644
--- a/versions/v19/SYNC-STATUS.md
+++ b/versions/v19/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 19 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 15:35:26 |
+| Updated At | 2026-09-11 15:55:24 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
index 0a0a9bbc5..4d572e188 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -35,7 +35,7 @@
     overflow-wrap: anywhere;
     cursor: pointer;
 
-    &:hover:not(:disabled),
+    &:hover:not(:disabled):not([aria-disabled='true']),
     &:focus-visible {
       background: var(--sd-black100, #f3f3f3);
     }
@@ -45,7 +45,8 @@
       outline-offset: -2px;
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true'] {
       opacity: 0.45;
       cursor: default;
     }
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 9ed43877f..4e7c580bb 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -53,8 +53,7 @@
               [cdkMenuItemDisabled]="_childMeta.disabled"
               [cdkMenuitemTypeaheadLabel]="_childMeta.title"
               [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
-              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
-              [disabled]="_childMeta.disabled">
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
diff --git a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 03e5eff62..96f872060 100644
--- a/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v19/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -89,8 +89,15 @@ describe('DesktopCommand', () => {
     const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     expect(menu.textContent).not.toContain('Hidden');
     const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    expect(items[0].getAttribute('aria-disabled')).toBe('true');
+    expect(getComputedStyle(items[0]).opacity).toBe('0.45');
+    expect(menu.contains(document.activeElement)).toBeTrue();
     items[0].click();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true }));
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: ' ', keyCode: 32, bubbles: true }));
     expect(clicked).not.toHaveBeenCalled();
+    // CDK 22 focuses disabled menu items; earlier CDK versions skip them. Both must reach the enabled action.
+    document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
     expect(document.activeElement).toBe(items[1]);
     const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
     items[1].dispatchEvent(escape);
diff --git a/versions/v20/SYNC-STATUS.md b/versions/v20/SYNC-STATUS.md
index 5fe80941d..c16807cfd 100644
--- a/versions/v20/SYNC-STATUS.md
+++ b/versions/v20/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 20 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 15:35:26 |
+| Updated At | 2026-09-11 15:55:24 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v20 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
index 0a0a9bbc5..4d572e188 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -35,7 +35,7 @@
     overflow-wrap: anywhere;
     cursor: pointer;
 
-    &:hover:not(:disabled),
+    &:hover:not(:disabled):not([aria-disabled='true']),
     &:focus-visible {
       background: var(--sd-black100, #f3f3f3);
     }
@@ -45,7 +45,8 @@
       outline-offset: -2px;
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true'] {
       opacity: 0.45;
       cursor: default;
     }
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 9ed43877f..4e7c580bb 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -53,8 +53,7 @@
               [cdkMenuItemDisabled]="_childMeta.disabled"
               [cdkMenuitemTypeaheadLabel]="_childMeta.title"
               [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
-              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
-              [disabled]="_childMeta.disabled">
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
diff --git a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 03e5eff62..96f872060 100644
--- a/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v20/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -89,8 +89,15 @@ describe('DesktopCommand', () => {
     const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     expect(menu.textContent).not.toContain('Hidden');
     const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    expect(items[0].getAttribute('aria-disabled')).toBe('true');
+    expect(getComputedStyle(items[0]).opacity).toBe('0.45');
+    expect(menu.contains(document.activeElement)).toBeTrue();
     items[0].click();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true }));
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: ' ', keyCode: 32, bubbles: true }));
     expect(clicked).not.toHaveBeenCalled();
+    // CDK 22 focuses disabled menu items; earlier CDK versions skip them. Both must reach the enabled action.
+    document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
     expect(document.activeElement).toBe(items[1]);
     const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
     items[1].dispatchEvent(escape);
diff --git a/versions/v21/SYNC-STATUS.md b/versions/v21/SYNC-STATUS.md
index cac994bfd..4db35b2c8 100644
--- a/versions/v21/SYNC-STATUS.md
+++ b/versions/v21/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 21 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 15:35:26 |
+| Updated At | 2026-09-11 15:55:24 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v21 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
index 0a0a9bbc5..4d572e188 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -35,7 +35,7 @@
     overflow-wrap: anywhere;
     cursor: pointer;
 
-    &:hover:not(:disabled),
+    &:hover:not(:disabled):not([aria-disabled='true']),
     &:focus-visible {
       background: var(--sd-black100, #f3f3f3);
     }
@@ -45,7 +45,8 @@
       outline-offset: -2px;
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true'] {
       opacity: 0.45;
       cursor: default;
     }
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 9ed43877f..4e7c580bb 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -53,8 +53,7 @@
               [cdkMenuItemDisabled]="_childMeta.disabled"
               [cdkMenuitemTypeaheadLabel]="_childMeta.title"
               [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
-              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
-              [disabled]="_childMeta.disabled">
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
diff --git a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 03e5eff62..96f872060 100644
--- a/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v21/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -89,8 +89,15 @@ describe('DesktopCommand', () => {
     const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     expect(menu.textContent).not.toContain('Hidden');
     const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    expect(items[0].getAttribute('aria-disabled')).toBe('true');
+    expect(getComputedStyle(items[0]).opacity).toBe('0.45');
+    expect(menu.contains(document.activeElement)).toBeTrue();
     items[0].click();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true }));
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: ' ', keyCode: 32, bubbles: true }));
     expect(clicked).not.toHaveBeenCalled();
+    // CDK 22 focuses disabled menu items; earlier CDK versions skip them. Both must reach the enabled action.
+    document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
     expect(document.activeElement).toBe(items[1]);
     const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
     items[1].dispatchEvent(escape);
diff --git a/versions/v22/SYNC-STATUS.md b/versions/v22/SYNC-STATUS.md
index 968f2cc7c..78e736a6d 100644
--- a/versions/v22/SYNC-STATUS.md
+++ b/versions/v22/SYNC-STATUS.md
@@ -4,7 +4,7 @@
 |-----|-------|
 | Angular Major | 22 |
 | Legacy Source Commit | d12478a1 |
-| Updated At | 2026-09-11 15:35:26 |
+| Updated At | 2026-09-11 15:55:24 |
 | Origin | repo-owned versions/v19 (final legacy sync vn-angular@d12478a1) |
 | Workspace Flow | versions/v19 → v22 |
 | Development Mode | repo-owned independent pack |
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
index 0a0a9bbc5..4d572e188 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/action-menu/action-menu.scss
@@ -35,7 +35,7 @@
     overflow-wrap: anywhere;
     cursor: pointer;
 
-    &:hover:not(:disabled),
+    &:hover:not(:disabled):not([aria-disabled='true']),
     &:focus-visible {
       background: var(--sd-black100, #f3f3f3);
     }
@@ -45,7 +45,8 @@
       outline-offset: -2px;
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true'] {
       opacity: 0.45;
       cursor: default;
     }
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
index 9ed43877f..4e7c580bb 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.html
@@ -53,8 +53,7 @@
               [cdkMenuItemDisabled]="_childMeta.disabled"
               [cdkMenuitemTypeaheadLabel]="_childMeta.title"
               [style.color]="childCommand.color ? 'var(--sd-' + childCommand.color + ')' : null"
-              (cdkMenuItemTriggered)="childCommand.click(_item.data)"
-              [disabled]="_childMeta.disabled">
+              (cdkMenuItemTriggered)="childCommand.click(_item.data)">
               @if (_childMeta.htmlTemplate) {
                 <div [innerHTML]="_childMeta.htmlTemplate"></div>
               } @else {
diff --git a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
index 98e74035f..a061b96e9 100644
--- a/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
+++ b/versions/v22/projects/sdcorejs-angular/components/table/src/components/command/desktop-command.component.spec.ts
@@ -91,8 +91,15 @@ describe('DesktopCommand', () => {
     const menu = document.body.querySelector('[role="menu"]') as HTMLElement;
     expect(menu.textContent).not.toContain('Hidden');
     const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('button'));
+    expect(items[0].getAttribute('aria-disabled')).toBe('true');
+    expect(getComputedStyle(items[0]).opacity).toBe('0.45');
+    expect(menu.contains(document.activeElement)).toBeTrue();
     items[0].click();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true }));
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: ' ', keyCode: 32, bubbles: true }));
     expect(clicked).not.toHaveBeenCalled();
+    // CDK 22 focuses disabled menu items; earlier CDK versions skip them. Both must reach the enabled action.
+    document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', keyCode: 40, bubbles: true }));
     expect(document.activeElement).toBe(items[1]);
     const escape = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true });
     items[1].dispatchEvent(escape);