@nanahoshi/mona-ui 0.13.0 → 0.14.0

package/fesm2022/nanahoshi-mona-ui-segmented.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, computed, contentChild, input, output, model, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, DestroyRef, ElementRef, computed, signal, contentChild, viewChildren, input, output, model, afterRenderEffect, afterNextRender, Component } from '@angular/core';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -27,7 +27,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 const segmentedContainerThemeVariants = cva(`
-        inline-flex items-center gap-0.5
+        relative inline-flex items-center gap-0.5
         ${themeControlSurfaceClasses}
         border border-input-border
         p-1
@@ -56,11 +56,11 @@ const segmentedOptionThemeVariants = cva(`
         data-[disabled='true']:cursor-not-allowed
         data-[disabled='true']:opacity-50
         data-[disabled='true']:text-disabled-foreground
-        data-[selected='true']:bg-primary data-[selected='true']:text-primary-foreground
-        data-[selected='true']:shadow-sm data-[selected='true']:ring-1 data-[selected='true']:ring-selected-border
+        data-[selected='true']:text-primary-foreground
         data-[selected='false']:text-muted-foreground
         data-[selected='false']:hover:bg-hover data-[selected='false']:hover:text-foreground
         data-[disabled='true']:data-[selected='false']:text-disabled-foreground
+        data-[selected='true']:transition-none
     `, {
     variants: {
         rounded: {
@@ -81,6 +81,30 @@ const segmentedOptionThemeVariants = cva(`
         size: "medium"
     }
 });
