sakana-element 2.0.2 → 2.1.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 (35) hide show
  1. package/dist/es/{Alert-D4jZO-Gv.js → Alert-C5X-XFGJ.js} +1 -1
  2. package/dist/es/Button-DTik2ZP6.js +33 -0
  3. package/dist/es/{Collapse-CgadjkRS.js → Collapse-l_8qKOBG.js} +1 -1
  4. package/dist/es/Dropdown-ZjZ0qSn2.js +40 -0
  5. package/dist/es/{Form-X4dNzwFt.js → Form-pxRZxseS.js} +1 -1
  6. package/dist/es/Icon-UBaqO2nY.js +27 -0
  7. package/dist/es/{Input-C0g1h9x2.js → Input-BJoBaFXa.js} +3 -3
  8. package/dist/es/{Loading-Cv4Fsu-C.js → Loading-BJJBJhg3.js} +2 -2
  9. package/dist/es/{Message-BuoSEEVc.js → Message-CqBKW0c8.js} +41 -41
  10. package/dist/es/Notification-CVACM2cj.js +58 -0
  11. package/dist/es/{Popconfirm-mMYpa7O6.js → Popconfirm-CW8oRycq.js} +3 -3
  12. package/dist/es/{Select-SRw_b6I2.js → Select-C7mwByXa.js} +4 -4
  13. package/dist/es/{Switch-bhJBaSI7.js → Switch-CgFPFC3j.js} +1 -1
  14. package/dist/es/Tooltip-D9rQ4LEg.js +74 -0
  15. package/dist/es/hooks-DNMt3QPi.js +104 -0
  16. package/dist/es/index.js +55 -51
  17. package/dist/index.css +1 -1
  18. package/dist/theme/Button.css +508 -116
  19. package/dist/theme/Notification.css +20 -20
  20. package/dist/theme/Tooltip.css +10 -10
  21. package/dist/types/components/Button/types.d.ts +3 -0
  22. package/dist/types/components/Icon/icons/pixelarticons-all.d.ts +1 -0
  23. package/dist/types/core/index.d.ts +1 -0
  24. package/dist/umd/index.css +1 -1
  25. package/dist/umd/index.css.gz +0 -0
  26. package/dist/umd/index.umd.cjs +12 -12
  27. package/dist/umd/index.umd.cjs.gz +0 -0
  28. package/package.json +11 -3
  29. package/dist/es/Button-l3ljgd74.js +0 -33
  30. package/dist/es/Dropdown-DBqye5wx.js +0 -38
  31. package/dist/es/Icon-4XdUD4qc.js +0 -27
  32. package/dist/es/Notification-Bv_vDOpB.js +0 -58
  33. package/dist/es/Tooltip-CUOZC7JN.js +0 -74
  34. package/dist/es/hooks-qpAqkY5H.js +0 -64
  35. /package/dist/types/components/Button/{contants.d.ts → constants.d.ts} +0 -0
