sakana-element 2.2.0 → 2.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 (130) hide show
  1. package/README.md +95 -22
  2. package/dist/es/{Alert-C76ZWSVk.js → Alert-BwTsp4X3.js} +2 -2
  3. package/dist/es/Avatar-CJu6JYV3.js +9 -0
  4. package/dist/es/{Badge-CoFWwBwv.js → Badge-BmxZXX8k.js} +2 -2
  5. package/dist/es/{Breadcrumb-BtrwTVKW.js → Breadcrumb-BP8MSklj.js} +2 -2
  6. package/dist/es/{Button-S_31-UWJ.js → Button-BJHtN7gh.js} +2 -2
  7. package/dist/es/{Card-DcW6nHYD.js → Card-DJHkCmsz.js} +2 -2
  8. package/dist/es/Checkbox-DX8L3fyp.js +51 -0
  9. package/dist/es/{Collapse-DsS7M-m3.js → Collapse-Ir3V9CuO.js} +2 -2
  10. package/dist/es/{ConfigProvider-BgIewHXP.js → ConfigProvider-CsbSqwwi.js} +1 -1
  11. package/dist/es/Divider-C7PtODSK.js +9 -0
  12. package/dist/es/Drawer-C2eVmvUp.js +40 -0
  13. package/dist/es/Dropdown-CVg_c2fB.js +104 -0
  14. package/dist/es/{FileInput-BQ59woas.js → FileInput-BE26BmXm.js} +3 -3
  15. package/dist/es/Form-7lZt5ehf.js +122 -0
  16. package/dist/es/{Icon-DpJyuj7c.js → Icon-BLDDdSU-.js} +1 -1
  17. package/dist/es/Indicator-B-en-MgG.js +9 -0
  18. package/dist/es/{Input-CiE4bPJN.js → Input-C5HuVehE.js} +6 -6
  19. package/dist/es/{Link-B9B2APZq.js → Link-Av9RdcFv.js} +1 -1
  20. package/dist/es/{Loading-BW99pE5N.js → Loading-CBNDUWQd.js} +12 -12
  21. package/dist/es/Message-DgnyyuXn.js +152 -0
  22. package/dist/es/Notification-LYRXnVAf.js +69 -0
  23. package/dist/es/{Overlay-BRDSWspM.js → Overlay-CpvMhnuU.js} +1 -1
  24. package/dist/es/Pixelate-BPypBgJU.js +67 -0
  25. package/dist/es/Popconfirm-DvxFdLrw.js +23 -0
  26. package/dist/es/Progress-Bc5INMhJ.js +12 -0
  27. package/dist/es/Radio-263_rtRl.js +33 -0
  28. package/dist/es/{Select-Dwqv8isB.js → Select-7ZxUCS8z.js} +13 -13
  29. package/dist/es/{Switch-B1Gnv1tB.js → Switch-DiCsMJT3.js} +3 -3
  30. package/dist/es/Table-BvA_xzDe.js +10 -0
  31. package/dist/es/Tooltip-J3ji6weH.js +74 -0
  32. package/dist/es/hooks-BqobYUzS.js +171 -0
  33. package/dist/es/index.js +90 -70
  34. package/dist/{theme → es/theme}/Avatar.css +13 -43
  35. package/dist/{theme → es/theme}/Breadcrumb.css +46 -4
  36. package/dist/es/theme/Card.css +347 -0
  37. package/dist/es/theme/Checkbox.css +484 -0
  38. package/dist/es/theme/Divider.css +111 -0
  39. package/dist/es/theme/Drawer.css +206 -0
  40. package/dist/es/theme/Dropdown.css +471 -0
  41. package/dist/es/theme/Indicator.css +159 -0
  42. package/dist/{theme → es/theme}/Input.css +1 -0
  43. package/dist/{theme → es/theme}/Link.css +22 -3
  44. package/dist/{theme → es/theme}/Loading.css +50 -12
  45. package/dist/{theme → es/theme}/Message.css +249 -40
  46. package/dist/es/theme/Notification.css +316 -0
  47. package/dist/es/theme/Popconfirm.css +46 -0
  48. package/dist/es/theme/Progress.css +278 -0
  49. package/dist/es/theme/Radio.css +426 -0
  50. package/dist/es/theme/Table.css +680 -0
  51. package/dist/es/theme/Tooltip.css +235 -0
  52. package/dist/es/utils-BS5vsvlM.js +101 -0
  53. package/dist/index.css +1 -1
  54. package/dist/types/components/Avatar/types.d.ts +0 -2
  55. package/dist/types/components/Checkbox/constants.d.ts +5 -0
  56. package/dist/types/components/Checkbox/index.d.ts +94 -0
  57. package/dist/types/components/Checkbox/types.d.ts +46 -0
  58. package/dist/types/components/Collapse/index.d.ts +5 -5
  59. package/dist/types/components/Divider/index.d.ts +30 -0
  60. package/dist/types/components/Divider/types.d.ts +10 -0
  61. package/dist/types/components/Drawer/constants.d.ts +1 -0
  62. package/dist/types/components/Drawer/index.d.ts +72 -0
  63. package/dist/types/components/Drawer/types.d.ts +20 -0
  64. package/dist/types/components/Dropdown/index.d.ts +11 -1
  65. package/dist/types/components/Dropdown/types.d.ts +3 -0
  66. package/dist/types/components/Dropdown/useDropdownKeyboard.d.ts +8 -0
  67. package/dist/types/components/FileInput/index.d.ts +5 -5
  68. package/dist/types/components/Indicator/constants.d.ts +2 -0
  69. package/dist/types/components/Indicator/index.d.ts +28 -0
  70. package/dist/types/components/Indicator/types.d.ts +10 -0
  71. package/dist/types/components/Input/index.d.ts +10 -10
  72. package/dist/types/components/Message/methods.d.ts +2 -0
  73. package/dist/types/components/Message/types.d.ts +7 -1
  74. package/dist/types/components/MessageBox/types.d.ts +14 -2
  75. package/dist/types/components/Notification/methods.d.ts +3 -0
  76. package/dist/types/components/Notification/types.d.ts +8 -2
  77. package/dist/types/components/Pixelate/constants.d.ts +2 -0
  78. package/dist/types/components/Pixelate/index.d.ts +71 -0
  79. package/dist/types/components/Pixelate/types.d.ts +23 -0
  80. package/dist/types/components/Popconfirm/index.d.ts +16 -7
  81. package/dist/types/components/Popconfirm/types.d.ts +2 -1
  82. package/dist/types/components/Progress/constants.d.ts +2 -0
  83. package/dist/types/components/Progress/index.d.ts +50 -0
  84. package/dist/types/components/Progress/types.d.ts +22 -0
  85. package/dist/types/components/Radio/constants.d.ts +5 -0
  86. package/dist/types/components/Radio/index.d.ts +88 -0
  87. package/dist/types/components/Radio/types.d.ts +43 -0
  88. package/dist/types/components/Select/index.d.ts +30 -21
  89. package/dist/types/components/Switch/index.d.ts +5 -5
  90. package/dist/types/components/Table/index.d.ts +27 -0
  91. package/dist/types/components/Table/types.d.ts +20 -0
  92. package/dist/types/components/Tooltip/index.d.ts +6 -0
  93. package/dist/types/components/Tooltip/types.d.ts +7 -0
  94. package/dist/types/components/index.d.ts +8 -0
  95. package/dist/types/hooks/index.d.ts +3 -1
  96. package/dist/types/hooks/useDraggable.d.ts +7 -0
  97. package/dist/types/hooks/useFocusTrap.d.ts +5 -0
  98. package/dist/types/utils/index.d.ts +1 -0
  99. package/dist/types/utils/instance-management.d.ts +40 -0
  100. package/dist/umd/index.css +1 -1
  101. package/dist/umd/index.css.gz +0 -0
  102. package/dist/umd/index.umd.cjs +4 -4
  103. package/dist/umd/index.umd.cjs.gz +0 -0
  104. package/package.json +59 -59
  105. package/dist/es/Avatar-CxsRW-wl.js +0 -9
  106. package/dist/es/Dropdown-GcomGMAI.js +0 -40
  107. package/dist/es/Form-j90EzLXU.js +0 -122
  108. package/dist/es/Message-DCNnTUje.js +0 -123
  109. package/dist/es/Notification-CBzY5904.js +0 -58
  110. package/dist/es/Popconfirm-DF6d2ORS.js +0 -23
  111. package/dist/es/Tooltip-k6gKnMyt.js +0 -74
  112. package/dist/es/hooks-BaG7l8K5.js +0 -116
  113. package/dist/es/utils-bsCscZfS.js +0 -84
  114. package/dist/theme/Card.css +0 -263
  115. package/dist/theme/Dropdown.css +0 -187
  116. package/dist/theme/Notification.css +0 -126
  117. package/dist/theme/Popconfirm.css +0 -30
  118. package/dist/theme/Tooltip.css +0 -111
  119. /package/dist/{theme → es/theme}/Alert.css +0 -0
  120. /package/dist/{theme → es/theme}/Badge.css +0 -0
  121. /package/dist/{theme → es/theme}/Button.css +0 -0
  122. /package/dist/{theme → es/theme}/Collapse.css +0 -0
  123. /package/dist/{theme → es/theme}/FileInput.css +0 -0
  124. /package/dist/{theme → es/theme}/Form.css +0 -0
  125. /package/dist/{theme → es/theme}/Icon.css +0 -0
  126. /package/dist/{theme → es/theme}/Overlay.css +0 -0
  127. /package/dist/{theme → es/theme}/Select.css +0 -0
  128. /package/dist/{theme → es/theme}/Switch.css +0 -0
  129. /package/dist/{theme → es/theme}/fonts/zpix.woff2 +0 -0
  130. /package/dist/{theme → es/theme}/index.css +0 -0
