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

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

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { HeadlineLevel } from '@frame-kit/ui-ng/core/headline';
+import * as i1 from '@angular/cdk/drag-drop';
 
 /**
  * Page-level dashboard header: title + optional description on the left, up to
@@ -38,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>;
 }
 
 /**
@@ -89,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>;
 }
 
 /**
@@ -579,5 +590,365 @@ declare class DialogFooterComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogFooterComponent, "fk-dialog-footer", never, { "note": { "alias": "note"; "required": false; "isSignal": true; }; "noteIcon": { "alias": "noteIcon"; "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, ["*"], true, never>;
 }
 
-export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, PageHeaderComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
-export type { DialogConfirmVariant, DialogHeaderTint, SidebarNavChild, SidebarNavGroup, SidebarNavItem, SidebarNavLink, SidebarNavModel };
+/**
+ * A single item inside a grouped step's sub-checklist. The consumer owns the
+ * `done` state — the widget only reflects it and emits toggles.
+ */
+interface OnboardingSubstep {
+    /** Stable identifier, unique within the parent step. */
+    id: string;
+    /** Human-readable label. */
+    label: string;
+    /** Whether this substep is complete. */
+    done: boolean;
+}
+/**
+ * A step in the onboarding guide. A step is either:
+ *
+ * - a **leaf** step — has an optional `description` + a call-to-action, and its
+ *   completion is driven by the `done` flag, or
+ * - a **group** step — carries `substeps`, and is considered complete once every
+ *   substep is `done` (the top-level `done` flag is ignored for group steps).
+ *
+ * All state (`done`) is owned by the consumer; the widget is a controlled view
+ * of the `steps` model and emits events when the user acts.
+ */
+interface OnboardingStep {
+    /** Stable identifier, unique within the guide. */
+    id: string;
+    /** Human-readable label shown on the step row. */
+    label: string;
+    /** Whether a leaf step is complete. Ignored when `substeps` is set. */
+    done: boolean;
+    /** Optional supporting copy shown when the step is expanded. */
+    description?: string;
+    /** Optional call-to-action label (defaults to a generic "Start"). */
+    actionLabel?: string;
+    /** When set, the step renders a sub-checklist and auto-completes when all are done. */
+    substeps?: OnboardingSubstep[];
+}
+/** Payload emitted when a substep checkbox is toggled. */
+interface OnboardingSubstepToggle {
+    stepId: string;
+    substepId: string;
+}
+
+interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * A floating, draggable onboarding-progress widget. It presents a checklist of
+ * steps with a progress bar, collapses to a compact pill with a progress ring,
+ * and can be dragged anywhere on screen (CDK drag). It renders over the app in
+ * a fixed layer — drop it once near the app root.
+ *
+ * **Controlled model, no domain data.** The `steps` model is a required,
+ * reactive input: the widget is a pure view of it and emits events when the
+ * user acts (`stepAction`, `stepMarkDone`, `substepToggle`, `goLive`). The
+ * consumer owns the step state — so if it is keyed by, say, the active account
+ * or environment, swapping the input re-renders the widget instantly. The
+ * widget never persists step state.
+ *
+ * **Presentation state is internal + persisted.** Collapsed and drag position
+ * live in the widget and persist to `localStorage` under `storageKey` — these
+ * are UI preferences, not part of the model.
+ *
+ * **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
+ *   [steps]="steps()"
+ *   title="Setup guide"
+ *   (stepAction)="onStart($event)"
+ *   (substepToggle)="onToggle($event)"
+ *   (goLive)="onGoLive()"
+ *   (dismiss)="onDismiss()"
+ * />
+ * ```
+ */
+declare class OnboardingGuideComponent {
+    private readonly host;
+    private readonly drag;
+    private readonly destroyRef;
+    /** The step model. Controlled by the consumer; the widget is a view of it. */
+    readonly steps: _angular_core.InputSignal<OnboardingStep[]>;
+    /** Widget title. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** `localStorage` key for the collapsed + drag-position preferences. */
+    readonly storageKey: _angular_core.InputSignal<string>;
+    /** Initial collapsed state, used only when nothing is persisted yet. */
+    readonly startCollapsed: _angular_core.InputSignal<boolean>;
+    /** Default CTA label when a step doesn't supply its own `actionLabel`. */
+    readonly startLabel: _angular_core.InputSignal<string>;
+    /** Secondary "mark this step done" action label. */
+    readonly markDoneLabel: _angular_core.InputSignal<string>;
+    /** Footer / final go-live action label. */
+    readonly goLiveLabel: _angular_core.InputSignal<string>;
+    /** Footer noun for the "{done} of {total} {stepsWord} {doneWord}" summary. */
+    readonly stepsWord: _angular_core.InputSignal<string>;
+    /** Footer verb for the summary. */
+    readonly doneWord: _angular_core.InputSignal<string>;
+    /** Collapsed-pill suffix, e.g. "3 steps left". */
+    readonly stepsLeftWord: _angular_core.InputSignal<string>;
+    /** Collapsed-pill copy shown when everything is complete. */
+    readonly allDoneLabel: _angular_core.InputSignal<string>;
+    /** ARIA labels for the icon-only header controls. */
+    readonly renameLabel: _angular_core.InputSignal<string>;
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    readonly dismissLabel: _angular_core.InputSignal<string>;
+    readonly expandLabel: _angular_core.InputSignal<string>;
+    readonly checkIcon: _angular_core.InputSignal<string>;
+    readonly caretIcon: _angular_core.InputSignal<string>;
+    readonly editIcon: _angular_core.InputSignal<string>;
+    readonly collapseIcon: _angular_core.InputSignal<string>;
+    readonly dismissIcon: _angular_core.InputSignal<string>;
+    readonly expandIcon: _angular_core.InputSignal<string>;
+    readonly actionIcon: _angular_core.InputSignal<string>;
+    /** A step's primary CTA was clicked. Emits the step id. */
+    readonly stepAction: _angular_core.OutputEmitterRef<string>;
+    /** A step's "mark done" was clicked. Emits the step id. */
+    readonly stepMarkDone: _angular_core.OutputEmitterRef<string>;
+    /** A substep checkbox was toggled. */
+    readonly substepToggle: _angular_core.OutputEmitterRef<OnboardingSubstepToggle>;
+    /** The final go-live action was invoked (footer or the go-live step CTA). */
+    readonly goLive: _angular_core.OutputEmitterRef<void>;
+    /** The rename (edit) affordance was clicked; the consumer owns renaming. */
+    readonly renameClick: _angular_core.OutputEmitterRef<void>;
+    /** The dismiss control was clicked; the consumer decides whether to hide it. */
+    readonly dismiss: _angular_core.OutputEmitterRef<void>;
+    /** Fires when the collapsed state changes. */
+    readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    protected readonly dragPosition: _angular_core.WritableSignal<Point>;
+    /** True immediately after a real drag, so the drag-handle's click (e.g. the
+     *  pill's expand) is suppressed rather than firing at the drop point. */
+    private justDragged;
+    /**
+     * The expanded step. A `linkedSignal` over `steps` so that whenever the model
+     * changes (e.g. the consumer swaps in another account/environment's steps) it
+     * resets to the first incomplete step; user toggles override until the next
+     * model change.
+     */
+    protected readonly openStepId: _angular_core.WritableSignal<string | null>;
+    protected readonly total: _angular_core.Signal<number>;
+    protected readonly doneCount: _angular_core.Signal<number>;
+    protected readonly percent: _angular_core.Signal<number>;
+    protected readonly stepsLeft: _angular_core.Signal<number>;
+    protected readonly complete: _angular_core.Signal<boolean>;
+    /** Circumference for the pill's progress ring (r = 16). */
+    protected readonly ringCircumference: number;
+    protected readonly ringOffset: _angular_core.Signal<number>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    constructor();
+    isComplete(step: OnboardingStep): boolean;
+    protected isActive(step: OnboardingStep): boolean;
+    protected actionLabelFor(step: OnboardingStep): string;
+    protected toggleStep(stepId: string): void;
+    protected onAction(step: OnboardingStep): void;
+    protected onMarkDone(step: OnboardingStep): void;
+    protected onSubstep(step: OnboardingStep, substep: OnboardingSubstep): void;
+    protected onCollapse(): void;
+    protected onExpand(): void;
+    protected onRename(): void;
+    protected onDismiss(): void;
+    protected onGoLive(): void;
+    private setCollapsed;
+    private onDragEnded;
+    private clamp;
+    private hydrate;
+    private defaultBottomRight;
+    private read;
+    private persist;
+    private storage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnboardingGuideComponent, never>;
+    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: {}; }]>;
+}
+
+/**
+ * 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 };