@spectrum-web-components/split-view 0.39.3 → 0.40.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/README.md +4 -0
  2. package/custom-elements.json +26 -1
  3. package/package.json +4 -4
  4. package/src/SplitView.d.ts +2 -0
  5. package/src/SplitView.dev.js +26 -3
  6. package/src/SplitView.dev.js.map +2 -2
  7. package/src/SplitView.js +9 -6
  8. package/src/SplitView.js.map +3 -3
  9. package/src/spectrum-split-view.css.dev.js +157 -66
  10. package/src/spectrum-split-view.css.dev.js.map +2 -2
  11. package/src/spectrum-split-view.css.js +157 -66
  12. package/src/spectrum-split-view.css.js.map +2 -2
  13. package/src/split-view.css.dev.js +157 -66
  14. package/src/split-view.css.dev.js.map +2 -2
  15. package/src/split-view.css.js +157 -66
  16. package/src/split-view.css.js.map +2 -2
package/src/spectrum-split-view.css.dev.js CHANGED
@@ -1,78 +1,169 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :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(
5
- --spectrum-dragbar-gripper-width,
6
- var(--spectrum-global-dimension-static-size-50)
7
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
8
- --spectrum-dragbar-handle-width,
9
- var(--spectrum-global-dimension-static-size-25)
10
- ))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(
11
- --spectrum-dragbar-gripper-width,
12
- var(--spectrum-global-dimension-static-size-50)
13
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
14
- --spectrum-dragbar-handle-width,
15
- var(--spectrum-global-dimension-static-size-25)
16
- ))/2*-1)}#gripper{border-radius:var(
17
- --spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
18
- );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(
19
- --spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
20
- );position:absolute;top:50%;transform:translateY(-50%);width:var(
21
- --spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
22
- )}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
23
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
24
- );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(
25
- --spectrum-dragbar-handle-width,
26
- var(--spectrum-global-dimension-static-size-25)
27
- )/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(
28
- --spectrum-dragbar-handle-width,
29
- var(--spectrum-global-dimension-static-size-25)
30
- )/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";height:100%;position:absolute;top:0;width:var(
31
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
32
- )}: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(
33
- --spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
34
- );top:calc((var(
35
- --spectrum-dragbar-gripper-width,
36
- var(--spectrum-global-dimension-static-size-50)
37
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
38
- --spectrum-dragbar-handle-width,
39
- var(--spectrum-global-dimension-static-size-25)
40
- ))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(
41
- --spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
42
- )}:host([vertical]) #splitter{height:var(
43
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
44
- );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(
45
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
46
- );top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(
47
- --spectrum-dragbar-handle-width,
48
- var(--spectrum-global-dimension-static-size-25)
49
- )/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(
50
- --spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)
4
+ :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(
5
+ --spectrum-gray-400
6
+ );--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
7
+ --spectrum-focus-indicator-color
8
+ );--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
9
+ --spectrum-corner-radius-75
10
+ );--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(
11
+ --spectrum-border-width-400
12
+ )}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
13
+ --mod-splitview-background-color,var(--spectrum-splitview-background-color)
14
+ );block-size:100%}#gripper{block-size:var(
15
+ --mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
16
+ );border-block-width:var(
17
+ --mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
18
+ );border-color:var(
19
+ --highcontrast-splitview-handle-background-color,var(
20
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
21
+ )
22
+ );border-inline-width:var(
23
+ --mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
24
+ );border-radius:var(
25
+ --mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
26
+ );border-style:solid;content:"";display:block;inline-size:var(
27
+ --mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
28
+ );inset-block-start:50%;inset-inline-start:calc((var(
29
+ --mod-splitview-gripper-width,
30
+ var(--spectrum-splitview-gripper-width)
31
+ ) + 2*var(--mod-splitview-gripper-border-width-vertical,
32
+ var(--spectrum-splitview-gripper-border-width-vertical)) - var(
33
+ --mod-splitview-gripper-width,
34
+ var(--spectrum-splitview-gripper-width)
35
+ ))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(
36
+ --highcontrast-splitview-handle-background-color,var(
37
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
38
+ )
51
39
  )}#splitter{background-color:var(
