@nanahoshi/mona-ui 0.11.4 → 0.13.0

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

@@ -0,0 +1,606 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, computed, viewChild, contentChild, signal, input, output, model, Component } from '@angular/core';
+import { LucideStar, LucideHeart, LucideFlame, LucideDiamond, LucideCircle, LucideDynamicIcon } from '@lucide/angular';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { range } from '@mirei/ts-collections';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+/**
+ * @description Renders the pointer-preview visual for rating items. Overrides the default preset
+ * overlay whenever the visible state comes from pointer preview.
+ */
+class RatingHoveredItemTemplateDirective {
+    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: RatingHoveredItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingHoveredItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingHoveredItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingHoveredItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingHoveredItemTemplate]"
+                }]
+        }] });
+
+/**
+ * @description Renders the default (unselected) visual for every rating item. Overrides the
+ * default preset icon for the base layer of each item.
+ */
+class RatingItemTemplateDirective {
+    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: RatingItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingItemTemplate]"
+                }]
+        }] });
+
+/**
+ * @description Renders the committed selected visual for rating items. Overrides the default
+ * preset overlay whenever the visible state comes from the committed value.
+ */
+class RatingSelectedItemTemplateDirective {
+    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: RatingSelectedItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingSelectedItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingSelectedItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingSelectedItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingSelectedItemTemplate]"
+                }]
+        }] });
+
+const ratingContainerThemeVariants = cva(`inline-flex items-center gap-2.5`);
+const ratingControlThemeVariants = cva(`
+        group
+        inline-flex items-center
+        cursor-pointer select-none
+        rounded-md
+        outline-none
+        transition-colors duration-(--mona-motion-fast)
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+        data-[disabled="true"]:pointer-events-none
+        data-[disabled="true"]:cursor-not-allowed
+        data-[readonly="true"]:cursor-default
+        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/35
+        data-[invalid="true"]:focus-visible:ring-error/35
+    `, {
+    variants: {
+        size: {
+            small: "gap-1 p-0.5",
+            medium: "gap-1 p-1",
+            large: "gap-1.5 p-1.5"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingItemThemeVariants = cva(`relative flex items-center justify-center overflow-hidden`, {
+    variants: {
+        size: {
+            small: "h-6 w-6",
+            medium: "h-7 w-7",
+            large: "h-8 w-8"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingIconThemeVariants = cva(`
+        block shrink-0
+        text-muted-foreground opacity-45
+        transition-colors duration-(--mona-motion-fast)
+        group-data-[disabled="true"]:text-disabled-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-5 w-5",
+            large: "h-6 w-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingOverlayIconThemeVariants = cva(`block shrink-0`, {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-5 w-5",
+            large: "h-6 w-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingOverlayClipThemeVariants = cva(`
+    absolute bottom-0 start-0 top-0
+    pointer-events-none
+    overflow-hidden
+`);
+const ratingOverlayContentThemeVariants = cva(`
+        flex items-center justify-center
+        transition-colors duration-(--mona-motion-fast)
+        group-data-[disabled="true"]:text-disabled-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-6 w-6",
+            medium: "h-7 w-7",
+            large: "h-8 w-8"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingLabelThemeVariants = cva(`whitespace-nowrap`, {
+    variants: {
+        size: {
+            small: "text-sm",
+            medium: "text-sm",
+            large: "text-base"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+
+const DEFAULT_ITEMS_COUNT = 5;
+/**
+ * Normalizes an arbitrary `itemsCount` value into a safe positive integer.
+ * Numeric strings are converted, fractional values are floored, and
+ * non-finite values fall back to the default.
+ */
+function normalizeItemsCount(value) {
+    if (typeof value === "string") {
+        if (value.trim() === "") {
+            return DEFAULT_ITEMS_COUNT;
+        }
+        value = Number(value);
+    }
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return DEFAULT_ITEMS_COUNT;
+    }
+    return Math.max(1, Math.floor(value));
+}
+/**
+ * Returns the interaction step for the given precision.
+ */
+function getRatingStep(precision) {
+    return precision === "half" ? 0.5 : 1;
+}
+/**
+ * Rounds a value to the nearest multiple of the given step while avoiding
+ * floating-point drift. The result is constrained to one decimal place.
+ */
+function normalizeToStep(value, step) {
+    const normalized = Math.round((value + Number.EPSILON) / step) * step;
+    return Number(normalized.toFixed(1));
+}
+/**
+ * Normalizes an externally supplied value for rendering and interaction.
+ * Non-finite values become `0`, out-of-range values are clamped to the
+ * valid domain, and the result is snapped to the active precision step.
+ */
+function normalizeRatingValue(value, itemsCount, precision) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return 0;
+    }
+    const clamped = Math.max(0, Math.min(itemsCount, value));
+    return Math.max(0, Math.min(itemsCount, normalizeToStep(clamped, getRatingStep(precision))));
+}
+/**
+ * Fill amount for one item in continuous selection mode: every item at or
+ * below the display value fills fully, one boundary item fills partially.
+ */
+function getContinuousItemFill(displayValue, itemValue) {
+    return Math.max(0, Math.min(1, displayValue - (itemValue - 1)));
+}
+/**
+ * Fill amount for one item in single selection mode: only the item
+ * representing the display value fills, possibly partially.
+ */
+function getSingleItemFill(displayValue, itemValue) {
+    if (displayValue === 0) {
+        return 0;
+    }
+    const activeItem = Math.ceil(displayValue);
+    if (itemValue !== activeItem) {
+        return 0;
+    }
+    return Math.max(0, Math.min(1, displayValue - (itemValue - 1)));
+}
+/**
+ * Converts a pointer position inside an item into a candidate rating value.
+ * Whole-item precision always selects the full item; half precision splits
+ * the item into two horizontal regions, honoring the effective text
+ * direction so the first visual half maps to the lower value.
+ */
+function getPointerRatingValue(args) {
+    const { clientX, direction, itemRect, itemValue, precision } = args;
+    if (precision === "item") {
+        return itemValue;
+    }
+    let ratio = (clientX - itemRect.left) / itemRect.width;
+    if (direction === "rtl") {
+        ratio = 1 - ratio;
+    }
+    return ratio <= 0.5 ? itemValue - 0.5 : itemValue;
+}
+
+const ratingIcons = {
+    circle: LucideCircle,
+    diamond: LucideDiamond,
+    flame: LucideFlame,
+    heart: LucideHeart,
+    star: LucideStar
+};
+class RatingComponent {
+    constructor() {
+        this.activeState = computed(() => this.previewActive() ? "hovered" : "selected", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+        this.containerClasses = computed(() => twMerge(ratingContainerThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        this.controlClasses = computed(() => ratingControlThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlClasses" }] : /* istanbul ignore next */ []));
+        this.controlElement = viewChild.required("ratingControl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlElement" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => this.previewValue() ?? this.normalizedValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaLabelledBy = computed(() => {
+            if (this.ariaLabelledBy()) {
+                return this.ariaLabelledBy();
+            }
+            if (!this.ariaLabel() && this.label()) {
+                return this.labelId;
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaLabelledBy" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaValueText = computed(() => {
+            const custom = this.ariaValueText();
+            if (custom) {
+                return custom(this.normalizedValue(), this.itemsCount());
+            }
+            return this.normalizedValue() === 0 ? "Not rated" : `${this.normalizedValue()} out of ${this.itemsCount()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaValueText" }] : /* istanbul ignore next */ []));
+        this.effectiveTabIndex = computed(() => (this.disabled() ? -1 : this.tabindex()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTabIndex" }] : /* istanbul ignore next */ []));
+        this.hoveredTemplate = contentChild(RatingHoveredItemTemplateDirective, { ...(ngDevMode ? { debugName: "hoveredTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.iconClasses = computed(() => ratingIconThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+        this.iconToRender = computed(() => ratingIcons[this.icon()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconToRender" }] : /* istanbul ignore next */ []));
+        this.interactionDisabled = computed(() => this.disabled() || this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
+        this.interactionStep = computed(() => getRatingStep(this.precision()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactionStep" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.itemClasses = computed(() => ratingItemThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(RatingItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.items = computed(() => range(1, this.itemsCount())
+            .select(itemValue => ({ index: itemValue - 1, itemValue }))
+            .toArray(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.labelClasses = computed(() => ratingLabelThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+        this.labelId = createElementControlId();
+        this.normalizedValue = computed(() => normalizeRatingValue(this.value(), this.itemsCount(), this.precision()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
+        this.overlayClipClasses = computed(() => ratingOverlayClipThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayClipClasses" }] : /* istanbul ignore next */ []));
+        this.overlayColor = computed(() => this.color() || "var(--color-primary)", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayColor" }] : /* istanbul ignore next */ []));
+        this.overlayContentClasses = computed(() => ratingOverlayContentThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayContentClasses" }] : /* istanbul ignore next */ []));
+        this.overlayIconClasses = computed(() => ratingOverlayIconThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayIconClasses" }] : /* istanbul ignore next */ []));
+        this.overlayTemplate = computed(() => this.activeState() === "hovered" ? this.hoveredTemplate() : this.selectedTemplate(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayTemplate" }] : /* istanbul ignore next */ []));
+        this.previewActive = computed(() => this.previewValue() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewActive" }] : /* istanbul ignore next */ []));
+        this.previewValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewValue" }] : /* istanbul ignore next */ []));
+        this.selectedTemplate = contentChild(RatingSelectedItemTemplateDirective, { ...(ngDevMode ? { debugName: "selectedTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Associates help text or an error description with the focusable rating control.
+         * @default null
+         */
+        this.ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @description Explicit accessible name for the rating control. Provide `aria-label`,
+         * `aria-labelledby`, or `label` so assistive technology can announce the control.
+         * @default null
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description IDs of external elements providing the accessible name for the rating control.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Custom screen-reader value announcement. Receives the normalized value and the
+         * item count and returns the string to expose through `aria-valuetext`.
+         * @default null
+         */
+        this.ariaValueText = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description CSS color for selected and hovered rating visuals. Empty, `null`, and `undefined` values use the
+         * primary theme color.
+         * @default undefined
+         */
+        this.color = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Disables pointer and keyboard interaction and removes the control from the tab
+         * sequence. When bound to a signal form field via `[formField]`, this is written by the signal
+         * forms `Field` directive.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Built-in icon used for the default rating visuals. Choose `star`, `heart`,
+         * `circle`, `diamond`, or `flame`; use item templates to supply a custom icon.
+         * @default "star"
+         */
+        this.icon = input("star", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the component as invalid. Error styling requires both `invalid` and
+         * `touched` to be `true`. When bound to a signal form field via `[formField]`, this is written
+         * by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Number of rating items. Fractional values are floored and values below one are
+         * raised to one.
+         * @default 5
+         */
+        this.itemsCount = input(5, { ...(ngDevMode ? { debugName: "itemsCount" } : /* istanbul ignore next */ {}), transform: normalizeItemsCount });
+        /**
+         * @description Optional visible label rendered before or after the rating items. When no
+         * explicit `aria-label` or `aria-labelledby` is supplied, the label provides the accessible
+         * name.
+         * @default null
+         */
+        this.label = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Places the visible label before or after the item group.
+         * @default "after"
+         */
+        this.labelPosition = input("after", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Selection granularity of the rating.
+         * @default "item"
+         */
+        this.precision = input("item", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving focusability and normal visual emphasis.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls cumulative or single-item filling.
+         * @default "continuous"
+         */
+        this.selection = input("continuous", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the icon dimensions, item hitboxes, spacing, and label
+         * typography.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index applied to the focusable rating control when not disabled. Accepts a
+         * numeric string and converts it to a number.
+         * @default 0
+         */
+        this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === "string" ? parseInt(value, 10) : value) });
+        /**
+         * @description Emitted when the user interacts with the control, marking the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the component as touched. When bound to a signal form field via
+         * `[formField]`, this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* 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 Current rating value. `0` represents an unrated state. Values are normalized
+         * for rendering but are not rewritten until the user interacts with the component.
+         * @default 0
+         */
+        this.value = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    blur() {
+        this.controlElement().nativeElement.blur();
+    }
+    focus(options) {
+        if (!this.disabled()) {
+            this.controlElement().nativeElement.focus(options);
+        }
+    }
+    createItemContext(item) {
+        return {
+            $implicit: item.index,
+            fill: this.getItemFill(item.itemValue),
+            hovered: this.previewActive(),
+            index: item.index,
+            itemValue: item.itemValue,
+            selected: !this.previewActive()
+        };
+    }
+    getItemFill(itemValue) {
+        const displayValue = this.displayValue();
+        if (this.selection() === "single") {
+            return getSingleItemFill(displayValue, itemValue);
+        }
+        return getContinuousItemFill(displayValue, itemValue);
+    }
+    onBlur() {
+        this.previewValue.set(null);
+        this.touch.emit();
+    }
+    onClick(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const candidate = this.getCandidateFromPointerEvent(event);
+        if (candidate === null) {
+            return;
+        }
+        const normalized = this.normalizeCandidate(candidate);
+        if (normalized !== this.normalizedValue()) {
+            this.value.set(normalized);
+        }
+        this.touch.emit();
+    }
+    onKeydown(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const action = this.getKeyAction(event.key);
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        this.previewValue.set(null);
+        const current = this.normalizedValue();
+        let next;
+        switch (action) {
+            case "decrease":
+                next = this.normalizeCandidate(current - this.interactionStep());
+                break;
+            case "end":
+                next = this.itemsCount();
+                break;
+            case "home":
+                next = 0;
+                break;
+            case "increase":
+                next = this.normalizeCandidate(current + this.interactionStep());
+                break;
+        }
+        if (next !== current) {
+            this.value.set(next);
+        }
+        this.touch.emit();
+    }
+    onPointerLeave() {
+        this.previewValue.set(null);
+    }
+    onPointerMove(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const candidate = this.getCandidateFromPointerEvent(event);
+        if (candidate !== null) {
+            this.previewValue.set(candidate);
+        }
+    }
+    getCandidateFromPointerEvent(event) {
+        const controlElement = this.controlElement().nativeElement;
+        const target = event.target;
+        const itemElement = target?.closest("[data-rating-index]") ?? null;
+        if (!itemElement || !controlElement.contains(itemElement)) {
+            return null;
+        }
+        const itemValue = Number(itemElement.getAttribute("data-rating-value"));
+        const itemRect = itemElement.getBoundingClientRect();
+        const direction = getComputedStyle(controlElement).direction === "rtl" ? "rtl" : "ltr";
+        return getPointerRatingValue({
+            clientX: event.clientX,
+            direction,
+            itemRect,
+            itemValue,
+            precision: this.precision()
+        });
+    }
+    getKeyAction(key) {
+        switch (key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                return "increase";
+            case "ArrowLeft":
+            case "ArrowDown":
+                return "decrease";
+            case "Home":
+                return "home";
+            case "End":
+                return "end";
+            default:
+                return null;
+        }
+    }
+    normalizeCandidate(value) {
+        return normalizeRatingValue(value, this.itemsCount(), this.precision());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RatingComponent, isStandalone: true, selector: "mona-rating", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", 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 }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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" }, queries: [{ propertyName: "hoveredTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "controlElement", first: true, predicate: ["ratingControl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n    @if (label() && labelPosition() === \"before\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n\n    <div\n        #ratingControl\n        role=\"slider\"\n        [class]=\"controlClasses()\"\n        [attr.tabindex]=\"effectiveTabIndex()\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"itemsCount()\"\n        [attr.aria-valuenow]=\"normalizedValue()\"\n        [attr.aria-valuetext]=\"effectiveAriaValueText()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"effectiveAriaLabelledBy()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-invalid]=\"invalidState() || null\"\n        [attr.data-disabled]=\"disabled() || null\"\n        [attr.data-readonly]=\"readonly() || null\"\n        [attr.data-invalid]=\"invalidState() || null\"\n        [attr.data-precision]=\"precision()\"\n        [attr.data-selection]=\"selection()\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerleave)=\"onPointerLeave()\"\n        (click)=\"onClick($event)\">\n        @for (item of items(); track item.itemValue) {\n            <span\n                [class]=\"itemClasses()\"\n                [attr.data-rating-index]=\"item.index\"\n                [attr.data-rating-value]=\"item.itemValue\"\n                aria-hidden=\"true\">\n                <span class=\"flex h-full w-full items-center justify-center\">\n                    @if (itemTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemTemplate()!\"\n                            [ngTemplateOutletContext]=\"createItemContext(item)\">\n                        </ng-container>\n                    } @else {\n                        <svg lucideIcon [lucideIcon]=\"iconToRender()\" [class]=\"iconClasses()\" fill=\"none\"></svg>\n                    }\n                </span>\n\n                @let fill = getItemFill(item.itemValue);\n\n                @if (fill > 0) {\n                    <span [class]=\"overlayClipClasses()\" [style.inline-size.%]=\"fill * 100\">\n                        <span\n                            [class]=\"overlayContentClasses()\"\n                            [attr.data-state]=\"activeState()\"\n                            [style.color]=\"disabled() ? null : overlayColor()\">\n                            @if (overlayTemplate()) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"overlayTemplate()!\"\n                                    [ngTemplateOutletContext]=\"createItemContext(item)\">\n                                </ng-container>\n                            } @else {\n                                <svg\n                                    lucideIcon\n                                    [lucideIcon]=\"iconToRender()\"\n                                    [class]=\"overlayIconClasses()\"\n                                    fill=\"currentColor\"></svg>\n                            }\n                        </span>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (label() && labelPosition() === \"after\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-rating", imports: [NgTemplateOutlet, LucideDynamicIcon], template: "<div [class]=\"containerClasses()\">\n    @if (label() && labelPosition() === \"before\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n\n    <div\n        #ratingControl\n        role=\"slider\"\n        [class]=\"controlClasses()\"\n        [attr.tabindex]=\"effectiveTabIndex()\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"itemsCount()\"\n        [attr.aria-valuenow]=\"normalizedValue()\"\n        [attr.aria-valuetext]=\"effectiveAriaValueText()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"effectiveAriaLabelledBy()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-invalid]=\"invalidState() || null\"\n        [attr.data-disabled]=\"disabled() || null\"\n        [attr.data-readonly]=\"readonly() || null\"\n        [attr.data-invalid]=\"invalidState() || null\"\n        [attr.data-precision]=\"precision()\"\n        [attr.data-selection]=\"selection()\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerleave)=\"onPointerLeave()\"\n        (click)=\"onClick($event)\">\n        @for (item of items(); track item.itemValue) {\n            <span\n                [class]=\"itemClasses()\"\n                [attr.data-rating-index]=\"item.index\"\n                [attr.data-rating-value]=\"item.itemValue\"\n                aria-hidden=\"true\">\n                <span class=\"flex h-full w-full items-center justify-center\">\n                    @if (itemTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemTemplate()!\"\n                            [ngTemplateOutletContext]=\"createItemContext(item)\">\n                        </ng-container>\n                    } @else {\n                        <svg lucideIcon [lucideIcon]=\"iconToRender()\" [class]=\"iconClasses()\" fill=\"none\"></svg>\n                    }\n                </span>\n\n                @let fill = getItemFill(item.itemValue);\n\n                @if (fill > 0) {\n                    <span [class]=\"overlayClipClasses()\" [style.inline-size.%]=\"fill * 100\">\n                        <span\n                            [class]=\"overlayContentClasses()\"\n                            [attr.data-state]=\"activeState()\"\n                            [style.color]=\"disabled() ? null : overlayColor()\">\n                            @if (overlayTemplate()) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"overlayTemplate()!\"\n                                    [ngTemplateOutletContext]=\"createItemContext(item)\">\n                                </ng-container>\n                            } @else {\n                                <svg\n                                    lucideIcon\n                                    [lucideIcon]=\"iconToRender()\"\n                                    [class]=\"overlayIconClasses()\"\n                                    fill=\"currentColor\"></svg>\n                            }\n                        </span>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (label() && labelPosition() === \"after\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n</div>\n" }]
+        }], propDecorators: { controlElement: [{ type: i0.ViewChild, args: ["ratingControl", { isSignal: true }] }], hoveredTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingHoveredItemTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingSelectedItemTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", 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 }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsCount", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", 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/rating
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-rating.mjs.map

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

@@ -1,9 +1,31 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, output, model, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, computed, contentChild, input, output, model, 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
         ${themeControlSurfaceClasses}
@@ -78,6 +100,7 @@ class SegmentedComponent {
         ...(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();
@@ -148,6 +171,15 @@ class SegmentedComponent {
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
+    createOptionContext(option, index) {
+        return {
+            $implicit: option,
+            disabled: this.disabled() || !!option.disabled,
+            index,
+            option,
+            selected: option.value === this.value()
+        };
+    }
     onOptionBlur() {
         this.touch.emit();
     }
@@ -159,11 +191,11 @@ class SegmentedComponent {
         this.touch.emit();
     }
     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: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 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 +204,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: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n" }]
+        }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/segmented
@@ -183,5 +215,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.11.4",
+  "version": "0.13.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -261,6 +261,10 @@
       "types": "./types/nanahoshi-mona-ui-radio-button.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-radio-button.mjs"
     },
+    "./rating": {
+      "types": "./types/nanahoshi-mona-ui-rating.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-rating.mjs"
+    },
     "./scroll-view": {
       "types": "./types/nanahoshi-mona-ui-scroll-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-scroll-view.mjs"

package/rating/package.json

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

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

@@ -0,0 +1,295 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { LucideCircle, LucideDiamond, LucideFlame, LucideHeart, LucideStar } from '@lucide/angular';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+/**
+ * @description Rendering context passed to the default, selected, and hovered item templates.
+ */
+interface RatingItemTemplateContext {
+    /**
+     * Zero-based item index.
+     */
+    readonly $implicit: number;
+    /**
+     * Zero-based item index.
+     */
+    readonly index: number;
+    /**
+     * One-based value represented by this item.
+     */
+    readonly itemValue: number;
+    /**
+     * Visible fill amount between 0 and 1.
+     */
+    readonly fill: number;
+    /**
+     * Whether the visible state comes from the committed value.
+     */
+    readonly selected: boolean;
+    /**
+     * Whether the visible state comes from pointer preview.
+     */
+    readonly hovered: boolean;
+}
+
+/**
+ * @description Built-in icon names available for the default rating visuals.
+ */
+type RatingIconName = "circle" | "diamond" | "flame" | "heart" | "star";
+
+/**
+ * @description Position of the visible label relative to the rating items.
+ * @default "after"
+ */
+type RatingLabelPosition = "before" | "after";
+
+/**
+ * @description Selection granularity of the rating. `"item"` selects whole items, `"half"` selects
+ * half-item increments.
+ * @default "item"
+ */
+type RatingPrecision = "item" | "half";
+
+/**
+ * @description How the selected value is visualized across the items. `"continuous"` fills every
+ * item up to the selected value, `"single"` fills only the item representing the selected value.
+ * @default "continuous"
+ */
+type RatingSelectionMode = "continuous" | "single";
+
+declare const ratingContainerThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const ratingControlThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingItemThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingIconThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingOverlayClipThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const ratingOverlayContentThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingLabelThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RatingContainerVariantProps = VariantProps<typeof ratingContainerThemeVariants>;
+type RatingContainerVariantInput = VariantInputs<RatingContainerVariantProps>;
+type RatingControlVariantProps = VariantProps<typeof ratingControlThemeVariants>;
+type RatingControlVariantInput = VariantInputs<RatingControlVariantProps>;
+type RatingItemVariantProps = VariantProps<typeof ratingItemThemeVariants>;
+type RatingItemVariantInput = VariantInputs<RatingItemVariantProps>;
+type RatingIconVariantProps = VariantProps<typeof ratingIconThemeVariants>;
+type RatingIconVariantInput = VariantInputs<RatingIconVariantProps>;
+type RatingOverlayClipVariantProps = VariantProps<typeof ratingOverlayClipThemeVariants>;
+type RatingOverlayClipVariantInput = VariantInputs<RatingOverlayClipVariantProps>;
+type RatingOverlayContentVariantProps = VariantProps<typeof ratingOverlayContentThemeVariants>;
+type RatingOverlayContentVariantInput = VariantInputs<RatingOverlayContentVariantProps>;
+type RatingLabelVariantProps = VariantProps<typeof ratingLabelThemeVariants>;
+type RatingLabelVariantInput = VariantInputs<RatingLabelVariantProps>;
+type RatingVariantProps = RatingContainerVariantProps & RatingControlVariantProps & RatingItemVariantProps & RatingIconVariantProps & RatingOverlayClipVariantProps & RatingOverlayContentVariantProps & RatingLabelVariantProps;
+type RatingVariantInput = RatingContainerVariantInput & RatingControlVariantInput & RatingItemVariantInput & RatingIconVariantInput & RatingOverlayClipVariantInput & RatingOverlayContentVariantInput & RatingLabelVariantInput;
+
+interface RatingItemDescriptor {
+    readonly index: number;
+    readonly itemValue: number;
+}
+declare class RatingComponent implements RatingVariantInput, FormValueControl<number> {
+    protected readonly activeState: _angular_core.Signal<"hovered" | "selected">;
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected readonly controlClasses: _angular_core.Signal<string>;
+    protected readonly controlElement: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected readonly displayValue: _angular_core.Signal<number>;
+    protected readonly effectiveAriaLabelledBy: _angular_core.Signal<string | null>;
+    protected readonly effectiveAriaValueText: _angular_core.Signal<string>;
+    protected readonly effectiveTabIndex: _angular_core.Signal<number>;
+    protected readonly hoveredTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    protected readonly iconToRender: _angular_core.Signal<typeof LucideCircle | typeof LucideDiamond | typeof LucideFlame | typeof LucideHeart | typeof LucideStar>;
+    protected readonly interactionDisabled: _angular_core.Signal<boolean>;
+    protected readonly interactionStep: _angular_core.Signal<number>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly itemClasses: _angular_core.Signal<string>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly items: _angular_core.Signal<readonly RatingItemDescriptor[]>;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly labelId: string;
+    protected readonly normalizedValue: _angular_core.Signal<number>;
+    protected readonly overlayClipClasses: _angular_core.Signal<string>;
+    protected readonly overlayColor: _angular_core.Signal<string>;
+    protected readonly overlayContentClasses: _angular_core.Signal<string>;
+    protected readonly overlayIconClasses: _angular_core.Signal<string>;
+    protected readonly overlayTemplate: _angular_core.Signal<TemplateRef<RatingItemTemplateContext> | undefined>;
+    protected readonly previewActive: _angular_core.Signal<boolean>;
+    protected readonly previewValue: _angular_core.WritableSignal<number | null>;
+    protected readonly selectedTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Associates help text or an error description with the focusable rating control.
+     * @default null
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Explicit accessible name for the rating control. Provide `aria-label`,
+     * `aria-labelledby`, or `label` so assistive technology can announce the control.
+     * @default null
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * @description IDs of external elements providing the accessible name for the rating control.
+     * @default null
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Custom screen-reader value announcement. Receives the normalized value and the
+     * item count and returns the string to expose through `aria-valuetext`.
+     * @default null
+     */
+    readonly ariaValueText: _angular_core.InputSignal<((value: number, maximum: number) => string) | null>;
+    /**
+     * @description CSS color for selected and hovered rating visuals. Empty, `null`, and `undefined` values use the
+     * primary theme color.
+     * @default undefined
+     */
+    readonly color: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * @description Disables pointer and keyboard interaction and removes the control from the tab
+     * sequence. When bound to a signal form field via `[formField]`, this is written by the signal
+     * forms `Field` directive.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Built-in icon used for the default rating visuals. Choose `star`, `heart`,
+     * `circle`, `diamond`, or `flame`; use item templates to supply a custom icon.
+     * @default "star"
+     */
+    readonly icon: _angular_core.InputSignal<RatingIconName>;
+    /**
+     * @description Marks the component as invalid. Error styling requires both `invalid` and
+     * `touched` to be `true`. When bound to a signal form field via `[formField]`, this is written
+     * by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Number of rating items. Fractional values are floored and values below one are
+     * raised to one.
+     * @default 5
+     */
+    readonly itemsCount: _angular_core.InputSignalWithTransform<number, number>;
+    /**
+     * @description Optional visible label rendered before or after the rating items. When no
+     * explicit `aria-label` or `aria-labelledby` is supplied, the label provides the accessible
+     * name.
+     * @default null
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Places the visible label before or after the item group.
+     * @default "after"
+     */
+    readonly labelPosition: _angular_core.InputSignal<RatingLabelPosition>;
+    /**
+     * @description Selection granularity of the rating.
+     * @default "item"
+     */
+    readonly precision: _angular_core.InputSignal<RatingPrecision>;
+    /**
+     * @description Prevents value changes while preserving focusability and normal visual emphasis.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Controls cumulative or single-item filling.
+     * @default "continuous"
+     */
+    readonly selection: _angular_core.InputSignal<RatingSelectionMode>;
+    /**
+     * @description Size preset controlling the icon dimensions, item hitboxes, spacing, and label
+     * typography.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Tab index applied to the focusable rating control when not disabled. Accepts a
+     * numeric string and converts it to a number.
+     * @default 0
+     */
+    readonly tabindex: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * @description Emitted when the user interacts with the control, marking the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the component as touched. When bound to a signal form field via
+     * `[formField]`, this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Current rating value. `0` represents an unrated state. Values are normalized
+     * for rendering but are not rewritten until the user interacts with the component.
+     * @default 0
+     */
+    readonly value: _angular_core.ModelSignal<number>;
+    blur(): void;
+    focus(options?: FocusOptions): void;
+    protected createItemContext(item: RatingItemDescriptor): RatingItemTemplateContext;
+    protected getItemFill(itemValue: number): number;
+    protected onBlur(): void;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onPointerLeave(): void;
+    protected onPointerMove(event: PointerEvent): void;
+    private getCandidateFromPointerEvent;
+    private getKeyAction;
+    private normalizeCandidate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "mona-rating", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "ariaValueText"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemsCount": { "alias": "itemsCount"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "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"; }, ["hoveredTemplate", "itemTemplate", "selectedTemplate"], never, true, never>;
+}
+
+/**
+ * @description Renders the pointer-preview visual for rating items. Overrides the default preset
+ * overlay whenever the visible state comes from pointer preview.
+ */
+declare class RatingHoveredItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingHoveredItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingHoveredItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingHoveredItemTemplateDirective, "ng-template[monaRatingHoveredItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description Renders the default (unselected) visual for every rating item. Overrides the
+ * default preset icon for the base layer of each item.
+ */
+declare class RatingItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingItemTemplateDirective, "ng-template[monaRatingItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description Renders the committed selected visual for rating items. Overrides the default
+ * preset overlay whenever the visible state comes from the committed value.
+ */
+declare class RatingSelectedItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingSelectedItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingSelectedItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingSelectedItemTemplateDirective, "ng-template[monaRatingSelectedItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
+export type { RatingIconName, RatingItemTemplateContext, RatingLabelPosition, RatingPrecision, RatingSelectionMode, RatingVariantProps };

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

@@ -1,8 +1,10 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } 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';
 
 type SegmentedValue = string | number;
 
@@ -12,6 +14,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;
@@ -31,6 +59,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected readonly groupName: string;
     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>;
     /**
      * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
@@ -88,11 +117,23 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
      * @default null
      */
     readonly value: _angular_core.ModelSignal<T | null>;
+    protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
     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, { "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 };