@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-radio.mjs

@@ -0,0 +1,317 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, Renderer2, HostAttributeToken, input, signal, computed, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, model, contentChildren, DestroyRef, effect, untracked, forwardRef } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { UP_ARROW, LEFT_ARROW, DOWN_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { MlvSignalFormControlBase, MlvLabel, MlvDescription, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { mlvNextId, MlvRtlService } from '@malva-ui/cdk/utils';
+
+const RADIO_GROUP = new InjectionToken('RADIO_GROUP');
+
+class MlvRadio {
+    /** @private Optional parent radio group accessor injected via `RADIO_GROUP`. */
+    _group = inject(RADIO_GROUP, {
+        optional: true,
+    });
+    /** @private Host element reference, used to strip the moved ARIA attributes. */
+    _elementRef = inject((ElementRef));
+    /** @private Renderer used to imperatively remove host ARIA attributes. */
+    _renderer = inject(Renderer2);
+    /**
+     * @private The `aria-label` a consumer placed directly on the `<mlv-radio>`
+     * host, captured before host bindings run. The host is role-less, so ARIA
+     * prohibits an `aria-label` there (axe `aria-prohibited-attr`); it is moved to
+     * the inner `<input type="radio">` instead (see the constructor).
+     */
+    _hostAriaLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    /**
+     * @private The `aria-labelledby` a consumer placed directly on the
+     * `<mlv-radio>` host, captured before host bindings run. Moved to the inner
+     * input for the same reason as {@link _hostAriaLabel}.
+     */
+    _hostAriaLabelledBy = inject(new HostAttributeToken('aria-labelledby'), { optional: true });
+    /**
+     * Accessible name applied to the inner native input (`aria-label`). Use this
+     * input (not a host `[attr.aria-label]` binding) when the label is dynamic —
+     * the role-less host must not carry ARIA naming attributes
+     * (axe `aria-prohibited-attr`). A static host `aria-label` attribute is also
+     * supported and forwarded automatically (see the constructor); this input
+     * takes precedence when both are present.
+     */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Id reference(s) naming the inner native input (`aria-labelledby`). Same
+     * rationale and precedence as {@link ariaLabel}.
+     */
+    ariaLabelledBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal The accessible name forwarded onto the native input, sourced from a
+     * host `aria-label`. `null` when the consumer supplied none, so no empty
+     * `aria-label` is emitted on the input (and any group-provided naming is left
+     * untouched).
+     */
+    _ariaLabel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal The `aria-labelledby` forwarded onto the native input, sourced from
+     * a host `aria-labelledby`. `null` when the consumer supplied none.
+     */
+    _ariaLabelledBy = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal The final `aria-label` for the native input: the `ariaLabel` input
+     * wins over a captured static host attribute; `null` emits no attribute.
+     */
+    _resolvedAriaLabel = computed(() => this.ariaLabel() ?? this._ariaLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal The final `aria-labelledby` for the native input, with the same
+     * precedence as {@link _resolvedAriaLabel}.
+     */
+    _resolvedAriaLabelledBy = computed(() => this.ariaLabelledBy() ?? this._ariaLabelledBy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabelledBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // A host `aria-label`/`aria-labelledby` lands on the role-less custom
+        // element (axe `aria-prohibited-attr`). Move it onto the inner input — the
+        // component's real accessible-name target — and strip it from the host. The
+        // signals stay `null` when nothing was supplied, so the `[attr.*]` bindings
+        // omit the attribute and never clobber a group-provided labelling mechanism.
+        const host = this._elementRef.nativeElement;
+        if (this._hostAriaLabel !== null) {
+            this._ariaLabel.set(this._hostAriaLabel);
+            this._renderer.removeAttribute(host, 'aria-label');
+        }
+        if (this._hostAriaLabelledBy !== null) {
+            this._ariaLabelledBy.set(this._hostAriaLabelledBy);
+            this._renderer.removeAttribute(host, 'aria-labelledby');
+        }
+    }
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    checked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    name = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Roving tabindex applied to the native `<input type="radio">` — the single
+     * focus target. `0` for the tabbable radio, `-1` for the rest. Managed by
+     * `MlvRadioGroup`.
+     */
+    tabIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Reference to the visually-hidden native radio input, which is the
+     * focus target (kept in the a11y tree via the clip-path pattern so native
+     * radio semantics — Space selection, grouping — are preserved).
+     */
+    _nativeInput = viewChild.required('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeInput" }] : /* istanbul ignore next */ []));
+    /**
+     * Moves focus to the native radio input. Satisfies CDK `FocusableOption` so
+     * the group's `FocusKeyManager` focuses the input rather than the host.
+     */
+    focus() {
+        this._nativeInput().nativeElement.focus();
+    }
+    /** @internal Notifies the parent group when the native input gains focus. */
+    onFocus() {
+        this._group?.onChildFocus(this);
+    }
+    /** @internal Handles native selection (click, Space, native arrow keys). */
+    onSelect() {
+        if (this.disabled())
+            return;
+        this._group?.selectRadio(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvRadio, isStandalone: true, selector: "mlv-radio", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-radio--checked": "checked()", "class.mlv-radio--disabled": "disabled()" }, classAttribute: "mlv-radio" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"mlv-radio__label\">\n  <input\n    #nativeInput\n    type=\"radio\"\n    class=\"mlv-radio__native\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.tabindex]=\"tabIndex()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"_resolvedAriaLabelledBy()\"\n    (change)=\"onSelect()\"\n    (focus)=\"onFocus()\"\n  />\n  <span class=\"mlv-radio__visual\"></span>\n  <span class=\"mlv-radio__text\">\n    <ng-content />\n  </span>\n</label>\n", styles: ["@layer mlv.components{.mlv-radio{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-radio *{box-sizing:border-box}.mlv-radio{color:var(--mlv-text-primary);--mlv-radio-border: var(--mlv-border-normal);--mlv-radio-bg: var(--mlv-background-accent-1);--mlv-radio-opacity: 0;--mlv-radio-transform: scale(.5);outline:none}[class*=--tight] .mlv-radio:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-radio[class*=--tight]{font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-radio:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-radio[class*=--compact]{font-size:var(--mlv-font-size-m)}[class*=--spacious] .mlv-radio:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-radio[class*=--spacious]{font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-radio:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-radio[class*=--airy]{font-size:var(--mlv-font-size-xl)}.mlv-radio__native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.mlv-radio__native:focus-visible+.mlv-radio__visual{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset);--mlv-radio-border: var(--mlv-border-focus)}.mlv-radio__label{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);cursor:pointer}.mlv-radio__visual{display:block;width:1.25rem;height:1.25rem;border-radius:var(--mlv-radius-full);border:.0625rem solid var(--mlv-radio-border);transition:border-color var(--mlv-duration-fast) var(--mlv-ease-default);position:relative}.mlv-radio__visual:before{content:\"\";width:.75rem;height:.75rem;top:.1875rem;inset-inline-start:.1875rem;position:absolute;background:var(--mlv-radio-bg);border-radius:var(--mlv-radius-full);opacity:var(--mlv-radio-opacity);transform:var(--mlv-radio-transform);transition-property:background-color,border-color,transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default)}.mlv-radio--checked{--mlv-radio-opacity: 1;--mlv-radio-transform: scale(1)}.mlv-radio--disabled{cursor:not-allowed;pointer-events:none;opacity:var(--mlv-disabled-opacity)}.mlv-radio:not(:focus) .mlv-radio__label:hover{--mlv-radio-border: var(--mlv-border-strong);--mlv-radio-bg: var(--mlv-background-accent-1-hover)}@media(prefers-reduced-motion:reduce){.mlv-radio,.mlv-radio *,.mlv-radio:before,.mlv-radio:after,[class^=mlv-radio__],[class*=\" mlv-radio__\"],[class^=mlv-radio--],[class*=\" mlv-radio--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-radio',
+                        '[class.mlv-radio--checked]': 'checked()',
+                        '[class.mlv-radio--disabled]': 'disabled()',
+                    }, template: "<label class=\"mlv-radio__label\">\n  <input\n    #nativeInput\n    type=\"radio\"\n    class=\"mlv-radio__native\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.tabindex]=\"tabIndex()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"_resolvedAriaLabelledBy()\"\n    (change)=\"onSelect()\"\n    (focus)=\"onFocus()\"\n  />\n  <span class=\"mlv-radio__visual\"></span>\n  <span class=\"mlv-radio__text\">\n    <ng-content />\n  </span>\n</label>\n", styles: ["@layer mlv.components{.mlv-radio{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-radio *{box-sizing:border-box}.mlv-radio{color:var(--mlv-text-primary);--mlv-radio-border: var(--mlv-border-normal);--mlv-radio-bg: var(--mlv-background-accent-1);--mlv-radio-opacity: 0;--mlv-radio-transform: scale(.5);outline:none}[class*=--tight] .mlv-radio:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-radio[class*=--tight]{font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-radio:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-radio[class*=--compact]{font-size:var(--mlv-font-size-m)}[class*=--spacious] .mlv-radio:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-radio[class*=--spacious]{font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-radio:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-radio[class*=--airy]{font-size:var(--mlv-font-size-xl)}.mlv-radio__native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.mlv-radio__native:focus-visible+.mlv-radio__visual{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset);--mlv-radio-border: var(--mlv-border-focus)}.mlv-radio__label{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);cursor:pointer}.mlv-radio__visual{display:block;width:1.25rem;height:1.25rem;border-radius:var(--mlv-radius-full);border:.0625rem solid var(--mlv-radio-border);transition:border-color var(--mlv-duration-fast) var(--mlv-ease-default);position:relative}.mlv-radio__visual:before{content:\"\";width:.75rem;height:.75rem;top:.1875rem;inset-inline-start:.1875rem;position:absolute;background:var(--mlv-radio-bg);border-radius:var(--mlv-radius-full);opacity:var(--mlv-radio-opacity);transform:var(--mlv-radio-transform);transition-property:background-color,border-color,transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default)}.mlv-radio--checked{--mlv-radio-opacity: 1;--mlv-radio-transform: scale(1)}.mlv-radio--disabled{cursor:not-allowed;pointer-events:none;opacity:var(--mlv-disabled-opacity)}.mlv-radio:not(:focus) .mlv-radio__label:hover{--mlv-radio-border: var(--mlv-border-strong);--mlv-radio-bg: var(--mlv-background-accent-1-hover)}@media(prefers-reduced-motion:reduce){.mlv-radio,.mlv-radio *,.mlv-radio:before,.mlv-radio:after,[class^=mlv-radio__],[class*=\" mlv-radio__\"],[class^=mlv-radio--],[class*=\" mlv-radio--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }] } });
+
+class MlvRadioGroup extends MlvSignalFormControlBase {
+    /** Two-way bindable selected value of the group. */
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Shared `name` applied to the native radio inputs in the group. */
+    name = input(mlvNextId('mlv-radio-group'), { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), transform: (value) => value ?? mlvNextId('mlv-radio-group') });
+    radios = contentChildren(MlvRadio, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
+    /** @private FocusKeyManager driving roving focus + arrow-key navigation across the radios. */
+    _keyManager;
+    /** @private Normalizes horizontal radio navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    constructor() {
+        super();
+        inject(DestroyRef).onDestroy(() => this._keyManager?.destroy());
+        effect(() => {
+            const items = [...this.radios()];
+            const groupName = this.name();
+            if (items.length === 0)
+                return;
+            this._keyManager?.destroy();
+            this._keyManager = new FocusKeyManager(items)
+                .skipPredicate((radio) => radio.disabled())
+                .withVerticalOrientation()
+                .withWrap();
+            items.forEach((radio) => radio.name.set(groupName));
+            untracked(() => this._updateSelection());
+        });
+        effect(() => {
+            this.value();
+            untracked(() => this._updateSelection());
+        });
+    }
+    onChildFocus(radio) {
+        const index = this.radios().indexOf(radio);
+        if (index >= 0) {
+            this._keyManager.setActiveItem(index);
+        }
+    }
+    /**
+     * @protected Host keydown handler. Handles all four arrow keys for WAI-ARIA
+     * radiogroup semantics, moving focus + selection via the FocusKeyManager.
+     */
+    _onKeydown(event) {
+        const key = this._rtlService.normalizeArrowKey(event);
+        const isPrev = key === UP_ARROW || key === LEFT_ARROW;
+        const isNext = key === DOWN_ARROW || key === RIGHT_ARROW;
+        if (!isPrev && !isNext)
+            return;
+        // Handle all four arrows for WAI-ARIA radiogroup semantics and suppress the
+        // native radio-group navigation so focus + selection stay in sync with the
+        // FocusKeyManager (which skips disabled radios and wraps).
+        event.preventDefault();
+        if (!this._keyManager.activeItem) {
+            this._keyManager.setFirstItemActive();
+        }
+        else if (isPrev) {
+            this._keyManager.setPreviousItemActive();
+        }
+        else {
+            this._keyManager.setNextItemActive();
+        }
+        const active = this._keyManager.activeItem;
+        if (active) {
+            this.selectRadio(active);
+        }
+    }
+    selectRadio(radio) {
+        if (this.computedDisabled() || this.readonly())
+            return;
+        this.value.set(radio.value());
+        radio.focus();
+        const radioValue = radio.value();
+        this.radios().forEach((r) => r.checked.set(r.value() === radioValue));
+        this._updateTabIndices();
+        this._markTouched();
+    }
+    /** Whether the control holds a clearable value — A radio value is selected. */
+    hasValue = computed(() => this.value() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @private Syncs each radio's checked state to the current group value and refreshes tab indices. */
+    _updateSelection() {
+        this.radios().forEach((radio) => {
+            radio.checked.set(radio.value() === this.value());
+        });
+        this._updateTabIndices();
+    }
+    /** @private Applies the roving tabindex: only the checked radio (or first when none checked) is tabbable. */
+    _updateTabIndices() {
+        const radios = this.radios();
+        const hasChecked = radios.some((r) => r.checked());
+        radios.forEach((radio, i) => {
+            radio.tabIndex.set(hasChecked ? (radio.checked() ? 0 : -1) : i === 0 ? 0 : -1);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvRadioGroup, isStandalone: true, selector: "mlv-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "_onKeydown($event)" }, properties: { "class": "\"mlv-radio-group--state-\" + resolvedState()", "class.mlv-radio-group--disabled": "computedDisabled()", "class.mlv-radio-group--readonly": "readonly()", "attr.id": "id()", "attr.aria-label": "ariaLabel() ?? label()", "attr.aria-required": "required() || null", "attr.aria-describedby": "_describedBy()", "attr.aria-disabled": "computedDisabled() || null" }, classAttribute: "mlv-radio-group" }, providers: [
+            {
+                provide: RADIO_GROUP,
+                useExisting: forwardRef(() => MlvRadioGroup),
+            },
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvRadioGroup),
+            },
+        ], queries: [{ propertyName: "radios", predicate: MlvRadio, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (label()) {
+      <mlv-label [required]="required()">
+        {{ label() }}
+      </mlv-label>
+    }
+    <div class="mlv-radio-group__content">
+      <ng-content />
+    </div>
+    @if (description()) {
+      <mlv-description [id]="_descriptionId()">{{
+        description()
+      }}</mlv-description>
+    }
+    @if (message()) {
+      <mlv-message [id]="_messageId()" [state]="resolvedState()">{{
+        message()
+      }}</mlv-message>
+    }
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-radio-group,.mlv-radio-group__content{display:flex;flex-direction:column;gap:var(--mlv-spacing-2)}.mlv-radio-group--disabled .mlv-radio-group__content{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-radio-group--readonly .mlv-radio-group__content{cursor:default}.mlv-radio-group--state-error .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-error);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-warning .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-warning);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-success .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-success);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-info .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-info);padding-inline-start:var(--mlv-spacing-3)}}\n"], dependencies: [{ kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-radio-group', template: `
+    @if (label()) {
+      <mlv-label [required]="required()">
+        {{ label() }}
+      </mlv-label>
+    }
+    <div class="mlv-radio-group__content">
+      <ng-content />
+    </div>
+    @if (description()) {
+      <mlv-description [id]="_descriptionId()">{{
+        description()
+      }}</mlv-description>
+    }
+    @if (message()) {
+      <mlv-message [id]="_messageId()" [state]="resolvedState()">{{
+        message()
+      }}</mlv-message>
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: RADIO_GROUP,
+                            useExisting: forwardRef(() => MlvRadioGroup),
+                        },
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvRadioGroup),
+                        },
+                    ], imports: [MlvLabel, MlvDescription, MlvMessage], host: {
+                        class: 'mlv-radio-group',
+                        '[class]': '"mlv-radio-group--state-" + resolvedState()',
+                        '[class.mlv-radio-group--disabled]': 'computedDisabled()',
+                        '[class.mlv-radio-group--readonly]': 'readonly()',
+                        '[attr.id]': 'id()',
+                        role: 'radiogroup',
+                        '[attr.aria-label]': 'ariaLabel() ?? label()',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-describedby]': '_describedBy()',
+                        '[attr.aria-disabled]': 'computedDisabled() || null',
+                        '(keydown)': '_onKeydown($event)',
+                    }, styles: ["@layer mlv.components{.mlv-radio-group,.mlv-radio-group__content{display:flex;flex-direction:column;gap:var(--mlv-spacing-2)}.mlv-radio-group--disabled .mlv-radio-group__content{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-radio-group--readonly .mlv-radio-group__content{cursor:default}.mlv-radio-group--state-error .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-error);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-warning .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-warning);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-success .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-success);padding-inline-start:var(--mlv-spacing-3)}.mlv-radio-group--state-info .mlv-radio-group__content{border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-info);padding-inline-start:var(--mlv-spacing-3)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvRadio), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvRadio, MlvRadioGroup };
+//# sourceMappingURL=malva-ui-core-radio.mjs.map

package/fesm2022/malva-ui-core-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-radio.mjs","sources":["../../../../libs/core/radio/src/lib/radio-group-token.ts","../../../../libs/core/radio/src/lib/radio/radio.ts","../../../../libs/core/radio/src/lib/radio/radio.html","../../../../libs/core/radio/src/lib/radio-group/radio-group.ts","../../../../libs/core/radio/src/malva-ui-core-radio.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport type { MlvRadio } from './radio/radio';\n\nexport interface MlvRadioGroupAccessor {\n  selectRadio(radio: MlvRadio): void;\n  onChildFocus(radio: MlvRadio): void;\n}\n\nexport const RADIO_GROUP = new InjectionToken<MlvRadioGroupAccessor>(\n  'RADIO_GROUP',\n);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport type { MlvRadioGroupAccessor } from '../radio-group-token';\nimport { RADIO_GROUP } from '../radio-group-token';\n\n@Component({\n  selector: 'mlv-radio',\n  templateUrl: './radio.html',\n  styleUrl: './radio.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-radio',\n    '[class.mlv-radio--checked]': 'checked()',\n    '[class.mlv-radio--disabled]': 'disabled()',\n  },\n})\nexport class MlvRadio {\n  /** @private Optional parent radio group accessor injected via `RADIO_GROUP`. */\n  private readonly _group = inject<MlvRadioGroupAccessor>(RADIO_GROUP, {\n    optional: true,\n  });\n\n  /** @private Host element reference, used to strip the moved ARIA attributes. */\n  private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n  /** @private Renderer used to imperatively remove host ARIA attributes. */\n  private readonly _renderer = inject(Renderer2);\n\n  /**\n   * @private The `aria-label` a consumer placed directly on the `<mlv-radio>`\n   * host, captured before host bindings run. The host is role-less, so ARIA\n   * prohibits an `aria-label` there (axe `aria-prohibited-attr`); it is moved to\n   * the inner `<input type=\"radio\">` instead (see the constructor).\n   */\n  private readonly _hostAriaLabel = inject(\n    new HostAttributeToken('aria-label'),\n    { optional: true },\n  );\n\n  /**\n   * @private The `aria-labelledby` a consumer placed directly on the\n   * `<mlv-radio>` host, captured before host bindings run. Moved to the inner\n   * input for the same reason as {@link _hostAriaLabel}.\n   */\n  private readonly _hostAriaLabelledBy = inject(\n    new HostAttributeToken('aria-labelledby'),\n    { optional: true },\n  );\n\n  /**\n   * Accessible name applied to the inner native input (`aria-label`). Use this\n   * input (not a host `[attr.aria-label]` binding) when the label is dynamic —\n   * the role-less host must not carry ARIA naming attributes\n   * (axe `aria-prohibited-attr`). A static host `aria-label` attribute is also\n   * supported and forwarded automatically (see the constructor); this input\n   * takes precedence when both are present.\n   */\n  readonly ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Id reference(s) naming the inner native input (`aria-labelledby`). Same\n   * rationale and precedence as {@link ariaLabel}.\n   */\n  readonly ariaLabelledBy = input<string | undefined>(undefined);\n\n  /**\n   * @internal The accessible name forwarded onto the native input, sourced from a\n   * host `aria-label`. `null` when the consumer supplied none, so no empty\n   * `aria-label` is emitted on the input (and any group-provided naming is left\n   * untouched).\n   */\n  readonly _ariaLabel = signal<string | null>(null);\n\n  /**\n   * @internal The `aria-labelledby` forwarded onto the native input, sourced from\n   * a host `aria-labelledby`. `null` when the consumer supplied none.\n   */\n  readonly _ariaLabelledBy = signal<string | null>(null);\n\n  /**\n   * @internal The final `aria-label` for the native input: the `ariaLabel` input\n   * wins over a captured static host attribute; `null` emits no attribute.\n   */\n  readonly _resolvedAriaLabel = computed(\n    () => this.ariaLabel() ?? this._ariaLabel(),\n  );\n\n  /**\n   * @internal The final `aria-labelledby` for the native input, with the same\n   * precedence as {@link _resolvedAriaLabel}.\n   */\n  readonly _resolvedAriaLabelledBy = computed(\n    () => this.ariaLabelledBy() ?? this._ariaLabelledBy(),\n  );\n\n  constructor() {\n    // A host `aria-label`/`aria-labelledby` lands on the role-less custom\n    // element (axe `aria-prohibited-attr`). Move it onto the inner input — the\n    // component's real accessible-name target — and strip it from the host. The\n    // signals stay `null` when nothing was supplied, so the `[attr.*]` bindings\n    // omit the attribute and never clobber a group-provided labelling mechanism.\n    const host = this._elementRef.nativeElement;\n    if (this._hostAriaLabel !== null) {\n      this._ariaLabel.set(this._hostAriaLabel);\n      this._renderer.removeAttribute(host, 'aria-label');\n    }\n    if (this._hostAriaLabelledBy !== null) {\n      this._ariaLabelledBy.set(this._hostAriaLabelledBy);\n      this._renderer.removeAttribute(host, 'aria-labelledby');\n    }\n  }\n\n  readonly value = input<unknown>();\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n  readonly checked = signal(false);\n  readonly name = signal('');\n\n  /**\n   * Roving tabindex applied to the native `<input type=\"radio\">` — the single\n   * focus target. `0` for the tabbable radio, `-1` for the rest. Managed by\n   * `MlvRadioGroup`.\n   */\n  readonly tabIndex = signal(0);\n\n  /**\n   * @private Reference to the visually-hidden native radio input, which is the\n   * focus target (kept in the a11y tree via the clip-path pattern so native\n   * radio semantics — Space selection, grouping — are preserved).\n   */\n  private readonly _nativeInput =\n    viewChild.required<ElementRef<HTMLInputElement>>('nativeInput');\n\n  /**\n   * Moves focus to the native radio input. Satisfies CDK `FocusableOption` so\n   * the group's `FocusKeyManager` focuses the input rather than the host.\n   */\n  focus(): void {\n    this._nativeInput().nativeElement.focus();\n  }\n\n  /** @internal Notifies the parent group when the native input gains focus. */\n  onFocus(): void {\n    this._group?.onChildFocus(this);\n  }\n\n  /** @internal Handles native selection (click, Space, native arrow keys). */\n  onSelect(): void {\n    if (this.disabled()) return;\n    this._group?.selectRadio(this);\n  }\n}\n","<label class=\"mlv-radio__label\">\n  <input\n    #nativeInput\n    type=\"radio\"\n    class=\"mlv-radio__native\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.tabindex]=\"tabIndex()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"_resolvedAriaLabelledBy()\"\n    (change)=\"onSelect()\"\n    (focus)=\"onFocus()\"\n  />\n  <span class=\"mlv-radio__visual\"></span>\n  <span class=\"mlv-radio__text\">\n    <ng-content />\n  </span>\n</label>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChildren,\n  DestroyRef,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  untracked,\n  ViewEncapsulation,\n  computed,\n} from '@angular/core';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n  DOWN_ARROW,\n  LEFT_ARROW,\n  RIGHT_ARROW,\n  UP_ARROW,\n} from '@angular/cdk/keycodes';\nimport type { FocusableOption } from '@angular/cdk/a11y';\nimport { MlvRadio } from '../radio/radio';\nimport type { MlvRadioGroupAccessor } from '../radio-group-token';\nimport { RADIO_GROUP } from '../radio-group-token';\nimport type { MlvFormState } from '@malva-ui/core/form-utils';\nimport {\n  MlvDescription,\n  MlvLabel,\n  MlvMessage,\n  MLV_FORM_CONTROL,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport { MlvRtlService, mlvNextId } from '@malva-ui/cdk/utils';\n\n/**\n * Visual/validation state of the group. Structurally identical to\n * {@link MlvFormState}; retained as a public alias for backwards compatibility.\n */\nexport type MlvRadioGroupState = MlvFormState;\n\ntype RadioFocusItem = MlvRadio & FocusableOption;\n\n@Component({\n  selector: 'mlv-radio-group',\n  template: `\n    @if (label()) {\n      <mlv-label [required]=\"required()\">\n        {{ label() }}\n      </mlv-label>\n    }\n    <div class=\"mlv-radio-group__content\">\n      <ng-content />\n    </div>\n    @if (description()) {\n      <mlv-description [id]=\"_descriptionId()\">{{\n        description()\n      }}</mlv-description>\n    }\n    @if (message()) {\n      <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">{{\n        message()\n      }}</mlv-message>\n    }\n  `,\n  styleUrl: './radio-group.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: RADIO_GROUP,\n      useExisting: forwardRef(() => MlvRadioGroup),\n    },\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvRadioGroup),\n    },\n  ],\n  imports: [MlvLabel, MlvDescription, MlvMessage],\n  host: {\n    class: 'mlv-radio-group',\n    '[class]': '\"mlv-radio-group--state-\" + resolvedState()',\n    '[class.mlv-radio-group--disabled]': 'computedDisabled()',\n    '[class.mlv-radio-group--readonly]': 'readonly()',\n    '[attr.id]': 'id()',\n    role: 'radiogroup',\n    '[attr.aria-label]': 'ariaLabel() ?? label()',\n    '[attr.aria-required]': 'required() || null',\n    '[attr.aria-describedby]': '_describedBy()',\n    '[attr.aria-disabled]': 'computedDisabled() || null',\n    '(keydown)': '_onKeydown($event)',\n  },\n})\nexport class MlvRadioGroup\n  extends MlvSignalFormControlBase<unknown>\n  implements MlvRadioGroupAccessor\n{\n  /** Two-way bindable selected value of the group. */\n  readonly value = model<unknown>();\n\n  /** Shared `name` applied to the native radio inputs in the group. */\n  readonly name = input<string, string | undefined>(\n    mlvNextId('mlv-radio-group'),\n    { transform: (value) => value ?? mlvNextId('mlv-radio-group') },\n  );\n\n  readonly radios = contentChildren(MlvRadio);\n\n  /** @private FocusKeyManager driving roving focus + arrow-key navigation across the radios. */\n  private _keyManager!: FocusKeyManager<MlvRadio>;\n\n  /** @private Normalizes horizontal radio navigation for RTL layouts. */\n  private readonly _rtlService = inject(MlvRtlService);\n\n  constructor() {\n    super();\n    inject(DestroyRef).onDestroy(() => this._keyManager?.destroy());\n\n    effect(() => {\n      const items = [...this.radios()];\n      const groupName = this.name();\n      if (items.length === 0) return;\n\n      this._keyManager?.destroy();\n      this._keyManager = new FocusKeyManager<MlvRadio>(\n        items as RadioFocusItem[],\n      )\n        .skipPredicate((radio) => radio.disabled())\n        .withVerticalOrientation()\n        .withWrap();\n\n      items.forEach((radio) => radio.name.set(groupName));\n      untracked(() => this._updateSelection());\n    });\n\n    effect(() => {\n      this.value();\n      untracked(() => this._updateSelection());\n    });\n  }\n\n  onChildFocus(radio: MlvRadio): void {\n    const index = this.radios().indexOf(radio);\n    if (index >= 0) {\n      this._keyManager.setActiveItem(index);\n    }\n  }\n\n  /**\n   * @protected Host keydown handler. Handles all four arrow keys for WAI-ARIA\n   * radiogroup semantics, moving focus + selection via the FocusKeyManager.\n   */\n  _onKeydown(event: KeyboardEvent): void {\n    const key = this._rtlService.normalizeArrowKey(event);\n    const isPrev = key === UP_ARROW || key === LEFT_ARROW;\n    const isNext = key === DOWN_ARROW || key === RIGHT_ARROW;\n    if (!isPrev && !isNext) return;\n\n    // Handle all four arrows for WAI-ARIA radiogroup semantics and suppress the\n    // native radio-group navigation so focus + selection stay in sync with the\n    // FocusKeyManager (which skips disabled radios and wraps).\n    event.preventDefault();\n\n    if (!this._keyManager.activeItem) {\n      this._keyManager.setFirstItemActive();\n    } else if (isPrev) {\n      this._keyManager.setPreviousItemActive();\n    } else {\n      this._keyManager.setNextItemActive();\n    }\n\n    const active = this._keyManager.activeItem;\n    if (active) {\n      this.selectRadio(active);\n    }\n  }\n\n  selectRadio(radio: MlvRadio): void {\n    if (this.computedDisabled() || this.readonly()) return;\n    this.value.set(radio.value());\n    radio.focus();\n    const radioValue = radio.value();\n    this.radios().forEach((r) => r.checked.set(r.value() === radioValue));\n    this._updateTabIndices();\n    this._markTouched();\n  }\n\n  /** Whether the control holds a clearable value — A radio value is selected. */\n  readonly hasValue = computed(() => this.value() != null);\n\n  /** @private Syncs each radio's checked state to the current group value and refreshes tab indices. */\n  private _updateSelection(): void {\n    this.radios().forEach((radio) => {\n      radio.checked.set(radio.value() === this.value());\n    });\n    this._updateTabIndices();\n  }\n\n  /** @private Applies the roving tabindex: only the checked radio (or first when none checked) is tabbable. */\n  private _updateTabIndices(): void {\n    const radios = this.radios();\n    const hasChecked = radios.some((r) => r.checked());\n    radios.forEach((radio, i) => {\n      radio.tabIndex.set(\n        hasChecked ? (radio.checked() ? 0 : -1) : i === 0 ? 0 : -1,\n      );\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-rating.mjs

@@ -0,0 +1,236 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, model, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { DOWN_ARROW, LEFT_ARROW, UP_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { MlvSignalFormControlBase, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { LucideStar } from '@lucide/angular';
+import { MlvRtlService } from '@malva-ui/cdk/utils';
+import { MLV_RATING_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+
+/**
+ * Star rating component with half-star precision and read-only mode.
+ *
+ * Extends {@link MlvSignalFormControlBase}, inheriting the shared `disabled`,
+ * `readonly`, `state`, `id`, `label`, `hint` and `message` inputs plus the
+ * signal-forms field contract.
+ *
+ * - Hover preview highlights stars up to the cursor.
+ * - Half-star precision via clip-path technique when `step="0.5"`.
+ * - Keyboard: ArrowRight/ArrowLeft step up/down, Home for min, End for max.
+ * - Integrates with signal, reactive, and template-driven Angular forms.
+ *
+ * @example Basic
+ * ```html
+ * <mlv-rating [max]="5" [(ngModel)]="rating" />
+ * ```
+ *
+ * @example Half-star precision
+ * ```html
+ * <mlv-rating [step]="0.5" [formField]="ratingForm.score" />
+ * ```
+ *
+ * @example Read-only display
+ * ```html
+ * <mlv-rating [value]="4.5" [readonly]="true" />
+ * ```
+ */
+class MlvRating extends MlvSignalFormControlBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_RATING_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    _rtlService = inject(MlvRtlService);
+    /**
+     * @private Effective direction of this rating, tracking the global direction
+     * and any `[dir]` scope above the host. Mirrors half-star hit testing.
+     */
+    _direction = this._rtlService.elementDirection(inject((ElementRef)));
+    /**
+     * @private Whether the pointer is over the leading (lower-value) half of a
+     * star. `offsetX` is always measured from the physical left edge, so RTL —
+     * where the leading half is the right one — has to mirror it.
+     */
+    _isLeadingHalf(event, star) {
+        const half = star.offsetWidth / 2;
+        return this._direction() === 'rtl'
+            ? event.offsetX > half
+            : event.offsetX < half;
+    }
+    /**
+     * Total number of stars.
+     * @default 5
+     */
+    max = input(5, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(1, Math.floor(coerceNumberProperty(value, 5))) });
+    /**
+     * Step increment — `1` for whole stars, `0.5` for half-star precision.
+     * @default 1
+     */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => (value === 0.5 ? 0.5 : 1) });
+    // ── Internal state ─────────────────────────────────────────────────────────
+    /**
+     * The committed rating — the signal-forms `FormValueControl` model. Kept in
+     * sync by `[formField]`, `[formControl]`, and `ngModel` bindings.
+     */
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Tracks the hover preview value (0 = not hovering). */
+    _hoverValue = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hoverValue" }] : /* istanbul ignore next */ []));
+    /** The value visually displayed — hover preview takes precedence. */
+    _displayValue = computed(() => this._hoverValue() || this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    /** Indices `[0 … max-1]` for `@for` iteration. */
+    _indices = computed(() => Array.from({ length: this.max() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_indices" }] : /* istanbul ignore next */ []));
+    /**
+     * The 0-based index of the star that is in the tab order (roving tabindex).
+     * The star covering the current value is tabbable; when no value is set the
+     * first star is. All other stars are removed from the tab order so the rating
+     * is a single tab stop, with Arrow keys moving between values.
+     */
+    _activeIndex = computed(() => {
+        const value = this.value();
+        if (value <= 0)
+            return 0;
+        return Math.min(this.max() - 1, Math.ceil(value) - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
+    /** Whether the control holds a clearable value — A non-zero rating is set. */
+    hasValue = computed(() => this.value() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // ── Fill calculation ────────────────────────────────────────────────────────
+    /**
+     * Returns the percentage of star `starIndex` (1-indexed) that should be filled.
+     * 100 = full, 50 = half, 0 = empty.
+     */
+    _getFillPercent(starIndex) {
+        const display = this._displayValue();
+        if (display >= starIndex)
+            return 100;
+        if (display >= starIndex - 0.5)
+            return 50;
+        return 0;
+    }
+    /**
+     * Returns the CSS `clip-path` value for the filled star overlay.
+     * `inset(0 {remainder}% 0 0)` clips the right side.
+     */
+    _clipPath(starIndex) {
+        const remainder = 100 - this._getFillPercent(starIndex);
+        return `inset(0 ${remainder}% 0 0)`;
+    }
+    /**
+     * @internal Resolves the per-star aria-label, e.g. "Rate 3 out of 5".
+     * @param starIndex 1-based star number.
+     */
+    _rateLabel(starIndex) {
+        return this._resolver.resolve(this._i18n(), 'rateValue', { value: starIndex, max: this.max() });
+    }
+    /**
+     * @internal Roving tabindex for star `index` (0-based): `0` for the active
+     * star, `-1` for the rest. Always `-1` when read-only or disabled.
+     */
+    _starTabIndex(index) {
+        if (this.readonly() || this.computedDisabled())
+            return -1;
+        return index === this._activeIndex() ? 0 : -1;
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    /** @internal */
+    _onStarMouseMove(starIndex, event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const el = event.currentTarget;
+        this._hoverValue.set(this.step() === 0.5 && this._isLeadingHalf(event, el)
+            ? starIndex - 0.5
+            : starIndex);
+    }
+    /** @internal */
+    _onStarClick(starIndex, event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const el = event.currentTarget;
+        const newValue = this.step() === 0.5 && this._isLeadingHalf(event, el)
+            ? starIndex - 0.5
+            : starIndex;
+        this.value.set(newValue);
+    }
+    /** @internal */
+    _onHostMouseLeave() {
+        this._hoverValue.set(0);
+    }
+    /** @internal */
+    _onHostKeydown(event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const current = this.value();
+        const stepSize = this.step();
+        let next = null;
+        switch (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case RIGHT_ARROW:
+            case UP_ARROW:
+                next = Math.min(this.max(), current + stepSize);
+                break;
+            case LEFT_ARROW:
+            case DOWN_ARROW:
+                next = Math.max(0, current - stepSize);
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = this.max();
+                break;
+            default:
+                return;
+        }
+        if (next !== null) {
+            event.preventDefault();
+            this.value.set(next);
+        }
+    }
+    /** @internal */
+    _onStarFocus(starIndex) {
+        this._hoverValue.set(starIndex);
+    }
+    /** @internal */
+    _onStarBlur() {
+        this._hoverValue.set(0);
+        this._markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRating, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvRating, isStandalone: true, selector: "mlv-rating", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "mouseleave": "_onHostMouseLeave()", "keydown": "_onHostKeydown($event)" }, properties: { "class": "\"mlv-rating--state-\" + resolvedState()", "class.mlv-rating--readonly": "readonly()", "class.mlv-rating--disabled": "computedDisabled()", "attr.id": "id()", "attr.role": "\"group\"", "attr.aria-label": "_i18n().rating", "attr.aria-disabled": "computedDisabled() || null", "attr.tabindex": "readonly() || computedDisabled() ? null : -1" }, classAttribute: "mlv-rating" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvRating),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "@for (i of _indices(); track i) {\n<button\n  type=\"button\"\n  class=\"mlv-rating__star\"\n  [attr.aria-label]=\"_rateLabel(i + 1)\"\n  [attr.aria-pressed]=\"value() >= (i + 1)\"\n  [disabled]=\"computedDisabled() || readonly() || null\"\n  [tabindex]=\"_starTabIndex(i)\"\n  (mousemove)=\"_onStarMouseMove(i + 1, $event)\"\n  (click)=\"_onStarClick(i + 1, $event)\"\n  (focus)=\"_onStarFocus(i + 1)\"\n  (blur)=\"_onStarBlur()\"\n>\n  <!-- Empty star (always rendered, forms the \"outline\") -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--empty\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n  <!-- Filled star (clipped to show partial fill) -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--filled\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n    [style.clip-path]=\"_clipPath(i + 1)\"\n  />\n</button>\n}\n", styles: ["@layer mlv.components{.mlv-rating{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-rating *{box-sizing:border-box}.mlv-rating{display:inline-flex;align-items:center;gap:.125rem}.mlv-rating__star{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:var(--mlv-radius-s);outline:none;transition-property:transform,color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-rating__star:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-rating__star:hover:not(:disabled){transform:scale(1.15)}.mlv-rating__star:active:not(:disabled){transform:scale(.97)}.mlv-rating__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.mlv-rating__icon--empty{color:var(--mlv-border-normal);fill:currentcolor}.mlv-rating__icon--filled{color:var(--mlv-text-warning);fill:currentcolor}.mlv-rating--state-error .mlv-rating__icon--empty{color:var(--mlv-border-error)}.mlv-rating--state-warning .mlv-rating__icon--empty{color:var(--mlv-border-warning)}.mlv-rating--state-success .mlv-rating__icon--empty{color:var(--mlv-border-success)}.mlv-rating--state-info .mlv-rating__icon--empty{color:var(--mlv-border-info)}.mlv-rating--readonly .mlv-rating__star{cursor:default;pointer-events:none}.mlv-rating--readonly .mlv-rating__star:hover{transform:none}.mlv-rating--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-rating--disabled .mlv-rating__star{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-rating .mlv-rating__star{transition:none}.mlv-rating .mlv-rating__star:hover,.mlv-rating .mlv-rating__star:active{transform:none}}}\n"], dependencies: [{ kind: "component", type: LucideStar, selector: "svg[lucideStar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRating, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-rating', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideStar], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvRating),
+                        },
+                    ], host: {
+                        class: 'mlv-rating',
+                        '[class]': '"mlv-rating--state-" + resolvedState()',
+                        '[class.mlv-rating--readonly]': 'readonly()',
+                        '[class.mlv-rating--disabled]': 'computedDisabled()',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': '_i18n().rating',
+                        '[attr.aria-disabled]': 'computedDisabled() || null',
+                        '(mouseleave)': '_onHostMouseLeave()',
+                        '(keydown)': '_onHostKeydown($event)',
+                        '[attr.tabindex]': 'readonly() || computedDisabled() ? null : -1',
+                    }, template: "@for (i of _indices(); track i) {\n<button\n  type=\"button\"\n  class=\"mlv-rating__star\"\n  [attr.aria-label]=\"_rateLabel(i + 1)\"\n  [attr.aria-pressed]=\"value() >= (i + 1)\"\n  [disabled]=\"computedDisabled() || readonly() || null\"\n  [tabindex]=\"_starTabIndex(i)\"\n  (mousemove)=\"_onStarMouseMove(i + 1, $event)\"\n  (click)=\"_onStarClick(i + 1, $event)\"\n  (focus)=\"_onStarFocus(i + 1)\"\n  (blur)=\"_onStarBlur()\"\n>\n  <!-- Empty star (always rendered, forms the \"outline\") -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--empty\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n  <!-- Filled star (clipped to show partial fill) -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--filled\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n    [style.clip-path]=\"_clipPath(i + 1)\"\n  />\n</button>\n}\n", styles: ["@layer mlv.components{.mlv-rating{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-rating *{box-sizing:border-box}.mlv-rating{display:inline-flex;align-items:center;gap:.125rem}.mlv-rating__star{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:var(--mlv-radius-s);outline:none;transition-property:transform,color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-rating__star:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-rating__star:hover:not(:disabled){transform:scale(1.15)}.mlv-rating__star:active:not(:disabled){transform:scale(.97)}.mlv-rating__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.mlv-rating__icon--empty{color:var(--mlv-border-normal);fill:currentcolor}.mlv-rating__icon--filled{color:var(--mlv-text-warning);fill:currentcolor}.mlv-rating--state-error .mlv-rating__icon--empty{color:var(--mlv-border-error)}.mlv-rating--state-warning .mlv-rating__icon--empty{color:var(--mlv-border-warning)}.mlv-rating--state-success .mlv-rating__icon--empty{color:var(--mlv-border-success)}.mlv-rating--state-info .mlv-rating__icon--empty{color:var(--mlv-border-info)}.mlv-rating--readonly .mlv-rating__star{cursor:default;pointer-events:none}.mlv-rating--readonly .mlv-rating__star:hover{transform:none}.mlv-rating--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-rating--disabled .mlv-rating__star{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-rating .mlv-rating__star{transition:none}.mlv-rating .mlv-rating__star:hover,.mlv-rating .mlv-rating__star:active{transform:none}}}\n"] }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvRating };
+//# sourceMappingURL=malva-ui-core-rating.mjs.map