@malva-ui/core 0.1.13 → 0.1.14

package/types/malva-ui-core-form.d.ts

@@ -0,0 +1,176 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@malva-ui/cdk/density';
+
+/**
+ * Explicit rhythm override for `form[mlvForm]` / `fieldset[mlvFieldset]`.
+ * Maps onto the spacing scale: `xs` 0.5rem, `s` 0.75rem, `m` 1rem, `l` 1.25rem,
+ * `xl` 1.5rem. Unset = density-scaled default.
+ */
+type MlvFormGap = 'xs' | 's' | 'm' | 'l' | 'xl';
+/**
+ * Column mode of `fieldset[mlvFieldset]`: `'auto'` = responsive auto-fit,
+ * a number = maximum column count (still collapses when narrow).
+ */
+type MlvFieldsetColumns = 'auto' | number;
+/** Horizontal distribution of `[mlvFormActions]` children. */
+type MlvFormActionsAlign = 'start' | 'end' | 'center' | 'between';
+
+/**
+ * Layout shell for a native `<form>`: vertical stack with a density-scaled gap,
+ * and the density source for everything inside it.
+ *
+ * - `mlvDensity` (host directive) stamps `mlv-form--<density>` for cascade-only
+ *   controls **and** provides `MLV_DENSITY_CONTEXT` for directive-bearing ones
+ *   (buttons, selects, chips…), so one attribute sizes the whole form.
+ * - `gap` overrides the rhythm explicitly; `--mlv-form-gap` is the CSS hook.
+ *
+ * @example
+ * ```html
+ * <form mlvForm mlvDensity="compact" maxWidth="32rem" [formGroup]="form">
+ *   <mlv-input formControlName="name" label="Name" />
+ *   <footer mlvFormActions align="end"><button mlvButton type="submit">Save</button></footer>
+ * </form>
+ * ```
+ */
+declare class MlvForm {
+    /**
+     * Explicit rhythm between the form's direct children (and, by inheritance,
+     * inside every `mlvFieldset`). Unset = density-scaled default
+     * (tight 0.5rem → airy 1.5rem).
+     */
+    readonly gap: _angular_core.InputSignal<MlvFormGap | undefined>;
+    /** Caps the form's inline size (`max-inline-size`), e.g. `'32rem'`. */
+    readonly maxWidth: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @internal Inline `--mlv-form-gap` value; `null` removes the override so the
+     * stylesheet's density-scaled default applies.
+     */
+    protected readonly _gapValue: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvForm, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvForm, "form[mlvForm]", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.MlvDensityDirective; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}
+
+/**
+ * Group of related controls on a native `<fieldset>`: styled legend, optional
+ * description (wired to `aria-describedby`), and a responsive grid body.
+ *
+ * - `columns='auto'` (default): auto-fit columns of at least `minColumnWidth`.
+ * - `columns=n`: **at most** `n` columns; still collapses when the container is
+ *   narrower than `n × minColumnWidth`.
+ * - Gap inherits the surrounding `form[mlvForm]` rhythm (`--mlv-form-gap`);
+ *   `gap` overrides it for this fieldset and nested ones.
+ * - Rich headings: project a native `<legend>` instead of the `legend` input
+ *   (the input wins when both are present).
+ *
+ * @example
+ * ```html
+ * <fieldset mlvFieldset legend="Address" description="Where we ship." [columns]="2">
+ *   <mlv-input label="Street" mlvFieldsetSpan="full" />
+ *   <mlv-input label="City" />
+ *   <mlv-input label="Postal code" />
+ * </fieldset>
+ * ```
+ */
+declare class MlvFieldset {
+    /** Element id; auto-generated (`mlv-fieldset-<n>`) unless bound. Seeds the description id. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Group heading rendered as `<legend class="mlv-fieldset__legend">`. Omit and project a native `<legend>` for rich content. */
+    readonly legend: _angular_core.InputSignal<string | undefined>;
+    /** Help text rendered under the legend and announced via `aria-describedby`. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** `'auto'` (responsive auto-fit) or a maximum column count. Numeric strings are accepted. */
+    readonly columns: _angular_core.InputSignalWithTransform<MlvFieldsetColumns, string | number>;
+    /** Smallest inline size a column may shrink to before the grid drops a column. */
+    readonly minColumnWidth: _angular_core.InputSignal<string>;
+    /** Explicit gap for this fieldset (and nested ones); unset = inherited form rhythm / density default. */
+    readonly gap: _angular_core.InputSignal<MlvFormGap | undefined>;
+    /** @internal Whether `columns` is a number (capped grid). */
+    protected readonly _capped: _angular_core.Signal<boolean>;
+    /** @internal Id of the description paragraph, `<id>-description`. */
+    protected readonly _descriptionId: _angular_core.Signal<string>;
+    /**
+     * @private A static `aria-describedby` authored by the consumer, read once at
+     * construction (before the host binding takes the attribute over). `null` when
+     * absent or blank. A *bound* `[attr.aria-describedby]` is not supported — the
+     * host binding owns the attribute from the first change detection run.
+     */
+    private readonly _authoredDescribedBy;
+    /**
+     * @internal Host `aria-describedby`: the rendered description id (when
+     * `description` is set) merged with any consumer-authored value, `null` when
+     * neither is present.
+     */
+    protected readonly _describedBy: _angular_core.Signal<string | null>;
+    /** @internal Inline `--mlv-form-gap` value, `null` when unset. */
+    protected readonly _gapValue: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvFieldset, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvFieldset, "fieldset[mlvFieldset]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["legend", "*"], true, never>;
+}
+
+/**
+ * Marks the title row of a `form[mlvForm]`: a wrapping flex row that keeps a
+ * heading (`h*[mlvTitle]`) on the start side and accessories (badges,
+ * segmented controls) on the end side.
+ *
+ * @example
+ * ```html
+ * <header mlvFormHeader>
+ *   <h2 mlvTitle>Registration</h2>
+ *   <mlv-badge tone="info" muted>Step 1 of 3</mlv-badge>
+ * </header>
+ * ```
+ */
+declare class MlvFormHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvFormHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvFormHeader, "[mlvFormHeader]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks the actions row of a `form[mlvForm]` (submit / cancel buttons): a
+ * wrapping flex row with the standard button gap.
+ *
+ * @example
+ * ```html
+ * <footer mlvFormActions align="end">
+ *   <button mlvButton variant="secondary" type="button">Cancel</button>
+ *   <button mlvButton type="submit">Save</button>
+ * </footer>
+ * ```
+ */
+declare class MlvFormActions {
+    /** Horizontal distribution of the actions. `'start'` (default) hugs the start edge. */
+    readonly align: _angular_core.InputSignal<MlvFormActionsAlign>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvFormActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvFormActions, "[mlvFormActions]", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Column span of a fieldset grid child: a column count or the whole row. */
+type MlvFieldsetSpanValue = number | 'full';
+/**
+ * Makes a direct child of a `fieldset[mlvFieldset]` grid span several columns.
+ *
+ * `'full'` (`grid-column: 1 / -1`) is safe in every grid. A numeric span is
+ * `grid-column: span n` — in an auto-fit grid that collapsed to fewer than `n`
+ * columns it creates implicit columns and overflows, so prefer `'full'` there
+ * and reserve numbers for `[columns]="n"` grids wide enough to hold them.
+ *
+ * @example
+ * ```html
+ * <fieldset mlvFieldset [columns]="2">
+ *   <mlv-input label="Street" mlvFieldsetSpan="full" />
+ *   <mlv-input label="City" />
+ *   <mlv-input label="Postal code" />
+ * </fieldset>
+ * ```
+ */
+declare class MlvFieldsetSpan {
+    /** Column span: a positive integer (also as a string) or `'full'` for the whole row. */
+    readonly mlvFieldsetSpan: _angular_core.InputSignalWithTransform<MlvFieldsetSpanValue, string | number>;
+    /** @internal Resolved `grid-column` value. */
+    protected readonly _gridColumn: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvFieldsetSpan, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvFieldsetSpan, "[mlvFieldsetSpan]", never, { "mlvFieldsetSpan": { "alias": "mlvFieldsetSpan"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvFieldset, MlvFieldsetSpan, MlvForm, MlvFormActions, MlvFormHeader };
+export type { MlvFieldsetColumns, MlvFieldsetSpanValue, MlvFormActionsAlign, MlvFormGap };

package/types/malva-ui-core-icon-toggle.d.ts

@@ -0,0 +1,80 @@
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvTone } from '@malva-ui/cdk/utils';
+import * as i1 from '@malva-ui/cdk/density';
+
+/**
+ * Chromeless, glyph-only WAI-ARIA toggle button (visual-language spec AB-R7).
+ *
+ * Wraps exactly one projected Lucide `<svg>` and expresses `pressed` purely
+ * through the glyph itself — an outlined icon at rest, a "tiny fill" on
+ * hover, and a full `fill: currentColor` when pressed. There is **no
+ * background in any state**; a design that needs a filled/tinted toggle
+ * affordance should reach for `mlv-button-toggle` instead. Because the fill
+ * mechanism relies on the glyph having an enclosed shape, it only reads
+ * correctly for icons like a star, heart, bookmark, or pin — not for
+ * open-stroke glyphs.
+ *
+ * Enhances a native `<button>` (`.claude/rules/angular-component.md` §
+ * Selectors — the attribute-selector-on-native-element pattern), so native
+ * `disabled`, `type`, and click/keyboard activation semantics all work
+ * unmodified. The pointer target is held at a minimum of `1.5rem` (24px —
+ * WCAG 2.2 SC 2.5.8) via density-aware padding, never by inflating the
+ * glyph.
+ *
+ * @example
+ * ```html
+ * <!-- Neutral toggle, no tone -->
+ * <button mlvIconToggle type="button" [(pressed)]="bookmarked" aria-label="Bookmark">
+ *   <svg lucideBookmark [size]="16" aria-hidden="true" />
+ * </button>
+ *
+ * <!-- `tone` recolours only the pressed glyph -->
+ * <button
+ *   mlvIconToggle
+ *   type="button"
+ *   tone="warning"
+ *   [pressed]="ticket.starred"
+ *   aria-label="Star conversation"
+ *   (pressedChange)="toggleStar()"
+ * >
+ *   <svg lucideStar [size]="16" aria-hidden="true" />
+ * </button>
+ * ```
+ */
+declare class MlvIconToggle {
+    /**
+     * Two-way bindable pressed state, reflected as `aria-pressed` on the
+     * native button. Bind one-way (`[pressed]` + `(pressedChange)`) when the
+     * caller owns the source of truth and the toggle must never write its own
+     * model behind that owner's back — see `mlv-button-toggle` for the same
+     * convention.
+     */
+    readonly pressed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Optional semantic tone. Recolours only the **pressed** glyph to the
+     * matching semantic text token (e.g. `tone="warning"` → `--mlv-text-warning`
+     * for a favourite star). Rest and hover stay neutral regardless of tone —
+     * a tone marks state, it never paints a surface. Defaults to `undefined`,
+     * which keeps the pressed glyph in `currentColor`.
+     */
+    readonly tone: _angular_core.InputSignal<MlvTone | undefined>;
+    /** Whether the native button is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * @protected The `--tone-*` BEM modifier class for the current `tone`, or
+     * an empty string when no tone is set.
+     */
+    protected readonly _toneClass: _angular_core.Signal<string>;
+    /**
+     * @protected Flips `pressed` on click unless the control is disabled.
+     * Keyboard activation (Enter/Space) reaches this the same way — the host
+     * is a real `<button>`, so the browser translates both keys into a native
+     * `click` event with no extra keydown handling required.
+     */
+    protected _handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvIconToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvIconToggle, "button[mlvIconToggle]", never, { "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; }, never, ["*"], true, [{ directive: typeof i1.MlvDensityDirective; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}
+
+export { MlvIconToggle };

package/types/malva-ui-core-input.d.ts

@@ -0,0 +1,262 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvSignalFormControlBase, MlvFormControl, MlvFormState } from '@malva-ui/core/form-utils';
+
+type MlvInputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'search' | 'url';
+/**
+ * Visual/validation state of the input. Mirrors {@link MlvFormState}.
+ */
+type MlvInputState = MlvFormState;
+type MlvInputInputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+declare class MlvInput extends MlvSignalFormControlBase<string> implements MlvFormControl {
+    readonly type: _angular_core.InputSignal<MlvInputType>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Native HTML `autocomplete` hint forwarded to the underlying `<input>`.
+     * When empty, no `autocomplete` attribute is rendered.
+     * @default ''
+     */
+    readonly autocomplete: _angular_core.InputSignal<string>;
+    /**
+     * Native HTML `inputmode` attribute forwarded to the underlying `<input>`.
+     * Controls the virtual keyboard on mobile devices.
+     * @default null
+     */
+    readonly inputMode: _angular_core.InputSignal<MlvInputInputMode | null>;
+    /**
+     * Maximum number of characters the user may enter. Forwarded to the
+     * underlying `<input>` `maxlength` attribute. `null` removes the cap.
+     */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | null, number | null | undefined>;
+    /**
+     * Minimum number of characters the user must enter for the form control
+     * to validate. Forwarded to the underlying `<input>` `minlength` attribute.
+     */
+    readonly minLength: _angular_core.InputSignalWithTransform<number | null, number | null | undefined>;
+    /**
+     * Native HTML5 validation pattern (regular-expression source) forwarded
+     * to the underlying `<input>` `pattern` attribute.
+     */
+    readonly pattern: _angular_core.InputSignalWithTransform<string | null, string | RegExp | readonly RegExp[] | null | undefined>;
+    /**
+     * Native HTML `name` attribute. Required for non-Angular form submission;
+     * Reactive Forms / template-driven forms do not need this.
+     */
+    readonly name: _angular_core.InputSignalWithTransform<string | null, string | null | undefined>;
+    /**
+     * When `true`, the underlying `<input>` is focused as soon as it mounts.
+     * Use sparingly — autofocus is generally an a11y anti-pattern outside of
+     * dialogs and confirmation flows.
+     */
+    readonly autofocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Numeric `min` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<string | number | null, string | number | null | undefined>;
+    /**
+     * Numeric `max` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<string | number | null, string | number | null | undefined>;
+    /**
+     * Numeric `step` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`. `null` falls back to the
+     * browser default of `1`.
+     */
+    readonly step: _angular_core.InputSignalWithTransform<number | null, number | null | undefined>;
+    /**
+     * When `true`, renders only the bare `<input>` element with no
+     * `mlv-form-control-wrapper` chrome (no label, no message, no
+     * prefix/suffix slots). Used by composite controls (combobox,
+     * tokenizer, command-palette, color-picker) that own their own
+     * surrounding container.
+     */
+    readonly bare: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, `mlv-input` does not render its own internal `<input>` and
+     * instead adopts a consumer-projected `<input mlvInputNative>` as the control
+     * element. Opt in when an external attribute directive must sit directly on
+     * the native input — e.g. `@angular/aria`'s combobox trigger, which requires
+     * `[ngCombobox]` on the `<input>` itself. In this mode the projected input
+     * owns its own value/keyboard wiring; `mlv-input` provides the surrounding
+     * chrome, styling hook (`mlv-input__native`), and focus/select forwarding.
+     *
+     * Ignored unless a matching `<input mlvInputNative>` is projected.
+     */
+    readonly projectControl: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Optional explicit `role` attribute forwarded to the underlying
+     * `<input>`. Use for combobox-style consumers — leave `null` for
+     * a vanilla text field.
+     */
+    readonly role: _angular_core.InputSignal<string | null>;
+    /**
+     * Forwarded to `aria-expanded`. Use with `role="combobox"` to
+     * communicate dropdown state.
+     */
+    readonly ariaExpanded: _angular_core.InputSignal<string | boolean | null>;
+    /**
+     * Forwarded to `aria-haspopup` (typically `'listbox'`).
+     */
+    readonly ariaHasPopup: _angular_core.InputSignal<string | null>;
+    /**
+     * Forwarded to `aria-autocomplete` (typically `'list'`). Use with
+     * `role="combobox"` to describe the autocomplete behaviour of the field.
+     */
+    readonly ariaAutocomplete: _angular_core.InputSignal<string | null>;
+    /**
+     * Forwarded to `aria-controls` — the id of the listbox / popup the
+     * input drives.
+     */
+    readonly ariaControls: _angular_core.InputSignal<string | null>;
+    /**
+     * Forwarded to `aria-activedescendant` — the id of the currently
+     * highlighted option in the listbox.
+     */
+    readonly ariaActiveDescendant: _angular_core.InputSignal<string | null>;
+    /**
+     * Explicit `aria-describedby` for the underlying `<input>`, overriding the
+     * ids the control derives from its own `description` / `message`. Composite
+     * controls (`mlv-pin-input`, `mlv-tokenizer`, `mlv-combobox`) that render the
+     * description and message themselves point the inner input here.
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * The input's text value — the signal-forms `FormValueControl` model.
+     * Two-way bindable (`[(value)]`), one-way bindable by composite controls
+     * (`[value]="searchQuery()"`), and kept in sync with the bound field by
+     * `[formField]` / `[formControl]` / `ngModel`.
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    /**
+     * Emitted when the underlying native `<input>` gains focus. Re-emitted from
+     * the input's own `focus` handler so composite controls (e.g. `mlv-combobox`)
+     * can react to focus without relying on the non-bubbling native `focus`
+     * event reaching the `mlv-input` host. Carries the original `FocusEvent`.
+     */
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * Emitted when the underlying native `<input>` loses focus. Re-emitted from
+     * the input's own `blur` handler (fired after the touch output), so composite
+     * controls can run blur-driven logic (close dropdowns, revert text, mark
+     * touched) reliably. Carries the original `FocusEvent`.
+     */
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @private Reference to the internally-rendered native `<input>` element so
+     * the component can imperatively focus / select its contents.
+     */
+    private readonly _nativeRef;
+    /**
+     * @private Reference to a consumer-projected `<input mlvInputNative>` used
+     * when {@link projectControl} is enabled.
+     */
+    private readonly _projectedNative;
+    /**
+     * @private Resolves the active native `<input>` — the projected one when
+     * projection is enabled and present, otherwise the internally-rendered input.
+     */
+    private _resolveNative;
+    /**
+     * Direct access to the underlying native `<input>`. Use sparingly —
+     * required only for selection-range / paste-distribution flows in
+     * composite controls. Resolves to the projected input when
+     * {@link projectControl} is enabled.
+     */
+    get nativeElement(): HTMLInputElement | null;
+    /**
+     * Focuses the underlying native input.
+     */
+    focus(): void;
+    /**
+     * Selects the current text inside the underlying native input.
+     */
+    select(): void;
+    onInput(event: Event): void;
+    /**
+     * Handles the native `<input>` focus event: sets the focused state and
+     * re-emits {@link inputFocus} for composite-control consumers.
+     */
+    onFocus(event: FocusEvent): void;
+    onBlur(event: FocusEvent): void;
+    /** Whether the control holds a clearable value — Non-empty text present. */
+    readonly hasValue: _angular_core.Signal<boolean>;
+    /** Clears the text value (wired to the wrapper's clear button). */
+    clearValue(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvInput, "mlv-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "projectControl": { "alias": "projectControl"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaAutocomplete": { "alias": "ariaAutocomplete"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaActiveDescendant": { "alias": "ariaActiveDescendant"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["_projectedNative"], ["input[mlvInputNative]", "input[mlvInputNative]"], true, never>;
+}
+
+/**
+ * Marks a consumer-provided native `<input>` that should be adopted as the
+ * control element of a `<mlv-input projectControl>`.
+ *
+ * `mlv-input` normally renders and owns its own internal `<input>`. Some
+ * headless behaviours — most notably `@angular/aria`'s combobox family, whose
+ * trigger directive (`[ngCombobox]`, formerly `input[ngComboboxInput]`) must
+ * sit directly on the interactive `<input>` element — need to attach their own
+ * attribute directives to that input. Because Angular cannot attach an external
+ * directive to a component's *internal* template element, `mlv-input` instead
+ * exposes an opt-in projection slot: set `projectControl` on `<mlv-input>` and
+ * project your own `<input mlvInputNative …>` carrying whatever directives you
+ * need. This directive applies the shared `mlv-input__native` styling hook and
+ * makes the element discoverable to the host `mlv-input` so focus/selection
+ * helpers keep working.
+ *
+ * @example
+ * ```html
+ * <mlv-input bare projectControl>
+ *   <input mlvInputNative ngCombobox [(value)]="query" [(expanded)]="open" />
+ * </mlv-input>
+ * ```
+ */
+declare class MlvInputNative {
+    /**
+     * @protected The projected native `<input>` element reference, used by the
+     * host `mlv-input` to forward `focus()` / `select()` calls.
+     */
+    protected readonly _elementRef: ElementRef<HTMLInputElement>;
+    /** The projected native `<input>` element. */
+    get nativeElement(): HTMLInputElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvInputNative, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvInputNative, "input[mlvInputNative]", ["mlvInputNative"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * A synchronous password-strength rule supplied by the consumer.
+ *
+ * Return `true` when the password satisfies the rule and `false` otherwise.
+ */
+interface MlvPasswordStrengthRule {
+    (value: string): boolean;
+}
+/**
+ * Headless password-strength calculator for `mlv-input`.
+ *
+ * The directive evaluates consumer-provided rules against the input's current
+ * value and exposes reactive score metadata through `exportAs`. It renders no
+ * UI, allowing consumers to present bars, text, emoji, or another indicator.
+ */
+declare class MlvPasswordStrength {
+    /**
+     * Synchronous rules evaluated against the current input value.
+     */
+    readonly mlvPasswordStrength: _angular_core.InputSignal<readonly MlvPasswordStrengthRule[]>;
+    /** @private Input value accessor provided by the host `mlv-input`. */
+    private readonly _input;
+    /** Number of rules currently satisfied by the input value. */
+    readonly score: _angular_core.Signal<number>;
+    /** Total number of configured rules. */
+    readonly maxScore: _angular_core.Signal<number>;
+    /**
+     * Normalized score from `0` to `1`. Returns `0` when no rules are configured.
+     */
+    readonly ratio: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPasswordStrength, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPasswordStrength, "mlv-input[mlvPasswordStrength]", ["mlvPasswordStrength"], { "mlvPasswordStrength": { "alias": "mlvPasswordStrength"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvInput, MlvInputNative, MlvPasswordStrength };
+export type { MlvInputInputMode, MlvInputState, MlvInputType, MlvPasswordStrengthRule };

package/types/malva-ui-core-kbd.d.ts

@@ -0,0 +1,56 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Canonical key names accepted by the `keys` input.
+ * These map to human-readable labels and OS-specific symbols.
+ */
+type MlvKbdKey = 'cmd' | 'command' | 'ctrl' | 'control' | 'shift' | 'alt' | 'option' | 'meta' | 'enter' | 'return' | 'backspace' | 'delete' | 'escape' | 'esc' | 'tab' | 'space' | 'up' | 'down' | 'left' | 'right' | 'home' | 'end' | 'pageup' | 'pagedown' | (string & {});
+/** Resolved label/symbol for a single key. */
+interface MlvResolvedKey {
+    /** Display label rendered inside the `<kbd>` element. */
+    label: string;
+    /** Original key name, for aria labelling. */
+    key: string;
+}
+/**
+ * Keyboard shortcut display component. Renders an array of key names
+ * as styled `<kbd>` elements separated by a configurable separator.
+ *
+ * OS detection swaps modifier labels: Mac shows `⌘`, `⌃`, `⇧`, `⌥`;
+ * Windows/Linux shows `Ctrl`, `Shift`, `Alt`, etc.
+ *
+ * @example
+ * ```html
+ * <!-- Renders ⌘ + K on Mac, Ctrl + K on Windows -->
+ * <mlv-kbd [keys]="['cmd', 'k']" />
+ *
+ * <!-- Custom separator -->
+ * <mlv-kbd [keys]="['ctrl', 'shift', 'p']" separator=" " />
+ * ```
+ */
+declare class MlvKbd {
+    /**
+     * The ordered list of key names to display.
+     * Accepts canonical names (`'cmd'`, `'shift'`, `'enter'`, etc.) or any
+     * plain string which will be uppercased as a fallback label.
+     *
+     * @example `['cmd', 'k']` → `⌘ + K` (Mac) / `Ctrl + K` (Win)
+     */
+    readonly keys: _angular_core.InputSignal<MlvKbdKey[]>;
+    /**
+     * The string rendered between each key element.
+     * Defaults to `'+'`.
+     */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** @private Resolved OS flag — true on macOS browsers. */
+    private readonly _isMac;
+    /** @protected Resolved key labels for the template. */
+    protected readonly _resolvedKeys: _angular_core.Signal<MlvResolvedKey[]>;
+    /** @private Accessible label joining all resolved key names. */
+    protected readonly _ariaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvKbd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvKbd, "mlv-kbd", never, { "keys": { "alias": "keys"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvKbd };
+export type { MlvKbdKey, MlvResolvedKey };

package/types/malva-ui-core-layout.d.ts

@@ -0,0 +1,70 @@
+import * as _malva_ui_core_layout from '@malva-ui/core/layout';
+import * as i0 from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+
+declare class MlvLayoutTop extends MlvStructural {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLayoutTop, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvLayoutTop, "[mlvLayoutTop]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvLayoutSide extends MlvStructural {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLayoutSide, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvLayoutSide, "[mlvLayoutSide]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvLayout {
+    /** @protected Header slot directive projected via `[mlvLayoutTop]`. */
+    protected readonly topRef: i0.Signal<MlvLayoutTop | undefined>;
+    /** @protected Sidebar slot directive projected via `[mlvLayoutSide]`. */
+    protected readonly sideRef: i0.Signal<MlvLayoutSide | undefined>;
+    /** @protected Current active theme, sourced from the theme service. */
+    protected readonly _theme: i0.Signal<_malva_ui_core_layout.MlvTheme>;
+    readonly plain: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * @private Theme service providing the current light/dark theme signal.
+     * Injected so the host reflects the theme locally; publishing it on the
+     * document element is `MlvThemeService`'s own job, so that a route rendering
+     * no `mlv-layout` still themes correctly.
+     */
+    private readonly _themeService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvLayout, "mlv-layout", never, { "plain": { "alias": "plain"; "required": false; "isSignal": true; }; }, {}, ["topRef", "sideRef"], ["*"], true, never>;
+}
+
+type MlvTheme = 'light' | 'dark';
+type MlvThemeMode = MlvTheme | 'auto';
+declare function isMlvThemeMode(value: unknown): value is MlvThemeMode;
+declare const MLV_THEME: InjectionToken<MlvThemeMode>;
+declare const MLV_THEME_KEY: InjectionToken<string>;
+declare const defaultThemeKey: "mlv-theme";
+declare const defaultTheme: MlvThemeMode;
+declare function provideDefaultTheme(theme?: MlvThemeMode, themeKey?: "mlv-theme"): Provider[];
+declare class MlvThemeService {
+    /** @private Whether the service is running in a browser (vs. server-side rendering). */
+    private readonly _isBrowser;
+    /**
+     * Lazily-resolved `prefers-color-scheme: dark` media query list. `null` on
+     * the server where `window` is undefined.
+     */
+    private readonly _darkModeMedia;
+    /** @protected System dark-mode preference from the `prefers-color-scheme` media query. */
+    protected readonly _prefersDark: i0.WritableSignal<boolean>;
+    readonly defaultTheme: MlvThemeMode;
+    /** @private Storage key used to persist the selected theme. */
+    private readonly _themeKey;
+    /** @private Platform document, used to publish the theme on the root element. */
+    private readonly _document;
+    readonly themeMode: i0.WritableSignal<MlvThemeMode>;
+    readonly currentTheme: i0.WritableSignal<MlvTheme>;
+    constructor();
+    setTheme(mode: MlvThemeMode): void;
+    private _resolveTheme;
+    private _syncResolvedTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MlvThemeService>;
+}
+
+export { MLV_THEME, MLV_THEME_KEY, MlvLayout, MlvLayoutSide, MlvLayoutTop, MlvThemeService, defaultTheme, defaultThemeKey, isMlvThemeMode, provideDefaultTheme };
+export type { MlvTheme, MlvThemeMode };