52
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
53
- )}#gripper{border-color:var(
54
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
55
- )}#gripper:before{background-color:var(
56
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
57
- )}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
58
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
40
+ --highcontrast-splitview-handle-background-color,var(
41
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
42
+ )
43
+ );block-size:100%;inline-size:var(
44
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
45
+ );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(
46
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
47
+ );inset-block-start:0;inset-inline-start:calc(50% - var(
48
+ --mod-splitview-handle-width,
49
+ var(--spectrum-splitview-handle-width)
50
+ )/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(
51
+ --highcontrast-splitview-handle-background-color-hover,var(
52
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
53
+ )
59
54
  )}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(
60
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
55
+ --highcontrast-splitview-handle-background-color-hover,var(
56
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
57
+ )
61
58
  )}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(
62
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
59
+ --highcontrast-splitview-handle-background-color-hover,var(
60
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
61
+ )
63
62
  )}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
64
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
63
+ --highcontrast-splitview-handle-background-color-down,var(
64
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
65
+ )
65
66
  )}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(
66
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
67
+ --highcontrast-splitview-handle-background-color-down,var(
68
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
69
+ )
67
70
  )}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
68
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
69
- )}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
70
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
71
- )}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
72
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
73
- );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(
74
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
75
- )}
71
+ --highcontrast-splitview-handle-background-color-down,var(
72
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
73
+ )
74
+ )}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
75
+ --highcontrast-splitview-handle-background-color-focus,var(
76
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
77
+ )
78
+ );outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
79
+ --highcontrast-splitview-handle-background-color-focus,var(
80
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
81
+ )
82
+ );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
83
+ --highcontrast-splitview-handle-background-color-focus,var(
84
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
85
+ )
86
+ );outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
87
+ --highcontrast-splitview-handle-background-color-focus,var(
88
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
89
+ )
90
+ );box-shadow:0 0 0 1px var(
91
+ --highcontrast-splitview-handle-background-color-focus,var(
92
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
93
+ )
94
+ )}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
95
+ --highcontrast-splitview-handle-background-color-focus,var(
96
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
97
+ )
98
+ );box-shadow:0 0 0 1px var(
99
+ --highcontrast-splitview-handle-background-color-focus,var(
100
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
101
+ )
102
+ )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
103
+ --highcontrast-splitview-handle-background-color-focus,var(
104
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
105
+ )
106
+ );box-shadow:0 0 0 1px var(
107
+ --highcontrast-splitview-handle-background-color-focus,var(
108
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
109
+ )
110
+ )}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
111
+ --highcontrast-splitview-handle-background-color-focus,var(
112
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
113
+ )
114
+ )}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
115
+ --highcontrast-splitview-handle-background-color-focus,var(
116
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
117
+ )
118
+ )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
119
+ --highcontrast-splitview-handle-background-color-focus,var(
120
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
121
+ )
122
+ )}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
123
+ --mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
124
+ )}:host([vertical]) #gripper{block-size:var(
125
+ --mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
126
+ );border-block-width:var(
127
+ --mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
128
+ );border-inline-width:var(
129
+ --mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
130
+ );inline-size:var(
131
+ --mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
132
+ );inset-block-start:calc((var(
133
+ --mod-splitview-gripper-width,
134
+ var(--spectrum-splitview-gripper-width)
135
+ ) + 2*var(--mod-splitview-gripper-border-width-vertical,
136
+ var(--spectrum-splitview-gripper-border-width-vertical)) - var(
137
+ --mod-splitview-gripper-width,
138
+ var(--spectrum-splitview-gripper-width)
139
+ ))/2*-1);inset-inline-start:var(
140
+ --mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
141
+ );transform:translate(calc(var(
142
+ --mod-splitview-vertical-gripper-width,
143
+ var(--spectrum-splitview-vertical-gripper-width)
144
+ )*-1))}:host([vertical]) #splitter{block-size:var(
145
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
146
+ );inline-size:var(
147
+ --mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
148
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
149
+ --mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
150
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
151
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
152
+ );inline-size:var(
153
+ --mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
154
+ );inset-block-start:calc(var(
155
+ --mod-splitview-vertical-gripper-width,
156
+ var(--spectrum-splitview-vertical-gripper-width)
157
+ ) - var(
158
+ --mod-splitview-handle-width,
159
+ var(--spectrum-splitview-handle-width)
160
+ )/2);inset-inline-start:var(
161
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
162
+ )}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
163
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
164
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
165
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
166
+ );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}}
76
167
  `;
77
168
  export default styles;
78
169
  //# sourceMappingURL=spectrum-split-view.css.dev.js.map
package/src/spectrum-split-view.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-split-view.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=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(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--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(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--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(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Ef,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(\n--spectrum-gray-400\n);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(\n--spectrum-focus-indicator-color\n);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(\n--spectrum-corner-radius-75\n);--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(\n--spectrum-border-width-400\n)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(\n--mod-splitview-background-color,var(--spectrum-splitview-background-color)\n);block-size:100%}#gripper{block-size:var(\n--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)\n);border-block-width:var(\n--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)\n);border-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n);border-inline-width:var(\n--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)\n);border-radius:var(\n--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)\n);border-style:solid;content:\"\";display:block;inline-size:var(\n--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)\n);inset-block-start:50%;inset-inline-start:calc((var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n) + 2*var(--mod-splitview-gripper-border-width-vertical,\nvar(--spectrum-splitview-gripper-border-width-vertical)) - var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n)}#splitter{background-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n);block-size:100%;inline-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);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(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-splitview-handle-width,\nvar(--spectrum-splitview-handle-width)\n)/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(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(\n--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)\n)}:host([vertical]) #gripper{block-size:var(\n--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)\n);border-block-width:var(\n--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)\n);border-inline-width:var(\n--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)\n);inline-size:var(\n--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)\n);inset-block-start:calc((var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n) + 2*var(--mod-splitview-gripper-border-width-vertical,\nvar(--spectrum-splitview-gripper-border-width-vertical)) - var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n))/2*-1);inset-inline-start:var(\n--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)\n);transform:translate(calc(var(\n--mod-splitview-vertical-gripper-width,\nvar(--spectrum-splitview-vertical-gripper-width)\n)*-1))}:host([vertical]) #splitter{block-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inline-size:var(\n--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(\n--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inline-size:var(\n--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)\n);inset-block-start:calc(var(\n--mod-splitview-vertical-gripper-width,\nvar(--spectrum-splitview-vertical-gripper-width)\n) - var(\n--mod-splitview-handle-width,\nvar(--spectrum-splitview-handle-width)\n)/2);inset-inline-start:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n);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}}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqKf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-split-view.css.js CHANGED
@@ -1,75 +1,166 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
2
- :host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
3
- --spectrum-dragbar-gripper-width,
4
- var(--spectrum-global-dimension-static-size-50)
5
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
6
- --spectrum-dragbar-handle-width,
7
- var(--spectrum-global-dimension-static-size-25)
8
- ))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(
9
- --spectrum-dragbar-gripper-width,
10
- var(--spectrum-global-dimension-static-size-50)
11
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
12
- --spectrum-dragbar-handle-width,
13
- var(--spectrum-global-dimension-static-size-25)
14
- ))/2*-1)}#gripper{border-radius:var(
15
- --spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
16
- );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(
17
- --spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
18
- );position:absolute;top:50%;transform:translateY(-50%);width:var(
19
- --spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
20
- )}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
21
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
22
- );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(
23
- --spectrum-dragbar-handle-width,
24
- var(--spectrum-global-dimension-static-size-25)
25
- )/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(
26
- --spectrum-dragbar-handle-width,
27
- var(--spectrum-global-dimension-static-size-25)
28
- )/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";height:100%;position:absolute;top:0;width:var(
29
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
30
- )}: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(
31
- --spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
32
- );top:calc((var(
33
- --spectrum-dragbar-gripper-width,
34
- var(--spectrum-global-dimension-static-size-50)
35
- ) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
36
- --spectrum-dragbar-handle-width,
37
- var(--spectrum-global-dimension-static-size-25)
38
- ))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(
39
- --spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
40
- )}:host([vertical]) #splitter{height:var(
41
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
42
- );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(
43
- --spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
44
- );top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(
45
- --spectrum-dragbar-handle-width,
46
- var(--spectrum-global-dimension-static-size-25)
47
- )/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(
48
- --spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)
2
+ :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(
3
+ --spectrum-gray-400
4
+ );--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(
5
+ --spectrum-focus-indicator-color
6
+ );--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(
7
+ --spectrum-corner-radius-75
8
+ );--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(
9
+ --spectrum-border-width-400
10
+ )}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(
11
+ --mod-splitview-background-color,var(--spectrum-splitview-background-color)
12
+ );block-size:100%}#gripper{block-size:var(
13
+ --mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
14
+ );border-block-width:var(
15
+ --mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
16
+ );border-color:var(
17
+ --highcontrast-splitview-handle-background-color,var(
18
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
19
+ )
20
+ );border-inline-width:var(
21
+ --mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
22
+ );border-radius:var(
23
+ --mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)
24
+ );border-style:solid;content:"";display:block;inline-size:var(
25
+ --mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
26
+ );inset-block-start:50%;inset-inline-start:calc((var(
27
+ --mod-splitview-gripper-width,
28
+ var(--spectrum-splitview-gripper-width)
29
+ ) + 2*var(--mod-splitview-gripper-border-width-vertical,
30
+ var(--spectrum-splitview-gripper-border-width-vertical)) - var(
31
+ --mod-splitview-gripper-width,
32
+ var(--spectrum-splitview-gripper-width)
33
+ ))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(
34
+ --highcontrast-splitview-handle-background-color,var(
35
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
36
+ )
49
37
  )}#splitter{background-color:var(
50
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
51
- )}#gripper{border-color:var(
52
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
53
- )}#gripper:before{background-color:var(
54
- --spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
55
- )}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
56
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
38
+ --highcontrast-splitview-handle-background-color,var(
39
+ --mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)
40
+ )
41
+ );block-size:100%;inline-size:var(
42
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
43
+ );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(
44
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
45
+ );inset-block-start:0;inset-inline-start:calc(50% - var(
46
+ --mod-splitview-handle-width,
47
+ var(--spectrum-splitview-handle-width)
48
+ )/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(
49
+ --highcontrast-splitview-handle-background-color-hover,var(
50
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
51
+ )
57
52
  )}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(
58
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
53
+ --highcontrast-splitview-handle-background-color-hover,var(
54
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
55
+ )
59
56
  )}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(
60
- --spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
57
+ --highcontrast-splitview-handle-background-color-hover,var(
58
+ --mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)
59
+ )
61
60
  )}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
62
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
61
+ --highcontrast-splitview-handle-background-color-down,var(
62
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
63
+ )
63
64
  )}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(
64
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
65
+ --highcontrast-splitview-handle-background-color-down,var(
66
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
67
+ )
65
68
  )}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
66
- --spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
67
- )}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
68
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
69
- )}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
70
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
71
- );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(
72
- --spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
73
- )}
69
+ --highcontrast-splitview-handle-background-color-down,var(
70
+ --mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)
71
+ )
72
+ )}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
73
+ --highcontrast-splitview-handle-background-color-focus,var(
74
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
75
+ )
76
+ );outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
77
+ --highcontrast-splitview-handle-background-color-focus,var(
78
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
79
+ )
80
+ );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
81
+ --highcontrast-splitview-handle-background-color-focus,var(
82
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
83
+ )
84
+ );outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
85
+ --highcontrast-splitview-handle-background-color-focus,var(
86
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
87
+ )
88
+ );box-shadow:0 0 0 1px var(
89
+ --highcontrast-splitview-handle-background-color-focus,var(
90
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
91
+ )
92
+ )}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
93
+ --highcontrast-splitview-handle-background-color-focus,var(
94
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
95
+ )
96
+ );box-shadow:0 0 0 1px var(
97
+ --highcontrast-splitview-handle-background-color-focus,var(
98
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
99
+ )
100
+ )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
101
+ --highcontrast-splitview-handle-background-color-focus,var(
102
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
103
+ )
104
+ );box-shadow:0 0 0 1px var(
105
+ --highcontrast-splitview-handle-background-color-focus,var(
106
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
107
+ )
108
+ )}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
109
+ --highcontrast-splitview-handle-background-color-focus,var(
110
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
111
+ )
112
+ )}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
113
+ --highcontrast-splitview-handle-background-color-focus,var(
114
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
115
+ )
116
+ )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
117
+ --highcontrast-splitview-handle-background-color-focus,var(
118
+ --mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
119
+ )
120
+ )}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(
121
+ --mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
122
+ )}:host([vertical]) #gripper{block-size:var(
123
+ --mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)
124
+ );border-block-width:var(
125
+ --mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)
126
+ );border-inline-width:var(
127
+ --mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)
128
+ );inline-size:var(
129
+ --mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)
130
+ );inset-block-start:calc((var(
131
+ --mod-splitview-gripper-width,
132
+ var(--spectrum-splitview-gripper-width)
133
+ ) + 2*var(--mod-splitview-gripper-border-width-vertical,
134
+ var(--spectrum-splitview-gripper-border-width-vertical)) - var(
135
+ --mod-splitview-gripper-width,
136
+ var(--spectrum-splitview-gripper-width)
137
+ ))/2*-1);inset-inline-start:var(
138
+ --mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
139
+ );transform:translate(calc(var(
140
+ --mod-splitview-vertical-gripper-width,
141
+ var(--spectrum-splitview-vertical-gripper-width)
142
+ )*-1))}:host([vertical]) #splitter{block-size:var(
143
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
144
+ );inline-size:var(
145
+ --mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)
146
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(
147
+ --mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)
148
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(
149
+ --mod-splitview-handle-width,var(--spectrum-splitview-handle-width)
150
+ );inline-size:var(
151
+ --mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)
152
+ );inset-block-start:calc(var(
153
+ --mod-splitview-vertical-gripper-width,
154
+ var(--spectrum-splitview-vertical-gripper-width)
155
+ ) - var(
156
+ --mod-splitview-handle-width,
157
+ var(--spectrum-splitview-handle-width)
158
+ )/2);inset-inline-start:var(
159
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
160
+ )}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(
161
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
162
+ )}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(
163
+ --mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)
164
+ );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}}
74
165
  `;export default e;