package/dist/{theme → es/theme}/Message.css RENAMED
@@ -9,7 +9,11 @@
9
9
  --px-message-close-icon-color: var(--px-text-color-secondary);
10
10
  --px-message-close-hover-color: var(--px-text-color-primary);
11
11
  --px-message-icon-size: 16px;
12
- --px-message-icon-margin: 10px;
12
+ --px-message-icon-margin: 10px;
13
+
14
+ /* Beveled inset for 3D raised-panel depth */
15
+ --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
16
+ --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
13
17
  }
14
18
  /* Base Message Styles - Pixel Game Notification */
15
19
  .px-message {
@@ -61,6 +65,7 @@
61
65
  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%,
62
66
  4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
63
67
  );
68
+ box-shadow: var(--px-message-inset-highlight), var(--px-message-inset-shadow);
64
69
  z-index: -1;
65
70
  }
66
71
  /* Icon styling */
@@ -104,6 +109,13 @@
104
109
  .px-message .px-message__close .px-icon:active {
105
110
  transform: translate(1px, 1px);
106
111
  }
112
+ /* Map error type to danger color palette so @each loops handle both */
113
+ .px-message--error {
114
+ --px-color-error: var(--px-color-danger);
115
+ --px-color-error-dark: var(--px-color-danger-dark);
116
+ --px-color-error-light-5: var(--px-color-danger-light-5);
117
+ --px-color-error-light-9: var(--px-color-danger-light-9);
118
+ }
107
119
  /* Type variants with pixel styling */
