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

package/fesm2022/frame-kit-ui-ng-patterns-dashboard.mjs

@@ -1,18 +1,20 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, HostBinding, inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, Injector, viewChild, contentChild, signal, effect, afterNextRender, output } from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, Injector, viewChild, contentChild, signal, effect, afterNextRender, output, ElementRef, linkedSignal } from '@angular/core';
 import { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';
 import { TextComponent } from '@frame-kit/ui-ng/core/text';
 import { IconComponent } from '@frame-kit/ui-ng/core/icon';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
 import { filter, map, Subscription } from 'rxjs';
 import { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';
 import { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';
 import { ButtonComponent } from '@frame-kit/ui-ng/ui/button';
 import { IconBadgeComponent } from '@frame-kit/ui-ng/ui/icon-badge';
+import * as i1 from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 
 /**
  * Page-level dashboard header: title + optional description on the left, up to
@@ -47,16 +49,35 @@ import { IconBadgeComponent } from '@frame-kit/ui-ng/ui/icon-badge';
  *   </fk-page-header>
  */
 class PageHeaderComponent {
+    // ===== INPUTS =====
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     headingLevel = input(1, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-page-header', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PageHeaderComponent, isStandalone: true, selector: "fk-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"fk-page-header\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }, { kind: "component", type: TextComponent, selector: "fk-text", inputs: ["as", "variant", "tone", "align", "weight", "truncate", "maxLines", "gutterBottom", "italic", "visuallyHidden", "className", "id", "ariaLabel", "ariaDescribedBy", "role", "htmlFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PageHeaderComponent, isStandalone: true, selector: "fk-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<header class=\"fk-page-header__bar\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header__bar{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header__bar{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }, { kind: "component", type: TextComponent, selector: "fk-text", inputs: ["as", "variant", "tone", "align", "weight", "truncate", "maxLines", "gutterBottom", "italic", "visuallyHidden", "className", "id", "ariaLabel", "ariaDescribedBy", "role", "htmlFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-page-header', standalone: true, imports: [HeadlineComponent, TextComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fk-page-header\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+            args: [{ selector: 'fk-page-header', standalone: true, imports: [HeadlineComponent, TextComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fk-page-header__bar\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header__bar{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header__bar{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
 
 /**
  * Empty-state panel for dashboard tables and lists: a centered icon, a title,
@@ -125,18 +146,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * A standalone layout primitive for custom dashboard rows.
  */
 class ContentSplitLayoutComponent {
+    // ===== INPUTS =====
     endWidth = input(null, ...(ngDevMode ? [{ debugName: "endWidth" }] : /* istanbul ignore next */ []));
     gap = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
-    hostClass = 'fk-content-split-layout';
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-content-split-layout', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fk-content-split-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"] }]
-        }], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], hostClass: [{
+        }], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
             }] } });
 
 /**
@@ -924,9 +959,593 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['attr.id']
             }] } });
 
+const VIEWPORT_MARGIN = 24;
+/**
+ * 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()"
+ * />
+ * ```
+ */
+class OnboardingGuideComponent {
+    host = inject(ElementRef);
+    drag = inject(CdkDrag);
+    destroyRef = inject(DestroyRef);
+    // ===== INPUTS =====
+    /** The step model. Controlled by the consumer; the widget is a view of it. */
+    steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Widget title. */
+    title = input('Setup guide', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** `localStorage` key for the collapsed + drag-position preferences. */
+    storageKey = input('fk-onboarding-guide', ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
+    /** Initial collapsed state, used only when nothing is persisted yet. */
+    startCollapsed = input(false, ...(ngDevMode ? [{ debugName: "startCollapsed" }] : /* istanbul ignore next */ []));
+    // --- Text (English defaults; pass translated strings as needed) ---
+    /** Default CTA label when a step doesn't supply its own `actionLabel`. */
+    startLabel = input('Start', ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
+    /** Secondary "mark this step done" action label. */
+    markDoneLabel = input('Mark done', ...(ngDevMode ? [{ debugName: "markDoneLabel" }] : /* istanbul ignore next */ []));
+    /** Footer / final go-live action label. */
+    goLiveLabel = input('Go live', ...(ngDevMode ? [{ debugName: "goLiveLabel" }] : /* istanbul ignore next */ []));
+    /** Footer noun for the "{done} of {total} {stepsWord} {doneWord}" summary. */
+    stepsWord = input('steps', ...(ngDevMode ? [{ debugName: "stepsWord" }] : /* istanbul ignore next */ []));
+    /** Footer verb for the summary. */
+    doneWord = input('done', ...(ngDevMode ? [{ debugName: "doneWord" }] : /* istanbul ignore next */ []));
+    /** Collapsed-pill suffix, e.g. "3 steps left". */
+    stepsLeftWord = input('left', ...(ngDevMode ? [{ debugName: "stepsLeftWord" }] : /* istanbul ignore next */ []));
+    /** Collapsed-pill copy shown when everything is complete. */
+    allDoneLabel = input('All set', ...(ngDevMode ? [{ debugName: "allDoneLabel" }] : /* istanbul ignore next */ []));
+    /** ARIA labels for the icon-only header controls. */
+    renameLabel = input('Rename', ...(ngDevMode ? [{ debugName: "renameLabel" }] : /* istanbul ignore next */ []));
+    collapseLabel = input('Collapse', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
+    dismissLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    expandLabel = input('Expand', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+    // --- Icon glyph names (resolved by the app's icon registry) ---
+    checkIcon = input('check', ...(ngDevMode ? [{ debugName: "checkIcon" }] : /* istanbul ignore next */ []));
+    caretIcon = input('chevron-down', ...(ngDevMode ? [{ debugName: "caretIcon" }] : /* istanbul ignore next */ []));
+    editIcon = input('pen', ...(ngDevMode ? [{ debugName: "editIcon" }] : /* istanbul ignore next */ []));
+    collapseIcon = input('collapse', ...(ngDevMode ? [{ debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
+    dismissIcon = input('close', ...(ngDevMode ? [{ debugName: "dismissIcon" }] : /* istanbul ignore next */ []));
+    expandIcon = input('expand', ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+    actionIcon = input('arrow-right', ...(ngDevMode ? [{ debugName: "actionIcon" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** A step's primary CTA was clicked. Emits the step id. */
+    stepAction = output();
+    /** A step's "mark done" was clicked. Emits the step id. */
+    stepMarkDone = output();
+    /** A substep checkbox was toggled. */
+    substepToggle = output();
+    /** The final go-live action was invoked (footer or the go-live step CTA). */
+    goLive = output();
+    /** The rename (edit) affordance was clicked; the consumer owns renaming. */
+    renameClick = output();
+    /** The dismiss control was clicked; the consumer decides whether to hide it. */
+    dismiss = output();
+    /** Fires when the collapsed state changes. */
+    collapsedChange = output();
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ===== PRESENTATION STATE =====
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    dragPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragPosition" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    justDragged = false;
+    /**
+     * 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.
+     */
+    openStepId = linkedSignal({ ...(ngDevMode ? { debugName: "openStepId" } : /* istanbul ignore next */ {}), source: this.steps,
+        computation: (steps) => steps.find((s) => !this.isComplete(s))?.id ?? null });
+    // ===== DERIVED =====
+    total = computed(() => this.steps().length, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    doneCount = computed(() => this.steps().filter((s) => this.isComplete(s)).length, ...(ngDevMode ? [{ debugName: "doneCount" }] : /* istanbul ignore next */ []));
+    percent = computed(() => {
+        const total = this.total();
+        return total === 0 ? 0 : Math.round((this.doneCount() / total) * 100);
+    }, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    stepsLeft = computed(() => this.total() - this.doneCount(), ...(ngDevMode ? [{ debugName: "stepsLeft" }] : /* istanbul ignore next */ []));
+    complete = computed(() => this.total() > 0 && this.stepsLeft() === 0, ...(ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []));
+    /** Circumference for the pill's progress ring (r = 16). */
+    ringCircumference = 2 * Math.PI * 16;
+    ringOffset = computed(() => {
+        const total = this.total();
+        const fraction = total === 0 ? 0 : this.doneCount() / total;
+        return this.ringCircumference * (1 - fraction);
+    }, ...(ngDevMode ? [{ debugName: "ringOffset" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-onboarding-guide',
+        this.collapsed() ? 'fk-onboarding-guide--collapsed' : '',
+        this.complete() ? 'fk-onboarding-guide--complete' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    constructor() {
+        this.drag.ended
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.onDragEnded(event));
+        afterNextRender(() => this.hydrate());
+    }
+    // ===== COMPLETION LOGIC =====
+    isComplete(step) {
+        if (step.substeps && step.substeps.length > 0) {
+            return step.substeps.every((sub) => sub.done);
+        }
+        return step.done;
+    }
+    isActive(step) {
+        return !this.isComplete(step) && this.openStepId() === step.id;
+    }
+    actionLabelFor(step) {
+        return step.actionLabel || this.startLabel();
+    }
+    // ===== INTERACTIONS =====
+    toggleStep(stepId) {
+        this.openStepId.update((cur) => (cur === stepId ? null : stepId));
+    }
+    onAction(step) {
+        this.stepAction.emit(step.id);
+    }
+    onMarkDone(step) {
+        this.stepMarkDone.emit(step.id);
+    }
+    onSubstep(step, substep) {
+        this.substepToggle.emit({ stepId: step.id, substepId: substep.id });
+    }
+    onCollapse() {
+        this.setCollapsed(true);
+    }
+    onExpand() {
+        if (this.justDragged) {
+            return;
+        }
+        this.setCollapsed(false);
+    }
+    onRename() {
+        this.renameClick.emit();
+    }
+    onDismiss() {
+        this.dismiss.emit();
+    }
+    onGoLive() {
+        this.goLive.emit();
+    }
+    setCollapsed(value) {
+        this.collapsed.set(value);
+        this.collapsedChange.emit(value);
+        this.persist();
+    }
+    // ===== DRAG =====
+    onDragEnded(event) {
+        const clamped = this.clamp(this.drag.getFreeDragPosition());
+        this.dragPosition.set(clamped);
+        this.drag.setFreeDragPosition(clamped);
+        this.persist();
+        const moved = Math.abs(event.distance.x) > 3 || Math.abs(event.distance.y) > 3;
+        if (moved) {
+            this.justDragged = true;
+            setTimeout(() => (this.justDragged = false));
+        }
+    }
+    clamp(point) {
+        if (typeof window === 'undefined') {
+            return point;
+        }
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width - VIEWPORT_MARGIN;
+        const maxY = window.innerHeight - rect.height - VIEWPORT_MARGIN;
+        return {
+            x: Math.max(VIEWPORT_MARGIN, Math.min(point.x, maxX)),
+            y: Math.max(VIEWPORT_MARGIN, Math.min(point.y, maxY)),
+        };
+    }
+    // ===== PERSISTENCE =====
+    hydrate() {
+        const saved = this.read();
+        this.collapsed.set(saved.collapsed ?? this.startCollapsed());
+        const pos = saved.pos ? this.clamp(saved.pos) : this.defaultBottomRight();
+        this.dragPosition.set(pos);
+        this.drag.setFreeDragPosition(pos);
+    }
+    defaultBottomRight() {
+        if (typeof window === 'undefined') {
+            return { x: 0, y: 0 };
+        }
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        return {
+            x: Math.max(VIEWPORT_MARGIN, window.innerWidth - rect.width - VIEWPORT_MARGIN),
+            y: Math.max(VIEWPORT_MARGIN, window.innerHeight - rect.height - VIEWPORT_MARGIN),
+        };
+    }
+    read() {
+        const store = this.storage();
+        if (!store) {
+            return {};
+        }
+        try {
+            return JSON.parse(store.getItem(this.storageKey()) || '{}');
+        }
+        catch {
+            return {};
+        }
+    }
+    persist() {
+        const store = this.storage();
+        if (!store) {
+            return;
+        }
+        const state = {
+            collapsed: this.collapsed(),
+            pos: this.dragPosition(),
+        };
+        try {
+            store.setItem(this.storageKey(), JSON.stringify(state));
+        }
+        catch {
+            // Storage unavailable (private mode / quota) — preferences just don't stick.
+        }
+    }
+    storage() {
+        try {
+            return typeof window === 'undefined' ? null : window.localStorage;
+        }
+        catch {
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OnboardingGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OnboardingGuideComponent, isStandalone: true, selector: "fk-onboarding-guide", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, markDoneLabel: { classPropertyName: "markDoneLabel", publicName: "markDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, goLiveLabel: { classPropertyName: "goLiveLabel", publicName: "goLiveLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsWord: { classPropertyName: "stepsWord", publicName: "stepsWord", isSignal: true, isRequired: false, transformFunction: null }, doneWord: { classPropertyName: "doneWord", publicName: "doneWord", isSignal: true, isRequired: false, transformFunction: null }, stepsLeftWord: { classPropertyName: "stepsLeftWord", publicName: "stepsLeftWord", isSignal: true, isRequired: false, transformFunction: null }, allDoneLabel: { classPropertyName: "allDoneLabel", publicName: "allDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, renameLabel: { classPropertyName: "renameLabel", publicName: "renameLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, caretIcon: { classPropertyName: "caretIcon", publicName: "caretIcon", isSignal: true, isRequired: false, transformFunction: null }, editIcon: { classPropertyName: "editIcon", publicName: "editIcon", isSignal: true, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissIcon: { classPropertyName: "dismissIcon", publicName: "dismissIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepAction: "stepAction", stepMarkDone: "stepMarkDone", substepToggle: "substepToggle", goLive: "goLive", renameClick: "renameClick", dismiss: "dismiss", collapsedChange: "collapsedChange" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: "<!-- ===================== EXPANDED CARD ===================== -->\n<div class=\"fk-onboarding-guide__card\">\n  <div class=\"fk-onboarding-guide__head\">\n    <div class=\"fk-onboarding-guide__head-top\">\n      <span class=\"fk-onboarding-guide__grip\" cdkDragHandle aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\">\n          <circle cx=\"9\" cy=\"6\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"6\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"9\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"9\" cy=\"18\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"18\" r=\"1.5\" fill=\"currentColor\" />\n        </svg>\n      </span>\n\n      <span class=\"fk-onboarding-guide__title\" cdkDragHandle>{{\n        title()\n      }}</span>\n\n      <button\n        type=\"button\"\n        class=\"fk-onboarding-guide__icon-btn fk-onboarding-guide__edit\"\n        [attr.aria-label]=\"renameLabel()\"\n        (click)=\"onRename()\"\n      >\n        <fk-icon [name]=\"editIcon()\" size=\"sm\" />\n      </button>\n\n      <div class=\"fk-onboarding-guide__head-actions\">\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__icon-btn\"\n          [attr.aria-label]=\"collapseLabel()\"\n          (click)=\"onCollapse()\"\n        >\n          <fk-icon [name]=\"collapseIcon()\" size=\"sm\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__icon-btn\"\n          [attr.aria-label]=\"dismissLabel()\"\n          (click)=\"onDismiss()\"\n        >\n          <fk-icon [name]=\"dismissIcon()\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <div class=\"fk-onboarding-guide__progress\">\n      <div\n        class=\"fk-onboarding-guide__track\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"percent()\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      >\n        <div\n          class=\"fk-onboarding-guide__fill\"\n          [style.width.%]=\"percent()\"\n        ></div>\n      </div>\n      <span class=\"fk-onboarding-guide__pct\">{{ percent() }}%</span>\n    </div>\n  </div>\n\n  <div class=\"fk-onboarding-guide__steps\" role=\"list\">\n    @for (step of steps(); track step.id) {\n      @let done = isComplete(step);\n      @let open = openStepId() === step.id;\n      @let active = isActive(step);\n\n      <div\n        class=\"fk-onboarding-guide__step\"\n        role=\"listitem\"\n        [class.fk-onboarding-guide__step--done]=\"done\"\n        [class.fk-onboarding-guide__step--open]=\"open\"\n      >\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__step-row\"\n          [attr.aria-expanded]=\"open\"\n          (click)=\"toggleStep(step.id)\"\n        >\n          <span\n            class=\"fk-onboarding-guide__check\"\n            [class.fk-onboarding-guide__check--done]=\"done\"\n            [class.fk-onboarding-guide__check--active]=\"active\"\n            [class.fk-onboarding-guide__check--todo]=\"!done && !active\"\n            aria-hidden=\"true\"\n          >\n            @if (done) {\n              <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n            } @else if (active) {\n              <i class=\"fk-onboarding-guide__dot\"></i>\n            }\n          </span>\n\n          <span class=\"fk-onboarding-guide__step-label\">{{ step.label }}</span>\n\n          <span class=\"fk-onboarding-guide__caret\" aria-hidden=\"true\">\n            <fk-icon [name]=\"caretIcon()\" size=\"sm\" />\n          </span>\n        </button>\n\n        @if (open) {\n          <div class=\"fk-onboarding-guide__step-body\">\n            @if (step.substeps && step.substeps.length > 0) {\n              @for (sub of step.substeps; track sub.id) {\n                <button\n                  type=\"button\"\n                  class=\"fk-onboarding-guide__sub\"\n                  [class.fk-onboarding-guide__sub--done]=\"sub.done\"\n                  (click)=\"onSubstep(step, sub)\"\n                >\n                  <span\n                    class=\"fk-onboarding-guide__sub-check\"\n                    aria-hidden=\"true\"\n                  >\n                    @if (sub.done) {\n                      <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n                    }\n                  </span>\n                  <span class=\"fk-onboarding-guide__sub-label\">{{\n                    sub.label\n                  }}</span>\n                </button>\n              }\n            } @else {\n              @if (step.description) {\n                <p class=\"fk-onboarding-guide__desc\">{{ step.description }}</p>\n              }\n\n              @if (!done) {\n                <div class=\"fk-onboarding-guide__actions\">\n                  <fk-button\n                    variant=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAction(step)\"\n                  >\n                    {{ actionLabelFor(step) }}\n                    <fk-icon fkButtonIconEnd [name]=\"actionIcon()\" size=\"xs\" />\n                  </fk-button>\n                  <button\n                    type=\"button\"\n                    class=\"fk-onboarding-guide__skip\"\n                    (click)=\"onMarkDone(step)\"\n                  >\n                    {{ markDoneLabel() }}\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"fk-onboarding-guide__foot\">\n    <span class=\"fk-onboarding-guide__foot-text\">\n      <b>{{ doneCount() }}</b> / {{ total() }} {{ stepsWord() }}\n      {{ doneWord() }}\n    </span>\n    <button type=\"button\" class=\"fk-onboarding-guide__go\" (click)=\"onGoLive()\">\n      {{ goLiveLabel() }}\n      <fk-icon [name]=\"actionIcon()\" size=\"xs\" />\n    </button>\n  </div>\n</div>\n\n<!-- ===================== COLLAPSED PILL ===================== -->\n<button\n  type=\"button\"\n  class=\"fk-onboarding-guide__pill\"\n  cdkDragHandle\n  [attr.aria-label]=\"expandLabel()\"\n  (click)=\"onExpand()\"\n>\n  <span class=\"fk-onboarding-guide__ring\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 38 38\">\n      <circle class=\"fk-onboarding-guide__ring-track\" cx=\"19\" cy=\"19\" r=\"16\" />\n      <circle\n        class=\"fk-onboarding-guide__ring-prog\"\n        cx=\"19\"\n        cy=\"19\"\n        r=\"16\"\n        [style.stroke-dasharray]=\"ringCircumference\"\n        [style.stroke-dashoffset]=\"ringOffset()\"\n      />\n    </svg>\n    <span class=\"fk-onboarding-guide__ring-num\">{{ percent() }}%</span>\n  </span>\n\n  <span class=\"fk-onboarding-guide__pill-meta\">\n    <span class=\"fk-onboarding-guide__pill-title\">{{ title() }}</span>\n    <span class=\"fk-onboarding-guide__pill-sub\">\n      @if (complete()) {\n        {{ allDoneLabel() }}\n      } @else {\n        <b>{{ stepsLeft() }}</b> {{ stepsWord() }} {{ stepsLeftWord() }}\n      }\n    </span>\n  </span>\n\n  <span class=\"fk-onboarding-guide__pill-expand\" aria-hidden=\"true\">\n    <fk-icon [name]=\"expandIcon()\" size=\"sm\" />\n  </span>\n</button>\n", styles: ["@keyframes fk-onboarding-guide-pop{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}:host{position:fixed;top:0;left:0;z-index:var(--fk-onboarding-guide-z, 60);font-family:var(--fk-onboarding-guide-font-body, var(--fk-font-family-body, system-ui, sans-serif));color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b));touch-action:none}.fk-onboarding-guide__card,.fk-onboarding-guide__pill{--fk-button-primary-bg: var( --fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a) );--fk-button-primary-bg-hover: color-mix( in srgb, var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a)) 88%, #000 );--fk-button-primary-color: var( --fk-onboarding-guide-accent-contrast, var(--fk-color-surface, #fff) )}.fk-onboarding-guide__card{width:var(--fk-onboarding-guide-width, 360px);max-width:calc(100vw - 2 * var(--fk-rhythm-4, 1rem));background:var(--fk-onboarding-guide-surface, var(--fk-color-surface, #fff));border:1px solid var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));border-radius:var(--fk-onboarding-guide-radius, var(--fk-radius-lg, 16px));box-shadow:var(--fk-onboarding-guide-shadow, 0 24px 54px -18px rgba(15, 23, 42, .28));overflow:hidden;transform-origin:bottom right;animation:fk-onboarding-guide-pop .24s cubic-bezier(.2,.9,.3,1.1)}.fk-onboarding-guide__head{padding:16px 18px 14px}.fk-onboarding-guide__head-top{display:flex;align-items:center;gap:9px}.fk-onboarding-guide__grip,.fk-onboarding-guide__title{cursor:grab}.fk-onboarding-guide__grip:active,.fk-onboarding-guide__title:active{cursor:grabbing}.fk-onboarding-guide__grip{display:inline-flex;flex:none;margin-left:-3px;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #94a3b8))}.fk-onboarding-guide__grip svg{width:15px;height:15px}.fk-onboarding-guide__title{font-family:var(--fk-onboarding-guide-font-display, var(--fk-font-family-display, inherit));font-size:16px;font-weight:700;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__head-actions{margin-left:auto;display:flex;gap:4px}.fk-onboarding-guide__icon-btn{display:grid;place-items:center;width:28px;height:28px;border:1px solid transparent;border-radius:7px;background:none;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #94a3b8));cursor:pointer;transition:.14s}.fk-onboarding-guide__icon-btn:hover{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc));border-color:var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__edit{width:24px;height:24px;border-radius:6px}.fk-onboarding-guide__progress{display:flex;align-items:center;gap:11px;margin-top:13px}.fk-onboarding-guide__track{flex:1;height:7px;border-radius:5px;background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f1f5f9));overflow:hidden}.fk-onboarding-guide__fill{height:100%;border-radius:5px;background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));transition:width .5s cubic-bezier(.4,0,.2,1)}.fk-onboarding-guide__pct{flex:none;font-family:var(--fk-onboarding-guide-font-mono, var(--fk-font-family-mono, ui-monospace, monospace));font-size:11px;font-weight:600;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__steps{padding:6px 8px 10px;max-height:400px;overflow-y:auto}.fk-onboarding-guide__step{border-radius:12px;overflow:hidden}.fk-onboarding-guide__step--open{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc))}.fk-onboarding-guide__step-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:none;border-radius:12px;background:none;text-align:left;cursor:pointer;transition:.14s}.fk-onboarding-guide__step-row:hover{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc))}.fk-onboarding-guide__step--open .fk-onboarding-guide__step-row:hover{background:transparent}.fk-onboarding-guide__check{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;transition:.16s;color:var(--fk-onboarding-guide-accent-contrast, #fff)}.fk-onboarding-guide__check--done{background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__check--todo{border:2px solid color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 45%,transparent)}.fk-onboarding-guide__check--active{border:2px solid var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));background:color-mix(in srgb,var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a)) 10%,transparent)}.fk-onboarding-guide__dot{width:7px;height:7px;border-radius:50%;background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__step-label{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__step--done .fk-onboarding-guide__step-label{color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));font-weight:500;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 55%,transparent)}.fk-onboarding-guide__caret{display:grid;place-items:center;flex:none;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #b6bfce));transition:transform .18s}.fk-onboarding-guide__step--open .fk-onboarding-guide__caret{transform:rotate(180deg);color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__step-body{padding:0 14px 14px 44px}.fk-onboarding-guide__desc{font-size:13px;line-height:1.55;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));margin-bottom:12px}.fk-onboarding-guide__actions{display:flex;align-items:center;gap:8px}.fk-onboarding-guide__skip{font-size:13px;font-weight:600;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));background:none;border:none;padding:6px;cursor:pointer}.fk-onboarding-guide__skip:hover{color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__sub{display:flex;align-items:center;gap:11px;width:100%;padding:8px 0;border:none;background:none;text-align:left;cursor:pointer}.fk-onboarding-guide__sub-check{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;color:var(--fk-onboarding-guide-accent-contrast, #fff);background:color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 22%,transparent)}.fk-onboarding-guide__sub--done .fk-onboarding-guide__sub-check{background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__sub-label{font-size:14px;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #36405a))}.fk-onboarding-guide__sub--done .fk-onboarding-guide__sub-label{color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__foot{display:flex;align-items:center;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--fk-onboarding-guide-divider, var(--fk-color-surface-dim, #f1f5f9))}.fk-onboarding-guide__foot-text{font-size:12.5px;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__foot-text b{color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b));font-weight:600}.fk-onboarding-guide__go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:none;border:none;cursor:pointer;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__pill{display:none;align-items:center;gap:12px;padding:9px 15px 9px 10px;border:1px solid var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));border-radius:999px;background:var(--fk-onboarding-guide-surface, var(--fk-color-surface, #fff));box-shadow:var(--fk-onboarding-guide-shadow, 0 24px 54px -18px rgba(15, 23, 42, .28));cursor:grab;animation:fk-onboarding-guide-pop .22s cubic-bezier(.2,.9,.3,1.1)}.fk-onboarding-guide__pill:active{cursor:grabbing}.fk-onboarding-guide__ring{position:relative;width:38px;height:38px;flex:none}.fk-onboarding-guide__ring svg{width:38px;height:38px;transform:rotate(-90deg)}.fk-onboarding-guide__ring-track{fill:none;stroke:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f1f5f9));stroke-width:4}.fk-onboarding-guide__ring-prog{fill:none;stroke:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}.fk-onboarding-guide__ring-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fk-onboarding-guide-font-mono, var(--fk-font-family-mono, ui-monospace, monospace));font-size:10.5px;font-weight:600;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__pill-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}.fk-onboarding-guide__pill-title{font-family:var(--fk-onboarding-guide-font-display, var(--fk-font-family-display, inherit));font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__pill-sub{margin-top:2px;font-size:11.5px;white-space:nowrap;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__pill-sub b{color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));font-weight:600}.fk-onboarding-guide__pill-expand{display:grid;place-items:center;width:28px;height:28px;flex:none;margin-left:2px;border-radius:50%;background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc));color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide--complete .fk-onboarding-guide__ring-prog{stroke:var(--fk-onboarding-guide-complete, var(--fk-color-success, #16a34a))}.fk-onboarding-guide--complete .fk-onboarding-guide__ring-num{color:var(--fk-onboarding-guide-complete, var(--fk-color-success, #16a34a))}:host(.fk-onboarding-guide--collapsed) .fk-onboarding-guide__card{display:none}:host(.fk-onboarding-guide--collapsed) .fk-onboarding-guide__pill{display:flex}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ButtonComponent, selector: "fk-button", inputs: ["variant", "size", "loading", "disabled", "type", "fullWidth", "id", "className", "ariaLabel", "ariaDescribedBy"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OnboardingGuideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-onboarding-guide', standalone: true, imports: [CdkDragHandle, ButtonComponent, IconComponent], hostDirectives: [CdkDrag], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ===================== EXPANDED CARD ===================== -->\n<div class=\"fk-onboarding-guide__card\">\n  <div class=\"fk-onboarding-guide__head\">\n    <div class=\"fk-onboarding-guide__head-top\">\n      <span class=\"fk-onboarding-guide__grip\" cdkDragHandle aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\">\n          <circle cx=\"9\" cy=\"6\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"6\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"9\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"9\" cy=\"18\" r=\"1.5\" fill=\"currentColor\" />\n          <circle cx=\"15\" cy=\"18\" r=\"1.5\" fill=\"currentColor\" />\n        </svg>\n      </span>\n\n      <span class=\"fk-onboarding-guide__title\" cdkDragHandle>{{\n        title()\n      }}</span>\n\n      <button\n        type=\"button\"\n        class=\"fk-onboarding-guide__icon-btn fk-onboarding-guide__edit\"\n        [attr.aria-label]=\"renameLabel()\"\n        (click)=\"onRename()\"\n      >\n        <fk-icon [name]=\"editIcon()\" size=\"sm\" />\n      </button>\n\n      <div class=\"fk-onboarding-guide__head-actions\">\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__icon-btn\"\n          [attr.aria-label]=\"collapseLabel()\"\n          (click)=\"onCollapse()\"\n        >\n          <fk-icon [name]=\"collapseIcon()\" size=\"sm\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__icon-btn\"\n          [attr.aria-label]=\"dismissLabel()\"\n          (click)=\"onDismiss()\"\n        >\n          <fk-icon [name]=\"dismissIcon()\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <div class=\"fk-onboarding-guide__progress\">\n      <div\n        class=\"fk-onboarding-guide__track\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"percent()\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      >\n        <div\n          class=\"fk-onboarding-guide__fill\"\n          [style.width.%]=\"percent()\"\n        ></div>\n      </div>\n      <span class=\"fk-onboarding-guide__pct\">{{ percent() }}%</span>\n    </div>\n  </div>\n\n  <div class=\"fk-onboarding-guide__steps\" role=\"list\">\n    @for (step of steps(); track step.id) {\n      @let done = isComplete(step);\n      @let open = openStepId() === step.id;\n      @let active = isActive(step);\n\n      <div\n        class=\"fk-onboarding-guide__step\"\n        role=\"listitem\"\n        [class.fk-onboarding-guide__step--done]=\"done\"\n        [class.fk-onboarding-guide__step--open]=\"open\"\n      >\n        <button\n          type=\"button\"\n          class=\"fk-onboarding-guide__step-row\"\n          [attr.aria-expanded]=\"open\"\n          (click)=\"toggleStep(step.id)\"\n        >\n          <span\n            class=\"fk-onboarding-guide__check\"\n            [class.fk-onboarding-guide__check--done]=\"done\"\n            [class.fk-onboarding-guide__check--active]=\"active\"\n            [class.fk-onboarding-guide__check--todo]=\"!done && !active\"\n            aria-hidden=\"true\"\n          >\n            @if (done) {\n              <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n            } @else if (active) {\n              <i class=\"fk-onboarding-guide__dot\"></i>\n            }\n          </span>\n\n          <span class=\"fk-onboarding-guide__step-label\">{{ step.label }}</span>\n\n          <span class=\"fk-onboarding-guide__caret\" aria-hidden=\"true\">\n            <fk-icon [name]=\"caretIcon()\" size=\"sm\" />\n          </span>\n        </button>\n\n        @if (open) {\n          <div class=\"fk-onboarding-guide__step-body\">\n            @if (step.substeps && step.substeps.length > 0) {\n              @for (sub of step.substeps; track sub.id) {\n                <button\n                  type=\"button\"\n                  class=\"fk-onboarding-guide__sub\"\n                  [class.fk-onboarding-guide__sub--done]=\"sub.done\"\n                  (click)=\"onSubstep(step, sub)\"\n                >\n                  <span\n                    class=\"fk-onboarding-guide__sub-check\"\n                    aria-hidden=\"true\"\n                  >\n                    @if (sub.done) {\n                      <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n                    }\n                  </span>\n                  <span class=\"fk-onboarding-guide__sub-label\">{{\n                    sub.label\n                  }}</span>\n                </button>\n              }\n            } @else {\n              @if (step.description) {\n                <p class=\"fk-onboarding-guide__desc\">{{ step.description }}</p>\n              }\n\n              @if (!done) {\n                <div class=\"fk-onboarding-guide__actions\">\n                  <fk-button\n                    variant=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAction(step)\"\n                  >\n                    {{ actionLabelFor(step) }}\n                    <fk-icon fkButtonIconEnd [name]=\"actionIcon()\" size=\"xs\" />\n                  </fk-button>\n                  <button\n                    type=\"button\"\n                    class=\"fk-onboarding-guide__skip\"\n                    (click)=\"onMarkDone(step)\"\n                  >\n                    {{ markDoneLabel() }}\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"fk-onboarding-guide__foot\">\n    <span class=\"fk-onboarding-guide__foot-text\">\n      <b>{{ doneCount() }}</b> / {{ total() }} {{ stepsWord() }}\n      {{ doneWord() }}\n    </span>\n    <button type=\"button\" class=\"fk-onboarding-guide__go\" (click)=\"onGoLive()\">\n      {{ goLiveLabel() }}\n      <fk-icon [name]=\"actionIcon()\" size=\"xs\" />\n    </button>\n  </div>\n</div>\n\n<!-- ===================== COLLAPSED PILL ===================== -->\n<button\n  type=\"button\"\n  class=\"fk-onboarding-guide__pill\"\n  cdkDragHandle\n  [attr.aria-label]=\"expandLabel()\"\n  (click)=\"onExpand()\"\n>\n  <span class=\"fk-onboarding-guide__ring\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 38 38\">\n      <circle class=\"fk-onboarding-guide__ring-track\" cx=\"19\" cy=\"19\" r=\"16\" />\n      <circle\n        class=\"fk-onboarding-guide__ring-prog\"\n        cx=\"19\"\n        cy=\"19\"\n        r=\"16\"\n        [style.stroke-dasharray]=\"ringCircumference\"\n        [style.stroke-dashoffset]=\"ringOffset()\"\n      />\n    </svg>\n    <span class=\"fk-onboarding-guide__ring-num\">{{ percent() }}%</span>\n  </span>\n\n  <span class=\"fk-onboarding-guide__pill-meta\">\n    <span class=\"fk-onboarding-guide__pill-title\">{{ title() }}</span>\n    <span class=\"fk-onboarding-guide__pill-sub\">\n      @if (complete()) {\n        {{ allDoneLabel() }}\n      } @else {\n        <b>{{ stepsLeft() }}</b> {{ stepsWord() }} {{ stepsLeftWord() }}\n      }\n    </span>\n  </span>\n\n  <span class=\"fk-onboarding-guide__pill-expand\" aria-hidden=\"true\">\n    <fk-icon [name]=\"expandIcon()\" size=\"sm\" />\n  </span>\n</button>\n", styles: ["@keyframes fk-onboarding-guide-pop{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}:host{position:fixed;top:0;left:0;z-index:var(--fk-onboarding-guide-z, 60);font-family:var(--fk-onboarding-guide-font-body, var(--fk-font-family-body, system-ui, sans-serif));color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b));touch-action:none}.fk-onboarding-guide__card,.fk-onboarding-guide__pill{--fk-button-primary-bg: var( --fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a) );--fk-button-primary-bg-hover: color-mix( in srgb, var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a)) 88%, #000 );--fk-button-primary-color: var( --fk-onboarding-guide-accent-contrast, var(--fk-color-surface, #fff) )}.fk-onboarding-guide__card{width:var(--fk-onboarding-guide-width, 360px);max-width:calc(100vw - 2 * var(--fk-rhythm-4, 1rem));background:var(--fk-onboarding-guide-surface, var(--fk-color-surface, #fff));border:1px solid var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));border-radius:var(--fk-onboarding-guide-radius, var(--fk-radius-lg, 16px));box-shadow:var(--fk-onboarding-guide-shadow, 0 24px 54px -18px rgba(15, 23, 42, .28));overflow:hidden;transform-origin:bottom right;animation:fk-onboarding-guide-pop .24s cubic-bezier(.2,.9,.3,1.1)}.fk-onboarding-guide__head{padding:16px 18px 14px}.fk-onboarding-guide__head-top{display:flex;align-items:center;gap:9px}.fk-onboarding-guide__grip,.fk-onboarding-guide__title{cursor:grab}.fk-onboarding-guide__grip:active,.fk-onboarding-guide__title:active{cursor:grabbing}.fk-onboarding-guide__grip{display:inline-flex;flex:none;margin-left:-3px;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #94a3b8))}.fk-onboarding-guide__grip svg{width:15px;height:15px}.fk-onboarding-guide__title{font-family:var(--fk-onboarding-guide-font-display, var(--fk-font-family-display, inherit));font-size:16px;font-weight:700;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__head-actions{margin-left:auto;display:flex;gap:4px}.fk-onboarding-guide__icon-btn{display:grid;place-items:center;width:28px;height:28px;border:1px solid transparent;border-radius:7px;background:none;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #94a3b8));cursor:pointer;transition:.14s}.fk-onboarding-guide__icon-btn:hover{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc));border-color:var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__edit{width:24px;height:24px;border-radius:6px}.fk-onboarding-guide__progress{display:flex;align-items:center;gap:11px;margin-top:13px}.fk-onboarding-guide__track{flex:1;height:7px;border-radius:5px;background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f1f5f9));overflow:hidden}.fk-onboarding-guide__fill{height:100%;border-radius:5px;background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));transition:width .5s cubic-bezier(.4,0,.2,1)}.fk-onboarding-guide__pct{flex:none;font-family:var(--fk-onboarding-guide-font-mono, var(--fk-font-family-mono, ui-monospace, monospace));font-size:11px;font-weight:600;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__steps{padding:6px 8px 10px;max-height:400px;overflow-y:auto}.fk-onboarding-guide__step{border-radius:12px;overflow:hidden}.fk-onboarding-guide__step--open{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc))}.fk-onboarding-guide__step-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:none;border-radius:12px;background:none;text-align:left;cursor:pointer;transition:.14s}.fk-onboarding-guide__step-row:hover{background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc))}.fk-onboarding-guide__step--open .fk-onboarding-guide__step-row:hover{background:transparent}.fk-onboarding-guide__check{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;transition:.16s;color:var(--fk-onboarding-guide-accent-contrast, #fff)}.fk-onboarding-guide__check--done{background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__check--todo{border:2px solid color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 45%,transparent)}.fk-onboarding-guide__check--active{border:2px solid var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));background:color-mix(in srgb,var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a)) 10%,transparent)}.fk-onboarding-guide__dot{width:7px;height:7px;border-radius:50%;background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__step-label{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__step--done .fk-onboarding-guide__step-label{color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));font-weight:500;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 55%,transparent)}.fk-onboarding-guide__caret{display:grid;place-items:center;flex:none;color:var(--fk-onboarding-guide-text-faint, var(--fk-color-muted, #b6bfce));transition:transform .18s}.fk-onboarding-guide__step--open .fk-onboarding-guide__caret{transform:rotate(180deg);color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__step-body{padding:0 14px 14px 44px}.fk-onboarding-guide__desc{font-size:13px;line-height:1.55;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));margin-bottom:12px}.fk-onboarding-guide__actions{display:flex;align-items:center;gap:8px}.fk-onboarding-guide__skip{font-size:13px;font-weight:600;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));background:none;border:none;padding:6px;cursor:pointer}.fk-onboarding-guide__skip:hover{color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__sub{display:flex;align-items:center;gap:11px;width:100%;padding:8px 0;border:none;background:none;text-align:left;cursor:pointer}.fk-onboarding-guide__sub-check{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;color:var(--fk-onboarding-guide-accent-contrast, #fff);background:color-mix(in srgb,var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b)) 22%,transparent)}.fk-onboarding-guide__sub--done .fk-onboarding-guide__sub-check{background:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__sub-label{font-size:14px;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #36405a))}.fk-onboarding-guide__sub--done .fk-onboarding-guide__sub-label{color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__foot{display:flex;align-items:center;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--fk-onboarding-guide-divider, var(--fk-color-surface-dim, #f1f5f9))}.fk-onboarding-guide__foot-text{font-size:12.5px;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__foot-text b{color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b));font-weight:600}.fk-onboarding-guide__go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:none;border:none;cursor:pointer;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__pill{display:none;align-items:center;gap:12px;padding:9px 15px 9px 10px;border:1px solid var(--fk-onboarding-guide-border, var(--fk-color-border, #e2e8f0));border-radius:999px;background:var(--fk-onboarding-guide-surface, var(--fk-color-surface, #fff));box-shadow:var(--fk-onboarding-guide-shadow, 0 24px 54px -18px rgba(15, 23, 42, .28));cursor:grab;animation:fk-onboarding-guide-pop .22s cubic-bezier(.2,.9,.3,1.1)}.fk-onboarding-guide__pill:active{cursor:grabbing}.fk-onboarding-guide__ring{position:relative;width:38px;height:38px;flex:none}.fk-onboarding-guide__ring svg{width:38px;height:38px;transform:rotate(-90deg)}.fk-onboarding-guide__ring-track{fill:none;stroke:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f1f5f9));stroke-width:4}.fk-onboarding-guide__ring-prog{fill:none;stroke:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}.fk-onboarding-guide__ring-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fk-onboarding-guide-font-mono, var(--fk-font-family-mono, ui-monospace, monospace));font-size:10.5px;font-weight:600;color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a))}.fk-onboarding-guide__pill-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}.fk-onboarding-guide__pill-title{font-family:var(--fk-onboarding-guide-font-display, var(--fk-font-family-display, inherit));font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--fk-onboarding-guide-text, var(--fk-color-text, #1e293b))}.fk-onboarding-guide__pill-sub{margin-top:2px;font-size:11.5px;white-space:nowrap;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide__pill-sub b{color:var(--fk-onboarding-guide-accent, var(--fk-color-text, #1a1a1a));font-weight:600}.fk-onboarding-guide__pill-expand{display:grid;place-items:center;width:28px;height:28px;flex:none;margin-left:2px;border-radius:50%;background:var(--fk-onboarding-guide-surface-muted, var(--fk-color-surface-muted, #f8fafc));color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b))}.fk-onboarding-guide--complete .fk-onboarding-guide__ring-prog{stroke:var(--fk-onboarding-guide-complete, var(--fk-color-success, #16a34a))}.fk-onboarding-guide--complete .fk-onboarding-guide__ring-num{color:var(--fk-onboarding-guide-complete, var(--fk-color-success, #16a34a))}:host(.fk-onboarding-guide--collapsed) .fk-onboarding-guide__card{display:none}:host(.fk-onboarding-guide--collapsed) .fk-onboarding-guide__pill{display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], markDoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markDoneLabel", required: false }] }], goLiveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "goLiveLabel", required: false }] }], stepsWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsWord", required: false }] }], doneWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneWord", required: false }] }], stepsLeftWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLeftWord", required: false }] }], allDoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDoneLabel", required: false }] }], renameLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], caretIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "caretIcon", required: false }] }], editIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "editIcon", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], dismissIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissIcon", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], actionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIcon", required: false }] }], stepAction: [{ type: i0.Output, args: ["stepAction"] }], stepMarkDone: [{ type: i0.Output, args: ["stepMarkDone"] }], substepToggle: [{ type: i0.Output, args: ["substepToggle"] }], goLive: [{ type: i0.Output, args: ["goLive"] }], renameClick: [{ type: i0.Output, args: ["renameClick"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * 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.
+ */
+class SearchBarLayoutComponent {
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-search-bar-layout', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'search';
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchBarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SearchBarLayoutComponent, isStandalone: true, selector: "fk-search-bar-layout", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<div class=\"fk-search-bar-layout__row\">\n  <ng-content />\n</div>\n", styles: [".fk-search-bar-layout{display:block;container-type:inline-size}.fk-search-bar-layout__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fk-search-bar-layout-gap);--fk-form-label-gap: 0;--fk-form-label-margin-top: 0;--fk-form-subscript-gap: 0;--fk-form-subscript-display: none;--fk-form-subscript-min-height: 0;--fk-form-field-gap: 0;--fk-input-padding: var(--fk-search-bar-layout-control-padding);--fk-input-font-size: var(--fk-search-bar-layout-control-font-size);--fk-input-border-radius: var(--fk-search-bar-layout-control-radius);--fk-select-arrow-color: var(--fk-search-bar-layout-chevron-color)}@container (max-width: 500px){.fk-search-bar-layout__row{flex-direction:column;align-items:stretch}}.fk-search-bar-layout__row>[search]{flex:1;min-width:0;--fk-input-bg: var(--fk-search-bar-layout-search-bg)}.fk-search-bar-layout__row>[filter]{flex:0 0 auto;min-width:var(--fk-search-bar-layout-filter-min-width);--fk-input-font-weight: var(--fk-search-bar-layout-filter-font-weight)}@container (max-width: 500px){.fk-search-bar-layout__row>[search],.fk-search-bar-layout__row>[filter]{flex:none;width:100%}}.fk-search-bar-layout__row .fk-select__arrow{stroke-width:var(--fk-search-bar-layout-chevron-stroke)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchBarLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-search-bar-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fk-search-bar-layout__row\">\n  <ng-content />\n</div>\n", styles: [".fk-search-bar-layout{display:block;container-type:inline-size}.fk-search-bar-layout__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fk-search-bar-layout-gap);--fk-form-label-gap: 0;--fk-form-label-margin-top: 0;--fk-form-subscript-gap: 0;--fk-form-subscript-display: none;--fk-form-subscript-min-height: 0;--fk-form-field-gap: 0;--fk-input-padding: var(--fk-search-bar-layout-control-padding);--fk-input-font-size: var(--fk-search-bar-layout-control-font-size);--fk-input-border-radius: var(--fk-search-bar-layout-control-radius);--fk-select-arrow-color: var(--fk-search-bar-layout-chevron-color)}@container (max-width: 500px){.fk-search-bar-layout__row{flex-direction:column;align-items:stretch}}.fk-search-bar-layout__row>[search]{flex:1;min-width:0;--fk-input-bg: var(--fk-search-bar-layout-search-bg)}.fk-search-bar-layout__row>[filter]{flex:0 0 auto;min-width:var(--fk-search-bar-layout-filter-min-width);--fk-input-font-weight: var(--fk-search-bar-layout-filter-font-weight)}@container (max-width: 500px){.fk-search-bar-layout__row>[search],.fk-search-bar-layout__row>[filter]{flex:none;width:100%}}.fk-search-bar-layout__row .fk-select__arrow{stroke-width:var(--fk-search-bar-layout-chevron-stroke)}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * 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.
+ */
+class ContentPageSectionComponent {
+    // ===== INPUTS =====
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    level = input(5, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    marginTop = input(null, ...(ngDevMode ? [{ debugName: "marginTop" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-content-page-section', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostMarginTop() {
+        return this.marginTop();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ContentPageSectionComponent, isStandalone: true, selector: "fk-content-page-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "style.margin-top": "this.hostMarginTop" } }, ngImport: i0, template: "@if (title()) {\n  <fk-headline [level]=\"level()\">{{ title() }}</fk-headline>\n}\n\n<ng-content />\n", styles: [".fk-content-page-section{display:flex;flex-direction:column;margin-top:var(--fk-content-page-section-margin-top);--fk-headline-margin-block-start: 0}.fk-content-page-section>*+*{margin-top:var(--fk-content-page-section-gap)}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentPageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-page-section', standalone: true, imports: [HeadlineComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (title()) {\n  <fk-headline [level]=\"level()\">{{ title() }}</fk-headline>\n}\n\n<ng-content />\n", styles: [".fk-content-page-section{display:flex;flex-direction:column;margin-top:var(--fk-content-page-section-margin-top);--fk-headline-margin-block-start: 0}.fk-content-page-section>*+*{margin-top:var(--fk-content-page-section-gap)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], marginTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginTop", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostMarginTop: [{
+                type: HostBinding,
+                args: ['style.margin-top']
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ContentRowComponent {
+    // ===== INPUTS =====
+    /**
+     * The smallest width a column may shrink to before the row drops to fewer
+     * columns — the single knob that controls when columns wrap/stack.
+     */
+    minColumnWidth = input('16rem', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * 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).
+     */
+    maxColumnWidth = input(null, ...(ngDevMode ? [{ debugName: "maxColumnWidth" }] : /* istanbul ignore next */ []));
+    /** Gap between side-by-side columns and between wrapped rows. */
+    gutter = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gutter" }] : /* istanbul ignore next */ []));
+    /** Draws a bordered, padded box around the columns (not the headline). */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-content-row', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    get hostMin() {
+        return this.minColumnWidth();
+    }
+    // Null leaves the property unset, so the SCSS falls back to `1fr` (fill).
+    get hostMax() {
+        return this.maxColumnWidth();
+    }
+    get hostGutter() {
+        return this.gutter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentRowComponent, isStandalone: true, selector: "fk-content-row", inputs: { minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, maxColumnWidth: { classPropertyName: "maxColumnWidth", publicName: "maxColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, gutter: { classPropertyName: "gutter", publicName: "gutter", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel", "style.--fk-content-row-min": "this.hostMin", "style.--fk-content-row-max": "this.hostMax", "style.--fk-content-row-gutter": "this.hostGutter" } }, ngImport: i0, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n  class=\"fk-content-row__grid\"\n  [class.fk-content-row__grid--bordered]=\"bordered()\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:block}.fk-content-row__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-content-row-min, 16rem),100%),var(--fk-content-row-max, 1fr)));gap:var(--fk-content-row-gutter, var(--fk-rhythm-4, 1rem));align-items:stretch;justify-content:start}.fk-content-row__grid:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-row__grid--bordered{padding:var(--fk-content-row-padding);border:1px solid var(--fk-content-row-border-color);border-radius:var(--fk-content-row-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n  class=\"fk-content-row__grid\"\n  [class.fk-content-row__grid--bordered]=\"bordered()\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:block}.fk-content-row__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-content-row-min, 16rem),100%),var(--fk-content-row-max, 1fr)));gap:var(--fk-content-row-gutter, var(--fk-rhythm-4, 1rem));align-items:stretch;justify-content:start}.fk-content-row__grid:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-row__grid--bordered{padding:var(--fk-content-row-padding);border:1px solid var(--fk-content-row-border-color);border-radius:var(--fk-content-row-radius)}\n"] }]
+        }], propDecorators: { minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], maxColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColumnWidth", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostMin: [{
+                type: HostBinding,
+                args: ['style.--fk-content-row-min']
+            }], hostMax: [{
+                type: HostBinding,
+                args: ['style.--fk-content-row-max']
+            }], hostGutter: [{
+                type: HostBinding,
+                args: ['style.--fk-content-row-gutter']
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ContentColumnComponent {
+    // ===== INPUTS =====
+    /** Draws a bordered, padded box around the content (not the headline). */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-content-column', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentColumnComponent, isStandalone: true, selector: "fk-content-column", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n  class=\"fk-content-column__content\"\n  [class.fk-content-column__content--bordered]=\"bordered()\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column}.fk-content-column__content{flex:1;display:flex;flex-direction:column}.fk-content-column__content:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-column__content--bordered{padding:var(--fk-content-column-padding);border:1px solid var(--fk-content-column-border-color);border-radius:var(--fk-content-column-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-column', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Headline sits outside the bordered region. -->\n<ng-content select=\"fk-content-column-headline\" />\n\n<div\n  class=\"fk-content-column__content\"\n  [class.fk-content-column__content--bordered]=\"bordered()\"\n>\n  <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column}.fk-content-column__content{flex:1;display:flex;flex-direction:column}.fk-content-column__content:not(:first-child){margin-top:var(--fk-content-column-headline-gap)}.fk-content-column__content--bordered{padding:var(--fk-content-column-padding);border:1px solid var(--fk-content-column-border-color);border-radius:var(--fk-content-column-radius)}\n"] }]
+        }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ContentColumnHeadlineComponent {
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-content-column-headline', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnHeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentColumnHeadlineComponent, isStandalone: true, selector: "fk-content-column-headline", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;color:var(--fk-content-column-headline-color);font-size:var(--fk-content-column-headline-font-size);font-weight:var(--fk-content-column-headline-font-weight)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentColumnHeadlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-column-headline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;color:var(--fk-content-column-headline-color);font-size:var(--fk-content-column-headline-font-size);font-weight:var(--fk-content-column-headline-font-weight)}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, PageHeaderComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
+export { ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };
 //# sourceMappingURL=frame-kit-ui-ng-patterns-dashboard.mjs.map