@malva-ui/core 0.1.12

package/docs/ai/skeleton.md

@@ -0,0 +1,187 @@
+# Library: skeleton
+
+## Overview
+
+`@malva-ui/core/skeleton` provides a skeleton loader component (`mlv-skeleton`) used as a visual placeholder while content is loading. It renders a pulsing shimmer animation that communicates the shape of the incoming content before it arrives. Three shape variants are available: `rectangle` (default), `text` (pill, mimics a line of text), and `circle` (for avatar/icon placeholders). Width and height are applied directly on the host element via inline styles. The component is always `aria-hidden="true"` — it carries no semantic meaning for assistive technology. The shimmer animation is automatically disabled when the user has enabled `prefers-reduced-motion`.
+
+Package import path: `@malva-ui/core/skeleton`
+
+---
+
+## Public API
+
+| Export               | Kind       | Description                                                                                      |
+| -------------------- | ---------- | ------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------ |
+| `MlvSkeleton`        | Component  | Pulsing placeholder element (`mlv-skeleton`) with configurable shape, dimensions, and animation. |
+| `MlvSkeletonVariant` | Type alias | `'text'                                                                                          | 'circle' | 'rectangle'` — the visual shape of the skeleton. |
+
+---
+
+## Components
+
+### `MlvSkeleton`
+
+| Property           | Value                                                              |
+| ------------------ | ------------------------------------------------------------------ |
+| Selector           | `mlv-skeleton`                                                     |
+| Change Detection   | `OnPush`                                                           |
+| View Encapsulation | `None`                                                             |
+| Template           | Inline — empty string `''` (the host element is the entire visual) |
+| Styles             | `skeleton.scss`                                                    |
+
+#### Inputs
+
+| Input               | Type                                  | Default       | Description                                                                                                                                                                                            |
+| ------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`           | `MlvSkeletonVariant`                  | `'rectangle'` | Visual shape. `'rectangle'` is a standard block; `'text'` is a pill-shaped line mimicking text; `'circle'` is fully rounded for avatar/icon placeholders.                                              |
+| `width`             | `string`                              | `'100%'`      | CSS width applied inline on the host element. Accepts any valid CSS width value (e.g. `'100%'`, `'12rem'`, `'200px'`).                                                                                 |
+| `height`            | `string`                              | `'1rem'`      | CSS height applied inline on the host element. Accepts any valid CSS height value (e.g. `'1rem'`, `'48px'`).                                                                                           |
+| `animated`          | `BooleanInput` (coerced to `boolean`) | `true`        | Whether the shimmer animation is active. Set to `false` for a static placeholder (e.g. reduced-motion, or when you want no distraction). Supports attribute syntax: `<mlv-skeleton animated>`.         |
+| `animationDuration` | `string`                              | `'2s'`        | CSS duration for the shimmer animation (e.g. `'1s'`, `'0.8s'`). Passed as the `--mlv-skeleton-duration` CSS custom property on the host, controlling the `animation-duration` of the shimmer keyframe. |
+
+#### Outputs
+
+None.
+
+#### Host Bindings
+
+| Binding                           | Value                                                                |
+| --------------------------------- | -------------------------------------------------------------------- |
+| `class`                           | `'mlv-skeleton'` (static block class)                                |
+| `[class]`                         | `'"mlv-skeleton--" + variant()` — applies the variant modifier class |
+| `[class.mlv-skeleton--animated]`  | `animated()`                                                         |
+| `aria-hidden`                     | `'true'` (static — always hidden from assistive technology)          |
+| `[style.width]`                   | `width()`                                                            |
+| `[style.height]`                  | `height()`                                                           |
+| `[style.--mlv-skeleton-duration]` | `animationDuration()`                                                |
+
+#### Content Projection
+
+None. The component has an empty inline template (`template: ''`). The skeleton is purely a visual host element.
+
+#### SCSS Structure
+
+```
+@keyframes mlv-skeleton-shimmer    — animates background-position from 200% → -200% center
+
+.mlv-skeleton                      — block: display:block, background: --mlv-skeleton-base, border-radius --mlv-radius-s
+  &--animated                       — shimmer gradient (90deg, base → highlight → base), background-size 400% 100%
+                                      animation: mlv-skeleton-shimmer var(--mlv-skeleton-duration, 2s) infinite
+                                      @media(prefers-reduced-motion): animation:none, static background
+  &--text                           — border-radius: --mlv-radius-xxl (pill), height: 0.875em
+  &--circle                         — border-radius: 50%
+  &--rectangle                      — border-radius: --mlv-radius-s (same as block default)
+```
+
+**Component-scoped CSS variables:**
+
+| Variable                   | Default                              | Purpose                                           |
+| -------------------------- | ------------------------------------ | ------------------------------------------------- |
+| `--mlv-skeleton-base`      | `var(--mlv-background-neutral-1)`    | Background color of the skeleton body             |
+| `--mlv-skeleton-highlight` | `var(--mlv-background-base)`         | Lighter highlight color used in the shimmer sweep |
+| `--mlv-skeleton-duration`  | `2s` (via `animationDuration` input) | Controls the shimmer animation speed              |
+
+Both `--mlv-skeleton-base` and `--mlv-skeleton-highlight` can be overridden by the parent context for custom theming.
+
+---
+
+## Interfaces & Types
+
+### `MlvSkeletonVariant`
+
+```ts
+export type MlvSkeletonVariant = 'text' | 'circle' | 'rectangle';
+```
+
+| Value         | Visual                              | Use case                              |
+| ------------- | ----------------------------------- | ------------------------------------- |
+| `'rectangle'` | Rectangular block with small radius | Cards, images, generic content blocks |
+| `'text'`      | Pill-shaped line (0.875em tall)     | Text lines, labels                    |
+| `'circle'`    | Fully round circle                  | Avatars, icon placeholders            |
+
+---
+
+## Usage Examples
+
+### Default rectangle (full-width, 1rem tall)
+
+```html
+<mlv-skeleton />
+```
+
+### Circle avatar placeholder
+
+```html
+<mlv-skeleton variant="circle" width="2.5rem" height="2.5rem" />
+```
+
+### Text line placeholder (partial width)
+
+```html
+<mlv-skeleton variant="text" width="60%" />
+```
+
+### Multiple text line placeholders (simulating a paragraph)
+
+```html
+<div style="display: flex; flex-direction: column; gap: 0.5rem;">
+  <mlv-skeleton variant="text" width="90%" />
+  <mlv-skeleton variant="text" width="80%" />
+  <mlv-skeleton variant="text" width="65%" />
+</div>
+```
+
+### Card skeleton (avatar + text lines)
+
+```html
+<div style="display: flex; align-items: center; gap: 1rem; padding: 1rem;">
+  <mlv-skeleton variant="circle" width="3rem" height="3rem" />
+  <div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem;">
+    <mlv-skeleton variant="text" width="50%" />
+    <mlv-skeleton variant="text" width="80%" />
+  </div>
+</div>
+```
+
+### Static (no animation) placeholder
+
+```html
+<mlv-skeleton [animated]="false" width="12rem" height="2rem" />
+```
+
+### Faster shimmer animation
+
+```html
+<mlv-skeleton animationDuration="1s" />
+```
+
+### Conditional rendering (show skeleton while loading)
+
+```html
+@if (isLoading()) {
+<mlv-skeleton variant="rectangle" width="100%" height="10rem" />
+} @else {
+<img [src]="imageUrl()" [alt]="imageAlt()" />
+}
+```
+
+---
+
+## Accessibility
+
+The `mlv-skeleton` component is always `aria-hidden="true"`. It must never be the only content presented to screen reader users — ensure that meaningful content replaces skeletons once loading completes. Consider pairing skeletons with a live region (`aria-live="polite"`) on the container that announces loading state changes.
+
+The shimmer animation is automatically suppressed when the user has enabled the `prefers-reduced-motion` media query — the component falls back to a static colored background.
+
+---
+
+## Dependencies
+
+### Angular / third-party
+
+- `@angular/core`
+- `@angular/cdk/coercion` (`BooleanInput`, `coerceBooleanProperty`)
+
+### Internal
+
+- `@malva-ui/styles` (SCSS mixins and CSS design tokens referenced in `skeleton.scss`)