108
120
  .px-message--info {
109
121
  --px-message-bg-color: var(--px-color-info-light-9);
@@ -152,19 +164,122 @@
152
164
  }
153
165
  .px-message--danger .px-message__close .px-icon:hover {
154
166
  color: var(--px-color-danger-dark);
155
- }
156
- /* Error variant (alias for danger) */
167
+ }
157
168
  .px-message--error {
158
- --px-message-bg-color: var(--px-color-danger-light-9);
159
- --px-message-border-color: var(--px-color-danger);
160
- --px-message-text-color: var(--px-color-danger-dark);
161
- --px-message-shadow-color: var(--px-color-danger-dark);
169
+ --px-message-bg-color: var(--px-color-error-light-9);
170
+ --px-message-border-color: var(--px-color-error);
171
+ --px-message-text-color: var(--px-color-error-dark);
172
+ --px-message-shadow-color: var(--px-color-error-dark);
162
173
  }
163
174
  .px-message--error .px-message__close .px-icon {
164
- color: var(--px-color-danger);
175
+ color: var(--px-color-error);
165
176
  }
166
177
  .px-message--error .px-message__close .px-icon:hover {
167
- color: var(--px-color-danger-dark);
178
+ color: var(--px-color-error-dark);
179
+ }
180
+ /* ─── Plain variant ─── */
181
+ .px-message.is-plain {
182
+ --px-message-bg-color: var(--px-fill-color-blank);
183
+ --px-message-border-color: var(--px-border-color-light);
184
+ --px-message-shadow-color: var(--px-border-color-light);
185
+ }
186
+ .px-message--info.is-plain {
187
+ --px-message-bg-color: var(--px-color-info-light-9);
188
+ --px-message-border-color: var(--px-color-info-light-5, var(--px-color-info));
189
+ --px-message-text-color: var(--px-color-info);
190
+ --px-message-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
191
+ }
192
+ .px-message--success.is-plain {
193
+ --px-message-bg-color: var(--px-color-success-light-9);
194
+ --px-message-border-color: var(--px-color-success-light-5, var(--px-color-success));
195
+ --px-message-text-color: var(--px-color-success);
196
+ --px-message-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
197
+ }
198
+ .px-message--warning.is-plain {
199
+ --px-message-bg-color: var(--px-color-warning-light-9);
200
+ --px-message-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
201
+ --px-message-text-color: var(--px-color-warning);
202
+ --px-message-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
203
+ }
204
+ .px-message--danger.is-plain {
205
+ --px-message-bg-color: var(--px-color-danger-light-9);
206
+ --px-message-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
207
+ --px-message-text-color: var(--px-color-danger);
208
+ --px-message-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
209
+ }
210
+ .px-message--error.is-plain {
211
+ --px-message-bg-color: var(--px-color-error-light-9);
212
+ --px-message-border-color: var(--px-color-error-light-5, var(--px-color-error));
213
+ --px-message-text-color: var(--px-color-error);
214
+ --px-message-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
215
+ }
216
+ /* ─── Ghost variant ─── */
217
+ .px-message.is-ghost {
218
+ --px-message-bg-color: var(--px-fill-color-blank);
219
+ --px-message-shadow-color: transparent;
220
+ filter: none;
221
+ }
222
+ .px-message--info.is-ghost {
223
+ --px-message-bg-color: var(--px-fill-color-blank);
224
+ --px-message-border-color: var(--px-color-info);
225
+ --px-message-text-color: var(--px-color-info);
226
+ --px-message-shadow-color: transparent;
227
+ filter: none;
228
+ }
229
+ .px-message--success.is-ghost {
230
+ --px-message-bg-color: var(--px-fill-color-blank);
231
+ --px-message-border-color: var(--px-color-success);
232
+ --px-message-text-color: var(--px-color-success);
233
+ --px-message-shadow-color: transparent;
234
+ filter: none;
235
+ }
236
+ .px-message--warning.is-ghost {
237
+ --px-message-bg-color: var(--px-fill-color-blank);
238
+ --px-message-border-color: var(--px-color-warning);
239
+ --px-message-text-color: var(--px-color-warning);
240
+ --px-message-shadow-color: transparent;
241
+ filter: none;
242
+ }
243
+ .px-message--danger.is-ghost {
244
+ --px-message-bg-color: var(--px-fill-color-blank);
245
+ --px-message-border-color: var(--px-color-danger);
246
+ --px-message-text-color: var(--px-color-danger);
247
+ --px-message-shadow-color: transparent;
248
+ filter: none;
249
+ }
250
+ .px-message--error.is-ghost {
251
+ --px-message-bg-color: var(--px-fill-color-blank);
252
+ --px-message-border-color: var(--px-color-error);
253
+ --px-message-text-color: var(--px-color-error);
254
+ --px-message-shadow-color: transparent;
255
+ filter: none;
256
+ }
257
+ /* ─── Timer bar ─── */
258
+ .px-message__timer {
259
+ position: absolute;
260
+ bottom: 2px;
261
+ left: 4px;
262
+ right: 4px;
263
+ height: 2px;
264
+ background: var(--px-message-text-color);
265
+ opacity: 0.5;
266
+ animation: px-message-timer linear forwards;
267
+ transform-origin: left;
268
+ }
269
+ /* Pause timer bar animation when message is hovered (matches JS timer pause) */
270
+ .px-message:hover .px-message__timer {
271
+ animation-play-state: paused;
272
+ }
273
+ @keyframes px-message-timer {
274
+ 0% { transform: scaleX(1);
275
+ }
276
+ 100% { transform: scaleX(0);
277
+ }
278
+ }
279
+ /* Dark mode — invert bevel highlights */
280
+ .px-dark .px-message {
281
+ --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
282
+ --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
168
283
  }
