@frame-kit/ui-ng-patterns 0.1.19 → 0.1.20

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

@@ -1,5 +1,5 @@
 import * as i0 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 { input, computed, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, Injector, viewChild, contentChild, signal, effect, afterNextRender, output, ElementRef, model, untracked } 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';
@@ -967,23 +967,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['attr.id']
             }] } });
 
-const VIEWPORT_MARGIN = 24;
+/** Pointer travel below this is a click, not a drag. */
+const DRAG_THRESHOLD = 3;
 /**
  * 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.
+ * and can be dragged around (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.
+ * user acts (`stepAction`, `stepMarkDone`, `stepSecondaryAction`,
+ * `substepToggle`, `footerAction`). 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.
+ * **Collapsed is a two-way model.** Bind `[(collapsed)]` (or listen to
+ * `collapsedChange`) to drive the card ↔ pill swap from outside — e.g. an
+ * auto-open policy. Left unbound, the widget manages it internally.
+ *
+ * **Container-aware.** `boundary` (a selector or element) confines both
+ * dragging and the widget's resting position to a region of the app — e.g. a
+ * dashboard's content area, so the widget can never cover navigation or a
+ * footer. The default resting spot is the boundary's bottom-right corner, and
+ * the widget re-clamps itself whenever its own footprint changes (pill ↔ card
+ * swap, a step expanding) or the viewport resizes — a corner-parked pill that
+ * expands into a large card pulls itself fully back into view. Until the user
+ * actually drags it, it stays anchored to the bottom-right corner.
+ *
+ * **Presentation state is internal + optionally persisted.** Collapsed and
+ * drag position persist to `localStorage` under `storageKey`; pass
+ * `storageKey = null` for session-only behavior (e.g. when a consumer-side
+ * store owns presentation policy).
  *
  * **Opinionated but themeable.** It ships a house look out of the box; all
  * colour flows through `--fk-onboarding-guide-*` tokens, so overriding those
@@ -993,9 +1008,12 @@ const VIEWPORT_MARGIN = 24;
  * <fk-onboarding-guide
  *   [steps]="steps()"
  *   title="Setup guide"
+ *   boundary=".app-content"
+ *   [storageKey]="null"
+ *   [(collapsed)]="collapsed"
  *   (stepAction)="onStart($event)"
  *   (substepToggle)="onToggle($event)"
- *   (goLive)="onGoLive()"
+ *   (footerAction)="onGoLive()"
  *   (dismiss)="onDismiss()"
  * />
  * ```
@@ -1009,17 +1027,31 @@ class OnboardingGuideComponent {
     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. */
+    /**
+     * `localStorage` key for the collapsed + drag-position preferences.
+     * `null` disables persistence entirely — presentation state then lives and
+     * dies with the component instance (or with whatever the consumer binds).
+     */
     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 */ []));
