sakana-element 2.1.4 → 2.2.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 (85) hide show
  1. package/README.md +9 -6
  2. package/dist/es/Avatar-CxsRW-wl.js +9 -0
  3. package/dist/es/Badge-CoFWwBwv.js +14 -0
  4. package/dist/es/Breadcrumb-BtrwTVKW.js +15 -0
  5. package/dist/es/{Button-fW_ZOLmT.js → Button-S_31-UWJ.js} +3 -3
  6. package/dist/es/Card-DcW6nHYD.js +16 -0
  7. package/dist/es/Collapse-DsS7M-m3.js +53 -0
  8. package/dist/es/ConfigProvider-BgIewHXP.js +44 -0
  9. package/dist/es/{Dropdown-49nf6F8P.js → Dropdown-GcomGMAI.js} +10 -10
  10. package/dist/es/FileInput-BQ59woas.js +33 -0
  11. package/dist/es/Form-j90EzLXU.js +122 -0
  12. package/dist/es/{Input-DBPpvf0Y.js → Input-CiE4bPJN.js} +4 -4
  13. package/dist/es/Link-B9B2APZq.js +11 -0
  14. package/dist/es/Loading-BW99pE5N.js +92 -0
  15. package/dist/es/Message-DCNnTUje.js +123 -0
  16. package/dist/es/{Notification-D4RYHV9o.js → Notification-CBzY5904.js} +14 -14
  17. package/dist/es/Popconfirm-DF6d2ORS.js +23 -0
  18. package/dist/es/Select-Dwqv8isB.js +133 -0
  19. package/dist/es/Switch-B1Gnv1tB.js +34 -0
  20. package/dist/es/{Tooltip-HWx_i2FA.js → Tooltip-k6gKnMyt.js} +3 -3
  21. package/dist/es/hooks-BaG7l8K5.js +116 -0
  22. package/dist/es/index.js +73 -63
  23. package/dist/index.css +1 -1
  24. package/dist/theme/Alert.css +1 -1
  25. package/dist/theme/Avatar.css +116 -0
  26. package/dist/theme/Badge.css +36 -30
  27. package/dist/theme/Breadcrumb.css +150 -0
  28. package/dist/theme/Button.css +216 -216
  29. package/dist/theme/Card.css +170 -19
  30. package/dist/theme/Collapse.css +214 -54
  31. package/dist/theme/FileInput.css +365 -0
  32. package/dist/theme/Form.css +65 -34
  33. package/dist/theme/Link.css +50 -0
  34. package/dist/theme/Loading.css +154 -4
  35. package/dist/theme/Message.css +7 -4
  36. package/dist/theme/Notification.css +21 -21
  37. package/dist/theme/Popconfirm.css +5 -5
  38. package/dist/theme/Select.css +78 -78
  39. package/dist/theme/index.css +1 -5
  40. package/dist/types/components/Avatar/index.d.ts +30 -0
  41. package/dist/types/components/Avatar/types.d.ts +10 -0
  42. package/dist/types/components/Badge/types.d.ts +1 -0
  43. package/dist/types/components/Breadcrumb/constants.d.ts +3 -0
  44. package/dist/types/components/Breadcrumb/index.d.ts +45 -0
  45. package/dist/types/components/Breadcrumb/types.d.ts +13 -0
  46. package/dist/types/components/Card/types.d.ts +6 -0
  47. package/dist/types/components/Collapse/constants.d.ts +3 -0
  48. package/dist/types/components/Collapse/index.d.ts +9 -3
  49. package/dist/types/components/Collapse/types.d.ts +12 -0
  50. package/dist/types/components/FileInput/constants.d.ts +3 -0
  51. package/dist/types/components/FileInput/index.d.ts +58 -0
  52. package/dist/types/components/FileInput/types.d.ts +24 -0
  53. package/dist/types/components/Form/types.d.ts +17 -7
  54. package/dist/types/components/Input/index.d.ts +5 -5
  55. package/dist/types/components/Link/index.d.ts +34 -0
  56. package/dist/types/components/Link/types.d.ts +10 -0
  57. package/dist/types/components/Loading/index.d.ts +25 -0
  58. package/dist/types/components/Loading/types.d.ts +9 -0
  59. package/dist/types/components/Message/types.d.ts +2 -2
  60. package/dist/types/components/MessageBox/types.d.ts +2 -2
  61. package/dist/types/components/Notification/index.d.ts +1 -1
  62. package/dist/types/components/Notification/methods.d.ts +3 -1
  63. package/dist/types/components/Notification/types.d.ts +2 -2
  64. package/dist/types/components/Select/constants.d.ts +2 -1
  65. package/dist/types/components/Select/index.d.ts +11 -11
  66. package/dist/types/components/Select/useKeyMap.d.ts +1 -1
  67. package/dist/types/components/index.d.ts +4 -0
  68. package/dist/types/hooks/vitest.setup.d.ts +4 -0
  69. package/dist/umd/index.css +1 -1
  70. package/dist/umd/index.css.gz +0 -0
  71. package/dist/umd/index.umd.cjs +5 -14
  72. package/dist/umd/index.umd.cjs.gz +0 -0
  73. package/package.json +59 -60
  74. package/dist/es/Badge-BG-vYP8Y.js +0 -13
  75. package/dist/es/Card-BCBnlVi_.js +0 -12
  76. package/dist/es/Collapse-B08VhCVq.js +0 -38
  77. package/dist/es/ConfigProvider-DZO1d5Eq.js +0 -44
  78. package/dist/es/Form-CGiTDSGI.js +0 -108
  79. package/dist/es/Loading-DlygqGOv.js +0 -88
  80. package/dist/es/Message-ganFfLeU.js +0 -123
  81. package/dist/es/Popconfirm-Cop44KwQ.js +0 -22
  82. package/dist/es/Select-TIoGsqKv.js +0 -133
  83. package/dist/es/Switch-CHjcLtHs.js +0 -34
  84. package/dist/es/hooks-CYdEHUVd.js +0 -105
  85. package/dist/theme/fonts/zpix.ttf +0 -0