75
166
  //# sourceMappingURL=spectrum-split-view.css.js.map
package/src/spectrum-split-view.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-split-view.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=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(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--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(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--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(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Ef,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0;--spectrum-splitview-background-color:var(--spectrum-gray-100);--spectrum-splitview-handle-background-color:var(--spectrum-gray-300);--spectrum-splitview-handle-background-color-hover:var(\n--spectrum-gray-400\n);--spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);--spectrum-splitview-handle-background-color-focus:var(\n--spectrum-focus-indicator-color\n);--spectrum-splitview-handle-width:var(--spectrum-border-width-200);--spectrum-splitview-gripper-border-radius:var(\n--spectrum-corner-radius-75\n);--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(\n--spectrum-border-width-400\n)}:host{display:flex;overflow:hidden}::slotted(*){background-color:var(\n--mod-splitview-background-color,var(--spectrum-splitview-background-color)\n);block-size:100%}#gripper{block-size:var(\n--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)\n);border-block-width:var(\n--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)\n);border-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n);border-inline-width:var(\n--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)\n);border-radius:var(\n--mod-splitview-gripper-border-radius,var(--spectrum-splitview-gripper-border-radius)\n);border-style:solid;content:\"\";display:block;inline-size:var(\n--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)\n);inset-block-start:50%;inset-inline-start:calc((var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n) + 2*var(--mod-splitview-gripper-border-width-vertical,\nvar(--spectrum-splitview-gripper-border-width-vertical)) - var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n))/2*-1);position:absolute;touch-action:none;transform:translateY(-50%)}#gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n)}#splitter{background-color:var(\n--highcontrast-splitview-handle-background-color,var(\n--mod-splitview-handle-background-color,var(--spectrum-splitview-handle-background-color)\n)\n);block-size:100%;inline-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);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(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-splitview-handle-width,\nvar(--spectrum-splitview-handle-width)\n)/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(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-hover,var(\n--mod-splitview-handle-background-color-hover,var(--spectrum-splitview-handle-background-color-hover)\n)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-down,var(\n--mod-splitview-handle-background-color-down,var(--spectrum-splitview-handle-background-color-down)\n)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);outline:none}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n);box-shadow:0 0 0 1px var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--highcontrast-splitview-handle-background-color-focus,var(\n--mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)\n)\n)}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){block-size:auto;inline-size:var(\n--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)\n)}:host([vertical]) #gripper{block-size:var(\n--mod-splitview-gripper-width,var(--spectrum-splitview-gripper-width)\n);border-block-width:var(\n--mod-splitview-gripper-border-width-horizontal,var(--spectrum-splitview-gripper-border-width-horizontal)\n);border-inline-width:var(\n--mod-splitview-gripper-border-width-vertical,var(--spectrum-splitview-gripper-border-width-vertical)\n);inline-size:var(\n--mod-splitview-gripper-height,var(--spectrum-splitview-gripper-height)\n);inset-block-start:calc((var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n) + 2*var(--mod-splitview-gripper-border-width-vertical,\nvar(--spectrum-splitview-gripper-border-width-vertical)) - var(\n--mod-splitview-gripper-width,\nvar(--spectrum-splitview-gripper-width)\n))/2*-1);inset-inline-start:var(\n--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)\n);transform:translate(calc(var(\n--mod-splitview-vertical-gripper-width,\nvar(--spectrum-splitview-vertical-gripper-width)\n)*-1))}:host([vertical]) #splitter{block-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inline-size:var(\n--mod-splitview-vertical-width,var(--spectrum-splitview-vertical-width)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper,:host([vertical]) #splitter.is-collapsed-start #gripper{inset-inline-start:var(\n--mod-splitview-vertical-gripper-width,var(--spectrum-splitview-vertical-gripper-width)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{block-size:var(\n--mod-splitview-handle-width,var(--spectrum-splitview-handle-width)\n);inline-size:var(\n--mod-splitview-vertical-gripper-outer-width,var(--spectrum-splitview-vertical-gripper-outer-width)\n);inset-block-start:calc(var(\n--mod-splitview-vertical-gripper-width,\nvar(--spectrum-splitview-vertical-gripper-width)\n) - var(\n--mod-splitview-handle-width,\nvar(--spectrum-splitview-handle-width)\n)/2);inset-inline-start:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n)}:host([vertical]) #splitter.is-collapsed-start #gripper{inset-block-start:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{inset-block-end:var(\n--mod-splitview-vertical-gripper-reset,var(--spectrum-splitview-vertical-gripper-reset)\n);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}}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqKf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }