Socket
Socket
Sign inDemoInstall

@spectrum-web-components/split-view

Package Overview
Dependencies
Maintainers
7
Versions
168
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.39.4 to 0.40.0

27

custom-elements.json

@@ -37,2 +37,10 @@ {

"kind": "field",
"name": "controlledEl",
"type": {
"text": "HTMLElement | undefined"
},
"privacy": "public"
},
{
"kind": "field",
"name": "vertical",

@@ -249,2 +257,11 @@ "type": {

{
"kind": "field",
"name": "controlledElIDApplied",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "method",

@@ -257,3 +274,11 @@ "name": "onContentSlotChange",

}
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "Event & { target: HTMLSlotElement }"
}
}
]
},

@@ -260,0 +285,0 @@ {

8

package.json
{
"name": "@spectrum-web-components/split-view",
"version": "0.39.4",
"version": "0.40.0",
"publishConfig": {

@@ -64,6 +64,6 @@ "access": "public"

"dependencies": {
"@spectrum-web-components/base": "^0.39.4"
"@spectrum-web-components/base": "^0.40.0"
},
"devDependencies": {
"@spectrum-css/splitview": "^3.0.48"
"@spectrum-css/splitview": "^4.0.5"
},

@@ -76,3 +76,3 @@ "types": "./src/index.d.ts",

],
"gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
"gitHead": "24d5569a839da94892ecfd125428779587ffb1f5"
}

4

README.md

@@ -185,1 +185,5 @@ ## Description

```
## Accessibility
By default, the "separator" element within an `<sp-split-view>` is given the label "Resize the panels". A label is required to surface the interaction correctly to screen readers. You can customize or internationalize this with the `label` attribute.

223

src/spectrum-split-view.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
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}: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=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{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(var(--spectrum-splitview-vertical-gripper-width)*-1));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-s-background-color,var(--spectrum-alias-toolbar-background-color)
: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;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(
--spectrum-gray-400
);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
--spectrum-focus-indicator-color
);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
--spectrum-corner-radius-75
);--spectrum-splitview-gripper-width:var(--spectrum-border-width-400);--spectrum-splitview-gripper-height:16px;--spectrum-splitview-gripper-border-width-horizontal:3px;--spectrum-splitview-gripper-border-width-vertical:var(
--spectrum-border-width-400
)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
--mod-splitview-background-color,var(--spectrum-splitview-background-color)
);block-size:100%}#gripper{block-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);border-block-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);border-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);border-inline-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-radius:var(
--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
);border-style:solid;content:"";display:block;inline-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);inset-block-start:50%;inset-inline-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
)}#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)
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);block-size:100%;inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);position:relative;-webkit-user-select:none;user-select:none;z-index:1}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{block-size:100%;content:"";inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inset-block-start:0;inset-inline-start:calc(50% - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);position:absolute}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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-ring{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}:host([resizable]) #splitter:focus-ring #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-ring #gripper:before{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #gripper{block-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);border-block-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-inline-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);inline-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);inset-block-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
);transform:translate(calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
)*-1))}:host([vertical]) #splitter{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
);inset-block-start:calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
) - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);inset-inline-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
);inset-block-start:auto}@media (forced-colors:active){:host{--highcontrast-splitview-handle-background-color:CanvasText;--highcontrast-splitview-handle-background-color-hover:CanvasText;--highcontrast-splitview-handle-background-color-down:CanvasText;--highcontrast-splitview-handle-background-color-focus:Highlight}}
`;
export default styles;
//# sourceMappingURL=spectrum-split-view.css.dev.js.map

223

src/spectrum-split-view.css.js
"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
--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=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{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(var(--spectrum-splitview-vertical-gripper-width)*-1));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-s-background-color,var(--spectrum-alias-toolbar-background-color)
: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;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(
--spectrum-gray-400
);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
--spectrum-focus-indicator-color
);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
--spectrum-corner-radius-75
);--spectrum-splitview-gripper-width:var(--spectrum-border-width-400);--spectrum-splitview-gripper-height:16px;--spectrum-splitview-gripper-border-width-horizontal:3px;--spectrum-splitview-gripper-border-width-vertical:var(
--spectrum-border-width-400
)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
--mod-splitview-background-color,var(--spectrum-splitview-background-color)
);block-size:100%}#gripper{block-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);border-block-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);border-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);border-inline-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-radius:var(
--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
);border-style:solid;content:"";display:block;inline-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);inset-block-start:50%;inset-inline-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
)}#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)
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);block-size:100%;inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);position:relative;-webkit-user-select:none;user-select:none;z-index:1}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{block-size:100%;content:"";inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inset-block-start:0;inset-inline-start:calc(50% - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);position:absolute}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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-ring{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}:host([resizable]) #splitter:focus-ring #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-ring #gripper:before{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #gripper{block-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);border-block-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-inline-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);inline-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);inset-block-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
);transform:translate(calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
)*-1))}:host([vertical]) #splitter{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
);inset-block-start:calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
) - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);inset-inline-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
);inset-block-start:auto}@media (forced-colors:active){:host{--highcontrast-splitview-handle-background-color:CanvasText;--highcontrast-splitview-handle-background-color-hover:CanvasText;--highcontrast-splitview-handle-background-color-down:CanvasText;--highcontrast-splitview-handle-background-color-focus:Highlight}}
`;export default e;
//# sourceMappingURL=spectrum-split-view.css.js.map

223

src/split-view.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
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}: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=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{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(var(--spectrum-splitview-vertical-gripper-width)*-1));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-s-background-color,var(--spectrum-alias-toolbar-background-color)
: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;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(
--spectrum-gray-400
);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
--spectrum-focus-indicator-color
);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
--spectrum-corner-radius-75
);--spectrum-splitview-gripper-width:var(--spectrum-border-width-400);--spectrum-splitview-gripper-height:16px;--spectrum-splitview-gripper-border-width-horizontal:3px;--spectrum-splitview-gripper-border-width-vertical:var(
--spectrum-border-width-400
)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
--mod-splitview-background-color,var(--spectrum-splitview-background-color)
);block-size:100%}#gripper{block-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);border-block-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);border-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);border-inline-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-radius:var(
--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
);border-style:solid;content:"";display:block;inline-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);inset-block-start:50%;inset-inline-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);position:absolute;transform:translateY(-50%)}#gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
)}#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)
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);block-size:100%;inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);position:relative;-webkit-user-select:none;user-select:none;z-index:1}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{block-size:100%;content:"";inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inset-block-start:0;inset-inline-start:calc(50% - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);position:absolute}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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-ring{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}:host([resizable]) #splitter:focus-ring #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-ring #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}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #gripper{block-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);border-block-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-inline-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);inline-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);inset-block-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
);transform:translate(calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
)*-1))}:host([vertical]) #splitter{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
);inset-block-start:calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
) - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);inset-inline-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
);inset-block-start:auto}@media (forced-colors:active){:host{--highcontrast-splitview-handle-background-color:CanvasText;--highcontrast-splitview-handle-background-color-hover:CanvasText;--highcontrast-splitview-handle-background-color-down:CanvasText;--highcontrast-splitview-handle-background-color-focus:Highlight}}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
--spectrum-dragbar-gripper-width,

@@ -77,0 +168,0 @@ var(--spectrum-global-dimension-static-size-50)

223

src/split-view.css.js
"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
--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=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{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(var(--spectrum-splitview-vertical-gripper-width)*-1));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-s-background-color,var(--spectrum-alias-toolbar-background-color)
: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;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(
--spectrum-gray-400
);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
--spectrum-focus-indicator-color
);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
--spectrum-corner-radius-75
);--spectrum-splitview-gripper-width:var(--spectrum-border-width-400);--spectrum-splitview-gripper-height:16px;--spectrum-splitview-gripper-border-width-horizontal:3px;--spectrum-splitview-gripper-border-width-vertical:var(
--spectrum-border-width-400
)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
--mod-splitview-background-color,var(--spectrum-splitview-background-color)
);block-size:100%}#gripper{block-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);border-block-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);border-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);border-inline-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-radius:var(
--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
);border-style:solid;content:"";display:block;inline-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);inset-block-start:50%;inset-inline-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);position:absolute;transform:translateY(-50%)}#gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
)}#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)
--highcontrast-splitview-handle-background-color,var(
--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
)
);block-size:100%;inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);position:relative;-webkit-user-select:none;user-select:none;z-index:1}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{block-size:100%;content:"";inline-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inset-block-start:0;inset-inline-start:calc(50% - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);position:absolute}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}: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)
--highcontrast-splitview-handle-background-color-hover,var(
--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
)
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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)
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}: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-ring{background-color:var(
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
)}:host([resizable]) #splitter:focus-ring #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-ring #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}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
--highcontrast-splitview-handle-background-color-down,var(
--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
)
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
);box-shadow:0 0 0 1px var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
--highcontrast-splitview-handle-background-color-focus,var(
--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
)
)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #gripper{block-size:var(
--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
);border-block-width:var(
--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
);border-inline-width:var(
--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
);inline-size:var(
--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
);inset-block-start:calc((var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
) + 2*var(--mod-splitview-gripper-border-width-vertical,
var(--spectrum-splitview-gripper-border-width-vertical)) - var(
--mod-splitview-gripper-width,
var(--spectrum-splitview-gripper-width)
))/2*-1);inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
);transform:translate(calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
)*-1))}:host([vertical]) #splitter{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
);inline-size:var(
--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
);inset-block-start:calc(var(
--mod-splitview-vertical-gripper-width,
var(--spectrum-splitview-vertical-gripper-width)
) - var(
--mod-splitview-handle-width,
var(--spectrum-splitview-handle-width)
)/2);inset-inline-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
);inset-block-start:auto}@media (forced-colors:active){:host{--highcontrast-splitview-handle-background-color:CanvasText;--highcontrast-splitview-handle-background-color-hover:CanvasText;--highcontrast-splitview-handle-background-color-down:CanvasText;--highcontrast-splitview-handle-background-color-focus:Highlight}}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
--spectrum-dragbar-gripper-width,

@@ -75,0 +166,0 @@ var(--spectrum-global-dimension-static-size-50)

2

src/SplitView.d.ts

@@ -10,2 +10,3 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';

static get styles(): CSSResultArray;
controlledEl?: HTMLElement;
vertical: boolean;

@@ -52,2 +53,3 @@ resizable: boolean;

protected render(): TemplateResult;
private controlledElIDApplied;
private onContentSlotChange;

@@ -54,0 +56,0 @@ private onPointerdown;

29

src/SplitView.dev.js

@@ -24,3 +24,4 @@ "use strict";

property,
query
query,
state
} from "@spectrum-web-components/base/src/decorators.js";

@@ -50,2 +51,3 @@ import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";

this.maxPos = DEFAULT_MAX_SIZE;
this.controlledElIDApplied = false;
const RO = window.ResizeObserver;

@@ -88,2 +90,3 @@ if (RO) {

render() {
var _a, _b;
const splitterClasses = {

@@ -98,4 +101,8 @@ "is-resized-start": this.splitterPos === this.minPos,

};
const label = this.label || this.resizable ? "Resize the panels" : void 0;
return html`
<slot
id=${ifDefined(
this.resizable ? (_a = this.controlledEl) == null ? void 0 : _a.id : void 0
)}
@slotchange=${this.onContentSlotChange}