package/docs/ai/slider.md

@@ -0,0 +1,180 @@
+# Library: slider
+
+## Overview
+
+The Slider library (`@malva-ui/core/slider`) provides a range slider component (`mlv-slider`) for selecting numeric values or numeric ranges. It supports single-thumb (value) and dual-thumb (range) modes, horizontal and vertical orientation, optional tick marks, live value tooltips with custom renderers, keyboard navigation, all three Angular forms APIs through `MlvSignalFormControlBase<MlvSliderValue>`, and density scaling through `@malva-ui/cdk/density`.
+
+## Public API
+
+Exported from `@malva-ui/core/slider`:
+
+| Export                    | Kind      | Description                                                     |
+| ------------------------- | --------- | --------------------------------------------------------------- |
+| `MlvSlider`         | Component | Range slider — `mlv-slider`                                     |
+| `MlvSliderTooltipDef`        | Directive | `[mlvSliderTooltipDef]` custom tooltip renderer                  |
+| `MlvSliderValue`             | Type      | `number \| [number, number]`                                    |
+| `MlvSliderTooltipDefContext` | Interface | Custom tooltip context with `$implicit`, `value`, and `thumb`    |
+| `MlvSliderTooltipThumb`      | Type      | Semantic thumb identity: `'value' \| 'min' \| 'max'`             |
+
+---
+
+## Components
+
+### `MlvSlider`
+
+**Selector:** `mlv-slider` | **Change Detection:** `OnPush`
+
+Extends `MlvSignalFormControlBase<MlvSliderValue>` from `@malva-ui/core/form-utils`. Its `value = model<MlvSliderValue>(0)` is the single source for the scalar/range selection and implements `FormValueControl<MlvSliderValue>` without a CVA provider.
+
+#### Inputs
+
+| Name          | Type                         | Default        | Description                                                                    |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------------------------------------------ |
+| `min`         | `number`                     | `0`            | Minimum value                                                                  |
+| `max`         | `number`                     | `100`          | Maximum value                                                                  |
+| `step`        | `number`                     | `1`            | Step increment                                                                 |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Track direction; vertical runs bottom-to-top and requires a height on the host |
+| `showTicks`   | `BooleanInput`               | `false`        | Render tick marks at each step                                                 |
+| `range`       | `BooleanInput`               | `false`        | Dual-thumb range mode; value becomes `[number, number]`                        |
+| `tooltip`     | `BooleanInput`               | `false`        | Show live thumb values on hover, drag, and keyboard focus                      |
+| `disabled`    | `BooleanInput`               | `false`        | _(inherited)_ Disables interaction                                             |
+| `label`       | `string`                     | `''`           | _(inherited)_ `aria-label` for single-thumb mode                               |
+
+#### Host Bindings
+
+```ts
+host: {
+  class: 'mlv-slider',
+  '[class.mlv-slider--range]': 'range()',
+  '[class.mlv-slider--disabled]': 'computedDisabled()',
+  '[class.mlv-slider--has-ticks]': 'showTicks()',
+  '[class.mlv-slider--vertical]': '_isVertical()',
+  '[class.mlv-slider--dragging]': '_activeDragThumb() !== null',
+  '[style.--mlv-slider-fill-start]': '_fillStart()',
+  '[style.--mlv-slider-fill-end]': '_fillEnd()',
+  '(pointerdown)': '_onTrackPointerDown($event)',
+}
+```
+
+#### Density
+
+Uses `MlvCompactComfortableDensity` as a `hostDirective` (no spacious support — sliders are already compact in comfortable mode). Provides `MLV_DENSITY_ELEMENT = 'slider'`.
+
+CSS density classes applied: `mlv-slider--compact`, `mlv-slider--comfortable`.
+
+#### Keyboard Navigation
+
+| Key                       | Action                                 |
+| ------------------------- | -------------------------------------- |
+| `ArrowRight` / `ArrowUp`  | Increase focused thumb by `step`       |
+| `ArrowLeft` / `ArrowDown` | Decrease focused thumb by `step`       |
+| `PageUp`                  | Increase focused thumb by 10% of range |
+| `PageDown`                | Decrease focused thumb by 10% of range |
+| `Home`                    | Move focused thumb to `min`            |
+| `End`                     | Move focused thumb to `max`            |
+
+#### ARIA
+
+- `role="slider"` on each thumb
+- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` bound reactively
+- `aria-orientation` reflects the `orientation` input
+- `aria-disabled` when disabled
+- `aria-label` describes each thumb (`"Value"`, `"Minimum value"`, `"Maximum value"`)
+- Tooltip bubbles are visual-only (`aria-hidden="true"`) because `aria-valuenow` already exposes the live value without duplicate announcements
+
+#### Pointer interaction (internal)
+
+- The `.mlv-slider__track` element carries a `#track` template ref and is resolved with a signal `viewChild` (`_trackRef = viewChild<ElementRef<HTMLElement>>('track')`) — no `querySelector` on the host (it is the component's own static template element).
+- On `pointerdown` the track's `DOMRect` is measured once and cached in `_dragTrackRect`; the window `pointermove` handler reuses that cached rect for its percent math instead of forcing a `getBoundingClientRect` layout read per move. The cache is cleared on `pointerup` or `pointercancel` (`_pointerToPercent` falls back to a fresh `_trackRef()` measurement outside a drag). The move stream stays in-zone: sub-step thumb tracking (`_lowDragPercent`/`_highDragPercent`) needs change detection each move for smooth dragging.
+
+### `MlvSliderTooltipDef`
+
+**Selector:** `[mlvSliderTooltipDef]`
+
+The structural directive supplies an optional inline renderer for tooltip text.
+The context exposes the current number as both `$implicit` and `value`, plus the
+semantic `thumb` identity (`'value'`, `'min'`, or `'max'`). Tooltips are
+positioned as thumb siblings, so their content is not distorted by thumb
+hover/press transforms and follows raw drag geometry without overlay layout
+work.
+
+---
+
+## Usage Examples
+
+```html
+<!-- Single value -->
+<mlv-slider [min]="0" [max]="100" [(ngModel)]="volume" />
+
+<!-- Range -->
+<mlv-slider [range]="true" [min]="0" [max]="1000" [step]="50" [(ngModel)]="priceRange" />
+
+<!-- Discrete with ticks -->
+<mlv-slider [min]="0" [max]="5" [step]="1" [showTicks]="true" [(ngModel)]="rating" />
+
+<!-- Reactive Forms -->
+<mlv-slider [formControl]="myControl" />
+
+<!-- Density override -->
+<mlv-slider mlvDensity="compact" [min]="0" [max]="10" />
+
+<!-- Vertical (host must have a height) -->
+<mlv-slider orientation="vertical" style="height: 10rem;" [(ngModel)]="volume" />
+
+<!-- Vertical range -->
+<mlv-slider orientation="vertical" [range]="true" style="height: 12rem;" [(ngModel)]="tempRange" />
+
+<!-- Default live value tooltip -->
+<mlv-slider tooltip [(ngModel)]="volume" />
+
+<!-- Custom tooltip renderer -->
+<mlv-slider tooltip range [(ngModel)]="priceRange">
+  <ng-template mlvSliderTooltipDef let-value let-thumb="thumb"> {{ thumb === 'min' ? 'From' : 'To' }}: {{ value | currency }} </ng-template>
+</mlv-slider>
+```
+
+---
+
+## CSS Custom Properties
+
+| Property                          | Default                               | Description                          |
+| --------------------------------- | ------------------------------------- | ------------------------------------ |
+| `--mlv-slider-track-height`       | `0.25rem`                             | Track bar height                     |
+| `--mlv-slider-thumb-size`         | `1.25rem`                             | Thumb circle diameter                |
+| `--mlv-slider-thumb-border-width` | `0.125rem`                            | Thumb border width                   |
+| `--mlv-slider-tooltip-gap`        | `0.5rem`                              | Distance between a thumb and tooltip |
+| `--mlv-slider-tooltip-background` | `var(--mlv-palette-neutral-950)`      | Tooltip background color             |
+| `--mlv-slider-tooltip-color`      | `var(--mlv-text-primary-on-accent-1)` | Tooltip foreground color             |
+| `--mlv-slider-fill-start`         | `0%`                                  | Fill region start (set by component) |
+| `--mlv-slider-fill-end`           | `0%`                                  | Fill region end (set by component)   |
+
+Compact density reduces track height to `0.1875rem` and thumb size to `1rem`.
+
+---
+
+## Internationalization (i18n)
+
+Thumb `aria-label`s resolve through `MLV_SLIDER_I18N` (`@malva-ui/i18n`):
+`minValue` (single / min thumb), `maxValue` (range max thumb), and `value` (fallback when no `label` input is set). Provide `provideMlvI18nTesting()` in specs that instantiate the component.
+
+## Dependencies
+
+| Package                     | Role                                                      |
+| --------------------------- | --------------------------------------------------------- |
+| `@angular/common`           | `NgTemplateOutlet` for custom tooltip rendering           |
+| `@angular/core`             | Signals, DI, component                                    |
+| `@angular/forms/signals`    | `FormValueControl` binding through the shared signal base |
+| `@angular/cdk/coercion`     | Boolean coercion                                          |
+| `@malva-ui/core/form-utils` | `MlvSignalFormControlBase`, `MLV_FORM_CONTROL`            |
+| `@malva-ui/cdk/density`     | `MlvCompactComfortableDensity`, `MLV_DENSITY_ELEMENT`     |
+
+---
+
+## File Structure
+
+---
+
+## Field surface (2026-08)
+
+- The single-thumb slider's accessible name is now `ariaLabel() || label() || i18n.value` — the inherited `ariaLabel` input takes precedence over `label`. Range mode is unchanged: the two thumbs keep the i18n `minValue` / `maxValue` names, which stay unambiguous.
+- No `aria-required`: ARIA does not allow `aria-required` on `role="slider"`, so the inherited `required` input has no ARIA effect here.

