@spectrum-web-components/split-view - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

package.json

 {
     "name": "@spectrum-web-components/split-view",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "publishConfig": {
@@ -76,3 +76,3 @@ "access": "public"
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "gitHead": "31d083d1eb61a1382335030c190c85d85f41e15d"
 }

sp-split-view.dev.js

@@ -0,3 +1,4 @@
+"use strict";
 import { SplitView } from "./src/SplitView.dev.js";
 customElements.define("sp-split-view", SplitView);
 //# sourceMappingURL=sp-split-view.dev.js.map

sp-split-view.js

@@ -1,2 +0,2 @@
-import{SplitView as e}from"./src/SplitView.js";customElements.define("sp-split-view",e);
+"use strict";import{SplitView as e}from"./src/SplitView.js";customElements.define("sp-split-view",e);
 //# sourceMappingURL=sp-split-view.js.map

src/index.dev.js

@@ -0,2 +1,3 @@
+"use strict";
 export * from "./SplitView.dev.js";
 //# sourceMappingURL=index.dev.js.map

src/index.js

@@ -1,2 +0,2 @@
-export*from"./SplitView.js";
+"use strict";export*from"./SplitView.js";
 //# sourceMappingURL=index.js.map

src/spectrum-split-view.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/spectrum-split-view.css.js

@@ -1,2 +0,2 @@
-import{css as r}from"@spectrum-web-components/base";const e=r`
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 :host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
@@ -3,0 +3,0 @@ --spectrum-dragbar-gripper-width,

src/split-view.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -96,3 +97,3 @@ const styles = css`
 --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
-)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
+)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
 --spectrum-dragbar-gripper-width,
@@ -99,0 +100,0 @@ var(--spectrum-global-dimension-static-size-50)

src/split-view.css.js

@@ -1,2 +0,2 @@
-import{css as r}from"@spectrum-web-components/base";const e=r`
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 :host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
@@ -95,3 +95,3 @@ --spectrum-dragbar-gripper-width,
 --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
-)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
+)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
 --spectrum-dragbar-gripper-width,
@@ -98,0 +98,0 @@ var(--spectrum-global-dimension-static-size-50)

src/SplitView.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -71,3 +72,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
     if (!this._splitterSize) {
-      this._splitterSize = this.splitter && Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical ? "height" : "width"))) || SPLITTERSIZE;
+      this._splitterSize = this.splitter && Math.round(
+        parseFloat(
+          window.getComputedStyle(this.splitter).getPropertyValue(
+            this.vertical ? "height" : "width"
+          )
+        )
+      ) || SPLITTERSIZE;
     }
@@ -81,3 +88,6 @@ return this._splitterSize;
       "is-collapsed-start": this.splitterPos === 0,
-      "is-collapsed-end": this.splitterPos && this.splitterPos >= Math.max(this.splitterSize, this.viewSize - this.splitterSize)
+      "is-collapsed-end": this.splitterPos && this.splitterPos >= Math.max(
+        this.splitterSize,
+        this.viewSize - this.splitterSize
+      )
     };
@@ -95,3 +105,5 @@ return html`
                           aria-label=${ifDefined(this.label || void 0)}
-                          tabindex=${ifDefined(this.resizable ? "0" : void 0)}
+                          tabindex=${ifDefined(
+      this.resizable ? "0" : void 0
+    )}
                           @keydown=${this.onKeydown}
@@ -173,3 +185,5 @@ ${streamingListener({
         event.preventDefault();
-        this.updatePosition(this.collapsible ? this.viewSize - this.splitterSize : this.maxPos);
+        this.updatePosition(
+          this.collapsible ? this.viewSize - this.splitterSize : this.maxPos
+        );
         return;
@@ -212,4 +226,10 @@ case "ArrowLeft":
     this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;
-    this.minPos = Math.max(this.primaryMin, this.viewSize - this.secondaryMax);
-    this.maxPos = Math.min(this.primaryMax, this.viewSize - Math.max(this.secondaryMin, this.splitterSize));
+    this.minPos = Math.max(
+      this.primaryMin,
+      this.viewSize - this.secondaryMax
+    );
+    this.maxPos = Math.min(
+      this.primaryMax,
+      this.viewSize - Math.max(this.secondaryMin, this.splitterSize)
+    );
   }
@@ -248,3 +268,5 @@ updatePosition(x) {
       const nodes = this.paneSlot.assignedNodes({ flatten: true });
-      const firstEl = nodes.find((node) => node instanceof HTMLElement);
+      const firstEl = nodes.find(
+        (node) => node instanceof HTMLElement
+      );
       if (typeof firstEl.updateComplete !== "undefined") {
@@ -251,0 +273,0 @@ await firstEl.updateComplete;

src/SplitView.js

@@ -1,2 +0,2 @@
-var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(n,t,e,o)=>{for(var r=o>1?void 0:o?v(t,e):t,h=n.length-1,l;h>=0;h--)(l=n[h])&&(r=(o?l(t,e,r):l(r))||r);return o&&r&&m(t,e,r),r};import{html as a,nothing as f,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as c}from"@spectrum-web-components/base/src/directives.js";import{property as s,query as d}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,u=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return a`
+"use strict";var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(h,a,t,e)=>{for(var s=e>1?void 0:e?v(a,t):a,o=h.length-1,l;o>=0;o--)(l=h[o])&&(s=(e?l(a,t,s):l(s))||s);return e&&s&&m(a,t,s),s};import{html as n,nothing as f,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as c}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as d}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,u=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return n`
             <slot
@@ -6,3 +6,3 @@ @slotchange=${this.onContentSlotChange}
             ></slot>
-            ${this.enoughChildren?a`
+            ${this.enoughChildren?n`
                       <div
@@ -17,8 +17,8 @@ id="splitter"
                       >
-                          ${this.resizable?a`
+                          ${this.resizable?n`
                                     <div id="gripper"></div>
-                                `:a``}
+                                `:n``}
                       </div>
                   `:f}
-        `}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-u&&(e=0),this.collapsible&&e>this.maxPos+u&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const o=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=o?-1:1;break;case"ArrowRight":e=o?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const r=t.key.startsWith("Page")?E:g;this.movePosition(t,r*e)}}async checkResize(){if(!!this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(o=>o instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const o=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),r=parseFloat(o);if(!isNaN(r))return this.getLimitedPosition(Math.ceil(r))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([s({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([s({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([s({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([s({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([s({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([s({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([s({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([s({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([s({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([s({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([s()],SplitView.prototype,"label",2),i([s({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([s({type:Number})],SplitView.prototype,"viewSize",2),i([d("slot")],SplitView.prototype,"paneSlot",2),i([d("#splitter")],SplitView.prototype,"splitter",2);
+        `}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-u&&(e=0),this.collapsible&&e>this.maxPos+u&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const s=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=s?-1:1;break;case"ArrowRight":e=s?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?E:g;this.movePosition(t,o*e)}}async checkResize(){if(!!this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const s=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(s);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([r()],SplitView.prototype,"label",2),i([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([r({type:Number})],SplitView.prototype,"viewSize",2),i([d("slot")],SplitView.prototype,"paneSlot",2),i([d("#splitter")],SplitView.prototype,"splitter",2);
 //# sourceMappingURL=SplitView.js.map

src/types.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=types.dev.js.map

src/types.js

@@ -0,1 +1,2 @@
+"use strict";
 //# sourceMappingURL=types.js.map

stories/split-view.stories.js

@@ -1,11 +0,39 @@
-import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-components/split-view/sp-split-view.js";export default{title:"Split View",component:"sp-split-view",args:{primarySize:100},argTypes:{primarySize:{name:"primarySize",type:{name:"number",required:!1},description:"Size of the primary panel.",table:{type:{summary:"number"},defaultValue:{summary:void 0}},control:{type:"number"}}}};export const Horizontal=e=>i`
-        <sp-split-view style="height: 200px" .primarySize="${e.primarySize}">
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/split-view/sp-split-view.js";
+export default {
+  title: "Split View",
+  component: "sp-split-view",
+  args: {
+    primarySize: 100
+  },
+  argTypes: {
+    primarySize: {
+      name: "primarySize",
+      type: { name: "number", required: false },
+      description: "Size of the primary panel.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "number"
+      }
+    }
+  }
+};
+export const Horizontal = (args) => {
+  return html`
+        <sp-split-view style="height: 200px" .primarySize="${args.primarySize}">
             <div>First panel</div>
             <div>Second panel</div>
         </sp-split-view>
-    `,HorizontalResizable=e=>i`
+    `;
+};
+export const HorizontalResizable = (args) => {
+  return html`
         <sp-split-view
             resizable
             primary-min="50"
-            .primarySize="${e.primarySize}"
+            .primarySize="${args.primarySize}"
             secondary-min="50"
@@ -29,3 +57,6 @@ >
         </sp-split-view>
-    `,HorizontalResizableCollapsible=e=>i`
+    `;
+};
+export const HorizontalResizableCollapsible = (args) => {
+  return html`
         <sp-split-view
@@ -37,3 +68,3 @@ resizable
             style="height: 500px;"
-            .primarySize="${e.primarySize}"
+            .primarySize="${args.primarySize}"
         >
@@ -72,8 +103,20 @@ <div>
         </sp-split-view>
-    `;HorizontalResizableCollapsible.args={primarySize:void 0};export const Vertical=e=>i`
-        <sp-split-view vertical .primarySize="${e.primarySize}">
+    `;
+};
+HorizontalResizableCollapsible.args = {
+  primarySize: void 0
+};
+export const Vertical = (args) => {
+  return html`
+        <sp-split-view vertical .primarySize="${args.primarySize}">
             <div>First panel</div>
             <div>Second panel</div>
         </sp-split-view>
-    `;Vertical.args={primarySize:void 0};export const VerticalResizable=e=>i`
+    `;
+};
+Vertical.args = {
+  primarySize: void 0
+};
+export const VerticalResizable = (args) => {
+  return html`
         <sp-split-view
@@ -86,3 +129,3 @@ vertical
             style="height: 400px;"
-            .primarySize="${e.primarySize}"
+            .primarySize="${args.primarySize}"
         >
@@ -121,3 +164,9 @@ <div>
         </sp-split-view>
-    `;VerticalResizable.args={primarySize:void 0};export const VerticalResizableCollapsible=e=>i`
+    `;
+};
+VerticalResizable.args = {
+  primarySize: void 0
+};
+export const VerticalResizableCollapsible = (args) => {
+  return html`
         <sp-split-view
@@ -130,3 +179,3 @@ vertical
             style="height: 400px;"
-            .primarySize="${e.primarySize}"
+            .primarySize="${args.primarySize}"
         >
@@ -165,3 +214,9 @@ <div>
         </sp-split-view>
-    `;VerticalResizableCollapsible.args={primarySize:250};export const MultipleLevels=e=>i`
+    `;
+};
+VerticalResizableCollapsible.args = {
+  primarySize: 250
+};
+export const MultipleLevels = (args) => {
+  return html`
         <sp-split-view
@@ -195,3 +250,3 @@ resizable
                     primary-min="50"
-                    .primarySize="${e.primarySize}"
+                    .primarySize="${args.primarySize}"
                     secondary-min="50"
@@ -218,8 +273,14 @@ style="height: 300px;"
         </sp-split-view>
-    `,OnePaneNoSplitter=e=>i`
-        <sp-split-view style="height: 200px" .primarySize="${e.primarySize}">
+    `;
+};
+export const OnePaneNoSplitter = (args) => {
+  return html`
+        <sp-split-view style="height: 200px" .primarySize="${args.primarySize}">
             <div>First panel</div>
         </sp-split-view>
-    `,ShowFirstTwoPanes=e=>i`
-        <sp-split-view style="height: 200px" .primarySize="${e.primarySize}">
+    `;
+};
+export const ShowFirstTwoPanes = (args) => {
+  return html`
+        <sp-split-view style="height: 200px" .primarySize="${args.primarySize}">
             <div>First panel</div>
@@ -229,3 +290,7 @@ <div>Second panel</div>
         </sp-split-view>
-    `;ShowFirstTwoPanes.args={primarySize:void 0};
+    `;
+};
+ShowFirstTwoPanes.args = {
+  primarySize: void 0
+};
 //# sourceMappingURL=split-view.stories.js.map

test/benchmark/basic-test.js

@@ -1,2 +0,6 @@
-import"@spectrum-web-components/split-view/sp-split-view.js";import{html as i}from"lit";import{measureFixtureCreation as e}from"../../../../test/benchmark/helpers.js";e(i`
+"use strict";
+import "@spectrum-web-components/split-view/sp-split-view.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
     <sp-split-view resizable>
@@ -3,0 +7,0 @@ <div>First panel</div>

test/split-view.test-vrt.js

@@ -1,2 +0,5 @@
-import*as r from"../stories/split-view.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("SplitViewStories",r);
+"use strict";
+import * as stories from "../stories/split-view.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("SplitViewStories", stories);
 //# sourceMappingURL=split-view.test-vrt.js.map

test/split-view.test.js

@@ -1,2 +0,21 @@
-import{elementUpdated as a,expect as i,fixture as n,html as r}from"@open-wc/testing";import"@spectrum-web-components/split-view/sp-split-view.js";import{arrowDownEvent as h,arrowLeftEvent as d,arrowRightEvent as c,arrowUpEvent as m,endEvent as v,homeEvent as w,pageDownEvent as y,pageUpEvent as E,shiftTabEvent as q,testForLitDevWarnings as S}from"../../../test/testing-helpers.js";import{spy as g}from"sinon";describe("SplitView",()=>{S(async()=>await n(r`
+"use strict";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/split-view/sp-split-view.js";
+import {
+  arrowDownEvent,
+  arrowLeftEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  endEvent,
+  homeEvent,
+  pageDownEvent,
+  pageUpEvent,
+  shiftTabEvent,
+  testForLitDevWarnings
+} from "../../../test/testing-helpers.js";
+import { spy } from "sinon";
+describe("SplitView", () => {
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-split-view primary-size="100">
@@ -6,3 +25,8 @@ <div>First panel</div>
                     </sp-split-view>
-                `)),it("loads default (horizontal) split-view accessibly",async()=>{const o=await n(r`
+                `
+    )
+  );
+  it("loads default (horizontal) split-view accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view primary-size="100">
@@ -12,3 +36,21 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o),await i(o).to.be.accessible(),i(o.splitterPos||0).to.equal(100),i(o.resizable).to.be.false,i(o.collapsible).to.be.false;const t=o.shadowRoot.querySelector("#gripper");i(t).to.be.null;const e=o.shadowRoot.querySelector("#splitter");i(getComputedStyle(e).cursor).to.equal("auto")}),it("loads horizontal [resizable] split-view accessibly",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.splitterPos || 0).to.equal(100);
+    expect(el.resizable).to.be.false;
+    expect(el.collapsible).to.be.false;
+    const gripper = el.shadowRoot.querySelector(
+      "#gripper"
+    );
+    expect(gripper).to.be.null;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    expect(getComputedStyle(splitter).cursor).to.equal("auto");
+  });
+  it("loads horizontal [resizable] split-view accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view resizable primary-size="100px">
@@ -18,3 +60,19 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o),await i(o).to.be.accessible(),i(o.splitterPos||0).to.equal(100);const t=o.shadowRoot.querySelector("#gripper");await i(t).to.be.accessible();const e=o.shadowRoot.querySelector("#splitter");i(getComputedStyle(e).cursor).to.equal("ew-resize")}),it("loads [vertical] split-view accessibly",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.splitterPos || 0).to.equal(100);
+    const gripper = el.shadowRoot.querySelector(
+      "#gripper"
+    );
+    await expect(gripper).to.be.accessible();
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
+  });
+  it("loads [vertical] split-view accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -28,3 +86,15 @@ vertical
                 </sp-split-view>
-            `);await a(o),await i(o).to.be.accessible(),i(o.splitterPos||0).to.equal(300);const t=o.shadowRoot.querySelector("#splitter");i(getComputedStyle(t).cursor).to.equal("auto")}),it("loads [vertical] [resizable] split-view accessibly",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.splitterPos || 0).to.equal(300);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    expect(getComputedStyle(splitter).cursor).to.equal("auto");
+  });
+  it("loads [vertical] [resizable] split-view accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view vertical resizable style="height: 400px">
@@ -34,3 +104,16 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o),await i(o).to.be.accessible(),i(o.splitterPos||0).to.equal(200);const t=o.shadowRoot.querySelector("#splitter");i(getComputedStyle(t).cursor).to.equal("ns-resize")}),it("set all panel values",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.splitterPos || 0).to.equal(200);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
+  });
+  it("set all panel values", async () => {
+    const splitTotalWidth = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -41,3 +124,3 @@ resizable
                     secondary-min="50"
-                    style=${`height: 500px; width: ${400}px;`}
+                    style=${`height: 500px; width: ${splitTotalWidth}px;`}
                 >
@@ -47,7 +130,19 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true,i(t.primaryMin).to.equal(50),i(t.primaryMax).to.equal(300),i(t.secondaryMin).to.equal(50),i(t.secondaryMax).to.equal(3840)}),it("use auto height in primary pane",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    expect(el.primaryMin).to.equal(50);
+    expect(el.primaryMax).to.equal(300);
+    expect(el.secondaryMin).to.equal(50);
+    expect(el.secondaryMax).to.equal(3840);
+  });
+  it("use auto height in primary pane", async () => {
+    const splitTotalWidth = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
                     resizable
                     primary-size="auto"
-                    style=${`height: 500px; width: ${400}px;`}
+                    style=${`height: 500px; width: ${splitTotalWidth}px;`}
                 >
@@ -65,3 +160,14 @@ <div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true,i(t.primarySize).to.equal("auto"),i(t.splitterPos||0).to.equal(398)}),it("resizes when pointer moves and resizable is enabled [ltr]",async()=>{let o=-1;const t=400,e=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    expect(el.primarySize).to.equal("auto");
+    expect(el.splitterPos || 0).to.equal(398);
+  });
+  it("resizes when pointer moves and resizable is enabled [ltr]", async () => {
+    let pointerId = -1;
+    const splitTotalWidth = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -71,3 +177,3 @@ resizable
                     secondary-min="50"
-                    style=${`height: 200px; width: ${t}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                 >
@@ -77,3 +183,66 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(e),i(e.resizable).to.be.true;const s=e.shadowRoot.querySelector("#splitter");s.setPointerCapture=p=>o=p,s.releasePointerCapture=p=>o=p;let l=e.splitterPos;i(e.splitterPos).to.equal(200),s.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(e),i(o).to.equal(1),l-=10,s.dispatchEvent(new PointerEvent("pointermove",{clientX:l})),await a(e),i(Math.round(e.splitterPos)).to.equal(l-e.getBoundingClientRect().left),s.dispatchEvent(new PointerEvent("pointermove",{clientX:0})),await a(e),i(e.splitterPos).to.equal(e.primaryMin),i(getComputedStyle(s).cursor).to.equal("e-resize"),s.dispatchEvent(new PointerEvent("pointermove",{clientX:t})),await a(e),i(e.splitterPos,"350 first time").to.equal(t-e.secondaryMin),i(getComputedStyle(s).cursor).to.equal("w-resize"),s.dispatchEvent(new PointerEvent("pointerup")),await a(e),s.dispatchEvent(new MouseEvent("pointerdown",{button:2,cancelable:!0})),await a(e),s.dispatchEvent(new PointerEvent("pointermove",{clientX:0})),i(e.splitterPos,"350 second time, because right click").to.equal(t-e.secondaryMin)}),it("resizes when pointer moves and resizable is enabled [rtl]",async()=>{let o=-1;const t=400,e=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    let pos = el.splitterPos;
+    expect(el.splitterPos).to.equal(200);
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    pos -= 10;
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: pos
+      })
+    );
+    await elementUpdated(el);
+    expect(Math.round(el.splitterPos)).to.equal(
+      pos - el.getBoundingClientRect().left
+    );
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos).to.equal(el.primaryMin);
+    expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: splitTotalWidth
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos, "350 first time").to.equal(
+      splitTotalWidth - el.secondaryMin
+    );
+    expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    splitter.dispatchEvent(
+      new MouseEvent("pointerdown", { button: 2, cancelable: true })
+    );
+    await elementUpdated(el);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0
+      })
+    );
+    expect(el.splitterPos, "350 second time, because right click").to.equal(
+      splitTotalWidth - el.secondaryMin
+    );
+  });
+  it("resizes when pointer moves and resizable is enabled [rtl]", async () => {
+    let pointerId = -1;
+    const splitTotalWidth = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -83,3 +252,3 @@ resizable
                     secondary-min="40"
-                    style=${`height: 200px; width: ${t}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                     dir="rtl"
@@ -90,3 +259,48 @@ >
                 </sp-split-view>
-            `);await a(e),i(e.resizable).to.be.true;const s=e.shadowRoot.querySelector("#splitter");s.setPointerCapture=p=>o=p,s.releasePointerCapture=p=>o=p;let l=e.splitterPos||0;s.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(e),i(o).to.equal(1),l=e.getBoundingClientRect().right-100,s.dispatchEvent(new PointerEvent("pointermove",{clientX:l})),await a(e),i(Math.round(e.splitterPos||0)).to.equal(e.getBoundingClientRect().right-l),s.dispatchEvent(new PointerEvent("pointermove",{clientX:0})),await a(e),i(e.splitterPos||0).to.equal(t-e.secondaryMin),i(getComputedStyle(s).cursor).to.equal("e-resize"),s.dispatchEvent(new PointerEvent("pointermove",{clientX:e.getBoundingClientRect().right})),await a(e),i(e.splitterPos||0).to.equal(e.primaryMin),i(getComputedStyle(s).cursor).to.equal("w-resize")}),it("resizes to start pos when pointer moves in horizontal splitview",async()=>{let o=-1;const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    let pos = el.splitterPos || 0;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    pos = el.getBoundingClientRect().right - 100;
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: pos
+      })
+    );
+    await elementUpdated(el);
+    expect(Math.round(el.splitterPos || 0)).to.equal(
+      el.getBoundingClientRect().right - pos
+    );
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.secondaryMin);
+    expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: el.getBoundingClientRect().right
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(el.primaryMin);
+    expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
+  });
+  it("resizes to start pos when pointer moves in horizontal splitview", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -100,7 +314,36 @@ resizable
                 </sp-split-view>
-            `);await a(t);const e=t.shadowRoot.querySelector("#splitter");e.setPointerCapture=s=>o=s,e.releasePointerCapture=s=>o=s,e.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(t),i(o).to.equal(1),e.dispatchEvent(new PointerEvent("pointermove",{clientX:-10})),await a(t),i(t.splitterPos||0).to.equal(0),e.dispatchEvent(new PointerEvent("pointerup")),await a(t),i(e.classList.contains("is-collapsed-start")).to.be.true,i(getComputedStyle(e).cursor).to.equal("e-resize")}),it("resizes to end pos when pointer moves in horizontal splitview",async()=>{let o=-1;const t=400,e=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: -10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
+  });
+  it("resizes to end pos when pointer moves in horizontal splitview", async () => {
+    let pointerId = -1;
+    const splitTotalWidth = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
                     resizable
                     primary-min="50"
-                    style=${`height: 200px; width: ${t}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                 >
@@ -110,3 +353,33 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(e);const s=e.shadowRoot.querySelector("#splitter");s.setPointerCapture=l=>o=l,s.releasePointerCapture=l=>o=l,i(e.primaryMin).to.equal(50),i(e.resizable).to.be.true,s.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(e),i(o).to.equal(1),s.dispatchEvent(new PointerEvent("pointermove",{clientX:t+10})),await a(e),i(e.splitterPos||0).to.equal(t-e.splitterSize),s.dispatchEvent(new PointerEvent("pointerup")),await a(e),i(s.classList.contains("is-collapsed-end")).to.be.true,i(getComputedStyle(s).cursor).to.equal("w-resize")}),it("resizes to start pos when pointer moves in [vertical] splitview",async()=>{let o=-1;const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    expect(el.primaryMin).to.equal(50);
+    expect(el.resizable).to.be.true;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: splitTotalWidth + 10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
+  });
+  it("resizes to start pos when pointer moves in [vertical] splitview", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -122,3 +395,32 @@ vertical
                 </sp-split-view>
-            `);await a(t);const e=t.shadowRoot.querySelector("#splitter");e.setPointerCapture=s=>o=s,e.releasePointerCapture=s=>o=s,e.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(t),i(o).to.equal(1),e.dispatchEvent(new PointerEvent("pointermove",{clientY:0})),await a(t),i(t.splitterPos||0).to.equal(0),e.dispatchEvent(new PointerEvent("pointerup")),await a(t),i(e.classList.contains("is-collapsed-start")).to.be.true,i(getComputedStyle(e).cursor).to.equal("s-resize")}),it("resizes to end pos when pointer moves in [vertical] splitview",async()=>{let o=-1;const t=400,e=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: 0
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
+  });
+  it("resizes to end pos when pointer moves in [vertical] splitview", async () => {
+    let pointerId = -1;
+    const splitTotalHeight = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -128,3 +430,3 @@ vertical
                     primary-min="50"
-                    style=${`height: ${t}px; width: 200px;`}
+                    style=${`height: ${splitTotalHeight}px; width: 200px;`}
                 >
@@ -134,3 +436,35 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(e);const s=e.shadowRoot.querySelector("#splitter");s.setPointerCapture=l=>o=l,s.releasePointerCapture=l=>o=l,i(e.primaryMin).to.equal(50),i(e.resizable).to.be.true,s.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(e),i(o).to.equal(1),s.dispatchEvent(new PointerEvent("pointermove",{clientY:t+10})),await a(e),i(e.splitterPos||0).to.equal(t-e.splitterSize),s.dispatchEvent(new PointerEvent("pointerup")),await a(e),i(s.classList.contains("is-collapsed-end")).to.be.true,i(getComputedStyle(s).cursor).to.equal("n-resize")}),it("resizes and collapses when pointer moves in horizontal splitview",async()=>{let o=-1;const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    expect(el.primaryMin).to.equal(50);
+    expect(el.resizable).to.be.true;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: splitTotalHeight + 10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(
+      splitTotalHeight - el.splitterSize
+    );
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
+  });
+  it("resizes and collapses when pointer moves in horizontal splitview", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -146,3 +480,60 @@ resizable
                 </sp-split-view>
-            `);await a(t),i(t.collapsible).to.be.true;const e=t.shadowRoot.querySelector("#splitter");e.setPointerCapture=s=>o=s,e.releasePointerCapture=s=>o=s,e.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(t),i(o).to.equal(1),e.dispatchEvent(new PointerEvent("pointermove",{clientX:40})),await a(t),i(t.splitterPos||0).to.equal(50),i(e.classList.contains("is-collapsed-start")).to.be.false,i(getComputedStyle(e).cursor).to.equal("ew-resize"),e.dispatchEvent(new PointerEvent("pointermove",{clientX:-10})),await a(t),i(t.splitterPos||0).to.equal(0),i(e.classList.contains("is-collapsed-start")).to.be.true,i(getComputedStyle(e).cursor).to.equal("e-resize"),e.dispatchEvent(new PointerEvent("pointermove",{clientX:t.getBoundingClientRect().right-10})),await a(t),i(t.splitterPos||0).to.equal(350),i(e.classList.contains("is-collapsed-end")).to.be.false,i(getComputedStyle(e).cursor).to.equal("ew-resize"),e.dispatchEvent(new PointerEvent("pointermove",{clientX:t.getBoundingClientRect().right})),await a(t),i(t.splitterPos||0).to.equal(400-t.splitterSize),e.dispatchEvent(new PointerEvent("pointerup")),await a(t),i(e.classList.contains("is-collapsed-end")).to.be.true,i(getComputedStyle(e).cursor).to.equal("w-resize")}),it("resizes and collapses when pointer moves in [vertical] splitview",async()=>{let o=-1;const t=400,e=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.collapsible).to.be.true;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 40
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(50);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
+    expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: -10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: el.getBoundingClientRect().right - 10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(350);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
+    expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: el.getBoundingClientRect().right
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(400 - el.splitterSize);
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
+  });
+  it("resizes and collapses when pointer moves in [vertical] splitview", async () => {
+    let pointerId = -1;
+    const splitTotalHeight = 400;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -154,3 +545,3 @@ vertical
                     secondary-min="50"
-                    style=${`height: ${t}px; width: 200px;`}
+                    style=${`height: ${splitTotalHeight}px; width: 200px;`}
                 >
@@ -160,3 +551,60 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(e);const s=e.shadowRoot.querySelector("#splitter");s.setPointerCapture=l=>o=l,s.releasePointerCapture=l=>o=l,s.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(e),i(o).to.equal(1),s.dispatchEvent(new PointerEvent("pointermove",{clientY:40})),await a(e),i(e.splitterPos||0).to.equal(50),i(s.classList.contains("is-collapsed-start")).to.be.false,i(getComputedStyle(s).cursor).to.equal("ns-resize"),s.dispatchEvent(new PointerEvent("pointermove",{clientY:-10})),await a(e),i(e.splitterPos||0).to.equal(0),i(s.classList.contains("is-collapsed-start")).to.be.true,i(getComputedStyle(s).cursor).to.equal("s-resize"),s.dispatchEvent(new PointerEvent("pointermove",{clientY:t-40})),await a(e),i(e.splitterPos||0).to.equal(t-50),i(s.classList.contains("is-collapsed-end")).to.be.false,i(getComputedStyle(s).cursor).to.equal("ns-resize"),s.dispatchEvent(new PointerEvent("pointermove",{clientY:t+50})),await a(e),i(e.splitterPos||0).to.equal(t-e.splitterSize),s.dispatchEvent(new PointerEvent("pointerup")),await a(e),i(s.classList.contains("is-collapsed-end")).to.be.true,i(getComputedStyle(s).cursor).to.equal("n-resize")}),it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [ltr]",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: 40
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(50);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
+    expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: -10
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: splitTotalHeight - 40
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalHeight - 50);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
+    expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientY: splitTotalHeight + 50
+      })
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(
+      splitTotalHeight - el.splitterSize
+    );
+    splitter.dispatchEvent(new PointerEvent("pointerup"));
+    await elementUpdated(el);
+    expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
+    expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
+  });
+  it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [ltr]", async () => {
+    const splitTotalWidth = 500;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -166,3 +614,3 @@ resizable
                     secondary-min="50"
-                    style=${`height: 200px; width: ${500}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                 >
@@ -172,6 +620,52 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true;const e=t.splitterPos||0,s=t.shadowRoot.querySelector("#splitter");s.dispatchEvent(d()),await a(t),i(t.splitterPos||0).to.equal(e-10),s.dispatchEvent(c()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(m()),await a(t),i(t.splitterPos||0).to.equal(e+10),s.dispatchEvent(h()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(E()),await a(t),i(t.splitterPos||0).to.equal(e+50),s.dispatchEvent(y()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(w()),await a(t),i(t.splitterPos||0).to.equal(50),s.dispatchEvent(d()),await a(t),i(t.splitterPos||0).to.equal(50),s.dispatchEvent(v()),await a(t),i(t.splitterPos||0).to.equal(500-50),s.dispatchEvent(c()),await a(t),i(t.splitterPos||0).to.equal(500-50),s.dispatchEvent(q()),await a(t);const l=document.activeElement;i(typeof l).not.to.equal(s)}),it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [rtl]",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const pos = el.splitterPos || 0;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos - 10);
+    splitter.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos + 10);
+    splitter.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(pageUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos + 50);
+    splitter.dispatchEvent(pageDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(homeEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(50);
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(50);
+    splitter.dispatchEvent(endEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
+    splitter.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
+    splitter.dispatchEvent(shiftTabEvent());
+    await elementUpdated(el);
+    const outsideFocused = document.activeElement;
+    expect(typeof outsideFocused).not.to.equal(splitter);
+  });
+  it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [rtl]", async () => {
+    const splitTotalWidth = 500;
+    const el = await fixture(
+      html`
                 <sp-split-view
                     resizable
-                    style=${`height: 200px; width: ${500}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                     dir="rtl"
@@ -182,7 +676,47 @@ >
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true;const e=t.splitterPos||0,s=t.shadowRoot.querySelector("#splitter");s.dispatchEvent(d()),await a(t),i(t.splitterPos||0).to.equal(e+10),s.dispatchEvent(c()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(m()),await a(t),i(t.splitterPos||0).to.equal(e+10),s.dispatchEvent(h()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(E()),await a(t),i(t.splitterPos||0).to.equal(e+50),s.dispatchEvent(y()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(w()),await a(t),i(t.splitterPos||0).to.equal(0),s.dispatchEvent(v()),await a(t),i(t.splitterPos||0).to.equal(500-t.splitterSize),s.dispatchEvent(q()),await a(t);const l=document.activeElement;i(typeof l).not.to.equal(s)}),it("handles keyboard inputs and resizes accordingly for [vertical] splitviews",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const pos = el.splitterPos || 0;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos + 10);
+    splitter.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos + 10);
+    splitter.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(pageUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos + 50);
+    splitter.dispatchEvent(pageDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(homeEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    splitter.dispatchEvent(endEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
+    splitter.dispatchEvent(shiftTabEvent());
+    await elementUpdated(el);
+    const outsideFocused = document.activeElement;
+    expect(typeof outsideFocused).not.to.equal(splitter);
+  });
+  it("handles keyboard inputs and resizes accordingly for [vertical] splitviews", async () => {
+    const splitTotalHeight = 500;
+    const el = await fixture(
+      html`
                 <sp-split-view
                     vertical
                     resizable
-                    style=${`width: 200px; height: ${500}px;`}
+                    style=${`width: 200px; height: ${splitTotalHeight}px;`}
                 >
@@ -192,3 +726,45 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true;const e=t.splitterPos||0,s=t.shadowRoot.querySelector("#splitter");s.dispatchEvent(d()),await a(t),i(t.splitterPos||0).to.equal(e-10),s.dispatchEvent(c()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(m()),await a(t),i(t.splitterPos||0).to.equal(e-10),s.dispatchEvent(h()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(E()),await a(t),i(t.splitterPos||0).to.equal(e-50),s.dispatchEvent(y()),await a(t),i(t.splitterPos||0).to.equal(e),s.dispatchEvent(w()),await a(t),i(t.splitterPos||0).to.equal(0),s.dispatchEvent(v()),await a(t),i(t.splitterPos||0).to.equal(500-t.splitterSize),s.dispatchEvent(q()),await a(t);const l=document.activeElement;i(typeof l).not.to.equal(s)}),it("handles focus and keyboard inputs and resizes accordingly for collapsible horizontal splitviews",async()=>{const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const pos = el.splitterPos || 0;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos - 10);
+    splitter.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos - 10);
+    splitter.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(pageUpEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos - 50);
+    splitter.dispatchEvent(pageDownEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+    splitter.dispatchEvent(homeEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    splitter.dispatchEvent(endEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(
+      splitTotalHeight - el.splitterSize
+    );
+    splitter.dispatchEvent(shiftTabEvent());
+    await elementUpdated(el);
+    const outsideFocused = document.activeElement;
+    expect(typeof outsideFocused).not.to.equal(splitter);
+  });
+  it("handles focus and keyboard inputs and resizes accordingly for collapsible horizontal splitviews", async () => {
+    const splitTotalWidth = 500;
+    const el = await fixture(
+      html`
                 <sp-split-view
@@ -199,3 +775,3 @@ resizable
                     secondary-min="50"
-                    style=${`height: 200px; width: ${500}px;`}
+                    style=${`height: 200px; width: ${splitTotalWidth}px;`}
                 >
@@ -205,3 +781,19 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true;const e=t.shadowRoot.querySelector("#splitter");e.dispatchEvent(w()),await a(t),i(t.splitterPos||0).to.equal(0),e.dispatchEvent(v()),await a(t),i(t.splitterPos||0).to.equal(500-t.splitterSize)}),it("does not resize when not resizable",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.dispatchEvent(homeEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(0);
+    splitter.dispatchEvent(endEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
+  });
+  it("does not resize when not resizable", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view>
@@ -211,7 +803,37 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o),i(o.resizable).to.be.false;const t=o.splitterPos||0,e=o.shadowRoot?o.shadowRoot.querySelector("#splitter"):o;e.dispatchEvent(new PointerEvent("pointerdown")),await a(o),e.dispatchEvent(d()),await a(o),i(o.splitterPos||0).to.equal(t)}),it("renders no splitter if only one panel is provided",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.false;
+    const pos = el.splitterPos || 0;
+    const splitter = el.shadowRoot ? el.shadowRoot.querySelector("#splitter") : el;
+    splitter.dispatchEvent(new PointerEvent("pointerdown"));
+    await elementUpdated(el);
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos);
+  });
+  it("renders no splitter if only one panel is provided", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view style="width: 400px">
                     <div id="primary" style="width: 200px">First panel</div>
                 </sp-split-view>
-            `);await a(o),i(o.resizable).to.be.false;const t=o.shadowRoot.querySelector("#splitter");i(t).to.be.null;const e=o.shadowRoot.querySelector("slot");i(e).to.exist,i(e.assignedElements().length).to.equal(1);const s=e.assignedElements()[0];i(getComputedStyle(s).width).to.equal("200px")}),it("renders only 2 out of 3 panels",async()=>{const o=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.false;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    expect(splitter).to.be.null;
+    const slot = el.shadowRoot.querySelector("slot");
+    expect(slot).to.exist;
+    expect(slot.assignedElements().length).to.equal(1);
+    const elPrim = slot.assignedElements()[0];
+    expect(getComputedStyle(elPrim).width).to.equal("200px");
+  });
+  it("renders only 2 out of 3 panels", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view>
@@ -222,3 +844,15 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o);const t=o.shadowRoot.querySelector("#testPanel");i(t).to.be.null}),it("keeps the splitter pos when removing and re-adding a panel",async()=>{var b,P;let o=-1;const t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    const testPanel = el.shadowRoot.querySelector(
+      "#testPanel"
+    );
+    expect(testPanel).to.be.null;
+  });
+  it("keeps the splitter pos when removing and re-adding a panel", async () => {
+    var _a, _b;
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-split-view resizable style="width: 400px">
@@ -228,6 +862,59 @@ <div id="primary">First panel</div>
                 </sp-split-view>
-            `);await a(t),i(t.resizable).to.be.true;let e=t.shadowRoot.querySelector("#splitter");e.setPointerCapture=u=>o=u,e.releasePointerCapture=u=>o=u;let s=t.splitterPos||0;i(s).to.equal(200),e.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1})),await a(t),i(o).to.equal(1),s-=10,e.dispatchEvent(new PointerEvent("pointermove",{clientX:s})),await a(t),i(Math.round(t.splitterPos||0)).to.equal(s-t.getBoundingClientRect().left);const l=(b=t.lastElementChild)==null?void 0:b.cloneNode(!0);i(l).not.to.be.null,(P=t.lastElementChild)==null||P.remove(),await a(t);let p=t.shadowRoot.querySelector("slot");i(p).to.exist,i(p.assignedElements().length).to.equal(1),e=t.shadowRoot.querySelector("#splitter"),i(e).to.be.null,l&&(t.appendChild(l),await a(t),i(Math.round(t.splitterPos||0)).to.equal(s-t.getBoundingClientRect().left),p=t.shadowRoot.querySelector("slot"),i(p).to.exist,i(p.assignedElements().length).to.equal(2),e=t.shadowRoot.querySelector("#splitter"),await i(e).to.be.accessible())}),it("announces when splitterPos moves",async()=>{const o=g(),t=await n(r`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    let splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.setPointerCapture = (id) => pointerId = id;
+    splitter.releasePointerCapture = (id) => pointerId = id;
+    let pos = el.splitterPos || 0;
+    expect(pos).to.equal(200);
+    splitter.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerId: 1 })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(1);
+    pos -= 10;
+    splitter.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: pos
+      })
+    );
+    await elementUpdated(el);
+    expect(Math.round(el.splitterPos || 0)).to.equal(
+      pos - el.getBoundingClientRect().left
+    );
+    const secPanel = (_a = el.lastElementChild) == null ? void 0 : _a.cloneNode(true);
+    expect(secPanel).not.to.be.null;
+    (_b = el.lastElementChild) == null ? void 0 : _b.remove();
+    await elementUpdated(el);
+    let slot = el.shadowRoot.querySelector("slot");
+    expect(slot).to.exist;
+    expect(slot.assignedElements().length).to.equal(1);
+    splitter = el.shadowRoot.querySelector("#splitter");
+    expect(splitter).to.be.null;
+    if (secPanel) {
+      el.appendChild(secPanel);
+      await elementUpdated(el);
+      expect(Math.round(el.splitterPos || 0)).to.equal(
+        pos - el.getBoundingClientRect().left
+      );
+      slot = el.shadowRoot.querySelector("slot");
+      expect(slot).to.exist;
+      expect(slot.assignedElements().length).to.equal(2);
+      splitter = el.shadowRoot.querySelector(
+        "#splitter"
+      );
+      await expect(splitter).to.be.accessible();
+    }
+  });
+  it("announces when splitterPos moves", async () => {
+    const changeSpy = spy();
+    const el = await fixture(
+      html`
                 <sp-split-view
                     resizable
-                    style=${"height: 200px; width: 500px;"}
+                    style=${`height: 200px; width: 500px;`}
                 >
@@ -237,7 +924,23 @@ <div>First panel</div>
                 </sp-split-view>
-            `);t.addEventListener("change",o),await a(t),i(t.resizable).to.be.true;const e=t.splitterPos||0;t.shadowRoot.querySelector("#splitter").dispatchEvent(d()),await a(t),i(t.splitterPos||0).to.equal(e-10),i(o.callCount).to.equal(1)}),it("resizes when primarySize changes",async()=>{const o=await n(r`
+            `
+    );
+    el.addEventListener("change", changeSpy);
+    await elementUpdated(el);
+    expect(el.resizable).to.be.true;
+    const pos = el.splitterPos || 0;
+    const splitter = el.shadowRoot.querySelector(
+      "#splitter"
+    );
+    splitter.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(pos - 10);
+    expect(changeSpy.callCount).to.equal(1);
+  });
+  it("resizes when primarySize changes", async () => {
+    const el = await fixture(
+      html`
                 <sp-split-view
                     resizable
                     primary-size="100"
-                    style=${"height: 200px; width: 500px;"}
+                    style=${`height: 200px; width: 500px;`}
                 >
@@ -247,3 +950,11 @@ <div>First panel</div>
                 </sp-split-view>
-            `);await a(o),i(o.splitterPos||0).to.equal(100),o.primarySize="300",await a(o),i(o.splitterPos||0).to.equal(300)})});
+            `
+    );
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(100);
+    el.primarySize = "300";
+    await elementUpdated(el);
+    expect(el.splitterPos || 0).to.equal(300);
+  });
+});
 //# sourceMappingURL=split-view.test.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

305571

increased by4.71%

Lines of code

2800

increased by37.66%

No dependency changes