sakana-element 2.3.0 → 2.4.1

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 (119) hide show
  1. package/README.md +5 -5
  2. package/dist/es/{Alert-BwTsp4X3.js → Alert-DRIDwear.js} +2 -2
  3. package/dist/es/{Avatar-CJu6JYV3.js → Avatar-Dkvvhw_D.js} +1 -1
  4. package/dist/es/{Badge-BmxZXX8k.js → Badge-CLNacHVq.js} +2 -2
  5. package/dist/es/{Breadcrumb-BP8MSklj.js → Breadcrumb-CfJA9NZz.js} +2 -2
  6. package/dist/es/{Button-BJHtN7gh.js → Button-Dj1DIvXh.js} +3 -3
  7. package/dist/es/{Card-DJHkCmsz.js → Card-meh7F1e2.js} +1 -1
  8. package/dist/es/ChatBubble-Ccr3wzoK.js +9 -0
  9. package/dist/es/{Checkbox-DX8L3fyp.js → Checkbox-vOcwl1OX.js} +3 -3
  10. package/dist/es/{Collapse-Ir3V9CuO.js → Collapse-BG58s0uJ.js} +4 -4
  11. package/dist/es/{ConfigProvider-CsbSqwwi.js → ConfigProvider-Cr8Hpzf2.js} +2 -2
  12. package/dist/es/Diff-KQ44cDcY.js +64 -0
  13. package/dist/es/{Divider-C7PtODSK.js → Divider-CYYeUqYc.js} +1 -1
  14. package/dist/es/{Drawer-C2eVmvUp.js → Drawer-CDXFDfrf.js} +2 -2
  15. package/dist/es/{Dropdown-CVg_c2fB.js → Dropdown-CPZtzHPx.js} +9 -9
  16. package/dist/es/{FileInput-BE26BmXm.js → FileInput-Ram4-wy2.js} +3 -3
  17. package/dist/es/Filter-CLLkrn-W.js +40 -0
  18. package/dist/es/{Form-7lZt5ehf.js → Form-po3aIrSN.js} +62 -61
  19. package/dist/es/{Icon-BLDDdSU-.js → Icon-XJfGGAMY.js} +1 -1
  20. package/dist/es/{Indicator-B-en-MgG.js → Indicator-vsSp5r5K.js} +1 -1
  21. package/dist/es/{Input-C5HuVehE.js → Input-KrNqNZMe.js} +5 -5
  22. package/dist/es/Kbd-CtCGx7_s.js +13 -0
  23. package/dist/es/{Link-Av9RdcFv.js → Link-Bbwdgs74.js} +1 -1
  24. package/dist/es/{Loading-CBNDUWQd.js → Loading-DiyIiKxO.js} +3 -3
  25. package/dist/es/{Message-DgnyyuXn.js → Message-BoNCtMo7.js} +14 -14
  26. package/dist/es/{Notification-LYRXnVAf.js → Notification-CFY-yvRf.js} +13 -13
  27. package/dist/es/{Overlay-CpvMhnuU.js → Overlay-DoFA2lgP.js} +1 -1
  28. package/dist/es/Pixelate-dqwHc6nX.js +39 -0
  29. package/dist/es/{Popconfirm-DvxFdLrw.js → Popconfirm-DPOujyiA.js} +12 -12
  30. package/dist/es/{Progress-Bc5INMhJ.js → Progress-B0oYE8Z3.js} +1 -1
  31. package/dist/es/{Radio-263_rtRl.js → Radio-C-Ot7pLA.js} +3 -3
  32. package/dist/es/Resizable-G5KVHayx.js +151 -0
  33. package/dist/es/{Select-7ZxUCS8z.js → Select-DqxPeAKK.js} +14 -14
  34. package/dist/es/Skeleton-4SeKRKn9.js +15 -0
  35. package/dist/es/{Switch-DiCsMJT3.js → Switch-C_tBxZtT.js} +3 -3
  36. package/dist/es/{Table-BvA_xzDe.js → Table-Cr6HFL4_.js} +1 -1
  37. package/dist/es/{Tooltip-J3ji6weH.js → Tooltip-rak4BryQ.js} +3 -3
  38. package/dist/es/Validator-DKVfknvI.js +40 -0
  39. package/dist/es/{hooks-BqobYUzS.js → hooks-pTjI-j9o.js} +51 -53
  40. package/dist/es/index.js +119 -90
  41. package/dist/es/utils-DzOow9K9.js +155 -0
  42. package/dist/es/{vendor-DXmGx29U.js → vendor-DrBJKLFW.js} +254 -210
  43. package/dist/index.css +1 -1
  44. package/dist/{es/theme → theme}/Badge.css +151 -151
  45. package/dist/{es/theme → theme}/Button.css +92 -8
  46. package/dist/theme/ChatBubble.css +218 -0
  47. package/dist/{es/theme → theme}/Checkbox.css +138 -18
  48. package/dist/{es/theme → theme}/Collapse.css +96 -96
  49. package/dist/theme/Diff.css +110 -0
  50. package/dist/{es/theme → theme}/Divider.css +42 -3
  51. package/dist/{es/theme → theme}/Dropdown.css +2 -2
  52. package/dist/{es/theme → theme}/FileInput.css +32 -0
  53. package/dist/theme/Filter.css +598 -0
  54. package/dist/{es/theme → theme}/Input.css +414 -407
  55. package/dist/theme/Kbd.css +104 -0
  56. package/dist/{es/theme → theme}/Message.css +1 -1
  57. package/dist/{es/theme → theme}/Notification.css +44 -44
  58. package/dist/{es/theme → theme}/Radio.css +114 -48
  59. package/dist/theme/Resizable.css +95 -0
  60. package/dist/{es/theme → theme}/Select.css +198 -88
  61. package/dist/theme/Skeleton.css +192 -0
  62. package/dist/{es/theme → theme}/Switch.css +22 -3
  63. package/dist/theme/Validator.css +25 -0
  64. package/dist/types/components/ChatBubble/constants.d.ts +2 -0
  65. package/dist/types/components/ChatBubble/index.d.ts +27 -0
  66. package/dist/types/components/ChatBubble/types.d.ts +10 -0
  67. package/dist/types/components/Diff/constants.d.ts +4 -0
  68. package/dist/types/components/Diff/index.d.ts +67 -0
  69. package/dist/types/components/Diff/types.d.ts +29 -0
  70. package/dist/types/components/Dropdown/index.d.ts +3 -3
  71. package/dist/types/components/Filter/constants.d.ts +5 -0
  72. package/dist/types/components/Filter/index.d.ts +59 -0
  73. package/dist/types/components/Filter/types.d.ts +38 -0
  74. package/dist/types/components/Icon/index.d.ts +1 -0
  75. package/dist/types/components/Kbd/constants.d.ts +3 -0
  76. package/dist/types/components/Kbd/index.d.ts +24 -0
  77. package/dist/types/components/Kbd/types.d.ts +10 -0
  78. package/dist/types/components/Pixelate/index.d.ts +3 -3
  79. package/dist/types/components/Popconfirm/index.d.ts +3 -3
  80. package/dist/types/components/Resizable/constants.d.ts +3 -0
  81. package/dist/types/components/Resizable/index.d.ts +135 -0
  82. package/dist/types/components/Resizable/types.d.ts +52 -0
  83. package/dist/types/components/Select/index.d.ts +3 -3
  84. package/dist/types/components/Skeleton/index.d.ts +36 -0
  85. package/dist/types/components/Skeleton/types.d.ts +12 -0
  86. package/dist/types/components/Tooltip/index.d.ts +3 -3
  87. package/dist/types/components/Validator/index.d.ts +52 -0
  88. package/dist/types/components/Validator/types.d.ts +13 -0
  89. package/dist/types/components/index.d.ts +8 -1
  90. package/dist/types/core/index.d.ts +1 -1
  91. package/dist/types/hooks/index.d.ts +2 -0
  92. package/dist/types/hooks/useFocusController.d.ts +1 -1
  93. package/dist/types/utils/index.d.ts +1 -0
  94. package/dist/types/utils/pixelate.d.ts +10 -0
  95. package/dist/types/utils/style.d.ts +1 -0
  96. package/dist/umd/index.css +1 -1
  97. package/dist/umd/index.css.gz +0 -0
  98. package/dist/umd/index.umd.cjs +3 -3
  99. package/dist/umd/index.umd.cjs.gz +0 -0
  100. package/package.json +4 -4
  101. package/dist/es/Pixelate-BPypBgJU.js +0 -67
  102. package/dist/es/utils-BS5vsvlM.js +0 -101
  103. /package/dist/{es/theme → theme}/Alert.css +0 -0
  104. /package/dist/{es/theme → theme}/Avatar.css +0 -0
  105. /package/dist/{es/theme → theme}/Breadcrumb.css +0 -0
  106. /package/dist/{es/theme → theme}/Card.css +0 -0
  107. /package/dist/{es/theme → theme}/Drawer.css +0 -0
  108. /package/dist/{es/theme → theme}/Form.css +0 -0
  109. /package/dist/{es/theme → theme}/Icon.css +0 -0
  110. /package/dist/{es/theme → theme}/Indicator.css +0 -0
  111. /package/dist/{es/theme → theme}/Link.css +0 -0
  112. /package/dist/{es/theme → theme}/Loading.css +0 -0
  113. /package/dist/{es/theme → theme}/Overlay.css +0 -0
  114. /package/dist/{es/theme → theme}/Popconfirm.css +0 -0
  115. /package/dist/{es/theme → theme}/Progress.css +0 -0
  116. /package/dist/{es/theme → theme}/Table.css +0 -0
  117. /package/dist/{es/theme → theme}/Tooltip.css +0 -0
  118. /package/dist/{es/theme → theme}/fonts/zpix.woff2 +0 -0
  119. /package/dist/{es/theme → theme}/index.css +0 -0
