@skewedaspect/sleekspace-ui 0.5.1 → 0.7.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 (121) hide show
  1. package/dist/components/Card/SkCard.vue.d.ts +13 -1
  2. package/dist/components/ColorPicker/SkColorPicker.vue.d.ts +29 -0
  3. package/dist/components/ColorPicker/index.d.ts +2 -0
  4. package/dist/components/ColorPicker/types.d.ts +4 -0
  5. package/dist/components/ContextMenu/SkContextMenu.vue.d.ts +25 -0
  6. package/dist/components/ContextMenu/SkContextMenuCheckboxItem.vue.d.ts +28 -0
  7. package/dist/components/ContextMenu/SkContextMenuItem.vue.d.ts +26 -0
  8. package/dist/components/ContextMenu/SkContextMenuLabel.vue.d.ts +17 -0
  9. package/dist/components/ContextMenu/SkContextMenuRadioGroup.vue.d.ts +26 -0
  10. package/dist/components/ContextMenu/SkContextMenuRadioItem.vue.d.ts +23 -0
  11. package/dist/components/ContextMenu/SkContextMenuSeparator.vue.d.ts +2 -0
  12. package/dist/components/ContextMenu/SkContextMenuSubmenu.vue.d.ts +24 -0
  13. package/dist/components/ContextMenu/index.d.ts +9 -0
  14. package/dist/components/ContextMenu/types.d.ts +2 -0
  15. package/dist/components/Dropdown/SkDropdown.vue.d.ts +1 -1
  16. package/dist/components/Dropdown/SkDropdownCheckboxItem.vue.d.ts +28 -0
  17. package/dist/components/Dropdown/SkDropdownMenuLabel.vue.d.ts +17 -0
  18. package/dist/components/Dropdown/SkDropdownRadioGroup.vue.d.ts +26 -0
  19. package/dist/components/Dropdown/SkDropdownRadioItem.vue.d.ts +23 -0
  20. package/dist/components/Dropdown/index.d.ts +4 -0
  21. package/dist/components/Panel/SkPanel.vue.d.ts +15 -1
  22. package/dist/components/Panel/types.d.ts +1 -0
  23. package/dist/components/Popover/SkPopover.vue.d.ts +1 -1
  24. package/dist/components/ScrollArea/SkScrollArea.vue.d.ts +31 -0
  25. package/dist/components/ScrollArea/index.d.ts +2 -0
  26. package/dist/components/ScrollArea/types.d.ts +4 -0
  27. package/dist/components/Select/SkSelect.vue.d.ts +61 -0
  28. package/dist/components/Select/SkSelectItem.vue.d.ts +134 -0
  29. package/dist/components/Select/SkSelectSeparator.vue.d.ts +2 -0
  30. package/dist/components/Select/index.d.ts +4 -0
  31. package/dist/components/Select/types.d.ts +3 -0
  32. package/dist/components/Sidebar/SkSidebar.vue.d.ts +8 -1
  33. package/dist/components/Sidebar/types.d.ts +1 -0
  34. package/dist/components/Skeleton/SkSkeleton.vue.d.ts +2 -2
  35. package/dist/components/Splitter/SkSplitter.vue.d.ts +29 -0
  36. package/dist/components/Splitter/SkSplitterHandle.vue.d.ts +7 -0
  37. package/dist/components/Splitter/SkSplitterPanel.vue.d.ts +30 -0
  38. package/dist/components/Splitter/index.d.ts +4 -0
  39. package/dist/components/Splitter/types.d.ts +3 -0
  40. package/dist/components/Toolbar/SkToolbar.vue.d.ts +31 -0
  41. package/dist/components/Toolbar/SkToolbarButton.vue.d.ts +22 -0
  42. package/dist/components/Toolbar/SkToolbarSeparator.vue.d.ts +2 -0
  43. package/dist/components/Toolbar/SkToolbarToggleGroup.vue.d.ts +31 -0
  44. package/dist/components/Toolbar/SkToolbarToggleItem.vue.d.ts +23 -0
  45. package/dist/components/Toolbar/index.d.ts +6 -0
  46. package/dist/components/Toolbar/types.d.ts +5 -0
  47. package/dist/components/Tooltip/SkTooltip.vue.d.ts +1 -1
  48. package/dist/components/TreeView/SkTreeItem.vue.d.ts +39 -0
  49. package/dist/components/TreeView/SkTreeView.vue.d.ts +31 -0
  50. package/dist/components/TreeView/index.d.ts +3 -0
  51. package/dist/components/TreeView/types.d.ts +3 -0
  52. package/dist/index.d.ts +61 -0
  53. package/dist/sleekspace-ui.css +1644 -65
  54. package/dist/sleekspace-ui.es.js +17444 -6063
  55. package/dist/sleekspace-ui.umd.js +17426 -6045
  56. package/package.json +2 -1
  57. package/src/components/Card/SkCard.vue +17 -1
  58. package/src/components/ColorPicker/SkColorPicker.vue +355 -0
  59. package/src/components/ColorPicker/index.ts +6 -0
  60. package/src/components/ColorPicker/types.ts +11 -0
  61. package/src/components/ContextMenu/SkContextMenu.vue +83 -0
  62. package/src/components/ContextMenu/SkContextMenuCheckboxItem.vue +72 -0
  63. package/src/components/ContextMenu/SkContextMenuItem.vue +49 -0
  64. package/src/components/ContextMenu/SkContextMenuLabel.vue +17 -0
  65. package/src/components/ContextMenu/SkContextMenuRadioGroup.vue +36 -0
  66. package/src/components/ContextMenu/SkContextMenuRadioItem.vue +53 -0
  67. package/src/components/ContextMenu/SkContextMenuSeparator.vue +21 -0
  68. package/src/components/ContextMenu/SkContextMenuSubmenu.vue +94 -0
  69. package/src/components/ContextMenu/index.ts +15 -0
  70. package/src/components/ContextMenu/types.ts +9 -0
  71. package/src/components/Dropdown/SkDropdown.vue +1 -1
  72. package/src/components/Dropdown/SkDropdownCheckboxItem.vue +72 -0
  73. package/src/components/Dropdown/SkDropdownMenuItem.vue +1 -1
  74. package/src/components/Dropdown/SkDropdownMenuLabel.vue +17 -0
  75. package/src/components/Dropdown/SkDropdownRadioGroup.vue +36 -0
  76. package/src/components/Dropdown/SkDropdownRadioItem.vue +53 -0
  77. package/src/components/Dropdown/SkDropdownSubmenu.vue +2 -2
  78. package/src/components/Dropdown/index.ts +4 -0
  79. package/src/components/Panel/SkPanel.vue +29 -4
  80. package/src/components/Panel/types.ts +3 -0
  81. package/src/components/ScrollArea/SkScrollArea.vue +87 -0
  82. package/src/components/ScrollArea/index.ts +8 -0
  83. package/src/components/ScrollArea/types.ts +11 -0
  84. package/src/components/Select/SkSelect.vue +210 -0
  85. package/src/components/Select/SkSelectItem.vue +112 -0
  86. package/src/components/Select/SkSelectSeparator.vue +40 -0
  87. package/src/components/Select/index.ts +10 -0
  88. package/src/components/Select/types.ts +10 -0
  89. package/src/components/Sidebar/SkSidebar.vue +39 -2
  90. package/src/components/Sidebar/types.ts +2 -0
  91. package/src/components/Splitter/SkSplitter.vue +65 -0
  92. package/src/components/Splitter/SkSplitterHandle.vue +40 -0
  93. package/src/components/Splitter/SkSplitterPanel.vue +45 -0
  94. package/src/components/Splitter/index.ts +10 -0
  95. package/src/components/Splitter/types.ts +10 -0
  96. package/src/components/Toolbar/SkToolbar.vue +69 -0
  97. package/src/components/Toolbar/SkToolbarButton.vue +36 -0
  98. package/src/components/Toolbar/SkToolbarSeparator.vue +15 -0
  99. package/src/components/Toolbar/SkToolbarToggleGroup.vue +49 -0
  100. package/src/components/Toolbar/SkToolbarToggleItem.vue +37 -0
  101. package/src/components/Toolbar/index.ts +12 -0
  102. package/src/components/Toolbar/types.ts +12 -0
  103. package/src/components/TreeView/SkTreeItem.vue +84 -0
  104. package/src/components/TreeView/SkTreeView.vue +120 -0
  105. package/src/components/TreeView/index.ts +9 -0
  106. package/src/components/TreeView/types.ts +10 -0
  107. package/src/global.d.ts +22 -0
  108. package/src/index.ts +110 -0
  109. package/src/styles/components/_card.scss +45 -9
  110. package/src/styles/components/_color-picker.scss +552 -0
  111. package/src/styles/components/_index.scss +6 -0
  112. package/src/styles/components/_listbox.scss +1 -0
  113. package/src/styles/components/_menu.scss +52 -3
  114. package/src/styles/components/_panel.scss +119 -13
  115. package/src/styles/components/_scroll-area.scss +120 -0
  116. package/src/styles/components/_select.scss +439 -0
  117. package/src/styles/components/_sidebar.scss +83 -4
  118. package/src/styles/components/_splitter.scss +136 -0
  119. package/src/styles/components/_toolbar.scss +296 -0
  120. package/src/styles/components/_tree-view.scss +187 -0
  121. package/web-types.json +1244 -197
