@frame-kit/ui-ng-patterns 0.2.15 → 0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng-patterns",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "Opinionated, dashboard-ready Angular component patterns composed from @frame-kit/ui-ng.",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,7 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
-    "@frame-kit/ui-ng": "0.2.15",
+    "@frame-kit/ui-ng": "0.2.17",
     "rxjs": "^7.0.0"
   },
   "sideEffects": false,

package/types/frame-kit-ui-ng-patterns-dashboard.d.ts

@@ -1411,8 +1411,17 @@ interface NavSegment {
  */
 declare class DashboardNavComponent {
     readonly groups: _angular_core.InputSignal<DashboardNavGroup[]>;
-    /** Icon-rail mode, passed through to every segment. */
-    readonly collapsed: _angular_core.InputSignal<boolean>;
+    /**
+     * Icon-rail mode, passed through to every segment. Left `null` — the
+     * default — each segment reads the collapse state of an ancestor
+     * `fk-app-shell`, which is what `fk-dashboard-layout` is. Set it
+     * explicitly only to drive the rail without a shell present.
+     *
+     * It defaults to inheriting rather than to `false` because the failure is
+     * silent otherwise: a nav told nothing renders its expanded rows into a
+     * collapsed rail and they are squashed, with no error to follow.
+     */
+    readonly collapsed: _angular_core.InputSignal<boolean | null>;
     /** Project `[navSlotBefore]` content immediately before this group. */
     readonly slotBeforeGroupId: _angular_core.InputSignal<string | null>;
     /** Project default `<ng-content>` immediately after this group. */
@@ -1420,6 +1429,9 @@ declare class DashboardNavComponent {
     readonly className: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string | null>;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly shell;
+    /** The rail state in force: this input, else the ancestor shell's. */
+    readonly isCollapsed: _angular_core.Signal<boolean>;
     /**
      * Visible groups sliced into render segments, each carrying a single-group
      * `SidebarNavModel`.
@@ -1437,6 +1449,14 @@ declare class DashboardNavComponent {
     readonly classes: _angular_core.Signal<string>;
     get hostClass(): string;
     get hostId(): string | null;
+    /**
+     * The sidebar is a navigation landmark, so a screen reader can jump to it
+     * rather than walking the page to find it. The host is the element that
+     * holds every link, so the role belongs here; without it the `aria-label`
+     * below names nothing, and a page whose only other landmark is a breadcrumb
+     * offers no way to reach the navigation at all.
+     */
+    readonly hostRole = "navigation";
     get hostAriaLabel(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardNavComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardNavComponent, "fk-dashboard-nav", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "slotBeforeGroupId": { "alias": "slotBeforeGroupId"; "required": false; "isSignal": true; }; "slotAfterGroupId": { "alias": "slotAfterGroupId"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[navSlotBefore]", "*"], true, never>;
@@ -1514,5 +1534,78 @@ declare class DashboardLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardLayoutComponent, "fk-dashboard-layout", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "endMode": { "alias": "endMode"; "required": false; "isSignal": true; }; "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "endCollapsedWidth": { "alias": "endCollapsedWidth"; "required": false; "isSignal": true; }; "pageLoading": { "alias": "pageLoading"; "required": false; "isSignal": true; }; "toggleAriaLabel": { "alias": "toggleAriaLabel"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[layoutBanner]", "[layoutBrand]", "[layoutToggleIcon]", "[layoutAside]", "[layoutAsideFooter]", "[layoutContentPanel]", "[layoutMenuIcon]", "[layoutTopbarStart]", "[layoutTopbarEnd]", "*", "[layoutPageLoader]", "[layoutEnd]", "[layoutFooter]"], true, never>;
 }
 
-export { BackNavComponent, ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentDetailHeaderComponent, ContentDetailPageComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, ContextSwitcherComponent, DashboardLayoutComponent, DashboardNavComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, InlineLoaderComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
+/**
+ * A whole dashboard shell in one element: the collapsing aside and its
+ * toggle, the brand block at its head, the icon-rail navigation, and the
+ * banner, topbar, panel and footer slots a product hangs its own content
+ * off.
+ *
+ * `fk-dashboard-layout` and `fk-dashboard-nav` remain the pieces to reach
+ * for when a product wants a different arrangement. This is the arrangement
+ * most products want, assembled once: every consumer that builds it by hand
+ * repeats the same half-dozen bindings, and the ones that matter fail
+ * quietly when forgotten rather than loudly.
+ *
+ * Everything a product supplies is projected on through, so nothing is
+ * given up by using it: banners, a trailing panel, a second nav column
+ * beside the page, switchers pinned into the rail.
+ *
+ * @example
+ * ```html
+ * <fk-dashboard-chrome
+ *   #chrome
+ *   brandText="Acme"
+ *   brandDescription="Admin"
+ *   brandHref="/"
+ *   [navGroups]="nav()"
+ * >
+ *   <fk-icon-badge chromeBrandMark name="acme-mark" shape="rounded" size="sm" />
+ *   <nav chromeTopbarStart>…</nav>
+ *   <fk-user-menu chromeTopbarEnd … />
+ *   <router-outlet />
+ * </fk-dashboard-chrome>
+ * ```
+ */
+declare class DashboardChromeComponent {
+    /** Product name beside the mark. */
+    readonly brandText: _angular_core.InputSignal<string>;
+    /** The line under it — which product this is. */
+    readonly brandDescription: _angular_core.InputSignal<string>;
+    /** Where the brand block navigates. */
+    readonly brandHref: _angular_core.InputSignal<string>;
+    /** Ordered nav groups, already filtered to what this reader may open. */
+    readonly navGroups: _angular_core.InputSignal<DashboardNavGroup[]>;
+    /** Group id the `[chromeNavBefore]` content is placed in front of. */
+    readonly navSlotBeforeGroupId: _angular_core.InputSignal<string | null>;
+    /** Group id the `[chromeNavAfter]` content follows. */
+    readonly navSlotAfterGroupId: _angular_core.InputSignal<string | null>;
+    /** Aside behaviour. `icon` leaves a rail behind when collapsed. */
+    readonly mode: _angular_core.InputSignal<AppShellMode>;
+    /** Trailing-panel behaviour, for a product that projects `[chromeEnd]`. */
+    readonly endMode: _angular_core.InputSignal<AppShellMode>;
+    /** Covers the content column while a routed page resolves. */
+    readonly pageLoading: _angular_core.InputSignal<boolean>;
+    readonly toggleAriaLabel: _angular_core.InputSignal<string>;
+    readonly menuAriaLabel: _angular_core.InputSignal<string>;
+    readonly className: _angular_core.InputSignal<string>;
+    private readonly layout;
+    /**
+     * Whether the aside is collapsed to its rail. For projected content that
+     * has to follow it — a switcher pinned into the nav shrinks to its glyph
+     * the same way the rows do.
+     */
+    collapsed(): boolean;
+    /** Whether the trailing panel is open. */
+    endOpen(): boolean;
+    /** Collapse the aside to its rail. */
+    closeSidenav(): void;
+    /** Open the trailing panel. */
+    openEnd(): void;
+    /** Close the trailing panel. */
+    closeEnd(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardChromeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardChromeComponent, "fk-dashboard-chrome", never, { "brandText": { "alias": "brandText"; "required": false; "isSignal": true; }; "brandDescription": { "alias": "brandDescription"; "required": false; "isSignal": true; }; "brandHref": { "alias": "brandHref"; "required": false; "isSignal": true; }; "navGroups": { "alias": "navGroups"; "required": false; "isSignal": true; }; "navSlotBeforeGroupId": { "alias": "navSlotBeforeGroupId"; "required": false; "isSignal": true; }; "navSlotAfterGroupId": { "alias": "navSlotAfterGroupId"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "endMode": { "alias": "endMode"; "required": false; "isSignal": true; }; "pageLoading": { "alias": "pageLoading"; "required": false; "isSignal": true; }; "toggleAriaLabel": { "alias": "toggleAriaLabel"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["[chromeBanner]", "[chromeBrandMark]", "[chromeNavBefore]", "[chromeNavAfter]", "[chromeTopbarStart]", "[chromeTopbarEnd]", "*", "[chromeContentPanel]", "[chromeEnd]", "[chromeFooter]"], true, never>;
+}
+
+export { BackNavComponent, ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentDetailHeaderComponent, ContentDetailPageComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, ContextSwitcherComponent, DashboardChromeComponent, DashboardLayoutComponent, DashboardNavComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, InlineLoaderComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
 export type { ColumnsEmptyTracks, ContextSwitcherColumn, ContextSwitcherIconTone, ContextSwitcherOption, ContextSwitcherSelection, ContextSwitcherSublabelTone, DashboardNavChild, DashboardNavGroup, DashboardNavItem, DialogConfirmVariant, DialogHeaderTint, OnboardingStep, OnboardingSubstep, OnboardingSubstepToggle, SidebarNavChild, SidebarNavGroup, SidebarNavItem, SidebarNavLink, SidebarNavModel };