sakana-element 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/README.md +95 -22
  2. package/dist/es/{Alert-C76ZWSVk.js → Alert-BwTsp4X3.js} +2 -2
  3. package/dist/es/Avatar-CJu6JYV3.js +9 -0
  4. package/dist/es/{Badge-CoFWwBwv.js → Badge-BmxZXX8k.js} +2 -2
  5. package/dist/es/{Breadcrumb-BtrwTVKW.js → Breadcrumb-BP8MSklj.js} +2 -2
  6. package/dist/es/{Button-S_31-UWJ.js → Button-BJHtN7gh.js} +2 -2
  7. package/dist/es/{Card-DcW6nHYD.js → Card-DJHkCmsz.js} +2 -2
  8. package/dist/es/Checkbox-DX8L3fyp.js +51 -0
  9. package/dist/es/{Collapse-DsS7M-m3.js → Collapse-Ir3V9CuO.js} +2 -2
  10. package/dist/es/{ConfigProvider-BgIewHXP.js → ConfigProvider-CsbSqwwi.js} +1 -1
  11. package/dist/es/Divider-C7PtODSK.js +9 -0
  12. package/dist/es/Drawer-C2eVmvUp.js +40 -0
  13. package/dist/es/Dropdown-CVg_c2fB.js +104 -0
  14. package/dist/es/{FileInput-BQ59woas.js → FileInput-BE26BmXm.js} +3 -3
  15. package/dist/es/Form-7lZt5ehf.js +122 -0
  16. package/dist/es/{Icon-DpJyuj7c.js → Icon-BLDDdSU-.js} +1 -1
  17. package/dist/es/Indicator-B-en-MgG.js +9 -0
  18. package/dist/es/{Input-CiE4bPJN.js → Input-C5HuVehE.js} +6 -6
  19. package/dist/es/{Link-B9B2APZq.js → Link-Av9RdcFv.js} +1 -1
  20. package/dist/es/{Loading-BW99pE5N.js → Loading-CBNDUWQd.js} +12 -12
  21. package/dist/es/Message-DgnyyuXn.js +152 -0
  22. package/dist/es/Notification-LYRXnVAf.js +69 -0
  23. package/dist/es/{Overlay-BRDSWspM.js → Overlay-CpvMhnuU.js} +1 -1
  24. package/dist/es/Pixelate-BPypBgJU.js +67 -0
  25. package/dist/es/Popconfirm-DvxFdLrw.js +23 -0
  26. package/dist/es/Progress-Bc5INMhJ.js +12 -0
  27. package/dist/es/Radio-263_rtRl.js +33 -0
  28. package/dist/es/{Select-Dwqv8isB.js → Select-7ZxUCS8z.js} +13 -13
  29. package/dist/es/{Switch-B1Gnv1tB.js → Switch-DiCsMJT3.js} +3 -3
  30. package/dist/es/Table-BvA_xzDe.js +10 -0
  31. package/dist/es/Tooltip-J3ji6weH.js +74 -0
  32. package/dist/es/hooks-BqobYUzS.js +171 -0
  33. package/dist/es/index.js +90 -70
  34. package/dist/{theme → es/theme}/Avatar.css +13 -43
  35. package/dist/{theme → es/theme}/Breadcrumb.css +46 -4
  36. package/dist/es/theme/Card.css +347 -0
  37. package/dist/es/theme/Checkbox.css +484 -0
  38. package/dist/es/theme/Divider.css +111 -0
  39. package/dist/es/theme/Drawer.css +206 -0
  40. package/dist/es/theme/Dropdown.css +471 -0
  41. package/dist/es/theme/Indicator.css +159 -0
  42. package/dist/{theme → es/theme}/Input.css +1 -0
  43. package/dist/{theme → es/theme}/Link.css +22 -3
  44. package/dist/{theme → es/theme}/Loading.css +50 -12
  45. package/dist/{theme → es/theme}/Message.css +249 -40
  46. package/dist/es/theme/Notification.css +316 -0
  47. package/dist/es/theme/Popconfirm.css +46 -0
  48. package/dist/es/theme/Progress.css +278 -0
  49. package/dist/es/theme/Radio.css +426 -0
  50. package/dist/es/theme/Table.css +680 -0
  51. package/dist/es/theme/Tooltip.css +235 -0
  52. package/dist/es/utils-BS5vsvlM.js +101 -0
  53. package/dist/index.css +1 -1
  54. package/dist/types/components/Avatar/types.d.ts +0 -2
  55. package/dist/types/components/Checkbox/constants.d.ts +5 -0
  56. package/dist/types/components/Checkbox/index.d.ts +94 -0
  57. package/dist/types/components/Checkbox/types.d.ts +46 -0
  58. package/dist/types/components/Collapse/index.d.ts +5 -5
  59. package/dist/types/components/Divider/index.d.ts +30 -0
  60. package/dist/types/components/Divider/types.d.ts +10 -0
  61. package/dist/types/components/Drawer/constants.d.ts +1 -0
  62. package/dist/types/components/Drawer/index.d.ts +72 -0
  63. package/dist/types/components/Drawer/types.d.ts +20 -0
  64. package/dist/types/components/Dropdown/index.d.ts +11 -1
  65. package/dist/types/components/Dropdown/types.d.ts +3 -0
  66. package/dist/types/components/Dropdown/useDropdownKeyboard.d.ts +8 -0
  67. package/dist/types/components/FileInput/index.d.ts +5 -5
  68. package/dist/types/components/Indicator/constants.d.ts +2 -0
  69. package/dist/types/components/Indicator/index.d.ts +28 -0
  70. package/dist/types/components/Indicator/types.d.ts +10 -0
  71. package/dist/types/components/Input/index.d.ts +10 -10
  72. package/dist/types/components/Message/methods.d.ts +2 -0
  73. package/dist/types/components/Message/types.d.ts +7 -1
  74. package/dist/types/components/MessageBox/types.d.ts +14 -2
  75. package/dist/types/components/Notification/methods.d.ts +3 -0
  76. package/dist/types/components/Notification/types.d.ts +8 -2
  77. package/dist/types/components/Pixelate/constants.d.ts +2 -0
  78. package/dist/types/components/Pixelate/index.d.ts +71 -0
  79. package/dist/types/components/Pixelate/types.d.ts +23 -0
  80. package/dist/types/components/Popconfirm/index.d.ts +16 -7
  81. package/dist/types/components/Popconfirm/types.d.ts +2 -1
  82. package/dist/types/components/Progress/constants.d.ts +2 -0
  83. package/dist/types/components/Progress/index.d.ts +50 -0
  84. package/dist/types/components/Progress/types.d.ts +22 -0
  85. package/dist/types/components/Radio/constants.d.ts +5 -0
  86. package/dist/types/components/Radio/index.d.ts +88 -0
  87. package/dist/types/components/Radio/types.d.ts +43 -0
  88. package/dist/types/components/Select/index.d.ts +30 -21
  89. package/dist/types/components/Switch/index.d.ts +5 -5
  90. package/dist/types/components/Table/index.d.ts +27 -0
  91. package/dist/types/components/Table/types.d.ts +20 -0
  92. package/dist/types/components/Tooltip/index.d.ts +6 -0
  93. package/dist/types/components/Tooltip/types.d.ts +7 -0
  94. package/dist/types/components/index.d.ts +8 -0
  95. package/dist/types/hooks/index.d.ts +3 -1
  96. package/dist/types/hooks/useDraggable.d.ts +7 -0
  97. package/dist/types/hooks/useFocusTrap.d.ts +5 -0
  98. package/dist/types/utils/index.d.ts +1 -0
  99. package/dist/types/utils/instance-management.d.ts +40 -0
  100. package/dist/umd/index.css +1 -1
  101. package/dist/umd/index.css.gz +0 -0
  102. package/dist/umd/index.umd.cjs +4 -4
  103. package/dist/umd/index.umd.cjs.gz +0 -0
  104. package/package.json +59 -59
  105. package/dist/es/Avatar-CxsRW-wl.js +0 -9
  106. package/dist/es/Dropdown-GcomGMAI.js +0 -40
  107. package/dist/es/Form-j90EzLXU.js +0 -122
  108. package/dist/es/Message-DCNnTUje.js +0 -123
  109. package/dist/es/Notification-CBzY5904.js +0 -58
  110. package/dist/es/Popconfirm-DF6d2ORS.js +0 -23
  111. package/dist/es/Tooltip-k6gKnMyt.js +0 -74
  112. package/dist/es/hooks-BaG7l8K5.js +0 -116
  113. package/dist/es/utils-bsCscZfS.js +0 -84
  114. package/dist/theme/Card.css +0 -263
  115. package/dist/theme/Dropdown.css +0 -187
  116. package/dist/theme/Notification.css +0 -126
  117. package/dist/theme/Popconfirm.css +0 -30
  118. package/dist/theme/Tooltip.css +0 -111
  119. /package/dist/{theme → es/theme}/Alert.css +0 -0
  120. /package/dist/{theme → es/theme}/Badge.css +0 -0
  121. /package/dist/{theme → es/theme}/Button.css +0 -0
  122. /package/dist/{theme → es/theme}/Collapse.css +0 -0
  123. /package/dist/{theme → es/theme}/FileInput.css +0 -0
  124. /package/dist/{theme → es/theme}/Form.css +0 -0
  125. /package/dist/{theme → es/theme}/Icon.css +0 -0
  126. /package/dist/{theme → es/theme}/Overlay.css +0 -0
  127. /package/dist/{theme → es/theme}/Select.css +0 -0
  128. /package/dist/{theme → es/theme}/Switch.css +0 -0
  129. /package/dist/{theme → es/theme}/fonts/zpix.woff2 +0 -0
  130. /package/dist/{theme → es/theme}/index.css +0 -0
