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

Comparing version 0.2.10-lit-next.42 to 0.2.10

custom-elements.json

@@ -600,3 +600,3 @@ {
           "name": "styles",
-          "default": "css`\n: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;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}#gripper{content:\"\";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--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,\nvar(--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,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--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,\nvar(--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))}\n`"
+          "default": "css`\n: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(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}: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(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(\n--spectrum-splitview-vertical-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-background-color,var(--spectrum-global-color-gray-100)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);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(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);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(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`"
         }
@@ -622,3 +622,3 @@ ],
           "name": "styles",
-          "default": "css`\n: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;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}#gripper{content:\"\";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--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,\nvar(--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,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--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,\nvar(--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,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--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,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([vertical][resizable]) #gripper{margin-top:var(--spectrum-global-dimension-static-size-125);left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{margin-top:0;top:var(--spectrum-global-dimension-static-size-25);left:50%;right:50%}\n`"
+          "default": "css`\n: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(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}: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(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(\n--spectrum-splitview-vertical-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-background-color,var(--spectrum-global-color-gray-100)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);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(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);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(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}: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(-1*var(--spectrum-global-dimension-static-size-125));padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 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(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`"
         }
@@ -625,0 +625,0 @@ ],

package.json

 {
     "name": "@spectrum-web-components/split-view",
-    "version": "0.2.10-lit-next.42+f164d1376",
+    "version": "0.2.10",
     "publishConfig": {
@@ -47,3 +47,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.6-lit-next.124+f164d1376",
+        "@spectrum-web-components/base": "^0.4.5",
         "tslib": "^2.0.0"
@@ -59,3 +59,3 @@ },
     ],
-    "gitHead": "f164d13764897c13e8da5012f3659b294c240c62"
+    "gitHead": "d7f2ca747a902cf8b632cc8491fa675419297180"
 }

src/spectrum-split-view.css.js

@@ -14,14 +14,98 @@ /*
 const styles = css `
-: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;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left: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)}:host([dir=rtl]) #gripper{right: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)}#gripper{content:"";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,
-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=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{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-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(
+--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)}:host([dir=rtl]) #gripper{right: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)}#gripper{border-radius:var(
+--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
+);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:"";display:block;height:var(
+--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
+);position:absolute;top:50%;transform:translateY(-50%);width:var(
+--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
+)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(
+--spectrum-dragbar-handle-width,
+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:"";height:100%;position:absolute;top:0;width:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+)}: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{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(
+--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
+);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)
+)}:host([vertical]) #splitter{height:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);width:var(
+--spectrum-splitview-vertical-width
+)}: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{height:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);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)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(
+--spectrum-splitview-vertical-gripper-reset
+)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::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 #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)
+)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-split-view.css.js.map

src/split-view.css.js

@@ -14,18 +14,110 @@ /*
 const styles = css `
-: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;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left: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)}:host([dir=rtl]) #gripper{right: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)}#gripper{content:"";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,
-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=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{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,
-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,
-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)}:host([vertical][resizable]) #gripper{margin-top:var(--spectrum-global-dimension-static-size-125);left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{margin-top:0;top:var(--spectrum-global-dimension-static-size-25);left:50%;right:50%}
+: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(
+--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)}:host([dir=rtl]) #gripper{right: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)}#gripper{border-radius:var(
+--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
+);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:"";display:block;height:var(
+--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
+);position:absolute;top:50%;transform:translateY(-50%);width:var(
+--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
+)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(
+--spectrum-dragbar-handle-width,
+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:"";height:100%;position:absolute;top:0;width:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+)}: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{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(
+--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
+);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)
+)}:host([vertical]) #splitter{height:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);width:var(
+--spectrum-splitview-vertical-width
+)}: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{height:var(
+--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
+);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)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(
+--spectrum-splitview-vertical-gripper-reset
+)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::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 #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{--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(-1*var(--spectrum-global-dimension-static-size-125));padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 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,
+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)}:host([dir=rtl][resizable]) #gripper{right: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,
+var(--spectrum-global-dimension-static-size-25)
+))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}
 `;
 export default styles;
 //# sourceMappingURL=split-view.css.js.map

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';
@@ -110,10 +109,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}
                       >
@@ -136,6 +129,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();
@@ -158,2 +151,3 @@ }
         this.splitter.releasePointerCapture(event.pointerId);
+        this.onpointermove = null;
     }
@@ -160,0 +154,0 @@ getOffset() {

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

Unidentified License

License

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

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

5

decreased by-16.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

170518

decreased by-38.49%

Number of package files

25

decreased by-13.79%

Lines of code

1771

decreased by-26.7%

Dependency changes

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