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

Comparing version 0.2.6-alpha.27 to 0.2.6

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.2.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-view@0.2.5...@spectrum-web-components/split-view@0.2.6) (2021-06-07)
+
+**Note:** Version bump only for package @spectrum-web-components/split-view
+
 ## [0.2.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-view@0.2.4...@spectrum-web-components/split-view@0.2.5) (2021-05-12)
@@ -8,0 +12,0 @@

package.json

 {
     "name": "@spectrum-web-components/split-view",
-    "version": "0.2.6-alpha.27+24b598bc7",
+    "version": "0.2.6",
     "publishConfig": {
@@ -46,3 +46,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.4-alpha.101+24b598bc7",
+        "@spectrum-web-components/base": "^0.4.3",
         "tslib": "^2.0.0"
@@ -59,3 +59,3 @@ },
     ],
-    "gitHead": "24b598bc7c57c7f279c8957abbc0b0827ecd7089"
+    "gitHead": "b425768aaf694ab19ddad4fcab9939c29a2a503b"
 }

src/spectrum-split-view.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-split-view.css.js

@@ -20,8 +20,8 @@ /*
 var(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
+var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
 var(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}
+var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-split-view.css.js.map

src/spectrum-split-view.css.ts

@@ -20,7 +20,7 @@ /*
 var(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
+var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
 var(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}
+var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}
 `;
 export default styles;

src/split-view.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/split-view.css.js

@@ -20,6 +20,6 @@ /*
 var(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
+var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
 var(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--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)){order:3;flex:1}::slotted(:nth-child(n+3)){display:none}#splitter{order:2;height:auto}:host([resizable]) #splitter{padding:0 var(--spectrum-global-dimension-static-size-125);margin:0 calc(-1*var(--spectrum-global-dimension-static-size-125));background-clip:content-box;cursor:ew-resize}:host([vertical][resizable]) #splitter{padding:var(--spectrum-global-dimension-static-size-125) 0;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 0;background-clip:content-box;cursor:ns-resize}: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,
+var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--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)){order:3;flex:1}::slotted(:nth-child(n+3)){display:none}#splitter{order:2;height:auto}:host([resizable]) #splitter{padding:0 var(--spectrum-global-dimension-static-size-125);margin:0 calc(-1*var(--spectrum-global-dimension-static-size-125));background-clip:content-box;cursor:ew-resize}:host([vertical][resizable]) #splitter{padding:var(--spectrum-global-dimension-static-size-125) 0;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 0;background-clip:content-box;cursor:ns-resize}: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,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
@@ -26,0 +26,0 @@ var(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(--spectrum-dragbar-gripper-width,

src/split-view.css.ts

@@ -20,6 +20,6 @@ /*
 var(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
+var(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
 var(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,
-var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible,:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper,:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before,:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--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)){order:3;flex:1}::slotted(:nth-child(n+3)){display:none}#splitter{order:2;height:auto}:host([resizable]) #splitter{padding:0 var(--spectrum-global-dimension-static-size-125);margin:0 calc(-1*var(--spectrum-global-dimension-static-size-125));background-clip:content-box;cursor:ew-resize}:host([vertical][resizable]) #splitter{padding:var(--spectrum-global-dimension-static-size-125) 0;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 0;background-clip:content-box;cursor:ns-resize}: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,
+var(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--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)){order:3;flex:1}::slotted(:nth-child(n+3)){display:none}#splitter{order:2;height:auto}:host([resizable]) #splitter{padding:0 var(--spectrum-global-dimension-static-size-125);margin:0 calc(-1*var(--spectrum-global-dimension-static-size-125));background-clip:content-box;cursor:ew-resize}:host([vertical][resizable]) #splitter{padding:var(--spectrum-global-dimension-static-size-125) 0;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 0;background-clip:content-box;cursor:ns-resize}: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,
 var(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,
@@ -26,0 +26,0 @@ var(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(--spectrum-dragbar-gripper-width,

src/SplitView.js

@@ -14,3 +14,2 @@ /*
 import { html, SpectrumElement, property, ifDefined, query, nothing, classMap, } from '@spectrum-web-components/base';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
 import styles from './split-view.css.js';
@@ -109,10 +108,4 @@ const DEFAULT_MAX_SIZE = 3840;
                           @keydown=${this.onKeydown}
-                          ${streamingListener({
-                start: ['pointerdown', this.onPointerdown],
-                streamInside: ['pointermove', this.onPointermove],
-                end: [
-                    ['pointerup', 'pointercancel'],
-                    this.onPointerup,
-                ],
-            })}
+                          @pointerdown=${this.onPointerdown}
+                          @pointerup=${this.onPointerup}
                       >
@@ -135,6 +128,6 @@ ${this.resizable
         if (!this.resizable || (event.button && event.button !== 0)) {
-            event.preventDefault();
             return;
         }
         this.splitter.setPointerCapture(event.pointerId);
+        this.onpointermove = this.onPointermove;
         this.offset = this.getOffset();
@@ -157,2 +150,3 @@ }
         this.splitter.releasePointerCapture(event.pointerId);
+        this.onpointermove = null;
     }
@@ -159,0 +153,0 @@ getOffset() {

src/SplitView.ts

@@ -26,3 +26,2 @@ /*
 } from '@spectrum-web-components/base';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
 
@@ -195,10 +194,4 @@ import { WithSWCResizeObserver } from './types';
                           @keydown=${this.onKeydown}
-                          ${streamingListener({
-                              start: ['pointerdown', this.onPointerdown],
-                              streamInside: ['pointermove', this.onPointermove],
-                              end: [
-                                  ['pointerup', 'pointercancel'],
-                                  this.onPointerup,
-                              ],
-                          })}
+                          @pointerdown=${this.onPointerdown}
+                          @pointerup=${this.onPointerup}
                       >
@@ -223,6 +216,6 @@ ${this.resizable
         if (!this.resizable || (event.button && event.button !== 0)) {
-            event.preventDefault();
             return;
         }
         this.splitter.setPointerCapture(event.pointerId);
+        this.onpointermove = this.onPointermove;
         this.offset = this.getOffset();
@@ -248,2 +241,3 @@ }
         this.splitter.releasePointerCapture(event.pointerId);
+        this.onpointermove = null;
     }
@@ -250,0 +244,0 @@

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

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

172771

increased by0.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

1811

decreased by-0.33%

Dependency changes

• Updated@spectrum-web-components/base@^0.4.3