Socket
Socket
Sign inDemoInstall

@spectrum-web-components/split-view

Package Overview
Dependencies
Maintainers
0
Versions
162
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.45.0 to 0.46.0

6

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

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

"dependencies": {
"@spectrum-web-components/base": "^0.45.0"
"@spectrum-web-components/base": "^0.46.0"
},

@@ -76,3 +76,3 @@ "devDependencies": {

],
"gitHead": "8cfbac84735f6b97180d39150b4849f0aa1f1a45"
"gitHead": "ab84b447210de593649b086a1605abf1be1d64f2"
}

2

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;--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);display:flex;overflow:hidden}::slotted(*){background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color));block-size:100%}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));z-index:1;block-size:100%;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:auto}:host([vertical]) #gripper{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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-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);display:flex;overflow:hidden}::slotted(*){block-size:100%;background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color))}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;z-index:1;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([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{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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

2

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;--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);display:flex;overflow:hidden}::slotted(*){background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color));block-size:100%}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));z-index:1;block-size:100%;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:auto}:host([vertical]) #gripper{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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-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);display:flex;overflow:hidden}::slotted(*){block-size:100%;background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color))}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;z-index:1;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([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{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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

2

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;--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);display:flex;overflow:hidden}::slotted(*){background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color));block-size:100%}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));z-index:1;block-size:100%;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:auto}:host([vertical]) #gripper{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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{order:2;height:auto}:host([resizable]) #splitter{cursor:ew-resize;background-clip:content-box}:host([vertical][resizable]) #splitter{cursor:ns-resize;background-clip:content-box}: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-start,:host([resizable][collapsible]) #splitter.is-resized-end{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-start,:host([vertical][resizable][collapsible]) #splitter.is-resized-end{cursor:ns-resize}
: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);display:flex;overflow:hidden}::slotted(*){block-size:100%;background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color))}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;z-index:1;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([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{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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{cursor:ew-resize;background-clip:content-box}:host([vertical][resizable]) #splitter{cursor:ns-resize;background-clip:content-box}: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-start,:host([resizable][collapsible]) #splitter.is-resized-end{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-start,:host([vertical][resizable][collapsible]) #splitter.is-resized-end{cursor:ns-resize}
`;
export default styles;
//# sourceMappingURL=split-view.css.dev.js.map

2

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;--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);display:flex;overflow:hidden}::slotted(*){background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color));block-size:100%}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));z-index:1;block-size:100%;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:auto}:host([vertical]) #gripper{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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{order:2;height:auto}:host([resizable]) #splitter{cursor:ew-resize;background-clip:content-box}:host([vertical][resizable]) #splitter{cursor:ns-resize;background-clip:content-box}: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-start,:host([resizable][collapsible]) #splitter.is-resized-end{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-start,:host([vertical][resizable][collapsible]) #splitter.is-resized-end{cursor:ns-resize}
: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);display:flex;overflow:hidden}::slotted(*){block-size:100%;background-color:var(--mod-splitview-background-color,var(--spectrum-splitview-background-color))}#gripper{content:"";border-radius:var(--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius));border-style:solid;border-color:var(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));touch-action:none;inline-size:var(--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width));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-inline-width:var(--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal));display:block;position:absolute;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);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(--highcontrast-splitview-handle-background-color,var(--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)));-webkit-user-select:none;user-select:none;inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;z-index:1;position:relative}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";inline-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width));block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-width))/2)}#splitter.is-collapsed-start #gripper{inset-inline-start:0}#splitter.is-collapsed-end #gripper{inset-inline:auto 0}:host([resizable]) #splitter.is-hovered{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{border-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:before{background-color:var(--highcontrast-splitview-handle-background-color-hover,var(--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)))}@media (hover:hover){: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:hover #gripper{border-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:hover #gripper:before{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-active,:host([resizable]) #splitter:active{background-color:var(--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(--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(--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 #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([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{transform:translate(calc(var(--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width))*-1));inline-size:var(--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height));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));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))}:host([vertical]) #splitter{inline-size:var(--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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{inline-size:var(--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width));block-size:var(--mod-splitview-handle-width,var(--spectrum-splitview-handle-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-start:auto;inset-block-end:var(--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset))}@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{cursor:ew-resize;background-clip:content-box}:host([vertical][resizable]) #splitter{cursor:ns-resize;background-clip:content-box}: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-start,:host([resizable][collapsible]) #splitter.is-resized-end{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-start,:host([vertical][resizable][collapsible]) #splitter.is-resized-end{cursor:ns-resize}
`;export default e;
//# sourceMappingURL=split-view.css.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

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