package/src/styles/components/_panel.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  //----------------------------------------------------------------------------------------------------------------------
4
4
 
5
5
  @use '../theme/variables' as *;
6
- @use '../mixins' as *;
7
6
 
8
7
  //----------------------------------------------------------------------------------------------------------------------
9
8
  // Panel Design Tokens
@@ -27,6 +26,12 @@
27
26
  /// Default cut size for md panels (height / factor)
28
27
  --sk-panel-cut-size: calc(var(--sk-panel-min-height) / var(--sk-panel-radius-factor));
29
28
 
29
+ /// Per-corner cut sizes (toggled on by .sk-cut-* classes)
30
+ --sk-panel-cut-tl: 0px;
31
+ --sk-panel-cut-tr: 0px;
32
+ --sk-panel-cut-br: 0px;
33
+ --sk-panel-cut-bl: 0px;
34
+
30
35
  //------------------------------------------------------------------------------------------------------------------
31
36
  // Border Tokens
32
37
  //------------------------------------------------------------------------------------------------------------------
@@ -141,13 +146,86 @@
141
146
  color: var(--sk-kind-color, var(--sk-panel-color-base));
142
147
  }
143
148
 
144
- // Apply cut-border mixin for beveled corner (bottom-right only)
145
- @include cut-border(
146
- $cut: var(--sk-panel-cut-size),
147
- $border-width: var(--sk-panel-border-width),
148
- $border-color: var(--sk-panel-border-color),
149
- $corners: (bottom-right)
150
- );
149
+ //------------------------------------------------------------------------------------------------------------------
150
+ // Corner toggle classes
151
+ //------------------------------------------------------------------------------------------------------------------
152
+
153
+ &.sk-cut-top-left { --sk-panel-cut-tl: var(--sk-panel-cut-size); }
154
+ &.sk-cut-top-right { --sk-panel-cut-tr: var(--sk-panel-cut-size); }
155
+ &.sk-cut-bottom-right { --sk-panel-cut-br: var(--sk-panel-cut-size); }
156
+ &.sk-cut-bottom-left { --sk-panel-cut-bl: var(--sk-panel-cut-size); }
157
+
158
+ //------------------------------------------------------------------------------------------------------------------
159
+ // Beveled corners (modern path)
160
+ //------------------------------------------------------------------------------------------------------------------
161
+
162
+ @supports (corner-shape: bevel)
163
+ {
164
+ border: var(--sk-panel-border-width) solid var(--sk-panel-border-color);
165
+ border-top-left-radius: var(--sk-panel-cut-tl);
166
+ border-top-right-radius: var(--sk-panel-cut-tr);
167
+ border-bottom-right-radius: var(--sk-panel-cut-br);
168
+ border-bottom-left-radius: var(--sk-panel-cut-bl);
169
+ corner-shape: bevel;
170
+ }
171
+
172
+ //------------------------------------------------------------------------------------------------------------------
173
+ // Beveled corners (clip-path fallback)
174
+ //------------------------------------------------------------------------------------------------------------------
175
+
176
+ @supports not (corner-shape: bevel)
177
+ {
178
+ border: none;
179
+
180
+ // 8-point polygon; when a corner var is 0px its two points collapse into the corner
181
+ clip-path: polygon(
182
+ var(--sk-panel-cut-tl) 0,
183
+ calc(100% - var(--sk-panel-cut-tr)) 0,
184
+ 100% var(--sk-panel-cut-tr),
185
+ 100% calc(100% - var(--sk-panel-cut-br)),
186
+ calc(100% - var(--sk-panel-cut-br)) 100%,
187
+ var(--sk-panel-cut-bl) 100%,
188
+ 0 calc(100% - var(--sk-panel-cut-bl)),
189
+ 0 var(--sk-panel-cut-tl)
190
+ );
191
+
192
+ // ::before draws the border via double-polygon clip-path
193
+ &::before
194
+ {
195
+ content: '';
196
+ position: absolute;
197
+ top: 0;
198
+ left: 0;
199
+ right: 0;
200
+ bottom: 0;
201
+ background-color: var(--sk-panel-border-color);
202
+ z-index: -1;
203
+
204
+ clip-path: polygon(
205
+ // Outer ring (clockwise)
206
+ var(--sk-panel-cut-tl) 0,
207
+ calc(100% - var(--sk-panel-cut-tr)) 0,
208
+ 100% var(--sk-panel-cut-tr),
209
+ 100% calc(100% - var(--sk-panel-cut-br)),
210
+ calc(100% - var(--sk-panel-cut-br)) 100%,
211
+ var(--sk-panel-cut-bl) 100%,
212
+ 0 calc(100% - var(--sk-panel-cut-bl)),
213
+ 0 var(--sk-panel-cut-tl),
214
+ var(--sk-panel-cut-tl) 0,
215
+
216
+ // Inner ring (counter-clockwise)
217
+ calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width),
218
+ var(--sk-panel-border-width) calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)),
219
+ var(--sk-panel-border-width) calc(100% - var(--sk-panel-cut-bl) - var(--sk-panel-border-width)),
220
+ calc(var(--sk-panel-cut-bl) + var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)),
221
+ calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)),
222
+ calc(100% - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)),
223
+ calc(100% - var(--sk-panel-border-width)) calc(var(--sk-panel-cut-tr) + var(--sk-panel-border-width)),
224
+ calc(100% - var(--sk-panel-cut-tr) - var(--sk-panel-border-width)) var(--sk-panel-border-width),
225
+ calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width)
226
+ );
227
+ }
228
+ }
151
229
 