package/dist/es/theme/Card.css ADDED
@@ -0,0 +1,347 @@
1
+ /* Card Variables */
2
+ .px-card[data-v-f3900769] {
3
+ --px-card-bg-color: var(--px-bg-color);
4
+ --px-card-border-color: var(--px-border-color);
5
+ --px-card-shadow-color: var(--px-shadow-color);
6
+ --px-card-text-color: var(--px-text-color-primary);
7
+ --px-card-header-border-color: var(--px-border-color-light);
8
+ --px-card-footer-border-color: var(--px-border-color-light);
9
+ --px-card-padding: 16px;
10
+
11
+ /* Beveled inset for 3D raised-panel depth */
12
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
13
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
14
+ }
15
+ /* Base Card Styles - Pixel Game Aesthetic */
16
+ .px-card[data-v-f3900769] {
17
+ position: relative;
18
+ display: flex;
19
+ flex-direction: column;
20
+ color: var(--px-card-text-color);
21
+ font-family: var(--px-font-family);
22
+ font-size: var(--px-font-size-base);
23
+ background: transparent;
24
+ border: none;
25
+ box-sizing: border-box;
26
+ overflow: hidden;
27
+ transition: none;
28
+ }
29
+ /* Border layer — 3-step staircase clip (8px corners) */
30
+ .px-card[data-v-f3900769]::before {
31
+ content: '';
32
+ position: absolute;
33
+ inset: 0;
34
+ background: var(--px-card-border-color);
35
+ clip-path: polygon(
36
+ 0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
37
+ 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,
38
+ 100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
39
+ 8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
40
+ );
41
+ z-index: 0;
42
+ }
43
+ /* Fill layer — 4px inset, 2-step staircase (double staircase effect), beveled */
44
+ .px-card[data-v-f3900769]::after {
45
+ content: '';
46
+ position: absolute;
47
+ inset: 4px;
48
+ background: var(--px-card-bg-color);
49
+ clip-path: polygon(
50
+ 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
51
+ calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
52
+ 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
53
+ 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
54
+ );
55
+ box-shadow: var(--px-card-inset-highlight), var(--px-card-inset-shadow);
56
+ z-index: 0;
57
+ }
58
+ /* Card sections - all above pseudo-elements */
59
+ .px-card__header[data-v-f3900769] {
60
+ position: relative;
61
+ z-index: 1;
62
+ padding: var(--px-card-padding);
63
+ border-bottom: none;
64
+ font-weight: 600;
65
+ }
66
+ /* Pixel-dashed divider at bottom */
67
+ .px-card__header[data-v-f3900769]::after {
68
+ content: "";
69
+ position: absolute;
70
+ bottom: 0;
71
+ left: 4px;
72
+ right: 4px;
73
+ height: 2px;
74
+ background-image: repeating-linear-gradient(
75
+ to right,
76
+ var(--px-card-header-border-color) 0px,
77
+ var(--px-card-header-border-color) 6px,
78
+ transparent 6px,
79
+ transparent 12px
80
+ );
81
+ }
82
+ .px-card__body[data-v-f3900769] {
83
+ position: relative;
84
+ z-index: 1;
85
+ padding: var(--px-card-padding);
86
+ flex: 1;
87
+ }
88
+ .px-card__footer[data-v-f3900769] {
89
+ position: relative;
90
+ z-index: 1;
91
+ padding: var(--px-card-padding);
92
+ border-top: none;
93
+ }
94
+ /* Pixel-dashed divider at top */
95
+ .px-card__footer[data-v-f3900769]::before {
96
+ content: "";
97
+ position: absolute;
98
+ top: 0;
99
+ left: 4px;
100
+ right: 4px;
101
+ height: 2px;
102
+ background-image: repeating-linear-gradient(
103
+ to right,
104
+ var(--px-card-footer-border-color) 0px,
105
+ var(--px-card-footer-border-color) 6px,
106
+ transparent 6px,
107
+ transparent 12px
108
+ );
109
+ }
110
+ /* Shadow variants */
111
+ .px-card--shadow-always[data-v-f3900769] {
112
+ filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
113
+ }
114
+ .px-card--shadow-hover[data-v-f3900769] {
115
+ filter: none;
116
+ }
117
+ .px-card--shadow-hover[data-v-f3900769]:hover {
118
+ filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
119
+ }
120
+ .px-card--shadow-never[data-v-f3900769] {
121
+ filter: none;
122
+ }
123
+ /* Hoverable interaction — pixel-style diagonal lift/press */
124
+ .px-card.is-hoverable[data-v-f3900769] {
125
+ cursor: pointer;
126
+ }
127
+ .px-card.is-hoverable[data-v-f3900769]:hover {
128
+ transform: translate(-2px, -2px);
129
+ filter: drop-shadow(5px 5px 0px var(--px-card-shadow-color));
130
+ }
131
+ .px-card.is-hoverable[data-v-f3900769]:active {
132
+ transform: translate(1px, 1px);
133
+ filter: drop-shadow(1px 1px 0px var(--px-card-shadow-color));
134
+ }
135
+ /* Size variants */
136
+ .px-card--small[data-v-f3900769] {
137
+ --px-card-padding: 12px;
138
+ font-size: var(--px-font-size-small);
139
+ filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
140
+ }
141
+ .px-card--small.px-card--shadow-hover[data-v-f3900769] { filter: none;
142
+ }
143
+ .px-card--small.px-card--shadow-hover[data-v-f3900769]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
144
+ }
145
+ .px-card--small.px-card--shadow-never[data-v-f3900769] { filter: none;
146
+ }
147
+ .px-card--large[data-v-f3900769] {
148
+ --px-card-padding: 20px;
149
+ font-size: var(--px-font-size-large);
150
+ }
151
+ /* Type variants */
152
+ .px-card--primary[data-v-f3900769] {
153
+ --px-card-bg-color: var(--px-color-primary-light-9);
154
+ --px-card-border-color: var(--px-color-primary);
155
+ --px-card-shadow-color: var(--px-color-primary-dark);
156
+ --px-card-text-color: var(--px-text-color-primary);
157
+ --px-card-header-border-color: var(--px-color-primary);
158
+ --px-card-footer-border-color: var(--px-color-primary);
159
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
160
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
161
+ }
162
+ .px-card--primary.is-outline[data-v-f3900769] {
163
+ --px-card-bg-color: transparent;
164
+ --px-card-border-color: var(--px-color-primary);
165
+ --px-card-text-color: var(--px-color-primary);
166
+ --px-card-inset-highlight: none;
167
+ --px-card-inset-shadow: none;
168
+ }
169
+ .px-card--primary.is-dash[data-v-f3900769] {
170
+ --px-card-bg-color: var(--px-color-primary-light-9);
171
+ --px-card-border-color: var(--px-color-primary);
172
+ --px-card-text-color: var(--px-color-primary);
173
+ }
174
+ .px-card--primary.is-ghost[data-v-f3900769] {
175
+ --px-card-bg-color: transparent;
176
+ --px-card-border-color: transparent;
177
+ --px-card-shadow-color: transparent;
178
+ --px-card-text-color: var(--px-color-primary);
179
+ --px-card-inset-highlight: none;
180
+ --px-card-inset-shadow: none;
181
+ }
182
+ .px-card--success[data-v-f3900769] {
183
+ --px-card-bg-color: var(--px-color-success-light-9);
184
+ --px-card-border-color: var(--px-color-success);
185
+ --px-card-shadow-color: var(--px-color-success-dark);
186
+ --px-card-text-color: var(--px-text-color-primary);
187
+ --px-card-header-border-color: var(--px-color-success);
188
+ --px-card-footer-border-color: var(--px-color-success);
189
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
190
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
191
+ }
192
+ .px-card--success.is-outline[data-v-f3900769] {
193
+ --px-card-bg-color: transparent;
194
+ --px-card-border-color: var(--px-color-success);
195
+ --px-card-text-color: var(--px-color-success);
196
+ --px-card-inset-highlight: none;
197
+ --px-card-inset-shadow: none;
198
+ }
199
+ .px-card--success.is-dash[data-v-f3900769] {
200
+ --px-card-bg-color: var(--px-color-success-light-9);
201
+ --px-card-border-color: var(--px-color-success);
202
+ --px-card-text-color: var(--px-color-success);
203
+ }
204
+ .px-card--success.is-ghost[data-v-f3900769] {
205
+ --px-card-bg-color: transparent;
206
+ --px-card-border-color: transparent;
207
+ --px-card-shadow-color: transparent;
208
+ --px-card-text-color: var(--px-color-success);
209
+ --px-card-inset-highlight: none;
210
+ --px-card-inset-shadow: none;
211
+ }
212
+ .px-card--info[data-v-f3900769] {
213
+ --px-card-bg-color: var(--px-color-info-light-9);
214
+ --px-card-border-color: var(--px-color-info);
215
+ --px-card-shadow-color: var(--px-color-info-dark);
216
+ --px-card-text-color: var(--px-text-color-primary);
217
+ --px-card-header-border-color: var(--px-color-info);
218
+ --px-card-footer-border-color: var(--px-color-info);
219
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
220
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
221
+ }
222
+ .px-card--info.is-outline[data-v-f3900769] {
223
+ --px-card-bg-color: transparent;
224
+ --px-card-border-color: var(--px-color-info);
225
+ --px-card-text-color: var(--px-color-info);
226
+ --px-card-inset-highlight: none;
227
+ --px-card-inset-shadow: none;
228
+ }
229
+ .px-card--info.is-dash[data-v-f3900769] {
230
+ --px-card-bg-color: var(--px-color-info-light-9);
231
+ --px-card-border-color: var(--px-color-info);
232
+ --px-card-text-color: var(--px-color-info);
233
+ }
234
+ .px-card--info.is-ghost[data-v-f3900769] {
235
+ --px-card-bg-color: transparent;
236
+ --px-card-border-color: transparent;
237
+ --px-card-shadow-color: transparent;
238
+ --px-card-text-color: var(--px-color-info);
239
+ --px-card-inset-highlight: none;
240
+ --px-card-inset-shadow: none;
241
+ }
242
+ .px-card--warning[data-v-f3900769] {
243
+ --px-card-bg-color: var(--px-color-warning-light-9);
244
+ --px-card-border-color: var(--px-color-warning);
245
+ --px-card-shadow-color: var(--px-color-warning-dark);
246
+ --px-card-text-color: var(--px-text-color-primary);
247
+ --px-card-header-border-color: var(--px-color-warning);
248
+ --px-card-footer-border-color: var(--px-color-warning);
249
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
250
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
251
+ }
252
+ .px-card--warning.is-outline[data-v-f3900769] {
253
+ --px-card-bg-color: transparent;
254
+ --px-card-border-color: var(--px-color-warning);
255
+ --px-card-text-color: var(--px-color-warning);
256
+ --px-card-inset-highlight: none;
257
+ --px-card-inset-shadow: none;
258
+ }
259
+ .px-card--warning.is-dash[data-v-f3900769] {
260
+ --px-card-bg-color: var(--px-color-warning-light-9);
261
+ --px-card-border-color: var(--px-color-warning);
262
+ --px-card-text-color: var(--px-color-warning);
263
+ }
264
+ .px-card--warning.is-ghost[data-v-f3900769] {
265
+ --px-card-bg-color: transparent;
266
+ --px-card-border-color: transparent;
267
+ --px-card-shadow-color: transparent;
268
+ --px-card-text-color: var(--px-color-warning);
269
+ --px-card-inset-highlight: none;
270
+ --px-card-inset-shadow: none;
271
+ }
272
+ .px-card--danger[data-v-f3900769] {
273
+ --px-card-bg-color: var(--px-color-danger-light-9);
274
+ --px-card-border-color: var(--px-color-danger);
275
+ --px-card-shadow-color: var(--px-color-danger-dark);
276
+ --px-card-text-color: var(--px-text-color-primary);
277
+ --px-card-header-border-color: var(--px-color-danger);
278
+ --px-card-footer-border-color: var(--px-color-danger);
279
+ --px-card-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
280
+ --px-card-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
281
+ }
282
+ .px-card--danger.is-outline[data-v-f3900769] {
283
+ --px-card-bg-color: transparent;
284
+ --px-card-border-color: var(--px-color-danger);
285
+ --px-card-text-color: var(--px-color-danger);
286
+ --px-card-inset-highlight: none;
287
+ --px-card-inset-shadow: none;
288
+ }
289
+ .px-card--danger.is-dash[data-v-f3900769] {
290
+ --px-card-bg-color: var(--px-color-danger-light-9);
291
+ --px-card-border-color: var(--px-color-danger);
292
+ --px-card-text-color: var(--px-color-danger);
293
+ }
294
+ .px-card--danger.is-ghost[data-v-f3900769] {
295
+ --px-card-bg-color: transparent;
296
+ --px-card-border-color: transparent;
297
+ --px-card-shadow-color: transparent;
298
+ --px-card-text-color: var(--px-color-danger);
299
+ --px-card-inset-highlight: none;
300
+ --px-card-inset-shadow: none;
301
+ }
302
+ /* Outline variant — pixel-cornered wireframe, no fill, no bevel */
303
+ .px-card.is-outline[data-v-f3900769] {
304
+ filter: none;
305
+ }
306
+ .px-card.is-outline[data-v-f3900769]::before {
307
+ background:
308
+ /* Top edge */
309
+ linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 100% 4px no-repeat,
310
+ /* Bottom edge */
311
+ linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 100% / 100% 4px no-repeat,
312
+ /* Left edge */
313
+ linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 0 0 / 4px 100% no-repeat,
314
+ /* Right edge */
315
+ linear-gradient(var(--px-card-border-color), var(--px-card-border-color)) 100% 0 / 4px 100% no-repeat;
316
+ /* clip-path inherited from base → pixel staircase corners preserved */
317
+ }
318
+ .px-card.is-outline[data-v-f3900769]::after {
319
+ background: transparent;
320
+ box-shadow: none;
321
+ }
322
+ /* Dash variant — pixel-art dashed border via repeating gradients */
323
+ .px-card.is-dash[data-v-f3900769] {
324
+ filter: none;
325
+ }
326
+ .px-card.is-dash[data-v-f3900769]::before {
327
+ background:
328
+ /* Top edge */
329
+ repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 100% 4px no-repeat,
330
+ /* Bottom edge */
331
+ repeating-linear-gradient(to right, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 100% / 100% 4px no-repeat,
332
+ /* Left edge */
333
+ repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 0 0 / 4px 100% no-repeat,
334
+ /* Right edge */
335
+ repeating-linear-gradient(to bottom, var(--px-card-border-color) 0 8px, transparent 8px 16px) 100% 0 / 4px 100% no-repeat;
336
+ /* Inherits clip-path from base → pixel corners on dashes */
337
+ }
338
+ .px-card.is-dash[data-v-f3900769]::after {
339
+ background: transparent;
340
+ box-shadow: none;
341
+ }
342
+ /* Ghost variant */
343
+ .px-card.is-ghost[data-v-f3900769] {
344
+ filter: none;
345
+ }
346
+ .px-card.is-ghost[data-v-f3900769]::before, .px-card.is-ghost[data-v-f3900769]::after { display: none;
347
+ }