@malva-ui/core 0.1.12

package/dialog/lib/dialog-text-content.d.ts

@@ -0,0 +1,24 @@
+import { InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+/** @internal The string passed to `MlvDialogService.open()`. */
+export declare const MLV_DIALOG_TEXT: InjectionToken<string>;
+/**
+ * @internal Renders string content: a surface with the standard header (title
+ * from `config.title`, close button per `config.closable`) and a body holding
+ * the escaped text. Composes the same public parts consumers use.
+ */
+export declare class MlvDialogTextContent {
+    /** @protected Text rendered through interpolation (escaped, never HTML). */
+    protected readonly _text: string;
+    /** @private Per-open configuration. */
+    private readonly _config;
+    /**
+     * @protected A header is worth rendering when it has a title or a close
+     * button. `appearance: 'confirm'` forces the close button off inside
+     * `MlvDialogHeader`, so a titleless confirm surface would otherwise render an
+     * empty header bar.
+     */
+    protected readonly _showHeader: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDialogTextContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDialogTextContent, "mlv-dialog-text-content", never, {}, {}, never, never, true, never>;
+}

package/dialog/lib/dialog.service.d.ts

@@ -0,0 +1,63 @@
+import type { Observable } from 'rxjs';
+import type { MlvConfirmDialogOptions } from './confirm-dialog-options';
+import type { MlvDialogConfig, MlvDialogContent } from './dialog-config';
+import { MlvDialogRef } from './dialog-ref';
+import * as i0 from "@angular/core";
+/**
+ * Opens modal dialogs. Thin orchestration over Angular CDK `Dialog`: the CDK
+ * owns overlay, container, focus trap/restore, ARIA and history handling;
+ * this service maps `MlvDialogConfig`, constructs the `MlvDialogRef`, plays
+ * the leave animation, and applies the granular Escape/backdrop opt-outs.
+ *
+ * It never renders chrome. Template and component content must have a
+ * `<mlv-dialog>` root; string content is wrapped by an internal renderer that
+ * composes the same parts.
+ */
+export declare class MlvDialogService {
+    /** @private The CDK engine. */
+    private readonly _cdk;
+    /** @private Registered size presets. */
+    private readonly _presets;
+    /** @private Open Malva refs in open order, so `closeAll()` can animate each. */
+    private readonly _open;
+    /** Snapshot of the currently open dialogs, oldest first. */
+    get openDialogs(): readonly MlvDialogRef[];
+    /**
+     * Opens `content` in a modal dialog.
+     *
+     * - `TemplateRef` receives `MlvDialogTemplateContext` (`let-dialog`,
+     *   `let-data="data"`, `let-config="config"`).
+     * - A component can inject `MlvDialogRef`, `DIALOG_CONFIG`, `DIALOG_DATA`
+     *   (and the CDK `DialogRef`).
+     * - A string is rendered as escaped text under `config.title`.
+     *
+     * @param content - Template, component type, or plain text.
+     * @param config - Size, chrome defaults, closing behaviour, focus, ARIA, data, injector.
+     * @returns A typed reference that controls the dialog and emits its result.
+     */
+    open<R = unknown, D = unknown>(content: MlvDialogContent<R, D>, config?: MlvDialogConfig<D>): MlvDialogRef<R, D>;
+    /**
+     * Opens a two-action confirmation dialog and reports the user's answer.
+     *
+     * Emits exactly once and completes, so it composes with a `CanDeactivateFn`
+     * or any other guard. The answer is replayed, so late subscribers still
+     * receive it — subscribing after the dialog has already closed is fine.
+     * Every dismissal that is not the confirm button — Escape, the backdrop,
+     * `ref.close()` — resolves as `false`. When the action is `destructive` (or
+     * has the `'danger'` tone) the dialog opens as an `alertdialog`, the confirm
+     * button turns danger-coloured and initial focus goes to **Cancel**. The
+     * message paragraph always describes the dialog (`aria-describedby`).
+     *
+     * @param options - Title, message, and optional labels/tone/size.
+     * @returns `true` only if confirmed.
+     */
+    confirm(options: MlvConfirmDialogOptions): Observable<boolean>;
+    /** Closes every open dialog, newest first, playing each leave animation. */
+    closeAll(): void;
+    /** @private Registers the ref and wires the Escape/backdrop close behaviours. */
+    private _track;
+    /** @private Resolves a preset name (unknown → `'m'`) or explicit size to CDK size fields. */
+    private _resolveSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MlvDialogService>;
+}

package/dialog/lib/generate-routable-dialog-route.d.ts

@@ -0,0 +1,49 @@
+import type { Type } from '@angular/core';
+import type { DefaultExport, Route } from '@angular/router';
+import type { MlvDialogConfig } from './dialog-config';
+/**
+ * Generates a route configuration that opens a component inside a routed dialog.
+ * When the dialog closes, the router navigates back to the parent route.
+ *
+ * The component receives the shell's `Injector`, so it can inject `ActivatedRoute`
+ * to access route params, resolved data, and query params. It can also inject
+ * `MlvDialogRef` to close itself programmatically.
+ *
+ * @param component - The component to render inside the dialog. Can be an eager class reference
+ *   or a lazy import function (e.g., `() => import('./my-dialog.component')`).
+ * @param options - Route path, named outlet, and dialog configuration options.
+ * @returns A `Route` object to include in your route configuration.
+ *
+ * @example
+ * ```ts
+ * // Lazy-loaded dialog route
+ * {
+ *   path: 'users',
+ *   component: UsersListPage,
+ *   children: [
+ *     mlvGenerateRoutableDialogRoute(
+ *       () => import('./user-edit.component'),
+ *       { path: ':id/edit', size: 'l' },
+ *     ),
+ *   ],
+ * }
+ *
+ * // Eager dialog route
+ * mlvGenerateRoutableDialogRoute(UserEditComponent, {
+ *   path: ':id/edit',
+ *   size: 'l',
+ *   closeOnBackdrop: false,
+ * })
+ *
+ * // With guards and resolvers (spread the returned route)
+ * {
+ *   ...mlvGenerateRoutableDialogRoute(() => import('./confirm.component'), { path: 'confirm' }),
+ *   canActivate: [authGuard],
+ *   resolve: { item: itemResolver },
+ * }
+ * ```
+ */
+export declare function mlvGenerateRoutableDialogRoute(component: Type<unknown> | (() => Promise<DefaultExport<Type<unknown>> | Type<unknown>>), { path, outlet, ...dialogOptions }?: {
+    path?: string;
+    outlet?: string;
+} & Omit<MlvDialogConfig, 'data' | 'injector'>): Route;

package/dialog/lib/inject-dialog-ref.d.ts

@@ -0,0 +1,8 @@
+import { MlvDialogRef } from './dialog-ref';
+/**
+ * @internal Injects the current `MlvDialogRef`, failing with a descriptive
+ * error when a dialog part is rendered outside a dialog.
+ *
+ * @param consumer - Selector of the part, used in the error message.
+ */
+export declare function injectDialogRef<R = unknown, D = unknown>(consumer: string): MlvDialogRef<R, D>;

package/dialog/lib/routable-dialog.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from "@angular/core";
+/**
+ * Invisible shell component that opens a routed component inside a Malva UI dialog.
+ *
+ * Do not use directly — use `mlvGenerateRoutableDialogRoute()` to create routes
+ * that render their component inside a dialog overlay.
+ *
+ * @internal
+ */
+export default class MlvRoutableDialog {
+    /** @private The current activated route — provides access to route data and snapshot. */
+    private readonly _route;
+    /** @private The Angular router used for navigating back to the parent route on close. */
+    private readonly _router;
+    /** @private The shell component's injector, passed to the dialog for ActivatedRoute access. */
+    private readonly _injector;
+    /** @private Captures the URL at construction time to detect external navigation. */
+    private readonly _initialUrl;
+    /** @private The Malva UI dialog service used to open the routed component. */
+    private readonly _dialog;
+    constructor();
+    /** @private Computes the relative back URL for lazy-loaded routes. */
+    private get _lazyLoadedBackUrl();
+    /** @private Navigates to parent when the dialog closes and URL hasn't changed externally. */
+    private _onDialogClosing;
+    /** @private Navigates to the parent route using the computed back URL. */
+    private _navigateToParent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvRoutableDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvRoutableDialog, "mlv-routable-dialog", never, {}, {}, never, never, true, never>;
+}

package/dialog/malva-ui-core-dialog.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/dialog" />
+export * from './index';

package/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/divider/divider';

package/divider/lib/divider/divider.d.ts

@@ -0,0 +1,64 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+/**
+ * Orientation of the divider line.
+ * - `'horizontal'` — a full-width horizontal rule (default)
+ * - `'vertical'` — a full-height vertical rule; requires the parent to have a defined height
+ */
+export type MlvDividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Divider component that renders a thin separator line between content sections.
+ *
+ * Renders an `<hr role="separator">` internally and supports an optional
+ * label projected via `<ng-content>`.  When a label is present the divider
+ * line is split into two segments flanking the label.
+ *
+ * @example Basic horizontal
+ * ```html
+ * <mlv-divider />
+ * ```
+ *
+ * @example With label
+ * ```html
+ * <mlv-divider>OR</mlv-divider>
+ * ```
+ *
+ * @example Vertical
+ * ```html
+ * <div style="display: flex; height: 2rem;">
+ *   <span>Left</span>
+ *   <mlv-divider orientation="vertical" />
+ *   <span>Right</span>
+ * </div>
+ * ```
+ *
+ * @example Dashed
+ * ```html
+ * <mlv-divider dashed />
+ * ```
+ *
+ * @example Muted
+ * ```html
+ * <mlv-divider muted />
+ * ```
+ */
+export declare class MlvDivider {
+    /**
+     * The orientation of the divider line.
+     * Defaults to `'horizontal'`.
+     */
+    readonly orientation: import("@angular/core").InputSignal<MlvDividerOrientation>;
+    /**
+     * When `true`, renders the divider line as a dashed stroke instead of solid.
+     * Supports attribute syntax: `<mlv-divider dashed>`.
+     */
+    readonly dashed: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, uses a more subtle border color (`--mlv-border-subtle`)
+     * instead of the default border token.
+     * Supports attribute syntax: `<mlv-divider muted>`.
+     */
+    readonly muted: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDivider, "mlv-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dashed": { "alias": "dashed"; "required": false; "isSignal": true; }; "muted": { "alias": "muted"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/divider/malva-ui-core-divider.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/divider" />
+export * from './index';

package/docs/ai/accordion.md

@@ -0,0 +1,102 @@
+# Library: accordion
+
+The internal disclosure trigger explicitly uses `type="button"` to remain
+form-safe.
+
+## Overview
+
+`@malva-ui/core/accordion` provides a vertically stacked, expandable-section
+component built on the **`@angular/aria`** accordion headless pattern
+(`AccordionGroup` / `AccordionTrigger` / `AccordionPanel` / `AccordionContent`)
+and wrapping the existing **`mlv-expand`** component for the open/close
+animation. `mlv-expand` stays standalone — the accordion consumes it, it is not
+edited.
+
+- **Leaf project (Nx):** `core-accordion` at *(internal)*
+- **Secondary entry point:** `@malva-ui/core/accordion` (also re-exported from the grouped `@malva-ui/core` barrel)
+- **Package tag:** `scope:ui`
+
+## Public API
+
+Exported from `@malva-ui/core/accordion`:
+
+| Symbol               | Kind      | Selector               | Description                                        |
+| -------------------- | --------- | ---------------------- | -------------------------------------------------- |
+| `MlvAccordion`       | Component | `mlv-accordion`        | Container / group. Coordinates items.              |
+| `MlvAccordionItem`   | Component | `mlv-accordion-item`   | A single expandable section (header + panel).      |
+| `MlvAccordionHeader` | Directive | `[mlvAccordionHeader]` | Marks projected rich-header content (icons, etc.). |
+
+## Components
+
+### `MlvAccordion` — `mlv-accordion`
+
+- **Change detection:** `OnPush` · **Encapsulation:** `None`
+- **Host directive:** `@angular/aria` `AccordionGroup` (applied via `hostDirectives`). This is required so the `ACCORDION_GROUP` DI token the group provides is on the `<mlv-accordion>` host-element injector, where the triggers rendered inside projected `mlv-accordion-item` children can inject it. (Applying the aria group to an inner template element would break that projection DI — verified.)
+- **Template:** `<ng-content />` (projects `mlv-accordion-item` children).
+
+#### Inputs (re-exposed verbatim from the aria `AccordionGroup`)
+
+These are forwarded through `hostDirectives` input aliasing — the aria directive owns the roles, keyboard listeners, roving/tab wiring, and `aria-*` attributes; the wrapper does not redeclare them (this avoids the Angular NG0950 "cannot set a host directive's input from host metadata" constraint hit elsewhere in the migration).
+
+| Input             | Type      | aria default | Description                                                                                                             |
+| ----------------- | --------- | ------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `multiExpandable` | `boolean` | `true`       | Allow multiple panels open at once. `false` = single-expand.                                                            |
+| `disabled`        | `boolean` | `false`      | Disable the whole group.                                                                                                |
+| `softDisabled`    | `boolean` | `true`       | When `true`, disabled items stay keyboard-focusable but inert; `false` skips them in navigation and hard-disables them. |
+| `wrap`            | `boolean` | `false`      | Wrap Arrow navigation from last header to first and vice-versa.                                                         |
+
+#### Methods
+
+| Method          | Description                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------- |
+| `expandAll()`   | Expand every item (only effective when `multiExpandable` is `true`). Delegates to the aria group. |
+| `collapseAll()` | Collapse every item.                                                                              |
+
+### `MlvAccordionItem` — `mlv-accordion-item`
+
+- **Change detection:** `OnPush` · **Encapsulation:** `None`
+- **Template:** `accordion-item.html`
+- **Imports:** aria `AccordionTrigger`/`AccordionPanel`/`AccordionContent`, `MlvExpand` (`@malva-ui/core/expand`), `LucideChevronDown`.
+
+#### Inputs
+
+| Input      | Type                | Default | Description                                                                                                                    |
+| ---------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `header`   | `string`            | `''`    | Plain-text header. For rich content, project `[mlvAccordionHeader]` instead.                                                   |
+| `disabled` | `boolean` (coerced) | `false` | Disable this item's trigger (`aria-disabled`). Focusability governed by the group's `softDisabled`. Supports attribute syntax. |
+
+#### Model (two-way)
+
+| Model      | Type      | Default | Description                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------- |
+| `expanded` | `boolean` | `false` | `[(expanded)]` two-way; kept in sync with the aria trigger model. Emits `expandedChange`. |
+
+#### Content slots
+
+- **Default slot** → panel content (lazily rendered, see below).
+- **`[mlvAccordionHeader]`** → rich header content, rendered inside the trigger button alongside/instead of `header`.
+
+### `MlvAccordionHeader` — `[mlvAccordionHeader]`
+
+Marker directive for projected rich-header content. Exported for consumer import/discoverability; the `<ng-content select="[mlvAccordionHeader]">` slot projects by attribute regardless.
+
+## Key design notes
+
+- **aria + `mlv-expand` composition (reuses the tree-migration learning).** The panel is `<div ngAccordionPanel [preserveContent]="true">` containing `<ng-template ngAccordionContent>` whose body is `<mlv-expand [opened]="expanded()">`. aria's `DeferredContent` renders the template lazily on first expand; `preserveContent=true` (exposed by the panel's `DeferredContentAware` host directive) then keeps it mounted so `mlv-expand`'s grid-row animation is never torn down mid-transition. Collapse hides content through `mlv-expand`'s own `@if (opened())`, not by unmounting the aria panel. Before the first expand, nothing is instantiated (true lazy).
+- **Not roving-single-tabbable.** aria's accordion computes each trigger's `tabindex` from `isFocusable` (not the active item), so **every** enabled header is Tab-reachable (`tabindex="0"`); Arrow Up/Down/Home/End provide additional navigation and move DOM focus. This is intentional per the aria pattern (differs from listbox/tabs roving).
+- **aria owns** `role="button"` (trigger) / `role="region"` (panel), `aria-expanded`, `aria-controls` ↔ `aria-labelledby` linkage, `inert` on collapsed panels, `aria-disabled`, and the group keydown/click/focusin handling. Single- vs multi-expand is aria's `multiExpandable`.
+- **`orientation` is fixed to `vertical`** by the aria accordion group (no horizontal accordion).
+
+## Styling
+
+- BEM blocks `.mlv-accordion` (bordered card container) and `.mlv-accordion-item` (heading button + panel). Chevron rotates 180° via the `.mlv-accordion-item--open` state class. All values use `--mlv-*` tokens; `prefers-reduced-motion` disables the chevron transition.
+
+## Dependencies
+
+- `@angular/aria/accordion` — headless pattern
+- `@angular/cdk/coercion` — `coerceBooleanProperty`
+- `@lucide/angular` — `LucideChevronDown`
+- `@malva-ui/core/expand` — the animated body (consumed, not modified)
+- `@malva-ui/styles` — SCSS mixins/tokens
+
+## Tests

package/docs/ai/action-bar.md

@@ -0,0 +1,198 @@
+# Library: action-bar
+
+## Overview
+
+The Action Bar library (`@malva-ui/core/action-bar`) provides a flexible header/toolbar container that can be fixed, sticky, anchored to the top or bottom of its container/viewport, and rendered either as a full-width bar or a content-width floating pill. An optional `contrast` mode flips the bar to a dark, inverted surface suitable for floating selection toolbars, and built-in enter/leave animations (via Angular 21's `animate.enter` / `animate.leave`) make the bar slide in and out smoothly whenever it enters or leaves the DOM. Child controls automatically adapt their colors inside a contrast bar.
+
+The bar is an attribute-selector component and uses signal-based inputs throughout, so it can be applied to any semantic element (`<header>`, `<nav>`, `<footer>`, etc.).
+
+## Public API
+
+Exported from `@malva-ui/core/action-bar`:
+
+| Export | Kind | Description |
+|--------|------|-------------|
+| `MlvActionBar` | Component | Main container — attribute selector `[mlvActionBar]` |
+| `MlvActionBarPosition` | Type alias | `'top' \| 'bottom'` — vertical anchor of the bar |
+| `MlvActionBarShape` | Type alias | `'default' \| 'pill'` — visual shape variant |
+| `MlvActionBarActions` | Directive | Responsive desktop-actions marker — `[mlvActionBarActions]` |
+| `MlvActionBarLogo` | Component | Logo/branding slot — `[mlvActionBarLogo]` |
+| `MlvActionBarSpacer` | Component | Flex spacer — `[mlvActionBarSpacer]` |
+
+---
+
+## Components
+
+### `MlvActionBar`
+
+- **Selector:** `[mlvActionBar]` (attribute)
+- **Change Detection:** `OnPush`
+- **Encapsulation:** `None`
+-  — `<ng-content></ng-content>`
+- 
+
+#### Inputs
+
+| Name       | Type                   | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ---------- | ---------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sticky`   | `BooleanInput`         | `false`     | Applies `position: sticky` so the bar stays pinned while its scroll container scrolls past it                                                                                                                                                                                                                                                                                                                               |
+| `fixed`    | `BooleanInput`         | `false`     | Applies `position: fixed` (with `z-index: var(--mlv-z-sticky, 200)`) so the bar stays pinned to the viewport. When combined with `shape="pill"`, the bar is auto-centered horizontally                                                                                                                                                                                                                                      |
+| `position` | `MlvActionBarPosition` | `'top'`     | Vertical placement of the bar. Acts as the anchor edge when combined with `fixed` or `sticky`, and selects the enter/leave animation direction                                                                                                                                                                                                                                                                              |
+| `shape`    | `MlvActionBarShape`    | `'default'` | Visual shape. `'default'` is a full-width bar with a flush border; `'pill'` is a content-width floating pill with a fully rounded radius and a strong drop shadow                                                                                                                                                                                                                                                           |
+| `wrap`     | `BooleanInput`         | `false`     | Lets the bar's content flow onto further lines once it no longer fits on one, instead of overflowing its container. Off by default so an application navigation bar keeps its single-row geometry and sheds controls through `[mlvActionBarActions]`; turn it on for content-heavy bars (e.g. a workflow toolbar projected into `mlv-page-dock`). Nothing wraps while there is room, so the wide-viewport look is unchanged |
+| `contrast` | `BooleanInput`         | `false`     | Renders the bar on a dark, inverted surface so it stands out from the surrounding content. On the light theme the bar becomes a distinctive near-black surface; on the dark theme it flips to a slightly lighter surface so it still reads as elevated. Child `mlv-button` controls automatically re-tokenize their text/background colors to remain readable                                                               |
+
+#### Host Bindings
+
+```ts
+host: {
+  class: 'mlv-action-bar',
+  '[class.mlv-action-bar--fixed]': 'fixed()',
+  '[class.mlv-action-bar--sticky]': 'sticky()',
+  '[class.mlv-action-bar--pos-top]': 'position() === "top"',
+  '[class.mlv-action-bar--pos-bottom]': 'position() === "bottom"',
+  '[class.mlv-action-bar--shape-pill]': 'shape() === "pill"',
+  '[class.mlv-action-bar--wrap]': 'wrap()',
+  '[class.mlv-action-bar--contrast]': 'contrast()',
+  'animate.enter': 'mlv-action-bar--enter',
+  'animate.leave': 'mlv-action-bar--leave',
+}
+```
+
+The `animate.enter` / `animate.leave` host attributes are set statically — Angular only applies them when the element actually enters or leaves the DOM (e.g. when guarded by `@if`). A statically-rendered navigation bar is therefore unaffected.
+
+#### Styles Summary
+
+- Flexbox layout, center aligned, full width by default
+- Component-scoped CSS variables for theming: `--mlv-action-bar-bg`, `--mlv-action-bar-fg`, `--mlv-action-bar-border`, `--mlv-action-bar-shadow`, plus `--mlv-action-bar-translate-x` which composes X centering through the enter/leave keyframes
+- `backdrop-filter: blur(1.25rem)` on the default shape for a glassy translucent surface
+- `--mlv-action-bar--pos-top`: anchors to top (`top: 0`), keeps `border-bottom`
+- `--mlv-action-bar--pos-bottom`: anchors to bottom (`bottom: 0`), swaps to `border-top`
+- `--mlv-action-bar--fixed`: `position: fixed` with `z-index: var(--mlv-z-sticky, 200)`
+- `--mlv-action-bar--sticky`: `position: sticky`
+- `--mlv-action-bar--wrap`: `flex-wrap: wrap` — the base `gap` already supplies the row spacing
+- `--mlv-action-bar--shape-pill`: content-width, `max-width: calc(100% - 2rem)`, `padding: 0.375rem 0.5rem 0.375rem 0.75rem`, `border-radius: var(--mlv-radius-full)`, strong two-layer drop shadow, no backdrop filter
+- `.mlv-action-bar--shape-pill.mlv-action-bar--fixed`: sets `--mlv-action-bar-translate-x: -50%` and uses `left: 50%; transform: translateX(-50%)` for automatic horizontal centering; `pos-top` anchors to `top: var(--mlv-spacing-3)` and `pos-bottom` to `bottom: var(--mlv-spacing-4)`
+- `--mlv-action-bar--contrast`: overrides the CSS variables to render a near-black surface on the light theme (`--mlv-palette-neutral-900`) and a slightly lighter elevated surface on the dark theme (`--mlv-palette-neutral-700` under `[mlvTheme='dark']`). Button tokens are re-targeted inside a contrast bar so transparent buttons stay readable and primary buttons flip to an inverse color pair
+- Enter/leave keyframes: `mlv-action-bar-enter-top` / `-leave-top` for top-anchored bars slide from `translateY(-0.75rem)`; `mlv-action-bar-enter-bottom` / `-leave-bottom` for bottom-anchored bars slide from `translateY(1.25rem)` with a subtle `scale(0.96)` pop. All keyframes use `translate(var(--mlv-action-bar-translate-x), Yrem)` so pill+fixed bars preserve their horizontal centering throughout the animation
+- `@media (prefers-reduced-motion: reduce)` collapses the animation duration to 1ms
+
+#### Types
+
+```ts
+export type MlvActionBarPosition = 'top' | 'bottom';
+export type MlvActionBarShape = 'default' | 'pill';
+```
+
+---
+
+### `MlvActionBarLogo`
+
+**Files:**
+
+- *(internal)*
+- *(internal)*
+
+- **Selector:** `[mlvActionBarLogo]` (attribute)
+- **Change Detection:** `OnPush`
+- **Encapsulation:** `None`
+- **Template:** Inline — `<ng-content />`
+
+#### Host Bindings
+
+```ts
+host: { 'class': 'mlv-action-bar__logo' }
+```
+
+#### Styles
+
+- `display: flex; align-items: center; gap: 0.25rem`
+- `text-decoration: none; color: var(--mlv-text-primary)`
+- `font: var(--mlv-typography-heading-h5)`
+
+Inside a `.mlv-action-bar--contrast` bar the logo color is overridden to `var(--mlv-action-bar-fg)` so it remains readable on the dark surface.
+
+Form controls are re-tokenized the same way buttons are: `.mlv-action-bar--contrast .mlv-form-control-wrapper` overrides `--container-background-color` (10% fg over transparent), `--container-border-color` (22% fg), `--container-side-content-color`, and `--container-action-color`, and native `input`/`textarea`/`select` elements get the bar foreground for text/caret with a 55%-fg placeholder — so e.g. `mlv-search-field` in a dark pill navbar renders on a smoky translucent surface instead of its default light elevation background.
+
+---
+
+### `MlvActionBarActions`
+
+- **Selector:** `[mlvActionBarActions]`
+- **Host class:** `mlv-action-bar__actions`
+- Hides desktop-only navigation controls at the medium breakpoint and below; the responsive rule is owned by `action-bar.scss`.
+
+---
+
+### `MlvActionBarSpacer`
+
+- **Selector:** `[mlvActionBarSpacer]` (attribute)
+- **Change Detection:** `OnPush`
+- **Encapsulation:** `None`
+- **Template:** Inline — `<ng-content />`
+
+#### Host Bindings
+
+```ts
+host: { 'class': 'mlv-action-bar__spacer' }
+```
+
+#### Styles (inline)
+
+- `display: inline-flex; flex-grow: 1` — fills all available horizontal space, pushing sibling elements to the right
+
+---
+
+## Directives
+
+None.
+
+## Services
+
+None.
+
+---
+
+## Usage Examples
+
+### Default top navigation bar
+
+```html
+<header mlvActionBar sticky>
+  <a mlvActionBarLogo href="/">
+    <img src="logo.svg" alt="Brand" width="32" height="32" />
+    Brand Name
+  </a>
+  <nav mlvActionBarActions aria-label="Primary navigation">
+    <a mlvButton variant="transparent" href="/projects">Projects</a>
+  </nav>
+  <mlv-spacer />
+  <button mlvButton variant="transparent">Sign In</button>
+</header>
+```
+
+### Floating bottom pill (selection toolbar)
+
+```html
+@if (selected().size > 0) {
+<nav mlvActionBar fixed position="bottom" shape="pill" contrast>
+  <span>{{ selected().size }} selected</span>
+  <div mlvActionBarSpacer></div>
+  <button mlvButton variant="transparent" size="small">Export</button>
+  <button mlvButton variant="transparent" size="small">Delete</button>
+  <button mlvButton variant="primary" size="small" (click)="clear()" aria-label="Clear">
+    <svg lucideX [size]="16" />
+  </button>
+</nav>
+}
+```
+
+The `@if` guard is what makes the bar enter and leave the DOM, which in turn triggers Angular's `animate.enter` / `animate.leave` attributes bound on the host. For a bar that should always be present, simply render it unconditionally.
+
+---
+
+## Dependencies
+
+- `@angular/core` ^22.0.0
+- `@angular/cdk/coercion` — `BooleanInput`, `coerceBooleanProperty`
+- Malva UI CSS design tokens (`--mlv-*`)