152
230
  //------------------------------------------------------------------------------------------------------------------
153
231
  // Corner decoration line
@@ -161,11 +239,40 @@
161
239
  height: 2px;
162
240
  background: var(--sk-panel-border-base);
163
241
  border-radius: 1px;
242
+ transform-origin: center;
243
+ pointer-events: none;
244
+ }
245
+
246
+ // Bottom-right decoration (default)
247
+ &.sk-decoration-bottom-right::after
248
+ {
164
249
  right: var(--sk-panel-decoration-offset);
165
250
  bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
166
251
  transform: rotate(135deg);
167
- transform-origin: center;
168
- pointer-events: none;
252
+ }
253
+
254
+ // Top-left decoration (same diagonal as bottom-right)
255
+ &.sk-decoration-top-left::after
256
+ {
257
+ left: var(--sk-panel-decoration-offset);
258
+ top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
259
+ transform: rotate(135deg);
260
+ }
261
+
262
+ // Top-right decoration
263
+ &.sk-decoration-top-right::after
264
+ {
265
+ right: var(--sk-panel-decoration-offset);
266
+ top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
267
+ transform: rotate(45deg);
268
+ }
269
+
270
+ // Bottom-left decoration
271
+ &.sk-decoration-bottom-left::after
272
+ {
273
+ left: var(--sk-panel-decoration-offset);
274
+ bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
275
+ transform: rotate(45deg);
169
276
  }