package/dist/{es/theme → theme}/Badge.css RENAMED
@@ -1,214 +1,214 @@
1
1
  /* Badge Variables */
2
- .px-badge[data-v-b16297ef] {
3
- --px-badge-text-color: var(--px-color-white);
4
- --px-badge-bg-color: var(--px-color-primary);
5
- --px-badge-border-color: var(--px-color-primary-dark);
6
- --px-badge-shadow-color: var(--px-color-primary-dark);
7
- --px-badge-font-size: var(--px-font-size-extra-small);
8
- --px-badge-height: 22px;
2
+ .px-badge[data-v-b16297ef] {
3
+ --px-badge-text-color: var(--px-color-white);
4
+ --px-badge-bg-color: var(--px-color-primary);
5
+ --px-badge-border-color: var(--px-color-primary-dark);
6
+ --px-badge-shadow-color: var(--px-color-primary-dark);
7
+ --px-badge-font-size: var(--px-font-size-extra-small);
8
+ --px-badge-height: 22px;
9
9
  --px-badge-padding: 0 8px;
10
- }
10
+ }
11
11
  /* Base Badge Styles - Pixel Game Aesthetic */
12
- .px-badge[data-v-b16297ef] {
13
- display: inline-flex;
14
- justify-content: center;
15
- align-items: center;
16
- gap: 4px;
17
- height: var(--px-badge-height);
18
- padding: var(--px-badge-padding);
19
- font-size: var(--px-badge-font-size);
20
- font-family: var(--px-font-family);
21
- font-weight: 500;
22
- color: var(--px-badge-text-color);
23
- line-height: 1;
24
- white-space: nowrap;
25
- box-sizing: border-box;
26
- position: relative;
27
- background: transparent;
28
- vertical-align: middle;
29
-
30
- /* Remove traditional border — pixel border via pseudo-elements */
31
- border: none;
32
-
33
- /* Pixel shadow via drop-shadow */
34
- filter: drop-shadow(2px 2px 0px var(--px-badge-shadow-color));
35
-
12
+ .px-badge[data-v-b16297ef] {
13
+ display: inline-flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ gap: 4px;
17
+ height: var(--px-badge-height);
18
+ padding: var(--px-badge-padding);
19
+ font-size: var(--px-badge-font-size);
20
+ font-family: var(--px-font-family);
21
+ font-weight: 500;
22
+ color: var(--px-badge-text-color);
23
+ line-height: 1;
24
+ white-space: nowrap;
25
+ box-sizing: border-box;
26
+ position: relative;
27
+ background: transparent;
28
+ vertical-align: middle;
29
+
30
+ /* Remove traditional border — pixel border via pseudo-elements */
31
+ border: none;
32
+
33
+ /* Pixel shadow via drop-shadow */
34
+ filter: drop-shadow(2px 2px 0px var(--px-badge-shadow-color));
35
+
36
36
  transition: none;
37
- }
37
+ }
38
38
  /* Border layer — filled with border color, clipped to pixel shape */
