@nanahoshi/mona-ui 0.12.0 → 0.13.1

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

@@ -1,11 +1,33 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, 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';
 
+/**
+ * @description Renders the visual content of every segmented option. Overrides the default label
+ * text of each option.
+ */
+class SegmentedItemTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SegmentedItemTemplateDirective, isStandalone: true, selector: "ng-template[monaSegmentedItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSegmentedItemTemplate]"
+                }]
+        }] });
+
 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
@@ -34,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: {
@@ -59,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
@@ -67,23 +113,71 @@ 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 */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(SegmentedItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.optionClasses = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
             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
@@ -147,6 +241,39 @@ 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 {
+            $implicit: option,
+            disabled: this.disabled() || !!option.disabled,
+            index,
+            option,
+            selected: option.value === this.value()
+        };
     }
     onOptionBlur() {
         this.touch.emit();
@@ -158,12 +285,61 @@ 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()" } }, 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            {{ option.label }}\n        </span>\n    </label>\n}\n" }); }
+    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,
-            args: [{ selector: "mona-segmented", host: {
+            args: [{ selector: "mona-segmented", imports: [NgTemplateOutlet], host: {
                         "[attr.aria-disabled]": "disabled() || undefined",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-label]": "ariaLabel()",
@@ -172,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            {{ option.label }}\n        </span>\n    </label>\n}\n" }]
-        }], propDecorators: { 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
@@ -183,5 +359,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SegmentedComponent };
+export { SegmentedComponent, SegmentedItemTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-segmented.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

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

@@ -1,8 +1,16 @@
 import * as _angular_core 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;
 
@@ -12,6 +20,32 @@ interface SegmentedOption<T extends SegmentedValue = SegmentedValue> {
     readonly disabled?: boolean;
 }
 
+/**
+ * @description Rendering context passed to the segmented item template.
+ */
+interface SegmentedItemTemplateContext<T extends SegmentedValue = SegmentedValue> {
+    /**
+     * The option rendered by this item.
+     */
+    readonly $implicit: SegmentedOption<T>;
+    /**
+     * The option rendered by this item.
+     */
+    readonly option: SegmentedOption<T>;
+    /**
+     * Zero-based option index.
+     */
+    readonly index: number;
+    /**
+     * Whether this option is currently selected.
+     */
+    readonly selected: boolean;
+    /**
+     * Whether this option is disabled, either individually or via the group.
+     */
+    readonly disabled: boolean;
+}
+
 declare const segmentedContainerThemeVariants: (props?: ({
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -27,11 +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
@@ -88,11 +137,26 @@ 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"; }, never, 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>;
+}
+
+/**
+ * @description Renders the visual content of every segmented option. Overrides the default label
+ * text of each option.
+ */
+declare class SegmentedItemTemplateDirective {
+    readonly templateRef: TemplateRef<SegmentedItemTemplateContext<_nanahoshi_mona_ui_segmented.SegmentedValue>>;
+    static ngTemplateContextGuard(_directive: SegmentedItemTemplateDirective, context: unknown): context is SegmentedItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SegmentedItemTemplateDirective, "ng-template[monaSegmentedItemTemplate]", never, {}, {}, never, never, true, never>;
 }
 
-export { SegmentedComponent };
-export type { SegmentedOption, SegmentedValue, SegmentedVariantProps };
+export { SegmentedComponent, SegmentedItemTemplateDirective };
+export type { SegmentedItemTemplateContext, SegmentedOption, SegmentedValue, SegmentedVariantProps };