package/dist/theme/Button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Button Group Variables */
2
- .px-button-group[data-v-8bf437b2] {
2
+ .px-button-group[data-v-7044e22a] {
3
3
  --px-button-group-border-color: var(--px-border-color-lighter);
4
4
  }
5
5
  /* Button Base Variables */
6
- .px-button[data-v-8bf437b2] {
6
+ .px-button[data-v-7044e22a] {
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-8bf437b2] {
24
+ .px-button[data-v-7044e22a] {
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-8bf437b2]::before {
56
+ .px-button[data-v-7044e22a]::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-8bf437b2]::after {
70
+ .px-button[data-v-7044e22a]::after {
71
71
  content: '';
72
72
  position: absolute;
73
73
  inset: 2px;
@@ -80,49 +80,110 @@
80
80
  );
81
81
  z-index: -1;
82
82
  }
83
- .px-button + .px-button[data-v-8bf437b2] {
83
+ .px-button + .px-button[data-v-7044e22a] {
84
84
  margin-left: 12px;
85
85
  }
86
86
  /* Hover - Lift effect */
87
- .px-button[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
87
+ .px-button[data-v-7044e22a]: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-8bf437b2]:hover:not(.is-disabled):not(.is-loading)::before {
92
+ .px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::before {
93
93
  background: var(--px-button-hover-border-color);
94
94
  }
95
- .px-button[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading)::after {
95
+ .px-button[data-v-7044e22a]: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-8bf437b2]:active:not(.is-disabled):not(.is-loading) {
99
+ .px-button[data-v-7044e22a]: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-8bf437b2]:active:not(.is-disabled):not(.is-loading)::before {
104
+ .px-button[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::before {
105
105
  background: var(--px-button-active-border-color);
106
106
  }
107
- .px-button[data-v-8bf437b2]:active:not(.is-disabled):not(.is-loading)::after {
107
+ .px-button[data-v-7044e22a]: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-8bf437b2]:focus-visible {
111
+ .px-button[data-v-7044e22a]: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-8bf437b2] {
116
+ .px-button.is-plain[data-v-7044e22a] {
117
117
  --px-button-bg-color: var(--px-fill-color-blank);
118
118
  --px-button-hover-bg-color: var(--px-fill-color-light);
119
119
  --px-button-hover-border-color: var(--px-color-primary);
120
120
  }
121
+ /* Dash variant - Dashed border on the button itself, no pixel shadow */
122
+ .px-button.is-dash[data-v-7044e22a] {
123
+ border: 2px dashed var(--px-button-border-color);
124
+ filter: none;
125
+ }
126
+ .px-button.is-dash[data-v-7044e22a]::before {
127
+ display: none;
128
+ }
129
+ .px-button.is-dash[data-v-7044e22a]::after {
130
+ clip-path: none;
131
+ inset: 0;
132
+ background: var(--px-button-bg-color);
133
+ }
134
+ .px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
135
+ transform: none;
136
+ filter: none;
137
+ border-color: var(--px-button-hover-border-color);
138
+ }
139
+ .px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
140
+ background: var(--px-button-hover-bg-color);
141
+ }
142
+ .px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
143
+ transform: none;
144
+ filter: none;
145
+ border-color: var(--px-button-active-border-color);
146
+ }
147
+ .px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
148
+ background: var(--px-button-active-bg-color);
149
+ }
150
+ /* Ghost variant - No border/background, subtle hover fill */
151
+ .px-button.is-ghost[data-v-7044e22a] {
152
+ filter: none;
153
+ --px-button-shadow-color: transparent;
154
+ }
155
+ .px-button.is-ghost[data-v-7044e22a]::before {
156
+ display: none;
157
+ }
158
+ .px-button.is-ghost[data-v-7044e22a]::after {
159
+ clip-path: none;
160
+ inset: 0;
161
+ background: transparent;
162
+ }
163
+ .px-button.is-ghost[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
164
+ transform: none;
165
+ filter: none;
166
+ color: var(--px-button-hover-text-color);
167
+ }
168
+ .px-button.is-ghost[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
169
+ background: var(--px-button-hover-bg-color, var(--px-fill-color-light));
170
+ }
171
+ .px-button.is-ghost[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
172
+ transform: none;
173
+ filter: none;
174
+ color: var(--px-button-active-text-color);
175
+ }
176
+ .px-button.is-ghost[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
177
+ background: var(--px-button-active-bg-color, var(--px-fill-color));
178
+ }
179
+ .px-button.is-ghost.is-loading[data-v-7044e22a]::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]:hover::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]:focus::after, .px-button.is-ghost[disabled][data-v-7044e22a]::after, .px-button.is-ghost[disabled][data-v-7044e22a]:hover::after, .px-button.is-ghost[disabled][data-v-7044e22a]:focus::after {
180
+ background: transparent;
181
+ }
121
182
  /* Round - Pixel-style rounded with 3-step staircase corners */
122
- .px-button.is-round[data-v-8bf437b2] {
183
+ .px-button.is-round[data-v-7044e22a] {
123
184
  padding: 8px 20px;
124
185
  }
125
- .px-button.is-round[data-v-8bf437b2]::before, .px-button.is-round[data-v-8bf437b2]::after {
186
+ .px-button.is-round[data-v-7044e22a]::before, .px-button.is-round[data-v-7044e22a]::after {
126
187
  clip-path: polygon(
127
188
  0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
128
189
  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,
@@ -131,12 +192,12 @@
131
192
  );
132
193
  }
133
194
  /* Circle - Pixel circle approximation with 4-step staircase */
134
- .px-button.is-circle[data-v-8bf437b2] {
195
+ .px-button.is-circle[data-v-7044e22a] {
135
196
  padding: 8px;
136
197
  width: 36px;
137
198
  height: 36px;
138
199
  }
139
- .px-button.is-circle[data-v-8bf437b2]::before, .px-button.is-circle[data-v-8bf437b2]::after {
200
+ .px-button.is-circle[data-v-7044e22a]::before, .px-button.is-circle[data-v-7044e22a]::after {
140
201
  clip-path: polygon(
141
202
  0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
142
203
  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,
@@ -145,32 +206,32 @@
145
206
  );
146
207
  }
147
208
  /* Disabled state */
148
- .px-button.is-loading[data-v-8bf437b2],
149
- .px-button.is-disabled[data-v-8bf437b2],
150
- .px-button.is-disabled[data-v-8bf437b2]:hover,
151
- .px-button.is-disabled[data-v-8bf437b2]:focus,
152
- .px-button[disabled][data-v-8bf437b2],
153
- .px-button[disabled][data-v-8bf437b2]:hover,
154
- .px-button[disabled][data-v-8bf437b2]:focus {
209
+ .px-button.is-loading[data-v-7044e22a],
210
+ .px-button.is-disabled[data-v-7044e22a],
211
+ .px-button.is-disabled[data-v-7044e22a]:hover,
212
+ .px-button.is-disabled[data-v-7044e22a]:focus,
213
+ .px-button[disabled][data-v-7044e22a],
214
+ .px-button[disabled][data-v-7044e22a]:hover,
215
+ .px-button[disabled][data-v-7044e22a]:focus {
155
216
  color: var(--px-button-disabled-text-color);
156
217
  cursor: not-allowed;
157
218
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
158
219
  transform: none;
159
220
  opacity: 0.6;
160
221
  }
161
- .px-button.is-loading[data-v-8bf437b2]::before, .px-button.is-disabled[data-v-8bf437b2]::before, .px-button.is-disabled[data-v-8bf437b2]:hover::before, .px-button.is-disabled[data-v-8bf437b2]:focus::before, .px-button[disabled][data-v-8bf437b2]::before, .px-button[disabled][data-v-8bf437b2]:hover::before, .px-button[disabled][data-v-8bf437b2]:focus::before {
222
+ .px-button.is-loading[data-v-7044e22a]::before, .px-button.is-disabled[data-v-7044e22a]::before, .px-button.is-disabled[data-v-7044e22a]:hover::before, .px-button.is-disabled[data-v-7044e22a]:focus::before, .px-button[disabled][data-v-7044e22a]::before, .px-button[disabled][data-v-7044e22a]:hover::before, .px-button[disabled][data-v-7044e22a]:focus::before {
162
223
  background: var(--px-button-disabled-border-color);
163
224
  }
164
- .px-button.is-loading[data-v-8bf437b2]::after, .px-button.is-disabled[data-v-8bf437b2]::after, .px-button.is-disabled[data-v-8bf437b2]:hover::after, .px-button.is-disabled[data-v-8bf437b2]:focus::after, .px-button[disabled][data-v-8bf437b2]::after, .px-button[disabled][data-v-8bf437b2]:hover::after, .px-button[disabled][data-v-8bf437b2]:focus::after {
225
+ .px-button.is-loading[data-v-7044e22a]::after, .px-button.is-disabled[data-v-7044e22a]::after, .px-button.is-disabled[data-v-7044e22a]:hover::after, .px-button.is-disabled[data-v-7044e22a]:focus::after, .px-button[disabled][data-v-7044e22a]::after, .px-button[disabled][data-v-7044e22a]:hover::after, .px-button[disabled][data-v-7044e22a]:focus::after {
165
226
  background: var(--px-button-disabled-bg-color);
166
227
  }
167
228
  /* Icon sizing */
168
- .px-button [class*='px-icon'][data-v-8bf437b2] {
229
+ .px-button [class*='px-icon'][data-v-7044e22a] {
169
230
  width: 1em;
170
231
  height: 1em;
171
232
  }
172
233
  /* Type variants - Colored buttons */
173
- .px-button--primary[data-v-8bf437b2] {
234
+ .px-button--primary[data-v-7044e22a] {
174
235
  --px-button-text-color: var(--px-color-white);
175
236
  --px-button-bg-color: var(--px-color-primary);
176
237
  --px-button-border-color: var(--px-color-primary-dark);
@@ -185,8 +246,35 @@
185
246
  --px-button-disabled-bg-color: var(--px-color-primary-light-5);
186
247
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
187
248
  }
249
+ /* Dash variant for type buttons */
250
+ .px-button--primary.is-dash[data-v-7044e22a] {
251
+ --px-button-text-color: var(--px-color-primary);
252
+ --px-button-bg-color: var(--px-color-primary-light-9);
253
+ --px-button-border-color: var(--px-color-primary);
254
+ --px-button-shadow-color: transparent;
255
+ --px-button-hover-text-color: var(--px-color-primary-dark);
256
+ --px-button-hover-bg-color: var(--px-color-primary-light-7);
257
+ --px-button-hover-border-color: var(--px-color-primary-dark);
258
+ --px-button-active-text-color: var(--px-color-white);
259
+ --px-button-active-bg-color: var(--px-color-primary);
260
+ --px-button-active-border-color: var(--px-color-primary-dark);
261
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
262
+ --px-button-disabled-bg-color: var(--px-color-primary-light-9);
263
+ --px-button-disabled-border-color: var(--px-color-primary-light-5);
264
+ }
265
+ /* Ghost variant for type buttons */
266
+ .px-button--primary.is-ghost[data-v-7044e22a] {
267
+ --px-button-text-color: var(--px-color-primary);
268
+ --px-button-shadow-color: transparent;
269
+ --px-button-hover-text-color: var(--px-color-primary-dark);
270
+ --px-button-hover-bg-color: var(--px-color-primary-light-9);
271
+ --px-button-active-text-color: var(--px-color-primary-dark);
272
+ --px-button-active-bg-color: var(--px-color-primary-light-7);
273
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
274
+ --px-button-disabled-bg-color: transparent;
275
+ }
188
276
  /* Plain variant for type buttons */
189
- .px-button--primary.is-plain[data-v-8bf437b2] {
277
+ .px-button--primary.is-plain[data-v-7044e22a] {
190
278
  --px-button-text-color: var(--px-color-primary);
191
279
  --px-button-bg-color: var(--px-color-primary-light-9);
192
280
  --px-button-border-color: var(--px-color-primary);
@@ -200,10 +288,10 @@
200
288
  --px-button-disabled-bg-color: var(--px-color-primary-light-9);
201
289
  --px-button-disabled-border-color: var(--px-color-primary-light-7);
202
290
  }
203
- .px-button--primary.is-plain[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
291
+ .px-button--primary.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
204
292
  --px-button-shadow-color: var(--px-color-primary-dark);
205
293
  }
206
- .px-button--success[data-v-8bf437b2] {
294
+ .px-button--success[data-v-7044e22a] {
207
295
  --px-button-text-color: var(--px-color-white);
208
296
  --px-button-bg-color: var(--px-color-success);
209
297
  --px-button-border-color: var(--px-color-success-dark);
@@ -218,8 +306,35 @@
218
306
  --px-button-disabled-bg-color: var(--px-color-success-light-5);
219
307
  --px-button-disabled-border-color: var(--px-color-success-light-5);
220
308
  }
309
+ /* Dash variant for type buttons */
310
+ .px-button--success.is-dash[data-v-7044e22a] {
311
+ --px-button-text-color: var(--px-color-success);
312
+ --px-button-bg-color: var(--px-color-success-light-9);
313
+ --px-button-border-color: var(--px-color-success);
314
+ --px-button-shadow-color: transparent;
315
+ --px-button-hover-text-color: var(--px-color-success-dark);
316
+ --px-button-hover-bg-color: var(--px-color-success-light-7);
317
+ --px-button-hover-border-color: var(--px-color-success-dark);
318
+ --px-button-active-text-color: var(--px-color-white);
319
+ --px-button-active-bg-color: var(--px-color-success);
320
+ --px-button-active-border-color: var(--px-color-success-dark);
321
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
322
+ --px-button-disabled-bg-color: var(--px-color-success-light-9);
323
+ --px-button-disabled-border-color: var(--px-color-success-light-5);
324
+ }
325
+ /* Ghost variant for type buttons */
326
+ .px-button--success.is-ghost[data-v-7044e22a] {
327
+ --px-button-text-color: var(--px-color-success);
328
+ --px-button-shadow-color: transparent;
329
+ --px-button-hover-text-color: var(--px-color-success-dark);
330
+ --px-button-hover-bg-color: var(--px-color-success-light-9);
331
+ --px-button-active-text-color: var(--px-color-success-dark);
332
+ --px-button-active-bg-color: var(--px-color-success-light-7);
333
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
334
+ --px-button-disabled-bg-color: transparent;
335
+ }
221
336
  /* Plain variant for type buttons */
222
- .px-button--success.is-plain[data-v-8bf437b2] {
337
+ .px-button--success.is-plain[data-v-7044e22a] {
223
338
  --px-button-text-color: var(--px-color-success);
224
339
  --px-button-bg-color: var(--px-color-success-light-9);
225
340
  --px-button-border-color: var(--px-color-success);
@@ -233,10 +348,10 @@
233
348
  --px-button-disabled-bg-color: var(--px-color-success-light-9);
234
349
  --px-button-disabled-border-color: var(--px-color-success-light-7);
235
350
  }
236
- .px-button--success.is-plain[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
351
+ .px-button--success.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
237
352
  --px-button-shadow-color: var(--px-color-success-dark);
238
353
  }
239
- .px-button--warning[data-v-8bf437b2] {
354
+ .px-button--warning[data-v-7044e22a] {
240
355
  --px-button-text-color: var(--px-color-white);
241
356
  --px-button-bg-color: var(--px-color-warning);
242
357
  --px-button-border-color: var(--px-color-warning-dark);
@@ -251,8 +366,35 @@
251
366
  --px-button-disabled-bg-color: var(--px-color-warning-light-5);
252
367
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
253
368
  }
369
+ /* Dash variant for type buttons */
370
+ .px-button--warning.is-dash[data-v-7044e22a] {
371
+ --px-button-text-color: var(--px-color-warning);
372
+ --px-button-bg-color: var(--px-color-warning-light-9);
373
+ --px-button-border-color: var(--px-color-warning);
374
+ --px-button-shadow-color: transparent;
375
+ --px-button-hover-text-color: var(--px-color-warning-dark);
376
+ --px-button-hover-bg-color: var(--px-color-warning-light-7);
377
+ --px-button-hover-border-color: var(--px-color-warning-dark);
378
+ --px-button-active-text-color: var(--px-color-white);
379
+ --px-button-active-bg-color: var(--px-color-warning);
380
+ --px-button-active-border-color: var(--px-color-warning-dark);
381
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
382
+ --px-button-disabled-bg-color: var(--px-color-warning-light-9);
383
+ --px-button-disabled-border-color: var(--px-color-warning-light-5);
384
+ }
385
+ /* Ghost variant for type buttons */
386
+ .px-button--warning.is-ghost[data-v-7044e22a] {
387
+ --px-button-text-color: var(--px-color-warning);
388
+ --px-button-shadow-color: transparent;
389
+ --px-button-hover-text-color: var(--px-color-warning-dark);
390
+ --px-button-hover-bg-color: var(--px-color-warning-light-9);
391
+ --px-button-active-text-color: var(--px-color-warning-dark);
392
+ --px-button-active-bg-color: var(--px-color-warning-light-7);
393
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
394
+ --px-button-disabled-bg-color: transparent;
395
+ }
254
396
  /* Plain variant for type buttons */
255
- .px-button--warning.is-plain[data-v-8bf437b2] {
397
+ .px-button--warning.is-plain[data-v-7044e22a] {
256
398
  --px-button-text-color: var(--px-color-warning);
257
399
  --px-button-bg-color: var(--px-color-warning-light-9);
258
400
  --px-button-border-color: var(--px-color-warning);
@@ -266,10 +408,10 @@
266
408
  --px-button-disabled-bg-color: var(--px-color-warning-light-9);
267
409
  --px-button-disabled-border-color: var(--px-color-warning-light-7);
268
410
  }
269
- .px-button--warning.is-plain[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
411
+ .px-button--warning.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
270
412
  --px-button-shadow-color: var(--px-color-warning-dark);
271
413
  }
272
- .px-button--info[data-v-8bf437b2] {
414
+ .px-button--info[data-v-7044e22a] {
273
415
  --px-button-text-color: var(--px-color-white);
274
416
  --px-button-bg-color: var(--px-color-info);
275
417
  --px-button-border-color: var(--px-color-info-dark);
@@ -284,8 +426,35 @@
284
426
  --px-button-disabled-bg-color: var(--px-color-info-light-5);
285
427
  --px-button-disabled-border-color: var(--px-color-info-light-5);
286
428
  }
429
+ /* Dash variant for type buttons */
430
+ .px-button--info.is-dash[data-v-7044e22a] {
431
+ --px-button-text-color: var(--px-color-info);
432
+ --px-button-bg-color: var(--px-color-info-light-9);
433
+ --px-button-border-color: var(--px-color-info);
434
+ --px-button-shadow-color: transparent;
435
+ --px-button-hover-text-color: var(--px-color-info-dark);
436
+ --px-button-hover-bg-color: var(--px-color-info-light-7);
437
+ --px-button-hover-border-color: var(--px-color-info-dark);
438
+ --px-button-active-text-color: var(--px-color-white);
439
+ --px-button-active-bg-color: var(--px-color-info);
440
+ --px-button-active-border-color: var(--px-color-info-dark);
441
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
442
+ --px-button-disabled-bg-color: var(--px-color-info-light-9);
443
+ --px-button-disabled-border-color: var(--px-color-info-light-5);
444
+ }
445
+ /* Ghost variant for type buttons */
446
+ .px-button--info.is-ghost[data-v-7044e22a] {
447
+ --px-button-text-color: var(--px-color-info);
448
+ --px-button-shadow-color: transparent;
449
+ --px-button-hover-text-color: var(--px-color-info-dark);
450
+ --px-button-hover-bg-color: var(--px-color-info-light-9);
451
+ --px-button-active-text-color: var(--px-color-info-dark);
452
+ --px-button-active-bg-color: var(--px-color-info-light-7);
453
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
454
+ --px-button-disabled-bg-color: transparent;
455
+ }
287
456
  /* Plain variant for type buttons */
288
- .px-button--info.is-plain[data-v-8bf437b2] {
457
+ .px-button--info.is-plain[data-v-7044e22a] {
289
458
  --px-button-text-color: var(--px-color-info);
290
459
  --px-button-bg-color: var(--px-color-info-light-9);
291
460
  --px-button-border-color: var(--px-color-info);
@@ -299,10 +468,10 @@
299
468
  --px-button-disabled-bg-color: var(--px-color-info-light-9);
300
469
  --px-button-disabled-border-color: var(--px-color-info-light-7);
301
470
  }
302
- .px-button--info.is-plain[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
471
+ .px-button--info.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
303
472
  --px-button-shadow-color: var(--px-color-info-dark);
304
473
  }
305
- .px-button--danger[data-v-8bf437b2] {
474
+ .px-button--danger[data-v-7044e22a] {
306
475
  --px-button-text-color: var(--px-color-white);
307
476
  --px-button-bg-color: var(--px-color-danger);
308
477
  --px-button-border-color: var(--px-color-danger-dark);
@@ -317,8 +486,35 @@
317
486
  --px-button-disabled-bg-color: var(--px-color-danger-light-5);
318
487
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
319
488
  }
489
+ /* Dash variant for type buttons */
490
+ .px-button--danger.is-dash[data-v-7044e22a] {
491
+ --px-button-text-color: var(--px-color-danger);
492
+ --px-button-bg-color: var(--px-color-danger-light-9);
493
+ --px-button-border-color: var(--px-color-danger);
494
+ --px-button-shadow-color: transparent;
495
+ --px-button-hover-text-color: var(--px-color-danger-dark);
496
+ --px-button-hover-bg-color: var(--px-color-danger-light-7);
497
+ --px-button-hover-border-color: var(--px-color-danger-dark);
498
+ --px-button-active-text-color: var(--px-color-white);
499
+ --px-button-active-bg-color: var(--px-color-danger);
500
+ --px-button-active-border-color: var(--px-color-danger-dark);
501
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
502
+ --px-button-disabled-bg-color: var(--px-color-danger-light-9);
503
+ --px-button-disabled-border-color: var(--px-color-danger-light-5);
504
+ }
505
+ /* Ghost variant for type buttons */
506
+ .px-button--danger.is-ghost[data-v-7044e22a] {
507
+ --px-button-text-color: var(--px-color-danger);
508
+ --px-button-shadow-color: transparent;
509
+ --px-button-hover-text-color: var(--px-color-danger-dark);
510
+ --px-button-hover-bg-color: var(--px-color-danger-light-9);
511
+ --px-button-active-text-color: var(--px-color-danger-dark);
512
+ --px-button-active-bg-color: var(--px-color-danger-light-7);
513
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
514
+ --px-button-disabled-bg-color: transparent;
515
+ }
320
516
  /* Plain variant for type buttons */
321
- .px-button--danger.is-plain[data-v-8bf437b2] {
517
+ .px-button--danger.is-plain[data-v-7044e22a] {
322
518
  --px-button-text-color: var(--px-color-danger);
323
519
  --px-button-bg-color: var(--px-color-danger-light-9);
324
520
  --px-button-border-color: var(--px-color-danger);
@@ -332,69 +528,69 @@
332
528
  --px-button-disabled-bg-color: var(--px-color-danger-light-9);
333
529
  --px-button-disabled-border-color: var(--px-color-danger-light-7);
334
530
  }
335
- .px-button--danger.is-plain[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
531
+ .px-button--danger.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
336
532
  --px-button-shadow-color: var(--px-color-danger-dark);
337
533
  }
338
534
  /* Size variants */
339
- .px-button--large[data-v-8bf437b2] {
535
+ .px-button--large[data-v-7044e22a] {
340
536
  --px-button-size: 44px;
341
537
  height: var(--px-button-size);
342
538
  padding: 12px 24px;
343
539
  font-size: var(--px-font-size-large);
344
540
  }
345
- .px-button--large.is-circle[data-v-8bf437b2] {
541
+ .px-button--large.is-circle[data-v-7044e22a] {
346
542
  padding: 12px;
347
543
  width: 44px;
348
544
  }
349
- .px-button--small[data-v-8bf437b2] {
545
+ .px-button--small[data-v-7044e22a] {
350
546
  --px-button-size: 28px;
351
547
  height: var(--px-button-size);
352
548
  padding: 4px 12px;
353
549
  font-size: var(--px-font-size-small);
354
550
  filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
355
551
  }
356
- .px-button--small[data-v-8bf437b2]:hover:not(.is-disabled):not(.is-loading) {
552
+ .px-button--small[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
357
553
  transform: translate(-1px, -1px);
358
554
  filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
359
555
  }
360
- .px-button--small[data-v-8bf437b2]:active:not(.is-disabled):not(.is-loading) {
556
+ .px-button--small[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
361
557
  transform: translate(1px, 1px);
362
558
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
363
559
  }
364
- .px-button--small.is-circle[data-v-8bf437b2] {
560
+ .px-button--small.is-circle[data-v-7044e22a] {
365
561
  padding: 4px;
366
562
  width: 28px;
367
563
  }
368
- .px-button--small [class*='px-icon'][data-v-8bf437b2] {
564
+ .px-button--small [class*='px-icon'][data-v-7044e22a] {
369
565
  width: 12px;
370
566
  height: 12px;
371
567
  }
372
568
  /* Button Group */
373
- .px-button-group[data-v-8bf437b2] {
569
+ .px-button-group[data-v-7044e22a] {
374
570
  display: inline-flex;
375
571
  vertical-align: middle;
376
572
  /* Unified shadow for the whole group — traces all buttons' pixel shapes */
377
573
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
378
574
  }
379
575
  /* Buttons keep their pseudo-element borders, group provides unified shadow */
380
- .px-button-group[data-v-8bf437b2] > .px-button {
576
+ .px-button-group[data-v-7044e22a] > .px-button {
381
577
  filter: none;
382
578
  margin-left: 0;
383
579
  }
384
- .px-button-group[data-v-8bf437b2] > .px-button:not(:first-child) {
580
+ .px-button-group[data-v-7044e22a] > .px-button:not(:first-child) {
385
581
  margin-left: -2px;
386
582
  }
387
- .px-button-group[data-v-8bf437b2] > .px-button:hover:not(.is-disabled):not(.is-loading) {
583
+ .px-button-group[data-v-7044e22a] > .px-button:hover:not(.is-disabled):not(.is-loading) {
388
584
  transform: none;
389
585
  filter: none;
390
586
  z-index: 1;
391
587
  }
392
- .px-button-group[data-v-8bf437b2] > .px-button:active:not(.is-disabled):not(.is-loading) {
588
+ .px-button-group[data-v-7044e22a] > .px-button:active:not(.is-disabled):not(.is-loading) {
393
589
  transform: none;
394
590
  filter: none;
395
591
  }
396
592
  /* First button (multi): notched left, straight right */
397
- .px-button-group[data-v-8bf437b2] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-8bf437b2] > .px-button:first-child:not(:last-child)::after {
593
+ .px-button-group[data-v-7044e22a] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-7044e22a] > .px-button:first-child:not(:last-child)::after {
398
594
  clip-path: polygon(
399
595
  0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
400
596
  100% 0,
@@ -403,7 +599,7 @@
403
599
  );
404
600
  }
405
601
  /* Last button (multi): straight left, notched right */
406
- .px-button-group[data-v-8bf437b2] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-8bf437b2] > .px-button:last-child:not(:first-child)::after {
602
+ .px-button-group[data-v-7044e22a] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-7044e22a] > .px-button:last-child:not(:first-child)::after {
407
603
  clip-path: polygon(
408
604
  0 0,
409
605
  calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -412,15 +608,15 @@
412
608
  );
413
609
  }
414
610
  /* Middle buttons: straight rectangle, no notches */
415
- .px-button-group[data-v-8bf437b2] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-8bf437b2] > .px-button:not(:first-child):not(:last-child)::after {
611
+ .px-button-group[data-v-7044e22a] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-7044e22a] > .px-button:not(:first-child):not(:last-child)::after {
416
612
  clip-path: none;
417
613
  }
418
614
  /* Button Group Variables */
419
- .px-button-group[data-v-2aa41476] {
615
+ .px-button-group[data-v-7bc34bb7] {
420
616
  --px-button-group-border-color: var(--px-border-color-lighter);
421
617
  }
422
618
  /* Button Base Variables */
423
- .px-button[data-v-2aa41476] {
619
+ .px-button[data-v-7bc34bb7] {
424
620
  --px-button-font-weight: var(--px-font-weight-primary);
425
621
  --px-button-border-color: var(--px-border-color);
426
622
  --px-button-bg-color: var(--px-fill-color-blank);
@@ -438,7 +634,7 @@
438
634
  --px-button-shadow-color: var(--px-shadow-color);
439
635
  }
440
636
  /* Base Button Styles - Pixel Game Aesthetic */
441
- .px-button[data-v-2aa41476] {
637
+ .px-button[data-v-7bc34bb7] {
442
638
  display: inline-flex;
443
639
  justify-content: center;
444
640
  align-items: center;
@@ -470,7 +666,7 @@
470
666
  transition: none;
471
667
  }
472
668
  /* Border layer — filled with border color, clipped to pixel shape */
473
- .px-button[data-v-2aa41476]::before {
669
+ .px-button[data-v-7bc34bb7]::before {
474
670
  content: '';
475
671
  position: absolute;
476
672
  inset: 0;
@@ -484,7 +680,7 @@
484
680
  z-index: -1;
485
681
  }
486
682
  /* Fill layer — inset by border width, filled with bg color */
487
- .px-button[data-v-2aa41476]::after {
683
+ .px-button[data-v-7bc34bb7]::after {
488
684
  content: '';
489
685
  position: absolute;
490
686
  inset: 2px;
@@ -497,49 +693,110 @@
497
693
  );
498
694
  z-index: -1;
499
695
  }
500
- .px-button + .px-button[data-v-2aa41476] {
696
+ .px-button + .px-button[data-v-7bc34bb7] {
501
697
  margin-left: 12px;
502
698
  }
503
699
  /* Hover - Lift effect */
504
- .px-button[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
700
+ .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
505
701
  color: var(--px-button-hover-text-color);
506
702
  transform: translate(-1px, -1px);
507
703
  filter: drop-shadow(4px 4px 0px var(--px-button-shadow-color));
508
704
  }
509
- .px-button[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading)::before {
705
+ .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::before {
510
706
  background: var(--px-button-hover-border-color);
511
707
  }
512
- .px-button[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading)::after {
708
+ .px-button[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
513
709
  background: var(--px-button-hover-bg-color);
514
710
  }
515
711
  /* Active - Press down effect */
516
- .px-button[data-v-2aa41476]:active:not(.is-disabled):not(.is-loading) {
712
+ .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
517
713
  color: var(--px-button-active-text-color);
518
714
  transform: translate(1px, 1px);
519
715
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
520
716
  }
521
- .px-button[data-v-2aa41476]:active:not(.is-disabled):not(.is-loading)::before {
717
+ .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::before {
522
718
  background: var(--px-button-active-border-color);
523
719
  }
524
- .px-button[data-v-2aa41476]:active:not(.is-disabled):not(.is-loading)::after {
720
+ .px-button[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
525
721
  background: var(--px-button-active-bg-color);
526
722
  }
527
723
  /* Focus outline */
528
- .px-button[data-v-2aa41476]:focus-visible {
724
+ .px-button[data-v-7bc34bb7]:focus-visible {
529
725
  outline: 2px dashed var(--px-color-primary);
530
726
  outline-offset: 2px;
531
727
  }
532
728
  /* Plain variant */
533
- .px-button.is-plain[data-v-2aa41476] {
729
+ .px-button.is-plain[data-v-7bc34bb7] {
534
730
  --px-button-bg-color: var(--px-fill-color-blank);
535
731
  --px-button-hover-bg-color: var(--px-fill-color-light);
536
732
  --px-button-hover-border-color: var(--px-color-primary);
537
733
  }
734
+ /* Dash variant - Dashed border on the button itself, no pixel shadow */
735
+ .px-button.is-dash[data-v-7bc34bb7] {
736
+ border: 2px dashed var(--px-button-border-color);
737
+ filter: none;
738
+ }
739
+ .px-button.is-dash[data-v-7bc34bb7]::before {
740
+ display: none;
741
+ }
742
+ .px-button.is-dash[data-v-7bc34bb7]::after {
743
+ clip-path: none;
744
+ inset: 0;
745
+ background: var(--px-button-bg-color);
746
+ }
747
+ .px-button.is-dash[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
748
+ transform: none;
749
+ filter: none;
750
+ border-color: var(--px-button-hover-border-color);
751
+ }
752
+ .px-button.is-dash[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
753
+ background: var(--px-button-hover-bg-color);
754
+ }
755
+ .px-button.is-dash[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
756
+ transform: none;
757
+ filter: none;
758
+ border-color: var(--px-button-active-border-color);
759
+ }
760
+ .px-button.is-dash[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
761
+ background: var(--px-button-active-bg-color);
762
+ }
763
+ /* Ghost variant - No border/background, subtle hover fill */
764
+ .px-button.is-ghost[data-v-7bc34bb7] {
765
+ filter: none;
766
+ --px-button-shadow-color: transparent;
767
+ }
768
+ .px-button.is-ghost[data-v-7bc34bb7]::before {
769
+ display: none;
770
+ }
771
+ .px-button.is-ghost[data-v-7bc34bb7]::after {
772
+ clip-path: none;
773
+ inset: 0;
774
+ background: transparent;
775
+ }
776
+ .px-button.is-ghost[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
777
+ transform: none;
778
+ filter: none;
779
+ color: var(--px-button-hover-text-color);
780
+ }
781
+ .px-button.is-ghost[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading)::after {
782
+ background: var(--px-button-hover-bg-color, var(--px-fill-color-light));
783
+ }
784
+ .px-button.is-ghost[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
785
+ transform: none;
786
+ filter: none;
787
+ color: var(--px-button-active-text-color);
788
+ }
789
+ .px-button.is-ghost[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading)::after {
790
+ background: var(--px-button-active-bg-color, var(--px-fill-color));
791
+ }
792
+ .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 {
793
+ background: transparent;
794
+ }
538
795
  /* Round - Pixel-style rounded with 3-step staircase corners */
539
- .px-button.is-round[data-v-2aa41476] {
796
+ .px-button.is-round[data-v-7bc34bb7] {
540
797
  padding: 8px 20px;
541
798
  }
542
- .px-button.is-round[data-v-2aa41476]::before, .px-button.is-round[data-v-2aa41476]::after {
799
+ .px-button.is-round[data-v-7bc34bb7]::before, .px-button.is-round[data-v-7bc34bb7]::after {
543
800
  clip-path: polygon(
544
801
  0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
545
802
  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,
@@ -548,12 +805,12 @@
548
805
  );
549
806
  }
550
807
  /* Circle - Pixel circle approximation with 4-step staircase */
551
- .px-button.is-circle[data-v-2aa41476] {
808
+ .px-button.is-circle[data-v-7bc34bb7] {
552
809
  padding: 8px;
553
810
  width: 36px;
554
811
  height: 36px;
555
812
  }
556
- .px-button.is-circle[data-v-2aa41476]::before, .px-button.is-circle[data-v-2aa41476]::after {
813
+ .px-button.is-circle[data-v-7bc34bb7]::before, .px-button.is-circle[data-v-7bc34bb7]::after {
557
814
  clip-path: polygon(
558
815
  0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
559
816
  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,
@@ -562,32 +819,32 @@
562
819
  );
563
820
  }
564
821
  /* Disabled state */
565
- .px-button.is-loading[data-v-2aa41476],
566
- .px-button.is-disabled[data-v-2aa41476],
567
- .px-button.is-disabled[data-v-2aa41476]:hover,
568
- .px-button.is-disabled[data-v-2aa41476]:focus,
569
- .px-button[disabled][data-v-2aa41476],
570
- .px-button[disabled][data-v-2aa41476]:hover,
571
- .px-button[disabled][data-v-2aa41476]:focus {
822
+ .px-button.is-loading[data-v-7bc34bb7],
823
+ .px-button.is-disabled[data-v-7bc34bb7],
824
+ .px-button.is-disabled[data-v-7bc34bb7]:hover,
825
+ .px-button.is-disabled[data-v-7bc34bb7]:focus,
826
+ .px-button[disabled][data-v-7bc34bb7],
827
+ .px-button[disabled][data-v-7bc34bb7]:hover,
828
+ .px-button[disabled][data-v-7bc34bb7]:focus {
572
829
  color: var(--px-button-disabled-text-color);
573
830
  cursor: not-allowed;
574
831
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
575
832
  transform: none;
576
833
  opacity: 0.6;
577
834
  }
578
- .px-button.is-loading[data-v-2aa41476]::before, .px-button.is-disabled[data-v-2aa41476]::before, .px-button.is-disabled[data-v-2aa41476]:hover::before, .px-button.is-disabled[data-v-2aa41476]:focus::before, .px-button[disabled][data-v-2aa41476]::before, .px-button[disabled][data-v-2aa41476]:hover::before, .px-button[disabled][data-v-2aa41476]:focus::before {
835
+ .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 {
579
836
  background: var(--px-button-disabled-border-color);
580
837
  }
581
- .px-button.is-loading[data-v-2aa41476]::after, .px-button.is-disabled[data-v-2aa41476]::after, .px-button.is-disabled[data-v-2aa41476]:hover::after, .px-button.is-disabled[data-v-2aa41476]:focus::after, .px-button[disabled][data-v-2aa41476]::after, .px-button[disabled][data-v-2aa41476]:hover::after, .px-button[disabled][data-v-2aa41476]:focus::after {
838
+ .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 {
582
839
  background: var(--px-button-disabled-bg-color);
583
840
  }
584
841
  /* Icon sizing */
585
- .px-button [class*='px-icon'][data-v-2aa41476] {
842
+ .px-button [class*='px-icon'][data-v-7bc34bb7] {
586
843
  width: 1em;
587
844
  height: 1em;
588
845
  }
589
846
  /* Type variants - Colored buttons */
590
- .px-button--primary[data-v-2aa41476] {
847
+ .px-button--primary[data-v-7bc34bb7] {
591
848
  --px-button-text-color: var(--px-color-white);
592
849
  --px-button-bg-color: var(--px-color-primary);
593
850
  --px-button-border-color: var(--px-color-primary-dark);
@@ -602,8 +859,35 @@
602
859
  --px-button-disabled-bg-color: var(--px-color-primary-light-5);
603
860
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
604
861
  }
862
+ /* Dash variant for type buttons */
863
+ .px-button--primary.is-dash[data-v-7bc34bb7] {
864
+ --px-button-text-color: var(--px-color-primary);
865
+ --px-button-bg-color: var(--px-color-primary-light-9);
866
+ --px-button-border-color: var(--px-color-primary);
867
+ --px-button-shadow-color: transparent;
868
+ --px-button-hover-text-color: var(--px-color-primary-dark);
869
+ --px-button-hover-bg-color: var(--px-color-primary-light-7);
870
+ --px-button-hover-border-color: var(--px-color-primary-dark);
871
+ --px-button-active-text-color: var(--px-color-white);
872
+ --px-button-active-bg-color: var(--px-color-primary);
873
+ --px-button-active-border-color: var(--px-color-primary-dark);
874
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
875
+ --px-button-disabled-bg-color: var(--px-color-primary-light-9);
876
+ --px-button-disabled-border-color: var(--px-color-primary-light-5);
877
+ }
878
+ /* Ghost variant for type buttons */
879
+ .px-button--primary.is-ghost[data-v-7bc34bb7] {
880
+ --px-button-text-color: var(--px-color-primary);
881
+ --px-button-shadow-color: transparent;
882
+ --px-button-hover-text-color: var(--px-color-primary-dark);
883
+ --px-button-hover-bg-color: var(--px-color-primary-light-9);
884
+ --px-button-active-text-color: var(--px-color-primary-dark);
885
+ --px-button-active-bg-color: var(--px-color-primary-light-7);
886
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
887
+ --px-button-disabled-bg-color: transparent;
888
+ }
605
889
  /* Plain variant for type buttons */
606
- .px-button--primary.is-plain[data-v-2aa41476] {
890
+ .px-button--primary.is-plain[data-v-7bc34bb7] {
607
891
  --px-button-text-color: var(--px-color-primary);
608
892
  --px-button-bg-color: var(--px-color-primary-light-9);
609
893
  --px-button-border-color: var(--px-color-primary);
@@ -617,10 +901,10 @@
617
901
  --px-button-disabled-bg-color: var(--px-color-primary-light-9);
618
902
  --px-button-disabled-border-color: var(--px-color-primary-light-7);
619
903
  }
620
- .px-button--primary.is-plain[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
904
+ .px-button--primary.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
621
905
  --px-button-shadow-color: var(--px-color-primary-dark);
622
906
  }
623
- .px-button--success[data-v-2aa41476] {
907
+ .px-button--success[data-v-7bc34bb7] {
624
908
  --px-button-text-color: var(--px-color-white);
625
909
  --px-button-bg-color: var(--px-color-success);
626
910
  --px-button-border-color: var(--px-color-success-dark);
@@ -635,8 +919,35 @@
635
919
  --px-button-disabled-bg-color: var(--px-color-success-light-5);
636
920
  --px-button-disabled-border-color: var(--px-color-success-light-5);
637
921
  }
922
+ /* Dash variant for type buttons */
923
+ .px-button--success.is-dash[data-v-7bc34bb7] {
924
+ --px-button-text-color: var(--px-color-success);
925
+ --px-button-bg-color: var(--px-color-success-light-9);
926
+ --px-button-border-color: var(--px-color-success);
927
+ --px-button-shadow-color: transparent;
928
+ --px-button-hover-text-color: var(--px-color-success-dark);
929
+ --px-button-hover-bg-color: var(--px-color-success-light-7);
930
+ --px-button-hover-border-color: var(--px-color-success-dark);
931
+ --px-button-active-text-color: var(--px-color-white);
932
+ --px-button-active-bg-color: var(--px-color-success);
933
+ --px-button-active-border-color: var(--px-color-success-dark);
934
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
935
+ --px-button-disabled-bg-color: var(--px-color-success-light-9);
936
+ --px-button-disabled-border-color: var(--px-color-success-light-5);
937
+ }
938
+ /* Ghost variant for type buttons */
939
+ .px-button--success.is-ghost[data-v-7bc34bb7] {
940
+ --px-button-text-color: var(--px-color-success);
941
+ --px-button-shadow-color: transparent;
942
+ --px-button-hover-text-color: var(--px-color-success-dark);
943
+ --px-button-hover-bg-color: var(--px-color-success-light-9);
944
+ --px-button-active-text-color: var(--px-color-success-dark);
945
+ --px-button-active-bg-color: var(--px-color-success-light-7);
946
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
947
+ --px-button-disabled-bg-color: transparent;
948
+ }
638
949
  /* Plain variant for type buttons */
639
- .px-button--success.is-plain[data-v-2aa41476] {
950
+ .px-button--success.is-plain[data-v-7bc34bb7] {
640
951
  --px-button-text-color: var(--px-color-success);
641
952
  --px-button-bg-color: var(--px-color-success-light-9);
642
953
  --px-button-border-color: var(--px-color-success);
@@ -650,10 +961,10 @@
650
961
  --px-button-disabled-bg-color: var(--px-color-success-light-9);
651
962
  --px-button-disabled-border-color: var(--px-color-success-light-7);
652
963
  }
653
- .px-button--success.is-plain[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
964
+ .px-button--success.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
654
965
  --px-button-shadow-color: var(--px-color-success-dark);
655
966
  }
656
- .px-button--warning[data-v-2aa41476] {
967
+ .px-button--warning[data-v-7bc34bb7] {
657
968
  --px-button-text-color: var(--px-color-white);
658
969
  --px-button-bg-color: var(--px-color-warning);
659
970
  --px-button-border-color: var(--px-color-warning-dark);
@@ -668,8 +979,35 @@
668
979
  --px-button-disabled-bg-color: var(--px-color-warning-light-5);
669
980
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
670
981
  }
982
+ /* Dash variant for type buttons */
983
+ .px-button--warning.is-dash[data-v-7bc34bb7] {
984
+ --px-button-text-color: var(--px-color-warning);
985
+ --px-button-bg-color: var(--px-color-warning-light-9);
986
+ --px-button-border-color: var(--px-color-warning);
987
+ --px-button-shadow-color: transparent;
988
+ --px-button-hover-text-color: var(--px-color-warning-dark);
989
+ --px-button-hover-bg-color: var(--px-color-warning-light-7);
990
+ --px-button-hover-border-color: var(--px-color-warning-dark);
991
+ --px-button-active-text-color: var(--px-color-white);
992
+ --px-button-active-bg-color: var(--px-color-warning);
993
+ --px-button-active-border-color: var(--px-color-warning-dark);
994
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
995
+ --px-button-disabled-bg-color: var(--px-color-warning-light-9);
996
+ --px-button-disabled-border-color: var(--px-color-warning-light-5);
997
+ }
998
+ /* Ghost variant for type buttons */
999
+ .px-button--warning.is-ghost[data-v-7bc34bb7] {
1000
+ --px-button-text-color: var(--px-color-warning);
1001
+ --px-button-shadow-color: transparent;
1002
+ --px-button-hover-text-color: var(--px-color-warning-dark);
1003
+ --px-button-hover-bg-color: var(--px-color-warning-light-9);
1004
+ --px-button-active-text-color: var(--px-color-warning-dark);
1005
+ --px-button-active-bg-color: var(--px-color-warning-light-7);
1006
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
1007
+ --px-button-disabled-bg-color: transparent;
1008
+ }
671
1009
  /* Plain variant for type buttons */
672
- .px-button--warning.is-plain[data-v-2aa41476] {
1010
+ .px-button--warning.is-plain[data-v-7bc34bb7] {
673
1011
  --px-button-text-color: var(--px-color-warning);
674
1012
  --px-button-bg-color: var(--px-color-warning-light-9);
675
1013
  --px-button-border-color: var(--px-color-warning);
@@ -683,10 +1021,10 @@
683
1021
  --px-button-disabled-bg-color: var(--px-color-warning-light-9);
684
1022
  --px-button-disabled-border-color: var(--px-color-warning-light-7);
685
1023
  }
686
- .px-button--warning.is-plain[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
1024
+ .px-button--warning.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
687
1025
  --px-button-shadow-color: var(--px-color-warning-dark);
688
1026
  }
689
- .px-button--info[data-v-2aa41476] {
1027
+ .px-button--info[data-v-7bc34bb7] {
690
1028
  --px-button-text-color: var(--px-color-white);
691
1029
  --px-button-bg-color: var(--px-color-info);
692
1030
  --px-button-border-color: var(--px-color-info-dark);
@@ -701,8 +1039,35 @@
701
1039
  --px-button-disabled-bg-color: var(--px-color-info-light-5);
702
1040
  --px-button-disabled-border-color: var(--px-color-info-light-5);
703
1041
  }
1042
+ /* Dash variant for type buttons */
1043
+ .px-button--info.is-dash[data-v-7bc34bb7] {
1044
+ --px-button-text-color: var(--px-color-info);
1045
+ --px-button-bg-color: var(--px-color-info-light-9);
1046
+ --px-button-border-color: var(--px-color-info);
1047
+ --px-button-shadow-color: transparent;
1048
+ --px-button-hover-text-color: var(--px-color-info-dark);
1049
+ --px-button-hover-bg-color: var(--px-color-info-light-7);
1050
+ --px-button-hover-border-color: var(--px-color-info-dark);
1051
+ --px-button-active-text-color: var(--px-color-white);
1052
+ --px-button-active-bg-color: var(--px-color-info);
1053
+ --px-button-active-border-color: var(--px-color-info-dark);
1054
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
1055
+ --px-button-disabled-bg-color: var(--px-color-info-light-9);
1056
+ --px-button-disabled-border-color: var(--px-color-info-light-5);
1057
+ }
1058
+ /* Ghost variant for type buttons */
1059
+ .px-button--info.is-ghost[data-v-7bc34bb7] {
1060
+ --px-button-text-color: var(--px-color-info);
1061
+ --px-button-shadow-color: transparent;
1062
+ --px-button-hover-text-color: var(--px-color-info-dark);
1063
+ --px-button-hover-bg-color: var(--px-color-info-light-9);
1064
+ --px-button-active-text-color: var(--px-color-info-dark);
1065
+ --px-button-active-bg-color: var(--px-color-info-light-7);
1066
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
1067
+ --px-button-disabled-bg-color: transparent;
1068
+ }
704
1069
  /* Plain variant for type buttons */
705
- .px-button--info.is-plain[data-v-2aa41476] {
1070
+ .px-button--info.is-plain[data-v-7bc34bb7] {
706
1071
  --px-button-text-color: var(--px-color-info);
707
1072
  --px-button-bg-color: var(--px-color-info-light-9);
708
1073
  --px-button-border-color: var(--px-color-info);
@@ -716,10 +1081,10 @@
716
1081
  --px-button-disabled-bg-color: var(--px-color-info-light-9);
717
1082
  --px-button-disabled-border-color: var(--px-color-info-light-7);
718
1083
  }
719
- .px-button--info.is-plain[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
1084
+ .px-button--info.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
720
1085
  --px-button-shadow-color: var(--px-color-info-dark);
721
1086
  }
722
- .px-button--danger[data-v-2aa41476] {
1087
+ .px-button--danger[data-v-7bc34bb7] {
723
1088
  --px-button-text-color: var(--px-color-white);
724
1089
  --px-button-bg-color: var(--px-color-danger);
725
1090
  --px-button-border-color: var(--px-color-danger-dark);
@@ -734,8 +1099,35 @@
734
1099
  --px-button-disabled-bg-color: var(--px-color-danger-light-5);
735
1100
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
736
1101
  }
1102
+ /* Dash variant for type buttons */
1103
+ .px-button--danger.is-dash[data-v-7bc34bb7] {
1104
+ --px-button-text-color: var(--px-color-danger);
1105
+ --px-button-bg-color: var(--px-color-danger-light-9);
1106
+ --px-button-border-color: var(--px-color-danger);
1107
+ --px-button-shadow-color: transparent;
1108
+ --px-button-hover-text-color: var(--px-color-danger-dark);
1109
+ --px-button-hover-bg-color: var(--px-color-danger-light-7);
1110
+ --px-button-hover-border-color: var(--px-color-danger-dark);
1111
+ --px-button-active-text-color: var(--px-color-white);
1112
+ --px-button-active-bg-color: var(--px-color-danger);
1113
+ --px-button-active-border-color: var(--px-color-danger-dark);
1114
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
1115
+ --px-button-disabled-bg-color: var(--px-color-danger-light-9);
1116
+ --px-button-disabled-border-color: var(--px-color-danger-light-5);
1117
+ }
1118
+ /* Ghost variant for type buttons */
1119
+ .px-button--danger.is-ghost[data-v-7bc34bb7] {
1120
+ --px-button-text-color: var(--px-color-danger);
1121
+ --px-button-shadow-color: transparent;
1122
+ --px-button-hover-text-color: var(--px-color-danger-dark);
1123
+ --px-button-hover-bg-color: var(--px-color-danger-light-9);
1124
+ --px-button-active-text-color: var(--px-color-danger-dark);
1125
+ --px-button-active-bg-color: var(--px-color-danger-light-7);
1126
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
1127
+ --px-button-disabled-bg-color: transparent;
1128
+ }
737
1129
  /* Plain variant for type buttons */
738
- .px-button--danger.is-plain[data-v-2aa41476] {
1130
+ .px-button--danger.is-plain[data-v-7bc34bb7] {
739
1131
  --px-button-text-color: var(--px-color-danger);
740
1132
  --px-button-bg-color: var(--px-color-danger-light-9);
741
1133
  --px-button-border-color: var(--px-color-danger);
@@ -749,69 +1141,69 @@
749
1141
  --px-button-disabled-bg-color: var(--px-color-danger-light-9);
750
1142
  --px-button-disabled-border-color: var(--px-color-danger-light-7);
751
1143
  }
752
- .px-button--danger.is-plain[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
1144
+ .px-button--danger.is-plain[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
753
1145
  --px-button-shadow-color: var(--px-color-danger-dark);
754
1146
  }
755
1147
  /* Size variants */
756
- .px-button--large[data-v-2aa41476] {
1148
+ .px-button--large[data-v-7bc34bb7] {
757
1149
  --px-button-size: 44px;
758
1150
  height: var(--px-button-size);
759
1151
  padding: 12px 24px;
760
1152
  font-size: var(--px-font-size-large);
761
1153
  }
762
- .px-button--large.is-circle[data-v-2aa41476] {
1154
+ .px-button--large.is-circle[data-v-7bc34bb7] {
763
1155
  padding: 12px;
764
1156
  width: 44px;
765
1157
  }
766
- .px-button--small[data-v-2aa41476] {
1158
+ .px-button--small[data-v-7bc34bb7] {
767
1159
  --px-button-size: 28px;
768
1160
  height: var(--px-button-size);
769
1161
  padding: 4px 12px;
770
1162
  font-size: var(--px-font-size-small);
771
1163
  filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
772
1164
  }
773
- .px-button--small[data-v-2aa41476]:hover:not(.is-disabled):not(.is-loading) {
1165
+ .px-button--small[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
774
1166
  transform: translate(-1px, -1px);
775
1167
  filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
776
1168
  }
777
- .px-button--small[data-v-2aa41476]:active:not(.is-disabled):not(.is-loading) {
1169
+ .px-button--small[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
778
1170
  transform: translate(1px, 1px);
779
1171
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
780
1172
  }
781
- .px-button--small.is-circle[data-v-2aa41476] {
1173
+ .px-button--small.is-circle[data-v-7bc34bb7] {
782
1174
  padding: 4px;
783
1175
  width: 28px;
784
1176
  }
785
- .px-button--small [class*='px-icon'][data-v-2aa41476] {
1177
+ .px-button--small [class*='px-icon'][data-v-7bc34bb7] {
786
1178
  width: 12px;
787
1179
  height: 12px;
788
1180
  }
789
1181
  /* Button Group */
790
- .px-button-group[data-v-2aa41476] {
1182
+ .px-button-group[data-v-7bc34bb7] {
791
1183
  display: inline-flex;
792
1184
  vertical-align: middle;
793
1185
  /* Unified shadow for the whole group — traces all buttons' pixel shapes */
794
1186
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
795
1187
  }
796
1188
  /* Buttons keep their pseudo-element borders, group provides unified shadow */
797
- .px-button-group[data-v-2aa41476] > .px-button {
1189
+ .px-button-group[data-v-7bc34bb7] > .px-button {
798
1190
  filter: none;
799
1191
  margin-left: 0;
800
1192
  }
801
- .px-button-group[data-v-2aa41476] > .px-button:not(:first-child) {
1193
+ .px-button-group[data-v-7bc34bb7] > .px-button:not(:first-child) {
802
1194
  margin-left: -2px;
803
1195
  }
804
- .px-button-group[data-v-2aa41476] > .px-button:hover:not(.is-disabled):not(.is-loading) {
1196
+ .px-button-group[data-v-7bc34bb7] > .px-button:hover:not(.is-disabled):not(.is-loading) {
805
1197
  transform: none;
806
1198
  filter: none;
807
1199
  z-index: 1;
808
1200
  }
809
- .px-button-group[data-v-2aa41476] > .px-button:active:not(.is-disabled):not(.is-loading) {
1201
+ .px-button-group[data-v-7bc34bb7] > .px-button:active:not(.is-disabled):not(.is-loading) {
810
1202
  transform: none;
811
1203
  filter: none;
812
1204
  }
813
1205
  /* First button (multi): notched left, straight right */
814
- .px-button-group[data-v-2aa41476] > .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-2aa41476] > .px-button:first-child:not(:last-child)::after {
1206
+ .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 {
815
1207
  clip-path: polygon(
816
1208
  0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
817
1209
  100% 0,
@@ -820,7 +1212,7 @@
820
1212
  );
821
1213
  }
822
1214
  /* Last button (multi): straight left, notched right */
823
- .px-button-group[data-v-2aa41476] > .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-2aa41476] > .px-button:last-child:not(:first-child)::after {
1215
+ .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 {
824
1216
  clip-path: polygon(
825
1217
  0 0,
826
1218
  calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -829,6 +1221,6 @@
829
1221
  );
830
1222
  }
831
1223
  /* Middle buttons: straight rectangle, no notches */
832
- .px-button-group[data-v-2aa41476] > .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-2aa41476] > .px-button:not(:first-child):not(:last-child)::after {
1224
+ .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 {
833
1225
  clip-path: none;
834
1226
  }