sakana-element 2.4.2 → 2.5.1

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 (138) hide show
  1. package/README.md +26 -2
  2. package/dist/es/Alert-Cq5F0XNt.js +57 -0
  3. package/dist/es/Avatar-CbgoH75Q.js +5 -0
  4. package/dist/es/Badge-BVu3hO8V.js +7 -0
  5. package/dist/es/Breadcrumb-Bh5y4LbC.js +6 -0
  6. package/dist/es/Button-B1wRI6I7.js +28 -0
  7. package/dist/es/Card-VMxMFix8.js +8 -0
  8. package/dist/es/Carousel-QnDHp3Ka.js +11 -0
  9. package/dist/es/ChatBubble-DYao4l85.js +5 -0
  10. package/dist/es/Checkbox-BbLzAqK2.js +228 -0
  11. package/dist/es/Collapse-BkKmhGQf.js +11 -0
  12. package/dist/es/Collapsible-B56M9eUW.js +12 -0
  13. package/dist/es/Command-CORaZKsJ.js +45 -0
  14. package/dist/es/ConfigProvider-CGLQ9b8M.js +35 -0
  15. package/dist/es/Diff-gDYKT1cl.js +17 -0
  16. package/dist/es/Divider-bI4lEaol.js +5 -0
  17. package/dist/es/Drawer-AnXxT-V6.js +6 -0
  18. package/dist/es/Dropdown-80RoE7gX.js +115 -0
  19. package/dist/es/FileInput-B6CyElTd.js +113 -0
  20. package/dist/es/Filter-CtIs_iO4.js +13 -0
  21. package/dist/es/Icon-hbRhI1iH.js +3 -0
  22. package/dist/es/Indicator-Bs6f41iJ.js +5 -0
  23. package/dist/es/Input-DJsDXAG1.js +8 -0
  24. package/dist/es/Kbd-DZf70Cdz.js +5 -0
  25. package/dist/es/Link-CLXoAvDl.js +5 -0
  26. package/dist/es/Loading-BHzOi8J-.js +27 -0
  27. package/dist/es/Message-DOxtRo8V.js +51 -0
  28. package/dist/es/Notification-F5UfnGWs.js +22 -0
  29. package/dist/es/Pixelate-DFpR42b2.js +12 -0
  30. package/dist/es/Popconfirm-C1LNG9db.js +8 -0
  31. package/dist/es/Progress-CDHJJUVL.js +6 -0
  32. package/dist/es/Radio-HMaWtyx9.js +11 -0
  33. package/dist/es/Resizable-DSYUZwLE.js +59 -0
  34. package/dist/es/Select-DaBVMoMB.js +31 -0
  35. package/dist/es/Skeleton-4hCbgDOF.js +7 -0
  36. package/dist/es/Switch-BCTrn4hn.js +11 -0
  37. package/dist/es/Table-B5twhEZC.js +5 -0
  38. package/dist/es/Tooltip-CDjXpGHn.js +4 -0
  39. package/dist/es/Validator-DoWa9KfA.js +16 -0
  40. package/dist/es/index.js +41 -140
  41. package/dist/index.css +2 -1
  42. package/dist/theme/Alert.css +1 -295
  43. package/dist/theme/Avatar.css +1 -86
  44. package/dist/theme/Badge.css +1 -214
  45. package/dist/theme/Breadcrumb.css +1 -192
  46. package/dist/theme/Button.css +1 -1570
  47. package/dist/theme/Card.css +1 -347
  48. package/dist/theme/Carousel.css +1 -0
  49. package/dist/theme/ChatBubble.css +1 -218
  50. package/dist/theme/Checkbox.css +1 -604
  51. package/dist/theme/Collapse.css +1 -764
  52. package/dist/theme/Collapsible.css +1 -0
  53. package/dist/theme/Command.css +1 -0
  54. package/dist/theme/Diff.css +1 -110
  55. package/dist/theme/Divider.css +1 -150
  56. package/dist/theme/Drawer.css +1 -206
  57. package/dist/theme/Dropdown.css +1 -471
  58. package/dist/theme/FileInput.css +1 -397
  59. package/dist/theme/Filter.css +1 -598
  60. package/dist/theme/Indicator.css +1 -159
  61. package/dist/theme/Input.css +1 -647
  62. package/dist/theme/Kbd.css +1 -104
  63. package/dist/theme/Link.css +1 -69
  64. package/dist/theme/Loading.css +1 -266
  65. package/dist/theme/Message.css +1 -565
  66. package/dist/theme/Notification.css +1 -316
  67. package/dist/theme/Popconfirm.css +1 -46
  68. package/dist/theme/Progress.css +1 -278
  69. package/dist/theme/Radio.css +1 -492
  70. package/dist/theme/Resizable.css +1 -95
  71. package/dist/theme/Select.css +1 -584
  72. package/dist/theme/Skeleton.css +1 -192
  73. package/dist/theme/Switch.css +1 -323
  74. package/dist/theme/Table.css +1 -680
  75. package/dist/theme/Validator.css +1 -25
  76. package/dist/theme/index.css +1 -341
  77. package/dist/types/components/Badge/types.d.ts +2 -0
  78. package/dist/types/components/Carousel/constants.d.ts +6 -0
  79. package/dist/types/components/Carousel/index.d.ts +77 -0
  80. package/dist/types/components/Carousel/types.d.ts +27 -0
  81. package/dist/types/components/Collapsible/constants.d.ts +6 -0
  82. package/dist/types/components/Collapsible/index.d.ts +85 -0
  83. package/dist/types/components/Collapsible/types.d.ts +22 -0
  84. package/dist/types/components/Command/constants.d.ts +4 -0
  85. package/dist/types/components/Command/index.d.ts +216 -0
  86. package/dist/types/components/Command/types.d.ts +59 -0
  87. package/dist/types/components/Validator/index.d.ts +1 -0
  88. package/dist/types/components/index.d.ts +3 -0
  89. package/dist/types/hooks/index.d.ts +1 -1
  90. package/dist/umd/index.css +2 -1
  91. package/dist/umd/index.css.gz +0 -0
  92. package/dist/umd/index.umd.cjs +1255 -5
  93. package/dist/umd/index.umd.cjs.gz +0 -0
  94. package/package.json +15 -3
  95. package/dist/es/Alert-DdAShH-x.js +0 -19
  96. package/dist/es/Avatar-BGTH7x40.js +0 -9
  97. package/dist/es/Badge-CYZ55qNe.js +0 -14
  98. package/dist/es/Breadcrumb-BTWTtzrN.js +0 -15
  99. package/dist/es/Button-GsSCWg5x.js +0 -24
  100. package/dist/es/Card-BhgzwQqo.js +0 -16
  101. package/dist/es/ChatBubble-4F481Agj.js +0 -9
  102. package/dist/es/Checkbox-C7vZGSTh.js +0 -51
  103. package/dist/es/Collapse-CbcSQig5.js +0 -53
  104. package/dist/es/ConfigProvider-K1UzjlRm.js +0 -45
  105. package/dist/es/Diff-B747pgwb.js +0 -64
  106. package/dist/es/Divider-BSu_1-AU.js +0 -9
  107. package/dist/es/Drawer-I2lCgyba.js +0 -40
  108. package/dist/es/Dropdown-B0J_c8Wv.js +0 -104
  109. package/dist/es/FileInput-CFg1wpsH.js +0 -33
  110. package/dist/es/Filter-nA8j-62U.js +0 -40
  111. package/dist/es/Form-C1b8Igns.js +0 -123
  112. package/dist/es/Icon-BulvH9Wm.js +0 -27
  113. package/dist/es/Indicator-BbW4iUkh.js +0 -9
  114. package/dist/es/Input-BUHFulIW.js +0 -42
  115. package/dist/es/Kbd-CeP2wkdE.js +0 -13
  116. package/dist/es/Link-Dks2bXo8.js +0 -11
  117. package/dist/es/Loading-DoBtVGWo.js +0 -92
  118. package/dist/es/Message-Ba_P4Wvy.js +0 -152
  119. package/dist/es/Notification-DzG8dLuk.js +0 -69
  120. package/dist/es/Overlay-DeyTycv0.js +0 -12
  121. package/dist/es/Pixelate-B21HKbSE.js +0 -39
  122. package/dist/es/Popconfirm-BqN3JxJ_.js +0 -23
  123. package/dist/es/Progress--6EJjbbM.js +0 -12
  124. package/dist/es/Radio-CrdrvrFH.js +0 -33
  125. package/dist/es/Resizable-By3ijQf0.js +0 -151
  126. package/dist/es/Select-Cq1Ucs_U.js +0 -133
  127. package/dist/es/Skeleton-ChCVgMSk.js +0 -15
  128. package/dist/es/Switch-DURmSH-T.js +0 -34
  129. package/dist/es/Table-BE2f9u65.js +0 -10
  130. package/dist/es/Tooltip-DR4Mc5Fh.js +0 -74
  131. package/dist/es/Validator-BYn72MYn.js +0 -40
  132. package/dist/es/hooks-dJGu-5DG.js +0 -170
  133. package/dist/es/utils-CnCdZsHG.js +0 -155
  134. package/dist/es/vendor-eombfMkP.js +0 -1351
  135. package/dist/theme/Form.css +0 -83
  136. package/dist/theme/Icon.css +0 -168
  137. package/dist/theme/Overlay.css +0 -12
  138. package/dist/theme/Tooltip.css +0 -235