170
277
 
171
278
  //------------------------------------------------------------------------------------------------------------------
@@ -203,9 +310,8 @@
203
310
 
204
311
  &.sk-no-border
205
312
  {
206
- // Remove all border styling
313
+ // Remove border and glow but keep the bevel shape
207
314
  --sk-panel-border-width: 0;
208
- --sk-panel-cut-size: 0;
209
315
  box-shadow: none;
210
316
 
211
317
  // Remove the decoration as well
@@ -231,7 +337,7 @@
231
337
  .sk-panel-scroll-content
232
338
  {
233
339
  padding: var(--sk-panel-padding);
234
- margin-bottom: calc(var(--sk-panel-cut-size) + var(--sk-panel-decoration-offset));
340
+ margin-bottom: calc(max(var(--sk-panel-cut-br), var(--sk-panel-cut-bl)) + var(--sk-panel-decoration-offset));
235
341
  overflow-y: auto;
236
342
  overflow-x: hidden;
237
343
  flex: 1;
package/src/styles/components/_scroll-area.scss ADDED
@@ -0,0 +1,120 @@
1
+ //----------------------------------------------------------------------------------------------------------------------
2
+ // ScrollArea Component Styles
3
+ //----------------------------------------------------------------------------------------------------------------------
4
+
5
+ $kinds: (neutral, primary, accent, info, success, warning, danger);
6
+
7
+ //----------------------------------------------------------------------------------------------------------------------
8
+ // Kind Mixin
9
+ //----------------------------------------------------------------------------------------------------------------------
10
+
11
+ @mixin scroll-area-kind($kind)
12
+ {
13
+ &.sk-#{ '' + $kind }
14
+ {
15
+ --sk-scroll-area-color-base: var(--sk-#{ $kind }-base);
16
+ }
17
+ }
18
+
19
+ //----------------------------------------------------------------------------------------------------------------------
20
+ // ScrollArea Root
21
+ //----------------------------------------------------------------------------------------------------------------------
22
+
23
+ .sk-scroll-area
24
+ {
25
+ --sk-scroll-area-color-base: var(--sk-neutral-base);
26
+ --sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
27
+ --sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
28
+ --sk-scroll-area-size: 0.5rem;
29
+
30
+ position: relative;
31
+ overflow: hidden;
32
+
33
+ @each $kind in $kinds
34
+ {
35
+ @include scroll-area-kind($kind);
36
+ }
37
+ }
38
+
39
+ //----------------------------------------------------------------------------------------------------------------------
40
+ // ScrollArea Viewport
41
+ //----------------------------------------------------------------------------------------------------------------------
42
+
43
+ .sk-scroll-area-viewport
44
+ {
45
+ width: 100%;
46
+ height: 100%;
47
+ border-radius: inherit;
48
+
49
+ // Reka UI sets this inline; override for full scroll
50
+ & > div
51
+ {
52
+ display: block !important;
53
+ }
54
+ }
55
+
56
+ //----------------------------------------------------------------------------------------------------------------------
57
+ // ScrollArea Scrollbar
58
+ //----------------------------------------------------------------------------------------------------------------------
59
+
60
+ .sk-scroll-area-scrollbar
61
+ {
62
+ display: flex;
63
+ touch-action: none;
64
+ user-select: none;
65
+ padding: 2px;
66
+ background: var(--sk-scroll-area-track-color);
67
+ transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
68
+
69
+ &:hover
70
+ {
71
+ background: oklch(from var(--sk-neutral-base) l c h / 0.15);
72
+ }
73
+
74
+ // Vertical scrollbar
75
+ &[data-orientation='vertical']
76
+ {
77
+ width: var(--sk-scroll-area-size);
78
+ }
79
+
80
+ // Horizontal scrollbar
81
+ &[data-orientation='horizontal']
82
+ {
83
+ flex-direction: column;
84
+ height: var(--sk-scroll-area-size);
85
+ }
86
+ }
87
+
88
+ //----------------------------------------------------------------------------------------------------------------------
89
+ // ScrollArea Thumb
90
+ //----------------------------------------------------------------------------------------------------------------------
91
+
92
+ .sk-scroll-area-thumb
93
+ {
94
+ position: relative;
95
+ flex: 1;
96
+ border-radius: var(--sk-scroll-area-size);
97
+ background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.4);
98
+ transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
99
+
100
+ &:hover
101
+ {
102
+ background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.6);
103
+ }
104
+
105
+ &:active
106
+ {
107
+ background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.8);
108
+ }
109
+ }
110
+
111
+ //----------------------------------------------------------------------------------------------------------------------
112
+ // ScrollArea Corner
113
+ //----------------------------------------------------------------------------------------------------------------------
114
+
115
+ .sk-scroll-area-corner
116
+ {
117
+ background: var(--sk-scroll-area-track-color);
118
+ }
119
+
120
+ //----------------------------------------------------------------------------------------------------------------------