@besaitech/ng-design-system 0.0.69 → 0.0.71

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, ElementRef, TemplateRef, WritableSignal, OnInit, InjectionToken, Provider } from '@angular/core';
+import { OnDestroy, ElementRef, TemplateRef, WritableSignal, OnInit, Signal, InjectionToken, Provider } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
@@ -4599,16 +4599,33 @@ type SdsSidebarAppearance = 'brand' | 'surface';
  * multiple independent sidebars, provide it at a component level instead.
  */
 declare class SidebarStore {
-    /** Desktop rail state: collapsed to icon-only width (applies at ≥ lg). */
+    private readonly document;
+    /**
+     * The person's desktop preference: icon-only rail. It is a PREFERENCE, not the rendered state — use
+     * {@link railCollapsed} to know whether the rail is actually icon-only right now.
+     */
     readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** True below `lg`, where the rail is the off-canvas drawer. */
+    readonly belowLg: _angular_core.WritableSignal<boolean>;
+    /**
+     * Whether the rail is icon-only RIGHT NOW: the desktop collapse applies at ≥ lg only. The mobile drawer
+     * is always full width — reading `collapsed` there hid every collapsible group's pages behind a header
+     * that could no longer open them (collapse on desktop, then open the drawer on a narrow screen).
+     */
+    readonly railCollapsed: _angular_core.Signal<boolean>;
     /**
      * The rail's paint, published by <sds-sidebar> so projected <sds-nav-item>/<sds-nav-group> pick the
      * matching state and hover colours (white-on-dark for `brand`, ink-and-brand for `surface`) without
      * every item taking an input. One rail, one appearance — set by the sidebar, read by its children.
      */
     readonly appearance: _angular_core.WritableSignal<SdsSidebarAppearance>;
+    /** Accordion mode, published by <sds-sidebar [accordion]>: opening one group closes the others. */
+    readonly accordion: _angular_core.WritableSignal<boolean>;
+    /** The collapsible group most recently opened by hand (accordion mode closes the rest). */
+    readonly openedGroup: _angular_core.WritableSignal<number | null>;
     /** Mobile drawer state: whether the off-canvas sidebar is slid in (< lg). */
     readonly mobileOpen: _angular_core.WritableSignal<boolean>;
+    constructor();
     /** Toggle the desktop icon-rail. */
     toggle(): void;
     setCollapsed(value: boolean): void;
@@ -4719,6 +4736,28 @@ declare class SdsShell {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsShell, "sds-shell", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsTopbar]", "[sdsSidebar]", "*"], true, never>;
 }
 
+/**
+ * What a <sds-nav-group> tells the <sds-nav-item>s projected into it. Internal to the library (not in
+ * public-api.ts): it lets an item style itself as a nested sub-destination, or as a row of the
+ * collapsed rail's flyout panel, without the app passing anything.
+ */
+interface SdsNavGroupContext {
+    /** The items are sub-destinations of a collapsible group (tree-guide styling, no icon needed). */
+    readonly nested: Signal<boolean>;
+    /** The items currently live in the collapsed rail's flyout panel (labels shown, no tooltips). */
+    readonly inFlyout: Signal<boolean>;
+    /** Close the flyout — called when an item inside it is chosen. */
+    closeFlyout(restoreFocus?: boolean): void;
+}
+/**
+ * What a <sds-sidebar> tells the groups and items projected into it. Its own appearance, read through
+ * DI rather than the root store, so two rails on one page (an app rail and a demo, a light and a dark
+ * one) each paint their own items.
+ */
+interface SdsSidebarContext {
+    readonly appearance: Signal<SdsSidebarAppearance>;
+}
+
 /**
  * Collapsible navigation rail. Project <sds-nav-group>/<sds-nav-item> as the
  * default content, and pin a footer (e.g. search + version badge) via the
@@ -4731,18 +4770,24 @@ declare class SdsShell {
  *
  * Responsive: below `lg` it is a fixed off-canvas drawer opened by the top bar's hamburger; it is a
  * modal (scrim + trap), so while open Escape closes it, focus moves into it and is restored on close,
- * and Tab is kept inside. While closed it is `inert`, so its off-screen items are out of the tab order.
- * At `lg` and up it is the in-flow, collapsible rail.
+ * Tab is kept inside, the page behind stops scrolling, and a swipe to the left closes it. While closed
+ * it is `inert`, so its off-screen items are out of the tab order. The drawer is always full width —
+ * the desktop collapse preference never applies to it. At `lg` and up it is the in-flow, collapsible
+ * rail; collapsed to icons, its collapsible groups open as flyout panels and its items show tooltips.
+ *
+ * Project an `[sdsHeader]` element (typically the logo + app name) to brand the drawer's header row,
+ * and set `[accordion]` to keep a single collapsible group open at a time.
  *
  * @example
  * <sds-sidebar appearance="surface" decorations>
+ *   <img sdsHeader class="h-7 lg:hidden" src="/logo.svg" alt="Saitech" />
  *   <sds-nav-group label="Membres">
  *     <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
  *   </sds-nav-group>
  *   <div sdsFooter>…</div>
  * </sds-sidebar>
  */
