sakana-element 2.1.2 → 2.1.4

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 (66) hide show
  1. package/README.md +81 -79
  2. package/dist/es/Alert-C76ZWSVk.js +19 -0
  3. package/dist/es/Badge-BG-vYP8Y.js +13 -0
  4. package/dist/es/Button-fW_ZOLmT.js +24 -0
  5. package/dist/es/Card-BCBnlVi_.js +12 -0
  6. package/dist/es/{Collapse-l_8qKOBG.js → Collapse-B08VhCVq.js} +2 -2
  7. package/dist/es/{ConfigProvider-BPm3h9RG.js → ConfigProvider-DZO1d5Eq.js} +1 -1
  8. package/dist/es/{Dropdown-ZjZ0qSn2.js → Dropdown-49nf6F8P.js} +11 -11
  9. package/dist/es/{Form-pxRZxseS.js → Form-CGiTDSGI.js} +2 -2
  10. package/dist/es/{Icon-UBaqO2nY.js → Icon-DpJyuj7c.js} +1 -1
  11. package/dist/es/Input-DBPpvf0Y.js +42 -0
  12. package/dist/es/{Loading-BJJBJhg3.js → Loading-DlygqGOv.js} +2 -2
  13. package/dist/es/{Message-CqBKW0c8.js → Message-ganFfLeU.js} +14 -14
  14. package/dist/es/{Notification-CVACM2cj.js → Notification-D4RYHV9o.js} +8 -8
  15. package/dist/es/{Overlay-C1k4Jcl7.js → Overlay-BRDSWspM.js} +1 -1
  16. package/dist/es/{Popconfirm-CW8oRycq.js → Popconfirm-Cop44KwQ.js} +4 -4
  17. package/dist/es/Select-TIoGsqKv.js +133 -0
  18. package/dist/es/Switch-CHjcLtHs.js +34 -0
  19. package/dist/es/{Tooltip-D9rQ4LEg.js → Tooltip-HWx_i2FA.js} +23 -23
  20. package/dist/es/{hooks-DNMt3QPi.js → hooks-CYdEHUVd.js} +6 -5
  21. package/dist/es/index.js +59 -55
  22. package/dist/es/utils-bsCscZfS.js +84 -0
  23. package/dist/index.css +1 -1
  24. package/dist/theme/Alert.css +114 -38
  25. package/dist/theme/Badge.css +208 -0
  26. package/dist/theme/Button.css +365 -105
  27. package/dist/theme/Card.css +112 -0
  28. package/dist/theme/Collapse.css +2 -2
  29. package/dist/theme/Dropdown.css +4 -4
  30. package/dist/theme/Input.css +213 -4
  31. package/dist/theme/Select.css +182 -38
  32. package/dist/theme/Switch.css +56 -0
  33. package/dist/theme/Tooltip.css +10 -10
  34. package/dist/theme/fonts/zpix.woff2 +0 -0
  35. package/dist/theme/index.css +21 -3
  36. package/dist/types/components/Alert/types.d.ts +3 -0
  37. package/dist/types/components/Badge/index.d.ts +27 -0
  38. package/dist/types/components/Badge/types.d.ts +10 -0
  39. package/dist/types/components/Button/constants.d.ts +2 -0
  40. package/dist/types/components/Button/types.d.ts +3 -0
  41. package/dist/types/components/Card/index.d.ts +26 -0
  42. package/dist/types/components/Card/types.d.ts +6 -0
  43. package/dist/types/components/Input/constants.d.ts +3 -0
  44. package/dist/types/components/Input/types.d.ts +2 -0
  45. package/dist/types/components/Select/constants.d.ts +3 -0
  46. package/dist/types/components/Select/index.d.ts +7 -5
  47. package/dist/types/components/Select/types.d.ts +4 -1
  48. package/dist/types/components/Select/useKeyMap.d.ts +1 -1
  49. package/dist/types/components/Switch/types.d.ts +6 -0
  50. package/dist/types/components/Tooltip/useEventsToTriggerNode.d.ts +4 -0
  51. package/dist/types/components/index.d.ts +2 -0
  52. package/dist/types/hooks/useSystemTheme.d.ts +1 -1
  53. package/dist/types/utils/color.d.ts +33 -0
  54. package/dist/types/utils/index.d.ts +1 -0
  55. package/dist/umd/index.css +1 -1
  56. package/dist/umd/index.css.gz +0 -0
  57. package/dist/umd/index.umd.cjs +3 -3
  58. package/dist/umd/index.umd.cjs.gz +0 -0
  59. package/package.json +1 -1
  60. package/dist/es/Alert-C5X-XFGJ.js +0 -15
  61. package/dist/es/Button-DTik2ZP6.js +0 -33
  62. package/dist/es/Input-BJoBaFXa.js +0 -38
  63. package/dist/es/Select-C7mwByXa.js +0 -126
  64. package/dist/es/Switch-CgFPFC3j.js +0 -22
  65. package/dist/es/utils-340oIQ8K.js +0 -59
  66. package/dist/types/components/Tooltip/useEventsToTiggerNode.d.ts +0 -4