39
- .px-badge[data-v-b16297ef]::before {
40
- content: '';
41
- position: absolute;
42
- inset: 0;
43
- background: var(--px-badge-border-color);
44
- clip-path: polygon(
45
- 0 2px, 2px 2px, 2px 0,
46
- calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
47
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
48
- 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
49
- );
39
+ .px-badge[data-v-b16297ef]::before {
40
+ content: '';
41
+ position: absolute;
42
+ inset: 0;
43
+ background: var(--px-badge-border-color);
44
+ clip-path: polygon(
45
+ 0 2px, 2px 2px, 2px 0,
46
+ calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
47
+ 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
48
+ 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
49
+ );
50
50
  z-index: -1;
51
- }
51
+ }
52
52
  /* Fill layer — inset by border width, filled with bg color */
53
- .px-badge[data-v-b16297ef]::after {
54
- content: '';
55
- position: absolute;
56
- inset: 2px;
57
- background: var(--px-badge-bg-color);
58
- clip-path: polygon(
59
- 0 2px, 2px 2px, 2px 0,
60
- calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
61
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
62
- 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
63
- );
53
+ .px-badge[data-v-b16297ef]::after {
54
+ content: '';
55
+ position: absolute;
56
+ inset: 2px;
57
+ background: var(--px-badge-bg-color);
58
+ clip-path: polygon(
59
+ 0 2px, 2px 2px, 2px 0,
60
+ calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
61
+ 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
62
+ 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
63
+ );
64
64
  z-index: -1;
65
65
  }
66
- .px-badge + .px-badge[data-v-b16297ef] {
66
+ .px-badge + .px-badge[data-v-b16297ef] {
67
67
  margin-left: 8px;
68
- }
68
+ }
69
69
  /* Outline variant */
70
- .px-badge.is-outline[data-v-b16297ef] {
71
- border: 2px solid var(--px-badge-border-color);
70
+ .px-badge.is-outline[data-v-b16297ef] {
71
+ border: 2px solid var(--px-badge-border-color);
72
72
  filter: none;
73
73
  }
74
- .px-badge.is-outline[data-v-b16297ef]::before {
74
+ .px-badge.is-outline[data-v-b16297ef]::before {
75
75
  display: none;
76
76
  }
77
- .px-badge.is-outline[data-v-b16297ef]::after {
78
- clip-path: none;
79
- inset: 0;
77
+ .px-badge.is-outline[data-v-b16297ef]::after {
78
+ clip-path: none;
79
+ inset: 0;
80
80
  background: var(--px-badge-bg-color);
81
- }
81
+ }
82
82
  /* Dash variant */
83
- .px-badge.is-dash[data-v-b16297ef] {
84
- border: 2px dashed var(--px-badge-border-color);
83
+ .px-badge.is-dash[data-v-b16297ef] {
84
+ border: 2px dashed var(--px-badge-border-color);
85
85
  filter: none;
86
86
  }
87
- .px-badge.is-dash[data-v-b16297ef]::before {
87
+ .px-badge.is-dash[data-v-b16297ef]::before {
88
88
  display: none;
89
89
  }
90
- .px-badge.is-dash[data-v-b16297ef]::after {
91
- clip-path: none;
92
- inset: 0;
90
+ .px-badge.is-dash[data-v-b16297ef]::after {
91
+ clip-path: none;
92
+ inset: 0;
93
93
  background: var(--px-badge-bg-color);
94
- }
94
+ }
95
95
  /* Round - Pixel-style rounded corners */
96
- .px-badge.is-round[data-v-b16297ef] {
96
+ .px-badge.is-round[data-v-b16297ef] {
97
97
  padding: 0 10px;
98
98
  }
99
- .px-badge.is-round[data-v-b16297ef]::before, .px-badge.is-round[data-v-b16297ef]::after {
100
- clip-path: polygon(
101
- 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
102
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
103
- 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%,
104
- 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
99
+ .px-badge.is-round[data-v-b16297ef]::before, .px-badge.is-round[data-v-b16297ef]::after {
100
+ clip-path: polygon(
101
+ 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
102
+ calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
103
+ 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%,
104
+ 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
105
105
  );
106
- }
106
+ }
107
107
  /* Empty badge - dot indicator */
108
- .px-badge.is-empty[data-v-b16297ef] {
109
- width: var(--px-badge-height);
108
+ .px-badge.is-empty[data-v-b16297ef] {
109
+ width: var(--px-badge-height);
110
110
  padding: 0;
111
- }
111
+ }
112
112
  /* Type variants */
113
- .px-badge--primary[data-v-b16297ef] {
114
- --px-badge-text-color: var(--px-color-white);
115
- --px-badge-bg-color: var(--px-color-primary);
116
- --px-badge-border-color: var(--px-color-primary-dark);
113
+ .px-badge--primary[data-v-b16297ef] {
114
+ --px-badge-text-color: var(--px-color-white);
115
+ --px-badge-bg-color: var(--px-color-primary);
116
+ --px-badge-border-color: var(--px-color-primary-dark);
117
117
  --px-badge-shadow-color: var(--px-color-primary-dark);
118
- }
118
+ }
119
119
  /* Outline variant for type */
120
- .px-badge--primary.is-outline[data-v-b16297ef] {
121
- --px-badge-text-color: var(--px-color-primary);
122
- --px-badge-bg-color: transparent;
120
+ .px-badge--primary.is-outline[data-v-b16297ef] {
121
+ --px-badge-text-color: var(--px-color-primary);
122
+ --px-badge-bg-color: transparent;
123
123
  --px-badge-border-color: var(--px-color-primary);
124
- }
124
+ }
125
125
  /* Dash variant for type */
126
- .px-badge--primary.is-dash[data-v-b16297ef] {
127
- --px-badge-text-color: var(--px-color-primary);
128
- --px-badge-bg-color: var(--px-color-primary-light-9);
126
+ .px-badge--primary.is-dash[data-v-b16297ef] {
127
+ --px-badge-text-color: var(--px-color-primary);
128
+ --px-badge-bg-color: var(--px-color-primary-light-9);
129
129
  --px-badge-border-color: var(--px-color-primary);
130
130
  }
131
- .px-badge--success[data-v-b16297ef] {
132
- --px-badge-text-color: var(--px-color-white);
133
- --px-badge-bg-color: var(--px-color-success);
134
- --px-badge-border-color: var(--px-color-success-dark);
131
+ .px-badge--success[data-v-b16297ef] {
132
+ --px-badge-text-color: var(--px-color-white);
133
+ --px-badge-bg-color: var(--px-color-success);
134
+ --px-badge-border-color: var(--px-color-success-dark);
135
135
  --px-badge-shadow-color: var(--px-color-success-dark);
136
- }
136
+ }
137
137
  /* Outline variant for type */
138
- .px-badge--success.is-outline[data-v-b16297ef] {
139
- --px-badge-text-color: var(--px-color-success);
140
- --px-badge-bg-color: transparent;
138
+ .px-badge--success.is-outline[data-v-b16297ef] {
139
+ --px-badge-text-color: var(--px-color-success);
140
+ --px-badge-bg-color: transparent;
141
141
  --px-badge-border-color: var(--px-color-success);
142
- }
142
+ }
143
143
  /* Dash variant for type */
144
- .px-badge--success.is-dash[data-v-b16297ef] {
145
- --px-badge-text-color: var(--px-color-success);
146
- --px-badge-bg-color: var(--px-color-success-light-9);
144
+ .px-badge--success.is-dash[data-v-b16297ef] {
145
+ --px-badge-text-color: var(--px-color-success);
146
+ --px-badge-bg-color: var(--px-color-success-light-9);
147
147
  --px-badge-border-color: var(--px-color-success);
148
148
  }
149
- .px-badge--info[data-v-b16297ef] {
150
- --px-badge-text-color: var(--px-color-white);
151
- --px-badge-bg-color: var(--px-color-info);
152
- --px-badge-border-color: var(--px-color-info-dark);
149
+ .px-badge--info[data-v-b16297ef] {
150
+ --px-badge-text-color: var(--px-color-white);
151
+ --px-badge-bg-color: var(--px-color-info);
152
+ --px-badge-border-color: var(--px-color-info-dark);
153
153
  --px-badge-shadow-color: var(--px-color-info-dark);
154
- }
154
+ }
155
155
  /* Outline variant for type */
156
- .px-badge--info.is-outline[data-v-b16297ef] {
157
- --px-badge-text-color: var(--px-color-info);
158
- --px-badge-bg-color: transparent;
156
+ .px-badge--info.is-outline[data-v-b16297ef] {
157
+ --px-badge-text-color: var(--px-color-info);
158
+ --px-badge-bg-color: transparent;
159
159
  --px-badge-border-color: var(--px-color-info);
160
- }
160
+ }
161
161
  /* Dash variant for type */
162
- .px-badge--info.is-dash[data-v-b16297ef] {
163
- --px-badge-text-color: var(--px-color-info);
164
- --px-badge-bg-color: var(--px-color-info-light-9);
162
+ .px-badge--info.is-dash[data-v-b16297ef] {
163
+ --px-badge-text-color: var(--px-color-info);
164
+ --px-badge-bg-color: var(--px-color-info-light-9);
165
165
  --px-badge-border-color: var(--px-color-info);
166
166
  }
167
- .px-badge--warning[data-v-b16297ef] {
168
- --px-badge-text-color: var(--px-color-white);
169
- --px-badge-bg-color: var(--px-color-warning);
170
- --px-badge-border-color: var(--px-color-warning-dark);
167
+ .px-badge--warning[data-v-b16297ef] {
168
+ --px-badge-text-color: var(--px-color-white);
169
+ --px-badge-bg-color: var(--px-color-warning);
170
+ --px-badge-border-color: var(--px-color-warning-dark);
171
171
  --px-badge-shadow-color: var(--px-color-warning-dark);
172
- }
172
+ }
173
173
  /* Outline variant for type */
174
- .px-badge--warning.is-outline[data-v-b16297ef] {
175
- --px-badge-text-color: var(--px-color-warning);
176
- --px-badge-bg-color: transparent;
174
+ .px-badge--warning.is-outline[data-v-b16297ef] {
175
+ --px-badge-text-color: var(--px-color-warning);
176
+ --px-badge-bg-color: transparent;
177
177
  --px-badge-border-color: var(--px-color-warning);
178
- }
178
+ }
179
179
  /* Dash variant for type */
180
- .px-badge--warning.is-dash[data-v-b16297ef] {
181
- --px-badge-text-color: var(--px-color-warning);
182
- --px-badge-bg-color: var(--px-color-warning-light-9);
180
+ .px-badge--warning.is-dash[data-v-b16297ef] {
181
+ --px-badge-text-color: var(--px-color-warning);
182
+ --px-badge-bg-color: var(--px-color-warning-light-9);
183
183
  --px-badge-border-color: var(--px-color-warning);
184
184
  }
185
- .px-badge--danger[data-v-b16297ef] {
186
- --px-badge-text-color: var(--px-color-white);
187
- --px-badge-bg-color: var(--px-color-danger);
188
- --px-badge-border-color: var(--px-color-danger-dark);
185
+ .px-badge--danger[data-v-b16297ef] {
186
+ --px-badge-text-color: var(--px-color-white);
187
+ --px-badge-bg-color: var(--px-color-danger);
188
+ --px-badge-border-color: var(--px-color-danger-dark);
189
189
  --px-badge-shadow-color: var(--px-color-danger-dark);
190
- }
190
+ }
191
191
  /* Outline variant for type */
192
- .px-badge--danger.is-outline[data-v-b16297ef] {
193
- --px-badge-text-color: var(--px-color-danger);
194
- --px-badge-bg-color: transparent;
192
+ .px-badge--danger.is-outline[data-v-b16297ef] {
193
+ --px-badge-text-color: var(--px-color-danger);
194
+ --px-badge-bg-color: transparent;
195
195
  --px-badge-border-color: var(--px-color-danger);
196
- }
196
+ }
197
197
  /* Dash variant for type */
198
- .px-badge--danger.is-dash[data-v-b16297ef] {
199
- --px-badge-text-color: var(--px-color-danger);
200
- --px-badge-bg-color: var(--px-color-danger-light-9);
198
+ .px-badge--danger.is-dash[data-v-b16297ef] {
199
+ --px-badge-text-color: var(--px-color-danger);
200
+ --px-badge-bg-color: var(--px-color-danger-light-9);
201
201
  --px-badge-border-color: var(--px-color-danger);
202
- }
202
+ }
203
203
  /* Size variants */
204
- .px-badge--large[data-v-b16297ef] {
205
- --px-badge-height: 28px;
206
- --px-badge-padding: 0 12px;
204
+ .px-badge--large[data-v-b16297ef] {
205
+ --px-badge-height: 28px;
206
+ --px-badge-padding: 0 12px;
207
207
  --px-badge-font-size: var(--px-font-size-small);
208
208
  }
209
- .px-badge--small[data-v-b16297ef] {
210
- --px-badge-height: 18px;
211
- --px-badge-padding: 0 6px;
212
- --px-badge-font-size: 10px;
209
+ .px-badge--small[data-v-b16297ef] {
210
+ --px-badge-height: 18px;
211
+ --px-badge-padding: 0 6px;
212
+ --px-badge-font-size: 10px;
213
213
  filter: drop-shadow(1px 1px 0px var(--px-badge-shadow-color));
214
214
  }
package/dist/{es/theme → theme}/Button.css RENAMED
@@ -18,7 +18,11 @@
18
18
  --px-button-active-border-color: var(--px-active-border-color);
19
19
  --px-button-active-bg-color: var(--px-active-bg-color);
20
20
  --px-button-outline-color: var(--px-color-primary-light-5);
21
- --px-button-shadow-color: var(--px-shadow-color);
21
+ --px-button-shadow-color: var(--px-shadow-color);
22
+
23
+ /* Beveled inset for 3D raised-button depth */
24
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
25
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
22
26
  }
23
27
  /* Base Button Styles - Pixel Game Aesthetic */
24
28
  .px-button[data-v-0d682c9b] {
@@ -66,7 +70,7 @@
66
70
  );
67
71
  z-index: -1;
68
72
  }
69
- /* Fill layer — inset by border width, filled with bg color */
73
+ /* Fill layer — inset by border width, filled with bg color, beveled */
70
74
  .px-button[data-v-0d682c9b]::after {
71
75
  content: '';
72
76
  position: absolute;
@@ -78,6 +82,7 @@
78
82
  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%,
79
83
  4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
80
84
  );
85
+ box-shadow: var(--px-button-inset-highlight), var(--px-button-inset-shadow);
81
86
  z-index: -1;
82
87
  }
83
88
  .px-button + .px-button[data-v-0d682c9b] {
@@ -93,7 +98,9 @@
93
98
  background: var(--px-button-hover-border-color);
94
99
  }
95
100
  .px-button[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::after {
96
- background: var(--px-button-hover-bg-color);
101
+ background: var(--px-button-hover-bg-color);
102
+ box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
103
+ inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
97
104
  }
98
105
  /* Active - Press down effect */
99
106
  .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
@@ -105,7 +112,8 @@
105
112
  background: var(--px-button-active-border-color);
106
113
  }
107
114
  .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::after {
108
- background: var(--px-button-active-bg-color);
115
+ background: var(--px-button-active-bg-color);
116
+ box-shadow: var(--px-button-inset-shadow), var(--px-button-inset-highlight);
109
117
  }
110
118
  /* Focus outline */
111
119
  .px-button[data-v-0d682c9b]:focus-visible {
@@ -121,6 +129,8 @@
121
129
  }
122
130
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
123
131
  .px-button.is-dash[data-v-0d682c9b] {
132
+ --px-button-inset-highlight: none;
133
+ --px-button-inset-shadow: none;
124
134
  border: 2px dashed var(--px-button-border-color);
125
135
  filter: none;
126
136
  isolation: isolate;
@@ -153,6 +163,8 @@
153
163
  }
154
164
  /* Ghost variant - No border/background, subtle hover fill */
155
165
  .px-button.is-ghost[data-v-0d682c9b] {
166
+ --px-button-inset-highlight: none;
167
+ --px-button-inset-shadow: none;
156
168
  filter: none;
157
169
  isolation: isolate;
158
170
  --px-button-shadow-color: transparent;
@@ -188,6 +200,8 @@
188
200
  }
189
201
  /* Link variant - Underlined text, no border/background/shadow */
190
202
  .px-button.is-link[data-v-0d682c9b] {
203
+ --px-button-inset-highlight: none;
204
+ --px-button-inset-shadow: none;
191
205
  filter: none;
192
206
  --px-button-shadow-color: transparent;
193
207
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -234,6 +248,16 @@
234
248
  display: flex;
235
249
  width: 100%;
236
250
  margin-left: 0;
251
+ }
252
+ .px-button.is-block[data-v-0d682c9b]:focus-visible {
253
+ outline-offset: -4px;
254
+ }
255
+ .px-button.is-block[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading) {
256
+ transform: none;
257
+ filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-button-shadow-color));
258
+ }
259
+ .px-button.is-block[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
260
+ transform: none;
237
261
  }
238
262
  /* Responsive variant - Viewport-adaptive sizing */
239
263
  .px-button.is-responsive[data-v-0d682c9b] {
@@ -303,6 +327,8 @@
303
327
  .px-button[disabled][data-v-0d682c9b],
304
328
  .px-button[disabled][data-v-0d682c9b]:hover,
305
329
  .px-button[disabled][data-v-0d682c9b]:focus {
330
+ --px-button-inset-highlight: none;
331
+ --px-button-inset-shadow: none;
306
332
  color: var(--px-button-disabled-text-color);
307
333
  cursor: not-allowed;
308
334
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
@@ -320,8 +346,16 @@
320
346
  width: 1em;
321
347
  height: 1em;
322
348
  }
349
+ /* Dark mode bevel override */
350
+ html.dark .px-button[data-v-0d682c9b],
351
+ .px-dark .px-button[data-v-0d682c9b] {
352
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1);
353
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
354
+ }
323
355
  /* Type variants - Colored buttons */
324
356
  .px-button--primary[data-v-0d682c9b] {
357
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
358
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
325
359
  --px-button-text-color: var(--px-color-white);
326
360
  --px-button-bg-color: var(--px-color-primary);
327
361
  --px-button-border-color: var(--px-color-primary-dark);
@@ -390,6 +424,8 @@
390
424
  --px-button-shadow-color: var(--px-color-primary-dark);
391
425
  }
392
426
  .px-button--success[data-v-0d682c9b] {
427
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
428
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
393
429
  --px-button-text-color: var(--px-color-white);
394
430
  --px-button-bg-color: var(--px-color-success);
395
431
  --px-button-border-color: var(--px-color-success-dark);
@@ -458,6 +494,8 @@
458
494
  --px-button-shadow-color: var(--px-color-success-dark);
459
495
  }
460
496
  .px-button--warning[data-v-0d682c9b] {
497
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
498
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
461
499
  --px-button-text-color: var(--px-color-white);
462
500
  --px-button-bg-color: var(--px-color-warning);
463
501
  --px-button-border-color: var(--px-color-warning-dark);
@@ -526,6 +564,8 @@
526
564
  --px-button-shadow-color: var(--px-color-warning-dark);
527
565
  }
528
566
  .px-button--info[data-v-0d682c9b] {
567
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
568
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
529
569
  --px-button-text-color: var(--px-color-white);
530
570
  --px-button-bg-color: var(--px-color-info);
531
571
  --px-button-border-color: var(--px-color-info-dark);
@@ -594,6 +634,8 @@
594
634
  --px-button-shadow-color: var(--px-color-info-dark);
595
635
  }
596
636
  .px-button--danger[data-v-0d682c9b] {
637
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
638
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
597
639
  --px-button-text-color: var(--px-color-white);
598
640
  --px-button-bg-color: var(--px-color-danger);
599
641
  --px-button-border-color: var(--px-color-danger-dark);
@@ -761,7 +803,11 @@
761
803
  --px-button-active-border-color: var(--px-active-border-color);
762
804
  --px-button-active-bg-color: var(--px-active-bg-color);
763
805
  --px-button-outline-color: var(--px-color-primary-light-5);
764
- --px-button-shadow-color: var(--px-shadow-color);
806
+ --px-button-shadow-color: var(--px-shadow-color);
807
+
808
+ /* Beveled inset for 3D raised-button depth */
809
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
810
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
765
811
  }
766
812
  /* Base Button Styles - Pixel Game Aesthetic */
767
813
  .px-button[data-v-87af5dc3] {
@@ -809,7 +855,7 @@
809
855
  );
810
856
  z-index: -1;
811
857
  }
812
- /* Fill layer — inset by border width, filled with bg color */
858
+ /* Fill layer — inset by border width, filled with bg color, beveled */
813
859
  .px-button[data-v-87af5dc3]::after {
814
860
  content: '';
815
861
  position: absolute;
@@ -821,6 +867,7 @@
821
867
  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%,
822
868
  4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
823
869
  );
870
+ box-shadow: var(--px-button-inset-highlight), var(--px-button-inset-shadow);
824
871
  z-index: -1;
825
872
  }
826
873
  .px-button + .px-button[data-v-87af5dc3] {
@@ -836,7 +883,9 @@
836
883
  background: var(--px-button-hover-border-color);
837
884
  }
838
885
  .px-button[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::after {
839
- background: var(--px-button-hover-bg-color);
886
+ background: var(--px-button-hover-bg-color);
887
+ box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
888
+ inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
840
889
  }
841
890
  /* Active - Press down effect */
842
891
  .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
@@ -848,7 +897,8 @@
848
897
  background: var(--px-button-active-border-color);
849
898
  }
850
899
  .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::after {
851
- background: var(--px-button-active-bg-color);
900
+ background: var(--px-button-active-bg-color);
901
+ box-shadow: var(--px-button-inset-shadow), var(--px-button-inset-highlight);
852
902
  }
853
903
  /* Focus outline */
854
904
  .px-button[data-v-87af5dc3]:focus-visible {
@@ -864,6 +914,8 @@
864
914
  }
865
915
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
866
916
  .px-button.is-dash[data-v-87af5dc3] {
917
+ --px-button-inset-highlight: none;
918
+ --px-button-inset-shadow: none;
867
919
  border: 2px dashed var(--px-button-border-color);
868
920
  filter: none;
869
921
  isolation: isolate;
@@ -896,6 +948,8 @@
896
948
  }
897
949
  /* Ghost variant - No border/background, subtle hover fill */
898
950
  .px-button.is-ghost[data-v-87af5dc3] {
951
+ --px-button-inset-highlight: none;
952
+ --px-button-inset-shadow: none;
899
953
  filter: none;
900
954
  isolation: isolate;
901
955
  --px-button-shadow-color: transparent;
@@ -931,6 +985,8 @@
931
985
  }
932
986
  /* Link variant - Underlined text, no border/background/shadow */
933
987
  .px-button.is-link[data-v-87af5dc3] {
988
+ --px-button-inset-highlight: none;
989
+ --px-button-inset-shadow: none;
934
990
  filter: none;
935
991
  --px-button-shadow-color: transparent;
936
992
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -977,6 +1033,16 @@
977
1033
  display: flex;
978
1034
  width: 100%;
979
1035
  margin-left: 0;
1036
+ }
1037
+ .px-button.is-block[data-v-87af5dc3]:focus-visible {
1038
+ outline-offset: -4px;
1039
+ }
1040
+ .px-button.is-block[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading) {
1041
+ transform: none;
1042
+ filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-button-shadow-color));
1043
+ }
1044
+ .px-button.is-block[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
1045
+ transform: none;
980
1046
  }
981
1047
  /* Responsive variant - Viewport-adaptive sizing */
982
1048
  .px-button.is-responsive[data-v-87af5dc3] {
@@ -1046,6 +1112,8 @@
1046
1112
  .px-button[disabled][data-v-87af5dc3],
1047
1113
  .px-button[disabled][data-v-87af5dc3]:hover,
1048
1114
  .px-button[disabled][data-v-87af5dc3]:focus {
1115
+ --px-button-inset-highlight: none;
1116
+ --px-button-inset-shadow: none;
1049
1117
  color: var(--px-button-disabled-text-color);
1050
1118
  cursor: not-allowed;
1051
1119
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
@@ -1063,8 +1131,16 @@
1063
1131
  width: 1em;
1064
1132
  height: 1em;
1065
1133
  }
1134
+ /* Dark mode bevel override */
1135
+ html.dark .px-button[data-v-87af5dc3],
1136
+ .px-dark .px-button[data-v-87af5dc3] {
1137
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1);
1138
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
1139
+ }
1066
1140
  /* Type variants - Colored buttons */
1067
1141
  .px-button--primary[data-v-87af5dc3] {
1142
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1143
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1068
1144
  --px-button-text-color: var(--px-color-white);
1069
1145
  --px-button-bg-color: var(--px-color-primary);
1070
1146
  --px-button-border-color: var(--px-color-primary-dark);
@@ -1133,6 +1209,8 @@
1133
1209
  --px-button-shadow-color: var(--px-color-primary-dark);
1134
1210
  }
1135
1211
  .px-button--success[data-v-87af5dc3] {
1212
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1213
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1136
1214
  --px-button-text-color: var(--px-color-white);
1137
1215
  --px-button-bg-color: var(--px-color-success);
1138
1216
  --px-button-border-color: var(--px-color-success-dark);
@@ -1201,6 +1279,8 @@
1201
1279
  --px-button-shadow-color: var(--px-color-success-dark);
1202
1280
  }
1203
1281
  .px-button--warning[data-v-87af5dc3] {
1282
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1283
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1204
1284
  --px-button-text-color: var(--px-color-white);
1205
1285
  --px-button-bg-color: var(--px-color-warning);
1206
1286
  --px-button-border-color: var(--px-color-warning-dark);
@@ -1269,6 +1349,8 @@
1269
1349
  --px-button-shadow-color: var(--px-color-warning-dark);
1270
1350
  }
1271
1351
  .px-button--info[data-v-87af5dc3] {
1352
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1353
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1272
1354
  --px-button-text-color: var(--px-color-white);
1273
1355
  --px-button-bg-color: var(--px-color-info);
1274
1356
  --px-button-border-color: var(--px-color-info-dark);
@@ -1337,6 +1419,8 @@
1337
1419
  --px-button-shadow-color: var(--px-color-info-dark);
1338
1420
  }
1339
1421
  .px-button--danger[data-v-87af5dc3] {
1422
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1423
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1340
1424
  --px-button-text-color: var(--px-color-white);
1341
1425
  --px-button-bg-color: var(--px-color-danger);
1342
1426
  --px-button-border-color: var(--px-color-danger-dark);