-declare class SdsSidebar {
+declare class SdsSidebar implements SdsSidebarContext {
     protected readonly store: SidebarStore;
     private readonly document;
     private readonly drawer;
@@ -4751,6 +4796,9 @@ declare class SdsSidebar {
     protected readonly belowLg: _angular_core.WritableSignal<boolean>;
     /** The element focused before the drawer opened, restored to it on close. */
     private restoreFocusTo;
+    /** Live horizontal offset while a swipe drags the drawer closed (≤ 0). */
+    protected readonly dragX: _angular_core.WritableSignal<number>;
+    private touch;
     constructor();
     /**
      * Accessible names for the rail's three icon-only controls. English defaults; a multilingual app
@@ -4759,23 +4807,31 @@ declare class SdsSidebar {
     readonly collapseLabel: _angular_core.InputSignal<string>;
     readonly expandLabel: _angular_core.InputSignal<string>;
     readonly closeLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the navigation landmark (e.g. "Main navigation"). */
+    readonly navLabel: _angular_core.InputSignal<string>;
     /** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
     readonly appearance: _angular_core.InputSignal<SdsSidebarAppearance>;
+    /** Keep a single collapsible group open: opening one folds the others. */
+    readonly accordion: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Add slow-drifting brand-tinted blobs behind the rail (opt-in). */
     readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Icon-only right now (desktop preference, never in the mobile drawer). */
+    protected readonly railCollapsed: _angular_core.Signal<boolean>;
     protected readonly mobileOpen: _angular_core.WritableSignal<boolean>;
     protected readonly asideClass: _angular_core.Signal<string>;
     /** The two header icon buttons, painted for the active rail. */
     protected readonly railBtnClass: _angular_core.Signal<"text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40" | "text-white/70 hover:bg-white/10 hover:text-white focus-visible:ring-white/40">;
     /** Desktop rail width (full vs. collapsed); mobile always uses full width. */
     protected readonly railWidth: _angular_core.Signal<"var(--sds-sidebar-w-collapsed)" | "var(--sds-sidebar-w)">;
+    protected onTouchStart(event: TouchEvent): void;
+    protected onTouchMove(event: TouchEvent): void;
+    protected onTouchEnd(): void;
     protected onEscape(): void;
     /** Keep Tab inside the open mobile drawer (a modal must not leak focus to the page behind the scrim). */
     protected onDrawerKeydown(event: KeyboardEvent): void;
     private focusableEls;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "navLabel": { "alias": "navLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsHeader]", "*", "[sdsFooter]"], true, never>;
 }
 
 type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
@@ -4783,6 +4839,15 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
  * A single sidebar navigation entry. Renders an anchor when [link] is set
  * (with automatic active state via routerLinkActive) or a button otherwise.
  *
+ * It adapts to where it sits, with no input from the app:
+ * - at the top level, an icon + label row with a pill and accent bar when active;
+ * - inside a collapsible <sds-nav-group>, a nested sub-destination on the group's tree guide (no icon
+ *   needed), the active one marked on the guide line;
+ * - inside the collapsed rail's flyout panel, a full row with its label;
+ * - on the collapsed rail itself, its icon alone, with a tooltip naming it on hover and focus.
+ *
+ * Choosing an item closes the mobile drawer and any open flyout.
+ *
  * Requires the host application to provide the Angular Router (`provideRouter`),
  * as it depends on RouterLink/RouterLinkActive even when used as a button.
  *
@@ -4792,6 +4857,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
  */
 declare class SdsNavItem {
     protected readonly store: SidebarStore;
+    private readonly group;
     readonly icon: _angular_core.InputSignal<"chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
     readonly label: _angular_core.InputSignal<string>;
     /** Router link target; when null, the item behaves as a button. */
@@ -4811,7 +4877,20 @@ declare class SdsNavItem {
     /** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
     readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
     readonly select: _angular_core.OutputEmitterRef<void>;
-    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Inside a collapsible group: a nested sub-destination. */
+    protected readonly nested: _angular_core.Signal<boolean>;
+    /** A row of the collapsed rail's flyout panel. */
+    private readonly inFlyout;
+    /** Icon alone: on the collapsed desktop rail, unless it is listed in a flyout. */
+    protected readonly iconOnly: _angular_core.Signal<boolean>;
+    /** Tooltip anchor (viewport coordinates) while hovered/focused on the icon rail. */
+    protected readonly tip: _angular_core.WritableSignal<{
+        top: number;
+        left: number;
+    } | null>;
+    private readonly rail;
+    /** Paint of the rail this item sits in (its own sidebar's, else the store's for a free-standing item). */
+    private readonly surface;
     /** The badge's spoken text, or null when there is nothing to show. */
     protected readonly badgeText: _angular_core.Signal<string | null>;
     protected readonly badgeDisplay: _angular_core.Signal<string>;
@@ -4820,45 +4899,60 @@ declare class SdsNavItem {
     protected readonly badgeClass: _angular_core.Signal<string>;
     protected itemClass(isActive: boolean): string;
     /**
-     * The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
-     * grayscale brand where a tinted pill alone is nearly invisible. brand-600 on the light rail, white on
-     * the dark one; on a coloured brand it is the brand colour, matching the certicheck accent bar.
+     * The active marker — the strongest "selected" cue, and the one that survives a grayscale brand where a
+     * tinted pill alone is nearly invisible. A top-level (or flyout) item carries it inside its pill; a
+     * nested item draws it ON the group's tree guide (12 px to its left), so the line itself points at the
+     * current page.
      */
     protected readonly accentBarClass: _angular_core.Signal<string>;
+    protected showTip(event: Event): void;
+    protected chosen(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
 }
 
 /**
- * Groups nav items under an optional uppercase section label.
+ * Groups nav items under an optional section label.
  *
  * Two modes:
- * - **Section** (default) — a static label over its items. The label is replaced by a divider when
- *   the rail is collapsed.
- * - **Collapsible** (`[collapsible]`) — the label becomes a button that expands and collapses the
- *   group. Set `[basePath]` and the group opens itself whenever the active route is inside it, so a
- *   deep link or a browser Back lands with the right section already open instead of the person
- *   having to find and re-open it. A group whose pages live under several prefixes (a business area
- *   grouping `/people`, `/customers`, `/drivers`) lists them all in `[basePaths]`.
+ * - **Section** (default) — a static uppercase caption over its items. On the collapsed rail the caption
+ *   becomes a divider and the items (which carry their own icons) stay visible.
+ * - **Collapsible** (`[collapsible]`) — the label becomes a row-height header that opens and closes the
+ *   group with a short height animation. Its items render as nested sub-destinations on a tree guide
+ *   line, the active one marked on the line itself. Set `[basePath]` (or several `[basePaths]`) and the
+ *   group opens itself whenever the active route is inside it, so a deep link or a browser Back lands
+ *   with the right section already open; while closed it still shows that it holds the current page
+ *   (a highlighted header with a dot).
+ *
+ * On the collapsed desktop rail a collapsible group is its icon alone, and its pages open in a FLYOUT
+ * panel beside the rail — on hover, on click/tap (which pins it), or from the keyboard (Enter, Space or
+ * → opens it and focuses the first page; ↑/↓ move, Esc or ← closes back to the header). So every
+ * destination stays reachable on the icon rail, without navigating anywhere just to see what a section
+ * holds.
  *
  * A collapsible group can carry a `[badge]` of its own — typically the sum of its children's. It is
  * drawn on the header only while the children are hidden, so a closed section still says that
  * something inside it is waiting, and an open one does not show the same count twice.
  *
- * Collapsible mode exists because a flat rail stops scaling somewhere around a dozen destinations,
- * and the alternative — showing every child of every section at once — buries the ones in use.
- *
- * On the collapsed desktop rail there is nowhere to put a header, so a collapsible group renders
- * exactly like a section: divider, children visible. Hiding them there would leave the rail with
- * unreachable destinations and no affordance to reveal them.
+ * Inside the mobile drawer the rail is always full width, whatever the desktop collapse preference.
  */
-declare class SdsNavGroup {
+declare class SdsNavGroup implements SdsNavGroupContext {
     private readonly store;
     private readonly router;
+    private readonly document;
+    private readonly host;
+    private readonly injector;
+    private readonly id;
+    protected readonly headerId: string;
+    protected readonly panelId: string;
+    private readonly header;
+    private readonly panel;
     readonly label: _angular_core.InputSignal<string>;
     /** Turn the label into an expand/collapse control. */
     readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
+    /** Start open (until the person toggles it), even when the route is not inside the group. */
+    readonly defaultOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Icon for a collapsible header — and the group's only representation on the collapsed rail. */
     readonly icon: _angular_core.InputSignal<"chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
     /**
      * URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
@@ -4881,7 +4975,10 @@ declare class SdsNavGroup {
     readonly badgeMax: _angular_core.InputSignal<number>;
     /** Badge colour, as on {@link SdsNavItem}. */
     readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
-    /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
+    /**
+     * Emits the new state on every manual inline toggle. Not emitted for route-driven auto-expansion, nor
+     * for the collapsed rail's flyout (which shows the pages instead — no need to navigate to see them).
+     */
     readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
     /** Explicit user choice; null means "follow the route". */
     private readonly manual;
@@ -4893,42 +4990,74 @@ declare class SdsNavGroup {
      */
     protected readonly routeActive: _angular_core.Signal<boolean>;
     protected readonly expanded: _angular_core.Signal<boolean>;
-    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Icon-only desktop rail right now (never inside the mobile drawer). */
+    protected readonly railCollapsed: _angular_core.Signal<boolean>;
+    protected readonly flyoutOpen: _angular_core.WritableSignal<boolean>;
+    /** Opened by click / keyboard: stays open when the pointer leaves, until a choice, Esc or outside click. */
+    private pinned;
+    protected readonly pos: _angular_core.WritableSignal<{
+        top: number;
+        left: number;
+        maxHeight: number;
+    }>;
+    private openTimer;
+    private closeTimer;
+    protected readonly flyoutShown: _angular_core.Signal<boolean>;
+    readonly nested: _angular_core.Signal<boolean>;
+    readonly inFlyout: _angular_core.Signal<boolean>;
+    constructor();
     /** The header badge's spoken text — only while the children (which show their own) are hidden. */
     protected readonly headerBadgeText: _angular_core.Signal<string | null>;
     protected readonly badgeDisplay: _angular_core.Signal<string>;
-    /** The same pill as {@link SdsNavItem}'s, pinned to the icon's corner on the collapsed rail. */
-    protected readonly badgeClass: _angular_core.Signal<string>;
+    /** Accessible name of the icon-only header: "Money, 3 pending". */
+    protected readonly collapsedName: _angular_core.Signal<string>;
     /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
+    private readonly rail;
     private readonly surface;
+    private badgeTone$;
+    protected readonly badgeClass: _angular_core.Signal<string>;
+    /** The badge as a small pill on the icon's corner (collapsed rail). */
+    protected readonly pipClass: _angular_core.Signal<string>;
+    protected readonly activeDotClass: _angular_core.Signal<string>;
+    protected readonly wrapClass: _angular_core.Signal<"mt-1 first:mt-2" | "mt-5 first:mt-3">;
     /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly chevronClass: _angular_core.Signal<string>;
     protected readonly dividerClass: _angular_core.Signal<string>;
     protected readonly captionClass: _angular_core.Signal<string>;
+    protected readonly flyoutTitleClass: _angular_core.Signal<string>;
     /**
-     * A plain section always shows its items — they carry their own icons, so they survive the collapsed
-     * rail. A collapsible group hides its children there instead: its children are sub-destinations and
-     * typically have no icon, which on an icon-only rail is a row with nothing in it.
+     * Whether the items are on screen: a plain section always; a collapsible group when open on the full
+     * rail (its items have no icon of their own, so on the icon rail they live in the flyout instead).
      */
     protected readonly childrenVisible: _angular_core.Signal<boolean>;
+    /** Closed panels are `inert`, so their (visually hidden) links leave the tab order. */
+    protected readonly childrenInteractive: _angular_core.Signal<boolean>;
+    protected readonly panelClass: _angular_core.Signal<string>;
+    protected readonly innerClass: _angular_core.Signal<"" | "min-h-0 overflow-y-auto overscroll-contain" | "min-h-0 overflow-hidden">;
     /**
-     * One binding rather than `[class]` alongside `[class.hidden]` — mixing a whole-list binding with a
-     * single-class toggle on the same element depends on Angular's styling precedence to resolve, which
-     * is a subtlety no template should rest on.
-     *
-     * The indent rule appears only on an expanded collapsible group on the full-width rail: it is what
-     * shows the children belong to the header above them.
-     */
-    protected readonly childrenClass: _angular_core.Signal<string>;
-    /**
-     * On the collapsed rail there is nothing to expand into, so the toggle always reports "opening" —
-     * the app's handler takes that as the cue to navigate into the section, which is the only useful
-     * meaning the control can have there.
+     * The tree guide: a hairline under the header's icon (22 px = the header's 12 px padding + half its
+     * 20 px icon), with the items indented beside it. The active item marks its own stretch of the line.
      */
+    protected readonly listClass: _angular_core.Signal<string>;
+    /** Header click: toggle inline; on the collapsed rail, open (and pin) or close the flyout. */
     protected toggle(): void;
+    protected onHeaderKeydown(event: KeyboardEvent): void;
+    protected onHeaderEnter(): void;
+    protected scheduleClose(): void;
+    protected cancelClose(): void;
+    private openFlyout;
+    /** {@link SdsNavGroupContext} — also called by an item chosen inside the flyout. */
+    closeFlyout(restoreFocus?: boolean): void;
+    protected onEscape(): void;
+    /** Focus leaving the header + flyout altogether closes the flyout (Tab past the last page). */
+    protected onFocusOut(event: FocusEvent): void;
+    /** ↑/↓ (and Home/End) move between the flyout's pages; ← closes back to the header. */
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    private items;
+    private clearTimers;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; "basePaths": { "alias": "basePaths"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; "basePaths": { "alias": "basePaths"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 type SdsUserMenuAppearance = 'surface' | 'on-brand';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"