package/dist/theme/Button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Button Group Variables */
2
- .px-button-group[data-v-7044e22a] {
2
+ .px-button-group[data-v-938fe053] {
3
3
  --px-button-group-border-color: var(--px-border-color-lighter);
4
4
  }
5
5
  /* Button Base Variables */
6
- .px-button[data-v-7044e22a] {
6
+ .px-button[data-v-938fe053] {
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);
@@ -11,17 +11,17 @@
11
11
  --px-button-disabled-text-color: var(--px-disabled-text-color);
12
12
  --px-button-disabled-bg-color: var(--px-fill-color-light);
13
13
  --px-button-disabled-border-color: var(--px-border-color-lighter);
14
- --px-button-hover-text-color: var(--px-color-primary);
15
- --px-button-hover-bg-color: var(--px-color-primary-light-9);
16
- --px-button-hover-border-color: var(--px-color-primary);
17
- --px-button-active-text-color: var(--px-color-primary-dark);
18
- --px-button-active-border-color: var(--px-color-primary-dark);
19
- --px-button-active-bg-color: var(--px-color-primary-light-7);
14
+ --px-button-hover-text-color: var(--px-hover-text-color);
15
+ --px-button-hover-bg-color: var(--px-hover-bg-color);
16
+ --px-button-hover-border-color: var(--px-hover-border-color);
17
+ --px-button-active-text-color: var(--px-active-text-color);
18
+ --px-button-active-border-color: var(--px-active-border-color);
19
+ --px-button-active-bg-color: var(--px-active-bg-color);
20
20
  --px-button-outline-color: var(--px-color-primary-light-5);
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-7044e22a] {
24
+ .px-button[data-v-938fe053] {
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-7044e22a]::before {
56
+ .px-button[data-v-938fe053]::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-7044e22a]::after {
70
+ .px-button[data-v-938fe053]::after {
71
71
  content: '';
72
72
  position: absolute;
73
73
  inset: 2px;
@@ -80,110 +80,200 @@
80
80
  );
81
81
  z-index: -1;
82
82
  }
83
- .px-button + .px-button[data-v-7044e22a] {
83
+ .px-button + .px-button[data-v-938fe053] {
84
84
  margin-left: 12px;
85
85
  }
86
86
  /* Hover - Lift effect */
87
- .px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
87
+ .px-button[data-v-938fe053]: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-7044e22a]:hover:not(.is-disabled):not(.is-loading)::before {
92
+ .px-button[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::before {
93
93
  background: var(--px-button-hover-border-color);
94
94
  }
95
- .px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
95
+ .px-button[data-v-938fe053]: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-7044e22a]:active:not(.is-disabled):not(.is-loading) {
99
+ .px-button[data-v-938fe053]: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-7044e22a]:active:not(.is-disabled):not(.is-loading)::before {
104
+ .px-button[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::before {
105
105
  background: var(--px-button-active-border-color);
106
106
  }
107
- .px-button[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
107
+ .px-button[data-v-938fe053]: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-7044e22a]:focus-visible {
111
+ .px-button[data-v-938fe053]: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-7044e22a] {
116
+ .px-button.is-plain[data-v-938fe053] {
117
117
  --px-button-bg-color: var(--px-fill-color-blank);
118
+ --px-button-hover-text-color: var(--px-hover-bg-color);
118
119
  --px-button-hover-bg-color: var(--px-fill-color-light);
119
- --px-button-hover-border-color: var(--px-color-primary);
120
+ --px-button-hover-border-color: var(--px-hover-border-color);
120
121
  }
121
122
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
122
- .px-button.is-dash[data-v-7044e22a] {
123
+ .px-button.is-dash[data-v-938fe053] {
123
124
  border: 2px dashed var(--px-button-border-color);
124
- filter: none;
125
+ filter: none;
126
+ isolation: isolate;
127
+ --px-button-hover-text-color: var(--px-hover-bg-color);
128
+ --px-button-hover-bg-color: var(--px-fill-color-light);
125
129
  }
126
- .px-button.is-dash[data-v-7044e22a]::before {
130
+ .px-button.is-dash[data-v-938fe053]::before {
127
131
  display: none;
128
132
  }
129
- .px-button.is-dash[data-v-7044e22a]::after {
133
+ .px-button.is-dash[data-v-938fe053]::after {
130
134
  clip-path: none;
131
135
  inset: 0;
132
136
  background: var(--px-button-bg-color);
133
137
  }
134
- .px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
138
+ .px-button.is-dash[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
135
139
  transform: none;
136
140
  filter: none;
137
141
  border-color: var(--px-button-hover-border-color);
138
142
  }
139
- .px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
143
+ .px-button.is-dash[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::after {
140
144
  background: var(--px-button-hover-bg-color);
141
145
  }
142
- .px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
146
+ .px-button.is-dash[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
143
147
  transform: none;
144
148
  filter: none;
145
149
  border-color: var(--px-button-active-border-color);
146
150
  }
147
- .px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
151
+ .px-button.is-dash[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::after {
148
152
  background: var(--px-button-active-bg-color);
149
153
  }
150
154
  /* Ghost variant - No border/background, subtle hover fill */
151
- .px-button.is-ghost[data-v-7044e22a] {
155
+ .px-button.is-ghost[data-v-938fe053] {
152
156
  filter: none;
153
- --px-button-shadow-color: transparent;
157
+ isolation: isolate;
158
+ --px-button-shadow-color: transparent;
159
+ --px-button-hover-text-color: var(--px-hover-bg-color);
160
+ --px-button-hover-bg-color: var(--px-fill-color-light);
154
161
  }
155
- .px-button.is-ghost[data-v-7044e22a]::before {
162
+ .px-button.is-ghost[data-v-938fe053]::before {
156
163
  display: none;
157
164
  }
158
- .px-button.is-ghost[data-v-7044e22a]::after {
165
+ .px-button.is-ghost[data-v-938fe053]::after {
159
166
  clip-path: none;
160
167
  inset: 0;
161
168
  background: transparent;
162
169
  }
163
- .px-button.is-ghost[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
170
+ .px-button.is-ghost[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
164
171
  transform: none;
165
172
  filter: none;
166
173
  color: var(--px-button-hover-text-color);
167
174
  }
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));
175
+ .px-button.is-ghost[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading)::after {
176
+ background: var(--px-button-hover-bg-color);
170
177
  }
171
- .px-button.is-ghost[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
178
+ .px-button.is-ghost[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
172
179
  transform: none;
173
180
  filter: none;
174
181
  color: var(--px-button-active-text-color);
175
182
  }
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));
183
+ .px-button.is-ghost[data-v-938fe053]:active:not(.is-disabled):not(.is-loading)::after {
184
+ background: var(--px-button-active-bg-color);
178
185
  }
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 {
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 {
180
187
  background: transparent;
181
188
  }
189
+ /* Link variant - Underlined text, no border/background/shadow */
190
+ .px-button.is-link[data-v-938fe053] {
191
+ filter: none;
192
+ --px-button-shadow-color: transparent;
193
+ --px-button-hover-text-color: var(--px-hover-bg-color);
194
+ text-decoration: underline;
195
+ text-underline-offset: 3px;
196
+ padding: 8px 4px;
197
+ }
198
+ .px-button.is-link[data-v-938fe053]::before {
199
+ display: none;
200
+ }
201
+ .px-button.is-link[data-v-938fe053]::after {
202
+ display: none;
203
+ }
204
+ .px-button.is-link[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
205
+ transform: none;
206
+ filter: none;
207
+ color: var(--px-button-hover-text-color);
208
+ opacity: 0.8;
209
+ }
210
+ .px-button.is-link[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
211
+ transform: none;
212
+ filter: none;
213
+ color: var(--px-button-active-text-color);
214
+ opacity: 0.6;
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 {
223
+ filter: none;
224
+ opacity: 0.4;
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 {
227
+ display: none;
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 {
230
+ display: none;
231
+ }
232
+ /* Block variant - Full-width button */
233
+ .px-button.is-block[data-v-938fe053] {
234
+ display: flex;
235
+ width: 100%;
236
+ margin-left: 0;
237
+ }
238
+ /* Responsive variant - Viewport-adaptive sizing */
239
+ .px-button.is-responsive[data-v-938fe053] {
240
+ height: 24px;
241
+ padding: 4px 8px;
242
+ font-size: var(--px-font-size-extra-small);
243
+ }
244
+ @media (min-width: 640px) {
245
+ .px-button.is-responsive[data-v-938fe053] {
246
+ height: 28px;
247
+ padding: 4px 12px;
248
+ font-size: var(--px-font-size-small)
249
+ }
250
+ }
251
+ @media (min-width: 768px) {
252
+ .px-button.is-responsive[data-v-938fe053] {
253
+ height: 36px;
254
+ padding: 8px 16px;
255
+ font-size: var(--px-font-size-base)
256
+ }
257
+ }
258
+ @media (min-width: 1024px) {
259
+ .px-button.is-responsive[data-v-938fe053] {
260
+ height: 44px;
261
+ padding: 12px 24px;
262
+ font-size: var(--px-font-size-large)
263
+ }
264
+ }
265
+ @media (min-width: 1280px) {
266
+ .px-button.is-responsive[data-v-938fe053] {
267
+ height: 44px;
268
+ padding: 12px 32px;
269
+ font-size: var(--px-font-size-large)
270
+ }
271
+ }
182
272
  /* Round - Pixel-style rounded with 3-step staircase corners */
183
- .px-button.is-round[data-v-7044e22a] {
273
+ .px-button.is-round[data-v-938fe053] {
184
274
  padding: 8px 20px;
185
275
  }
186
- .px-button.is-round[data-v-7044e22a]::before, .px-button.is-round[data-v-7044e22a]::after {
276
+ .px-button.is-round[data-v-938fe053]::before, .px-button.is-round[data-v-938fe053]::after {
187
277
  clip-path: polygon(
188
278
  0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
189
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,
@@ -192,12 +282,12 @@
192
282
  );
193
283
  }
194
284
  /* Circle - Pixel circle approximation with 4-step staircase */
195
- .px-button.is-circle[data-v-7044e22a] {
285
+ .px-button.is-circle[data-v-938fe053] {
196
286
  padding: 8px;
197
287
  width: 36px;
198
288
  height: 36px;
199
289
  }
200
- .px-button.is-circle[data-v-7044e22a]::before, .px-button.is-circle[data-v-7044e22a]::after {
290
+ .px-button.is-circle[data-v-938fe053]::before, .px-button.is-circle[data-v-938fe053]::after {
201
291
  clip-path: polygon(
202
292
  0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
203
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,
@@ -206,32 +296,32 @@
206
296
  );
207
297
  }
208
298
  /* Disabled state */
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 {
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 {
216
306
  color: var(--px-button-disabled-text-color);
217
307
  cursor: not-allowed;
218
308
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
219
309
  transform: none;
220
310
  opacity: 0.6;
221
311
  }
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 {
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 {
223
313
  background: var(--px-button-disabled-border-color);
224
314
  }
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 {
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 {
226
316
  background: var(--px-button-disabled-bg-color);
227
317
  }
228
318
  /* Icon sizing */
229
- .px-button [class*='px-icon'][data-v-7044e22a] {
319
+ .px-button [class*='px-icon'][data-v-938fe053] {
230
320
  width: 1em;
231
321
  height: 1em;
232
322
  }
233
323
  /* Type variants - Colored buttons */
234
- .px-button--primary[data-v-7044e22a] {
324
+ .px-button--primary[data-v-938fe053] {
235
325
  --px-button-text-color: var(--px-color-white);
236
326
  --px-button-bg-color: var(--px-color-primary);
237
327
  --px-button-border-color: var(--px-color-primary-dark);
@@ -247,7 +337,7 @@
247
337
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
248
338
  }
249
339
  /* Dash variant for type buttons */
250
- .px-button--primary.is-dash[data-v-7044e22a] {
340
+ .px-button--primary.is-dash[data-v-938fe053] {
251
341
  --px-button-text-color: var(--px-color-primary);
252
342
  --px-button-bg-color: var(--px-color-primary-light-9);
253
343
  --px-button-border-color: var(--px-color-primary);
@@ -263,7 +353,7 @@
263
353
  --px-button-disabled-border-color: var(--px-color-primary-light-5);
264
354
  }
265
355
  /* Ghost variant for type buttons */
266
- .px-button--primary.is-ghost[data-v-7044e22a] {
356
+ .px-button--primary.is-ghost[data-v-938fe053] {
267
357
  --px-button-text-color: var(--px-color-primary);
268
358
  --px-button-shadow-color: transparent;
269
359
  --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -273,8 +363,16 @@
273
363
  --px-button-disabled-text-color: var(--px-color-primary-light-5);
274
364
  --px-button-disabled-bg-color: transparent;
275
365
  }
366
+ /* Link variant for type buttons */
367
+ .px-button--primary.is-link[data-v-938fe053] {
368
+ --px-button-text-color: var(--px-color-primary);
369
+ --px-button-shadow-color: transparent;
370
+ --px-button-hover-text-color: var(--px-color-primary-dark);
371
+ --px-button-active-text-color: var(--px-active-text-color);
372
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
373
+ }
276
374
  /* Plain variant for type buttons */
277
- .px-button--primary.is-plain[data-v-7044e22a] {
375
+ .px-button--primary.is-plain[data-v-938fe053] {
278
376
  --px-button-text-color: var(--px-color-primary);
279
377
  --px-button-bg-color: var(--px-color-primary-light-9);
280
378
  --px-button-border-color: var(--px-color-primary);
@@ -288,10 +386,10 @@
288
386
  --px-button-disabled-bg-color: var(--px-color-primary-light-9);
289
387
  --px-button-disabled-border-color: var(--px-color-primary-light-7);
290
388
  }
291
- .px-button--primary.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
389
+ .px-button--primary.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
292
390
  --px-button-shadow-color: var(--px-color-primary-dark);
293
391
  }
294
- .px-button--success[data-v-7044e22a] {
392
+ .px-button--success[data-v-938fe053] {
295
393
  --px-button-text-color: var(--px-color-white);
296
394
  --px-button-bg-color: var(--px-color-success);
297
395
  --px-button-border-color: var(--px-color-success-dark);
@@ -307,7 +405,7 @@
307
405
  --px-button-disabled-border-color: var(--px-color-success-light-5);
308
406
  }
309
407
  /* Dash variant for type buttons */
310
- .px-button--success.is-dash[data-v-7044e22a] {
408
+ .px-button--success.is-dash[data-v-938fe053] {
311
409
  --px-button-text-color: var(--px-color-success);
312
410
  --px-button-bg-color: var(--px-color-success-light-9);
313
411
  --px-button-border-color: var(--px-color-success);
@@ -323,7 +421,7 @@
323
421
  --px-button-disabled-border-color: var(--px-color-success-light-5);
324
422
  }
325
423
  /* Ghost variant for type buttons */
326
- .px-button--success.is-ghost[data-v-7044e22a] {
424
+ .px-button--success.is-ghost[data-v-938fe053] {
327
425
  --px-button-text-color: var(--px-color-success);
328
426
  --px-button-shadow-color: transparent;
329
427
  --px-button-hover-text-color: var(--px-color-success-dark);
@@ -333,8 +431,16 @@
333
431
  --px-button-disabled-text-color: var(--px-color-success-light-5);
334
432
  --px-button-disabled-bg-color: transparent;
335
433
  }
434
+ /* Link variant for type buttons */
435
+ .px-button--success.is-link[data-v-938fe053] {
436
+ --px-button-text-color: var(--px-color-success);
437
+ --px-button-shadow-color: transparent;
438
+ --px-button-hover-text-color: var(--px-color-success-dark);
439
+ --px-button-active-text-color: var(--px-active-text-color);
440
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
441
+ }
336
442
  /* Plain variant for type buttons */
337
- .px-button--success.is-plain[data-v-7044e22a] {
443
+ .px-button--success.is-plain[data-v-938fe053] {
338
444
  --px-button-text-color: var(--px-color-success);
339
445
  --px-button-bg-color: var(--px-color-success-light-9);
340
446
  --px-button-border-color: var(--px-color-success);
@@ -348,10 +454,10 @@
348
454
  --px-button-disabled-bg-color: var(--px-color-success-light-9);
349
455
  --px-button-disabled-border-color: var(--px-color-success-light-7);
350
456
  }
351
- .px-button--success.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
457
+ .px-button--success.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
352
458
  --px-button-shadow-color: var(--px-color-success-dark);
353
459
  }
354
- .px-button--warning[data-v-7044e22a] {
460
+ .px-button--warning[data-v-938fe053] {
355
461
  --px-button-text-color: var(--px-color-white);
356
462
  --px-button-bg-color: var(--px-color-warning);
357
463
  --px-button-border-color: var(--px-color-warning-dark);
@@ -367,7 +473,7 @@
367
473
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
368
474
  }
369
475
  /* Dash variant for type buttons */
370
- .px-button--warning.is-dash[data-v-7044e22a] {
476
+ .px-button--warning.is-dash[data-v-938fe053] {
371
477
  --px-button-text-color: var(--px-color-warning);
372
478
  --px-button-bg-color: var(--px-color-warning-light-9);
373
479
  --px-button-border-color: var(--px-color-warning);
@@ -383,7 +489,7 @@
383
489
  --px-button-disabled-border-color: var(--px-color-warning-light-5);
384
490
  }
385
491
  /* Ghost variant for type buttons */
386
- .px-button--warning.is-ghost[data-v-7044e22a] {
492
+ .px-button--warning.is-ghost[data-v-938fe053] {
387
493
  --px-button-text-color: var(--px-color-warning);
388
494
  --px-button-shadow-color: transparent;
389
495
  --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -393,8 +499,16 @@
393
499
  --px-button-disabled-text-color: var(--px-color-warning-light-5);
394
500
  --px-button-disabled-bg-color: transparent;
395
501
  }
502
+ /* Link variant for type buttons */
503
+ .px-button--warning.is-link[data-v-938fe053] {
504
+ --px-button-text-color: var(--px-color-warning);
505
+ --px-button-shadow-color: transparent;
506
+ --px-button-hover-text-color: var(--px-color-warning-dark);
507
+ --px-button-active-text-color: var(--px-active-text-color);
508
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
509
+ }
396
510
  /* Plain variant for type buttons */
397
- .px-button--warning.is-plain[data-v-7044e22a] {
511
+ .px-button--warning.is-plain[data-v-938fe053] {
398
512
  --px-button-text-color: var(--px-color-warning);
399
513
  --px-button-bg-color: var(--px-color-warning-light-9);
400
514
  --px-button-border-color: var(--px-color-warning);
@@ -408,10 +522,10 @@
408
522
  --px-button-disabled-bg-color: var(--px-color-warning-light-9);
409
523
  --px-button-disabled-border-color: var(--px-color-warning-light-7);
410
524
  }
411
- .px-button--warning.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
525
+ .px-button--warning.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
412
526
  --px-button-shadow-color: var(--px-color-warning-dark);
413
527
  }
414
- .px-button--info[data-v-7044e22a] {
528
+ .px-button--info[data-v-938fe053] {
415
529
  --px-button-text-color: var(--px-color-white);
416
530
  --px-button-bg-color: var(--px-color-info);
417
531
  --px-button-border-color: var(--px-color-info-dark);
@@ -427,7 +541,7 @@
427
541
  --px-button-disabled-border-color: var(--px-color-info-light-5);
428
542
  }
429
543
  /* Dash variant for type buttons */
430
- .px-button--info.is-dash[data-v-7044e22a] {
544
+ .px-button--info.is-dash[data-v-938fe053] {
431
545
  --px-button-text-color: var(--px-color-info);
432
546
  --px-button-bg-color: var(--px-color-info-light-9);
433
547
  --px-button-border-color: var(--px-color-info);
@@ -443,7 +557,7 @@
443
557
  --px-button-disabled-border-color: var(--px-color-info-light-5);
444
558
  }
445
559
  /* Ghost variant for type buttons */
446
- .px-button--info.is-ghost[data-v-7044e22a] {
560
+ .px-button--info.is-ghost[data-v-938fe053] {
447
561
  --px-button-text-color: var(--px-color-info);
448
562
  --px-button-shadow-color: transparent;
449
563
  --px-button-hover-text-color: var(--px-color-info-dark);
@@ -453,8 +567,16 @@
453
567
  --px-button-disabled-text-color: var(--px-color-info-light-5);
454
568
  --px-button-disabled-bg-color: transparent;
455
569
  }
570
+ /* Link variant for type buttons */
571
+ .px-button--info.is-link[data-v-938fe053] {
572
+ --px-button-text-color: var(--px-color-info);
573
+ --px-button-shadow-color: transparent;
574
+ --px-button-hover-text-color: var(--px-color-info-dark);
575
+ --px-button-active-text-color: var(--px-active-text-color);
576
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
577
+ }
456
578
  /* Plain variant for type buttons */
457
- .px-button--info.is-plain[data-v-7044e22a] {
579
+ .px-button--info.is-plain[data-v-938fe053] {
458
580
  --px-button-text-color: var(--px-color-info);
459
581
  --px-button-bg-color: var(--px-color-info-light-9);
460
582
  --px-button-border-color: var(--px-color-info);
@@ -468,10 +590,10 @@
468
590
  --px-button-disabled-bg-color: var(--px-color-info-light-9);
469
591
  --px-button-disabled-border-color: var(--px-color-info-light-7);
470
592
  }
471
- .px-button--info.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
593
+ .px-button--info.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
472
594
  --px-button-shadow-color: var(--px-color-info-dark);
473
595
  }
474
- .px-button--danger[data-v-7044e22a] {
596
+ .px-button--danger[data-v-938fe053] {
475
597
  --px-button-text-color: var(--px-color-white);
476
598
  --px-button-bg-color: var(--px-color-danger);
477
599
  --px-button-border-color: var(--px-color-danger-dark);
@@ -487,7 +609,7 @@
487
609
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
488
610
  }
489
611
  /* Dash variant for type buttons */
490
- .px-button--danger.is-dash[data-v-7044e22a] {
612
+ .px-button--danger.is-dash[data-v-938fe053] {
491
613
  --px-button-text-color: var(--px-color-danger);
492
614
  --px-button-bg-color: var(--px-color-danger-light-9);
493
615
  --px-button-border-color: var(--px-color-danger);
@@ -503,7 +625,7 @@
503
625
  --px-button-disabled-border-color: var(--px-color-danger-light-5);
504
626
  }
505
627
  /* Ghost variant for type buttons */
506
- .px-button--danger.is-ghost[data-v-7044e22a] {
628
+ .px-button--danger.is-ghost[data-v-938fe053] {
507
629
  --px-button-text-color: var(--px-color-danger);
508
630
  --px-button-shadow-color: transparent;
509
631
  --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -513,8 +635,16 @@
513
635
  --px-button-disabled-text-color: var(--px-color-danger-light-5);
514
636
  --px-button-disabled-bg-color: transparent;
515
637
  }
638
+ /* Link variant for type buttons */
639
+ .px-button--danger.is-link[data-v-938fe053] {
640
+ --px-button-text-color: var(--px-color-danger);
641
+ --px-button-shadow-color: transparent;
642
+ --px-button-hover-text-color: var(--px-color-danger-dark);
643
+ --px-button-active-text-color: var(--px-active-text-color);
644
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
645
+ }
516
646
  /* Plain variant for type buttons */
517
- .px-button--danger.is-plain[data-v-7044e22a] {
647
+ .px-button--danger.is-plain[data-v-938fe053] {
518
648
  --px-button-text-color: var(--px-color-danger);
519
649
  --px-button-bg-color: var(--px-color-danger-light-9);
520
650
  --px-button-border-color: var(--px-color-danger);
@@ -528,69 +658,69 @@
528
658
  --px-button-disabled-bg-color: var(--px-color-danger-light-9);
529
659
  --px-button-disabled-border-color: var(--px-color-danger-light-7);
530
660
  }
531
- .px-button--danger.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
661
+ .px-button--danger.is-plain[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
532
662
  --px-button-shadow-color: var(--px-color-danger-dark);
533
663
  }
534
664
  /* Size variants */
535
- .px-button--large[data-v-7044e22a] {
665
+ .px-button--large[data-v-938fe053] {
536
666
  --px-button-size: 44px;
537
667
  height: var(--px-button-size);
538
668
  padding: 12px 24px;
539
669
  font-size: var(--px-font-size-large);
540
670
  }
541
- .px-button--large.is-circle[data-v-7044e22a] {
671
+ .px-button--large.is-circle[data-v-938fe053] {
542
672
  padding: 12px;
543
673
  width: 44px;
544
674
  }
545
- .px-button--small[data-v-7044e22a] {
675
+ .px-button--small[data-v-938fe053] {
546
676
  --px-button-size: 28px;
547
677
  height: var(--px-button-size);
548
678
  padding: 4px 12px;
549
679
  font-size: var(--px-font-size-small);
550
680
  filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
551
681
  }
552
- .px-button--small[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
682
+ .px-button--small[data-v-938fe053]:hover:not(.is-disabled):not(.is-loading) {
553
683
  transform: translate(-1px, -1px);
554
684
  filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
555
685
  }
556
- .px-button--small[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
686
+ .px-button--small[data-v-938fe053]:active:not(.is-disabled):not(.is-loading) {
557
687
  transform: translate(1px, 1px);
558
688
  filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
559
689
  }
560
- .px-button--small.is-circle[data-v-7044e22a] {
690
+ .px-button--small.is-circle[data-v-938fe053] {
561
691
  padding: 4px;
562
692
  width: 28px;
563
693
  }
564
- .px-button--small [class*='px-icon'][data-v-7044e22a] {
694
+ .px-button--small [class*='px-icon'][data-v-938fe053] {
565
695
  width: 12px;
566
696
  height: 12px;
567
697
  }
568
698
  /* Button Group */
569
- .px-button-group[data-v-7044e22a] {
699
+ .px-button-group[data-v-938fe053] {
570
700
  display: inline-flex;
571
701
  vertical-align: middle;
572
702
  /* Unified shadow for the whole group — traces all buttons' pixel shapes */
573
703
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
574
704
  }
575
705
  /* Buttons keep their pseudo-element borders, group provides unified shadow */
576
- .px-button-group[data-v-7044e22a] > .px-button {
706
+ .px-button-group[data-v-938fe053] > .px-button {
577
707
  filter: none;
578
708
  margin-left: 0;
579
709
  }
580
- .px-button-group[data-v-7044e22a] > .px-button:not(:first-child) {
710
+ .px-button-group[data-v-938fe053] > .px-button:not(:first-child) {
581
711
  margin-left: -2px;
582
712
  }
583
- .px-button-group[data-v-7044e22a] > .px-button:hover:not(.is-disabled):not(.is-loading) {
713
+ .px-button-group[data-v-938fe053] > .px-button:hover:not(.is-disabled):not(.is-loading) {
584
714
  transform: none;
585
715
  filter: none;
586
716
  z-index: 1;
587
717
  }
588
- .px-button-group[data-v-7044e22a] > .px-button:active:not(.is-disabled):not(.is-loading) {
718
+ .px-button-group[data-v-938fe053] > .px-button:active:not(.is-disabled):not(.is-loading) {
589
719
  transform: none;
590
720
  filter: none;
591
721
  }
592
722
  /* First button (multi): notched left, straight right */
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 {
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 {
594
724
  clip-path: polygon(
595
725
  0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
596
726
  100% 0,
@@ -599,7 +729,7 @@
599
729
  );
600
730
  }
601
731
  /* Last button (multi): straight left, notched right */
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 {
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 {
603
733
  clip-path: polygon(
604
734
  0 0,
605
735
  calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -608,7 +738,7 @@
608
738
  );
609
739
  }
610
740
  /* Middle buttons: straight rectangle, no notches */
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 {
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 {
612
742
  clip-path: none;
613
743
  }
614
744
  /* Button Group Variables */
@@ -624,12 +754,12 @@
624
754
  --px-button-disabled-text-color: var(--px-disabled-text-color);
625
755
  --px-button-disabled-bg-color: var(--px-fill-color-light);
626
756
  --px-button-disabled-border-color: var(--px-border-color-lighter);
627
- --px-button-hover-text-color: var(--px-color-primary);
628
- --px-button-hover-bg-color: var(--px-color-primary-light-9);
629
- --px-button-hover-border-color: var(--px-color-primary);
630
- --px-button-active-text-color: var(--px-color-primary-dark);
631
- --px-button-active-border-color: var(--px-color-primary-dark);
632
- --px-button-active-bg-color: var(--px-color-primary-light-7);
757
+ --px-button-hover-text-color: var(--px-hover-text-color);
758
+ --px-button-hover-bg-color: var(--px-hover-bg-color);
759
+ --px-button-hover-border-color: var(--px-hover-border-color);
760
+ --px-button-active-text-color: var(--px-active-text-color);
761
+ --px-button-active-border-color: var(--px-active-border-color);
762
+ --px-button-active-bg-color: var(--px-active-bg-color);
633
763
  --px-button-outline-color: var(--px-color-primary-light-5);
634
764
  --px-button-shadow-color: var(--px-shadow-color);
635
765
  }
@@ -728,13 +858,17 @@
728
858
  /* Plain variant */
729
859
  .px-button.is-plain[data-v-7bc34bb7] {
730
860
  --px-button-bg-color: var(--px-fill-color-blank);
861
+ --px-button-hover-text-color: var(--px-hover-bg-color);
731
862
  --px-button-hover-bg-color: var(--px-fill-color-light);
732
- --px-button-hover-border-color: var(--px-color-primary);
863
+ --px-button-hover-border-color: var(--px-hover-border-color);
733
864
  }
734
865
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
735
866
  .px-button.is-dash[data-v-7bc34bb7] {
736
867
  border: 2px dashed var(--px-button-border-color);
737
- filter: none;
868
+ filter: none;
869
+ isolation: isolate;
870
+ --px-button-hover-text-color: var(--px-hover-bg-color);
871
+ --px-button-hover-bg-color: var(--px-fill-color-light);
738
872
  }
739
873
  .px-button.is-dash[data-v-7bc34bb7]::before {
740
874
  display: none;
@@ -763,7 +897,10 @@
763
897
  /* Ghost variant - No border/background, subtle hover fill */
764
898
  .px-button.is-ghost[data-v-7bc34bb7] {
765
899
  filter: none;
766
- --px-button-shadow-color: transparent;
900
+ isolation: isolate;
901
+ --px-button-shadow-color: transparent;
902
+ --px-button-hover-text-color: var(--px-hover-bg-color);
903
+ --px-button-hover-bg-color: var(--px-fill-color-light);
767
904
  }
768
905
  .px-button.is-ghost[data-v-7bc34bb7]::before {
769
906
  display: none;
@@ -779,7 +916,7 @@
779
916
  color: var(--px-button-hover-text-color);
780
917
  }
781
918
  .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));
919
+ background: var(--px-button-hover-bg-color);
783
920
  }
784
921
  .px-button.is-ghost[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
785
922
  transform: none;
@@ -787,11 +924,94 @@
787
924
  color: var(--px-button-active-text-color);
788
925
  }
789
926
  .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));
927
+ background: var(--px-button-active-bg-color);
791
928
  }
792
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 {
793
930
  background: transparent;
794
931
  }
932
+ /* Link variant - Underlined text, no border/background/shadow */
933
+ .px-button.is-link[data-v-7bc34bb7] {
934
+ filter: none;
935
+ --px-button-shadow-color: transparent;
936
+ --px-button-hover-text-color: var(--px-hover-bg-color);
937
+ text-decoration: underline;
938
+ text-underline-offset: 3px;
939
+ padding: 8px 4px;
940
+ }
941
+ .px-button.is-link[data-v-7bc34bb7]::before {
942
+ display: none;
943
+ }
944
+ .px-button.is-link[data-v-7bc34bb7]::after {
945
+ display: none;
946
+ }
947
+ .px-button.is-link[data-v-7bc34bb7]:hover:not(.is-disabled):not(.is-loading) {
948
+ transform: none;
949
+ filter: none;
950
+ color: var(--px-button-hover-text-color);
951
+ opacity: 0.8;
952
+ }
953
+ .px-button.is-link[data-v-7bc34bb7]:active:not(.is-disabled):not(.is-loading) {
954
+ transform: none;
955
+ filter: none;
956
+ color: var(--px-button-active-text-color);
957
+ opacity: 0.6;
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 {
966
+ filter: none;
967
+ opacity: 0.4;
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 {
970
+ display: none;
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 {
973
+ display: none;
974
+ }
975
+ /* Block variant - Full-width button */
976
+ .px-button.is-block[data-v-7bc34bb7] {
977
+ display: flex;
978
+ width: 100%;
979
+ margin-left: 0;
980
+ }
981
+ /* Responsive variant - Viewport-adaptive sizing */
982
+ .px-button.is-responsive[data-v-7bc34bb7] {
983
+ height: 24px;
984
+ padding: 4px 8px;
985
+ font-size: var(--px-font-size-extra-small);
986
+ }
987
+ @media (min-width: 640px) {
988
+ .px-button.is-responsive[data-v-7bc34bb7] {
989
+ height: 28px;
990
+ padding: 4px 12px;
991
+ font-size: var(--px-font-size-small)
992
+ }
993
+ }
994
+ @media (min-width: 768px) {
995
+ .px-button.is-responsive[data-v-7bc34bb7] {
996
+ height: 36px;
997
+ padding: 8px 16px;
998
+ font-size: var(--px-font-size-base)
999
+ }
1000
+ }
1001
+ @media (min-width: 1024px) {
1002
+ .px-button.is-responsive[data-v-7bc34bb7] {
1003
+ height: 44px;
1004
+ padding: 12px 24px;
1005
+ font-size: var(--px-font-size-large)
1006
+ }
1007
+ }
1008
+ @media (min-width: 1280px) {
1009
+ .px-button.is-responsive[data-v-7bc34bb7] {
1010
+ height: 44px;
1011
+ padding: 12px 32px;
1012
+ font-size: var(--px-font-size-large)
1013
+ }
1014
+ }
795
1015
  /* Round - Pixel-style rounded with 3-step staircase corners */
796
1016
  .px-button.is-round[data-v-7bc34bb7] {
797
1017
  padding: 8px 20px;
@@ -886,6 +1106,14 @@
886
1106
  --px-button-disabled-text-color: var(--px-color-primary-light-5);
887
1107
  --px-button-disabled-bg-color: transparent;
888
1108
  }
1109
+ /* Link variant for type buttons */
1110
+ .px-button--primary.is-link[data-v-7bc34bb7] {
1111
+ --px-button-text-color: var(--px-color-primary);
1112
+ --px-button-shadow-color: transparent;
1113
+ --px-button-hover-text-color: var(--px-color-primary-dark);
1114
+ --px-button-active-text-color: var(--px-active-text-color);
1115
+ --px-button-disabled-text-color: var(--px-color-primary-light-5);
1116
+ }
889
1117
  /* Plain variant for type buttons */
890
1118
  .px-button--primary.is-plain[data-v-7bc34bb7] {
891
1119
  --px-button-text-color: var(--px-color-primary);
@@ -946,6 +1174,14 @@
946
1174
  --px-button-disabled-text-color: var(--px-color-success-light-5);
947
1175
  --px-button-disabled-bg-color: transparent;
948
1176
  }
1177
+ /* Link variant for type buttons */
1178
+ .px-button--success.is-link[data-v-7bc34bb7] {
1179
+ --px-button-text-color: var(--px-color-success);
1180
+ --px-button-shadow-color: transparent;
1181
+ --px-button-hover-text-color: var(--px-color-success-dark);
1182
+ --px-button-active-text-color: var(--px-active-text-color);
1183
+ --px-button-disabled-text-color: var(--px-color-success-light-5);
1184
+ }
949
1185
  /* Plain variant for type buttons */
950
1186
  .px-button--success.is-plain[data-v-7bc34bb7] {
951
1187
  --px-button-text-color: var(--px-color-success);
@@ -1006,6 +1242,14 @@
1006
1242
  --px-button-disabled-text-color: var(--px-color-warning-light-5);
1007
1243
  --px-button-disabled-bg-color: transparent;
1008
1244
  }
1245
+ /* Link variant for type buttons */
1246
+ .px-button--warning.is-link[data-v-7bc34bb7] {
1247
+ --px-button-text-color: var(--px-color-warning);
1248
+ --px-button-shadow-color: transparent;
1249
+ --px-button-hover-text-color: var(--px-color-warning-dark);
1250
+ --px-button-active-text-color: var(--px-active-text-color);
1251
+ --px-button-disabled-text-color: var(--px-color-warning-light-5);
1252
+ }
1009
1253
  /* Plain variant for type buttons */
1010
1254
  .px-button--warning.is-plain[data-v-7bc34bb7] {
1011
1255
  --px-button-text-color: var(--px-color-warning);
@@ -1066,6 +1310,14 @@
1066
1310
  --px-button-disabled-text-color: var(--px-color-info-light-5);
1067
1311
  --px-button-disabled-bg-color: transparent;
1068
1312
  }
1313
+ /* Link variant for type buttons */
1314
+ .px-button--info.is-link[data-v-7bc34bb7] {
1315
+ --px-button-text-color: var(--px-color-info);
1316
+ --px-button-shadow-color: transparent;
1317
+ --px-button-hover-text-color: var(--px-color-info-dark);
1318
+ --px-button-active-text-color: var(--px-active-text-color);
1319
+ --px-button-disabled-text-color: var(--px-color-info-light-5);
1320
+ }
1069
1321
  /* Plain variant for type buttons */
1070
1322
  .px-button--info.is-plain[data-v-7bc34bb7] {
1071
1323
  --px-button-text-color: var(--px-color-info);
@@ -1126,6 +1378,14 @@
1126
1378
  --px-button-disabled-text-color: var(--px-color-danger-light-5);
1127
1379
  --px-button-disabled-bg-color: transparent;
1128
1380
  }
1381
+ /* Link variant for type buttons */
1382
+ .px-button--danger.is-link[data-v-7bc34bb7] {
1383
+ --px-button-text-color: var(--px-color-danger);
1384
+ --px-button-shadow-color: transparent;
1385
+ --px-button-hover-text-color: var(--px-color-danger-dark);
1386
+ --px-button-active-text-color: var(--px-active-text-color);
1387
+ --px-button-disabled-text-color: var(--px-color-danger-light-5);
1388
+ }
1129
1389
  /* Plain variant for type buttons */
1130
1390
  .px-button--danger.is-plain[data-v-7bc34bb7] {
1131
1391
  --px-button-text-color: var(--px-color-danger);