package/dist/theme/Button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Button Group Variables */
2
- .px-button-group[data-v-938fe053] {
2
+ .px-button-group[data-v-0d682c9b] {
3
3
  --px-button-group-border-color: var(--px-border-color-lighter);
4
4
  }
5
5
  /* Button Base Variables */
6
- .px-button[data-v-938fe053] {
6
+ .px-button[data-v-0d682c9b] {
7
7
  --px-button-font-weight: var(--px-font-weight-primary);
8
8
  --px-button-border-color: var(--px-border-color);
9
9
  --px-button-bg-color: var(--px-fill-color-blank);
@@ -21,7 +21,7 @@
21
21
  --px-button-shadow-color: var(--px-shadow-color);
22
22
  }
23
23
  /* Base Button Styles - Pixel Game Aesthetic */
24
- .px-button[data-v-938fe053] {
24
+ .px-button[data-v-0d682c9b] {
25
25
  display: inline-flex;
26
26
  justify-content: center;
27
27
  align-items: center;
@@ -53,7 +53,7 @@
53
53
  transition: none;
54
54
  }
55
55
  /* Border layer — filled with border color, clipped to pixel shape */
56
- .px-button[data-v-938fe053]::before {
56
+ .px-button[data-v-0d682c9b]::before {
57
57
  content: '';
58
58
  position: absolute;
59
59
  inset: 0;
@@ -67,7 +67,7 @@
67
67
  z-index: -1;
68
68
  }
69
69
  /* Fill layer — inset by border width, filled with bg color */
70
- .px-button[data-v-938fe053]::after {
70
+ .px-button[data-v-0d682c9b]::after {
71
71
  content: '';
72
72
  position: absolute;
73
73
  inset: 2px;
@@ -80,114 +80,114 @@
80
80
  );
81
81
  z-index: -1;
82
82
  }
83
- .px-button + .px-button[data-v-938fe053] {
83
+ .px-button + .px-button[data-v-0d682c9b] {
84
84
  margin-left: 12px;
85
85
  }
86
86
  /* Hover - Lift effect */
87
- .px-button[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
87
+ .px-button[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
88
88
  color: var(--px-button-hover-text-color);
89
89
  transform: translate(-1px, -1px);
90
90
  filter: drop-shadow(4px 4px 0px var(--px-button-shadow-color));
91
91
  }
92
- .px-button[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::before {
92
+ .px-button[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::before {
93
93
  background: var(--px-button-hover-border-color);
94
94
  }
95
- .px-button[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::after {
95
+ .px-button[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::after {
96
96
  background: var(--px-button-hover-bg-color);
97
97
  }
98
98
  /* Active - Press down effect */
99
- .px-button[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
99
+ .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
100
100
  color: var(--px-button-active-text-color);
101
101
  transform: translate(1px, 1px);
102
102
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
103
103
  }
104
- .px-button[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::before {
104
+ .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::before {
105
105
  background: var(--px-button-active-border-color);
106
106
  }
107
- .px-button[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::after {
107
+ .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::after {
108
108
  background: var(--px-button-active-bg-color);
109
109
  }
110
110
  /* Focus outline */
111
- .px-button[data-v-938fe053]:focus-visible {
111
+ .px-button[data-v-0d682c9b]:focus-visible {
112
112
  outline: 2px dashed var(--px-color-primary);
113
113
  outline-offset: 2px;
114
114
  }
115
115
  /* Plain variant */
116
- .px-button.is-plain[data-v-938fe053] {
116
+ .px-button.is-plain[data-v-0d682c9b] {
117
117
  --px-button-bg-color: var(--px-fill-color-blank);
118
118
  --px-button-hover-text-color: var(--px-hover-bg-color);
119
119
  --px-button-hover-bg-color: var(--px-fill-color-light);
120
120
  --px-button-hover-border-color: var(--px-hover-border-color);
121
121
  }
122
122
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
123
- .px-button.is-dash[data-v-938fe053] {
123
+ .px-button.is-dash[data-v-0d682c9b] {
124
124
  border: 2px dashed var(--px-button-border-color);
125
125
  filter: none;
126
126
  isolation: isolate;
127
127
  --px-button-hover-text-color: var(--px-hover-bg-color);
128
128
  --px-button-hover-bg-color: var(--px-fill-color-light);
129
129
  }
130
- .px-button.is-dash[data-v-938fe053]::before {
130
+ .px-button.is-dash[data-v-0d682c9b]::before {
131
131
  display: none;
132
132
  }
133
- .px-button.is-dash[data-v-938fe053]::after {
133
+ .px-button.is-dash[data-v-0d682c9b]::after {
134
134
  clip-path: none;
135
135
  inset: 0;
136
136
  background: var(--px-button-bg-color);
137
137
  }
138
- .px-button.is-dash[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
138
+ .px-button.is-dash[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
139
139
  transform: none;
140
140
  filter: none;
141
141
  border-color: var(--px-button-hover-border-color);
142
142
  }
143
- .px-button.is-dash[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::after {
143
+ .px-button.is-dash[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::after {
144
144
  background: var(--px-button-hover-bg-color);
145
145
  }
146
- .px-button.is-dash[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
146
+ .px-button.is-dash[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
147
147
  transform: none;
148
148
  filter: none;
149
149
  border-color: var(--px-button-active-border-color);
150
150
  }
151
- .px-button.is-dash[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::after {
151
+ .px-button.is-dash[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::after {
152
152
  background: var(--px-button-active-bg-color);
153
153
  }
154
154
  /* Ghost variant - No border/background, subtle hover fill */
155
- .px-button.is-ghost[data-v-938fe053] {
155
+ .px-button.is-ghost[data-v-0d682c9b] {
156
156
  filter: none;
157
157
  isolation: isolate;
158
158
  --px-button-shadow-color: transparent;
159
159
  --px-button-hover-text-color: var(--px-hover-bg-color);
160
160
  --px-button-hover-bg-color: var(--px-fill-color-light);
161
161
  }
162
- .px-button.is-ghost[data-v-938fe053]::before {
162
+ .px-button.is-ghost[data-v-0d682c9b]::before {
163
163
  display: none;
164
164
  }
165
- .px-button.is-ghost[data-v-938fe053]::after {
165
+ .px-button.is-ghost[data-v-0d682c9b]::after {
166
166
  clip-path: none;
167
167
  inset: 0;
168
168
  background: transparent;
169
169
  }
170
- .px-button.is-ghost[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
170
+ .px-button.is-ghost[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
171
171
  transform: none;
172
172
  filter: none;
173
173
  color: var(--px-button-hover-text-color);
174
174
  }
175
- .px-button.is-ghost[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::after {
175
+ .px-button.is-ghost[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::after {
176
176
  background: var(--px-button-hover-bg-color);
177
177
  }
178
- .px-button.is-ghost[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
178
+ .px-button.is-ghost[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
179
179
  transform: none;
180
180
  filter: none;
181
181
  color: var(--px-button-active-text-color);
182
182
  }
183
- .px-button.is-ghost[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::after {
183
+ .px-button.is-ghost[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::after {
184
184
  background: var(--px-button-active-bg-color);
185
185
  }
186
- .px-button.is-ghost.is-loading[data-v-938fe053]::after, .px-button.is-ghost.is-disabled[data-v-938fe053]::after, .px-button.is-ghost.is-disabled[data-v-938fe053]:hover::after, .px-button.is-ghost.is-disabled[data-v-938fe053]:focus::after, .px-button.is-ghost[disabled][data-v-938fe053]::after, .px-button.is-ghost[disabled][data-v-938fe053]:hover::after, .px-button.is-ghost[disabled][data-v-938fe053]:focus::after {
186
+ .px-button.is-ghost.is-loading[data-v-0d682c9b]::after, .px-button.is-ghost.is-disabled[data-v-0d682c9b]::after, .px-button.is-ghost.is-disabled[data-v-0d682c9b]:hover::after, .px-button.is-ghost.is-disabled[data-v-0d682c9b]:focus::after, .px-button.is-ghost[disabled][data-v-0d682c9b]::after, .px-button.is-ghost[disabled][data-v-0d682c9b]:hover::after, .px-button.is-ghost[disabled][data-v-0d682c9b]:focus::after {
187
187
  background: transparent;
188
188
  }
189
189
  /* Link variant - Underlined text, no border/background/shadow */
190
- .px-button.is-link[data-v-938fe053] {
190
+ .px-button.is-link[data-v-0d682c9b] {
191
191
  filter: none;
192
192
  --px-button-shadow-color: transparent;
193
193
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -195,85 +195,85 @@
195
195
  text-underline-offset: 3px;
196
196
  padding: 8px 4px;
197
197
  }
198
- .px-button.is-link[data-v-938fe053]::before {
198
+ .px-button.is-link[data-v-0d682c9b]::before {
199
199
  display: none;
200
200
  }
201
- .px-button.is-link[data-v-938fe053]::after {
201
+ .px-button.is-link[data-v-0d682c9b]::after {
202
202
  display: none;
203
203
  }
204
- .px-button.is-link[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
204
+ .px-button.is-link[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
205
205
  transform: none;
206
206
  filter: none;
207
207
  color: var(--px-button-hover-text-color);
208
208
  opacity: 0.8;
209
209
  }
210
- .px-button.is-link[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
210
+ .px-button.is-link[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
211
211
  transform: none;
212
212
  filter: none;
213
213
  color: var(--px-button-active-text-color);
214
214
  opacity: 0.6;
215
215
  }
216
- .px-button.is-link.is-loading[data-v-938fe053],
217
- .px-button.is-link.is-disabled[data-v-938fe053],
218
- .px-button.is-link.is-disabled[data-v-938fe053]:hover,
219
- .px-button.is-link.is-disabled[data-v-938fe053]:focus,
220
- .px-button.is-link[disabled][data-v-938fe053],
221
- .px-button.is-link[disabled][data-v-938fe053]:hover,
222
- .px-button.is-link[disabled][data-v-938fe053]:focus {
216
+ .px-button.is-link.is-loading[data-v-0d682c9b],
217
+ .px-button.is-link.is-disabled[data-v-0d682c9b],
218
+ .px-button.is-link.is-disabled[data-v-0d682c9b]:hover,
219
+ .px-button.is-link.is-disabled[data-v-0d682c9b]:focus,
220
+ .px-button.is-link[disabled][data-v-0d682c9b],
221
+ .px-button.is-link[disabled][data-v-0d682c9b]:hover,
222
+ .px-button.is-link[disabled][data-v-0d682c9b]:focus {
223
223
  filter: none;
224
224
  opacity: 0.4;
225
225
  }
226
- .px-button.is-link.is-loading[data-v-938fe053]::before, .px-button.is-link.is-disabled[data-v-938fe053]::before, .px-button.is-link.is-disabled[data-v-938fe053]:hover::before, .px-button.is-link.is-disabled[data-v-938fe053]:focus::before, .px-button.is-link[disabled][data-v-938fe053]::before, .px-button.is-link[disabled][data-v-938fe053]:hover::before, .px-button.is-link[disabled][data-v-938fe053]:focus::before {
226
+ .px-button.is-link.is-loading[data-v-0d682c9b]::before, .px-button.is-link.is-disabled[data-v-0d682c9b]::before, .px-button.is-link.is-disabled[data-v-0d682c9b]:hover::before, .px-button.is-link.is-disabled[data-v-0d682c9b]:focus::before, .px-button.is-link[disabled][data-v-0d682c9b]::before, .px-button.is-link[disabled][data-v-0d682c9b]:hover::before, .px-button.is-link[disabled][data-v-0d682c9b]:focus::before {
227
227
  display: none;
228
228
  }
229
- .px-button.is-link.is-loading[data-v-938fe053]::after, .px-button.is-link.is-disabled[data-v-938fe053]::after, .px-button.is-link.is-disabled[data-v-938fe053]:hover::after, .px-button.is-link.is-disabled[data-v-938fe053]:focus::after, .px-button.is-link[disabled][data-v-938fe053]::after, .px-button.is-link[disabled][data-v-938fe053]:hover::after, .px-button.is-link[disabled][data-v-938fe053]:focus::after {
229
+ .px-button.is-link.is-loading[data-v-0d682c9b]::after, .px-button.is-link.is-disabled[data-v-0d682c9b]::after, .px-button.is-link.is-disabled[data-v-0d682c9b]:hover::after, .px-button.is-link.is-disabled[data-v-0d682c9b]:focus::after, .px-button.is-link[disabled][data-v-0d682c9b]::after, .px-button.is-link[disabled][data-v-0d682c9b]:hover::after, .px-button.is-link[disabled][data-v-0d682c9b]:focus::after {
230
230
  display: none;
231
231
  }
232
232
  /* Block variant - Full-width button */
233
- .px-button.is-block[data-v-938fe053] {
233
+ .px-button.is-block[data-v-0d682c9b] {
234
234
  display: flex;
235
235
  width: 100%;
236
236
  margin-left: 0;
237
237
  }
238
238
  /* Responsive variant - Viewport-adaptive sizing */
239
- .px-button.is-responsive[data-v-938fe053] {
239
+ .px-button.is-responsive[data-v-0d682c9b] {
240
240
  height: 24px;
241
241
  padding: 4px 8px;
242
242
  font-size: var(--px-font-size-extra-small);
243
243
  }
244
244
  @media (min-width: 640px) {
245
- .px-button.is-responsive[data-v-938fe053] {
245
+ .px-button.is-responsive[data-v-0d682c9b] {
246
246
  height: 28px;
247
247
  padding: 4px 12px;
248
248
  font-size: var(--px-font-size-small)
249
249
  }
250
250
  }
251
251
  @media (min-width: 768px) {
252
- .px-button.is-responsive[data-v-938fe053] {
252
+ .px-button.is-responsive[data-v-0d682c9b] {
253
253
  height: 36px;
254
254
  padding: 8px 16px;
255
255
  font-size: var(--px-font-size-base)
256
256
  }
257
257
  }
258
258
  @media (min-width: 1024px) {
259
- .px-button.is-responsive[data-v-938fe053] {
259
+ .px-button.is-responsive[data-v-0d682c9b] {
260
260
  height: 44px;
261
261
  padding: 12px 24px;
262
262
  font-size: var(--px-font-size-large)
263
263
  }
264
264
  }
265
265
  @media (min-width: 1280px) {
266
- .px-button.is-responsive[data-v-938fe053] {
266
+ .px-button.is-responsive[data-v-0d682c9b] {
267
267
  height: 44px;
268
268
  padding: 12px 32px;
269
269
  font-size: var(--px-font-size-large)
270
270
  }
271
271
  }
272
272
  /* Round - Pixel-style rounded with 3-step staircase corners */
273
- .px-button.is-round[data-v-938fe053] {
273
+ .px-button.is-round[data-v-0d682c9b] {
274
274
  padding: 8px 20px;
275
275
  }
276
- .px-button.is-round[data-v-938fe053]::before, .px-button.is-round[data-v-938fe053]::after {
276
+ .px-button.is-round[data-v-0d682c9b]::before, .px-button.is-round[data-v-0d682c9b]::after {
277
277
  clip-path: polygon(
278
278
  0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
279
279
  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,
@@ -282,12 +282,12 @@
282
282
  );
283
283
  }
284
284
  /* Circle - Pixel circle approximation with 4-step staircase */
285
- .px-button.is-circle[data-v-938fe053] {
285
+ .px-button.is-circle[data-v-0d682c9b] {
286
286
  padding: 8px;
287
287
  width: 36px;
288
288
  height: 36px;
289
289
  }
290
- .px-button.is-circle[data-v-938fe053]::before, .px-button.is-circle[data-v-938fe053]::after {
290
+ .px-button.is-circle[data-v-0d682c9b]::before, .px-button.is-circle[data-v-0d682c9b]::after {
291
291
  clip-path: polygon(
292
292
  0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
293
293
  calc(100% - 10px) 0, calc(100% - 10px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 10px, 100% 10px,
@@ -296,32 +296,32 @@
296
296
  );
297
297
  }
298
298
  /* Disabled state */
299
- .px-button.is-loading[data-v-938fe053],
300
- .px-button.is-disabled[data-v-938fe053],
301
- .px-button.is-disabled[data-v-938fe053]:hover,
302
- .px-button.is-disabled[data-v-938fe053]:focus,
303
- .px-button[disabled][data-v-938fe053],
304
- .px-button[disabled][data-v-938fe053]:hover,
305
- .px-button[disabled][data-v-938fe053]:focus {
299
+ .px-button.is-loading[data-v-0d682c9b],
300
+ .px-button.is-disabled[data-v-0d682c9b],
301
+ .px-button.is-disabled[data-v-0d682c9b]:hover,
302
+ .px-button.is-disabled[data-v-0d682c9b]:focus,
303
+ .px-button[disabled][data-v-0d682c9b],
304
+ .px-button[disabled][data-v-0d682c9b]:hover,
305
+ .px-button[disabled][data-v-0d682c9b]:focus {
306
306
  color: var(--px-button-disabled-text-color);
307
307
  cursor: not-allowed;
308
308
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
309
309
  transform: none;
310
310
  opacity: 0.6;
311
311
  }
312
- .px-button.is-loading[data-v-938fe053]::before, .px-button.is-disabled[data-v-938fe053]::before, .px-button.is-disabled[data-v-938fe053]:hover::before, .px-button.is-disabled[data-v-938fe053]:focus::before, .px-button[disabled][data-v-938fe053]::before, .px-button[disabled][data-v-938fe053]:hover::before, .px-button[disabled][data-v-938fe053]:focus::before {
312
+ .px-button.is-loading[data-v-0d682c9b]::before, .px-button.is-disabled[data-v-0d682c9b]::before, .px-button.is-disabled[data-v-0d682c9b]:hover::before, .px-button.is-disabled[data-v-0d682c9b]:focus::before, .px-button[disabled][data-v-0d682c9b]::before, .px-button[disabled][data-v-0d682c9b]:hover::before, .px-button[disabled][data-v-0d682c9b]:focus::before {
313
313
  background: var(--px-button-disabled-border-color);
314
314
  }
315
- .px-button.is-loading[data-v-938fe053]::after, .px-button.is-disabled[data-v-938fe053]::after, .px-button.is-disabled[data-v-938fe053]:hover::after, .px-button.is-disabled[data-v-938fe053]:focus::after, .px-button[disabled][data-v-938fe053]::after, .px-button[disabled][data-v-938fe053]:hover::after, .px-button[disabled][data-v-938fe053]:focus::after {
315
+ .px-button.is-loading[data-v-0d682c9b]::after, .px-button.is-disabled[data-v-0d682c9b]::after, .px-button.is-disabled[data-v-0d682c9b]:hover::after, .px-button.is-disabled[data-v-0d682c9b]:focus::after, .px-button[disabled][data-v-0d682c9b]::after, .px-button[disabled][data-v-0d682c9b]:hover::after, .px-button[disabled][data-v-0d682c9b]:focus::after {
316
316
  background: var(--px-button-disabled-bg-color);
317
317
  }
318
318
  /* Icon sizing */
319
- .px-button [class*='px-icon'][data-v-938fe053] {
319
+ .px-button [class*='px-icon'][data-v-0d682c9b] {
320
320
  width: 1em;
321
321
  height: 1em;
322
322
  }
323
323
  /* Type variants - Colored buttons */
324
- .px-button--primary[data-v-938fe053] {
324
+ .px-button--primary[data-v-0d682c9b] {
325
325
  --px-button-text-color: var(--px-color-white);
326
326
  --px-button-bg-color: var(--px-color-primary);
327
327
  --px-button-border-color: var(--px-color-primary-dark);
@@ -337,7 +337,7 @@
337
337
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
338
338
  }
339
339
  /* Dash variant for type buttons */
340
- .px-button--primary.is-dash[data-v-938fe053] {
340
+ .px-button--primary.is-dash[data-v-0d682c9b] {
341
341
  --px-button-text-color: var(--px-color-primary);
342
342
  --px-button-bg-color: var(--px-color-primary-light-9);
343
343
  --px-button-border-color: var(--px-color-primary);
@@ -353,7 +353,7 @@
353
353
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
354
354
  }
355
355
  /* Ghost variant for type buttons */
356
- .px-button--primary.is-ghost[data-v-938fe053] {
356
+ .px-button--primary.is-ghost[data-v-0d682c9b] {
357
357
  --px-button-text-color: var(--px-color-primary);
358
358
  --px-button-shadow-color: transparent;
359
359
  --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -364,7 +364,7 @@
364
364
  --px-button-disabled-bg-color: transparent;
365
365
  }
366
366
  /* Link variant for type buttons */
367
- .px-button--primary.is-link[data-v-938fe053] {
367
+ .px-button--primary.is-link[data-v-0d682c9b] {
368
368
  --px-button-text-color: var(--px-color-primary);
369
369
  --px-button-shadow-color: transparent;
370
370
  --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -372,7 +372,7 @@
372
372
  --px-button-disabled-text-color: var(--px-color-primary-light-5);
373
373
  }
374
374
  /* Plain variant for type buttons */
375
- .px-button--primary.is-plain[data-v-938fe053] {
375
+ .px-button--primary.is-plain[data-v-0d682c9b] {
376
376
  --px-button-text-color: var(--px-color-primary);
377
377
  --px-button-bg-color: var(--px-color-primary-light-9);
378
378
  --px-button-border-color: var(--px-color-primary);
@@ -386,10 +386,10 @@
386
386
  --px-button-disabled-bg-color: var(--px-color-primary-light-9);
387
387
  --px-button-disabled-border-color: var(--px-color-primary-light-7);
388
388
  }
389
- .px-button--primary.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
389
+ .px-button--primary.is-plain[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
390
390
  --px-button-shadow-color: var(--px-color-primary-dark);
391
391
  }
392
- .px-button--success[data-v-938fe053] {
392
+ .px-button--success[data-v-0d682c9b] {
393
393
  --px-button-text-color: var(--px-color-white);
394
394
  --px-button-bg-color: var(--px-color-success);
395
395
  --px-button-border-color: var(--px-color-success-dark);
@@ -405,7 +405,7 @@
405
405
  --px-button-disabled-border-color: var(--px-color-success-light-5);
406
406
  }
407
407
  /* Dash variant for type buttons */
408
- .px-button--success.is-dash[data-v-938fe053] {
408
+ .px-button--success.is-dash[data-v-0d682c9b] {
409
409
  --px-button-text-color: var(--px-color-success);
410
410
  --px-button-bg-color: var(--px-color-success-light-9);
411
411
  --px-button-border-color: var(--px-color-success);
@@ -421,7 +421,7 @@
421
421
  --px-button-disabled-border-color: var(--px-color-success-light-5);
422
422
  }
423
423
  /* Ghost variant for type buttons */
424
- .px-button--success.is-ghost[data-v-938fe053] {
424
+ .px-button--success.is-ghost[data-v-0d682c9b] {
425
425
  --px-button-text-color: var(--px-color-success);
426
426
  --px-button-shadow-color: transparent;
427
427
  --px-button-hover-text-color: var(--px-color-success-dark);
@@ -432,7 +432,7 @@
432
432
  --px-button-disabled-bg-color: transparent;
433
433
  }
434
434
  /* Link variant for type buttons */
435
- .px-button--success.is-link[data-v-938fe053] {
435
+ .px-button--success.is-link[data-v-0d682c9b] {
436
436
  --px-button-text-color: var(--px-color-success);
437
437
  --px-button-shadow-color: transparent;
438
438
  --px-button-hover-text-color: var(--px-color-success-dark);
@@ -440,7 +440,7 @@
440
440
  --px-button-disabled-text-color: var(--px-color-success-light-5);
441
441
  }
442
442
  /* Plain variant for type buttons */
443
- .px-button--success.is-plain[data-v-938fe053] {
443
+ .px-button--success.is-plain[data-v-0d682c9b] {
444
444
  --px-button-text-color: var(--px-color-success);
445
445
  --px-button-bg-color: var(--px-color-success-light-9);
446
446
  --px-button-border-color: var(--px-color-success);
@@ -454,10 +454,10 @@
454
454
  --px-button-disabled-bg-color: var(--px-color-success-light-9);
455
455
  --px-button-disabled-border-color: var(--px-color-success-light-7);
456
456
  }
457
- .px-button--success.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
457
+ .px-button--success.is-plain[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
458
458
  --px-button-shadow-color: var(--px-color-success-dark);
459
459
  }
460
- .px-button--warning[data-v-938fe053] {
460
+ .px-button--warning[data-v-0d682c9b] {
461
461
  --px-button-text-color: var(--px-color-white);
462
462
  --px-button-bg-color: var(--px-color-warning);
463
463
  --px-button-border-color: var(--px-color-warning-dark);
@@ -473,7 +473,7 @@
473
473
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
474
474
  }
475
475
  /* Dash variant for type buttons */
476
- .px-button--warning.is-dash[data-v-938fe053] {
476
+ .px-button--warning.is-dash[data-v-0d682c9b] {
477
477
  --px-button-text-color: var(--px-color-warning);
478
478
  --px-button-bg-color: var(--px-color-warning-light-9);
479
479
  --px-button-border-color: var(--px-color-warning);
@@ -489,7 +489,7 @@
489
489
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
490
490
  }
491
491
  /* Ghost variant for type buttons */
492
- .px-button--warning.is-ghost[data-v-938fe053] {
492
+ .px-button--warning.is-ghost[data-v-0d682c9b] {
493
493
  --px-button-text-color: var(--px-color-warning);
494
494
  --px-button-shadow-color: transparent;
495
495
  --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -500,7 +500,7 @@
500
500
  --px-button-disabled-bg-color: transparent;
501
501
  }
502
502
  /* Link variant for type buttons */
503
- .px-button--warning.is-link[data-v-938fe053] {
503
+ .px-button--warning.is-link[data-v-0d682c9b] {
504
504
  --px-button-text-color: var(--px-color-warning);
505
505
  --px-button-shadow-color: transparent;
506
506
  --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -508,7 +508,7 @@
508
508
  --px-button-disabled-text-color: var(--px-color-warning-light-5);
509
509
  }
510
510
  /* Plain variant for type buttons */
511
- .px-button--warning.is-plain[data-v-938fe053] {
511
+ .px-button--warning.is-plain[data-v-0d682c9b] {
512
512
  --px-button-text-color: var(--px-color-warning);
513
513
  --px-button-bg-color: var(--px-color-warning-light-9);
514
514
  --px-button-border-color: var(--px-color-warning);
@@ -522,10 +522,10 @@
522
522
  --px-button-disabled-bg-color: var(--px-color-warning-light-9);
523
523
  --px-button-disabled-border-color: var(--px-color-warning-light-7);
524
524
  }
525
- .px-button--warning.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
525
+ .px-button--warning.is-plain[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
526
526
  --px-button-shadow-color: var(--px-color-warning-dark);
527
527
  }
528
- .px-button--info[data-v-938fe053] {
528
+ .px-button--info[data-v-0d682c9b] {
529
529
  --px-button-text-color: var(--px-color-white);
530
530
  --px-button-bg-color: var(--px-color-info);
531
531
  --px-button-border-color: var(--px-color-info-dark);
@@ -541,7 +541,7 @@
541
541
  --px-button-disabled-border-color: var(--px-color-info-light-5);
542
542
  }
543
543
  /* Dash variant for type buttons */
544
- .px-button--info.is-dash[data-v-938fe053] {
544
+ .px-button--info.is-dash[data-v-0d682c9b] {
545
545
  --px-button-text-color: var(--px-color-info);
546
546
  --px-button-bg-color: var(--px-color-info-light-9);
547
547
  --px-button-border-color: var(--px-color-info);
@@ -557,7 +557,7 @@
557
557
  --px-button-disabled-border-color: var(--px-color-info-light-5);
558
558
  }
559
559
  /* Ghost variant for type buttons */
560
- .px-button--info.is-ghost[data-v-938fe053] {
560
+ .px-button--info.is-ghost[data-v-0d682c9b] {
561
561
  --px-button-text-color: var(--px-color-info);
562
562
  --px-button-shadow-color: transparent;
563
563
  --px-button-hover-text-color: var(--px-color-info-dark);
@@ -568,7 +568,7 @@
568
568
  --px-button-disabled-bg-color: transparent;
569
569
  }
570
570
  /* Link variant for type buttons */
571
- .px-button--info.is-link[data-v-938fe053] {
571
+ .px-button--info.is-link[data-v-0d682c9b] {
572
572
  --px-button-text-color: var(--px-color-info);
573
573
  --px-button-shadow-color: transparent;
574
574
  --px-button-hover-text-color: var(--px-color-info-dark);
@@ -576,7 +576,7 @@
576
576
  --px-button-disabled-text-color: var(--px-color-info-light-5);
577
577
  }
578
578
  /* Plain variant for type buttons */
579
- .px-button--info.is-plain[data-v-938fe053] {
579
+ .px-button--info.is-plain[data-v-0d682c9b] {
580
580
  --px-button-text-color: var(--px-color-info);
581
581
  --px-button-bg-color: var(--px-color-info-light-9);
582
582
  --px-button-border-color: var(--px-color-info);
@@ -590,10 +590,10 @@
590
590
  --px-button-disabled-bg-color: var(--px-color-info-light-9);
591
591
  --px-button-disabled-border-color: var(--px-color-info-light-7);
592
592
  }
593
- .px-button--info.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
593
+ .px-button--info.is-plain[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
594
594
  --px-button-shadow-color: var(--px-color-info-dark);
595
595
  }
596
- .px-button--danger[data-v-938fe053] {
596
+ .px-button--danger[data-v-0d682c9b] {
597
597
  --px-button-text-color: var(--px-color-white);
598
598
  --px-button-bg-color: var(--px-color-danger);
599
599
  --px-button-border-color: var(--px-color-danger-dark);
@@ -609,7 +609,7 @@
609
609
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
610
610
  }
611
611
  /* Dash variant for type buttons */
612
- .px-button--danger.is-dash[data-v-938fe053] {
612
+ .px-button--danger.is-dash[data-v-0d682c9b] {
613
613
  --px-button-text-color: var(--px-color-danger);
614
614
  --px-button-bg-color: var(--px-color-danger-light-9);
615
615
  --px-button-border-color: var(--px-color-danger);
@@ -625,7 +625,7 @@
625
625
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
626
626
  }
627
627
  /* Ghost variant for type buttons */
628
- .px-button--danger.is-ghost[data-v-938fe053] {
628
+ .px-button--danger.is-ghost[data-v-0d682c9b] {
629
629
  --px-button-text-color: var(--px-color-danger);
630
630
  --px-button-shadow-color: transparent;
631
631
  --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -636,7 +636,7 @@
636
636
  --px-button-disabled-bg-color: transparent;
637
637
  }
638
638
  /* Link variant for type buttons */
639
- .px-button--danger.is-link[data-v-938fe053] {
639
+ .px-button--danger.is-link[data-v-0d682c9b] {
640
640
  --px-button-text-color: var(--px-color-danger);
641
641
  --px-button-shadow-color: transparent;
642
642
  --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -644,7 +644,7 @@
644
644
  --px-button-disabled-text-color: var(--px-color-danger-light-5);
645
645
  }
646
646
  /* Plain variant for type buttons */
647
- .px-button--danger.is-plain[data-v-938fe053] {
647
+ .px-button--danger.is-plain[data-v-0d682c9b] {
648
648
  --px-button-text-color: var(--px-color-danger);
649
649
  --px-button-bg-color: var(--px-color-danger-light-9);
650
650
  --px-button-border-color: var(--px-color-danger);
@@ -658,69 +658,69 @@
658
658
  --px-button-disabled-bg-color: var(--px-color-danger-light-9);
659
659
  --px-button-disabled-border-color: var(--px-color-danger-light-7);
660
660
  }
661
- .px-button--danger.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
661
+ .px-button--danger.is-plain[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
662
662
  --px-button-shadow-color: var(--px-color-danger-dark);
663
663
  }
664
664
  /* Size variants */
665
- .px-button--large[data-v-938fe053] {
665
+ .px-button--large[data-v-0d682c9b] {
666
666
  --px-button-size: 44px;
667
667
  height: var(--px-button-size);
668
668
  padding: 12px 24px;
669
669
  font-size: var(--px-font-size-large);
670
670
  }
671
- .px-button--large.is-circle[data-v-938fe053] {
671
+ .px-button--large.is-circle[data-v-0d682c9b] {
672
672
  padding: 12px;
673
673
  width: 44px;
674
674
  }
675
- .px-button--small[data-v-938fe053] {
675
+ .px-button--small[data-v-0d682c9b] {
676
676
  --px-button-size: 28px;
677
677
  height: var(--px-button-size);
678
678
  padding: 4px 12px;
679
679
  font-size: var(--px-font-size-small);
680
680
  filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
681
681
  }
682
- .px-button--small[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
682
+ .px-button--small[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
683
683
  transform: translate(-1px, -1px);
684
684
  filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
685
685
  }
686
- .px-button--small[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
686
+ .px-button--small[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
687
687
  transform: translate(1px, 1px);
688
688
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
689
689
  }
690
- .px-button--small.is-circle[data-v-938fe053] {
690
+ .px-button--small.is-circle[data-v-0d682c9b] {
691
691
  padding: 4px;
692
692
  width: 28px;
693
693
  }
694
- .px-button--small [class*='px-icon'][data-v-938fe053] {
694
+ .px-button--small [class*='px-icon'][data-v-0d682c9b] {
695
695
  width: 12px;
696
696
  height: 12px;
697
697
  }
698
698
  /* Button Group */
699
- .px-button-group[data-v-938fe053] {
699
+ .px-button-group[data-v-0d682c9b] {
700
700
  display: inline-flex;
701
701
  vertical-align: middle;
702
702
  /* Unified shadow for the whole group — traces all buttons' pixel shapes */
703
703
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
704
704
  }
705
705
  /* Buttons keep their pseudo-element borders, group provides unified shadow */
706
- .px-button-group[data-v-938fe053] > .px-button {
706
+ .px-button-group[data-v-0d682c9b] > .px-button {
707
707
  filter: none;
708
708
  margin-left: 0;
709
709
  }
710
- .px-button-group[data-v-938fe053] > .px-button:not(:first-child) {
710
+ .px-button-group[data-v-0d682c9b] > .px-button:not(:first-child) {
711
711
  margin-left: -2px;
712
712
  }
713
- .px-button-group[data-v-938fe053] > .px-button:hover:not(.is-disabled):not(.is-loading) {
713
+ .px-button-group[data-v-0d682c9b] > .px-button:hover:not(.is-disabled):not(.is-loading) {
714
714
  transform: none;
715
715
  filter: none;
716
716
  z-index: 1;
717
717
  }
718
- .px-button-group[data-v-938fe053] > .px-button:active:not(.is-disabled):not(.is-loading) {
718
+ .px-button-group[data-v-0d682c9b] > .px-button:active:not(.is-disabled):not(.is-loading) {
719
719
  transform: none;
720
720
  filter: none;
721
721
  }
722
722
  /* First button (multi): notched left, straight right */
723
- .px-button-group[data-v-938fe053] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-938fe053] > .px-button:first-child:not(:last-child)::after {
723
+ .px-button-group[data-v-0d682c9b] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-0d682c9b] > .px-button:first-child:not(:last-child)::after {
724
724
  clip-path: polygon(
725
725
  0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
726
726
  100% 0,
@@ -729,7 +729,7 @@
729
729
  );
730
730
  }
731
731
  /* Last button (multi): straight left, notched right */
732
- .px-button-group[data-v-938fe053] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-938fe053] > .px-button:last-child:not(:first-child)::after {
732
+ .px-button-group[data-v-0d682c9b] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-0d682c9b] > .px-button:last-child:not(:first-child)::after {
733
733
  clip-path: polygon(
734
734
  0 0,
735
735
  calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -738,15 +738,15 @@
738
738
  );
739
739
  }
740
740
  /* Middle buttons: straight rectangle, no notches */
741
- .px-button-group[data-v-938fe053] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-938fe053] > .px-button:not(:first-child):not(:last-child)::after {
741
+ .px-button-group[data-v-0d682c9b] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-0d682c9b] > .px-button:not(:first-child):not(:last-child)::after {
742
742
  clip-path: none;
743
743
  }
744
744
  /* Button Group Variables */
745
- .px-button-group[data-v-7bc34bb7] {
745
+ .px-button-group[data-v-87af5dc3] {
746
746
  --px-button-group-border-color: var(--px-border-color-lighter);
747
747
  }
748
748
  /* Button Base Variables */
749
- .px-button[data-v-7bc34bb7] {
749
+ .px-button[data-v-87af5dc3] {
750
750
  --px-button-font-weight: var(--px-font-weight-primary);
751
751
  --px-button-border-color: var(--px-border-color);
752
752
  --px-button-bg-color: var(--px-fill-color-blank);
@@ -764,7 +764,7 @@
764
764
  --px-button-shadow-color: var(--px-shadow-color);
765
765
  }
766
766
  /* Base Button Styles - Pixel Game Aesthetic */
767
- .px-button[data-v-7bc34bb7] {
767
+ .px-button[data-v-87af5dc3] {
768
768
  display: inline-flex;
769
769
  justify-content: center;
770
770
  align-items: center;
@@ -796,7 +796,7 @@
796
796
  transition: none;
797
797
  }
798
798
  /* Border layer — filled with border color, clipped to pixel shape */
799
- .px-button[data-v-7bc34bb7]::before {
799
+ .px-button[data-v-87af5dc3]::before {
800
800
  content: '';
801
801
  position: absolute;
802
802
  inset: 0;
@@ -810,7 +810,7 @@
810
810
  z-index: -1;
811
811
  }
812
812
  /* Fill layer — inset by border width, filled with bg color */
813
- .px-button[data-v-7bc34bb7]::after {
813
+ .px-button[data-v-87af5dc3]::after {
814
814
  content: '';
815
815
  position: absolute;
816
816
  inset: 2px;
@@ -823,114 +823,114 @@
823
823
  );
824
824
  z-index: -1;
825
825
  }
826
- .px-button + .px-button[data-v-7bc34bb7] {
826
+ .px-button + .px-button[data-v-87af5dc3] {
827
827
  margin-left: 12px;
828
828
  }
829
829
  /* Hover - Lift effect */
830
- .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
830
+ .px-button[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
831
831
  color: var(--px-button-hover-text-color);
832
832
  transform: translate(-1px, -1px);
833
833
  filter: drop-shadow(4px 4px 0px var(--px-button-shadow-color));
834
834
  }
835
- .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::before {
835
+ .px-button[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::before {
836
836
  background: var(--px-button-hover-border-color);
837
837
  }
838
- .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
838
+ .px-button[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::after {
839
839
  background: var(--px-button-hover-bg-color);
840
840
  }
841
841
  /* Active - Press down effect */
842
- .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
842
+ .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
843
843
  color: var(--px-button-active-text-color);
844
844
  transform: translate(1px, 1px);
845
845
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
846
846
  }
847
- .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::before {
847
+ .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::before {
848
848
  background: var(--px-button-active-border-color);
849
849
  }
850
- .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
850
+ .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::after {
851
851
  background: var(--px-button-active-bg-color);
852
852
  }
853
853
  /* Focus outline */
854
- .px-button[data-v-7bc34bb7]:focus-visible {
854
+ .px-button[data-v-87af5dc3]:focus-visible {
855
855
  outline: 2px dashed var(--px-color-primary);
856
856
  outline-offset: 2px;
857
857
  }
858
858
  /* Plain variant */
859
- .px-button.is-plain[data-v-7bc34bb7] {
859
+ .px-button.is-plain[data-v-87af5dc3] {
860
860
  --px-button-bg-color: var(--px-fill-color-blank);
861
861
  --px-button-hover-text-color: var(--px-hover-bg-color);
862
862
  --px-button-hover-bg-color: var(--px-fill-color-light);
863
863
  --px-button-hover-border-color: var(--px-hover-border-color);
864
864
  }
865
865
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
866
- .px-button.is-dash[data-v-7bc34bb7] {
866
+ .px-button.is-dash[data-v-87af5dc3] {
867
867
  border: 2px dashed var(--px-button-border-color);
868
868
  filter: none;
869
869
  isolation: isolate;
870
870
  --px-button-hover-text-color: var(--px-hover-bg-color);
871
871
  --px-button-hover-bg-color: var(--px-fill-color-light);
872
872
  }
873
- .px-button.is-dash[data-v-7bc34bb7]::before {
873
+ .px-button.is-dash[data-v-87af5dc3]::before {
874
874
  display: none;
875
875
  }
876
- .px-button.is-dash[data-v-7bc34bb7]::after {
876
+ .px-button.is-dash[data-v-87af5dc3]::after {
877
877
  clip-path: none;
878
878
  inset: 0;
879
879
  background: var(--px-button-bg-color);
880
880
  }
881
- .px-button.is-dash[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
881
+ .px-button.is-dash[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
882
882
  transform: none;
883
883
  filter: none;
884
884
  border-color: var(--px-button-hover-border-color);
885
885
  }
886
- .px-button.is-dash[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
886
+ .px-button.is-dash[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::after {
887
887
  background: var(--px-button-hover-bg-color);
888
888
  }
889
- .px-button.is-dash[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
889
+ .px-button.is-dash[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
890
890
  transform: none;
891
891
  filter: none;
892
892
  border-color: var(--px-button-active-border-color);
893
893
  }
894
- .px-button.is-dash[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
894
+ .px-button.is-dash[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::after {
895
895
  background: var(--px-button-active-bg-color);
896
896
  }
897
897
  /* Ghost variant - No border/background, subtle hover fill */
898
- .px-button.is-ghost[data-v-7bc34bb7] {
898
+ .px-button.is-ghost[data-v-87af5dc3] {
899
899
  filter: none;
900
900
  isolation: isolate;
901
901
  --px-button-shadow-color: transparent;
902
902
  --px-button-hover-text-color: var(--px-hover-bg-color);
903
903
  --px-button-hover-bg-color: var(--px-fill-color-light);
904
904
  }
905
- .px-button.is-ghost[data-v-7bc34bb7]::before {
905
+ .px-button.is-ghost[data-v-87af5dc3]::before {
906
906
  display: none;
907
907
  }
908
- .px-button.is-ghost[data-v-7bc34bb7]::after {
908
+ .px-button.is-ghost[data-v-87af5dc3]::after {
909
909
  clip-path: none;
910
910
  inset: 0;
911
911
  background: transparent;
912
912
  }
913
- .px-button.is-ghost[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
913
+ .px-button.is-ghost[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
914
914
  transform: none;
915
915
  filter: none;
916
916
  color: var(--px-button-hover-text-color);
917
917
  }
918
- .px-button.is-ghost[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
918
+ .px-button.is-ghost[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::after {
919
919
  background: var(--px-button-hover-bg-color);
920
920
  }
921
- .px-button.is-ghost[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
921
+ .px-button.is-ghost[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
922
922
  transform: none;
923
923
  filter: none;
924
924
  color: var(--px-button-active-text-color);
925
925
  }
926
- .px-button.is-ghost[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
926
+ .px-button.is-ghost[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::after {
927
927
  background: var(--px-button-active-bg-color);
928
928
  }
929
- .px-button.is-ghost.is-loading[data-v-7bc34bb7]::after, .px-button.is-ghost.is-disabled[data-v-7bc34bb7]::after, .px-button.is-ghost.is-disabled[data-v-7bc34bb7]:hover::after, .px-button.is-ghost.is-disabled[data-v-7bc34bb7]:focus::after, .px-button.is-ghost[disabled][data-v-7bc34bb7]::after, .px-button.is-ghost[disabled][data-v-7bc34bb7]:hover::after, .px-button.is-ghost[disabled][data-v-7bc34bb7]:focus::after {
929
+ .px-button.is-ghost.is-loading[data-v-87af5dc3]::after, .px-button.is-ghost.is-disabled[data-v-87af5dc3]::after, .px-button.is-ghost.is-disabled[data-v-87af5dc3]:hover::after, .px-button.is-ghost.is-disabled[data-v-87af5dc3]:focus::after, .px-button.is-ghost[disabled][data-v-87af5dc3]::after, .px-button.is-ghost[disabled][data-v-87af5dc3]:hover::after, .px-button.is-ghost[disabled][data-v-87af5dc3]:focus::after {
930
930
  background: transparent;
931
931
  }
932
932
  /* Link variant - Underlined text, no border/background/shadow */
933
- .px-button.is-link[data-v-7bc34bb7] {
933
+ .px-button.is-link[data-v-87af5dc3] {
934
934
  filter: none;
935
935
  --px-button-shadow-color: transparent;
936
936
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -938,85 +938,85 @@
938
938
  text-underline-offset: 3px;
939
939
  padding: 8px 4px;
940
940
  }
941
- .px-button.is-link[data-v-7bc34bb7]::before {
941
+ .px-button.is-link[data-v-87af5dc3]::before {
942
942
  display: none;
943
943
  }
944
- .px-button.is-link[data-v-7bc34bb7]::after {
944
+ .px-button.is-link[data-v-87af5dc3]::after {
945
945
  display: none;
946
946
  }
947
- .px-button.is-link[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
947
+ .px-button.is-link[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
948
948
  transform: none;
949
949
  filter: none;
950
950
  color: var(--px-button-hover-text-color);
951
951
  opacity: 0.8;
952
952
  }
953
- .px-button.is-link[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
953
+ .px-button.is-link[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
954
954
  transform: none;
955
955
  filter: none;
956
956
  color: var(--px-button-active-text-color);
957
957
  opacity: 0.6;
958
958
  }
959
- .px-button.is-link.is-loading[data-v-7bc34bb7],
960
- .px-button.is-link.is-disabled[data-v-7bc34bb7],
961
- .px-button.is-link.is-disabled[data-v-7bc34bb7]:hover,
962
- .px-button.is-link.is-disabled[data-v-7bc34bb7]:focus,
963
- .px-button.is-link[disabled][data-v-7bc34bb7],
964
- .px-button.is-link[disabled][data-v-7bc34bb7]:hover,
965
- .px-button.is-link[disabled][data-v-7bc34bb7]:focus {
959
+ .px-button.is-link.is-loading[data-v-87af5dc3],
960
+ .px-button.is-link.is-disabled[data-v-87af5dc3],
961
+ .px-button.is-link.is-disabled[data-v-87af5dc3]:hover,
962
+ .px-button.is-link.is-disabled[data-v-87af5dc3]:focus,
963
+ .px-button.is-link[disabled][data-v-87af5dc3],
964
+ .px-button.is-link[disabled][data-v-87af5dc3]:hover,
965
+ .px-button.is-link[disabled][data-v-87af5dc3]:focus {
966
966
  filter: none;
967
967
  opacity: 0.4;
968
968
  }
969
- .px-button.is-link.is-loading[data-v-7bc34bb7]::before, .px-button.is-link.is-disabled[data-v-7bc34bb7]::before, .px-button.is-link.is-disabled[data-v-7bc34bb7]:hover::before, .px-button.is-link.is-disabled[data-v-7bc34bb7]:focus::before, .px-button.is-link[disabled][data-v-7bc34bb7]::before, .px-button.is-link[disabled][data-v-7bc34bb7]:hover::before, .px-button.is-link[disabled][data-v-7bc34bb7]:focus::before {
969
+ .px-button.is-link.is-loading[data-v-87af5dc3]::before, .px-button.is-link.is-disabled[data-v-87af5dc3]::before, .px-button.is-link.is-disabled[data-v-87af5dc3]:hover::before, .px-button.is-link.is-disabled[data-v-87af5dc3]:focus::before, .px-button.is-link[disabled][data-v-87af5dc3]::before, .px-button.is-link[disabled][data-v-87af5dc3]:hover::before, .px-button.is-link[disabled][data-v-87af5dc3]:focus::before {
970
970
  display: none;
971
971
  }
972
- .px-button.is-link.is-loading[data-v-7bc34bb7]::after, .px-button.is-link.is-disabled[data-v-7bc34bb7]::after, .px-button.is-link.is-disabled[data-v-7bc34bb7]:hover::after, .px-button.is-link.is-disabled[data-v-7bc34bb7]:focus::after, .px-button.is-link[disabled][data-v-7bc34bb7]::after, .px-button.is-link[disabled][data-v-7bc34bb7]:hover::after, .px-button.is-link[disabled][data-v-7bc34bb7]:focus::after {
972
+ .px-button.is-link.is-loading[data-v-87af5dc3]::after, .px-button.is-link.is-disabled[data-v-87af5dc3]::after, .px-button.is-link.is-disabled[data-v-87af5dc3]:hover::after, .px-button.is-link.is-disabled[data-v-87af5dc3]:focus::after, .px-button.is-link[disabled][data-v-87af5dc3]::after, .px-button.is-link[disabled][data-v-87af5dc3]:hover::after, .px-button.is-link[disabled][data-v-87af5dc3]:focus::after {
973
973
  display: none;
974
974
  }
975
975
  /* Block variant - Full-width button */
976
- .px-button.is-block[data-v-7bc34bb7] {
976
+ .px-button.is-block[data-v-87af5dc3] {
977
977
  display: flex;
978
978
  width: 100%;
979
979
  margin-left: 0;
980
980
  }
981
981
  /* Responsive variant - Viewport-adaptive sizing */
982
- .px-button.is-responsive[data-v-7bc34bb7] {
982
+ .px-button.is-responsive[data-v-87af5dc3] {
983
983
  height: 24px;
984
984
  padding: 4px 8px;
985
985
  font-size: var(--px-font-size-extra-small);
986
986
  }
987
987
  @media (min-width: 640px) {
988
- .px-button.is-responsive[data-v-7bc34bb7] {
988
+ .px-button.is-responsive[data-v-87af5dc3] {
989
989
  height: 28px;
990
990
  padding: 4px 12px;
991
991
  font-size: var(--px-font-size-small)
992
992
  }
993
993
  }
994
994
  @media (min-width: 768px) {
995
- .px-button.is-responsive[data-v-7bc34bb7] {
995
+ .px-button.is-responsive[data-v-87af5dc3] {
996
996
  height: 36px;
997
997
  padding: 8px 16px;
998
998
  font-size: var(--px-font-size-base)
999
999
  }
1000
1000
  }
1001
1001
  @media (min-width: 1024px) {
1002
- .px-button.is-responsive[data-v-7bc34bb7] {
1002
+ .px-button.is-responsive[data-v-87af5dc3] {
1003
1003
  height: 44px;
1004
1004
  padding: 12px 24px;
1005
1005
  font-size: var(--px-font-size-large)
1006
1006
  }
1007
1007
  }
1008
1008
  @media (min-width: 1280px) {
1009
- .px-button.is-responsive[data-v-7bc34bb7] {
1009
+ .px-button.is-responsive[data-v-87af5dc3] {
1010
1010
  height: 44px;
1011
1011
  padding: 12px 32px;
1012
1012
  font-size: var(--px-font-size-large)
1013
1013
  }
1014
1014
  }
1015
1015
  /* Round - Pixel-style rounded with 3-step staircase corners */
1016
- .px-button.is-round[data-v-7bc34bb7] {
1016
+ .px-button.is-round[data-v-87af5dc3] {
1017
1017
  padding: 8px 20px;
1018
1018
  }
1019
- .px-button.is-round[data-v-7bc34bb7]::before, .px-button.is-round[data-v-7bc34bb7]::after {
1019
+ .px-button.is-round[data-v-87af5dc3]::before, .px-button.is-round[data-v-87af5dc3]::after {
1020
1020
  clip-path: polygon(
1021
1021
  0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
1022
1022
  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,
@@ -1025,12 +1025,12 @@
1025
1025
  );
1026
1026
  }
1027
1027
  /* Circle - Pixel circle approximation with 4-step staircase */
1028
- .px-button.is-circle[data-v-7bc34bb7] {
1028
+ .px-button.is-circle[data-v-87af5dc3] {
1029
1029
  padding: 8px;
1030
1030
  width: 36px;
1031
1031
  height: 36px;
1032
1032
  }
1033
- .px-button.is-circle[data-v-7bc34bb7]::before, .px-button.is-circle[data-v-7bc34bb7]::after {
1033
+ .px-button.is-circle[data-v-87af5dc3]::before, .px-button.is-circle[data-v-87af5dc3]::after {
1034
1034
  clip-path: polygon(
1035
1035
  0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
1036
1036
  calc(100% - 10px) 0, calc(100% - 10px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 10px, 100% 10px,
@@ -1039,32 +1039,32 @@
1039
1039
  );
1040
1040
  }
1041
1041
  /* Disabled state */
1042
- .px-button.is-loading[data-v-7bc34bb7],
1043
- .px-button.is-disabled[data-v-7bc34bb7],
1044
- .px-button.is-disabled[data-v-7bc34bb7]:hover,
1045
- .px-button.is-disabled[data-v-7bc34bb7]:focus,
1046
- .px-button[disabled][data-v-7bc34bb7],
1047
- .px-button[disabled][data-v-7bc34bb7]:hover,
1048
- .px-button[disabled][data-v-7bc34bb7]:focus {
1042
+ .px-button.is-loading[data-v-87af5dc3],
1043
+ .px-button.is-disabled[data-v-87af5dc3],
1044
+ .px-button.is-disabled[data-v-87af5dc3]:hover,
1045
+ .px-button.is-disabled[data-v-87af5dc3]:focus,
1046
+ .px-button[disabled][data-v-87af5dc3],
1047
+ .px-button[disabled][data-v-87af5dc3]:hover,
1048
+ .px-button[disabled][data-v-87af5dc3]:focus {
1049
1049
  color: var(--px-button-disabled-text-color);
1050
1050
  cursor: not-allowed;
1051
1051
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
1052
1052
  transform: none;
1053
1053
  opacity: 0.6;
1054
1054
  }
1055
- .px-button.is-loading[data-v-7bc34bb7]::before, .px-button.is-disabled[data-v-7bc34bb7]::before, .px-button.is-disabled[data-v-7bc34bb7]:hover::before, .px-button.is-disabled[data-v-7bc34bb7]:focus::before, .px-button[disabled][data-v-7bc34bb7]::before, .px-button[disabled][data-v-7bc34bb7]:hover::before, .px-button[disabled][data-v-7bc34bb7]:focus::before {
1055
+ .px-button.is-loading[data-v-87af5dc3]::before, .px-button.is-disabled[data-v-87af5dc3]::before, .px-button.is-disabled[data-v-87af5dc3]:hover::before, .px-button.is-disabled[data-v-87af5dc3]:focus::before, .px-button[disabled][data-v-87af5dc3]::before, .px-button[disabled][data-v-87af5dc3]:hover::before, .px-button[disabled][data-v-87af5dc3]:focus::before {
1056
1056
  background: var(--px-button-disabled-border-color);
1057
1057
  }
1058
- .px-button.is-loading[data-v-7bc34bb7]::after, .px-button.is-disabled[data-v-7bc34bb7]::after, .px-button.is-disabled[data-v-7bc34bb7]:hover::after, .px-button.is-disabled[data-v-7bc34bb7]:focus::after, .px-button[disabled][data-v-7bc34bb7]::after, .px-button[disabled][data-v-7bc34bb7]:hover::after, .px-button[disabled][data-v-7bc34bb7]:focus::after {
1058
+ .px-button.is-loading[data-v-87af5dc3]::after, .px-button.is-disabled[data-v-87af5dc3]::after, .px-button.is-disabled[data-v-87af5dc3]:hover::after, .px-button.is-disabled[data-v-87af5dc3]:focus::after, .px-button[disabled][data-v-87af5dc3]::after, .px-button[disabled][data-v-87af5dc3]:hover::after, .px-button[disabled][data-v-87af5dc3]:focus::after {
1059
1059
  background: var(--px-button-disabled-bg-color);
1060
1060
  }
1061
1061
  /* Icon sizing */
1062
- .px-button [class*='px-icon'][data-v-7bc34bb7] {
1062
+ .px-button [class*='px-icon'][data-v-87af5dc3] {
1063
1063
  width: 1em;
1064
1064
  height: 1em;
1065
1065
  }
1066
1066
  /* Type variants - Colored buttons */
1067
- .px-button--primary[data-v-7bc34bb7] {
1067
+ .px-button--primary[data-v-87af5dc3] {
1068
1068
  --px-button-text-color: var(--px-color-white);
1069
1069
  --px-button-bg-color: var(--px-color-primary);
1070
1070
  --px-button-border-color: var(--px-color-primary-dark);
@@ -1080,7 +1080,7 @@
1080
1080
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
1081
1081
  }
1082
1082
  /* Dash variant for type buttons */
1083
- .px-button--primary.is-dash[data-v-7bc34bb7] {
1083
+ .px-button--primary.is-dash[data-v-87af5dc3] {
1084
1084
  --px-button-text-color: var(--px-color-primary);
1085
1085
  --px-button-bg-color: var(--px-color-primary-light-9);
1086
1086
  --px-button-border-color: var(--px-color-primary);
@@ -1096,7 +1096,7 @@
1096
1096
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
1097
1097
  }
1098
1098
  /* Ghost variant for type buttons */
1099
- .px-button--primary.is-ghost[data-v-7bc34bb7] {
1099
+ .px-button--primary.is-ghost[data-v-87af5dc3] {
1100
1100
  --px-button-text-color: var(--px-color-primary);
1101
1101
  --px-button-shadow-color: transparent;
1102
1102
  --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -1107,7 +1107,7 @@
1107
1107
  --px-button-disabled-bg-color: transparent;
1108
1108
  }
1109
1109
  /* Link variant for type buttons */
1110
- .px-button--primary.is-link[data-v-7bc34bb7] {
1110
+ .px-button--primary.is-link[data-v-87af5dc3] {
1111
1111
  --px-button-text-color: var(--px-color-primary);
1112
1112
  --px-button-shadow-color: transparent;
1113
1113
  --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -1115,7 +1115,7 @@
1115
1115
  --px-button-disabled-text-color: var(--px-color-primary-light-5);
1116
1116
  }
1117
1117
  /* Plain variant for type buttons */
1118
- .px-button--primary.is-plain[data-v-7bc34bb7] {
1118
+ .px-button--primary.is-plain[data-v-87af5dc3] {
1119
1119
  --px-button-text-color: var(--px-color-primary);
1120
1120
  --px-button-bg-color: var(--px-color-primary-light-9);
1121
1121
  --px-button-border-color: var(--px-color-primary);
@@ -1129,10 +1129,10 @@
1129
1129
  --px-button-disabled-bg-color: var(--px-color-primary-light-9);
1130
1130
  --px-button-disabled-border-color: var(--px-color-primary-light-7);
1131
1131
  }
1132
- .px-button--primary.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1132
+ .px-button--primary.is-plain[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1133
1133
  --px-button-shadow-color: var(--px-color-primary-dark);
1134
1134
  }
1135
- .px-button--success[data-v-7bc34bb7] {
1135
+ .px-button--success[data-v-87af5dc3] {
1136
1136
  --px-button-text-color: var(--px-color-white);
1137
1137
  --px-button-bg-color: var(--px-color-success);
1138
1138
  --px-button-border-color: var(--px-color-success-dark);
@@ -1148,7 +1148,7 @@
1148
1148
  --px-button-disabled-border-color: var(--px-color-success-light-5);
1149
1149
  }
1150
1150
  /* Dash variant for type buttons */
1151
- .px-button--success.is-dash[data-v-7bc34bb7] {
1151
+ .px-button--success.is-dash[data-v-87af5dc3] {
1152
1152
  --px-button-text-color: var(--px-color-success);
1153
1153
  --px-button-bg-color: var(--px-color-success-light-9);
1154
1154
  --px-button-border-color: var(--px-color-success);
@@ -1164,7 +1164,7 @@
1164
1164
  --px-button-disabled-border-color: var(--px-color-success-light-5);
1165
1165
  }
1166
1166
  /* Ghost variant for type buttons */
1167
- .px-button--success.is-ghost[data-v-7bc34bb7] {
1167
+ .px-button--success.is-ghost[data-v-87af5dc3] {
1168
1168
  --px-button-text-color: var(--px-color-success);
1169
1169
  --px-button-shadow-color: transparent;
1170
1170
  --px-button-hover-text-color: var(--px-color-success-dark);
@@ -1175,7 +1175,7 @@
1175
1175
  --px-button-disabled-bg-color: transparent;
1176
1176
  }
1177
1177
  /* Link variant for type buttons */
1178
- .px-button--success.is-link[data-v-7bc34bb7] {
1178
+ .px-button--success.is-link[data-v-87af5dc3] {
1179
1179
  --px-button-text-color: var(--px-color-success);
1180
1180
  --px-button-shadow-color: transparent;
1181
1181
  --px-button-hover-text-color: var(--px-color-success-dark);
@@ -1183,7 +1183,7 @@
1183
1183
  --px-button-disabled-text-color: var(--px-color-success-light-5);
1184
1184
  }
1185
1185
  /* Plain variant for type buttons */
1186
- .px-button--success.is-plain[data-v-7bc34bb7] {
1186
+ .px-button--success.is-plain[data-v-87af5dc3] {
1187
1187
  --px-button-text-color: var(--px-color-success);
1188
1188
  --px-button-bg-color: var(--px-color-success-light-9);
1189
1189
  --px-button-border-color: var(--px-color-success);
@@ -1197,10 +1197,10 @@
1197
1197
  --px-button-disabled-bg-color: var(--px-color-success-light-9);
1198
1198
  --px-button-disabled-border-color: var(--px-color-success-light-7);
1199
1199
  }
1200
- .px-button--success.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1200
+ .px-button--success.is-plain[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1201
1201
  --px-button-shadow-color: var(--px-color-success-dark);
1202
1202
  }
1203
- .px-button--warning[data-v-7bc34bb7] {
1203
+ .px-button--warning[data-v-87af5dc3] {
1204
1204
  --px-button-text-color: var(--px-color-white);
1205
1205
  --px-button-bg-color: var(--px-color-warning);
1206
1206
  --px-button-border-color: var(--px-color-warning-dark);
@@ -1216,7 +1216,7 @@
1216
1216
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
1217
1217
  }
1218
1218
  /* Dash variant for type buttons */
1219
- .px-button--warning.is-dash[data-v-7bc34bb7] {
1219
+ .px-button--warning.is-dash[data-v-87af5dc3] {
1220
1220
  --px-button-text-color: var(--px-color-warning);
1221
1221
  --px-button-bg-color: var(--px-color-warning-light-9);
1222
1222
  --px-button-border-color: var(--px-color-warning);
@@ -1232,7 +1232,7 @@
1232
1232
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
1233
1233
  }
1234
1234
  /* Ghost variant for type buttons */
1235
- .px-button--warning.is-ghost[data-v-7bc34bb7] {
1235
+ .px-button--warning.is-ghost[data-v-87af5dc3] {
1236
1236
  --px-button-text-color: var(--px-color-warning);
1237
1237
  --px-button-shadow-color: transparent;
1238
1238
  --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -1243,7 +1243,7 @@
1243
1243
  --px-button-disabled-bg-color: transparent;
1244
1244
  }
1245
1245
  /* Link variant for type buttons */
1246
- .px-button--warning.is-link[data-v-7bc34bb7] {
1246
+ .px-button--warning.is-link[data-v-87af5dc3] {
1247
1247
  --px-button-text-color: var(--px-color-warning);
1248
1248
  --px-button-shadow-color: transparent;
1249
1249
  --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -1251,7 +1251,7 @@
1251
1251
  --px-button-disabled-text-color: var(--px-color-warning-light-5);
1252
1252
  }
1253
1253
  /* Plain variant for type buttons */
1254
- .px-button--warning.is-plain[data-v-7bc34bb7] {
1254
+ .px-button--warning.is-plain[data-v-87af5dc3] {
1255
1255
  --px-button-text-color: var(--px-color-warning);
1256
1256
  --px-button-bg-color: var(--px-color-warning-light-9);
1257
1257
  --px-button-border-color: var(--px-color-warning);
@@ -1265,10 +1265,10 @@
1265
1265
  --px-button-disabled-bg-color: var(--px-color-warning-light-9);
1266
1266
  --px-button-disabled-border-color: var(--px-color-warning-light-7);
1267
1267
  }
1268
- .px-button--warning.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1268
+ .px-button--warning.is-plain[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1269
1269
  --px-button-shadow-color: var(--px-color-warning-dark);
1270
1270
  }
1271
- .px-button--info[data-v-7bc34bb7] {
1271
+ .px-button--info[data-v-87af5dc3] {
1272
1272
  --px-button-text-color: var(--px-color-white);
1273
1273
  --px-button-bg-color: var(--px-color-info);
1274
1274
  --px-button-border-color: var(--px-color-info-dark);
@@ -1284,7 +1284,7 @@
1284
1284
  --px-button-disabled-border-color: var(--px-color-info-light-5);
1285
1285
  }
1286
1286
  /* Dash variant for type buttons */
1287
- .px-button--info.is-dash[data-v-7bc34bb7] {
1287
+ .px-button--info.is-dash[data-v-87af5dc3] {
1288
1288
  --px-button-text-color: var(--px-color-info);
1289
1289
  --px-button-bg-color: var(--px-color-info-light-9);
1290
1290
  --px-button-border-color: var(--px-color-info);
@@ -1300,7 +1300,7 @@
1300
1300
  --px-button-disabled-border-color: var(--px-color-info-light-5);
1301
1301
  }
1302
1302
  /* Ghost variant for type buttons */
1303
- .px-button--info.is-ghost[data-v-7bc34bb7] {
1303
+ .px-button--info.is-ghost[data-v-87af5dc3] {
1304
1304
  --px-button-text-color: var(--px-color-info);
1305
1305
  --px-button-shadow-color: transparent;
1306
1306
  --px-button-hover-text-color: var(--px-color-info-dark);
@@ -1311,7 +1311,7 @@
1311
1311
  --px-button-disabled-bg-color: transparent;
1312
1312
  }
1313
1313
  /* Link variant for type buttons */
1314
- .px-button--info.is-link[data-v-7bc34bb7] {
1314
+ .px-button--info.is-link[data-v-87af5dc3] {
1315
1315
  --px-button-text-color: var(--px-color-info);
1316
1316
  --px-button-shadow-color: transparent;
1317
1317
  --px-button-hover-text-color: var(--px-color-info-dark);
@@ -1319,7 +1319,7 @@
1319
1319
  --px-button-disabled-text-color: var(--px-color-info-light-5);
1320
1320
  }
1321
1321
  /* Plain variant for type buttons */
1322
- .px-button--info.is-plain[data-v-7bc34bb7] {
1322
+ .px-button--info.is-plain[data-v-87af5dc3] {
1323
1323
  --px-button-text-color: var(--px-color-info);
1324
1324
  --px-button-bg-color: var(--px-color-info-light-9);
1325
1325
  --px-button-border-color: var(--px-color-info);
@@ -1333,10 +1333,10 @@
1333
1333
  --px-button-disabled-bg-color: var(--px-color-info-light-9);
1334
1334
  --px-button-disabled-border-color: var(--px-color-info-light-7);
1335
1335
  }
1336
- .px-button--info.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1336
+ .px-button--info.is-plain[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1337
1337
  --px-button-shadow-color: var(--px-color-info-dark);
1338
1338
  }
1339
- .px-button--danger[data-v-7bc34bb7] {
1339
+ .px-button--danger[data-v-87af5dc3] {
1340
1340
  --px-button-text-color: var(--px-color-white);
1341
1341
  --px-button-bg-color: var(--px-color-danger);
1342
1342
  --px-button-border-color: var(--px-color-danger-dark);
@@ -1352,7 +1352,7 @@
1352
1352
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
1353
1353
  }
1354
1354
  /* Dash variant for type buttons */
1355
- .px-button--danger.is-dash[data-v-7bc34bb7] {
1355
+ .px-button--danger.is-dash[data-v-87af5dc3] {
1356
1356
  --px-button-text-color: var(--px-color-danger);
1357
1357
  --px-button-bg-color: var(--px-color-danger-light-9);
1358
1358
  --px-button-border-color: var(--px-color-danger);
@@ -1368,7 +1368,7 @@
1368
1368
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
1369
1369
  }
1370
1370
  /* Ghost variant for type buttons */
1371
- .px-button--danger.is-ghost[data-v-7bc34bb7] {
1371
+ .px-button--danger.is-ghost[data-v-87af5dc3] {
1372
1372
  --px-button-text-color: var(--px-color-danger);
1373
1373
  --px-button-shadow-color: transparent;
1374
1374
  --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -1379,7 +1379,7 @@
1379
1379
  --px-button-disabled-bg-color: transparent;
1380
1380
  }
1381
1381
  /* Link variant for type buttons */
1382
- .px-button--danger.is-link[data-v-7bc34bb7] {
1382
+ .px-button--danger.is-link[data-v-87af5dc3] {
1383
1383
  --px-button-text-color: var(--px-color-danger);
1384
1384
  --px-button-shadow-color: transparent;
1385
1385
  --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -1387,7 +1387,7 @@
1387
1387
  --px-button-disabled-text-color: var(--px-color-danger-light-5);
1388
1388
  }
1389
1389
  /* Plain variant for type buttons */
1390
- .px-button--danger.is-plain[data-v-7bc34bb7] {
1390
+ .px-button--danger.is-plain[data-v-87af5dc3] {
1391
1391
  --px-button-text-color: var(--px-color-danger);
1392
1392
  --px-button-bg-color: var(--px-color-danger-light-9);
1393
1393
  --px-button-border-color: var(--px-color-danger);
@@ -1401,69 +1401,69 @@
1401
1401
  --px-button-disabled-bg-color: var(--px-color-danger-light-9);
1402
1402
  --px-button-disabled-border-color: var(--px-color-danger-light-7);
1403
1403
  }
1404
- .px-button--danger.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1404
+ .px-button--danger.is-plain[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1405
1405
  --px-button-shadow-color: var(--px-color-danger-dark);
1406
1406
  }
1407
1407
  /* Size variants */
1408
- .px-button--large[data-v-7bc34bb7] {
1408
+ .px-button--large[data-v-87af5dc3] {
1409
1409
  --px-button-size: 44px;
1410
1410
  height: var(--px-button-size);
1411
1411
  padding: 12px 24px;
1412
1412
  font-size: var(--px-font-size-large);
1413
1413
  }
1414
- .px-button--large.is-circle[data-v-7bc34bb7] {
1414
+ .px-button--large.is-circle[data-v-87af5dc3] {
1415
1415
  padding: 12px;
1416
1416
  width: 44px;
1417
1417
  }
1418
- .px-button--small[data-v-7bc34bb7] {
1418
+ .px-button--small[data-v-87af5dc3] {
1419
1419
  --px-button-size: 28px;
1420
1420
  height: var(--px-button-size);
1421
1421
  padding: 4px 12px;
1422
1422
  font-size: var(--px-font-size-small);
1423
1423
  filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
1424
1424
  }
1425
- .px-button--small[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
1425
+ .px-button--small[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1426
1426
  transform: translate(-1px, -1px);
1427
1427
  filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
1428
1428
  }
1429
- .px-button--small[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
1429
+ .px-button--small[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
1430
1430
  transform: translate(1px, 1px);
1431
1431
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
1432
1432
  }
1433
- .px-button--small.is-circle[data-v-7bc34bb7] {
1433
+ .px-button--small.is-circle[data-v-87af5dc3] {
1434
1434
  padding: 4px;
1435
1435
  width: 28px;
1436
1436
  }
1437
- .px-button--small [class*='px-icon'][data-v-7bc34bb7] {
1437
+ .px-button--small [class*='px-icon'][data-v-87af5dc3] {
1438
1438
  width: 12px;
1439
1439
  height: 12px;
1440
1440
  }
1441
1441
  /* Button Group */
1442
- .px-button-group[data-v-7bc34bb7] {
1442
+ .px-button-group[data-v-87af5dc3] {
1443
1443
  display: inline-flex;
1444
1444
  vertical-align: middle;
1445
1445
  /* Unified shadow for the whole group — traces all buttons' pixel shapes */
1446
1446
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
1447
1447
  }
1448
1448
  /* Buttons keep their pseudo-element borders, group provides unified shadow */
1449
- .px-button-group[data-v-7bc34bb7] > .px-button {
1449
+ .px-button-group[data-v-87af5dc3] > .px-button {
1450
1450
  filter: none;
1451
1451
  margin-left: 0;
1452
1452
  }
1453
- .px-button-group[data-v-7bc34bb7] > .px-button:not(:first-child) {
1453
+ .px-button-group[data-v-87af5dc3] > .px-button:not(:first-child) {
1454
1454
  margin-left: -2px;
1455
1455
  }
1456
- .px-button-group[data-v-7bc34bb7] > .px-button:hover:not(.is-disabled):not(.is-loading) {
1456
+ .px-button-group[data-v-87af5dc3] > .px-button:hover:not(.is-disabled):not(.is-loading) {
1457
1457
  transform: none;
1458
1458
  filter: none;
1459
1459
  z-index: 1;
1460
1460
  }
1461
- .px-button-group[data-v-7bc34bb7] > .px-button:active:not(.is-disabled):not(.is-loading) {
1461
+ .px-button-group[data-v-87af5dc3] > .px-button:active:not(.is-disabled):not(.is-loading) {
1462
1462
  transform: none;
1463
1463
  filter: none;
1464
1464
  }
1465
1465
  /* First button (multi): notched left, straight right */
1466
- .px-button-group[data-v-7bc34bb7] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-7bc34bb7] > .px-button:first-child:not(:last-child)::after {
1466
+ .px-button-group[data-v-87af5dc3] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-87af5dc3] > .px-button:first-child:not(:last-child)::after {
1467
1467
  clip-path: polygon(
1468
1468
  0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
1469
1469
  100% 0,
@@ -1472,7 +1472,7 @@
1472
1472
  );
1473
1473
  }
1474
1474
  /* Last button (multi): straight left, notched right */
1475
- .px-button-group[data-v-7bc34bb7] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-7bc34bb7] > .px-button:last-child:not(:first-child)::after {
1475
+ .px-button-group[data-v-87af5dc3] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-87af5dc3] > .px-button:last-child:not(:first-child)::after {
1476
1476
  clip-path: polygon(
1477
1477
  0 0,
1478
1478
  calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -1481,6 +1481,6 @@
1481
1481
  );
1482
1482
  }
1483
1483
  /* Middle buttons: straight rectangle, no notches */
1484
- .px-button-group[data-v-7bc34bb7] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-7bc34bb7] > .px-button:not(:first-child):not(:last-child)::after {
1484
+ .px-button-group[data-v-87af5dc3] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-87af5dc3] > .px-button:not(:first-child):not(:last-child)::after {
1485
1485
  clip-path: none;
1486
1486
  }