@@ -1,471 +1 @@
1
- /* Dropdown Variables */
2
- .px-dropdown .px-dropdown__menu {
3
- --px-dropdown-menuItem-hover-fill: var(--px-color-primary);
4
- --px-dropdown-menuItem-hover-color: #fff;
5
- --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
6
- --px-dropdown-menuItem-divided-color: var(--px-border-color-lighter);
7
- --px-dropdown-shadow-color: var(--px-shadow-color-dark);
8
- --px-dropdown-border-color: var(--px-border-color);
9
- --px-dropdown-bg-color: var(--px-bg-color);
10
-
11
- /* Beveled inset for 3D raised-panel depth */
12
- --px-dropdown-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.6);
13
- --px-dropdown-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
14
- }
15
- /* Base Dropdown Styles - Pixel Game Menu */
16
- .px-dropdown {
17
- display: inline-block;
18
- font-family: var(--px-font-family);
19
-
20
- outline: none;
21
- }
22
- .px-dropdown .px-tooltip {
23
- /* 6px vertical clears staircase corners; 4px horizontal matches border inset */
24
- --px-tooltip-padding: 6px 4px;
25
- --px-tooltip-border-color: transparent;
26
- --px-tooltip-shadow-color: transparent;
27
- --px-shadow-offset-x: 0px;
28
- --px-shadow-offset-y: 0px;
29
- }
30
- .px-dropdown .px-tooltip .px-tooltip__popper {
31
- filter: none;
32
- }
33
- /* Remove staircase border layer from popup */
34
- .px-dropdown .px-tooltip .px-tooltip__popper::before {
35
- display: none;
36
- }
37
- /* Enhanced pixel-art bevel on fill layer */
38
- .px-dropdown .px-tooltip .px-tooltip__popper::after {
39
- box-shadow:
40
- inset 2px 2px 0 0 rgba(255, 255, 255, 0.6),
41
- inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
42
- }
43
- /* Disabled state */
44
- .px-dropdown.is-disabled > * {
45
- color: var(--px-text-color-placeholder) !important;
46
- cursor: not-allowed !important;
47
- }
48
- /* Dropdown Menu - Pixel style list */
49
- .px-dropdown__menu {
50
- list-style-type: none;
51
- margin: 0;
52
- padding: 4px 0;
53
- background: var(--px-dropdown-bg-color);
54
- position: relative;
55
- outline: none;
56
- }
57
- /* Pixel-art scrollbar */
58
- .px-dropdown__menu::-webkit-scrollbar {
59
- width: 10px;
60
- }
61
- .px-dropdown__menu::-webkit-scrollbar-track {
62
- background: var(--px-fill-color-light);
63
- border-left: 2px solid var(--px-dropdown-border-color);
64
- }
65
- .px-dropdown__menu::-webkit-scrollbar-thumb {
66
- background: var(--px-fill-color-darker, var(--px-border-color));
67
- border: 2px solid var(--px-dropdown-border-color);
68
- }
69
- .px-dropdown__menu::-webkit-scrollbar-thumb:hover {
70
- background: var(--px-dropdown-menuItem-hover-fill);
71
- }
72
- /* Menu items - Pixel RPG menu style */
73
- .px-dropdown__menu .px-dropdown__item {
74
- display: flex;
75
- align-items: center;
76
- white-space: nowrap;
77
- list-style: none;
78
- line-height: 22px;
79
- padding: 8px 16px 8px 22px;
80
- margin: 0;
81
- font-size: var(--px-font-size-base);
82
- font-family: var(--px-font-family);
83
- color: var(--px-text-color-primary);
84
- cursor: pointer;
85
- outline: none;
86
- position: relative;
87
- transition: none;
88
- z-index: 1;
89
- }
90
- /* Item icon */
91
- .px-dropdown__menu .px-dropdown__item .px-dropdown__item-icon {
92
- margin-right: 8px;
93
- font-size: var(--px-font-size-base);
94
- width: 16px;
95
- flex-shrink: 0;
96
- display: flex;
97
- align-items: center;
98
- }
99
- /* Pixel arrow indicator — right-pointing staircase triangle */
100
- .px-dropdown__menu .px-dropdown__item::before {
101
- content: '';
102
- position: absolute;
103
- left: 8px;
104
- top: 50%;
105
- transform: translateY(-50%);
106
- width: 6px;
107
- height: 8px;
108
- background: var(--px-dropdown-menuItem-hover-color);
109
- clip-path: polygon(
110
- 0 0, 2px 0,
111
- 2px 2px, 4px 2px,
112
- 4px 4px, 6px 4px,
113
- 6px 4px, 4px 4px,
114
- 4px 6px, 2px 6px,
115
- 2px 8px, 0 8px
116
- );
117
- opacity: 0;
118
- z-index: 2;
119
- }
120
- /* Background highlight layer — full width selection bar */
121
- .px-dropdown__menu .px-dropdown__item::after {
122
- content: '';
123
- position: absolute;
124
- inset: 0;
125
- background: transparent;
126
- z-index: -1;
127
- }
128
- /* Hover & focus effect - Pixel highlight with beveled 3D bar */
129
- .px-dropdown__menu .px-dropdown__item:hover,
130
- .px-dropdown__menu .px-dropdown__item:focus {
131
- color: var(--px-dropdown-menuItem-hover-color);
132
- }
133
- .px-dropdown__menu .px-dropdown__item:hover::before, .px-dropdown__menu .px-dropdown__item:focus::before {
134
- opacity: 1;
135
- }
136
- .px-dropdown__menu .px-dropdown__item:hover::after, .px-dropdown__menu .px-dropdown__item:focus::after {
137
- background-color: var(--px-dropdown-menuItem-hover-fill);
138
- box-shadow: var(--px-dropdown-inset-highlight), var(--px-dropdown-inset-shadow);
139
- }
140
- /* Active/pressed - reversed bevel for "pressed in" feel */
141
- .px-dropdown__menu .px-dropdown__item:active:not(.is-disabled)::after {
142
- box-shadow: var(--px-dropdown-inset-shadow), var(--px-dropdown-inset-highlight);
143
- }
144
- /* Disabled state */
145
- .px-dropdown__menu .px-dropdown__item.is-disabled {
146
- color: var(--px-dropdown-menuItem-disabled-color);
147
- cursor: not-allowed;
148
- opacity: 0.55;
149
- }
150
- .px-dropdown__menu .px-dropdown__item.is-disabled::before {
151
- opacity: 0 !important;
152
- }
153
- .px-dropdown__menu .px-dropdown__item.is-disabled:hover,
154
- .px-dropdown__menu .px-dropdown__item.is-disabled:focus {
155
- color: var(--px-dropdown-menuItem-disabled-color);
156
- }
157
- .px-dropdown__menu .px-dropdown__item.is-disabled:hover::after, .px-dropdown__menu .px-dropdown__item.is-disabled:focus::after {
158
- background-color: transparent;
159
- box-shadow: none;
160
- }
161
- /* First item — top staircase corners on highlight layer */
162
- .px-dropdown__menu .px-dropdown__item:first-child::after {
163
- top: 2px;
164
- clip-path: polygon(
165
- 0 2px, 2px 2px, 2px 0, 4px 0,
166
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
167
- 100% 100%,
168
- 0 100%
169
- );
170
- }
171
- /* Last item — bottom staircase corners on highlight layer */
172
- .px-dropdown__menu .px-dropdown__item:last-child::after {
173
- bottom: 2px;
174
- clip-path: polygon(
175
- 0 0,
176
- 100% 0,
177
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
178
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
179
- );
180
- }
181
- /* Single item — both top and bottom staircase corners */
182
- .px-dropdown__menu .px-dropdown__item:first-child:last-child::after {
183
- top: 2px;
184
- bottom: 2px;
185
- clip-path: polygon(
186
- 0 2px, 2px 2px, 2px 0, 4px 0,
187
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
188
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
189
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
190
- );
191
- }
192
- /* Size variants */
193
- .px-dropdown__menu .px-dropdown__item--large {
194
- padding: 10px 20px 10px 26px;
195
- line-height: 26px;
196
- font-size: var(--px-font-size-large);
197
- }
198
- .px-dropdown__menu .px-dropdown__item--large::before {
199
- left: 10px;
200
- width: 8px;
201
- height: 12px;
202
- clip-path: polygon(
203
- 0 0, 2px 0,
204
- 2px 2px, 4px 2px,
205
- 4px 4px, 6px 4px,
206
- 6px 6px, 8px 6px,
207
- 8px 6px, 6px 6px,
208
- 6px 8px, 4px 8px,
209
- 4px 10px, 2px 10px,
210
- 2px 12px, 0 12px
211
- );
212
- }
213
- .px-dropdown__menu .px-dropdown__item--small {
214
- padding: 5px 12px 5px 18px;
215
- line-height: 18px;
216
- font-size: var(--px-font-size-small);
217
- }
218
- .px-dropdown__menu .px-dropdown__item--small::before {
219
- left: 6px;
220
- width: 4px;
221
- height: 6px;
222
- }
223
- /* Divider - Pixel-dashed gradient line */
224
- .px-dropdown__menu .divided-placeholder {
225
- margin: 4px 6px;
226
- height: 2px;
227
- background-image: repeating-linear-gradient(
228
- to right,
229
- var(--px-dropdown-menuItem-divided-color) 0px,
230
- var(--px-dropdown-menuItem-divided-color) 6px,
231
- transparent 6px,
232
- transparent 12px
233
- );
234
- }
235
- /* Dropdown Variables */
236
- .px-dropdown .px-dropdown__menu {
237
- --px-dropdown-menuItem-hover-fill: var(--px-color-primary);
238
- --px-dropdown-menuItem-hover-color: #fff;
239
- --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
240
- --px-dropdown-menuItem-divided-color: var(--px-border-color-lighter);
241
- --px-dropdown-shadow-color: var(--px-shadow-color-dark);
242
- --px-dropdown-border-color: var(--px-border-color);
243
- --px-dropdown-bg-color: var(--px-bg-color);
244
-
245
- /* Beveled inset for 3D raised-panel depth */
246
- --px-dropdown-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.6);
247
- --px-dropdown-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
248
- }
249
- /* Base Dropdown Styles - Pixel Game Menu */
250
- .px-dropdown {
251
- display: inline-block;
252
- font-family: var(--px-font-family);
253
-
254
- outline: none;
255
- }
256
- .px-dropdown .px-tooltip {
257
- /* 6px vertical clears staircase corners; 4px horizontal matches border inset */
258
- --px-tooltip-padding: 6px 4px;
259
- --px-tooltip-border-color: transparent;
260
- --px-tooltip-shadow-color: transparent;
261
- --px-shadow-offset-x: 0px;
262
- --px-shadow-offset-y: 0px;
263
- }
264
- .px-dropdown .px-tooltip .px-tooltip__popper {
265
- filter: none;
266
- }
267
- /* Remove staircase border layer from popup */
268
- .px-dropdown .px-tooltip .px-tooltip__popper::before {
269
- display: none;
270
- }
271
- /* Enhanced pixel-art bevel on fill layer */
272
- .px-dropdown .px-tooltip .px-tooltip__popper::after {
273
- box-shadow:
274
- inset 2px 2px 0 0 rgba(255, 255, 255, 0.6),
275
- inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
276
- }
277
- /* Disabled state */
278
- .px-dropdown.is-disabled > * {
279
- color: var(--px-text-color-placeholder) !important;
280
- cursor: not-allowed !important;
281
- }
282
- /* Dropdown Menu - Pixel style list */
283
- .px-dropdown__menu {
284
- list-style-type: none;
285
- margin: 0;
286
- padding: 4px 0;
287
- background: var(--px-dropdown-bg-color);
288
- position: relative;
289
- outline: none;
290
- }
291
- /* Pixel-art scrollbar */
292
- .px-dropdown__menu::-webkit-scrollbar {
293
- width: 10px;
294
- }
295
- .px-dropdown__menu::-webkit-scrollbar-track {
296
- background: var(--px-fill-color-light);
297
- border-left: 2px solid var(--px-dropdown-border-color);
298
- }
299
- .px-dropdown__menu::-webkit-scrollbar-thumb {
300
- background: var(--px-fill-color-darker, var(--px-border-color));
301
- border: 2px solid var(--px-dropdown-border-color);
302
- }
303
- .px-dropdown__menu::-webkit-scrollbar-thumb:hover {
304
- background: var(--px-dropdown-menuItem-hover-fill);
305
- }
306
- /* Menu items - Pixel RPG menu style */
307
- .px-dropdown__menu .px-dropdown__item {
308
- display: flex;
309
- align-items: center;
310
- white-space: nowrap;
311
- list-style: none;
312
- line-height: 22px;
313
- padding: 8px 16px 8px 22px;
314
- margin: 0;
315
- font-size: var(--px-font-size-base);
316
- font-family: var(--px-font-family);
317
- color: var(--px-text-color-primary);
318
- cursor: pointer;
319
- outline: none;
320
- position: relative;
321
- transition: none;
322
- z-index: 1;
323
- }
324
- /* Item icon */
325
- .px-dropdown__menu .px-dropdown__item .px-dropdown__item-icon {
326
- margin-right: 8px;
327
- font-size: var(--px-font-size-base);
328
- width: 16px;
329
- flex-shrink: 0;
330
- display: flex;
331
- align-items: center;
332
- }
333
- /* Pixel arrow indicator — right-pointing staircase triangle */
334
- .px-dropdown__menu .px-dropdown__item::before {
335
- content: '';
336
- position: absolute;
337
- left: 8px;
338
- top: 50%;
339
- transform: translateY(-50%);
340
- width: 6px;
341
- height: 8px;
342
- background: var(--px-dropdown-menuItem-hover-color);
343
- clip-path: polygon(
344
- 0 0, 2px 0,
345
- 2px 2px, 4px 2px,
346
- 4px 4px, 6px 4px,
347
- 6px 4px, 4px 4px,
348
- 4px 6px, 2px 6px,
349
- 2px 8px, 0 8px
350
- );
351
- opacity: 0;
352
- z-index: 2;
353
- }
354
- /* Background highlight layer — full width selection bar */
355
- .px-dropdown__menu .px-dropdown__item::after {
356
- content: '';
357
- position: absolute;
358
- inset: 0;
359
- background: transparent;
360
- z-index: -1;
361
- }
362
- /* Hover & focus effect - Pixel highlight with beveled 3D bar */
363
- .px-dropdown__menu .px-dropdown__item:hover,
364
- .px-dropdown__menu .px-dropdown__item:focus {
365
- color: var(--px-dropdown-menuItem-hover-color);
366
- }
367
- .px-dropdown__menu .px-dropdown__item:hover::before, .px-dropdown__menu .px-dropdown__item:focus::before {
368
- opacity: 1;
369
- }
370
- .px-dropdown__menu .px-dropdown__item:hover::after, .px-dropdown__menu .px-dropdown__item:focus::after {
371
- background-color: var(--px-dropdown-menuItem-hover-fill);
372
- box-shadow: var(--px-dropdown-inset-highlight), var(--px-dropdown-inset-shadow);
373
- }
374
- /* Active/pressed - reversed bevel for "pressed in" feel */
375
- .px-dropdown__menu .px-dropdown__item:active:not(.is-disabled)::after {
376
- box-shadow: var(--px-dropdown-inset-shadow), var(--px-dropdown-inset-highlight);
377
- }
378
- /* Disabled state */
379
- .px-dropdown__menu .px-dropdown__item.is-disabled {
380
- color: var(--px-dropdown-menuItem-disabled-color);
381
- cursor: not-allowed;
382
- opacity: 0.55;
383
- }
384
- .px-dropdown__menu .px-dropdown__item.is-disabled::before {
385
- opacity: 0 !important;
386
- }
387
- .px-dropdown__menu .px-dropdown__item.is-disabled:hover,
388
- .px-dropdown__menu .px-dropdown__item.is-disabled:focus {
389
- color: var(--px-dropdown-menuItem-disabled-color);
390
- }
391
- .px-dropdown__menu .px-dropdown__item.is-disabled:hover::after, .px-dropdown__menu .px-dropdown__item.is-disabled:focus::after {
392
- background-color: transparent;
393
- box-shadow: none;
394
- }
395
- /* First item — top staircase corners on highlight layer */
396
- .px-dropdown__menu .px-dropdown__item:first-child::after {
397
- top: 2px;
398
- clip-path: polygon(
399
- 0 2px, 2px 2px, 2px 0, 4px 0,
400
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
401
- 100% 100%,
402
- 0 100%
403
- );
404
- }
405
- /* Last item — bottom staircase corners on highlight layer */
406
- .px-dropdown__menu .px-dropdown__item:last-child::after {
407
- bottom: 2px;
408
- clip-path: polygon(
409
- 0 0,
410
- 100% 0,
411
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
412
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
413
- );
414
- }
415
- /* Single item — both top and bottom staircase corners */
416
- .px-dropdown__menu .px-dropdown__item:first-child:last-child::after {
417
- top: 2px;
418
- bottom: 2px;
419
- clip-path: polygon(
420
- 0 2px, 2px 2px, 2px 0, 4px 0,
421
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
422
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
423
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
424
- );
425
- }
426
- /* Size variants */
427
- .px-dropdown__menu .px-dropdown__item--large {
428
- padding: 10px 20px 10px 26px;
429
- line-height: 26px;
430
- font-size: var(--px-font-size-large);
431
- }
432
- .px-dropdown__menu .px-dropdown__item--large::before {
433
- left: 10px;
434
- width: 8px;
435
- height: 12px;
436
- clip-path: polygon(
437
- 0 0, 2px 0,
438
- 2px 2px, 4px 2px,
439
- 4px 4px, 6px 4px,
440
- 6px 6px, 8px 6px,
441
- 8px 6px, 6px 6px,
442
- 6px 8px, 4px 8px,
443
- 4px 10px, 2px 10px,
444
- 2px 12px, 0 12px
445
- );
446
- }
447
- .px-dropdown__menu .px-dropdown__item--small {
448
- padding: 5px 12px 5px 18px;
449
- line-height: 18px;
450
- font-size: var(--px-font-size-small);
451
- }
452
- .px-dropdown__menu .px-dropdown__item--small::before {
453
- left: 6px;
454
- width: 4px;
455
- height: 6px;
456
- }
457
- /* Divider - Pixel-dashed gradient line */
458
- .px-dropdown__menu .divided-placeholder {
459
- margin: 4px 6px;
460
- height: 2px;
461
- background-image: repeating-linear-gradient(
462
- to right,
463
- var(--px-dropdown-menuItem-divided-color) 0px,
464
- var(--px-dropdown-menuItem-divided-color) 6px,
465
- transparent 6px,
466
- transparent 12px
467
- );
468
- }
469
- .px-dropdown .px-button-group > :last-child {
470
- padding: 5px 7px;
471
- }
1
+ .px-tooltip[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-bg-color);--px-tooltip-font-size:var(--px-font-size-base);--px-tooltip-border-color:var(--px-border-color-dark);--px-tooltip-padding:10px 14px;--px-tooltip-shadow-color:var(--px-shadow-color);display:inline-block}.px-tooltip .fade-enter-active[data-v-9e16dfe4],.px-tooltip .fade-leave-active[data-v-9e16dfe4]{transition:none}.px-tooltip .fade-enter-from[data-v-9e16dfe4],.px-tooltip .fade-leave-to[data-v-9e16dfe4]{opacity:0}.px-tooltip .px-tooltip__popper[data-v-9e16dfe4]{padding:var(--px-tooltip-padding);color:var(--px-text-color-primary);line-height:1.5;font-size:var(--px-tooltip-font-size);font-family:var(--px-font-family);word-break:break-all;box-sizing:border-box;z-index:1000;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-tooltip-shadow-color));background:0 0;border:none;position:relative}.px-tooltip .px-tooltip__popper[data-v-9e16dfe4]:before{content:"";background:var(--px-tooltip-border-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;position:absolute;inset:0}.px-tooltip .px-tooltip__popper[data-v-9e16dfe4]:after{content:"";background:var(--px-tooltip-bg-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;position:absolute;inset:2px;box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #00000014}.px-tooltip .px-tooltip__popper .px-tooltip__arrow[data-v-9e16dfe4]{background:var(--px-tooltip-border-color);z-index:1;position:absolute}.px-tooltip .px-tooltip__popper[data-popper-placement^=top] .px-tooltip__arrow[data-v-9e16dfe4]{clip-path:polygon(0 0,10px 0,10px 2px,8px 2px,8px 4px,6px 4px,6px 6px,4px 6px,4px 4px,2px 4px,2px 2px,0 2px);width:10px;height:6px;bottom:-6px}.px-tooltip .px-tooltip__popper[data-popper-placement^=bottom] .px-tooltip__arrow[data-v-9e16dfe4]{clip-path:polygon(4px 0,6px 0,6px 2px,8px 2px,8px 4px,10px 4px,10px 6px,0 6px,0 4px,2px 4px,2px 2px,4px 2px);width:10px;height:6px;top:-6px}.px-tooltip .px-tooltip__popper[data-popper-placement^=left] .px-tooltip__arrow[data-v-9e16dfe4]{clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 6px,4px 6px,4px 8px,2px 8px,2px 10px,0 10px);width:6px;height:10px;right:-6px}.px-tooltip .px-tooltip__popper[data-popper-placement^=right] .px-tooltip__arrow[data-v-9e16dfe4]{clip-path:polygon(6px 0,6px 10px,4px 10px,4px 8px,2px 8px,2px 6px,0 6px,0 4px,2px 4px,2px 2px,4px 2px,4px 0);width:6px;height:10px;left:-6px}.px-tooltip--dark .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-text-color-primary);--px-tooltip-border-color:var(--px-text-color-primary);--px-tooltip-shadow-color:#0006;color:var(--px-bg-color)}.px-tooltip--dark .px-tooltip__popper[data-v-9e16dfe4]:after{box-shadow:inset 2px 2px #ffffff26,inset -2px -2px #0003}.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-bg-color);--px-tooltip-border-color:var(--px-border-color);color:var(--px-text-color-primary)}.px-tooltip--primary .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-primary);--px-tooltip-border-color:var(--px-color-primary-dark);--px-tooltip-shadow-color:var(--px-color-primary-dark);color:#fff}.px-tooltip--primary.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-primary-light-9);--px-tooltip-border-color:var(--px-color-primary);color:var(--px-color-primary)}.px-tooltip--success .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-success);--px-tooltip-border-color:var(--px-color-success-dark);--px-tooltip-shadow-color:var(--px-color-success-dark);color:#fff}.px-tooltip--success.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-success-light-9);--px-tooltip-border-color:var(--px-color-success);color:var(--px-color-success)}.px-tooltip--info .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-info);--px-tooltip-border-color:var(--px-color-info-dark);--px-tooltip-shadow-color:var(--px-color-info-dark);color:#fff}.px-tooltip--info.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-info-light-9);--px-tooltip-border-color:var(--px-color-info);color:var(--px-color-info)}.px-tooltip--warning .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-warning);--px-tooltip-border-color:var(--px-color-warning-dark);--px-tooltip-shadow-color:var(--px-color-warning-dark);color:#fff}.px-tooltip--warning.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-warning-light-9);--px-tooltip-border-color:var(--px-color-warning);color:var(--px-color-warning)}.px-tooltip--danger .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-danger);--px-tooltip-border-color:var(--px-color-danger-dark);--px-tooltip-shadow-color:var(--px-color-danger-dark);color:#fff}.px-tooltip--danger.px-tooltip--light .px-tooltip__popper[data-v-9e16dfe4]{--px-tooltip-bg-color:var(--px-color-danger-light-9);--px-tooltip-border-color:var(--px-color-danger);color:var(--px-color-danger)}.px-dropdown .px-dropdown__menu{--px-dropdown-menuItem-hover-fill:var(--px-color-primary);--px-dropdown-menuItem-hover-color:#fff;--px-dropdown-menuItem-disabled-color:var(--px-text-color-disabled);--px-dropdown-menuItem-divided-color:var(--px-border-color-lighter);--px-dropdown-shadow-color:var(--px-shadow-color-dark);--px-dropdown-border-color:var(--px-border-color);--px-dropdown-bg-color:var(--px-bg-color);--px-dropdown-inset-highlight:inset 2px 2px 0 0 #fff9;--px-dropdown-inset-shadow:inset -2px -2px 0 0 #00000040}.px-dropdown{font-family:var(--px-font-family);outline:none;display:inline-block}.px-dropdown .px-tooltip{--px-tooltip-padding:6px 4px;--px-tooltip-border-color:transparent;--px-tooltip-shadow-color:transparent;--px-shadow-offset-x:0px;--px-shadow-offset-y:0px}.px-dropdown .px-tooltip .px-tooltip__popper{filter:none}.px-dropdown .px-tooltip .px-tooltip__popper:before{display:none}.px-dropdown .px-tooltip .px-tooltip__popper:after{box-shadow:inset 2px 2px #fff9,inset -2px -2px #00000026}.px-dropdown.is-disabled>*{color:var(--px-text-color-placeholder)!important;cursor:not-allowed!important}.px-dropdown__menu{background:var(--px-dropdown-bg-color);outline:none;margin:0;padding:4px 0;list-style-type:none;position:relative}.px-dropdown__menu::-webkit-scrollbar{width:10px}.px-dropdown__menu::-webkit-scrollbar-track{background:var(--px-fill-color-light);border-left:2px solid var(--px-dropdown-border-color)}.px-dropdown__menu::-webkit-scrollbar-thumb{background:var(--px-fill-color-darker,var(--px-border-color));border:2px solid var(--px-dropdown-border-color)}.px-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--px-dropdown-menuItem-hover-fill)}.px-dropdown__menu .px-dropdown__item{white-space:nowrap;line-height:22px;font-size:var(--px-font-size-base);font-family:var(--px-font-family);color:var(--px-text-color-primary);cursor:pointer;z-index:1;outline:none;align-items:center;margin:0;padding:8px 16px 8px 22px;list-style:none;transition:none;display:flex;position:relative}.px-dropdown__menu .px-dropdown__item .px-dropdown__item-icon{font-size:var(--px-font-size-base);flex-shrink:0;align-items:center;width:16px;margin-right:8px;display:flex}.px-dropdown__menu .px-dropdown__item:before{content:"";background:var(--px-dropdown-menuItem-hover-color);clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 4px,4px 4px,4px 6px,2px 6px,2px 8px,0 8px);opacity:0;z-index:2;width:6px;height:8px;position:absolute;top:50%;left:8px;transform:translateY(-50%)}.px-dropdown__menu .px-dropdown__item:after{content:"";z-index:-1;background:0 0;position:absolute;inset:0}.px-dropdown__menu .px-dropdown__item:hover,.px-dropdown__menu .px-dropdown__item:focus{color:var(--px-dropdown-menuItem-hover-color)}.px-dropdown__menu .px-dropdown__item:hover:before,.px-dropdown__menu .px-dropdown__item:focus:before{opacity:1}.px-dropdown__menu .px-dropdown__item:hover:after,.px-dropdown__menu .px-dropdown__item:focus:after{background-color:var(--px-dropdown-menuItem-hover-fill);box-shadow:var(--px-dropdown-inset-highlight), var(--px-dropdown-inset-shadow)}.px-dropdown__menu .px-dropdown__item:active:not(.is-disabled):after{box-shadow:var(--px-dropdown-inset-shadow), var(--px-dropdown-inset-highlight)}.px-dropdown__menu .px-dropdown__item.is-disabled{color:var(--px-dropdown-menuItem-disabled-color);cursor:not-allowed;opacity:.55}.px-dropdown__menu .px-dropdown__item.is-disabled:before{opacity:0!important}.px-dropdown__menu .px-dropdown__item.is-disabled:hover,.px-dropdown__menu .px-dropdown__item.is-disabled:focus{color:var(--px-dropdown-menuItem-disabled-color)}.px-dropdown__menu .px-dropdown__item.is-disabled:hover:after,.px-dropdown__menu .px-dropdown__item.is-disabled:focus:after{box-shadow:none;background-color:#0000}.px-dropdown__menu .px-dropdown__item:first-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% 100%,0 100%);top:2px}.px-dropdown__menu .px-dropdown__item:last-child:after{clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));bottom:2px}.px-dropdown__menu .px-dropdown__item:first-child:last-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));top:2px;bottom:2px}.px-dropdown__menu .px-dropdown__item--large{line-height:26px;font-size:var(--px-font-size-large);padding:10px 20px 10px 26px}.px-dropdown__menu .px-dropdown__item--large:before{clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 6px,8px 6px,8px 6px,6px 6px,6px 8px,4px 8px,4px 10px,2px 10px,2px 12px,0 12px);width:8px;height:12px;left:10px}.px-dropdown__menu .px-dropdown__item--small{line-height:18px;font-size:var(--px-font-size-small);padding:5px 12px 5px 18px}.px-dropdown__menu .px-dropdown__item--small:before{width:4px;height:6px;left:6px}.px-dropdown__menu .divided-placeholder{background-image:repeating-linear-gradient(to right, var(--px-dropdown-menuItem-divided-color) 0px, var(--px-dropdown-menuItem-divided-color) 6px, transparent 6px, transparent 12px);height:2px;margin:4px 6px}.px-dropdown .px-button-group>:last-child{padding:5px 7px}