@@ -109,3 +116,7 @@ style="--spectrum-split-view-first-pane-size: ${this.firstPaneSize}"

role="separator"
aria-label=${ifDefined(this.label || void 0)}
aria-controls=${ifDefined(
this.resizable ? (_b = this.controlledEl) == null ? void 0 : _b.id : void 0
)}
aria-label=${ifDefined(label)}
aria-orientation=${this.vertical ? "horizontal" : "vertical"}
aria-valuenow=${Math.round(

@@ -138,3 +149,12 @@ parseFloat(this.firstPaneSize) / this.viewSize * 100

}
onContentSlotChange() {
onContentSlotChange(event) {
if (this.controlledEl && this.controlledElIDApplied) {
this.controlledEl.removeAttribute("id");
this.controlledElIDApplied = false;
}
this.controlledEl = event.target.assignedElements()[0];
if (this.controlledEl && !this.controlledEl.id) {
this.controlledEl.id = `${this.tagName.toLowerCase()}-${crypto.randomUUID().slice(0, 8)}`;
this.controlledElIDApplied = true;
}
this.enoughChildren = this.children.length > 1;

@@ -309,2 +329,5 @@ this.checkResize();

__decorateClass([
state()
], SplitView.prototype, "controlledEl", 2);
__decorateClass([
property({ type: Boolean, reflect: true })

@@ -311,0 +334,0 @@ ], SplitView.prototype, "vertical", 2);

15

src/SplitView.js

@@ -1,7 +0,8 @@

"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,a,t,e)=>{for(var s=e>1?void 0:e?f(a,t):a,o=n.length-1,h;o>=0;o--)(h=n[o])&&(s=(e?h(a,t,s):h(s))||s);return e&&s&&v(a,t,s),s};import{html as l,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return l`
"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(l,a,t,e)=>{for(var i=e>1?void 0:e?f(a,t):a,o=l.length-1,h;o>=0;o--)(h=l[o])&&(i=(e?h(a,t,i):h(i))||i);return e&&i&&v(a,t,i),i};import{html as p,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as n}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u,state as z}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import E from"./split-view.css.js";const d=3840,S=2,g=10,M=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=d;this.secondaryMin=0;this.secondaryMax=d;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=d;this.controlledElIDApplied=!1;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[E]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){var i,o;const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)},e=this.label||this.resizable?"Resize the panels":void 0;return p`
<slot
id=${n(this.resizable?(i=this.controlledEl)==null?void 0:i.id:void 0)}
@slotchange=${this.onContentSlotChange}
style="--spectrum-split-view-first-pane-size: ${this.firstPaneSize}"
></slot>
${this.enoughChildren?l`
${this.enoughChildren?p`
<div

@@ -11,9 +12,11 @@ id="splitter"

role="separator"
aria-label=${d(this.label||void 0)}
aria-controls=${n(this.resizable?(o=this.controlledEl)==null?void 0:o.id:void 0)}
aria-label=${n(e)}
aria-orientation=${this.vertical?"horizontal":"vertical"}
aria-valuenow=${Math.round(parseFloat(this.firstPaneSize)/this.viewSize*100)}
tabindex=${d(this.resizable?"0":void 0)}
tabindex=${n(this.resizable?"0":void 0)}
@keydown=${this.onKeydown}
${y({start:["pointerdown",this.onPointerdown],streamInside:["pointermove",this.onPointermove],end:[["pointerup","pointercancel","pointerleave"],this.onPointerup]})}
>
${this.resizable?l`
${this.resizable?p`
<div id="gripper"></div>

@@ -23,3 +26,3 @@ `:c}

`:c}
`}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-m&&(e=0),this.collapsible&&e>this.maxPos+m&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const s=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=s?-1:1;break;case"ArrowRight":e=s?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?E:g;this.movePosition(t,o*e)}}async checkResize(){if(this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const s=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(s);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([r()],SplitView.prototype,"label",2),i([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([r({type:Number})],SplitView.prototype,"viewSize",2),i([u("slot")],SplitView.prototype,"paneSlot",2),i([u("#splitter")],SplitView.prototype,"splitter",2);
`}onContentSlotChange(t){this.controlledEl&&this.controlledElIDApplied&&(this.controlledEl.removeAttribute("id"),this.controlledElIDApplied=!1),this.controlledEl=t.target.assignedElements()[0],this.controlledEl&&!this.controlledEl.id&&(this.controlledEl.id=`${this.tagName.toLowerCase()}-${crypto.randomUUID().slice(0,8)}`,this.controlledElIDApplied=!0),this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-m&&(e=0),this.collapsible&&e>this.maxPos+m&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const i=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=i?-1:1;break;case"ArrowRight":e=i?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?M:g;this.movePosition(t,o*e)}}async checkResize(){if(this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(i=>i instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const i=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(i);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}s([z()],SplitView.prototype,"controlledEl",2),s([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),s([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),s([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),s([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),s([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),s([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),s([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),s([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),s([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),s([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),s([r()],SplitView.prototype,"label",2),s([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),s([r({type:Number})],SplitView.prototype,"viewSize",2),s([u("slot")],SplitView.prototype,"paneSlot",2),s([u("#splitter")],SplitView.prototype,"splitter",2);
//# sourceMappingURL=SplitView.js.map
src/spectrum-split-view.css.dev.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

src/split-view.css.js.map

Sorry, the diff of this file is not supported yet

src/SplitView.dev.js.map

Sorry, the diff of this file is not supported yet

src/SplitView.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc