@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-splitter.mjs

@@ -1,541 +1,930 @@
-import { coerceNumberProperty, coerceCssPixelValue, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FocusMonitor, _IdGenerator, CdkMonitorFocus } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Input, Directive, ChangeDetectorRef, NgZone, output, viewChildren, viewChild, ContentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { KBQ_WINDOW } from '@koobiq/components/core';
-import { Subscription } from 'rxjs';
-import { KbqIconModule } from '@koobiq/components/icon';
+import { InjectionToken, inject, input, numberAttribute, booleanAttribute, model, viewChild, computed, isDevMode, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, contentChildren, signal, afterNextRender, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { kbqInjectA11yLocaleConfiguration, kbqInjectNativeElement, KBQ_WINDOW, hasModifierKey } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/resizer';
+import { KbqResizer, KbqResizable } from '@koobiq/components/resizer';
+import { startWith } from 'rxjs/operators';
 
-var Direction;
-(function (Direction) {
-    Direction["Horizontal"] = "horizontal";
-    Direction["Vertical"] = "vertical";
-})(Direction || (Direction = {}));
-class KbqGutterDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this._direction = Direction.Vertical;
-        this._order = 0;
-        this._size = 6;
-        this.dragged = false;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get direction() {
-        return this._direction;
-    }
-    set direction(direction) {
-        this._direction = direction;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get order() {
-        return this._order;
-    }
-    set order(order) {
-        this._order = coerceNumberProperty(order);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get size() {
-        return this._size;
-    }
-    set size(size) {
-        this._size = coerceNumberProperty(size);
-    }
-    get isVertical() {
-        return this._direction === Direction.Vertical;
-    }
-    ngOnInit() {
-        this.setStyle("flex-basis" /* StyleProperty.FlexBasis */, coerceCssPixelValue(this.size));
-        this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
-        this.setStyle("order" /* StyleProperty.Order */, this.order);
-        if (!this.isVertical) {
-            this.setStyle("height" /* StyleProperty.Height */, '100%');
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/** A number, bare or followed by `px` or `%` — the only size strings a panel understands. */
+const SPLITTER_SIZE_PATTERN = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|%)?$/i;
+/**
+ * Resolves a declared size against the splitter's own size along the resize axis.
+ *
+ * Numbers and `<number>px` strings are pixels, `<number>%` is a share of `total`. Returns `null` for a size that
+ * is not set or is anything else, another unit included: reading `10rem` as ten pixels would quietly hand the
+ * panel a limit nobody asked for. `null` is how a panel says "take whatever is left".
+ *
+ * @internal
+ */
+function resolveSplitterSize(size, total) {
+    if (size === null || size === undefined)
+        return null;
+    if (typeof size === 'number')
+        return Number.isFinite(size) ? size : null;
+    const [, value, unit] = SPLITTER_SIZE_PATTERN.exec(size.trim()) ?? [];
+    if (value === undefined)
+        return null;
+    return unit === '%' ? (parseFloat(value) / 100) * total : parseFloat(value);
+}
+/**
+ * Clamps every panel to its own limits and then spends whatever that left over, so the sizes add up to
+ * `total` again.
+ *
+ * The residual is handed out in passes rather than in one proportional step: a panel that reaches a limit
+ * mid-pass stops taking, and the next pass shares what it refused among the panels that still have room.
+ * At most one pass per panel can end that way, so the loop is bounded by the panel count.
+ *
+ * @internal
+ */
+function fitSplitterSizes(sizes, min, max, total) {
+    const next = sizes.map((size, index) => clamp(size, min[index], max[index]));
+    for (let pass = 0; pass <= next.length; pass++) {
+        const diff = total - sumOf(next);
+        if (Math.abs(diff) < EPSILON)
+            break;
+        const open = next
+            .map((_, index) => index)
+            .filter((index) => (diff > 0 ? next[index] < max[index] : next[index] > min[index]));
+        if (!open.length)
+            break;
+        const step = diff / open.length;
+        open.forEach((index) => (next[index] = clamp(next[index] + step, min[index], max[index])));
+    }
+    return next;
+}
+/**
+ * Pins every collapsed panel to its strip and shares what that frees among the open panels, in equal parts.
+ *
+ * A collapsed panel's layout entry holds the size it returns to rather than the strip it shows, which is what
+ * lets expanding restore that size. The difference is handed out here, before any limit applies, so that
+ * {@link keepSplitterRestoreSizes} can take exactly the same amounts back whenever sizes are written again.
+ */
+function collapseSplitterSizes(sizes, collapsed, strips) {
+    const open = collapsed.filter((isCollapsed) => !isCollapsed).length;
+    const freed = sizes.reduce((sum, size, index) => (collapsed[index] ? sum + size - strips[index] : sum), 0);
+    return sizes.map((size, index) => (collapsed[index] ? strips[index] : size + (open ? freed / open : 0)));
+}
+/**
+ * The inverse of {@link collapseSplitterSizes}: puts each size in `restore` back into its collapsed panel's entry
+ * and takes what that adds from the open panels in the same equal parts. The entries keep adding up to what
+ * `sizes` did and render exactly as `sizes` do, while expanding a panel later returns it to its `restore` size.
+ */
+function keepSplitterRestoreSizes(sizes, collapsed, restore) {
+    const open = collapsed.filter((isCollapsed) => !isCollapsed).length;
+    const added = restore.reduce((sum, size, index) => (size === undefined ? sum : sum + size - sizes[index]), 0);
+    return sizes.map((size, index) => restore[index] ?? (collapsed[index] ? size : size - (open ? added / open : 0)));
+}
+/**
+ * Moves the boundary that follows `index` by `delta` pixels and returns the new sizes.
+ *
+ * The panels on one side of the boundary take the delta and the ones on the other side give it up, each walking
+ * outwards from the boundary: a panel sitting at its limit hands the remainder to the next one instead of
+ * stopping the drag. Walking outwards on the taking side too is what keeps a boundary reachable when the panel
+ * right beside it is pinned — otherwise a neighbour at its maximum would freeze a boundary that the panels
+ * further out could still move, and the drag would do nothing at all.
+ */
+function resizeSplitterSizesAt(sizes, index, delta, min, max) {
+    const next = [...sizes];
+    if (index < 0 || index >= sizes.length - 1)
+        return next;
+    // Nearest to the boundary first, so the panel beside it always absorbs as much as it can before the next.
+    const leading = Array.from({ length: index + 1 }, (_, offset) => index - offset);
+    const trailing = Array.from({ length: sizes.length - index - 1 }, (_, offset) => index + 1 + offset);
+    const growing = delta > 0;
+    const roomOf = (indices, grow) => indices.reduce((room, panel) => room + (grow ? max[panel] - sizes[panel] : sizes[panel] - min[panel]), 0);
+    // The boundary travels as far as the tighter of its two sides allows.
+    const travel = Math.min(Math.abs(delta), roomOf(leading, growing), roomOf(trailing, !growing));
+    const spend = (indices, grow) => {
+        let remaining = travel;
+        for (const panel of indices) {
+            if (remaining <= EPSILON)
+                break;
+            const taken = Math.min(remaining, grow ? max[panel] - sizes[panel] : sizes[panel] - min[panel]);
+            next[panel] = sizes[panel] + (grow ? taken : -taken);
+            remaining -= taken;
         }
-        // fix IE issue with gutter icon. flex-direction is required for flex alignment options
-        this.setStyle("flex-direction" /* StyleProperty.FlexDirection */, this.isVertical ? 'row' : 'column');
-    }
-    getPosition() {
-        return {
-            x: this.elementRef.nativeElement.offsetLeft,
-            y: this.elementRef.nativeElement.offsetTop
-        };
-    }
-    setStyle(property, value) {
-        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
+    };
+    spend(leading, growing);
+    spend(trailing, !growing);
+    return next;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-gutter',
-                    host: {
-                        class: 'kbq-gutter',
-                        '[class.kbq-gutter_vertical]': 'isVertical',
-                        '[class.kbq-gutter_dragged]': 'dragged',
-                        '(mousedown)': 'dragged = true'
-                    }
-                }]
-        }], propDecorators: { direction: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-class KbqGutterGhostDirective {
+/**
+ * Snaps a target size onto the nearest snap point it is close enough to, or returns it unchanged.
+ *
+ * Each point carries its own tolerance, because the panels around a separator both contribute points and each
+ * of them says how far its own pull reaches. Two points exactly as close as one another are settled by
+ * declaration order, so a target sitting midway between them picks the same one however it got there.
+ *
+ * @internal
+ */
+function snapSplitterSize(target, snapPoints) {
+    let snapped = target;
+    let closest = Number.POSITIVE_INFINITY;
+    for (const { size, tolerance } of snapPoints) {
+        if (!Number.isFinite(size))
+            continue;
+        const distance = Math.abs(size - target);
+        if (distance > tolerance || distance >= closest)
+            continue;
+        closest = distance;
+        snapped = size;
+    }
+    return snapped;
+}
+/** How far one arrow key press moves a separator, in pixels. */
+const KEYBOARD_STEP = 8;
+/** Sizes closer than this are the same size. */
+const EPSILON = 0.01;
+const sumOf = (sizes) => sizes.reduce((sum, size) => sum + size, 0);
+const KBQ_SPLITTER_DEFAULT_OPTIONS = {
+    appearance: 'divider',
+    snapTolerance: 32
+};
+/** Injection token holding the current {@link KbqSplitterOptions}. */
+const KBQ_SPLITTER_OPTIONS = new InjectionToken('KBQ_SPLITTER_OPTIONS', {
+    factory: () => KBQ_SPLITTER_DEFAULT_OPTIONS
+});
+/**
+ * Overrides the default splitter options within the given injector scope — the whole application from
+ * `bootstrapApplication`, or one subtree from the `providers` of a component or a route.
+ */
+function kbqSplitterOptionsProvider(options) {
+    return {
+        provide: KBQ_SPLITTER_OPTIONS,
+        useValue: { ...KBQ_SPLITTER_DEFAULT_OPTIONS, ...options }
+    };
+}
+/**
+ * Contract a {@link KbqSplitterPanel} resolves to reach the splitter that projects it.
+ *
+ * @docs-private
+ */
+const KBQ_SPLITTER = new InjectionToken('KBQ_SPLITTER');
+/**
+ * A resizable region of a {@link KbqSplitter}.
+ *
+ * Every panel but the last renders the separator that follows it, so the separator sits between the two
+ * panels it resizes in the tab order as well as on screen.
+ */
+class KbqSplitterPanel {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this._x = 0;
-        this._y = 0;
-        this._direction = Direction.Vertical;
-        this._size = 6;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get x() {
-        return this._x;
-    }
-    set x(x) {
-        this._x = x;
-        this.setStyle("left" /* StyleProperty.Left */, coerceCssPixelValue(x));
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get y() {
-        return this._y;
-    }
-    set y(y) {
-        this._y = y;
-        this.setStyle("top" /* StyleProperty.Top */, coerceCssPixelValue(y));
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get direction() {
-        return this._direction;
-    }
-    set direction(direction) {
-        this._direction = direction;
-        this.updateDimensions();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get size() {
-        return this._size;
-    }
-    set size(size) {
-        this._size = coerceNumberProperty(size);
-        this.updateDimensions();
-    }
-    get isVertical() {
-        return this.direction === Direction.Vertical;
-    }
-    updateDimensions() {
-        this.setStyle(this.isVertical ? "width" /* StyleProperty.Width */ : "height" /* StyleProperty.Height */, '100%');
-        this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
-    }
-    setStyle(property, value) {
-        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
+        /** @docs-private */
+        this.splitter = inject(KBQ_SPLITTER);
+        this.options = inject(KBQ_SPLITTER_OPTIONS);
+        this.focusMonitor = inject(FocusMonitor);
+        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
+        /** @docs-private */
+        this.element = kbqInjectNativeElement();
+        /**
+         * Identifies the panel to the `aria-controls` of its own separator, and gives a host something to point
+         * `aria-labelledby` or a fragment link at. Generated when omitted.
+         */
+        this.id = input(inject(_IdGenerator).getId('kbq-splitter-panel-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Size the panel starts at, in pixels (`240`, `'240px'`) or as a share of the splitter (`'30%'`).
+         * Panels that leave it unset share whatever the sized ones did not claim.
+         */
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Smallest size the panel may be dragged to. Defaults to `0`. */
+        this.minSize = input(undefined, ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+        /** Largest size the panel may be dragged to. Unbounded when omitted. */
+        this.maxSize = input(undefined, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Sizes a drag is pulled onto when it is released near one. `minSize` and `maxSize` become snap points too
+         * as soon as either panel around a separator declares any snap size.
+         *
+         * The layout the panels start at settles onto them as well, so a splitter is never handed to the user
+         * sitting between two of its own snap points.
+         */
+        this.snapSizes = input([], ...(ngDevMode ? [{ debugName: "snapSizes" }] : /* istanbul ignore next */ []));
+        /**
+         * How close to one of this panel's {@link snapSizes} a drag has to be released for it to be pulled in, in
+         * pixels. Raise it to make the snap points reach further — past half the gap between two of them the panel
+         * can only ever land on a snap size.
+         *
+         * Defaults to the app-wide {@link KBQ_SPLITTER_OPTIONS}.
+         */
+        this.snapTolerance = input(this.options.snapTolerance, { ...(ngDevMode ? { debugName: "snapTolerance" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Whether dragging the panel past half of its `minSize` collapses it to `collapsedSize` instead of
+         * stopping at the minimum.
+         */
+        this.collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Size the panel takes while collapsed. `0` — the default — hides it completely. */
+        this.collapsedSize = input(0, ...(ngDevMode ? [{ debugName: "collapsedSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the panel is collapsed. Two-way, so a host can collapse and restore the panel itself — which is
+         * the only way back for a panel whose `collapsedSize` is `0` and which therefore has no separator to grab.
+         */
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Accessible name of the separator that follows the panel; falls back to the localized default. */
+        this.separatorAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "separatorAriaLabel" }] : /* istanbul ignore next */ []));
+        /** The panel's own separator; a subtree search would find a nested splitter's separators first. */
+        this.separator = viewChild('separator', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.index = computed(() => this.splitter.panels().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the panel renders no separator. The last panel has nothing after it to resize against, and a
+         * panel that reached the splitter through the element injector without being one of its content children —
+         * a wrapper element or another component's template stands between them — has no place in the group at
+         * all, so it must not offer a handle whose ARIA values would resolve against an index of `-1`.
+         *
+         * @docs-private
+         */
+        this.last = computed(() => {
+            const index = this.index();
+            return index === -1 || index === this.splitter.panels().length - 1;
+        }, ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabled = computed(() => this.splitter.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** A separator is oriented across the axis its splitter lays panels out along. @docs-private */
+        this.separatorOrientation = computed(() => this.splitter.orientation() === 'horizontal' ? 'vertical' : 'horizontal', ...(ngDevMode ? [{ debugName: "separatorOrientation" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.separatorCursor = computed(() => this.splitter.separatorCursor(this.index()), ...(ngDevMode ? [{ debugName: "separatorCursor" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.separatorValues = computed(() => this.splitter.separatorValues(this.index()), ...(ngDevMode ? [{ debugName: "separatorValues" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.resolvedSeparatorAriaLabel = computed(() => this.separatorAriaLabel() || this.a11yLocaleConfiguration().resizePanels, ...(ngDevMode ? [{ debugName: "resolvedSeparatorAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Unsupported sizes already reported, so a check that runs again does not repeat itself. */
+        this.reportedSizes = new Set();
+        // A size in another unit is ignored, which would otherwise leave the panel without the limit its template
+        // asks for and nothing to say why.
+        if (isDevMode())
+            effect(() => this.reportUnsupportedSizes());
+    }
+    /**
+     * Demotes the separator's focus origin to the pointer when a drag starts, so the keyboard-focus frame
+     * stays hidden for the whole drag and does not linger afterwards. Keyboard focus keeps the frame.
+     *
+     * `preventScroll` because half of the separator reaches past the panel it belongs to: once the panel beyond
+     * it is collapsed to nothing, that half hangs outside the splitter itself, and revealing it would scroll
+     * whatever clipping box the splitter sits in — leaving the panels shifted by half a hit area, with a blank
+     * strip along the edge that nothing scrolls back.
+     *
+     * @docs-private
+     */
+    handleResizeStart({ width, height }) {
+        const separator = this.separator();
+        if (separator)
+            this.focusMonitor.focusVia(separator.nativeElement, 'mouse', { preventScroll: true });
+        // The resizer adds the travel to the size it measured at the press, which is the panel's content box.
+        // Measured from the track instead, padding and sub-pixel rounding would land as a jump on the first move.
+        this.splitter.handleResizeStart(this.index(), this.splitter.orientation() === 'horizontal' ? width : height);
+    }
+    /** @docs-private */
+    handleSizeChange({ width, height }) {
+        this.splitter.handleResizeTo(this.index(), this.splitter.orientation() === 'horizontal' ? width : height);
+    }
+    /** @docs-private */
+    handleSeparatorKeydown(event) {
+        this.splitter.handleSeparatorKeydown(this.index(), event);
+    }
+    /** @docs-private */
+    handleSeparatorDblClick(event) {
+        event.preventDefault();
+        this.splitter.handleSeparatorDblClick(this.index());
+    }
+    reportUnsupportedSizes() {
+        const sizes = [
+            ['size', this.size()],
+            ['minSize', this.minSize()],
+            ['maxSize', this.maxSize()],
+            ['collapsedSize', this.collapsedSize()],
+            ...this.snapSizes().map((size) => ['snapSizes', size])
+        ];
+        for (const [name, size] of sizes) {
+            const key = `${name}=${size}`;
+            if (size === undefined || resolveSplitterSize(size, 0) !== null || this.reportedSizes.has(key))
+                continue;
+            this.reportedSizes.add(key);
+            // eslint-disable-next-line no-console
+            console.warn(`kbq-splitter-panel: \`${name}\` "${size}" is ignored. A size is a number of pixels, ` +
+                'a "<number>px" string or a "<number>%" share of the splitter.');
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSplitterPanel, isStandalone: true, selector: "kbq-splitter-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, snapSizes: { classPropertyName: "snapSizes", publicName: "snapSizes", isSignal: true, isRequired: false, transformFunction: null }, snapTolerance: { classPropertyName: "snapTolerance", publicName: "snapTolerance", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsedSize: { classPropertyName: "collapsedSize", publicName: "collapsedSize", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, separatorAriaLabel: { classPropertyName: "separatorAriaLabel", publicName: "separatorAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "id()", "class.kbq-splitter-panel_collapsed": "collapsed()" }, classAttribute: "kbq-splitter-panel" }, viewQueries: [{ propertyName: "separator", first: true, predicate: ["separator"], descendants: true, isSignal: true }], exportAs: ["kbqSplitterPanel"], hostDirectives: [{ directive: i1.KbqResizable }], ngImport: i0, template: `
+        <div class="kbq-splitter-panel__content">
+            <ng-content />
+        </div>
+
+        @if (!last()) {
+            <div
+                #separator
+                cdkMonitorElementFocus
+                class="kbq-splitter-panel__separator"
+                role="separator"
+                [attr.aria-controls]="id()"
+                [attr.aria-disabled]="disabled() || null"
+                [attr.aria-label]="resolvedSeparatorAriaLabel()"
+                [attr.aria-orientation]="separatorOrientation()"
+                [attr.aria-valuemax]="separatorValues().max"
+                [attr.aria-valuemin]="separatorValues().min"
+                [attr.aria-valuenow]="separatorValues().now"
+                [attr.tabindex]="disabled() ? -1 : 0"
+                [cursor]="separatorCursor()"
+                [disableSizeUpdate]="true"
+                [kbqResizer]="splitter.resizerDirection()"
+                (dblclick)="handleSeparatorDblClick($event)"
+                (keydown)="handleSeparatorKeydown($event)"
+                (lostpointercapture)="splitter.handleResizeEnd()"
+                (resizeStart)="handleResizeStart($event)"
+                (sizeChange)="handleSizeChange($event)"
+            ></div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqResizer, selector: "[kbqResizer]", inputs: ["kbqResizer", "cursor", "disableSizeUpdate"], outputs: ["resizeStart", "sizeChange"], exportAs: ["kbqResizer"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterPanel, decorators: [{
+            type: Component,
             args: [{
-                    selector: 'kbq-gutter-ghost',
+                    selector: 'kbq-splitter-panel',
+                    imports: [KbqResizer, CdkMonitorFocus],
+                    template: `
+        <div class="kbq-splitter-panel__content">
+            <ng-content />
+        </div>
+
+        @if (!last()) {
+            <div
+                #separator
+                cdkMonitorElementFocus
+                class="kbq-splitter-panel__separator"
+                role="separator"
+                [attr.aria-controls]="id()"
+                [attr.aria-disabled]="disabled() || null"
+                [attr.aria-label]="resolvedSeparatorAriaLabel()"
+                [attr.aria-orientation]="separatorOrientation()"
+                [attr.aria-valuemax]="separatorValues().max"
+                [attr.aria-valuemin]="separatorValues().min"
+                [attr.aria-valuenow]="separatorValues().now"
+                [attr.tabindex]="disabled() ? -1 : 0"
+                [cursor]="separatorCursor()"
+                [disableSizeUpdate]="true"
+                [kbqResizer]="splitter.resizerDirection()"
+                (dblclick)="handleSeparatorDblClick($event)"
+                (keydown)="handleSeparatorKeydown($event)"
+                (lostpointercapture)="splitter.handleResizeEnd()"
+                (resizeStart)="handleResizeStart($event)"
+                (sizeChange)="handleSizeChange($event)"
+            ></div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                     host: {
-                        class: 'kbq-gutter-ghost',
-                        '[class.kbq-gutter-ghost_vertical]': 'isVertical',
-                        '[class.kbq-gutter-ghost_visible]': 'visible'
-                    }
+                        class: 'kbq-splitter-panel',
+                        tabindex: '-1',
+                        '[attr.id]': 'id()',
+                        '[class.kbq-splitter-panel_collapsed]': 'collapsed()'
+                    },
+                    hostDirectives: [KbqResizable],
+                    exportAs: 'kbqSplitterPanel'
                 }]
-        }], propDecorators: { visible: [{
-                type: Input
-            }], x: [{
-                type: Input
-            }], y: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-class KbqSplitterComponent {
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], snapSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapSizes", required: false }] }], snapTolerance: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTolerance", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsedSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedSize", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], separatorAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAriaLabel", required: false }] }], separator: [{ type: i0.ViewChild, args: ['separator', { isSignal: true }] }] } });
+/**
+ * Splits an area into panels the user can resize by dragging the separators between them.
+ *
+ * Panels must be direct children of the splitter — a wrapper element around them hides them from the group.
+ *
+ * @example
+ * ```html
+ * <kbq-splitter>
+ *     <kbq-splitter-panel [minSize]="100">…</kbq-splitter-panel>
+ *     <kbq-splitter-panel>…</kbq-splitter-panel>
+ * </kbq-splitter>
+ * ```
+ */
+class KbqSplitter {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.ngZone = inject(NgZone);
-        this.renderer = inject(Renderer2);
-        this.gutterPositionChange = output();
-        this.areas = [];
-        this.gutters = viewChildren(KbqGutterDirective, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
-        this.ghost = viewChild.required(KbqGutterGhostDirective);
-        this._isDragging = false;
-        this.areaPositionDivider = 2;
-        this.listeners = [];
-        this.areasChangeSubscription = Subscription.EMPTY;
-        this._hideGutters = false;
-        this._disabled = false;
-        this._useGhost = false;
-        this._gutterSize = 6;
-        this._resizing = false;
-        this.mapAndOrderArea = (area, index) => {
-            const order = index * this.areaPositionDivider;
-            area.setOrder(order);
-            return {
-                area,
-                index,
-                order,
-                initialSize: area.getSize()
-            };
-        };
-    }
-    get isDragging() {
-        return this._isDragging;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hideGutters() {
-        return this._hideGutters;
-    }
-    set hideGutters(value) {
-        this._hideGutters = coerceBooleanProperty(value);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get direction() {
-        return this._direction;
-    }
-    set direction(direction) {
-        this._direction = direction;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(disabled) {
-        this._disabled = coerceBooleanProperty(disabled);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get useGhost() {
-        return this._useGhost;
-    }
-    set useGhost(useGhost) {
-        this._useGhost = coerceBooleanProperty(useGhost);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get gutterSize() {
-        return this._gutterSize;
-    }
-    set gutterSize(gutterSize) {
-        const size = coerceNumberProperty(gutterSize);
-        this._gutterSize = size > 0 ? size : this.gutterSize;
-    }
-    get resizing() {
-        return this._resizing;
-    }
-    addArea(area) {
-        this.areas.push(this.mapAndOrderArea(area, this.areas.length));
-        this.changeDetectorRef.detectChanges();
-    }
-    ngOnInit() {
-        if (!this.direction) {
-            this.direction = Direction.Horizontal;
-        }
-        this.setStyle("flex-direction" /* StyleProperty.FlexDirection */, this.isVertical() ? 'column' : 'row');
-    }
-    ngAfterContentInit() {
-        this.areasChangeSubscription = this.areaRefs.changes.subscribe((data) => {
-            this.areas = data.map(this.mapAndOrderArea);
-            this.changeDetectorRef.markForCheck();
+        this.nativeElement = kbqInjectNativeElement();
+        this.destroyRef = inject(DestroyRef);
+        this.platform = inject(Platform);
+        this.window = inject(KBQ_WINDOW);
+        this.resizeObserver = inject(SharedResizeObserver);
+        this.directionality = inject(Directionality, { optional: true });
+        this.options = inject(KBQ_SPLITTER_OPTIONS);
+        /** Direction the panels are laid out in. */
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** How the separators are drawn. Defaults to the app-wide {@link KBQ_SPLITTER_OPTIONS}. */
+        this.appearance = input(this.options.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /** Whether the panels can be resized at all. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Sizes of the panels as percentages of the splitter, in panel order.
+         *
+         * Two-way and, while `null`, derived from what the panels declare — so a host reads it to persist a
+         * layout, writes it to restore one, and shares the same signal between two splitters to keep their panels
+         * the same width. Setting it back to `null` returns the panels to their declared sizes.
+         */
+        this.layout = model(null, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.panels = contentChildren(KbqSplitterPanel, { ...(ngDevMode ? { debugName: "panels" } : /* istanbul ignore next */ {}), descendants: false });
+        /** Boundary a drag is moving right now, or `null` when no drag is in progress. */
+        this.dragBoundary = signal(null, ...(ngDevMode ? [{ debugName: "dragBoundary" }] : /* istanbul ignore next */ []));
+        /** Whether a separator is being dragged right now. @docs-private */
+        this.dragging = computed(() => this.dragBoundary() !== null, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        /** Splitter size along the resize axis, in pixels; `0` until the first measurement. */
+        this.containerSize = signal(0, ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
+        /** Sizes and layout captured when the drag began; every move is measured against these, so clamping cannot drift. */
+        this.dragSnapshot = null;
+        // `valueSignal` rather than the plain `value` getter: the getter is not reactive, so a `dir` flipped at
+        // runtime would leave every computed below it holding the direction the app booted with.
+        this.rtl = computed(() => this.directionality?.valueSignal() === 'rtl', ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
+        /** A disabled splitter reports no direction, which is how `KbqResizer` ignores a drag. @docs-private */
+        this.resizerDirection = computed(() => {
+            if (this.disabled())
+                return [0, 0];
+            if (this.orientation() === 'vertical')
+                return [0, 1];
+            // In RTL the first panel sits on the right, so growing it moves the boundary west.
+            return this.rtl() ? [-1, 0] : [1, 0];
+        }, ...(ngDevMode ? [{ debugName: "resizerDirection" }] : /* istanbul ignore next */ []));
+        /** Smallest size of each panel while it is not collapsed, in pixels. */
+        this.expandedMinSizes = computed(() => {
+            const total = this.containerSize();
+            return this.panels().map((panel) => Math.max(0, resolveSplitterSize(panel.minSize(), total) ?? 0));
+        }, ...(ngDevMode ? [{ debugName: "expandedMinSizes" }] : /* istanbul ignore next */ []));
+        /** Largest size of each panel while it is not collapsed, in pixels. */
+        this.expandedMaxSizes = computed(() => {
+            const total = this.containerSize();
+            const min = this.expandedMinSizes();
+            return this.panels().map((panel, index) => {
+                const max = resolveSplitterSize(panel.maxSize(), total) ?? Number.POSITIVE_INFINITY;
+                // A maximum below the minimum would make every clamp order-dependent; the minimum wins.
+                return Math.max(min[index], max);
+            });
+        }, ...(ngDevMode ? [{ debugName: "expandedMaxSizes" }] : /* istanbul ignore next */ []));
+        /** Size a collapsed panel is pinned to, in pixels. */
+        this.collapsedSizes = computed(() => {
+            const total = this.containerSize();
+            return this.panels().map((panel) => Math.max(0, resolveSplitterSize(panel.collapsedSize(), total) ?? 0));
+        }, ...(ngDevMode ? [{ debugName: "collapsedSizes" }] : /* istanbul ignore next */ []));
+        /**
+         * Panels the drag in progress may take through the gap between their collapsed size and their minimum.
+         *
+         * Only the two around the boundary being dragged. A collapsible panel further out is being pushed rather
+         * than aimed at, and letting a push carry one into its gap would collapse it without the user ever having
+         * pointed at it.
+         */
+        this.freePanels = computed(() => {
+            const boundary = this.dragBoundary();
+            return this.panels().map((panel, index) => boundary !== null && panel.collapsible() && (index === boundary || index === boundary + 1));
+        }, ...(ngDevMode ? [{ debugName: "freePanels" }] : /* istanbul ignore next */ []));
+        /**
+         * Smallest size of each panel in pixels; a collapsed panel is pinned to its collapsed size.
+         *
+         * The sizes a collapsible panel may take are its collapsed size and everything from its minimum up, with a
+         * gap in between that it never occupies. Pinning it by `collapsed` is what keeps a drag out of that gap: the
+         * panel stops at the minimum and waits there while the pointer crosses, and `collapsed` flips it to the strip
+         * once the pointer passes the midpoint.
+         */
+        this.minSizes = computed(() => this.panels().map((panel, index) => panel.collapsed() ? this.collapsedSizes()[index] : this.expandedMinSizes()[index]), ...(ngDevMode ? [{ debugName: "minSizes" }] : /* istanbul ignore next */ []));
+        /** Largest size of each panel in pixels; a collapsed panel is pinned to its collapsed size. */
+        this.maxSizes = computed(() => this.panels().map((panel, index) => panel.collapsed() ? this.collapsedSizes()[index] : this.expandedMaxSizes()[index]), ...(ngDevMode ? [{ debugName: "maxSizes" }] : /* istanbul ignore next */ []));
+        /** Sizes seeded from what the panels declare — where the splitter starts and what a reset returns to. */
+        this.defaultSizes = computed(() => {
+            const panels = this.panels();
+            const total = this.containerSize();
+            if (!panels.length || total <= 0)
+                return panels.map(() => 0);
+            const declared = panels.map((panel) => panel.collapsed()
+                ? (resolveSplitterSize(panel.collapsedSize(), total) ?? 0)
+                : resolveSplitterSize(panel.size(), total));
+            const flexible = declared.map((_, index) => index).filter((index) => declared[index] === null);
+            const claimed = declared.reduce((sum, size) => sum + (size ?? 0), 0);
+            const share = flexible.length ? Math.max(0, total - claimed) / flexible.length : 0;
+            return this.settleOnSnapPoints(fitSplitterSizes(declared.map((size) => size ?? share), this.minSizes(), this.maxSizes(), total), total);
+        }, ...(ngDevMode ? [{ debugName: "defaultSizes" }] : /* istanbul ignore next */ []));
+        /** Current size of every panel in pixels. */
+        this.sizes = computed(() => {
+            const layout = this.layout();
+            const total = this.containerSize();
+            if (!layout || layout.length !== this.panels().length || total <= 0)
+                return this.defaultSizes();
+            return fitSplitterSizes(collapseSplitterSizes(layout.map((share) => (share / 100) * total), this.panels().map((panel) => panel.collapsed()), this.collapsedSizes()), this.minSizes(), this.maxSizes(), total);
+        }, ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+        /**
+         * Tracks are percentages of the splitter's content box, which is exactly what `containerSize` measures, so
+         * `size / total` renders as `size` pixels whatever padding the host puts on the splitter.
+         *
+         * Not `fr`: a flex factor carries only a ratio, and CSS Grid normalizes the factors by their sum. Sizes
+         * that cannot add up to the container — every panel pinned to a minimum too large to fit, or every panel
+         * capped below it — would then be silently rescaled to fill it, violating the very `minSize`/`maxSize` the
+         * layout was computed from, while `aria-valuenow` and the drag arithmetic went on reporting the sizes the
+         * component believed it had applied. Percentages under- or overflow instead, which is visible.
+         *
+         * Equal tracks stand in until the first measurement, which is the only layout that cannot be wrong before
+         * the splitter has a size to resolve `%` and `px` against.
+         *
+         * @docs-private
+         */
+        this.gridTemplate = computed(() => {
+            const count = this.panels().length;
+            if (!count)
+                return null;
+            if (this.containerSize() <= 0)
+                return `repeat(${count}, minmax(0, 1fr))`;
+            const total = this.containerSize();
+            return this.sizes()
+                .map((size) => `${((Math.max(0, size) / total) * 100).toFixed(4)}%`)
+                .join(' ');
+        }, ...(ngDevMode ? [{ debugName: "gridTemplate" }] : /* istanbul ignore next */ []));
+        // `afterNextRender` runs in the browser only, so no explicit platform guard is needed here.
+        afterNextRender(() => {
+            this.resizeObserver
+                .observe(this.nativeElement)
+                .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.measure());
+        });
+        // Swapping the axis changes which dimension every size resolves against, and no resize observation
+        // fires for it: the splitter's own box may not have changed at all.
+        effect(() => {
+            this.orientation();
+            if (this.platform.isBrowser)
+                this.measure();
         });
     }
-    ngOnDestroy() {
-        this.areasChangeSubscription.unsubscribe();
+    /** @docs-private */
+    separatorCursor(index) {
+        const horizontal = this.orientation() === 'horizontal';
+        if (this.disabled())
+            return 'default';
+        const { grow, shrink } = this.boundaryRoom(index);
+        const rtl = this.rtl();
+        // Which way the pointer travels to grow the leading panel, so the one-sided cursors point at the room
+        // that is actually left rather than at the panel that owns it.
+        const growCursor = horizontal ? (rtl ? 'w-resize' : 'e-resize') : 's-resize';
+        const shrinkCursor = horizontal ? (rtl ? 'e-resize' : 'w-resize') : 'n-resize';
+        if (grow < EPSILON && shrink < EPSILON)
+            return 'default';
+        if (shrink < EPSILON)
+            return growCursor;
+        if (grow < EPSILON)
+            return shrinkCursor;
+        return horizontal ? 'col-resize' : 'row-resize';
+    }
+    /** @docs-private */
+    separatorValues(index) {
+        const total = this.containerSize();
+        if (total <= 0)
+            return { now: 0, min: 0, max: 100 };
+        const sizes = this.sizes();
+        const { grow, shrink } = this.panelRoom(index);
+        const toPercent = (size) => Math.round((size / total) * 100);
+        return {
+            now: toPercent(sizes[index]),
+            min: toPercent(sizes[index] - shrink),
+            max: toPercent(sizes[index] + grow)
+        };
     }
-    onMouseDown(event, leftAreaIndex, rightAreaIndex) {
-        if (this.disabled) {
+    /** @docs-private */
+    handleResizeStart(index, origin) {
+        // Without a measurement every size resolves to zero, and a drag would read as one that collapses every
+        // collapsible panel it touches. A splitter with no size has nothing to resize anyway.
+        if (this.disabled() || this.containerSize() <= 0)
             return;
-        }
-        event.preventDefault();
-        const startPoint = {
-            x: event.screenX,
-            y: event.screenY
+        const sizes = [...this.sizes()];
+        this.dragSnapshot = {
+            index,
+            sizes,
+            total: this.containerSize(),
+            layout: this.layout(),
+            origin: origin ?? sizes[index],
+            moved: false
         };
-        const leftArea = this.areas[leftAreaIndex];
-        const rightArea = this.areas[rightAreaIndex];
-        leftArea.initialSize = leftArea.area.getSize();
-        rightArea.initialSize = rightArea.area.getSize();
-        let currentGutter;
-        if (this.useGhost) {
-            const gutterOrder = leftAreaIndex * 2 + 1;
-            currentGutter = this.gutters().find((gutter) => gutter.order === gutterOrder);
-            if (currentGutter) {
-                const gutterPosition = currentGutter.getPosition();
-                const ghost = this.ghost();
-                ghost.direction = currentGutter.direction;
-                ghost.size = currentGutter.size;
-                ghost.x = gutterPosition.x;
-                ghost.y = gutterPosition.y;
-                ghost.visible = true;
-                this.setStyle("cursor" /* StyleProperty.Cursor */, currentGutter.direction === Direction.Vertical ? 'row-resize' : 'col-resize');
-            }
-        }
-        else {
-            this.areas.forEach((item) => {
-                const size = item.area.getSize();
-                item.area.disableFlex();
-                item.area.setSize(size);
-            });
-        }
-        this.listeners.push(this.renderer.listen('document', 'mouseup', () => this.onMouseUp(leftArea, rightArea, currentGutter)));
-        this.ngZone.runOutsideAngular(() => {
-            this.listeners.push(this.renderer.listen('document', 'mousemove', (e) => this.onMouseMove(e, startPoint, leftArea, rightArea, currentGutter)));
-        });
-        this._isDragging = true;
+        this.dragBoundary.set(index);
     }
-    removeArea(area) {
-        let indexToRemove = -1;
-        this.areas.some((item, index) => {
-            if (item.area === area) {
-                indexToRemove = index;
-                return true;
-            }
-            return false;
-        });
-        if (indexToRemove === -1) {
+    /** @docs-private */
+    handleResizeTo(index, size) {
+        const snapshot = this.dragSnapshot;
+        if (!snapshot || snapshot.index !== index || !this.matchesSnapshot(snapshot))
             return;
-        }
-        this.areas.splice(indexToRemove, 1);
-    }
-    isVertical() {
-        return this.direction === Direction.Vertical;
-    }
-    updateGutter() {
-        this.gutters().forEach((gutter) => {
-            if (gutter.dragged) {
-                gutter.dragged = false;
-                this.changeDetectorRef.detectChanges();
-            }
+        const delta = size - snapshot.origin;
+        // Until the pointer travels, the press is not a drag: writing the layout for it would take the layout over
+        // from the panels for a gesture that may never move.
+        if (!snapshot.moved && Math.abs(delta) < EPSILON)
+            return;
+        snapshot.moved = true;
+        const pins = this.pinsFor(index, delta, snapshot);
+        const free = this.freePanels();
+        // Live, the way `NSSplitView` collapses a subview the moment its divider passes the midpoint: whatever a
+        // host binds to `collapsed` has to agree with the screen for the whole gesture, not catch up on release.
+        // Compared first, so a host hears `collapsedChange` once per crossing rather than on every move.
+        this.panels().forEach((panel, panelIndex) => {
+            if (free[panelIndex] && panel.collapsed() !== pins[panelIndex])
+                panel.collapsed.set(pins[panelIndex]);
         });
-    }
-    onMouseMove(event, startPoint, leftArea, rightArea, currentGutter) {
-        if (!this.isDragging || this.disabled) {
+        this.applySizes(resizeSplitterSizesAt(snapshot.sizes, index, delta, this.minSizes(), this.maxSizes()));
+    }
+    /** @docs-private */
+    handleResizeEnd() {
+        const snapshot = this.dragSnapshot;
+        this.dragSnapshot = null;
+        // A press that never travelled leaves everything as it was: settling or snapping it would rewrite a layout
+        // nobody touched, or hand one still derived from the panels over to the host.
+        if (!snapshot?.moved || snapshot.total <= 0 || !this.matchesSnapshot(snapshot))
+            return this.endDrag();
+        const collapsed = this.settleCollapse(snapshot);
+        this.endDrag();
+        // A panel that just collapsed has taken the whole boundary with it; there is nothing left to snap.
+        if (collapsed)
             return;
-        }
-        const endPoint = {
-            x: event.screenX,
-            y: event.screenY
-        };
-        const offset = this.isVertical() ? startPoint.y - endPoint.y : startPoint.x - endPoint.x;
-        if (this.useGhost && currentGutter) {
-            const gutterPosition = currentGutter.getPosition();
-            const leftPos = leftArea.area.getPosition();
-            const rightPos = rightArea.area.getPosition();
-            const rightMin = rightArea.area.getMinSize() || 0;
-            const leftMin = leftArea.area.getMinSize() || 0;
-            const key = this.isVertical() ? 'y' : 'x';
-            const minPos = leftPos[key] - leftMin;
-            const maxPos = rightPos[key] + (rightArea.area.getSize() || 0) - rightMin - currentGutter.size;
-            const newPos = gutterPosition[key] - offset;
-            this.ghost()[key] = newPos < minPos ? minPos : Math.min(newPos, maxPos);
-        }
-        else {
-            this.resizeAreas(leftArea, rightArea, offset);
-        }
-    }
-    resizeAreas(leftArea, rightArea, sizeOffset) {
-        const newLeftAreaSize = leftArea.initialSize - sizeOffset;
-        const newRightAreaSize = rightArea.initialSize + sizeOffset;
-        const minLeftAreaSize = leftArea.area.getMinSize();
-        const minRightAreaSize = rightArea.area.getMinSize();
-        if (newLeftAreaSize < minLeftAreaSize || newRightAreaSize < minRightAreaSize) {
+        // Snapping happens here rather than on every move: the boundary follows the pointer exactly for the
+        // whole drag and lands on the nearest snap point only once it is let go. Pulling mid-drag instead would
+        // freeze the panel for as long as the pointer stayed near a point and then jump when it broke free —
+        // and the specification names `scroll-snap-type: proximity`, which likewise settles on release.
+        const sizes = this.sizes();
+        const delta = this.snapDelta(snapshot.index, 0, { sizes, total: snapshot.total });
+        if (Math.abs(delta) < EPSILON)
             return;
-        }
-        else if (newLeftAreaSize <= 0) {
-            leftArea.area.setSize(0);
-            rightArea.area.setSize(rightArea.initialSize + leftArea.initialSize);
-        }
-        else if (newRightAreaSize <= 0) {
-            leftArea.area.setSize(rightArea.initialSize + leftArea.initialSize);
-            rightArea.area.setSize(0);
-        }
-        else {
-            leftArea.area.setSize(newLeftAreaSize);
-            rightArea.area.setSize(newRightAreaSize);
-        }
-    }
-    onMouseUp(leftArea, rightArea, currentGutter) {
-        while (this.listeners.length > 0) {
-            const unsubscribe = this.listeners.pop();
-            if (unsubscribe) {
-                unsubscribe();
-            }
-        }
-        if (this.useGhost && currentGutter) {
-            const gutterPosition = currentGutter.getPosition();
-            const ghost = this.ghost();
-            const offset = ghost.direction === Direction.Vertical ? gutterPosition.y - ghost.y : gutterPosition.x - ghost.x;
-            this.resizeAreas(leftArea, rightArea, offset);
-            this.ghost().visible = false;
-            this.setStyle("cursor" /* StyleProperty.Cursor */, 'unset');
-        }
-        this._isDragging = false;
-        this.updateGutter();
-        // TODO: The 'emit' function requires a mandatory void argument
-        this.gutterPositionChange.emit();
-        this.changeDetectorRef.markForCheck();
+        this.applySizes(resizeSplitterSizesAt(sizes, snapshot.index, delta, this.minSizes(), this.maxSizes()));
     }
-    setStyle(property, value) {
-        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "gutters", predicate: KbqGutterDirective, descendants: true, isSignal: true }, { propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-splitter', imports: [KbqGutterDirective, KbqGutterGhostDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-splitter'
-                    }, exportAs: 'kbqSplitter', preserveWhitespaces: false, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"] }]
-        }], propDecorators: { gutterPositionChange: [{ type: i0.Output, args: ["gutterPositionChange"] }], gutters: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqGutterDirective), { isSignal: true }] }], ghost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqGutterGhostDirective), { isSignal: true }] }], areaRefs: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqSplitterAreaDirective)]
-            }], hideGutters: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], useGhost: [{
-                type: Input
-            }], gutterSize: [{
-                type: Input
-            }] } });
-class KbqSplitterAreaDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.splitter = inject(KbqSplitterComponent);
-        this.sizeChange = output();
-        this.window = inject(KBQ_WINDOW);
-        this.platform = inject(Platform);
-        this.emitSizeChange = () => {
-            this.sizeChange.emit(this.getSize());
-        };
-    }
-    isResizing() {
-        return this.splitter.isDragging;
-    }
-    disableFlex() {
-        this.renderer.removeStyle(this.elementRef.nativeElement, 'flex');
-    }
-    ngAfterViewInit() {
-        this.splitter.addArea(this);
-        this.removeStyle("max-width" /* StyleProperty.MaxWidth */);
-        if (this.splitter.direction === Direction.Vertical) {
-            this.setStyle("width" /* StyleProperty.Width */, '100%');
-            this.removeStyle("height" /* StyleProperty.Height */);
-        }
-        else {
-            this.setStyle("height" /* StyleProperty.Height */, '100%');
-            this.removeStyle("width" /* StyleProperty.Width */);
+    /** @docs-private */
+    handleSeparatorKeydown(index, event) {
+        // A modified press belongs to the browser: Cmd+Left is Back, Ctrl+Home scrolls to the top. `Shift` is
+        // the exception — `Shift+F6` walks the panels backwards.
+        if (hasModifierKey(event, 'altKey', 'ctrlKey', 'metaKey'))
+            return;
+        if (event.key === 'F6') {
+            event.preventDefault();
+            // From a separator, "next" is the panel it opens onto and "previous" the one it closes.
+            return this.focusPanel(event.shiftKey ? index : index + 1);
         }
-        this.splitter.gutterPositionChange.subscribe(this.emitSizeChange);
-    }
-    ngOnDestroy() {
-        this.splitter.removeArea(this);
-    }
-    setOrder(order) {
-        this.setStyle("order" /* StyleProperty.Order */, order);
-    }
-    setSize(size) {
-        if (isNaN(size)) {
+        if (this.disabled())
             return;
+        const horizontal = this.orientation() === 'horizontal';
+        // In RTL a horizontal splitter grows its leading panel as the boundary travels west, so the arrow that
+        // moves the boundary right is the one that shrinks it.
+        const sign = horizontal && this.rtl() ? -1 : 1;
+        const panel = this.panels()[index];
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (!horizontal)
+                    return;
+                return this.commitKeydown(event, () => this.resizeBy(index, -KEYBOARD_STEP * sign));
+            case 'ArrowRight':
+                if (!horizontal)
+                    return;
+                return this.commitKeydown(event, () => this.resizeBy(index, KEYBOARD_STEP * sign));
+            case 'ArrowUp':
+                if (horizontal)
+                    return;
+                return this.commitKeydown(event, () => this.resizeBy(index, -KEYBOARD_STEP));
+            case 'ArrowDown':
+                if (horizontal)
+                    return;
+                return this.commitKeydown(event, () => this.resizeBy(index, KEYBOARD_STEP));
+            case 'Home':
+                return this.commitKeydown(event, () => {
+                    const min = this.expandedMinSizes()[index];
+                    // A panel already at its minimum has nowhere left to go but away, when it may collapse.
+                    if (panel.collapsible() && this.sizes()[index] <= min + EPSILON)
+                        return panel.collapsed.set(true);
+                    this.resizeBy(index, min - this.sizes()[index]);
+                });
+            case 'End':
+                return this.commitKeydown(event, () => {
+                    // Expand first, so the size the panel is grown from is a real one and not its collapsed
+                    // strip — but only where collapsing was the splitter's to do in the first place.
+                    if (panel.collapsible())
+                        panel.collapsed.set(false);
+                    // `resizeBy` is bounded by what the trailing panels can give up, so the splitter's own size
+                    // is a safe stand-in for an unbounded maximum.
+                    const max = Math.min(this.expandedMaxSizes()[index], this.containerSize());
+                    this.resizeBy(index, max - this.sizes()[index]);
+                });
+            case 'Enter':
+                if (!panel.collapsible())
+                    return;
+                return this.commitKeydown(event, () => panel.collapsed.update((collapsed) => !collapsed));
+            default:
+                return;
         }
-        this.setStyle(this.getSizeProperty(), coerceCssPixelValue(coerceNumberProperty(size)));
-    }
-    getSize() {
-        if (!this.platform.isBrowser)
-            return 0;
-        return this.elementRef.nativeElement[this.getOffsetSizeProperty()];
     }
-    getPosition() {
+    /** @docs-private */
+    handleSeparatorDblClick(index) {
+        if (this.disabled())
+            return;
+        // First return the whole group to the sizes its panels declare; from there, take the leading panel down
+        // to its minimum, which is the optional second step of the double-click behaviour.
+        if (this.layout() !== null)
+            return this.layout.set(null);
+        this.resizeBy(index, this.minSizes()[index] - this.sizes()[index]);
+    }
+    /**
+     * Whether the panels are still the ones the drag was measured against.
+     *
+     * A host that adds or removes a panel mid-drag invalidates every index the snapshot holds: the captured
+     * sizes stop lining up with `minSizes`/`maxSizes`, which turns the arithmetic into `NaN`, and a boundary
+     * index no longer names the panel the user took hold of.
+     */
+    matchesSnapshot(snapshot) {
+        return snapshot.sizes.length === this.panels().length;
+    }
+    commitKeydown(event, action) {
+        event.preventDefault();
+        action();
+    }
+    /** Moves focus onto a panel, which is how `F6` walks the regions of the splitter. */
+    focusPanel(index) {
+        this.panels().at(index)?.element.focus();
+    }
+    /**
+     * Room on each side of the boundary after `index`, in pixels.
+     *
+     * Measured against the expanded limits rather than the collapse pin, because a collapsed panel can still be
+     * dragged back out — reporting it as immovable would leave the cursor saying otherwise.
+     */
+    sideRoom(index) {
+        const sizes = this.sizes();
+        const min = this.expandedMinSizes();
+        const max = this.expandedMaxSizes();
+        const room = (available) => Math.max(0, available);
+        const sumOver = (panels, take) => sumOf(panels.map(take));
+        const leading = Array.from({ length: index + 1 }, (_, offset) => offset);
+        const trailing = Array.from({ length: sizes.length - index - 1 }, (_, offset) => index + 1 + offset);
         return {
-            x: this.elementRef.nativeElement.offsetLeft,
-            y: this.elementRef.nativeElement.offsetTop
+            leadingGrow: sumOver(leading, (panel) => room(max[panel] - sizes[panel])),
+            leadingShrink: sumOver(leading, (panel) => room(sizes[panel] - min[panel])),
+            trailingGive: sumOver(trailing, (panel) => room(sizes[panel] - min[panel])),
+            trailingTake: sumOver(trailing, (panel) => room(max[panel] - sizes[panel]))
         };
     }
-    getMinSize() {
-        const styles = this.window.getComputedStyle(this.elementRef.nativeElement);
-        return parseFloat(styles[this.getMinSizeProperty()]);
-    }
-    isVertical() {
-        return this.splitter.direction === Direction.Vertical;
-    }
-    getMinSizeProperty() {
-        return this.isVertical() ? "min-height" /* StyleProperty.MinHeight */ : "minWidth" /* StyleProperty.MinWidth */;
-    }
-    getOffsetSizeProperty() {
-        return this.isVertical() ? "offsetHeight" /* StyleProperty.OffsetHeight */ : "offsetWidth" /* StyleProperty.OffsetWidth */;
-    }
-    getSizeProperty() {
-        return this.isVertical() ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */;
-    }
-    setStyle(style, value) {
-        this.renderer.setStyle(this.elementRef.nativeElement, style, value);
+    /**
+     * How far the boundary after `index` can still travel each way — what the cursor advertises.
+     *
+     * Both sides are summed across every panel, because the drag walks outwards from the boundary: a neighbour
+     * pinned at its limit passes the delta on, so the boundary is still movable when it alone is stuck.
+     */
+    boundaryRoom(index) {
+        if (index < 0 || index >= this.sizes().length - 1)
+            return { grow: 0, shrink: 0 };
+        const { leadingGrow, leadingShrink, trailingGive, trailingTake } = this.sideRoom(index);
+        return {
+            grow: Math.min(leadingGrow, trailingGive),
+            shrink: Math.min(leadingShrink, trailingTake)
+        };
     }
-    removeStyle(style) {
-        this.renderer.removeStyle(this.elementRef.nativeElement, style);
+    /**
+     * How far the panel at `index` itself can still be resized — what `aria-valuemin` / `aria-valuemax` report.
+     *
+     * Narrower than {@link boundaryRoom} on purpose: the boundary may keep moving by handing the delta to panels
+     * further out, and those moves leave the pane this separator controls exactly where it was.
+     */
+    panelRoom(index) {
+        const sizes = this.sizes();
+        if (index < 0 || index >= sizes.length - 1)
+            return { grow: 0, shrink: 0 };
+        const { trailingGive, trailingTake } = this.sideRoom(index);
+        const room = (available) => Math.max(0, available);
+        return {
+            grow: room(Math.min(this.expandedMaxSizes()[index] - sizes[index], trailingGive)),
+            shrink: room(Math.min(sizes[index] - this.expandedMinSizes()[index], trailingTake))
+        };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
+    resizeBy(index, delta) {
+        this.applySizes(resizeSplitterSizesAt(this.sizes(), index, delta, this.minSizes(), this.maxSizes()));
+    }
+    /**
+     * Settles a seeded layout onto the snap points its panels declare, boundary by boundary, exactly as
+     * releasing a drag on each of them would.
+     *
+     * Only the seeded sizes go through this. A layout handed to the splitter is authoritative — settling that
+     * one would both overwrite a restored layout and pull the boundary onto a point mid-drag, since every move
+     * writes `layout`.
+     */
+    settleOnSnapPoints(sizes, total) {
+        const min = this.minSizes();
+        const max = this.maxSizes();
+        return sizes.reduce((settled, _, index) => {
+            if (index >= settled.length - 1)
+                return settled;
+            const delta = this.snapDelta(index, 0, { sizes: settled, total });
+            return Math.abs(delta) < EPSILON ? settled : resizeSplitterSizesAt(settled, index, delta, min, max);
+        }, sizes);
+    }
+    /** Pulls the drag onto the nearest snap point declared by either panel around the separator. */
+    snapDelta(index, delta, snapshot) {
+        const panels = this.panels();
+        const leading = panels[index];
+        const trailing = panels[index + 1];
+        if (!leading.snapSizes().length && !trailing?.snapSizes().length)
+            return delta;
+        // A size declared on the trailing panel is a position of the same boundary, so it is mapped into a size
+        // for the leading one before it can compete with the leading panel's own points.
+        const pairSize = snapshot.sizes[index] + (snapshot.sizes[index + 1] ?? 0);
+        const snapPointsOf = (panel, toLeadingSize) => [...panel.snapSizes(), panel.minSize(), panel.maxSize()]
+            .map((size) => resolveSplitterSize(size, snapshot.total))
+            .filter((size) => size !== null)
+            .map((size) => ({ size: toLeadingSize(size), tolerance: panel.snapTolerance() }));
+        const target = snapSplitterSize(snapshot.sizes[index] + delta, [
+            ...snapPointsOf(leading, (size) => size),
+            ...(trailing ? snapPointsOf(trailing, (size) => pairSize - size) : [])
+        ]);
+        return target - snapshot.sizes[index];
+    }
+    /**
+     * Which side of its gap each panel around the dragged boundary is held on.
+     *
+     * Decided from the size the pointer is asking for rather than the one on screen, because a panel held at
+     * its minimum or on its collapsed strip has stopped moving — only where the pointer went says what the user
+     * means. Half the minimum is the midpoint of the gap, so the same distance decides the panel whichever
+     * direction it came from.
+     */
+    pinsFor(index, delta, snapshot) {
+        const min = this.expandedMinSizes();
+        const aimed = {
+            [index]: snapshot.sizes[index] + delta,
+            [index + 1]: (snapshot.sizes[index + 1] ?? 0) - delta
+        };
+        return this.panels().map((_, panel) => panel in aimed && aimed[panel] < min[panel] / 2);
+    }
+    /** Clears the drag, so the panels go back to their settled limits. */
+    endDrag() {
+        this.dragBoundary.set(null);
+    }
+    /**
+     * Hands every collapsible panel around the boundary that ended the drag collapsed the share it had before the
+     * gesture. `collapsed` itself already changed during the drag; only the size it returns to is left to fix.
+     *
+     * Returns whether anything is collapsed.
+     */
+    settleCollapse(snapshot) {
+        const panels = this.panels();
+        const collapsing = [snapshot.index, snapshot.index + 1].filter((index) => panels[index]?.collapsible() && panels[index].collapsed());
+        const layout = this.layout();
+        if (!collapsing.length)
+            return false;
+        // A drag that travelled has written the layout already; without one there is no entry to hand a share to.
+        if (!layout)
+            return true;
+        // Hand a collapsing panel back the share it had before the gesture, so expanding it later returns it to
+        // that size rather than to the sliver the drag squeezed it down to on its way out. What that adds comes out
+        // of the open panels, which keeps them on screen exactly where the drag left them.
+        this.layout.set(keepSplitterRestoreSizes(layout, panels.map((panel) => panel.collapsed()), layout.map((_, index) => collapsing.includes(index)
+            ? (snapshot.layout?.[index] ?? (snapshot.sizes[index] / snapshot.total) * 100)
+            : undefined)));
+        return true;
+    }
+    applySizes(sizes) {
+        const total = this.containerSize();
+        if (total <= 0)
+            return;
+        const free = this.freePanels();
+        const previous = this.layout();
+        const collapsed = this.panels().map((panel) => panel.collapsed());
+        this.layout.set(keepSplitterRestoreSizes(sizes.map((size) => (size / total) * 100), collapsed, 
+        // A collapsed panel keeps the share it had before it collapsed, so expanding restores that size
+        // instead of the strip it is pinned to while collapsed. A panel the drag is free to move is the
+        // exception: it is the one being aimed at, so what it records is where it actually is.
+        collapsed.map((isCollapsed, index) => (isCollapsed && !free[index] ? previous?.[index] : undefined))));
+    }
+    measure() {
+        const style = this.window.getComputedStyle(this.nativeElement);
+        // `clientWidth`/`clientHeight` are the padding box, and the tracks only ever fill the content box.
+        const size = this.orientation() === 'horizontal'
+            ? this.nativeElement.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+            : this.nativeElement.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+        this.containerSize.set(Math.max(0, size || 0));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqSplitter, isStandalone: true, selector: "kbq-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange" }, host: { properties: { "class.kbq-splitter_vertical": "orientation() === 'vertical'", "class.kbq-splitter_disabled": "disabled()", "class.kbq-splitter_dragging": "dragging()", "class.kbq-splitter_transparent": "appearance() === 'transparent'", "class.kbq-splitter_handle": "appearance() === 'handle'", "style.grid-template-columns": "orientation() === 'horizontal' ? gridTemplate() : null", "style.grid-template-rows": "orientation() === 'vertical' ? gridTemplate() : null" }, classAttribute: "kbq-splitter" }, providers: [{ provide: KBQ_SPLITTER, useExisting: KbqSplitter }], queries: [{ propertyName: "panels", predicate: KbqSplitterPanel, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-splitter{display:grid;position:relative;min-width:0;min-height:0;overflow:clip;grid-template-rows:minmax(0,1fr)}.kbq-splitter.kbq-splitter_vertical{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}.kbq-splitter.kbq-splitter_dragging .kbq-splitter-panel__content{pointer-events:none;-webkit-user-select:none;user-select:none}.kbq-splitter-panel{position:relative;min-width:0;min-height:0;outline:none}.kbq-splitter-panel:focus-visible{outline:var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);outline-offset:calc(-1 * var(--kbq-splitter-size-focus-outline-width))}.kbq-splitter-panel__content{display:flex;flex-direction:column;block-size:100%;inline-size:100%;overflow:hidden}.kbq-splitter-panel__separator{position:absolute;z-index:1;inset-block:0;inset-inline-end:calc(var(--kbq-splitter-size-hit-area) / -2);inline-size:var(--kbq-splitter-size-hit-area);touch-action:none;outline:none}.kbq-splitter-panel__separator:after{position:absolute;inset-block:0;inset-inline:0;inline-size:var(--kbq-splitter-size-line-width);margin-inline:auto;background-color:var(--kbq-splitter-line-color);content:\"\"}.kbq-splitter-panel__separator:is(:hover,.kbq-hover):after{background-color:var(--kbq-splitter-state-hover-line-color)}.kbq-splitter-panel__separator:is(:active,.kbq-active):after{inline-size:var(--kbq-splitter-size-active-line-width);background-color:var(--kbq-splitter-state-active-line-color)}.kbq-splitter-panel__separator.cdk-keyboard-focused{outline:var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);outline-offset:calc(-1 * var(--kbq-splitter-size-focus-outline-width))}.kbq-splitter_disabled>.kbq-splitter-panel>.kbq-splitter-panel__separator{pointer-events:none}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator{inset-block:auto;inset-inline:0;inset-block-end:calc(var(--kbq-splitter-size-hit-area) / -2);inline-size:auto;block-size:var(--kbq-splitter-size-hit-area)}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-block:0;inset-inline:0;inline-size:auto;block-size:var(--kbq-splitter-size-line-width);margin-inline:0;margin-block:auto}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:active,.kbq-active):after{inline-size:auto;block-size:var(--kbq-splitter-size-active-line-width)}.kbq-splitter_transparent>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{opacity:0}.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-block:0;inline-size:var(--kbq-splitter-size-handle-thickness);block-size:var(--kbq-splitter-size-handle-length);margin-block:auto;border-radius:var(--kbq-splitter-size-handle-border-radius);background-color:var(--kbq-splitter-handle-color)}.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:hover,.kbq-hover):after,.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:active,.kbq-active):after,.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator.cdk-keyboard-focused:after{background-color:var(--kbq-splitter-state-active-handle-color)}.kbq-splitter_handle.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-inline:0;inline-size:var(--kbq-splitter-size-handle-length);block-size:var(--kbq-splitter-size-handle-thickness);margin-inline:auto;margin-block:auto}\n", ".kbq-splitter{--kbq-splitter-size-line-width: 1px;--kbq-splitter-size-active-line-width: 3px;--kbq-splitter-size-focus-outline-width: 2px;--kbq-splitter-size-hit-area: calc(2 * var(--kbq-size-s) + var(--kbq-splitter-size-line-width));--kbq-splitter-size-handle-length: var(--kbq-size-3xl);--kbq-splitter-size-handle-thickness: var(--kbq-size-xxs);--kbq-splitter-size-handle-border-radius: var(--kbq-size-3xs);--kbq-splitter-line-color: var(--kbq-line-contrast-less);--kbq-splitter-state-hover-line-color: var(--kbq-line-contrast-fade);--kbq-splitter-state-active-line-color: var(--kbq-states-line-focus-theme);--kbq-splitter-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-splitter-handle-color: var(--kbq-line-contrast-fade);--kbq-splitter-state-active-handle-color: var(--kbq-states-line-focus-theme)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbq-splitter-area]',
-                    host: {
-                        class: 'kbq-splitter-area',
-                        '[class.kbq-splitter-area_resizing]': 'isResizing()'
-                    }
-                }]
-        }], propDecorators: { sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitter, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-splitter', template: '<ng-content />', providers: [{ provide: KBQ_SPLITTER, useExisting: KbqSplitter }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-splitter',
+                        '[class.kbq-splitter_vertical]': "orientation() === 'vertical'",
+                        '[class.kbq-splitter_disabled]': 'disabled()',
+                        '[class.kbq-splitter_dragging]': 'dragging()',
+                        '[class.kbq-splitter_transparent]': "appearance() === 'transparent'",
+                        '[class.kbq-splitter_handle]': "appearance() === 'handle'",
+                        '[style.grid-template-columns]': "orientation() === 'horizontal' ? gridTemplate() : null",
+                        '[style.grid-template-rows]': "orientation() === 'vertical' ? gridTemplate() : null"
+                    }, exportAs: 'kbqSplitter', styles: [".kbq-splitter{display:grid;position:relative;min-width:0;min-height:0;overflow:clip;grid-template-rows:minmax(0,1fr)}.kbq-splitter.kbq-splitter_vertical{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}.kbq-splitter.kbq-splitter_dragging .kbq-splitter-panel__content{pointer-events:none;-webkit-user-select:none;user-select:none}.kbq-splitter-panel{position:relative;min-width:0;min-height:0;outline:none}.kbq-splitter-panel:focus-visible{outline:var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);outline-offset:calc(-1 * var(--kbq-splitter-size-focus-outline-width))}.kbq-splitter-panel__content{display:flex;flex-direction:column;block-size:100%;inline-size:100%;overflow:hidden}.kbq-splitter-panel__separator{position:absolute;z-index:1;inset-block:0;inset-inline-end:calc(var(--kbq-splitter-size-hit-area) / -2);inline-size:var(--kbq-splitter-size-hit-area);touch-action:none;outline:none}.kbq-splitter-panel__separator:after{position:absolute;inset-block:0;inset-inline:0;inline-size:var(--kbq-splitter-size-line-width);margin-inline:auto;background-color:var(--kbq-splitter-line-color);content:\"\"}.kbq-splitter-panel__separator:is(:hover,.kbq-hover):after{background-color:var(--kbq-splitter-state-hover-line-color)}.kbq-splitter-panel__separator:is(:active,.kbq-active):after{inline-size:var(--kbq-splitter-size-active-line-width);background-color:var(--kbq-splitter-state-active-line-color)}.kbq-splitter-panel__separator.cdk-keyboard-focused{outline:var(--kbq-splitter-size-focus-outline-width) solid var(--kbq-splitter-focus-outline-color);outline-offset:calc(-1 * var(--kbq-splitter-size-focus-outline-width))}.kbq-splitter_disabled>.kbq-splitter-panel>.kbq-splitter-panel__separator{pointer-events:none}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator{inset-block:auto;inset-inline:0;inset-block-end:calc(var(--kbq-splitter-size-hit-area) / -2);inline-size:auto;block-size:var(--kbq-splitter-size-hit-area)}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-block:0;inset-inline:0;inline-size:auto;block-size:var(--kbq-splitter-size-line-width);margin-inline:0;margin-block:auto}.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:active,.kbq-active):after{inline-size:auto;block-size:var(--kbq-splitter-size-active-line-width)}.kbq-splitter_transparent>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{opacity:0}.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-block:0;inline-size:var(--kbq-splitter-size-handle-thickness);block-size:var(--kbq-splitter-size-handle-length);margin-block:auto;border-radius:var(--kbq-splitter-size-handle-border-radius);background-color:var(--kbq-splitter-handle-color)}.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:hover,.kbq-hover):after,.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator:is(:active,.kbq-active):after,.kbq-splitter_handle>.kbq-splitter-panel>.kbq-splitter-panel__separator.cdk-keyboard-focused:after{background-color:var(--kbq-splitter-state-active-handle-color)}.kbq-splitter_handle.kbq-splitter_vertical>.kbq-splitter-panel>.kbq-splitter-panel__separator:after{inset-inline:0;inline-size:var(--kbq-splitter-size-handle-length);block-size:var(--kbq-splitter-size-handle-thickness);margin-inline:auto;margin-block:auto}\n", ".kbq-splitter{--kbq-splitter-size-line-width: 1px;--kbq-splitter-size-active-line-width: 3px;--kbq-splitter-size-focus-outline-width: 2px;--kbq-splitter-size-hit-area: calc(2 * var(--kbq-size-s) + var(--kbq-splitter-size-line-width));--kbq-splitter-size-handle-length: var(--kbq-size-3xl);--kbq-splitter-size-handle-thickness: var(--kbq-size-xxs);--kbq-splitter-size-handle-border-radius: var(--kbq-size-3xs);--kbq-splitter-line-color: var(--kbq-line-contrast-less);--kbq-splitter-state-hover-line-color: var(--kbq-line-contrast-fade);--kbq-splitter-state-active-line-color: var(--kbq-states-line-focus-theme);--kbq-splitter-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-splitter-handle-color: var(--kbq-line-contrast-fade);--kbq-splitter-state-active-handle-color: var(--kbq-states-line-focus-theme)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqSplitterPanel), { ...{ descendants: false }, isSignal: true }] }] } });
 
+const COMPONENTS = [KbqSplitter, KbqSplitterPanel];
+/**
+ * Convenience module for `NgModule` consumers. Everything it re-exports is standalone, so importing
+ * `KbqSplitter` and `KbqSplitterPanel` directly is the preferred way in — the library's own examples do that.
+ */
 class KbqSplitterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
-            KbqGutterDirective,
-            KbqGutterGhostDirective,
-            KbqSplitterAreaDirective,
-            KbqSplitterComponent], exports: [KbqGutterDirective,
-            KbqSplitterAreaDirective,
-            KbqSplitterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqSplitter, KbqSplitterPanel], exports: [KbqSplitter, KbqSplitterPanel] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        KbqIconModule,
-                        KbqGutterDirective,
-                        KbqGutterGhostDirective,
-                        KbqSplitterAreaDirective,
-                        KbqSplitterComponent
-                    ],
-                    exports: [
-                        KbqGutterDirective,
-                        KbqSplitterAreaDirective,
-                        KbqSplitterComponent
-                    ]
+                    imports: COMPONENTS,
+                    exports: COMPONENTS
                 }]
         }] });
 
@@ -543,5 +932,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Direction, KbqGutterDirective, KbqGutterGhostDirective, KbqSplitterAreaDirective, KbqSplitterComponent, KbqSplitterModule };
+export { KBQ_SPLITTER, KBQ_SPLITTER_OPTIONS, KbqSplitter, KbqSplitterModule, KbqSplitterPanel, fitSplitterSizes, kbqSplitterOptionsProvider, resizeSplitterSizesAt, resolveSplitterSize, snapSplitterSize };
 //# sourceMappingURL=koobiq-components-splitter.mjs.map