package/docs/ai/split-pane.md

@@ -0,0 +1,235 @@
+# Library: split-pane
+
+## Overview
+
+`@malva-ui/core/split-pane` provides a resizable split-pane container for dividing screen space into two or more panels separated by draggable handles. Panels are declared as `<mlv-split-pane-panel>` children; the parent automatically inserts drag handles between each adjacent pair and manages sizes via CSS `grid-template-columns` / `grid-template-rows` in fractional units.
+
+Key features:
+- Horizontal (side-by-side) and vertical (top/bottom) orientations
+- Any number of panels (2+)
+- Pointer-capture drag resize using RxJS streams
+- Keyboard resize via arrow keys (±1% per press) and Home/End (jump to min-size boundary)
+- Per-panel `size` (initial %) and `minSize` (floor %) inputs
+- `role="separator"` + `tabindex="0"` on each handle for WCAG AA compliance
+- Fully CSS-driven grip visuals — no icon library dependency
+
+---
+
+## Public API
+
+| Export                    | Kind       | Description                                                                            |
+| ------------------------- | ---------- | -------------------------------------------------------------------------------------- | ----------- |
+| `MlvSplitPane`            | Component  | Container that divides its children into resizable panels. Selector: `mlv-split-pane`. |
+| `MlvSplitPanePanel`       | Component  | Individual panel inside a `mlv-split-pane`. Selector: `mlv-split-pane-panel`.          |
+| `MlvSplitPaneOrientation` | Type alias | `'horizontal'                                                                          | 'vertical'` |
+
+> **Note:** `MlvSplitPaneStart` (`[mlvSplitPaneStart]`) and `MlvSplitPaneEnd` (`[mlvSplitPaneEnd]`) exist as source files but are **not** exported from the public `index.ts`. They are internal slot markers only.
+
+---
+
+## Components
+
+### `MlvSplitPane`
+
+```
+Selector:          mlv-split-pane
+Template:          inline — <ng-content />
+Change Detection:  OnPush
+Encapsulation:     None (BEM scoping)
+```
+
+#### Inputs
+
+| Input         | Type                      | Default        | Description                                                                         |
+| ------------- | ------------------------- | -------------- | ----------------------------------------------------------------------------------- |
+| `orientation` | `MlvSplitPaneOrientation` | `'horizontal'` | `'horizontal'` renders panels side-by-side; `'vertical'` stacks them top-to-bottom. |
+
+#### Outputs
+
+None.
+
+#### Host Bindings
+
+| Binding                              | Value                                                |
+| ------------------------------------ | ---------------------------------------------------- |
+| `class`                              | `'mlv-split-pane'` (static)                          |
+| `[class.mlv-split-pane--horizontal]` | `orientation() === 'horizontal'`                     |
+| `[class.mlv-split-pane--vertical]`   | `orientation() === 'vertical'`                       |
+| `[class.mlv-split-pane--dragging]`   | `_isDragging()` — set while a pointer drag is active |
+
+#### Content Children
+
+| Query     | Type                                 | Description                                                                                                |
+| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| `_panels` | `contentChildren(MlvSplitPanePanel)` | All direct `mlv-split-pane-panel` children, queried after content init to compute and apply initial sizes. |
+
+#### Behaviour
+
+- `ngAfterContentInit`: reads `_panels()`, calls `_computeInitialSizes()` to distribute percentages, then inserts a `div.mlv-split-pane__handle` DOM node after every panel except the last via `Renderer2`.
+- **Drag**: each handle wires a `pointerdown → pointermove → pointerup` RxJS chain using `fromEvent` + `switchMap` + `takeUntilDestroyed`. Pointer capture is set on `pointerdown` to track the pointer even when it leaves the element. Only the two panels adjacent to the dragged handle resize; all others are unaffected. **The stream runs via `NgZone.runOutsideAngular`**: each `pointermove` writes the grid template imperatively (`_applyGridTemplate`) and buffers the running sizes in `_dragSizes` **without touching a signal**, so a fast drag no longer schedules an OnPush change-detection pass per move. Only `_isDragging` (a host-class binding) and the single final `_sizes` commit re-enter the zone (`NgZone.run`) — `_isDragging` on `pointerdown`, and both `_isDragging=false` + `_sizes.set(_dragSizes)` once on `pointerup`. There are no per-move outputs, so no emission-timing contract is affected.
+- **Keyboard**: `keydown` listeners on each handle handle `ArrowLeft`/`ArrowRight` (horizontal) and `ArrowUp`/`ArrowDown` (vertical) for ±1% steps, and `Home`/`End` to snap to min-size boundaries.
+- **Grid template**: sizes are stored as `number[]` in `fr` units (≈ percentage). `_applyGridTemplate()` rebuilds `grid-template-columns` (or `grid-template-rows`) with `0.125rem` fixed tracks for handles between panel tracks.
+
+#### Template Summary
+
+Inline template — renders `<ng-content />` only. All handles are inserted imperatively into the DOM by `ngAfterContentInit` via `Renderer2`.
+
+---
+
+### `MlvSplitPanePanel`
+
+```
+Selector:          mlv-split-pane-panel
+Template:          inline — <ng-content />
+Change Detection:  OnPush
+Encapsulation:     None (BEM scoping)
+```
+
+#### Inputs
+
+| Input     | Type                  | Default     | Description                                                                                                                  |
+| --------- | --------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `size`    | `number \| undefined` | `undefined` | Initial size of this panel as a percentage of the container. Panels without a `size` share the remaining percentage equally. |
+| `minSize` | `number`              | `5`         | Minimum size of this panel as a percentage. Drag and keyboard resize cannot reduce this panel below this value.              |
+
+#### Outputs
+
+None.
+
+#### Host Bindings
+
+| Binding | Value                              |
+| ------- | ---------------------------------- |
+| `class` | `'mlv-split-pane__panel'` (static) |
+
+#### Internal API
+
+| Member        | Description                                                                                                                               |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `_elementRef` | `ElementRef<HTMLElement>` injected and exposed as `readonly` so the parent `MlvSplitPane` can read `getBoundingClientRect()` during drag. |
+
+---
+
+## Directives
+
+### `MlvSplitPaneStart` _(internal — not in public index)_
+
+```
+Selector: [mlvSplitPaneStart]
+Host class: mlv-split-pane__start
+```
+
+Slot marker for the **start** pane (left in horizontal, top in vertical). Not exported from the public `index.ts`.
+
+### `MlvSplitPaneEnd` _(internal — not in public index)_
+
+```
+Selector: [mlvSplitPaneEnd]
+Host class: mlv-split-pane__end
+```
+
+Slot marker for the **end** pane (right in horizontal, bottom in vertical). Not exported from the public `index.ts`.
+
+---
+
+## Interfaces & Types
+
+### `MlvSplitPaneOrientation`
+
+```ts
+type MlvSplitPaneOrientation = 'horizontal' | 'vertical';
+```
+
+Controls the axis along which panels are arranged. `'horizontal'` → column-based grid (panels side by side); `'vertical'` → row-based grid (panels stacked).
+
+---
+
+## Usage Examples
+
+### Basic 2-panel (horizontal, default)
+
+```html
+<mlv-split-pane style="height: 400px;">
+  <mlv-split-pane-panel [size]="30">
+    <p>Sidebar content</p>
+  </mlv-split-pane-panel>
+  <mlv-split-pane-panel>
+    <p>Main content</p>
+  </mlv-split-pane-panel>
+</mlv-split-pane>
+```
+
+### Vertical split
+
+```html
+<mlv-split-pane orientation="vertical" style="height: 600px;">
+  <mlv-split-pane-panel [size]="40" [minSize]="20">
+    <p>Top pane</p>
+  </mlv-split-pane-panel>
+  <mlv-split-pane-panel>
+    <p>Bottom pane</p>
+  </mlv-split-pane-panel>
+</mlv-split-pane>
+```
+
+### 3-panel layout
+
+```html
+<mlv-split-pane style="height: 500px;">
+  <mlv-split-pane-panel [size]="20" [minSize]="10">Nav</mlv-split-pane-panel>
+  <mlv-split-pane-panel>Editor</mlv-split-pane-panel>
+  <mlv-split-pane-panel [size]="25" [minSize]="10">Properties</mlv-split-pane-panel>
+</mlv-split-pane>
+```
+
+### With Angular component integration
+
+```ts
+import { MlvSplitPane, MlvSplitPanePanel } from '@malva-ui/core/split-pane';
+
+@Component({
+  imports: [MlvSplitPane, MlvSplitPanePanel],
+  template: `
+    <mlv-split-pane [orientation]="splitOrientation()" style="height: 100%;">
+      <mlv-split-pane-panel [size]="sidebarSize()" [minSize]="15">
+        <app-sidebar />
+      </mlv-split-pane-panel>
+      <mlv-split-pane-panel>
+        <app-main-content />
+      </mlv-split-pane-panel>
+    </mlv-split-pane>
+  `,
+})
+export class LayoutComponent {
+  readonly splitOrientation = signal<MlvSplitPaneOrientation>('horizontal');
+  readonly sidebarSize = signal(25);
+}
+```
+
+---
+
+## Accessibility
+
+- Each drag handle has `role="separator"`, `tabindex="0"`, and an `aria-label` (`"Resize panels horizontally"` or `"Resize panels vertically"`).
+- Because the separator is focusable it is a **window splitter** and carries `aria-valuenow` / `aria-valuemin` / `aria-valuemax` (WAI-ARIA required attrs). `aria-valuenow` is the leading panel's size (%), bounded by the two adjacent panels' `minSize`; `_updateHandleAria()` refreshes these whenever sizes change (initial layout, drag, keyboard).
+- `aria-orientation` is set to `"vertical"` on horizontal handles and `"horizontal"` on vertical handles (reflects the axis being split, matching the ARIA spec for separators).
+- Keyboard operation:
+  - `ArrowLeft` / `ArrowRight` (horizontal) or `ArrowUp` / `ArrowDown` (vertical): resize by ±1%
+  - `Home`: collapse the left/top panel to its `minSize`
+  - `End`: expand the left/top panel to its maximum (`pairTotal − rightPanel.minSize`)
+- `:focus-visible` ring uses `--mlv-border-focus` token with `outline-offset: 0.125rem`.
+- The `.mlv-split-pane__handle-grip` span is `aria-hidden="true"` — decorative only.
+
+---
+
+## Dependencies
+
+### Angular / third-party
+
+- `@angular/core` — `Component`, `contentChildren`, `signal`, `inject`, `DestroyRef`, `Renderer2`, `ElementRef`, `NgZone`
+- `@angular/core/rxjs-interop` — `takeUntilDestroyed`
+- `rxjs` — `fromEvent`, `switchMap`, `filter`, `map`, `tap`, `takeUntil`
+
+### Internal Malva UI packages
+
+- `@malva-ui/styles` — CSS design tokens via `--mlv-*` custom properties