+const segmentedIndicatorThemeVariants = cva(`
+        pointer-events-none absolute top-0 left-0
+        bg-primary shadow-sm ring-1 ring-selected-border
+        data-[disabled='true']:opacity-50
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        animate: {
+            true: "transition-[transform,width,height] duration-(--mona-motion-fast) ease-out",
+            false: "transition-none"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-xs",
+            medium: "rounded-sm",
+            large: "rounded-md",
+            full: "rounded-full"
+        }
+    },
+    defaultVariants: {
+        animate: true,
+        rounded: "medium"
+    }
+});
 const segmentedInputThemeVariants = cva(`
         peer absolute inset-0 z-10 h-full w-full
         cursor-pointer appearance-none opacity-0
@@ -89,13 +113,37 @@ const segmentedInputThemeVariants = cva(`
     `);
 
 class SegmentedComponent {
+    #destroyRef;
+    #hostElementRef;
+    #lastAnimatedIndex;
+    #lastOptions;
+    #lastSize;
+    #resizeObserver;
     constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#lastAnimatedIndex = null;
+        this.#lastOptions = null;
+        this.#lastSize = null;
+        this.#resizeObserver = null;
         this.containerClasses = computed(() => {
             const classes = segmentedContainerThemeVariants({ rounded: this.rounded() });
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.groupName = createElementControlId();
+        this.indicatorClasses = computed(() => {
+            const animate = this.animate() && this.indicatorTransitionEnabled();
+            const rounded = this.rounded();
+            return segmentedIndicatorThemeVariants({ animate, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : /* istanbul ignore next */ []));
+        this.indicatorGeometry = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorGeometry" }] : /* istanbul ignore next */ []));
+        this.indicatorInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorInitialized" }] : /* istanbul ignore next */ []));
+        this.indicatorTransitionEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorTransitionEnabled" }] : /* istanbul ignore next */ []));
         this.inputClasses = computed(() => segmentedInputThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
@@ -107,6 +155,29 @@ class SegmentedComponent {
             return segmentedOptionThemeVariants({ rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "optionClasses" }] : /* istanbul ignore next */ []));
+        this.optionElements = viewChildren("optionElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionElements" }] : /* istanbul ignore next */ []));
+        this.selectedIndex = computed(() => {
+            const value = this.value();
+            return this.options().findIndex(option => option.value === value);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+        this.selectedOptionDisabled = computed(() => {
+            const selectedIndex = this.selectedIndex();
+            if (selectedIndex === -1) {
+                return false;
+            }
+            const option = this.options()[selectedIndex];
+            return this.disabled() || !!option?.disabled;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOptionDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls whether the selection indicator animates between selected options.
+         * When false, selection changes are applied immediately without transition.
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
          * @default null
@@ -170,6 +241,30 @@ class SegmentedComponent {
          */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterRenderEffect({
+            read: () => {
+                this.selectedIndex();
+                this.optionElements();
+                this.rounded();
+                this.animate();
+                const size = this.size();
+                const options = this.options();
+                const isSizeChange = this.#lastSize !== null && this.#lastSize !== size;
+                const isOptionsChange = this.#lastOptions !== null && this.#lastOptions !== options;
+                const suppressTransition = isSizeChange || isOptionsChange;
+                this.#lastSize = size;
+                this.#lastOptions = options;
+                this.updateIndicatorGeometry({ suppressTransition });
+            }
+        });
+        afterNextRender({
+            read: () => {
+                this.setupResizeObserver();
+            }
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#resizeObserver?.disconnect();
+        });
     }
     createOptionContext(option, index) {
         return {
@@ -190,8 +285,57 @@ class SegmentedComponent {
         this.value.set(option.value);
         this.touch.emit();
     }
+    setupResizeObserver() {
+        if (typeof ResizeObserver === "undefined") {
+            return;
+        }
+        this.#resizeObserver = new ResizeObserver(() => {
+            this.updateIndicatorGeometry({ suppressTransition: true });
+        });
+        this.#resizeObserver.observe(this.#hostElementRef.nativeElement);
+    }
+    updateIndicatorGeometry(options) {
+        const selectedIndex = this.selectedIndex();
+        if (selectedIndex === -1) {
+            this.#lastAnimatedIndex = null;
+            this.indicatorGeometry.set(null);
+            this.indicatorTransitionEnabled.set(false);
+            return;
+        }
+        const optionElements = this.optionElements();
+        const selectedElementRef = optionElements[selectedIndex];
+        if (!selectedElementRef?.nativeElement) {
+            this.#lastAnimatedIndex = null;
+            this.indicatorGeometry.set(null);
+            this.indicatorTransitionEnabled.set(false);
+            return;
+        }
+        const host = this.#hostElementRef.nativeElement;
+        const option = selectedElementRef.nativeElement;
+        const hostRect = host.getBoundingClientRect();
+        const optionRect = option.getBoundingClientRect();
+        const x = optionRect.left - hostRect.left - (host.clientLeft || 0);
+        const y = optionRect.top - hostRect.top - (host.clientTop || 0);
+        const width = optionRect.width;
+        const height = optionRect.height;
+        const shouldAnimate = !options?.suppressTransition &&
+            this.animate() &&
+            this.indicatorInitialized() &&
+            this.#lastAnimatedIndex !== null &&
+            this.#lastAnimatedIndex !== selectedIndex;
+        this.indicatorTransitionEnabled.set(shouldAnimate);
+        this.indicatorGeometry.set({
+            height,
+            transform: `translate3d(${x}px, ${y}px, 0)`,
+            width
+        });
+        this.#lastAnimatedIndex = selectedIndex;
+        if (!this.indicatorInitialized()) {
+            this.indicatorInitialized.set(true);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, decorators: [{
             type: Component,
@@ -204,8 +348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.role]": "'radiogroup'",
                         "[class]": "containerClasses()"
-                    }, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n" }]
-        }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ["optionElement", { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/segmented

package/fesm2022/nanahoshi-mona-ui-spinner.mjs

@@ -0,0 +1,580 @@
+import * as i0 from '@angular/core';
+import { computed, input, Component, output, inject, ApplicationRef, DOCUMENT, Injector, RendererFactory2, createComponent, Injectable } from '@angular/core';
+import { LucideLoader, LucideDynamicIcon } from '@lucide/angular';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { Subject, defer, finalize } from 'rxjs';
+import { v4 } from 'uuid';
+
+const spinnerThemeVariants = cva("inline-flex items-center justify-center flex-none aspect-square relative text-current select-none", {
+    variants: {
+        size: {
+            small: "w-3 h-3",
+            medium: "w-4 h-4",
+            large: "w-6 h-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+
+/**
+ * @description
+ * An indeterminate loading indicator primitive for communicating ongoing activity.
+ * Supports multiple appearances, standard sizes, and accessible status announcements.
+ */
+class SpinnerComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            const variantClass = spinnerThemeVariants({ size: this.size() });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.loaderIcon = LucideLoader;
+        this.pixelSize = computed(() => {
+            switch (this.size()) {
+                case "small":
+                    return 12;
+                case "large":
+                    return 24;
+                case "medium":
+                default:
+                    return 16;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual appearance of the spinner animation.
+         * @default "default"
+         */
+        this.appearance = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible text announced by assistive technology when the spinner is not decorative.
+         * @default "Loading"
+         */
+        this.ariaLabel = input("Loading", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description When `true`, removes the `status` role and hides the spinner from assistive technology with `aria-hidden="true"`.
+         * Useful when a parent element already manages loading semantics (such as `aria-busy="true"` on a button).
+         * @default false
+         */
+        this.decorative = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the dimensions of the indicator.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerComponent, isStandalone: true, selector: "mona-spinner", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "decorative() ? 'true' : null", "attr.aria-label": "decorative() ? null : (ariaLabel() || 'Loading')", "attr.role": "decorative() ? null : 'status'", "class": "baseClass()" } }, ngImport: i0, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-spinner", imports: [LucideDynamicIcon], host: {
+                        "[attr.aria-hidden]": "decorative() ? 'true' : null",
+                        "[attr.aria-label]": "decorative() ? null : (ariaLabel() || 'Loading')",
+                        "[attr.role]": "decorative() ? null : 'status'",
+                        "[class]": "baseClass()"
+                    }, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const spinnerOverlayThemeVariants = cva(`
+        isolate flex items-center justify-center
+        pointer-events-auto select-none
+        bg-background/60 backdrop-blur-xs
+        text-foreground
+    `, {
+    variants: {
+        fullPage: {
+            true: "fixed inset-0 z-50",
+            false: "absolute inset-0 z-1"
+        }
+    },
+    defaultVariants: {
+        fullPage: false
+    }
+});
+
+/**
+ * @description
+ * Internal overlay component managed exclusively by `SpinnerService`.
+ * Hosts a decorative `SpinnerComponent`, status message, and optional cancellation control.
+ */
+class SpinnerOverlayComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            return spinnerOverlayThemeVariants({ fullPage: this.fullPage() });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.effectiveZIndex = computed(() => {
+            const customZIndex = this.zIndex();
+            if (customZIndex !== undefined) {
+                return customZIndex;
+            }
+            return this.fullPage() ? 50 : 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveZIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual appearance of the nested spinner animation.
+         * @default "default"
+         */
+        this.appearance = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the consumer clicks the cancellation action button.
+         */
+        this.cancel = output();
+        /**
+         * @description Whether the cancellation button is displayed in the overlay.
+         * @default false
+         */
+        this.cancellable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancellable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Label text displayed inside the cancellation button.
+         * @default "Cancel"
+         */
+        this.cancelText = input("Cancel", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the overlay is fixed across the viewport or absolute within a target container.
+         * @default false
+         */
+        this.fullPage = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullPage" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset passed to the nested spinner.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Status text displayed below the spinner indicator.
+         * @default undefined
+         */
+        this.text = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Custom z-index value for unusual stacking contexts.
+         * @default undefined
+         */
+        this.zIndex = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerOverlayComponent, isStandalone: true, selector: "mona-spinner-overlay", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel" }, host: { properties: { "class": "baseClass()", "style.z-index": "effectiveZIndex()" } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "mona-spinner", inputs: ["appearance", "aria-label", "decorative", "size", "class"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-spinner-overlay", imports: [SpinnerComponent], host: {
+                        "[class]": "baseClass()",
+                        "[style.z-index]": "effectiveZIndex()"
+                    }, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n" }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cancellable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancellable", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+
+class SpinnerService {
+    #appRef = inject(ApplicationRef);
+    #document = inject(DOCUMENT);
+    #injector = inject(Injector);
+    #renderer = inject(RendererFactory2).createRenderer(null, null);
+    #requests = new Map();
+    #targetStates = new Set();
+    #targets = new WeakMap();
+    /**
+     * Hides and destroys the spinner associated with the given `SpinnerRef` or string `id`.
+     */
+    hide(refOrId) {
+        const id = typeof refOrId === "string" ? refOrId : refOrId.id;
+        this.#closeRequest(id);
+    }
+    /**
+     * Tears down every active/pending spinner request and physical overlay so
+     * nothing is left behind if the service outlives its consumers.
+     */
+    ngOnDestroy() {
+        for (const request of this.#requests.values()) {
+            if (request.delayTimer != null) {
+                clearTimeout(request.delayTimer);
+                request.delayTimer = null;
+            }
+            if (!request.cancellationHandled) {
+                request.cancelledSubject.complete();
+            }
+        }
+        this.#requests.clear();
+        for (const targetState of this.#targetStates) {
+            if (targetState.minDurationTimer != null) {
+                clearTimeout(targetState.minDurationTimer);
+                targetState.minDurationTimer = null;
+            }
+            targetState.cancelSubscription?.unsubscribe();
+            targetState.cancelSubscription = null;
+            if (targetState.componentRef != null) {
+                this.#appRef.detachView(targetState.componentRef.hostView);
+                targetState.componentRef.destroy();
+                targetState.componentRef = null;
+            }
+        }
+        this.#targetStates.clear();
+    }
+    /**
+     * Displays a spinner loading overlay according to the provided options.
+     * Returns a `SpinnerRef` handle for lifecycle management and updates.
+     */
+    show(options) {
+        const id = options?.id ?? `spinner-${v4()}`;
+        // If an existing request with the same ID exists, close it cleanly first
+        if (this.#requests.has(id)) {
+            this.#closeRequest(id);
+        }
+        const targets = this.#normalizeTargets(options?.target);
+        const isFullPage = !options?.target || targets.length === 0;
+        const resolvedTargets = isFullPage ? [this.#document.body] : targets;
+        const cancellableOpt = options?.cancellable;
+        const isCancellable = !!cancellableOpt;
+        const cancelText = typeof cancellableOpt === "object" && cancellableOpt.text ? cancellableOpt.text : "Cancel";
+        const onCancel = typeof cancellableOpt === "object" ? cancellableOpt.onCancel : undefined;
+        const cancelledSubject = new Subject();
+        const request = {
+            activatedAt: Date.now(),
+            appearance: options?.appearance ?? "default",
+            cancellationHandled: false,
+            cancellable: isCancellable,
+            cancelText,
+            delayTimer: null,
+            id,
+            isFullPage,
+            onCancel,
+            options: options ?? {},
+            registeredAt: Date.now(),
+            size: options?.size ?? "medium",
+            status: "PENDING",
+            cancelledSubject,
+            targets: resolvedTargets,
+            text: options?.text
+        };
+        this.#requests.set(id, request);
+        // Register request against all targets and set aria-busy. Targets that already
+        // have a visible overlay activate immediately; idle targets respect `delay`.
+        const immediateTargets = [];
+        const delayedTargets = [];
+        for (const target of resolvedTargets) {
+            const targetState = this.#getOrCreateTargetState(target, isFullPage);
+            targetState.pendingRequestIds.add(id);
+            if (targetState.componentRef != null) {
+                immediateTargets.push(target);
+            }
+            else {
+                delayedTargets.push(target);
+            }
+        }
+        if (immediateTargets.length > 0) {
+            this.#activateRequestOnTargets(request, immediateTargets);
+        }
+        const delay = options?.delay ?? 0;
+        if (delayedTargets.length > 0) {
+            if (delay > 0) {
+                request.delayTimer = setTimeout(() => {
+                    request.delayTimer = null;
+                    if (request.status !== "CLOSED") {
+                        this.#activateRequestOnTargets(request, delayedTargets);
+                    }
+                }, delay);
+            }
+            else {
+                this.#activateRequestOnTargets(request, delayedTargets);
+            }
+        }
+        return {
+            id,
+            cancelled$: cancelledSubject.asObservable(),
+            close: () => this.#closeRequest(id),
+            update: update => this.#updateRequest(id, update)
+        };
+    }
+    /**
+     * Wraps an Observable operation with a Spinner lifecycle.
+     * Shows the spinner on subscription and closes it when the observable completes, errors, or is unsubscribed.
+     */
+    track(source, options) {
+        return defer(() => {
+            const ref = this.show(options);
+            return source.pipe(finalize(() => ref.close()));
+        });
+    }
+    #activateRequestOnTargets(request, targets) {
+        if (request.status === "CLOSED") {
+            return;
+        }
+        request.status = "VISIBLE";
+        request.activatedAt = Date.now();
+        for (const target of targets) {
+            const targetState = this.#getOrCreateTargetState(target, request.isFullPage);
+            targetState.activeRequestIds.add(request.id);
+            this.#updateTargetOverlay(targetState);
+        }
+    }
+    #cancelRequest(requestId) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.cancellationHandled || request.status === "CLOSED") {
+            return;
+        }
+        request.cancellationHandled = true;
+        request.cancelledSubject.next();
+        request.cancelledSubject.complete();
+        try {
+            if (request.onCancel) {
+                request.onCancel();
+            }
+        }
+        finally {
+            this.#closeRequest(requestId);
+        }
+    }
+    #closeRequest(requestId) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.status === "CLOSED") {
+            return;
+        }
+        request.status = "CLOSED";
+        if (request.delayTimer != null) {
+            clearTimeout(request.delayTimer);
+            request.delayTimer = null;
+        }
+        if (!request.cancellationHandled) {
+            request.cancelledSubject.complete();
+        }
+        this.#requests.delete(requestId);
+        for (const target of request.targets) {
+            const targetState = this.#targets.get(target);
+            if (!targetState) {
+                continue;
+            }
+            targetState.pendingRequestIds.delete(requestId);
+            targetState.activeRequestIds.delete(requestId);
+            if (targetState.activeRequestIds.size > 0) {
+                // Other active requests remain; recompute winning presentation
+                this.#updateTargetOverlay(targetState);
+            }
+            else if (targetState.pendingRequestIds.size === 0) {
+                // No active or pending requests remain on this target
+                const minDuration = request.options.minimumVisibleDuration ?? 0;
+                if (minDuration > 0 && targetState.visibleSince != null && targetState.componentRef != null) {
+                    const elapsed = Date.now() - targetState.visibleSince;
+                    const remaining = minDuration - elapsed;
+                    if (remaining > 0) {
+                        if (targetState.minDurationTimer != null) {
+                            clearTimeout(targetState.minDurationTimer);
+                        }
+                        targetState.minDurationTimer = setTimeout(() => {
+                            targetState.minDurationTimer = null;
+                            if (targetState.activeRequestIds.size === 0 && targetState.pendingRequestIds.size === 0) {
+                                this.#teardownTarget(targetState);
+                            }
+                        }, remaining);
+                    }
+                    else {
+                        this.#teardownTarget(targetState);
+                    }
+                }
+                else {
+                    this.#teardownTarget(targetState);
+                }
+            }
+        }
+    }
+    #getOrCreateTargetState(target, isFullPage) {
+        let state = this.#targets.get(target);
+        if (!state) {
+            const originalAriaBusy = target.getAttribute("aria-busy");
+            const originalInlinePosition = target.style.position;
+            state = {
+                activeRequestIds: new Set(),
+                cancelSubscription: null,
+                changedPosition: false,
+                componentRef: null,
+                isFullPage,
+                minDurationTimer: null,
+                originalAriaBusy,
+                originalInlinePosition,
+                pendingRequestIds: new Set(),
+                target
+            };
+            this.#targets.set(target, state);
+            this.#targetStates.add(state);
+        }
+        // Apply aria-busy immediately while logically busy
+        this.#renderer.setAttribute(target, "aria-busy", "true");
+        // If a delayed teardown was pending, cancel it since new activity arrived
+        if (state.minDurationTimer != null) {
+            clearTimeout(state.minDurationTimer);
+            state.minDurationTimer = null;
+        }
+        return state;
+    }
+    #getWinningRequestForTarget(targetState) {
+        let winningRequest = null;
+        for (const requestId of targetState.activeRequestIds) {
+            const req = this.#requests.get(requestId);
+            if (req && req.status === "VISIBLE") {
+                if (!winningRequest || req.activatedAt >= winningRequest.activatedAt) {
+                    winningRequest = req;
+                }
+            }
+        }
+        return winningRequest;
+    }
+    #normalizeTargets(target) {
+        if (!target) {
+            return [];
+        }
+        const rawList = Array.isArray(target) ? target : [target];
+        const result = [];
+        for (const item of rawList) {
+            if (item instanceof HTMLElement) {
+                result.push(item);
+            }
+            else if (item && typeof item === "object" && "nativeElement" in item && item.nativeElement instanceof HTMLElement) {
+                result.push(item.nativeElement);
+            }
+        }
+        return result;
+    }
+    #teardownTarget(targetState) {
+        if (targetState.minDurationTimer != null) {
+            clearTimeout(targetState.minDurationTimer);
+            targetState.minDurationTimer = null;
+        }
+        targetState.cancelSubscription?.unsubscribe();
+        targetState.cancelSubscription = null;
+        if (targetState.componentRef != null) {
+            this.#appRef.detachView(targetState.componentRef.hostView);
+            targetState.componentRef.destroy();
+            targetState.componentRef = null;
+        }
+        targetState.visibleSince = undefined;
+        // Restore aria-busy attribute exactly
+        if (targetState.originalAriaBusy === null) {
+            this.#renderer.removeAttribute(targetState.target, "aria-busy");
+        }
+        else {
+            this.#renderer.setAttribute(targetState.target, "aria-busy", targetState.originalAriaBusy);
+        }
+        // Restore target positioning safely
+        if (targetState.changedPosition) {
+            if (targetState.target.style.position === "relative") {
+                this.#renderer.setStyle(targetState.target, "position", targetState.originalInlinePosition || null);
+            }
+            targetState.changedPosition = false;
+        }
+    }
+    #updateRequest(requestId, update) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.status === "CLOSED") {
+            return;
+        }
+        if (update.appearance !== undefined) {
+            request.appearance = update.appearance;
+        }
+        if (update.size !== undefined) {
+            request.size = update.size;
+        }
+        if (update.text !== undefined) {
+            request.text = update.text;
+        }
+        for (const target of request.targets) {
+            const targetState = this.#targets.get(target);
+            if (targetState) {
+                this.#updateTargetOverlay(targetState);
+            }
+        }
+    }
+    #updateTargetOverlay(targetState) {
+        const winner = this.#getWinningRequestForTarget(targetState);
+        if (!winner) {
+            return;
+        }
+        if (!targetState.componentRef) {
+            // Need containing block for absolute local positioning
+            if (!targetState.isFullPage) {
+                const defaultView = this.#document.defaultView;
+                const computedPosition = defaultView ? defaultView.getComputedStyle(targetState.target).position : "static";
+                if (computedPosition === "static") {
+                    this.#renderer.setStyle(targetState.target, "position", "relative");
+                    targetState.changedPosition = true;
+                }
+            }
+            const compRef = createComponent(SpinnerOverlayComponent, {
+                environmentInjector: this.#appRef.injector,
+                elementInjector: this.#injector
+            });
+            compRef.setInput("appearance", winner.appearance);
+            compRef.setInput("size", winner.size);
+            compRef.setInput("text", winner.text);
+            compRef.setInput("cancellable", winner.cancellable);
+            compRef.setInput("cancelText", winner.cancelText);
+            compRef.setInput("fullPage", targetState.isFullPage);
+            if (winner.options.zIndex !== undefined) {
+                compRef.setInput("zIndex", winner.options.zIndex);
+            }
+            targetState.cancelSubscription = compRef.instance.cancel.subscribe(() => {
+                const currentWinner = this.#getWinningRequestForTarget(targetState);
+                if (currentWinner) {
+                    this.#cancelRequest(currentWinner.id);
+                }
+            });
+            this.#appRef.attachView(compRef.hostView);
+            this.#renderer.appendChild(targetState.target, compRef.location.nativeElement);
+            compRef.changeDetectorRef.detectChanges();
+            targetState.componentRef = compRef;
+            targetState.visibleSince = Date.now();
+        }
+        else {
+            // Physical overlay already exists: update its inputs dynamically
+            const compRef = targetState.componentRef;
+            compRef.setInput("appearance", winner.appearance);
+            compRef.setInput("size", winner.size);
+            compRef.setInput("text", winner.text);
+            compRef.setInput("cancellable", winner.cancellable);
+            compRef.setInput("cancelText", winner.cancelText);
+            compRef.setInput("fullPage", targetState.isFullPage);
+            if (winner.options.zIndex !== undefined) {
+                compRef.setInput("zIndex", winner.options.zIndex);
+            }
+            compRef.changeDetectorRef.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/spinner
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpinnerComponent, SpinnerService };
+//# sourceMappingURL=nanahoshi-mona-ui-spinner.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -289,6 +289,10 @@
       "types": "./types/nanahoshi-mona-ui-slider.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-slider.mjs"
     },
+    "./spinner": {
+      "types": "./types/nanahoshi-mona-ui-spinner.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-spinner.mjs"
+    },
     "./split-button": {
       "types": "./types/nanahoshi-mona-ui-split-button.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-split-button.mjs"

package/spinner/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-spinner.mjs",
+  "typings": "../types/nanahoshi-mona-ui-spinner.d.ts"
+}

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -1,11 +1,17 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, ElementRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import * as _nanahoshi_mona_ui_segmented from '@nanahoshi/mona-ui/segmented';
 
+interface SegmentedIndicatorGeometry {
+    height: number;
+    transform: string;
+    width: number;
+}
+
 type SegmentedValue = string | number;
 
 interface SegmentedOption<T extends SegmentedValue = SegmentedValue> {
@@ -55,12 +61,26 @@ type SegmentedVariantProps = SegmentedContainerVariantProps & SegmentedOptionVar
 type SegmentedVariantInput = SegmentedContainerVariantInput & SegmentedOptionVariantInput;
 
 declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> implements SegmentedVariantInput, FormValueControl<T | null> {
+    #private;
     protected readonly containerClasses: _angular_core.Signal<string>;
     protected readonly groupName: string;
+    protected readonly indicatorClasses: _angular_core.Signal<string>;
+    protected readonly indicatorGeometry: _angular_core.WritableSignal<SegmentedIndicatorGeometry | null>;
+    protected readonly indicatorInitialized: _angular_core.WritableSignal<boolean>;
+    protected readonly indicatorTransitionEnabled: _angular_core.WritableSignal<boolean>;
     protected readonly inputClasses: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly optionClasses: _angular_core.Signal<string>;
+    protected readonly optionElements: _angular_core.Signal<readonly ElementRef<HTMLLabelElement>[]>;
+    protected readonly selectedIndex: _angular_core.Signal<number>;
+    protected readonly selectedOptionDisabled: _angular_core.Signal<boolean>;
+    /**
+     * @description Controls whether the selection indicator animates between selected options.
+     * When false, selection changes are applied immediately without transition.
+     * @default true
+     */
+    readonly animate: _angular_core.InputSignal<boolean>;
     /**
      * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
      * @default null
@@ -117,11 +137,14 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
      * @default null
      */
     readonly value: _angular_core.ModelSignal<T | null>;
+    constructor();
     protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
+    private setupResizeObserver;
+    private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
 }
 
 /**

package/types/nanahoshi-mona-ui-spinner.d.ts

@@ -0,0 +1,114 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, OnDestroy } from '@angular/core';
+import { LucideLoader } from '@lucide/angular';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { Observable } from 'rxjs';
+
+type SpinnerAppearance = "default" | "pulsing" | "pulsing-triad" | "pulsing-ring" | "converging-spinner";
+
+type SpinnerSize = "small" | "medium" | "large";
+
+declare const spinnerThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SpinnerVariantProps = VariantProps<typeof spinnerThemeVariants>;
+type SpinnerVariantInput = VariantInputs<SpinnerVariantProps>;
+
+/**
+ * @description
+ * An indeterminate loading indicator primitive for communicating ongoing activity.
+ * Supports multiple appearances, standard sizes, and accessible status announcements.
+ */
+declare class SpinnerComponent implements SpinnerVariantInput {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly loaderIcon: typeof LucideLoader;
+    protected readonly pixelSize: _angular_core.Signal<12 | 24 | 16>;
+    /**
+     * @description Visual appearance of the spinner animation.
+     * @default "default"
+     */
+    readonly appearance: _angular_core.InputSignal<SpinnerAppearance>;
+    /**
+     * @description Accessible text announced by assistive technology when the spinner is not decorative.
+     * @default "Loading"
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description When `true`, removes the `status` role and hides the spinner from assistive technology with `aria-hidden="true"`.
+     * Useful when a parent element already manages loading semantics (such as `aria-busy="true"` on a button).
+     * @default false
+     */
+    readonly decorative: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Size preset controlling the dimensions of the indicator.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "mona-spinner", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface SpinnerCancelOptions {
+    onCancel?: () => void;
+    text?: string;
+}
+interface SpinnerOptions {
+    appearance?: SpinnerAppearance;
+    cancellable?: boolean | SpinnerCancelOptions;
+    delay?: number;
+    id?: string;
+    minimumVisibleDuration?: number;
+    size?: SpinnerSize;
+    target?: HTMLElement | ElementRef<HTMLElement> | readonly (HTMLElement | ElementRef<HTMLElement>)[];
+    text?: string;
+    zIndex?: number;
+}
+
+interface SpinnerUpdate {
+    appearance?: SpinnerAppearance;
+    size?: SpinnerSize;
+    text?: string;
+}
+
+interface SpinnerRef {
+    readonly cancelled$: Observable<void>;
+    readonly id: string;
+    close(): void;
+    update(update: SpinnerUpdate): void;
+}
+
+declare class SpinnerService implements OnDestroy {
+    #private;
+    /**
+     * Hides and destroys the spinner associated with the given `SpinnerRef` or string `id`.
+     */
+    hide(refOrId: SpinnerRef | string): void;
+    /**
+     * Tears down every active/pending spinner request and physical overlay so
+     * nothing is left behind if the service outlives its consumers.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Displays a spinner loading overlay according to the provided options.
+     * Returns a `SpinnerRef` handle for lifecycle management and updates.
+     */
+    show(options?: SpinnerOptions): SpinnerRef;
+    /**
+     * Wraps an Observable operation with a Spinner lifecycle.
+     * Shows the spinner on subscription and closes it when the observable completes, errors, or is unsubscribed.
+     */
+    track<T>(source: Observable<T>, options?: SpinnerOptions): Observable<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SpinnerService>;
+}
+
+export { SpinnerComponent, SpinnerService };
+export type { SpinnerAppearance, SpinnerCancelOptions, SpinnerOptions, SpinnerRef, SpinnerSize, SpinnerUpdate, SpinnerVariantProps };