+    /**
+     * Region the widget is confined to: a CSS selector or an element. Both
+     * dragging and the widget's resting position are clamped inside it. `null`
+     * (the default) confines to the viewport.
+     */
+    boundary = input(null, ...(ngDevMode ? [{ debugName: "boundary" }] : /* istanbul ignore next */ []));
+    /** Breathing room kept between the widget and the boundary's edges. */
+    boundaryMargin = input(24, ...(ngDevMode ? [{ debugName: "boundaryMargin" }] : /* istanbul ignore next */ []));
+    /** Shows the rename (edit) affordance next to the title. */
+    renamable = input(false, ...(ngDevMode ? [{ debugName: "renamable" }] : /* istanbul ignore next */ []));
+    /** Shows the secondary "mark this step done" action on leaf steps. */
+    showMarkDone = input(true, ...(ngDevMode ? [{ debugName: "showMarkDone" }] : /* 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 action label (e.g. "Go live"). `null` hides the footer action. */
+    footerActionLabel = input('Go live', ...(ngDevMode ? [{ debugName: "footerActionLabel" }] : /* 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. */
@@ -1041,38 +1073,71 @@ class OnboardingGuideComponent {
     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 */ []));
+    // ===== MODEL =====
+    /**
+     * Whether the widget is collapsed to the pill. Two-way bindable so a
+     * consumer-side policy (auto-open on context switches, banner-triggered
+     * opens) can drive the card ↔ pill swap; unbound, the widget manages it.
+     */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* 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 step's secondary text-action was clicked. Emits the step id. */
+    stepSecondaryAction = 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 footer action was invoked. */
+    footerAction = 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.
+     * True once the user has deliberately placed the widget (a real drag now,
+     * or a persisted position from a previous session). Until then the widget
+     * re-anchors to the boundary's bottom-right corner on every viewport or
+     * footprint change instead of merely clamping its current spot.
      */
-    openStepId = linkedSignal({ ...(ngDevMode ? { debugName: "openStepId" } : /* istanbul ignore next */ {}), source: this.steps,
-        computation: (steps) => steps.find((s) => !this.isComplete(s))?.id ?? null });
+    userMoved = false;
+    footprintObserver = null;
+    /** Guards the one-time preference restore in `hydrateOnce`. */
+    hydrated = false;
+    /** True between CDK's drag start and drop — `reposition` stands down. */
+    dragging = false;
+    /** The boundary element currently under observation (if any). */
+    observedBoundary = null;
+    /**
+     * Last seen completion signature (step ids + done states) — the accordion
+     * reset skips the first run and cosmetic-only model updates.
+     */
+    prevCompletionSignature = null;
+    /**
+     * The expanded step. Two-way bindable so a consumer can spotlight a
+     * specific step (e.g. a "complete this section" banner). `undefined` means
+     * "follow the default" — the first incomplete step. User toggles (and
+     * consumer writes) override the default until the `steps` model changes,
+     * which resets the choice so the guide re-focuses the next piece of work.
+     */
+    openStepId = model(undefined, ...(ngDevMode ? [{ debugName: "openStepId" }] : /* istanbul ignore next */ []));
+    /** The step actually expanded: the explicit choice, or the default. */
+    resolvedOpenStepId = computed(() => {
+        const explicit = this.openStepId();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.steps().find((s) => !this.isComplete(s))?.id ?? null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedOpenStepId" }] : /* istanbul ignore next */ []));
     // ===== 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 */ []));
@@ -1104,10 +1169,100 @@ class OnboardingGuideComponent {
         return this.id();
     }
     constructor() {
+        this.drag.started
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => (this.dragging = true));
         this.drag.ended
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => this.onDragEnded(event));
-        afterNextRender(() => this.hydrate());
+        // A COMPLETION change (a step finishing, or a different guide's steps —
+        // e.g. an env switch — arriving) drops the explicit accordion choice so
+        // the default — the first incomplete step — takes over again and the
+        // guide auto-advances. Only the completion signature matters: cosmetic
+        // model updates (a description or secondary label changing, say, because
+        // navigation made a step's help available) keep the user's choice, and
+        // the effect's initial run must not wipe an `openStepId` the consumer
+        // passed in at mount (e.g. a banner targeting a specific step).
+        effect(() => {
+            const steps = this.steps();
+            // Sorted tokens make the signature order-insensitive: reordering
+            // steps is cosmetic and must not reset the accordion.
+            const signature = steps
+                .map((s) => `${s.id}:${this.isComplete(s) ? '1' : '0'}`)
+                .sort()
+                .join('|');
+            untracked(() => {
+                // An empty model is "not loaded yet", not a guide whose steps all
+                // vanished — drop the baseline so the first non-empty arrival is
+                // treated like the initial run and a pre-targeted `openStepId`
+                // survives an async load.
+                if (steps.length === 0) {
+                    this.prevCompletionSignature = null;
+                    return;
+                }
+                if (this.prevCompletionSignature !== null &&
+                    this.prevCompletionSignature !== signature) {
+                    this.openStepId.set(undefined);
+                }
+                this.prevCompletionSignature = signature;
+                // An explicit choice is only meaningful while it references a real
+                // step. A dangling id — e.g. a guide swap through an empty load,
+                // where no baseline existed to trigger the reset above — falls
+                // back to the default instead of leaving every row closed.
+                const explicit = this.openStepId();
+                if (typeof explicit === 'string' &&
+                    !steps.some((s) => s.id === explicit)) {
+                    this.openStepId.set(undefined);
+                }
+            });
+        });
+        // The card ↔ pill swap changes the footprint drastically; reposition
+        // right after the swap renders. The ResizeObserver covers the same
+        // case, but its deliveries ride the rendering loop — which pauses in
+        // occluded/backgrounded tabs — so the swap gets a deterministic,
+        // task-scheduled companion (layout can be forced without frames).
+        effect(() => {
+            this.collapsed();
+            untracked(() => {
+                if (typeof window !== 'undefined') {
+                    setTimeout(() => this.reposition());
+                }
+            });
+        });
+        // Confine live dragging to the boundary — CDK enforces it during the
+        // drag, and `clamp` applies the same region to programmatic placement.
+        // The assignment is unconditional so clearing the input releases CDK's
+        // constraint too (an empty string disables it), and the position
+        // re-clamps immediately so a runtime boundary change moves the widget
+        // into the new region instead of waiting for the next geometry trigger.
+        // `boundaryMargin` is tracked alongside `boundary` so a runtime margin
+        // change re-clamps immediately instead of waiting for the next
+        // geometry trigger. Hydration runs first, synchronously, on the very
+        // first execution — during initial change detection, BEFORE the first
+        // paint — so a returning user's saved position and collapsed state
+        // apply without a visible jump from the automatic anchor.
+        effect(() => {
+            const boundary = this.boundary();
+            this.boundaryMargin();
+            untracked(() => {
+                this.hydrateOnce();
+                this.drag.boundaryElement = boundary ?? '';
+                this.syncBoundaryObservation();
+                this.reposition();
+            });
+        });
+        afterNextRender(() => {
+            this.watchGeometry();
+            // Re-clamp once real layout has settled — first-CD measurements are
+            // forced synchronously and can differ slightly (fonts, late styles).
+            this.reposition();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.footprintObserver?.disconnect();
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', this.onViewportResize);
+            }
+        });
     }
     // ===== COMPLETION LOGIC =====
     isComplete(step) {
@@ -1116,15 +1271,18 @@ class OnboardingGuideComponent {
         }
         return step.done;
     }
+    isPending(step) {
+        return !this.isComplete(step) && step.pending === true;
+    }
     isActive(step) {
-        return !this.isComplete(step) && this.openStepId() === step.id;
+        return !this.isComplete(step) && this.resolvedOpenStepId() === step.id;
     }
     actionLabelFor(step) {
         return step.actionLabel || this.startLabel();
     }
     // ===== INTERACTIONS =====
     toggleStep(stepId) {
-        this.openStepId.update((cur) => (cur === stepId ? null : stepId));
+        this.openStepId.set(this.resolvedOpenStepId() === stepId ? null : stepId);
     }
     onAction(step) {
         this.stepAction.emit(step.id);
@@ -1132,6 +1290,9 @@ class OnboardingGuideComponent {
     onMarkDone(step) {
         this.stepMarkDone.emit(step.id);
     }
+    onSecondaryAction(step) {
+        this.stepSecondaryAction.emit(step.id);
+    }
     onSubstep(step, substep) {
         this.substepToggle.emit({ stepId: step.id, substepId: substep.id });
     }
@@ -1150,63 +1311,211 @@ class OnboardingGuideComponent {
     onDismiss() {
         this.dismiss.emit();
     }
-    onGoLive() {
-        this.goLive.emit();
+    onFooterAction() {
+        this.footerAction.emit();
     }
     setCollapsed(value) {
         this.collapsed.set(value);
-        this.collapsedChange.emit(value);
         this.persist();
     }
     // ===== DRAG =====
     onDragEnded(event) {
+        this.dragging = false;
         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;
+        const moved = Math.abs(event.distance.x) > DRAG_THRESHOLD ||
+            Math.abs(event.distance.y) > DRAG_THRESHOLD;
         if (moved) {
+            this.userMoved = true;
             this.justDragged = true;
             setTimeout(() => (this.justDragged = false));
+            this.persist();
+        }
+    }
+    // ===== GEOMETRY =====
+    /**
+     * Keep the resting position valid as the world changes around it. Two
+     * signals feed the same repositioning: the viewport resizing, and the
+     * widget's own footprint changing (pill ↔ card swap, a step expanding) —
+     * the latter is what stops a corner-parked pill from reopening as a card
+     * that's mostly off-screen.
+     */
+    watchGeometry() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.addEventListener('resize', this.onViewportResize);
+        // Environments without ResizeObserver (some test runners, older
+        // runtimes) keep the viewport-resize path; footprint tracking is a
+        // progressive enhancement.
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.footprintObserver = new ResizeObserver(() => this.reposition());
+        this.footprintObserver.observe(this.host.nativeElement);
+        this.syncBoundaryObservation();
+    }
+    /**
+     * The boundary region can resize without a viewport resize — a side
+     * panel opening, chrome banners toggling — so the confining element is
+     * observed alongside the widget's own footprint. Re-synced whenever the
+     * `boundary` input changes.
+     */
+    syncBoundaryObservation() {
+        if (!this.footprintObserver) {
+            return;
+        }
+        const next = this.resolveBoundaryElement();
+        if (next === this.observedBoundary) {
+            return;
+        }
+        if (this.observedBoundary) {
+            this.footprintObserver.unobserve(this.observedBoundary);
+        }
+        if (next) {
+            this.footprintObserver.observe(next);
         }
+        this.observedBoundary = next;
+    }
+    resolveBoundaryElement() {
+        const boundary = this.boundary();
+        if (typeof window === 'undefined' || !boundary) {
+            return null;
+        }
+        return typeof boundary === 'string'
+            ? document.querySelector(boundary)
+            : boundary;
+    }
+    onViewportResize = () => this.reposition();
+    reposition() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // Never fight a drag in flight: CDK owns the transform until the
+        // pointer is released, and writing a position here (a resize or an
+        // observer callback can land mid-drag) would tear the widget away
+        // from the pointer. `onDragEnded` clamps the drop point anyway.
+        if (this.dragging) {
+            return;
+        }
+        // A selector boundary may not have matched at mount — re-resolve on
+        // every geometry trigger so a late-appearing element gets observed.
+        this.syncBoundaryObservation();
+        const current = this.drag.getFreeDragPosition();
+        const target = this.userMoved
+            ? this.clamp(current)
+            : this.defaultBottomRight();
+        if (target.x !== current.x || target.y !== current.y) {
+            this.dragPosition.set(target);
+            this.drag.setFreeDragPosition(target);
+            // A deliberate placement that just got re-clamped (e.g. the card ↔
+            // pill swap) supersedes whatever was stored moments earlier.
+            if (this.userMoved) {
+                this.persist();
+            }
+        }
+    }
+    /** The confining region: the `boundary` element's rect, or the viewport. */
+    boundaryRect() {
+        const el = this.resolveBoundaryElement();
+        if (el) {
+            return el.getBoundingClientRect();
+        }
+        return {
+            left: 0,
+            top: 0,
+            right: typeof window === 'undefined' ? 0 : window.innerWidth,
+            bottom: typeof window === 'undefined' ? 0 : window.innerHeight,
+        };
+    }
+    /**
+     * Constrain one axis to `[start + margin, end - size - margin]`.
+     *
+     * When the region can't fit the widget plus both margins that range is
+     * inverted, so the margin is dropped and the widget is fitted to the
+     * region's own edges instead — keeping it inside the boundary rather
+     * than letting the inset push it out. A widget genuinely larger than
+     * its region still overflows (the card has a fixed width and something
+     * has to give); it pins to the start edge.
+     */
+    clampAxis(value, start, end, size, margin) {
+        const min = start + margin;
+        const max = end - size - margin;
+        if (min <= max) {
+            return Math.max(min, Math.min(value, max));
+        }
+        const tightMax = end - size;
+        if (start <= tightMax) {
+            return Math.max(start, Math.min(value, tightMax));
+        }
+        return start;
     }
     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;
+        const bounds = this.boundaryRect();
+        const margin = this.boundaryMargin();
         return {
-            x: Math.max(VIEWPORT_MARGIN, Math.min(point.x, maxX)),
-            y: Math.max(VIEWPORT_MARGIN, Math.min(point.y, maxY)),
+            x: this.clampAxis(point.x, bounds.left, bounds.right, rect.width, margin),
+            y: this.clampAxis(point.y, bounds.top, bounds.bottom, rect.height, margin),
         };
     }
-    // ===== 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),
-        };
+        const bounds = this.boundaryRect();
+        const margin = this.boundaryMargin();
+        // Aim at the bottom-right inset and let the shared clamp resolve it —
+        // including the too-narrow-region fallbacks.
+        return this.clamp({
+            x: bounds.right - rect.width - margin,
+            y: bounds.bottom - rect.height - margin,
+        });
+    }
+    // ===== PERSISTENCE =====
+    /**
+     * One-time restore of the persisted preferences, run from the first
+     * execution of the boundary effect — inputs are set by then, storage
+     * reads are synchronous, and it lands during initial change detection
+     * so the restored state is what the first paint shows. The caller's
+     * `reposition()` clamps the raw restored position right afterwards.
+     */
+    hydrateOnce() {
+        if (this.hydrated) {
+            return;
+        }
+        this.hydrated = true;
+        const saved = this.read();
+        // The stored collapsed preference restores only when the model still
+        // holds its default — a consumer that mounted the widget with a bound,
+        // non-default `collapsed` gave an explicit instruction, and storage
+        // must not overwrite it (or echo the stale value back out through
+        // `collapsedChange`). Fully controlled usage should disable
+        // persistence with `storageKey: null`.
+        if (saved.collapsed != null && this.collapsed() === false) {
+            this.collapsed.set(saved.collapsed);
+        }
+        if (saved.pos) {
+            // A persisted position is a deliberate placement from a previous
+            // session — keep honouring it instead of re-anchoring bottom-right.
+            this.userMoved = true;
+            this.dragPosition.set(saved.pos);
+            this.drag.setFreeDragPosition(saved.pos);
+        }
     }
     read() {
         const store = this.storage();
-        if (!store) {
+        const key = this.storageKey();
+        if (!store || !key) {
             return {};
         }
         try {
-            return JSON.parse(store.getItem(this.storageKey()) || '{}');
+            return JSON.parse(store.getItem(key) || '{}');
         }
         catch {
             return {};
@@ -1214,15 +1523,20 @@ class OnboardingGuideComponent {
     }
     persist() {
         const store = this.storage();
-        if (!store) {
+        const key = this.storageKey();
+        if (!store || !key) {
             return;
         }
+        // Position is a preference only once the user has actually dragged —
+        // persisting the automatic bottom-right anchor would make the next
+        // load's hydrate treat it as a deliberate placement and stop the
+        // widget from re-anchoring on geometry changes.
         const state = {
             collapsed: this.collapsed(),
-            pos: this.dragPosition(),
+            pos: this.userMoved ? this.dragPosition() : undefined,
         };
         try {
-            store.setItem(this.storageKey(), JSON.stringify(state));
+            store.setItem(key, JSON.stringify(state));
         }
         catch {
             // Storage unavailable (private mode / quota) — preferences just don't stick.
@@ -1237,12 +1551,12 @@ class OnboardingGuideComponent {
         }
     }
     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 });
+    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 }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, boundaryMargin: { classPropertyName: "boundaryMargin", publicName: "boundaryMargin", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, showMarkDone: { classPropertyName: "showMarkDone", publicName: "showMarkDone", 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 }, footerActionLabel: { classPropertyName: "footerActionLabel", publicName: "footerActionLabel", 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 }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 }, openStepId: { classPropertyName: "openStepId", publicName: "openStepId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", stepAction: "stepAction", stepMarkDone: "stepMarkDone", stepSecondaryAction: "stepSecondaryAction", substepToggle: "substepToggle", footerAction: "footerAction", renameClick: "renameClick", dismiss: "dismiss", openStepId: "openStepIdChange" }, 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      @if (renamable()) {\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\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 pending = isPending(step);\n      @let open = resolvedOpenStepId() === 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--pending]=\"pending\"\n            [class.fk-onboarding-guide__check--active]=\"active && !pending\"\n            [class.fk-onboarding-guide__check--todo]=\"\n              !done && !active && !pending\n            \"\n            aria-hidden=\"true\"\n          >\n            @if (done) {\n              <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n            } @else if (active || pending) {\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 (pending && step.pendingNote) {\n                <p class=\"fk-onboarding-guide__pending-note\">\n                  {{ step.pendingNote }}\n                </p>\n              }\n\n              @if (!done || step.secondaryActionLabel) {\n                <div class=\"fk-onboarding-guide__actions\">\n                  @if (!done) {\n                    <fk-button\n                      variant=\"primary\"\n                      size=\"sm\"\n                      (click)=\"onAction(step)\"\n                    >\n                      {{ actionLabelFor(step) }}\n                      <fk-icon\n                        fkButtonIconEnd\n                        [name]=\"actionIcon()\"\n                        size=\"xs\"\n                      />\n                    </fk-button>\n\n                    @if (showMarkDone()) {\n                      <button\n                        type=\"button\"\n                        class=\"fk-onboarding-guide__skip\"\n                        (click)=\"onMarkDone(step)\"\n                      >\n                        {{ markDoneLabel() }}\n                      </button>\n                    }\n                  }\n\n                  @if (step.secondaryActionLabel) {\n                    <button\n                      type=\"button\"\n                      class=\"fk-onboarding-guide__secondary\"\n                      (click)=\"onSecondaryAction(step)\"\n                    >\n                      {{ step.secondaryActionLabel }}\n                    </button>\n                  }\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\n    @if (footerActionLabel(); as footerLabel) {\n      <button\n        type=\"button\"\n        class=\"fk-onboarding-guide__go\"\n        (click)=\"onFooterAction()\"\n      >\n        {{ footerLabel }}\n        <fk-icon [name]=\"actionIcon()\" size=\"xs\" />\n      </button>\n    }\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__icon-btn:focus-visible,.fk-onboarding-guide__step-row:focus-visible,.fk-onboarding-guide__sub:focus-visible,.fk-onboarding-guide__skip:focus-visible,.fk-onboarding-guide__secondary:focus-visible,.fk-onboarding-guide__go:focus-visible,.fk-onboarding-guide__pill:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.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__check--pending{border:2px solid var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706));background:color-mix(in srgb,var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706)) 12%,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__check--pending .fk-onboarding-guide__dot{background:var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706))}.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__pending-note{font-size:12.5px;line-height:1.5;color:var(--fk-onboarding-guide-pending-strong, var(--fk-onboarding-guide-pending, var(--fk-color-warning, #92400e)));margin-bottom:12px}.fk-onboarding-guide__actions{display:flex;align-items:center;gap:8px}.fk-onboarding-guide__skip,.fk-onboarding-guide__secondary{font-size:13px;font-weight:600;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));background:none;border:none;border-radius:6px;padding:6px;cursor:pointer}.fk-onboarding-guide__skip:hover,.fk-onboarding-guide__secondary: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: [{
+            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      @if (renamable()) {\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\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 pending = isPending(step);\n      @let open = resolvedOpenStepId() === 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--pending]=\"pending\"\n            [class.fk-onboarding-guide__check--active]=\"active && !pending\"\n            [class.fk-onboarding-guide__check--todo]=\"\n              !done && !active && !pending\n            \"\n            aria-hidden=\"true\"\n          >\n            @if (done) {\n              <fk-icon [name]=\"checkIcon()\" size=\"xs\" />\n            } @else if (active || pending) {\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 (pending && step.pendingNote) {\n                <p class=\"fk-onboarding-guide__pending-note\">\n                  {{ step.pendingNote }}\n                </p>\n              }\n\n              @if (!done || step.secondaryActionLabel) {\n                <div class=\"fk-onboarding-guide__actions\">\n                  @if (!done) {\n                    <fk-button\n                      variant=\"primary\"\n                      size=\"sm\"\n                      (click)=\"onAction(step)\"\n                    >\n                      {{ actionLabelFor(step) }}\n                      <fk-icon\n                        fkButtonIconEnd\n                        [name]=\"actionIcon()\"\n                        size=\"xs\"\n                      />\n                    </fk-button>\n\n                    @if (showMarkDone()) {\n                      <button\n                        type=\"button\"\n                        class=\"fk-onboarding-guide__skip\"\n                        (click)=\"onMarkDone(step)\"\n                      >\n                        {{ markDoneLabel() }}\n                      </button>\n                    }\n                  }\n\n                  @if (step.secondaryActionLabel) {\n                    <button\n                      type=\"button\"\n                      class=\"fk-onboarding-guide__secondary\"\n                      (click)=\"onSecondaryAction(step)\"\n                    >\n                      {{ step.secondaryActionLabel }}\n                    </button>\n                  }\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\n    @if (footerActionLabel(); as footerLabel) {\n      <button\n        type=\"button\"\n        class=\"fk-onboarding-guide__go\"\n        (click)=\"onFooterAction()\"\n      >\n        {{ footerLabel }}\n        <fk-icon [name]=\"actionIcon()\" size=\"xs\" />\n      </button>\n    }\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__icon-btn:focus-visible,.fk-onboarding-guide__step-row:focus-visible,.fk-onboarding-guide__sub:focus-visible,.fk-onboarding-guide__skip:focus-visible,.fk-onboarding-guide__secondary:focus-visible,.fk-onboarding-guide__go:focus-visible,.fk-onboarding-guide__pill:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.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__check--pending{border:2px solid var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706));background:color-mix(in srgb,var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706)) 12%,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__check--pending .fk-onboarding-guide__dot{background:var(--fk-onboarding-guide-pending, var(--fk-color-warning, #d97706))}.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__pending-note{font-size:12.5px;line-height:1.5;color:var(--fk-onboarding-guide-pending-strong, var(--fk-onboarding-guide-pending, var(--fk-color-warning, #92400e)));margin-bottom:12px}.fk-onboarding-guide__actions{display:flex;align-items:center;gap:8px}.fk-onboarding-guide__skip,.fk-onboarding-guide__secondary{font-size:13px;font-weight:600;color:var(--fk-onboarding-guide-text-muted, var(--fk-color-muted, #64748b));background:none;border:none;border-radius:6px;padding:6px;cursor:pointer}.fk-onboarding-guide__skip:hover,.fk-onboarding-guide__secondary: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 }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], boundaryMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryMargin", required: false }] }], renamable: [{ type: i0.Input, args: [{ isSignal: true, alias: "renamable", required: false }] }], showMarkDone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkDone", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], markDoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markDoneLabel", required: false }] }], footerActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionLabel", 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 }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], stepAction: [{ type: i0.Output, args: ["stepAction"] }], stepMarkDone: [{ type: i0.Output, args: ["stepMarkDone"] }], stepSecondaryAction: [{ type: i0.Output, args: ["stepSecondaryAction"] }], substepToggle: [{ type: i0.Output, args: ["substepToggle"] }], footerAction: [{ type: i0.Output, args: ["footerAction"] }], renameClick: [{ type: i0.Output, args: ["renameClick"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], openStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "openStepId", required: false }] }, { type: i0.Output, args: ["openStepIdChange"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], hostId: [{