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

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

@@ -161,11 +161,11 @@ class ContentSplitLayoutComponent {
         return this.id();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-content-split-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"] }]
+            args: [{ selector: 'fk-content-split-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"] }]
         }], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -975,6 +975,14 @@ const DRAG_THRESHOLD = 3;
  * and can be dragged around (CDK drag). It renders over the app in a fixed
  * layer — drop it once near the app root.
  *
+ * **Presentational, not clever.** It renders exactly what it is given and
+ * reports what the user did — it derives no step state of its own. Which step
+ * is open (`openStepId`), which are done or pending (`steps`), whether it is
+ * collapsed (`collapsed`): all inputs. When a step should advance, when a
+ * context switch should re-focus the guide, when a choice has gone stale —
+ * all consumer decisions, because the consumer knows *what changed*, while
+ * the widget only ever sees a new array.
+ *
  * **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`, `stepSecondaryAction`,
@@ -982,9 +990,9 @@ const DRAG_THRESHOLD = 3;
  * it is keyed by, say, the active account or environment, swapping the input
  * re-renders the widget instantly. The widget never persists step state.
  *
- * **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.
+ * **Collapsed and openStepId are two-way models.** Bind `[(collapsed)]` /
+ * `[(openStepId)]` to drive the card ↔ pill swap and the expanded row from
+ * outside; the widget writes them only in response to a direct user action.
  *
  * **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
@@ -1118,26 +1126,14 @@ class OnboardingGuideComponent {
     /** 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.
+     * The expanded step, or `null` for none. Fully controlled: the widget
+     * writes it only when the user toggles a row, and never infers a value
+     * of its own — which step should be open, when to advance to the next
+     * one, and whether a context switch should re-focus the guide are all
+     * decisions the consumer owns (it knows what changed; the widget only
+     * sees a new array).
      */
-    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 */ []));
+    openStepId = model(null, ...(ngDevMode ? [{ debugName: "openStepId" }] : /* 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 */ []));
@@ -1175,47 +1171,6 @@ class OnboardingGuideComponent {
         this.drag.ended
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => this.onDragEnded(event));
-        // 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
@@ -1275,14 +1230,14 @@ class OnboardingGuideComponent {
         return !this.isComplete(step) && step.pending === true;
     }
     isActive(step) {
-        return !this.isComplete(step) && this.resolvedOpenStepId() === step.id;
+        return !this.isComplete(step) && this.openStepId() === step.id;
     }
     actionLabelFor(step) {
         return step.actionLabel || this.startLabel();
     }
     // ===== INTERACTIONS =====
     toggleStep(stepId) {
-        this.openStepId.set(this.resolvedOpenStepId() === stepId ? null : stepId);
+        this.openStepId.set(this.openStepId() === stepId ? null : stepId);
     }
     onAction(step) {
         this.stepAction.emit(step.id);
@@ -1551,11 +1506,11 @@ 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 }, 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 });
+    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 = 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--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      @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"] }]
+            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 = 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--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']