169
284
  /* Animation - Pixel style instant appear/disappear */
170
285
  .px-message.fade-up-enter-from,
@@ -187,7 +302,12 @@
187
302
  --px-message-box-font-line-height: 1.5;
188
303
  --px-message-box-close-size: var(--px-font-size-base);
189
304
  --px-message-box-border-color: var(--px-border-color);
190
- --px-message-box-shadow-color: var(--px-shadow-color);
305
+ --px-message-box-shadow-color: var(--px-shadow-color);
306
+ --px-message-box-divider-color: var(--px-border-color-light);
307
+
308
+ /* Beveled inset for 3D raised-panel depth */
309
+ --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
310
+ --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
191
311
  }
192
312
  /* Overlay */
193
313
  .px-overlay-message-box {
@@ -216,7 +336,6 @@
216
336
  width: 100%;
217
337
  padding: var(--px-message-box-padding-primary);
218
338
  vertical-align: middle;
219
- background-color: var(--px-bg-color);
220
339
  font-size: var(--px-message-box-font-size);
221
340
  font-family: var(--px-font-family);
222
341
  text-align: left;
@@ -225,14 +344,45 @@
225
344
  box-sizing: border-box;
226
345
  overflow-wrap: break-word;
227
346
 
228
- /* Pixel-style border */
229
- border: var(--px-border-width) solid var(--px-message-box-border-color);
347
+ /* Remove traditional styling — pseudo-elements handle visuals */
348
+ background: transparent;
349
+ border: none;
230
350
  border-radius: 0;
231
351
 
232
- /* Pixel shadow */
233
- box-shadow:
234
- var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0 0 var(--px-message-box-shadow-color),
235
- var(--px-box-shadow-inset-light);
352
+ /* Pixel shadow via drop-shadow (respects clip-path shape) */
353
+ filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-box-shadow-color));
354
+
355
+ /* No smooth transitions for pixel feel */
356
+ transition: none;
357
+ }
358
+ /* Border layer — 3-step staircase clip (8px corners) */
359
+ .px-message-box::before {
360
+ content: '';
361
+ position: absolute;
362
+ inset: 0;
363
+ background: var(--px-message-box-border-color);
364
+ clip-path: polygon(
365
+ 0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
366
+ calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 8px, 100% 8px,
367
+ 100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
368
+ 8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
369
+ );
370
+ z-index: 0;
371
+ }
372
+ /* Fill layer — 4px inset, 2-step staircase chamfer, beveled */
373
+ .px-message-box::after {
374
+ content: '';
375
+ position: absolute;
376
+ inset: 4px;
377
+ background: var(--px-bg-color);
378
+ clip-path: polygon(
379
+ 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
380
+ calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
381
+ 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%,
382
+ 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
383
+ );
384
+ box-shadow: var(--px-message-box-inset-highlight), var(--px-message-box-inset-shadow);
385
+ z-index: 0;
236
386
  }
