@nanahoshi/mona-ui 0.17.1 → 0.18.1

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

@@ -7,13 +7,21 @@ import { isIterable } from 'rxjs/internal/util/isIterable';
 
 class AttributeBinderDirective {
     #element;
+    #previousKeys;
     #renderer;
     constructor() {
         this.#element = inject(ElementRef);
+        this.#previousKeys = new Set();
         this.#renderer = inject(Renderer2);
         this.attributes = input({}, { ...(ngDevMode ? { debugName: "attributes" } : /* istanbul ignore next */ {}), alias: "monaAttributeBinder" });
         effect(() => {
             const attributes = this.attributes();
+            const nextKeys = new Set(Object.keys(attributes));
+            for (const prevKey of this.#previousKeys) {
+                if (!nextKeys.has(prevKey)) {
+                    this.#renderer.removeAttribute(this.#element.nativeElement, prevKey);
+                }
+            }
             for (const [key, value] of Object.entries(attributes)) {
                 if (value == null || value === false) {
                     this.#renderer.removeAttribute(this.#element.nativeElement, key);
@@ -23,6 +31,10 @@ class AttributeBinderDirective {
                     this.#renderer.setAttribute(this.#element.nativeElement, key, attributeValue);
                 }
             }
+            this.#previousKeys.clear();
+            for (const key of nextKeys) {
+                this.#previousKeys.add(key);
+            }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AttributeBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }

package/fesm2022/nanahoshi-mona-ui-otp-input.mjs

@@ -0,0 +1,817 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, computed, signal, viewChild, contentChild, input, output, model, effect, Component } from '@angular/core';
+import { themeControlSurfaceClasses, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class OtpInputSeparatorTemplateDirective {
+    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: OtpInputSeparatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: OtpInputSeparatorTemplateDirective, isStandalone: true, selector: "ng-template[monaOtpInputSeparatorTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OtpInputSeparatorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaOtpInputSeparatorTemplate]"
+                }]
+        }] });
+
+const otpInputHostThemeVariants = cva(`
+        relative inline-flex items-center gap-2
+        outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[readonly='true']:cursor-default
+    `);
+const otpInputFieldThemeVariants = cva(`pointer-events-none absolute inset-0 size-full opacity-0 outline-none select-none -z-10`);
+const otpInputSlotThemeVariants = cva(`
+        relative inline-flex items-center justify-center
+        text-center font-mono tabular-nums select-none
+        overflow-hidden
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
+        transition-[color,box-shadow,border,background-color] duration-(--mona-motion-standard) ease-in-out
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+
+        data-[readonly='true']:cursor-default
+
+        data-[active='true']:border-focus-indicator
+        data-[active='true']:ring-2 data-[active='true']:ring-focus-indicator/35
+        data-[active='true']:z-10
+
+        data-[selected='true']:bg-primary/10
+
+        data-[placeholder='true']:text-muted-foreground
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:data-[active='true']:border-error
+        data-[invalid='true']:data-[active='true']:ring-2
+        data-[invalid='true']:data-[active='true']:ring-error/35
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "h-10 w-10 min-w-10 text-md",
+            medium: "h-9 w-9 min-w-9 text-sm",
+            small: "h-8 w-8 min-w-8 text-xs"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium",
+        size: "medium"
+    }
+});
+
+const RESERVED_INPUT_ATTRIBUTES = new Set([
+    "aria-hidden",
+    "aria-invalid",
+    "aria-required",
+    "class",
+    "disabled",
+    "maxlength",
+    "readonly",
+    "required",
+    "role",
+    "style",
+    "type",
+    "value"
+]);
+const COMPONENT_MANAGED_ATTRIBUTES = new Set([
+    "aria-label",
+    "aria-labelledby",
+    "autocomplete",
+    "inputmode"
+]);
+function findAttribute(attrs, name) {
+    const target = name.toLowerCase();
+    for (const [key, value] of Object.entries(attrs)) {
+        if (key.toLowerCase() === target) {
+            return value;
+        }
+    }
+    return undefined;
+}
+function findUsableAttribute(attrs, name) {
+    const value = findAttribute(attrs, name);
+    if (value == null || value === false) {
+        return undefined;
+    }
+    return value;
+}
+function toNonEmptyString(value) {
+    if (value == null || value === false) {
+        return null;
+    }
+    const text = String(value).trim();
+    return text.length > 0 ? text : null;
+}
+function normalizeLength(length) {
+    if (typeof length !== "number" || isNaN(length) || !isFinite(length) || length < 1) {
+        return 4;
+    }
+    return Math.floor(length);
+}
+function isValidCharacter(char, type, characterPattern) {
+    if (!char || char.length !== 1) {
+        return false;
+    }
+    if (characterPattern != null) {
+        const sanitized = new RegExp(characterPattern.source, characterPattern.flags.replace(/[gy]/g, ""));
+        return sanitized.test(char);
+    }
+    if (type === "number") {
+        return /^[0-9]$/.test(char);
+    }
+    return /^[a-zA-Z0-9]$/.test(char);
+}
+function filterCharacters(raw, type, characterPattern, maxLength) {
+    if (!raw) {
+        return "";
+    }
+    let result = "";
+    for (const char of raw) {
+        if (isValidCharacter(char, type, characterPattern)) {
+            result += char;
+            if (result.length >= maxLength) {
+                break;
+            }
+        }
+    }
+    return result;
+}
+function normalizeGroupLengths(groupLength, totalLength) {
+    if (totalLength <= 0) {
+        return [];
+    }
+    if (groupLength == null) {
+        return [totalLength];
+    }
+    if (typeof groupLength === "number") {
+        if (!isFinite(groupLength) || isNaN(groupLength) || groupLength <= 0) {
+            return [totalLength];
+        }
+        const size = Math.floor(groupLength);
+        if (size <= 0) {
+            return [totalLength];
+        }
+        const groups = [];
+        let remaining = totalLength;
+        while (remaining > 0) {
+            const g = Math.min(size, remaining);
+            groups.push(g);
+            remaining -= g;
+        }
+        return groups;
+    }
+    if (Array.isArray(groupLength)) {
+        const groups = [];
+        let remaining = totalLength;
+        for (const item of groupLength) {
+            if (typeof item === "number" && isFinite(item) && !isNaN(item) && item > 0) {
+                const size = Math.floor(item);
+                if (size > 0) {
+                    const g = Math.min(size, remaining);
+                    groups.push(g);
+                    remaining -= g;
+                    if (remaining <= 0) {
+                        break;
+                    }
+                }
+            }
+        }
+        if (remaining > 0) {
+            groups.push(remaining);
+        }
+        return groups.length > 0 ? groups : [totalLength];
+    }
+    return [totalLength];
+}
+function sanitizeInputAttributes(attrs) {
+    const sanitized = {};
+    for (const [key, val] of Object.entries(attrs)) {
+        const normalizedKey = key.toLowerCase();
+        if (!RESERVED_INPUT_ATTRIBUTES.has(normalizedKey) && !COMPONENT_MANAGED_ATTRIBUTES.has(normalizedKey)) {
+            sanitized[key] = val;
+        }
+    }
+    return sanitized;
+}
+function getSlotRoundedClasses(rounded, firstSlot, lastSlot, groupSize) {
+    if (groupSize <= 1) {
+        return "";
+    }
+    if (firstSlot) {
+        switch (rounded) {
+            case "none":
+                return "rounded-none";
+            case "small":
+                return "rounded-s-sm rounded-e-none";
+            case "medium":
+                return "rounded-s-md rounded-e-none";
+            case "large":
+                return "rounded-s-lg rounded-e-none";
+            case "full":
+                return "rounded-s-full rounded-e-none";
+            default:
+                return "rounded-s-md rounded-e-none";
+        }
+    }
+    if (lastSlot) {
+        switch (rounded) {
+            case "none":
+                return "rounded-none";
+            case "small":
+                return "rounded-e-sm rounded-s-none";
+            case "medium":
+                return "rounded-e-md rounded-s-none";
+            case "large":
+                return "rounded-e-lg rounded-s-none";
+            case "full":
+                return "rounded-e-full rounded-s-none";
+            default:
+                return "rounded-e-md rounded-s-none";
+        }
+    }
+    return "rounded-none";
+}
+function computeSlotClasses(options) {
+    const { firstSlot, groupSize, lastSlot, rounded, size, slotClass, spacing } = options;
+    const baseClasses = otpInputSlotThemeVariants({
+        rounded: spacing || groupSize === 1 ? rounded : "none",
+        size
+    });
+    let extraRounding = "";
+    if (!spacing) {
+        extraRounding = getSlotRoundedClasses(rounded, firstSlot, lastSlot, groupSize);
+    }
+    return twMerge(baseClasses, extraRounding, slotClass);
+}
+
+class OtpInputComponent {
+    constructor() {
+        this.activeSlotIndex = computed(() => {
+            if (!this.hasFocus()) {
+                return -1;
+            }
+            const totalLen = this.normalizedLength();
+            const start = this.logicalSelectionStart();
+            const end = this.logicalSelectionEnd();
+            if (start === end) {
+                if (start < totalLen) {
+                    return start;
+                }
+                return Math.max(0, totalLen - 1);
+            }
+            return Math.min(start, totalLen - 1);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeSlotIndex" }] : /* istanbul ignore next */ []));
+        this.classes = computed(() => {
+            const baseClasses = otpInputHostThemeVariants();
+            return twMerge(baseClasses, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.computedAriaLabel = computed(() => {
+            const labelledby = this.computedAriaLabelledby();
+            if (labelledby != null) {
+                return null;
+            }
+            const attrs = this.inputAttributes();
+            const rawAttrLabel = findUsableAttribute(attrs, "aria-label");
+            const customAttrLabel = toNonEmptyString(rawAttrLabel);
+            if (customAttrLabel != null) {
+                return customAttrLabel;
+            }
+            const fallback = toNonEmptyString(this.ariaLabel());
+            return fallback ?? "Verification code";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+        this.computedAriaLabelledby = computed(() => {
+            const attrs = this.inputAttributes();
+            const raw = findUsableAttribute(attrs, "aria-labelledby");
+            return toNonEmptyString(raw);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabelledby" }] : /* istanbul ignore next */ []));
+        this.derivedAutocomplete = computed(() => {
+            const attrs = this.inputAttributes();
+            const autocomplete = findUsableAttribute(attrs, "autocomplete");
+            return autocomplete != null ? String(autocomplete) : "one-time-code";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "derivedAutocomplete" }] : /* istanbul ignore next */ []));
+        this.derivedInputMode = computed(() => {
+            const attrs = this.inputAttributes();
+            const inputMode = findUsableAttribute(attrs, "inputmode");
+            if (inputMode != null) {
+                return String(inputMode);
+            }
+            return this.type() === "number" ? "numeric" : "text";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "derivedInputMode" }] : /* istanbul ignore next */ []));
+        this.hasFocus = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFocus" }] : /* istanbul ignore next */ []));
+        this.inputClass = computed(() => otpInputFieldThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+        this.inputRef = viewChild.required("input", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.value().length !== this.normalizedLength())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.isComplete = computed(() => this.value().length === this.normalizedLength(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
+        this.isComposing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isComposing" }] : /* istanbul ignore next */ []));
+        this.logicalSelectionEnd = computed(() => {
+            const maxLogicalPosition = Math.min(this.value().length, this.normalizedLength());
+            const start = this.logicalSelectionStart();
+            const rawEnd = Math.max(0, Math.min(this.selectionEnd(), maxLogicalPosition));
+            return Math.max(start, rawEnd);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "logicalSelectionEnd" }] : /* istanbul ignore next */ []));
+        this.logicalSelectionStart = computed(() => {
+            const maxLogicalPosition = Math.min(this.value().length, this.normalizedLength());
+            return Math.max(0, Math.min(this.selectionStart(), maxLogicalPosition));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "logicalSelectionStart" }] : /* istanbul ignore next */ []));
+        this.nativeInputType = computed(() => (this.type() === "password" ? "password" : "text"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeInputType" }] : /* istanbul ignore next */ []));
+        this.normalizedLength = computed(() => normalizeLength(this.length()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedLength" }] : /* istanbul ignore next */ []));
+        this.sanitizedAttributes = computed(() => sanitizeInputAttributes(this.inputAttributes()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sanitizedAttributes" }] : /* istanbul ignore next */ []));
+        this.selectionEnd = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionEnd" }] : /* istanbul ignore next */ []));
+        this.selectionStart = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []));
+        this.separatorTemplate = contentChild(OtpInputSeparatorTemplateDirective, { ...(ngDevMode ? { debugName: "separatorTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.visualGroups = computed(() => {
+            const totalLen = this.normalizedLength();
+            const groupSizes = normalizeGroupLengths(this.groupLength(), totalLen);
+            const val = this.value();
+            const activeIndex = this.activeSlotIndex();
+            const selStart = this.logicalSelectionStart();
+            const selEnd = this.logicalSelectionEnd();
+            const focused = this.hasFocus();
+            const inputType = this.type();
+            const placeholderStr = this.placeholder();
+            const placeholderChar = placeholderStr.length > 0 ? placeholderStr.charAt(0) : "";
+            const rounded = this.rounded();
+            const size = this.size();
+            const slotClass = this.slotClass();
+            const spacing = this.spacing();
+            const groups = [];
+            let slotCounter = 0;
+            for (let gIndex = 0; gIndex < groupSizes.length; gIndex++) {
+                const groupSize = groupSizes[gIndex];
+                const slots = [];
+                for (let s = 0; s < groupSize; s++) {
+                    const slotIndex = slotCounter++;
+                    const filled = slotIndex < val.length;
+                    const character = filled ? val[slotIndex] : "";
+                    const isPlaceholder = !filled && placeholderChar.length > 0;
+                    let displayCharacter = "";
+                    if (filled) {
+                        displayCharacter = inputType === "password" ? "•" : character;
+                    }
+                    else if (isPlaceholder) {
+                        displayCharacter = placeholderChar;
+                    }
+                    const active = focused && slotIndex === activeIndex;
+                    const selected = focused && slotIndex >= selStart && slotIndex < selEnd;
+                    const isFirstSlot = s === 0;
+                    const isLastSlot = s === groupSize - 1;
+                    const classes = computeSlotClasses({
+                        firstSlot: isFirstSlot,
+                        groupSize,
+                        lastSlot: isLastSlot,
+                        rounded,
+                        size,
+                        slotClass,
+                        spacing
+                    });
+                    slots.push({
+                        active,
+                        classes,
+                        displayCharacter,
+                        filled,
+                        index: slotIndex,
+                        placeholder: isPlaceholder,
+                        selected
+                    });
+                }
+                groups.push({
+                    index: gIndex,
+                    slots
+                });
+            }
+            return groups;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visualGroups" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the inner `<input>` element.
+         * @default "Verification code"
+         */
+        this.ariaLabel = input("Verification code", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Regular expression used to determine whether each individual OTP character is allowed.
+         * @default null
+         */
+        this.characterPattern = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "characterPattern" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when a user interaction completes the verification code.
+         */
+        this.complete = output();
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Configures slot grouping lengths. Accepts a uniform number or an array of group sizes.
+         * @default null
+         */
+        this.groupLength = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupLength" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional HTML attributes applied directly to the inner `<input>` element.
+         * @default {}
+         */
+        this.inputAttributes = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the inner input loses focus.
+         */
+        this.inputBlur = output();
+        /**
+         * @description Emitted when the inner input gains focus.
+         */
+        this.inputFocus = output();
+        /**
+         * @description Marks the OTP input as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the total number of characters accepted by the OTP input and the number of visual slots.
+         * @default 4
+         */
+        this.length = input(4, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Hint character displayed in empty visual slots.
+         * @default ""
+         */
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving the component's focusability and visual state.
+         * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the OTP input as required. Triggers invalid state when touched and incomplete.
+         * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the OTP slots.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text character or string displayed between visual slot groups.
+         * @default ""
+         */
+        this.separator = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes applied to separator elements.
+         * @default ""
+         */
+        this.separatorClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "separatorClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the dimensions and font size of the OTP slots.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes applied to each visual slot element.
+         * @default ""
+         */
+        this.slotClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slotClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Determines whether visual slots within a group have spacing between them or are joined together.
+         * @default true
+         */
+        this.spacing = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the OTP input is interacted with — on blur or user value change.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the OTP input. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the type of the OTP input ("text", "number", or "password").
+         * @default "text"
+         */
+        this.type = input("text", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* 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" });
+        /**
+         * @description Two-way bindable current value of the OTP input.
+         * @default ""
+         */
+        this.value = model("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const val = this.value();
+            const inputType = this.type();
+            const characterPattern = this.characterPattern();
+            const maxLen = this.normalizedLength();
+            const filtered = filterCharacters(val, inputType, characterPattern, maxLen);
+            if (filtered !== val) {
+                this.value.set(filtered);
+            }
+        });
+    }
+    blur() {
+        this.inputRef().nativeElement.blur();
+    }
+    focus(target) {
+        if (this.disabled()) {
+            return;
+        }
+        const el = this.inputRef().nativeElement;
+        if (typeof target === "object" && target !== null) {
+            el.focus(target);
+            this.syncSelection();
+            return;
+        }
+        el.focus();
+        const val = this.value();
+        const maxLen = this.normalizedLength();
+        if (typeof target === "number") {
+            const clamped = Math.max(0, Math.min(target, maxLen));
+            if (clamped < val.length) {
+                el.setSelectionRange(clamped, clamped + 1);
+            }
+            else {
+                const pos = Math.min(clamped, val.length);
+                el.setSelectionRange(pos, pos);
+            }
+        }
+        else {
+            if (val.length < maxLen) {
+                el.setSelectionRange(val.length, val.length);
+            }
+            else {
+                el.setSelectionRange(maxLen, maxLen);
+            }
+        }
+        this.syncSelection();
+    }
+    onBeforeInput(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.isComposing() || event.isComposing) {
+            return;
+        }
+        const inputType = event.inputType;
+        const inputEl = this.inputRef().nativeElement;
+        const start = inputEl.selectionStart ?? 0;
+        const end = inputEl.selectionEnd ?? 0;
+        const val = this.value();
+        const maxLen = this.normalizedLength();
+        if (inputType === "insertText") {
+            if (!event.data) {
+                return;
+            }
+            if (event.data.length === 1) {
+                if (!isValidCharacter(event.data, this.type(), this.characterPattern())) {
+                    event.preventDefault();
+                    return;
+                }
+                if (start >= maxLen && start === end) {
+                    event.preventDefault();
+                    return;
+                }
+                if (start === end && start < val.length) {
+                    inputEl.setSelectionRange(start, start + 1);
+                }
+            }
+            else {
+                event.preventDefault();
+                this.applyUserInsertion(event.data, start, end);
+            }
+        }
+        else if (inputType === "insertReplacementText" || inputType === "insertFromPaste") {
+            if (event.data) {
+                event.preventDefault();
+                this.applyUserInsertion(event.data, start, end);
+            }
+        }
+    }
+    onBlur(event) {
+        this.hasFocus.set(false);
+        this.inputBlur.emit(event);
+        this.touch.emit();
+    }
+    onCompositionEnd(event) {
+        this.isComposing.set(false);
+        this.onInput(event);
+    }
+    onCompositionStart() {
+        this.isComposing.set(true);
+    }
+    onFocus(event) {
+        this.hasFocus.set(true);
+        this.syncSelection();
+        this.inputFocus.emit(event);
+    }
+    onInput(_event) {
+        if (this.disabled() || this.readonly()) {
+            const inputEl = this.inputRef().nativeElement;
+            inputEl.value = this.value();
+            return;
+        }
+        if (this.isComposing()) {
+            return;
+        }
+        const inputEl = this.inputRef().nativeElement;
+        const rawVal = inputEl.value;
+        const prevVal = this.value();
+        const nextVal = filterCharacters(rawVal, this.type(), this.characterPattern(), this.normalizedLength());
+        inputEl.value = nextVal;
+        const wasIncomplete = prevVal.length < this.normalizedLength();
+        this.value.set(nextVal);
+        this.touch.emit();
+        if (wasIncomplete && nextVal.length === this.normalizedLength()) {
+            this.complete.emit(nextVal);
+        }
+        this.syncSelection();
+    }
+    onKeyDown(event) {
+        if (this.disabled() || this.readonly() || this.isComposing() || event.isComposing) {
+            return;
+        }
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        if (event.key.length !== 1) {
+            return;
+        }
+        const inputEl = this.inputRef().nativeElement;
+        const start = inputEl.selectionStart ?? 0;
+        const end = inputEl.selectionEnd ?? 0;
+        const val = this.value();
+        const maxLen = this.normalizedLength();
+        if (!isValidCharacter(event.key, this.type(), this.characterPattern())) {
+            event.preventDefault();
+            return;
+        }
+        if (start >= maxLen && start === end) {
+            event.preventDefault();
+            return;
+        }
+        if (start === end && start < val.length) {
+            inputEl.setSelectionRange(start, start + 1);
+        }
+    }
+    onKeyUp() {
+        this.syncSelection();
+    }
+    onPaste(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+            return;
+        }
+        const pastedText = event.clipboardData?.getData("text") ?? "";
+        if (!pastedText) {
+            return;
+        }
+        event.preventDefault();
+        const inputEl = this.inputRef().nativeElement;
+        const start = inputEl.selectionStart ?? 0;
+        const end = inputEl.selectionEnd ?? 0;
+        this.applyUserInsertion(pastedText, start, end);
+    }
+    onSelect() {
+        this.syncSelection();
+    }
+    onSlotPointerDown(event, index) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.focus(index);
+    }
+    applyUserInsertion(text, selectionStart, selectionEnd) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const inputEl = this.inputRef().nativeElement;
+        const currentVal = this.value();
+        const maxLen = this.normalizedLength();
+        const filtered = filterCharacters(text, this.type(), this.characterPattern(), Number.MAX_SAFE_INTEGER);
+        if (filtered.length === 0 && selectionStart === selectionEnd) {
+            return;
+        }
+        const start = Math.max(0, Math.min(selectionStart, currentVal.length));
+        const end = Math.max(start, Math.min(selectionEnd, currentVal.length));
+        const before = currentVal.substring(0, start);
+        const after = currentVal.substring(end);
+        let combined = before + filtered + after;
+        if (combined.length > maxLen) {
+            combined = combined.substring(0, maxLen);
+        }
+        const newCaretPos = Math.min(start + filtered.length, maxLen);
+        const wasIncomplete = currentVal.length < maxLen;
+        inputEl.value = combined;
+        this.value.set(combined);
+        inputEl.setSelectionRange(newCaretPos, newCaretPos);
+        this.selectionStart.set(newCaretPos);
+        this.selectionEnd.set(newCaretPos);
+        this.touch.emit();
+        if (wasIncomplete && combined.length === maxLen) {
+            this.complete.emit(combined);
+        }
+    }
+    syncSelection() {
+        const el = this.inputRef().nativeElement;
+        this.selectionStart.set(el.selectionStart ?? 0);
+        this.selectionEnd.set(el.selectionEnd ?? 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OtpInputComponent, isStandalone: true, selector: "mona-otp-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupLength: { classPropertyName: "groupLength", publicName: "groupLength", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorClass: { classPropertyName: "separatorClass", publicName: "separatorClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, slotClass: { classPropertyName: "slotClass", publicName: "slotClass", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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: { complete: "complete", inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { attributes: { "dir": "ltr" }, properties: { "attr.dir": "'ltr'", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidState() || null", "attr.data-complete": "isComplete() || null", "attr.data-focused": "hasFocus() || null", "class": "classes()" } }, queries: [{ propertyName: "separatorTemplate", first: true, predicate: OtpInputSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class.-space-x-px]=\"!spacing()\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OtpInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-otp-input", imports: [NgTemplateOutlet, AttributeBinderDirective], host: {
+                        dir: "ltr",
+                        "[attr.dir]": "'ltr'",
+                        "[attr.data-disabled]": "disabled() || null",
+                        "[attr.data-readonly]": "readonly() || null",
+                        "[attr.data-required]": "required() || null",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-complete]": "isComplete() || null",
+                        "[attr.data-focused]": "hasFocus() || null",
+                        "[class]": "classes()"
+                    }, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class.-space-x-px]=\"!spacing()\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OtpInputSeparatorTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groupLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLength", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], slotClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotClass", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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/otp-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OtpInputComponent, OtpInputSeparatorTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-otp-input.mjs.map

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

@@ -132,6 +132,7 @@ class SegmentedComponent {
     #lastAnimatedIndex;
     #lastOptions;
     #lastSize;
+    #observedOptionElements;
     #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -139,6 +140,7 @@ class SegmentedComponent {
         this.#lastAnimatedIndex = null;
         this.#lastOptions = null;
         this.#lastSize = null;
+        this.#observedOptionElements = [];
         this.#resizeObserver = null;
         this.containerClasses = computed(() => {
             const classes = segmentedContainerThemeVariants({ alignment: this.alignment(), rounded: this.rounded() });
@@ -265,7 +267,7 @@ class SegmentedComponent {
         afterRenderEffect({
             read: () => {
                 this.selectedIndex();
-                this.optionElements();
+                const optionElements = this.optionElements();
                 this.alignment();
                 this.rounded();
                 this.animate();
@@ -276,12 +278,14 @@ class SegmentedComponent {
                 const suppressTransition = isSizeChange || isOptionsChange;
                 this.#lastSize = size;
                 this.#lastOptions = options;
+                this.observeOptionElements(optionElements);
                 this.updateIndicatorGeometry({ suppressTransition });
             }
         });
         afterNextRender({
             read: () => {
                 this.setupResizeObserver();
+                this.scheduleSettledGeometryUpdate();
             }
         });
         this.#destroyRef.onDestroy(() => {
@@ -307,6 +311,39 @@ class SegmentedComponent {
         this.value.set(option.value);
         this.touch.emit();
     }
+    observeOptionElements(optionElements) {
+        if (!this.#resizeObserver) {
+            return;
+        }
+        const elements = optionElements.map(optionElement => optionElement.nativeElement);
+        for (const element of this.#observedOptionElements) {
+            if (!elements.includes(element)) {
+                this.#resizeObserver.unobserve(element);
+            }
+        }
+        for (const element of elements) {
+            if (!this.#observedOptionElements.includes(element)) {
+                this.#resizeObserver.observe(element);
+            }
+        }
+        this.#observedOptionElements = elements;
+    }
+    /**
+     * Guards against a stale indicator snapshot when the control mounts inside a container that is
+     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
+     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
+     */
+    scheduleSettledGeometryUpdate() {
+        const win = this.#hostElementRef.nativeElement.ownerDocument.defaultView;
+        if (!win) {
+            return;
+        }
+        win.requestAnimationFrame(() => {
+            win.requestAnimationFrame(() => {
+                this.updateIndicatorGeometry({ suppressTransition: true });
+            });
+        });
+    }
     setupResizeObserver() {
         if (typeof ResizeObserver === "undefined") {
             return;
@@ -315,6 +352,7 @@ class SegmentedComponent {
             this.updateIndicatorGeometry({ suppressTransition: true });
         });
         this.#resizeObserver.observe(this.#hostElementRef.nativeElement);
+        this.observeOptionElements(this.optionElements());
     }
     updateIndicatorGeometry(options) {
         const selectedIndex = this.selectedIndex();

package/otp-input/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -239,6 +239,10 @@
       "types": "./types/nanahoshi-mona-ui-numeric-text-box.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs"
     },
+    "./otp-input": {
+      "types": "./types/nanahoshi-mona-ui-otp-input.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-otp-input.mjs"
+    },
     "./pager": {
       "types": "./types/nanahoshi-mona-ui-pager.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-pager.mjs"

package/types/nanahoshi-mona-ui-otp-input.d.ts

@@ -0,0 +1,209 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type OtpInputType = "text" | "number" | "password";
+
+declare const otpInputSlotThemeVariants: (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type OtpInputSlotVariantProps = VariantProps<typeof otpInputSlotThemeVariants>;
+type OtpInputSlotVariantInput = VariantInputs<OtpInputSlotVariantProps>;
+type OtpInputVariantProps = OtpInputSlotVariantProps;
+type OtpInputVariantInput = OtpInputSlotVariantInput;
+
+interface OtpSlotViewModel {
+    active: boolean;
+    classes: string;
+    displayCharacter: string;
+    filled: boolean;
+    index: number;
+    placeholder: boolean;
+    selected: boolean;
+}
+interface OtpGroupViewModel {
+    index: number;
+    slots: OtpSlotViewModel[];
+}
+declare class OtpInputComponent implements OtpInputVariantInput, FormValueControl<string> {
+    protected readonly activeSlotIndex: _angular_core.Signal<number>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly computedAriaLabel: _angular_core.Signal<string | null>;
+    protected readonly computedAriaLabelledby: _angular_core.Signal<string | null>;
+    protected readonly derivedAutocomplete: _angular_core.Signal<string>;
+    protected readonly derivedInputMode: _angular_core.Signal<string>;
+    protected readonly hasFocus: _angular_core.WritableSignal<boolean>;
+    protected readonly inputClass: _angular_core.Signal<string>;
+    protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly isComplete: _angular_core.Signal<boolean>;
+    protected readonly isComposing: _angular_core.WritableSignal<boolean>;
+    protected readonly logicalSelectionEnd: _angular_core.Signal<number>;
+    protected readonly logicalSelectionStart: _angular_core.Signal<number>;
+    protected readonly nativeInputType: _angular_core.Signal<"text" | "password">;
+    protected readonly normalizedLength: _angular_core.Signal<number>;
+    protected readonly sanitizedAttributes: _angular_core.Signal<AttributeConfig>;
+    protected readonly selectionEnd: _angular_core.WritableSignal<number>;
+    protected readonly selectionStart: _angular_core.WritableSignal<number>;
+    protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly visualGroups: _angular_core.Signal<OtpGroupViewModel[]>;
+    /**
+     * @description Accessible name for the inner `<input>` element.
+     * @default "Verification code"
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Regular expression used to determine whether each individual OTP character is allowed.
+     * @default null
+     */
+    readonly characterPattern: _angular_core.InputSignal<RegExp | null>;
+    /**
+     * @description Emitted when a user interaction completes the verification code.
+     */
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Configures slot grouping lengths. Accepts a uniform number or an array of group sizes.
+     * @default null
+     */
+    readonly groupLength: _angular_core.InputSignal<number | number[] | null>;
+    /**
+     * @description Additional HTML attributes applied directly to the inner `<input>` element.
+     * @default {}
+     */
+    readonly inputAttributes: _angular_core.InputSignal<AttributeConfig>;
+    /**
+     * @description Emitted when the inner input loses focus.
+     */
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Emitted when the inner input gains focus.
+     */
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Marks the OTP input as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the total number of characters accepted by the OTP input and the number of visual slots.
+     * @default 4
+     */
+    readonly length: _angular_core.InputSignal<number>;
+    /**
+     * @description Hint character displayed in empty visual slots.
+     * @default ""
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Prevents value changes while preserving the component's focusability and visual state.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the OTP input as required. Triggers invalid state when touched and incomplete.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the OTP slots.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Text character or string displayed between visual slot groups.
+     * @default ""
+     */
+    readonly separator: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes applied to separator elements.
+     * @default ""
+     */
+    readonly separatorClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Size preset controlling the dimensions and font size of the OTP slots.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Additional CSS classes applied to each visual slot element.
+     * @default ""
+     */
+    readonly slotClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Determines whether visual slots within a group have spacing between them or are joined together.
+     * @default true
+     */
+    readonly spacing: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the OTP input is interacted with — on blur or user value change.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the OTP input. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the type of the OTP input ("text", "number", or "password").
+     * @default "text"
+     */
+    readonly type: _angular_core.InputSignal<OtpInputType>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current value of the OTP input.
+     * @default ""
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    constructor();
+    blur(): void;
+    focus(options?: FocusOptions): void;
+    focus(index?: number): void;
+    protected onBeforeInput(event: InputEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onCompositionEnd(event: CompositionEvent): void;
+    protected onCompositionStart(): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onInput(_event?: Event): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onKeyUp(): void;
+    protected onPaste(event: ClipboardEvent): void;
+    protected onSelect(): void;
+    protected onSlotPointerDown(event: PointerEvent, index: number): void;
+    private applyUserInsertion;
+    private syncSelection;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "mona-otp-input", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "characterPattern": { "alias": "characterPattern"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "groupLength": { "alias": "groupLength"; "required": false; "isSignal": true; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "separatorClass": { "alias": "separatorClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "slotClass": { "alias": "slotClass"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "complete": "complete"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, ["separatorTemplate"], never, true, never>;
+}
+
+interface OtpInputSeparatorContext {
+    $implicit: number;
+    groupIndex: number;
+}
+declare class OtpInputSeparatorTemplateDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(_directive: OtpInputSeparatorTemplateDirective, _context: unknown): _context is OtpInputSeparatorContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputSeparatorTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OtpInputSeparatorTemplateDirective, "ng-template[monaOtpInputSeparatorTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { OtpInputComponent, OtpInputSeparatorTemplateDirective };
+export type { OtpInputSeparatorContext, OtpInputType, OtpInputVariantProps };

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

@@ -148,6 +148,13 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
+    private observeOptionElements;
+    /**
+     * Guards against a stale indicator snapshot when the control mounts inside a container that is
+     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
+     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
+     */
+    private scheduleSettledGeometryUpdate;
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;