@frame-kit/ui-ng-patterns 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng-patterns",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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.1.7",
+    "@frame-kit/ui-ng": "0.1.8",
     "rxjs": "^7.0.0"
   },
   "sideEffects": false,

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

@@ -39,8 +39,14 @@ declare class PageHeaderComponent {
     readonly title: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string | null>;
     readonly headingLevel: _angular_core.InputSignal<HeadlineLevel>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "fk-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["[pageHeaderLeading]", "[pageHeaderTrailing]", "[pageHeaderActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "fk-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "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, ["[pageHeaderLeading]", "[pageHeaderTrailing]", "[pageHeaderActions]"], true, never>;
 }
 
 /**
@@ -90,9 +96,13 @@ declare class TableEmptyStateComponent {
 declare class ContentSplitLayoutComponent {
     readonly endWidth: _angular_core.InputSignal<string | null>;
     readonly gap: _angular_core.InputSignal<string>;
-    readonly hostClass = "fk-content-split-layout";
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentSplitLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSplitLayoutComponent, "fk-content-split-layout", never, { "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[start]", "[end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSplitLayoutComponent, "fk-content-split-layout", never, { "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[start]", "[end]"], true, never>;
 }
 
 /**
@@ -644,9 +654,9 @@ interface Point {
  * live in the widget and persist to `localStorage` under `storageKey` — these
  * are UI preferences, not part of the model.
  *
- * **Appearance-agnostic.** All colour flows through `--fk-*` tokens with neutral
- * (near-black / grey) raw fallbacks, so with no theme it renders monochrome;
- * point the tokens at a brand scale to colour it.
+ * **Opinionated but themeable.** It ships a house look out of the box; all
+ * colour flows through `--fk-onboarding-guide-*` tokens, so overriding those
+ * (e.g. pointing them at a brand scale) retints it without touching the markup.
  *
  * ```html
  * <fk-onboarding-guide
@@ -761,5 +771,184 @@ declare class OnboardingGuideComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnboardingGuideComponent, "fk-onboarding-guide", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "startCollapsed": { "alias": "startCollapsed"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "markDoneLabel": { "alias": "markDoneLabel"; "required": false; "isSignal": true; }; "goLiveLabel": { "alias": "goLiveLabel"; "required": false; "isSignal": true; }; "stepsWord": { "alias": "stepsWord"; "required": false; "isSignal": true; }; "doneWord": { "alias": "doneWord"; "required": false; "isSignal": true; }; "stepsLeftWord": { "alias": "stepsLeftWord"; "required": false; "isSignal": true; }; "allDoneLabel": { "alias": "allDoneLabel"; "required": false; "isSignal": true; }; "renameLabel": { "alias": "renameLabel"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "checkIcon": { "alias": "checkIcon"; "required": false; "isSignal": true; }; "caretIcon": { "alias": "caretIcon"; "required": false; "isSignal": true; }; "editIcon": { "alias": "editIcon"; "required": false; "isSignal": true; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; "isSignal": true; }; "dismissIcon": { "alias": "dismissIcon"; "required": false; "isSignal": true; }; "expandIcon": { "alias": "expandIcon"; "required": false; "isSignal": true; }; "actionIcon": { "alias": "actionIcon"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "stepAction": "stepAction"; "stepMarkDone": "stepMarkDone"; "substepToggle": "substepToggle"; "goLive": "goLive"; "renameClick": "renameClick"; "dismiss": "dismiss"; "collapsedChange": "collapsedChange"; }, never, never, true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
 }
 
-export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, OnboardingGuideComponent, PageHeaderComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
+/**
+ * Layout for a dashboard search/filter bar. It lays out a primary search field
+ * and fixed-width filter dropdowns in a responsive row and compacts the
+ * projected `fk-form-field` / `fk-input` / `fk-select` controls to the house
+ * filter-bar size — so every dashboard's filter bar reads the same without
+ * per-page CSS.
+ *
+ * It owns **layout and responsiveness only** — no surrounding border,
+ * background, or elevation. If you want the bar to sit inside a card, wrap it in
+ * your own surface.
+ *
+ * Tag the primary search field with the `search` attribute (grows to fill) and
+ * each fixed-width filter with the `filter` attribute. Under a narrow container
+ * the row stacks and every control goes full-width.
+ *
+ * ```html
+ * <fk-search-bar-layout>
+ *   <fk-form-field search>
+ *     <fk-icon fkPrefix name="magnifier-outline" size="sm" />
+ *     <fk-input formControlName="q" placeholder="Search…" />
+ *   </fk-form-field>
+ *
+ *   <fk-form-field filter>
+ *     <fk-select formControlName="status" [options]="options" />
+ *   </fk-form-field>
+ * </fk-search-bar-layout>
+ * ```
+ *
+ * Uses `ViewEncapsulation.None` so it can style the projected controls (the
+ * `[search]` / `[filter]` children and the select chevron); its rules are scoped
+ * under the block class.
+ */
+declare class SearchBarLayoutComponent {
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    readonly role = "search";
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchBarLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchBarLayoutComponent, "fk-search-bar-layout", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * A titled content section for a dashboard page: an optional heading followed by
+ * projected content, with consistent vertical rhythm between the section and its
+ * own children.
+ *
+ * Spacing is top-margin only (never a parent `gap`), so a consumer's per-child
+ * `margin-top` overrides cleanly instead of stacking on an invisible gap. The
+ * first child sits flush; each subsequent child gets the section rhythm.
+ * `marginTop` overrides the section's own top margin per instance.
+ *
+ * ```html
+ * <fk-content-page-section title="Members" [level]="3">
+ *   <p>…</p>
+ *   <fk-data-table />
+ * </fk-content-page-section>
+ * ```
+ *
+ * Uses `ViewEncapsulation.None` so the inter-child rhythm rule reaches projected
+ * content; its rules are scoped under the block class.
+ */
+declare class ContentPageSectionComponent {
+    readonly title: _angular_core.InputSignal<string | null>;
+    readonly level: _angular_core.InputSignal<HeadlineLevel>;
+    readonly marginTop: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostMarginTop(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentPageSectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentPageSectionComponent, "fk-content-page-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Lays its `fk-content-column` children out **side by side**, wrapping and
+ * ultimately stacking to a single column based on the row's *own* available
+ * width — never the viewport (so it reacts when a sidenav opens or it sits in a
+ * narrow panel). Same intrinsic CSS grid as `fk-columns`
+ * (`repeat(auto-fit, minmax(min, 1fr))`); `minColumnWidth` is the single knob
+ * for when columns stack.
+ *
+ * Optionally **bordered**, with an optional **headline**
+ * (`fk-content-column-headline`) that sits *outside* the border — so the row
+ * reads as a titled section wrapping a set of columns.
+ *
+ * ```html
+ * <fk-content-row [bordered]="true" minColumnWidth="16rem">
+ *   <fk-content-column-headline>Providers</fk-content-column-headline>
+ *   <fk-content-column>…</fk-content-column>
+ *   <fk-content-column>…</fk-content-column>
+ * </fk-content-row>
+ * ```
+ */
+declare class ContentRowComponent {
+    /**
+     * The smallest width a column may shrink to before the row drops to fewer
+     * columns — the single knob that controls when columns wrap/stack.
+     */
+    readonly minColumnWidth: _angular_core.InputSignal<string>;
+    /**
+     * Optional cap on how wide a column may grow. Unset (default), columns fill
+     * the row (`1fr`); when set, columns stop at this width and leftover space
+     * stays empty (columns aligned to the start).
+     */
+    readonly maxColumnWidth: _angular_core.InputSignal<string | null>;
+    /** Gap between side-by-side columns and between wrapped rows. */
+    readonly gutter: _angular_core.InputSignal<string>;
+    /** Draws a bordered, padded box around the columns (not the headline). */
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    get hostMin(): string;
+    get hostMax(): string | null;
+    get hostGutter(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentRowComponent, "fk-content-row", never, { "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "maxColumnWidth": { "alias": "maxColumnWidth"; "required": false; "isSignal": true; }; "gutter": { "alias": "gutter"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "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, ["fk-content-column-headline", "*"], true, never>;
+}
+
+/**
+ * A single content column — a vertical block of stacked content, with an
+ * optional **border** and an optional **headline** (`fk-content-column-headline`)
+ * that sits *outside* that border. The semantic unit that goes inside an
+ * `fk-content-row` (which lays columns side by side and stacks them when narrow),
+ * or stands alone as a bordered, titled section.
+ *
+ * ```html
+ * <fk-content-column [bordered]="true">
+ *   <fk-content-column-headline>Provider</fk-content-column-headline>
+ *   …
+ * </fk-content-column>
+ * ```
+ */
+declare class ContentColumnComponent {
+    /** Draws a bordered, padded box around the content (not the headline). */
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentColumnComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentColumnComponent, "fk-content-column", never, { "bordered": { "alias": "bordered"; "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, ["fk-content-column-headline", "*"], true, never>;
+}
+
+/**
+ * Optional headline for `fk-content-column` / `fk-content-row`. Projected
+ * *outside* the bordered region, so it labels the group without being boxed in
+ * with the content. Projects its own text/markup.
+ *
+ * ```html
+ * <fk-content-column [bordered]="true">
+ *   <fk-content-column-headline>Provider</fk-content-column-headline>
+ *   …
+ * </fk-content-column>
+ * ```
+ */
+declare class ContentColumnHeadlineComponent {
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentColumnHeadlineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentColumnHeadlineComponent, "fk-content-column-headline", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
 export type { DialogConfirmVariant, DialogHeaderTint, OnboardingStep, OnboardingSubstep, OnboardingSubstepToggle, SidebarNavChild, SidebarNavGroup, SidebarNavItem, SidebarNavLink, SidebarNavModel };