237
387
  .px-message-box:focus {
238
388
  outline: none !important;
@@ -246,6 +396,11 @@
246
396
  .px-message-box.is-center .px-message-box__footer,
247
397
  .px-message-box.is-center .px-message-box__content {
248
398
  justify-content: center;
399
+ }
400
+ /* Draggable cursor */
401
+ .px-message-box.is-draggable .px-message-box__header {
402
+ cursor: move;
403
+ user-select: none;
249
404
  }
250
405
  .px-message-box :deep(.px-icon).px-icon-info {
251
406
  color: var(--px-color-info) !important;
@@ -263,29 +418,47 @@
263
418
  color: var(--px-color-danger) !important;
264
419
  }
265
420
  .px-message-box .px-message-box__header {
266
- padding-bottom: var(--px-message-box-padding-primary);
267
- border-bottom: var(--px-border-width-thin) dashed var(--px-message-box-border-color);
421
+ position: relative;
422
+ z-index: 1;
423
+ display: flex;
424
+ align-items: flex-start;
425
+ justify-content: space-between;
426
+ padding-bottom: var(--px-message-box-padding-primary);
268
427
  }
269
428
  .px-message-box .px-message-box__header .px-message-box__title {
429
+ flex: 1;
270
430
  color: var(--px-message-box-title-color);
271
431
  font-size: var(--px-message-box-font-size);
272
432
  font-family: var(--px-font-family);
273
433
  font-weight: 500;
274
434
  line-height: var(--px-message-box-font-line-height);
435
+ }
436
+ /* Pixel-dashed divider at bottom */
437
+ .px-message-box .px-message-box__header::after {
438
+ content: "";
439
+ position: absolute;
440
+ bottom: 0;
441
+ left: 0;
442
+ right: 0;
443
+ height: 2px;
444
+ background-image: repeating-linear-gradient(
445
+ to right,
446
+ var(--px-message-box-divider-color) 0px,
447
+ var(--px-message-box-divider-color) 6px,
448
+ transparent 6px,
449
+ transparent 12px
450
+ );
275
451
  }
276
452
  .px-message-box .px-message-box__header .px-message-box__header-btn {
277
- position: absolute;
278
- top: 8px;
279
- right: 8px;
280
- padding: 4px;
281
- width: 28px;
282
- height: 28px;
283
- border: var(--px-border-width-thin) solid var(--px-border-color);
453
+ flex-shrink: 0;
454
+ margin-left: 8px;
455
+ padding: 0;
456
+ border: none;
284
457
  outline: none;
285
- background: var(--px-fill-color-blank);
458
+ background: transparent;
286
459
  font-size: var(--px-message-box-close-size);
287
460
  cursor: pointer;
288
- box-shadow: 2px 2px 0 0 var(--px-shadow-color);
461
+ z-index: 1;
289
462
  transition: none;
290
463
  display: flex;
291
464
  align-items: center;
@@ -295,22 +468,20 @@
295
468
  color: var(--px-text-color-secondary);
296
469
  font-size: inherit;
297
470
  }
298
- .px-message-box .px-message-box__header .px-message-box__header-btn:hover {
299
- background: var(--px-fill-color-light);
300
- transform: translate(-1px, -1px);
301
- box-shadow: 3px 3px 0 0 var(--px-shadow-color);
471
+ .px-message-box .px-message-box__header .px-message-box__header-btn .px-icon {
472
+ cursor: pointer;
473
+ transition: none;
302
474
  }
303
- .px-message-box .px-message-box__header .px-message-box__header-btn:hover i {
304
- color: var(--px-color-danger);
475
+ .px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:hover {
476
+ color: var(--px-color-danger);
477
+ transform: translate(-1px, -1px);
305
478
  }
306
- .px-message-box .px-message-box__header .px-message-box__header-btn:active {
307
- transform: translate(1px, 1px);
308
- box-shadow: 1px 1px 0 0 var(--px-shadow-color);
309
- }
310
- .px-message-box .px-message-box__header.show-close {
311
- padding-right: calc(var(--px-message-box-padding-primary) + 32px);
479
+ .px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:active {
480
+ transform: translate(1px, 1px);
312
481
  }
313
482
  .px-message-box .px-message-box__content {
483
+ position: relative;
484
+ z-index: 1;
314
485
  display: flex;
315
486
  align-items: center;
316
487
  gap: 12px;
@@ -327,9 +498,21 @@
327
498
  line-height: var(--px-message-box-font-line-height);
328
499
  }
329
500
  .px-message-box .px-message-box__input {
501
+ position: relative;
502
+ z-index: 1;
330
503
  padding-top: 12px;
331
504
  }
505
+ .px-message-box .px-message-box__error {
506
+ position: relative;
507
+ z-index: 1;
508
+ color: var(--px-color-danger);
509
+ font-size: 12px;
510
+ font-family: var(--px-font-family);
511
+ margin-top: 4px;
512
+ }
332
513
  .px-message-box .px-message-box__footer {
514
+ position: relative;
515
+ z-index: 1;
333
516
  display: flex;
334
517
  flex-wrap: wrap;
335
518
  justify-content: flex-end;
@@ -337,6 +520,32 @@
337
520
  padding-top: var(--px-message-box-padding-primary);
338
521
  gap: 8px;
339
522
  }
523
+ /* Type-colored borders */
524
+ .px-message-box.px-message-box--info {
525
+ --px-message-box-border-color: var(--px-color-info);
526
+ --px-message-box-shadow-color: var(--px-color-info-dark);
527
+ --px-message-box-divider-color: var(--px-color-info-light-5, var(--px-color-info));
528
+ }
529
+ .px-message-box.px-message-box--success {
530
+ --px-message-box-border-color: var(--px-color-success);
531
+ --px-message-box-shadow-color: var(--px-color-success-dark);
532
+ --px-message-box-divider-color: var(--px-color-success-light-5, var(--px-color-success));
533
+ }
534
+ .px-message-box.px-message-box--warning {
535
+ --px-message-box-border-color: var(--px-color-warning);
536
+ --px-message-box-shadow-color: var(--px-color-warning-dark);
537
+ --px-message-box-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
538
+ }
539
+ .px-message-box.px-message-box--danger {
540
+ --px-message-box-border-color: var(--px-color-danger);
541
+ --px-message-box-shadow-color: var(--px-color-danger-dark);
542
+ --px-message-box-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
543
+ }
544
+ /* Dark mode — invert bevel highlights */
545
+ .px-dark .px-message-box {
546
+ --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
547
+ --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
548
+ }
340
549
  /* Animation */
341
550
  .fade-in-linear-enter-active .px-overlay-message-box {
342
551
  animation: msgbox-fade-in 0.15s steps(3);