@rcarls/rc-splitter 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +3 -1
  2. package/dist/custom-elements.json +205 -3
  3. package/dist/rc-splitter-BZgnDbmR.js +473 -0
  4. package/dist/rc-splitter-BZgnDbmR.js.map +1 -0
  5. package/dist/rc-splitter-define.js +1 -1
  6. package/dist/rc-splitter.js +1 -1
  7. package/dist/types/packages/rc-splitter/src/rc-splitter.d.ts +35 -4
  8. package/package.json +7 -10
  9. package/dist/demo.css +0 -85
  10. package/dist/demo.js +0 -40
  11. package/dist/rc-splitter-CkpiDBPA.js +0 -314
  12. package/dist/rc-splitter-CkpiDBPA.js.map +0 -1
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # `@rcarls/rc-splitter`
2
2
 
3
- A WAI-ARIA compliant resizable pane splitter implementing the [Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/). Supports horizontal and vertical orientations, pixel and percentage modes, collapse/restore via keyboard, and full pointer and keyboard control. Built with [Lit 3](https://lit.dev).
3
+ Resizable pane splitter with pointer, keyboard, and collapse/restore controls, following the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
4
+
5
+ Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-splitter](https://richardcarls.github.io/rc-webcomponents/components/rc-splitter).
4
6
 
5
7
  ---
6
8
 
package/dist/custom-elements.json CHANGED
@@ -46,7 +46,7 @@
46
46
  "declarations": [
47
47
  {
48
48
  "kind": "class",
49
- "description": "An accessible splitter layout component.\n\nSet `orientation=\"vertical\"` for a vertical splitter",
49
+ "description": "Resizable pane splitter with pointer, keyboard, and collapse/restore controls, following\nthe WAI-ARIA Window Splitter pattern.\n\nSet `orientation=\"vertical\"` for a vertical splitter",
50
50
  "name": "RCSplitter",
51
51
  "cssProperties": [
52
52
  {
@@ -55,7 +55,7 @@
55
55
  "default": "6px"
56
56
  },
57
57
  {
58
- "description": "Length of the drag handle within the separator",
58
+ "description": "Length of the drag handle area within the separator (also the length of the visible indicator)",
59
59
  "name": "--rc-splitter-separator-handle-size",
60
60
  "default": "100%"
61
61
  },
@@ -70,10 +70,70 @@
70
70
  "default": "1px solid ButtonBorder"
71
71
  },
72
72
  {
73
- "description": "Visible handle line color",
73
+ "description": "Color of the dot grip indicators (default visual)",
74
74
  "name": "--rc-splitter-handle-color",
75
75
  "default": "ButtonBorder"
76
76
  },
77
+ {
78
+ "description": "Cross-axis size of the visual indicator (dot column width or pill/line thickness)",
79
+ "name": "--rc-splitter-handle-thickness",
80
+ "default": "4px"
81
+ },
82
+ {
83
+ "description": "Border-radius of the visual indicator; set to a large value (e.g. 999px) for a pill shape",
84
+ "name": "--rc-splitter-handle-border-radius",
85
+ "default": "0"
86
+ },
87
+ {
88
+ "description": "background-image for the visual indicator; set to `none` to use a solid fill via --rc-splitter-handle-fill instead",
89
+ "name": "--rc-splitter-handle-pattern",
90
+ "default": "<3-dot radial-gradient>"
91
+ },
92
+ {
93
+ "description": "background-color of the visual indicator; effective when --rc-splitter-handle-pattern is none (e.g. for a solid pill)",
94
+ "name": "--rc-splitter-handle-fill",
95
+ "default": "transparent"
96
+ },
97
+ {
98
+ "description": "background-color of the visual indicator on hover; scoped to the indicator element only, not the full separator strip",
99
+ "name": "--rc-splitter-handle-hover-fill",
100
+ "default": "transparent"
101
+ },
102
+ {
103
+ "description": "CSS transition duration/easing for the visual indicator's background-color changes",
104
+ "name": "--rc-splitter-handle-transition",
105
+ "default": "0ms"
106
+ },
107
+ {
108
+ "description": "Diameter of the collapse/expand toggle button",
109
+ "name": "--rc-splitter-collapse-button-size",
110
+ "default": "20px"
111
+ },
112
+ {
113
+ "description": "Distance from the start edge of the separator to the collapse button center",
114
+ "name": "--rc-splitter-collapse-button-offset",
115
+ "default": "8px"
116
+ },
117
+ {
118
+ "description": "Collapse button background color",
119
+ "name": "--rc-splitter-collapse-button-bg",
120
+ "default": "Canvas"
121
+ },
122
+ {
123
+ "description": "Collapse button background color on hover",
124
+ "name": "--rc-splitter-collapse-button-hover-bg",
125
+ "default": "ButtonFace"
126
+ },
127
+ {
128
+ "description": "Collapse button border color",
129
+ "name": "--rc-splitter-collapse-button-border",
130
+ "default": "ButtonBorder"
131
+ },
132
+ {
133
+ "description": "Collapse button icon color",
134
+ "name": "--rc-splitter-collapse-button-color",
135
+ "default": "ButtonText"
136
+ },
77
137
  {
78
138
  "description": "Inline-start border",
79
139
  "name": "--rc-splitter-separator-border-inline-start",
@@ -111,6 +171,10 @@
111
171
  {
112
172
  "description": "The focusable drag handle",
113
173
  "name": "separator-handle"
174
+ },
175
+ {
176
+ "description": "The collapse/expand toggle button (only rendered when `collapsible` is set)",
177
+ "name": "collapse-button"
114
178
  }
115
179
  ],
116
180
  "slots": [
@@ -165,6 +229,26 @@
165
229
  "description": "The step size for resizing, in either pixels or percentage points depending on `mode`.",
166
230
  "attribute": "step"
167
231
  },
232
+ {
233
+ "kind": "field",
234
+ "name": "min",
235
+ "type": {
236
+ "text": "number"
237
+ },
238
+ "default": "0",
239
+ "description": "Minimum size of the primary pane in current mode units. Defaults to 0.",
240
+ "attribute": "min"
241
+ },
242
+ {
243
+ "kind": "field",
244
+ "name": "max",
245
+ "type": {
246
+ "text": "number | undefined"
247
+ },
248
+ "default": "undefined",
249
+ "description": "Maximum size of the primary pane in current mode units. Defaults to the full container size.",
250
+ "attribute": "max"
251
+ },
168
252
  {
169
253
  "kind": "field",
170
254
  "name": "_defaultValue",
@@ -181,6 +265,15 @@
181
265
  },
182
266
  "privacy": "private"
183
267
  },
268
+ {
269
+ "kind": "field",
270
+ "name": "_valueInitialized",
271
+ "type": {
272
+ "text": "boolean"
273
+ },
274
+ "privacy": "private",
275
+ "default": "false"
276
+ },
184
277
  {
185
278
  "kind": "field",
186
279
  "name": "value",
@@ -193,6 +286,78 @@
193
286
  "description": "Initial uncontrolled splitter value.",
194
287
  "attribute": "default-value"
195
288
  },
289
+ {
290
+ "kind": "field",
291
+ "name": "_effectiveMin",
292
+ "type": {
293
+ "text": "number"
294
+ },
295
+ "privacy": "protected",
296
+ "readonly": true
297
+ },
298
+ {
299
+ "kind": "field",
300
+ "name": "_effectiveMax",
301
+ "type": {
302
+ "text": "number"
303
+ },
304
+ "privacy": "protected",
305
+ "readonly": true
306
+ },
307
+ {
308
+ "kind": "field",
309
+ "name": "_isCollapsed",
310
+ "type": {
311
+ "text": "boolean"
312
+ },
313
+ "privacy": "protected",
314
+ "description": "True once initialized and the primary pane is at its effective minimum.",
315
+ "readonly": true
316
+ },
317
+ {
318
+ "kind": "method",
319
+ "name": "_toggleCollapse",
320
+ "privacy": "protected",
321
+ "return": {
322
+ "type": {
323
+ "text": "void"
324
+ }
325
+ }
326
+ },
327
+ {
328
+ "kind": "method",
329
+ "name": "_onCollapseButtonClick",
330
+ "privacy": "protected",
331
+ "return": {
332
+ "type": {
333
+ "text": "void"
334
+ }
335
+ }
336
+ },
337
+ {
338
+ "kind": "method",
339
+ "name": "_onCollapseKeydown",
340
+ "privacy": "protected",
341
+ "return": {
342
+ "type": {
343
+ "text": "void"
344
+ }
345
+ },
346
+ "parameters": [
347
+ {
348
+ "name": "e",
349
+ "type": {
350
+ "text": "KeyboardEvent"
351
+ }
352
+ }
353
+ ]
354
+ },
355
+ {
356
+ "kind": "field",
357
+ "name": "_collapseButtonIcon",
358
+ "privacy": "private",
359
+ "readonly": true
360
+ },
196
361
  {
197
362
  "kind": "method",
198
363
  "name": "_setValue",
@@ -254,6 +419,16 @@
254
419
  "description": "Toggles resizing ability",
255
420
  "attribute": "fixed"
256
421
  },
422
+ {
423
+ "kind": "field",
424
+ "name": "collapsible",
425
+ "type": {
426
+ "text": "boolean"
427
+ },
428
+ "default": "false",
429
+ "description": "Renders a collapse/expand toggle button on the separator.",
430
+ "attribute": "collapsible"
431
+ },
257
432
  {
258
433
  "kind": "field",
259
434
  "name": "valueText",
@@ -448,6 +623,24 @@
448
623
  "description": "The step size for resizing, in either pixels or percentage points depending on `mode`.",
449
624
  "fieldName": "step"
450
625
  },
626
+ {
627
+ "name": "min",
628
+ "type": {
629
+ "text": "number"
630
+ },
631
+ "default": "0",
632
+ "description": "Minimum size of the primary pane in current mode units. Defaults to 0.",
633
+ "fieldName": "min"
634
+ },
635
+ {
636
+ "name": "max",
637
+ "type": {
638
+ "text": "number | undefined"
639
+ },
640
+ "default": "undefined",
641
+ "description": "Maximum size of the primary pane in current mode units. Defaults to the full container size.",
642
+ "fieldName": "max"
643
+ },
451
644
  {
452
645
  "name": "value",
453
646
  "description": "The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`.",
@@ -466,6 +659,15 @@
466
659
  "default": "false",
467
660
  "description": "Toggles resizing ability",
468
661
  "fieldName": "fixed"
662
+ },
663
+ {
664
+ "name": "collapsible",
665
+ "type": {
666
+ "text": "boolean"
667
+ },
668
+ "default": "false",
669
+ "description": "Renders a collapse/expand toggle button on the separator.",
670
+ "fieldName": "collapsible"
469
671
  }
470
672
  ],
471
673
  "superclass": {