igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/splitter/splitter.js

@@ -8,24 +8,28 @@ import { html, LitElement } from 'lit';
 import { eventOptions, property, query, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, ctrlKey, endKey, homeKey, } from '../common/controllers/key-bindings.js';
-import { createResizeObserverController } from '../common/controllers/resize-observer.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { partMap } from '../common/part-map.js';
-import { asNumber, asPercent, bindIf, clamp, isLTR, roundPrecise, } from '../common/util.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, ctrlKey, endKey, homeKey, } from '#internals/controllers/key-bindings.js';
+import { createResizeObserverController } from '#internals/controllers/resize-observer.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { partMap } from '#internals/part-map.js';
+import { isLTR, resolveCssLength } from '#internals/utils/dom.js';
+import { bindIf } from '#internals/utils/lit.js';
+import { asNumber, asPercent, clamp, roundPrecise, } from '#internals/utils/math.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcVisuallyHiddenComponent from '../visually-hidden/visually-hidden.js';
 import { styles as shared } from './themes/shared/splitter.common.css.js';
 import { styles } from './themes/splitter.base.css.js';
 import { all } from './themes/themes.js';
 const KEYBOARD_RESIZE_STEP = 10;
+const PANES = ['start', 'end'];
+const CSS_LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(%|px|em|rem|ch|ex|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|cm|mm|q|in|pt|pc)$/i;
+const UNITLESS_NUMBER = /^[+-]?(\d+\.?\d*|\.\d+)$/;
 const DEFAULT_RESIZE_STATE = {
     startPane: null,
     endPane: null,
-    isDragging: false,
     dragStartPosition: { x: 0, y: 0 },
     dragPointerId: -1,
 };
@@ -38,6 +42,9 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
     get _separator() {
         return this._separatorRef.value;
     }
+    get _isDragging() {
+        return this._resizeState.dragPointerId !== -1;
+    }
     get _resizeDisallowed() {
         return this.disableResize || this._collapsedPane != null;
     }
@@ -75,25 +82,45 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         return this._endPaneState.maxSize;
     }
     set startSize(value) {
-        this._startPaneState.size = this._normalizeValue(value, 'auto');
+        this._setPaneSize('start', value);
     }
     get startSize() {
         return this._startPaneState.size;
     }
     set endSize(value) {
-        this._endPaneState.size = this._normalizeValue(value, 'auto');
+        this._setPaneSize('end', value);
     }
     get endSize() {
         return this._endPaneState.size;
     }
+    set startCollapsed(value) {
+        this._setCollapsed('start', value);
+    }
+    get startCollapsed() {
+        return this._isCollapsed('start');
+    }
+    set endCollapsed(value) {
+        this._setCollapsed('end', value);
+    }
+    get endCollapsed() {
+        return this._isCollapsed('end');
+    }
     constructor() {
         super();
         this._internals = addInternalsController(this);
         this._separatorRef = createRef();
-        this._startPaneState = { size: 'auto', styles: {} };
-        this._endPaneState = { size: 'auto', styles: {} };
+        this._startPaneState = {
+            size: 'auto',
+            styles: {},
+        };
+        this._endPaneState = {
+            size: 'auto',
+            styles: {},
+        };
         this._collapsedPane = null;
         this._resizeState = { ...DEFAULT_RESIZE_STATE };
+        this._measurement = null;
+        this._observedSize = -1;
         this.orientation = 'horizontal';
         this.disableCollapse = false;
         this.disableResize = false;
@@ -102,7 +129,7 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         addThemingController(this, all);
         addSlotController(this, { slots: setSlots('start', 'end') });
         createResizeObserverController(this, {
-            callback: () => this.requestUpdate(),
+            callback: () => this._handleContainerResize(),
         });
         addKeybindings(this, {
             ref: this._separatorRef,
@@ -119,13 +146,9 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
             .set([ctrlKey, arrowRight], () => this._handleArrowsExpandCollapse('end', 'horizontal'));
     }
     update(changed) {
+        this._measurement = null;
         if (changed.get('orientation') != null) {
-            for (const pane of ['start', 'end']) {
-                const state = this._getPaneState(pane);
-                state.size = 'auto';
-                state.minSize = undefined;
-                state.maxSize = undefined;
-            }
+            this._resetPaneSizes();
         }
         if (this.hasUpdated) {
             this._updatePanes();
@@ -133,16 +156,20 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         super.update(changed);
     }
     updated() {
+        this._measurement = null;
         this._updateBarAria();
     }
+    disconnectedCallback() {
+        this._endDrag();
+        super.disconnectedCallback();
+    }
     _handleBarPointerDown(e) {
-        if (e.button !== 0) {
+        if (e.button !== 0 || this._isDragging) {
             return;
         }
         e.preventDefault();
         this._resizeState = {
             ...this._resizeState,
-            isDragging: true,
             dragPointerId: e.pointerId,
             dragStartPosition: { x: e.clientX, y: e.clientY },
         };
@@ -167,30 +194,74 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         if (e.pointerId !== this._resizeState.dragPointerId) {
             return;
         }
-        const delta = this._getDragDelta(e);
-        if (delta !== 0) {
-            this._resizeEnd(delta);
+        this._resizeEnd(this._getDragDelta(e));
+        this._endDrag();
+    }
+    _handleCancelDrag(e) {
+        if (e.pointerId !== this._resizeState.dragPointerId) {
+            return;
         }
+        this._resizeEnd(0);
         this._endDrag();
     }
     _endDrag() {
-        if (this._resizeState.dragPointerId !== -1) {
-            this._separator?.releasePointerCapture(this._resizeState.dragPointerId);
+        const { dragPointerId } = this._resizeState;
+        if (this._separator?.hasPointerCapture(dragPointerId)) {
+            this._separator.releasePointerCapture(dragPointerId);
         }
         this._resizeState = { ...DEFAULT_RESIZE_STATE };
     }
     toggle(position) {
-        if (this._collapsedPane === null) {
+        this._applyCollapse(this._collapsedPane === position ? null : position);
+    }
+    _applyCollapse(target) {
+        if (this._collapsedPane === null && target !== null) {
             this._savePaneSizes();
         }
-        this._collapsedPane = this._collapsedPane === position ? null : position;
+        const wasStartCollapsed = this._isCollapsed('start');
+        const wasEndCollapsed = this._isCollapsed('end');
+        this._collapsedPane = target;
+        this.requestUpdate('startCollapsed', wasStartCollapsed);
+        this.requestUpdate('endCollapsed', wasEndCollapsed);
         this._internals.setState('start-collapsed', this._isCollapsed('start'));
         this._internals.setState('end-collapsed', this._isCollapsed('end'));
         this._restoreSizesOnExpandCollapse();
     }
+    _setPaneSize(pane, value) {
+        this._getPaneState(pane).size = this._normalizeValue(value, 'auto');
+        if (this._collapsedPane !== null) {
+            for (const target of PANES) {
+                this._getPaneState(target).savedSize = undefined;
+            }
+        }
+    }
+    _resetPaneSizes() {
+        for (const pane of PANES) {
+            const state = this._getPaneState(pane);
+            state.size = 'auto';
+            state.minSize = undefined;
+            state.maxSize = undefined;
+            state.savedSize = undefined;
+            for (const suffix of ['size', 'min-size', 'max-size']) {
+                this.removeAttribute(`${pane}-${suffix}`);
+            }
+        }
+    }
+    _setCollapsed(pane, value) {
+        if (this._isCollapsed(pane) === value) {
+            return;
+        }
+        this._applyCollapse(value ? pane : null);
+    }
     _savePaneSizes() {
-        this._startPaneState.savedSize = `${this._paneRectAsPercent(0)}%`;
-        this._endPaneState.savedSize = `${this._paneRectAsPercent(1)}%`;
+        if (this._getTotalSize() === 0) {
+            this._startPaneState.savedSize = this._startPaneState.size;
+            this._endPaneState.savedSize = this._endPaneState.size;
+            return;
+        }
+        const [start, end] = this._rectSize();
+        this._startPaneState.savedSize = `${this._asPercentOfContainer(start, 2)}%`;
+        this._endPaneState.savedSize = `${this._asPercentOfContainer(end, 2)}%`;
     }
     _restoreSizesOnExpandCollapse() {
         if (this._collapsedPane !== null) {
@@ -203,23 +274,17 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
             this._endPaneState.size = this._endPaneState.savedSize ?? this.endSize;
         }
     }
-    _paneRectAsPercent(paneIndex) {
-        const totalSize = this._getTotalSize();
-        if (totalSize === 0) {
-            return 0;
-        }
-        return roundPrecise(asPercent(this._rectSize()[paneIndex], totalSize), 0);
+    _asPercentOfContainer(size, precision = 0) {
+        const containerSize = this._getContainerSize();
+        return containerSize === 0
+            ? 0
+            : roundPrecise(asPercent(size, containerSize), precision);
     }
-    _sizeToPercent(sizeValue) {
-        const totalSize = this._getTotalSize();
-        if (totalSize === 0) {
-            return 0;
-        }
-        if (sizeValue.includes('%')) {
-            return asNumber(sizeValue);
+    _toPixels(value) {
+        if (value.endsWith('%')) {
+            return (asNumber(value) / 100) * this._getContainerSize();
         }
-        const pxValue = asNumber(sizeValue);
-        return roundPrecise(asPercent(pxValue, totalSize), 0);
+        return this._base ? resolveCssLength(this._base, value) : 0;
     }
     _getStartPaneSizePercent() {
         if (!this._startPane || this._isCollapsed('start')) {
@@ -228,21 +293,29 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         if (this._isCollapsed('end')) {
             return 100;
         }
-        return this._paneRectAsPercent(0);
+        return this._asPercentOfContainer(this._rectSize()[0]);
     }
     _getMinMaxAsPercent(type) {
         const value = type === 'min' ? this.startMinSize : this.startMaxSize;
-        const defaultValue = type === 'min' ? 0 : 100;
-        return value ? this._sizeToPercent(value) : defaultValue;
+        if (!value) {
+            return type === 'min' ? 0 : 100;
+        }
+        return this._asPercentOfContainer(this._toPixels(value));
     }
     _isCollapsed(which) {
         return this._collapsedPane === which;
     }
+    _otherPane(pane) {
+        return pane === 'start' ? 'end' : 'start';
+    }
     _updateBarAria() {
-        if (this._separator) {
-            this._separator.ariaValueNow = this._getStartPaneSizePercent().toString();
-            this._separator.ariaValueMin = this._getMinMaxAsPercent('min').toString();
-            this._separator.ariaValueMax = this._getMinMaxAsPercent('max').toString();
+        const separator = this._separator;
+        if (separator) {
+            const value = this._getStartPaneSizePercent();
+            separator.ariaValueNow = value.toString();
+            separator.ariaValueText = `${value}%`;
+            separator.ariaValueMin = this._getMinMaxAsPercent('min').toString();
+            separator.ariaValueMax = this._getMinMaxAsPercent('max').toString();
         }
     }
     _getPaneState(which) {
@@ -265,10 +338,11 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
             return fallback;
         if (trimmed.includes('%') && numericValue > 100)
             return fallback;
-        return trimmed;
+        const isUnitlessZero = numericValue === 0 && UNITLESS_NUMBER.test(trimmed);
+        return isUnitlessZero || CSS_LENGTH.test(trimmed) ? trimmed : fallback;
     }
-    _getFlex(which) {
-        const isAuto = this._isAutoSize(which);
+    _getFlex(which, forceAuto = false) {
+        const isAuto = forceAuto || this._isAutoSize(which);
         const size = isAuto ? '0px' : this._getPaneState(which).size;
         return `${isAuto ? 1 : 0} 1 ${size}`;
     }
@@ -277,9 +351,13 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
             return;
         }
         const delta = this._resolveDelta(KEYBOARD_RESIZE_STEP, KEYBOARD_RESIZE_STEP, direction);
+        this._runResize(delta);
+    }
+    _runResize(delta) {
         this._resizeStart();
         this._resizing(delta);
         this._resizeEnd(delta);
+        this._endDrag();
     }
     _preventDefaultForEvent(e) {
         e.preventDefault();
@@ -294,66 +372,63 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         if (this._resizeDisallowed) {
             return;
         }
-        const totalSize = this._getTotalSize();
-        const boundaryValue = type === 'min' ? this.startMinSize : this.startMaxSize;
-        const isPercentage = boundaryValue
-            ? boundaryValue.includes('%')
-            : type === 'max';
-        const targetStartSizePx = this._setMinMaxInPx('start', type) ?? (type === 'min' ? 0 : totalSize);
-        const targetEndSizePx = totalSize - targetStartSizePx;
-        if (isPercentage) {
-            this.startSize = `${roundPrecise(asPercent(targetStartSizePx, totalSize), 2)}%`;
-            this.endSize = `${roundPrecise(asPercent(targetEndSizePx, totalSize), 2)}%`;
-        }
-        else {
-            this.startSize = `${targetStartSizePx}px`;
-            this.endSize = `${targetEndSizePx}px`;
-        }
+        const targetStartSizePx = this._getConstraintInPx('start', type) ??
+            (type === 'min' ? 0 : this._getTotalSize());
+        this._runResize(targetStartSizePx - this._rectSize()[0]);
     }
     _handleExpanderAction(pane) {
-        const other = pane === 'start' ? 'end' : 'start';
-        this.toggle(this._collapsedPane === other ? other : pane);
+        const other = this._otherPane(pane);
+        this._toggleWithEvent(this._collapsedPane === other ? other : pane);
+    }
+    _toggleWithEvent(position) {
+        this.toggle(position);
+        this._emitLayoutChanged();
+    }
+    _reportedSize(pane) {
+        const state = this._getPaneState(pane);
+        return ((this._collapsedPane !== null ? state.savedSize : state.size) ?? 'auto');
+    }
+    _emitLayoutChanged() {
+        const detail = {
+            startSize: this._reportedSize('start'),
+            endSize: this._reportedSize('end'),
+            startCollapsed: this.startCollapsed,
+            endCollapsed: this.endCollapsed,
+        };
+        this.emitEvent('igcLayoutChanged', { detail });
     }
     _handleArrowsExpandCollapse(target, validOrientation) {
         if (this.disableCollapse || this.orientation !== validOrientation) {
             return;
         }
-        const effectiveTarget = validOrientation === 'horizontal' && !isLTR(this)
-            ? target === 'start'
-                ? 'end'
-                : 'start'
-            : target;
-        this._handleExpanderAction(effectiveTarget);
+        const isFlipped = validOrientation === 'horizontal' && !isLTR(this);
+        this._handleExpanderAction(isFlipped ? this._otherPane(target) : target);
     }
     _resizeStart() {
         const [startSize, endSize] = this._rectSize();
-        const totalSize = this._getTotalSize();
-        this._resizeState.startPane = this._createPaneState('start', startSize, totalSize);
-        this._resizeState.endPane = this._createPaneState('end', endSize, totalSize);
+        this._resizeState.startPane = this._createPaneState('start', startSize);
+        this._resizeState.endPane = this._createPaneState('end', endSize);
         this.emitEvent('igcResizeStart', {
             detail: { startPanelSize: startSize, endPanelSize: endSize },
         });
     }
-    _createPaneState(pane, size, totalSize) {
+    _createPaneState(pane, size) {
         return {
             initialSize: size,
             isPercentageBased: this._isPercentageSize(pane) || this._isAutoSize(pane),
-            minSizePx: this._setMinMaxInPx(pane, 'min', totalSize),
-            maxSizePx: this._setMinMaxInPx(pane, 'max', totalSize),
+            minSizePx: this._getConstraintInPx(pane, 'min'),
+            maxSizePx: this._getConstraintInPx(pane, 'max'),
         };
     }
-    _setMinMaxInPx(pane, type, totalSize) {
-        const paneState = this._getPaneState(pane);
-        const value = type === 'max' ? paneState.maxSize : paneState.minSize;
-        const valueAsNumber = asNumber(value);
-        if (!value) {
-            return undefined;
-        }
-        return value.includes('%')
-            ? (valueAsNumber / 100) * (totalSize ?? this._getTotalSize())
-            : valueAsNumber;
+    _getConstraintInPx(pane, type) {
+        const { minSize, maxSize } = this._getPaneState(pane);
+        const value = type === 'max' ? maxSize : minSize;
+        return value ? this._toPixels(value) : undefined;
     }
     _resizing(delta) {
+        if (!this._resizeState.startPane || !this._resizeState.endPane) {
+            return;
+        }
         const [startPaneSize, endPaneSize] = this._calcNewSizes(delta);
         this.startSize = `${startPaneSize}px`;
         this.endSize = `${endPaneSize}px`;
@@ -365,19 +440,22 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
             },
         });
     }
-    _computeSize(pane, paneSize, totalSize) {
+    _computeSize(pane, paneSize, containerSize) {
         return pane.isPercentageBased
-            ? `${asPercent(paneSize, totalSize)}%`
+            ? `${asPercent(paneSize, containerSize)}%`
             : `${roundPrecise(paneSize, 0)}px`;
     }
     _resizeEnd(delta) {
-        if (!this._resizeState.startPane || !this._resizeState.endPane) {
+        const { startPane, endPane } = this._resizeState;
+        if (!startPane || !endPane) {
             return;
         }
-        const [startPaneSize, endPaneSize] = this._calcNewSizes(delta);
-        const totalSize = this._getTotalSize();
-        this.startSize = this._computeSize(this._resizeState.startPane, startPaneSize, totalSize);
-        this.endSize = this._computeSize(this._resizeState.endPane, endPaneSize, totalSize);
+        const [startPaneSize, endPaneSize] = delta === 0
+            ? [startPane.initialSize, endPane.initialSize]
+            : this._calcNewSizes(delta);
+        const containerSize = this._getContainerSize();
+        this.startSize = this._computeSize(startPane, startPaneSize, containerSize);
+        this.endSize = this._computeSize(endPane, endPaneSize, containerSize);
         this.emitEvent('igcResizeEnd', {
             detail: {
                 startPanelSize: startPaneSize,
@@ -385,6 +463,7 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
                 delta,
             },
         });
+        this._emitLayoutChanged();
     }
     _rectSize() {
         const axis = this._isHorizontal ? 'width' : 'height';
@@ -406,62 +485,64 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         const finalDelta = clamp(delta, -maxNegDelta, maxPosDelta);
         return [start.initialSize + finalDelta, end.initialSize - finalDelta];
     }
+    _measure() {
+        const axis = this._isHorizontal ? 'width' : 'height';
+        this._measurement ??= {
+            container: this._base ? this._base.getBoundingClientRect()[axis] : 0,
+            bar: this._separator
+                ? roundPrecise(this._separator.getBoundingClientRect()[axis])
+                : 0,
+        };
+        return this._measurement;
+    }
+    _getContainerSize() {
+        return this._measure().container;
+    }
     _getTotalSize() {
-        if (!this._base) {
-            return 0;
+        const { container, bar } = this._measure();
+        return container === 0 ? 0 : container - bar;
+    }
+    _handleContainerResize() {
+        this._measurement = null;
+        const size = this._getContainerSize();
+        if (size !== this._observedSize) {
+            this._observedSize = size;
+            this.requestUpdate();
         }
-        const axis = this._isHorizontal ? 'width' : 'height';
-        const barSize = this._separator
-            ? roundPrecise(this._separator.getBoundingClientRect()[axis])
-            : 0;
-        const rect = this._base.getBoundingClientRect();
-        const size = rect[axis];
-        return size - barSize;
     }
     _updatePanes() {
-        const totalSize = this._getTotalSize();
         const isCollapsed = this._collapsedPane !== null;
-        for (const pane of ['start', 'end']) {
-            const state = this._getPaneState(pane);
-            if (isCollapsed) {
-                state.size = 'auto';
-                state.minSize = undefined;
-                state.maxSize = undefined;
-            }
-            this._setPaneMinMaxSizes(pane, isCollapsed ? '0' : state.minSize, isCollapsed ? '100%' : state.maxSize, totalSize);
-            this._updatePaneStyles(pane, { flex: this._getFlex(pane) });
+        for (const pane of PANES) {
+            const { minSize, maxSize } = this._getPaneState(pane);
+            this._setPaneMinMaxSizes(pane, isCollapsed ? '0' : minSize, isCollapsed ? '100%' : maxSize);
+            this._updatePaneStyles(pane, { flex: this._getFlex(pane, isCollapsed) });
         }
     }
     _updatePaneStyles(pane, styles) {
         Object.assign(this._getPaneState(pane).styles, styles);
     }
-    _setPaneMinMaxSizes(pane, minSize, maxSize, totalSize) {
-        const min = this._ensureMinConstraintIsWithinBounds(pane, minSize, totalSize) ?? 0;
+    _setPaneMinMaxSizes(pane, minSize, maxSize) {
+        const min = this._ensureMinConstraintIsWithinBounds(pane, minSize) ?? 0;
         const max = maxSize ?? '100%';
         this._updatePaneStyles(pane, this._isHorizontal
             ? { minWidth: min, maxWidth: max, minHeight: 0, maxHeight: '100%' }
             : { minWidth: 0, maxWidth: '100%', minHeight: min, maxHeight: max });
     }
-    _ensureMinConstraintIsWithinBounds(pane, minSize, totalSize) {
-        const total = totalSize ?? this._getTotalSize();
-        if (minSize && total > 0) {
-            const minPx = this._setMinMaxInPx(pane, 'min', total) ?? 0;
-            const other = pane === 'start' ? 'end' : 'start';
-            const otherMinPx = this._getPaneState(other).minSize
-                ? (this._setMinMaxInPx(other, 'min', total) ?? 0)
-                : 0;
-            if (minPx > total || minPx + otherMinPx > total) {
-                return undefined;
-            }
+    _ensureMinConstraintIsWithinBounds(pane, minSize) {
+        const total = this._getTotalSize();
+        if (!minSize || total <= 0) {
+            return minSize;
         }
-        return minSize;
+        const minPx = this._getConstraintInPx(pane, 'min') ?? 0;
+        const otherMinPx = this._getConstraintInPx(this._otherPane(pane), 'min') ?? 0;
+        return minPx + otherMinPx > total ? undefined : minSize;
     }
     _handleExpanderClick(pane, event) {
         event.stopPropagation();
         this._handleExpanderAction(pane);
     }
     _resolvePartNames(expander) {
-        const other = expander === 'start' ? 'end' : 'start';
+        const other = this._otherPane(expander);
         const otherIsCollapsed = this._isCollapsed(other);
         return {
             [`${other}-expand-btn`]: otherIsCollapsed,
@@ -489,7 +570,10 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
     }
     _renderAccessibleLabel() {
         return html `
-      <igc-visually-hidden id="splitter-label">
+      <igc-visually-hidden id="splitter-label"
+        >Resize panes</igc-visually-hidden
+      >
+      <igc-visually-hidden id="splitter-state">
         ${this._isCollapsed('start')
             ? 'Start pane collapsed'
             : 'Start pane expanded'}
@@ -499,7 +583,6 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
     `;
     }
     _renderSeparator() {
-        const isDragging = this._resizeState.isDragging;
         const canResize = !this._resizeDisallowed;
         return html `
       <div
@@ -509,15 +592,16 @@ export default class IgcSplitterComponent extends EventEmitterMixin(LitElement)
         tabindex=${this.disableCollapse && this.disableResize ? -1 : 0}
         aria-controls="start-pane end-pane"
         aria-labelledby="splitter-label"
+        aria-describedby="splitter-state"
         aria-orientation=${this.orientation}
         style=${styleMap({ '--cursor': this._separatorCursor })}
         @touchstart=${bindIf(canResize, this._preventDefaultForEvent)}
         @contextmenu=${bindIf(canResize, this._preventDefaultForEvent)}
         @pointerdown=${bindIf(canResize, this._handleBarPointerDown)}
-        @pointermove=${bindIf(isDragging, this._handleBarPointerMove)}
-        @pointerup=${bindIf(isDragging, this._handleEndDrag)}
-        @lostpointercapture=${bindIf(isDragging, this._handleEndDrag)}
-        @pointercancel=${bindIf(isDragging, this._endDrag)}
+        @pointermove=${this._handleBarPointerMove}
+        @pointerup=${this._handleEndDrag}
+        @lostpointercapture=${this._handleEndDrag}
+        @pointercancel=${this._handleCancelDrag}
       >
         ${this._renderBarControls()}
       </div>
@@ -550,10 +634,7 @@ __decorate([
     state()
 ], IgcSplitterComponent.prototype, "_collapsedPane", void 0);
 __decorate([
-    state()
-], IgcSplitterComponent.prototype, "_resizeState", void 0);
-__decorate([
-    query('[part~="base"]', true)
+    query('[part~="base"]')
 ], IgcSplitterComponent.prototype, "_base", void 0);
 __decorate([
     query('[part~="start-pane"]', true)
@@ -602,6 +683,12 @@ __decorate([
 __decorate([
     property({ attribute: 'end-size' })
 ], IgcSplitterComponent.prototype, "endSize", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'start-collapsed' })
+], IgcSplitterComponent.prototype, "startCollapsed", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'end-collapsed' })
+], IgcSplitterComponent.prototype, "endCollapsed", null);
 __decorate([
     eventOptions({ passive: false })
 ], IgcSplitterComponent.prototype, "_preventDefaultForEvent", null);