sakana-element 2.2.0 → 2.4.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 (155) hide show
  1. package/README.md +98 -25
  2. package/dist/es/{Alert-C76ZWSVk.js → Alert-DfLsJvQD.js} +2 -2
  3. package/dist/es/Avatar-Ci4OKsv7.js +9 -0
  4. package/dist/es/{Badge-CoFWwBwv.js → Badge-B4wEToK6.js} +2 -2
  5. package/dist/es/{Breadcrumb-BtrwTVKW.js → Breadcrumb-BFzww8jd.js} +2 -2
  6. package/dist/es/{Button-S_31-UWJ.js → Button-DbFviVWb.js} +3 -3
  7. package/dist/es/{Card-DcW6nHYD.js → Card-ClRqKkc_.js} +2 -2
  8. package/dist/es/ChatBubble-DFEV_lVI.js +9 -0
  9. package/dist/es/Checkbox-l86YI3Fr.js +51 -0
  10. package/dist/es/{Collapse-DsS7M-m3.js → Collapse-B67v6RSE.js} +4 -4
  11. package/dist/es/{ConfigProvider-BgIewHXP.js → ConfigProvider-BCoGbcS5.js} +2 -2
  12. package/dist/es/Diff-BLiniLom.js +64 -0
  13. package/dist/es/Divider-DDSOHv8G.js +9 -0
  14. package/dist/es/Drawer-apeXw6EO.js +40 -0
  15. package/dist/es/Dropdown-By9qIErf.js +104 -0
  16. package/dist/es/{FileInput-BQ59woas.js → FileInput-CZ5jTfB_.js} +3 -3
  17. package/dist/es/Filter-B_1zU4Dq.js +40 -0
  18. package/dist/es/Form-B_XDnSjK.js +123 -0
  19. package/dist/es/{Icon-DpJyuj7c.js → Icon-D6qRB3pq.js} +1 -1
  20. package/dist/es/Indicator-C6Ip4dpP.js +9 -0
  21. package/dist/es/{Input-CiE4bPJN.js → Input-bThwBbNZ.js} +7 -7
  22. package/dist/es/Kbd-DXNjs7at.js +13 -0
  23. package/dist/es/{Link-B9B2APZq.js → Link-08Ee61Fv.js} +1 -1
  24. package/dist/es/{Loading-BW99pE5N.js → Loading-ByI9mjss.js} +13 -13
  25. package/dist/es/Message-CGG-lV5I.js +152 -0
  26. package/dist/es/Notification-B4clKY5h.js +69 -0
  27. package/dist/es/{Overlay-BRDSWspM.js → Overlay-6iPenJB1.js} +1 -1
  28. package/dist/es/Pixelate-A8J7jxDW.js +39 -0
  29. package/dist/es/Popconfirm-gcHGcOTz.js +23 -0
  30. package/dist/es/Progress-DFUBJQ4X.js +12 -0
  31. package/dist/es/Radio-CLBa1XIM.js +33 -0
  32. package/dist/es/Resizable-BWrFr2oj.js +151 -0
  33. package/dist/es/{Select-Dwqv8isB.js → Select-BtLqds1d.js} +20 -20
  34. package/dist/es/Skeleton-CGUQv3nQ.js +15 -0
  35. package/dist/es/{Switch-B1Gnv1tB.js → Switch-CZJ-S77_.js} +3 -3
  36. package/dist/es/Table-lHbxiyGq.js +10 -0
  37. package/dist/es/Tooltip-CdPqNYdn.js +74 -0
  38. package/dist/es/Validator-7ZT_nXDZ.js +40 -0
  39. package/dist/es/hooks-pU4JmsO3.js +171 -0
  40. package/dist/es/index.js +107 -70
  41. package/dist/es/utils-BXICIEsD.js +139 -0
  42. package/dist/es/{vendor-DXmGx29U.js → vendor-DrBJKLFW.js} +254 -210
  43. package/dist/index.css +1 -1
  44. package/dist/theme/Avatar.css +13 -43
  45. package/dist/theme/Badge.css +151 -151
  46. package/dist/theme/Breadcrumb.css +46 -4
  47. package/dist/theme/Button.css +72 -8
  48. package/dist/theme/Card.css +177 -93
  49. package/dist/theme/ChatBubble.css +218 -0
  50. package/dist/theme/Checkbox.css +604 -0
  51. package/dist/theme/Collapse.css +96 -96
  52. package/dist/theme/Diff.css +110 -0
  53. package/dist/theme/Divider.css +150 -0
  54. package/dist/theme/Drawer.css +206 -0
  55. package/dist/theme/Dropdown.css +359 -75
  56. package/dist/theme/FileInput.css +32 -0
  57. package/dist/theme/Filter.css +598 -0
  58. package/dist/theme/Indicator.css +159 -0
  59. package/dist/theme/Input.css +414 -406
  60. package/dist/theme/Kbd.css +104 -0
  61. package/dist/theme/Link.css +22 -3
  62. package/dist/theme/Loading.css +50 -12
  63. package/dist/theme/Message.css +250 -41
  64. package/dist/theme/Notification.css +232 -42
  65. package/dist/theme/Popconfirm.css +23 -7
  66. package/dist/theme/Progress.css +278 -0
  67. package/dist/theme/Radio.css +492 -0
  68. package/dist/theme/Resizable.css +95 -0
  69. package/dist/theme/Select.css +198 -88
  70. package/dist/theme/Skeleton.css +192 -0
  71. package/dist/theme/Switch.css +22 -3
  72. package/dist/theme/Table.css +680 -0
  73. package/dist/theme/Tooltip.css +150 -26
  74. package/dist/theme/Validator.css +25 -0
  75. package/dist/types/components/Avatar/types.d.ts +0 -2
  76. package/dist/types/components/ChatBubble/constants.d.ts +2 -0
  77. package/dist/types/components/ChatBubble/index.d.ts +27 -0
  78. package/dist/types/components/ChatBubble/types.d.ts +10 -0
  79. package/dist/types/components/Checkbox/constants.d.ts +5 -0
  80. package/dist/types/components/Checkbox/index.d.ts +94 -0
  81. package/dist/types/components/Checkbox/types.d.ts +46 -0
  82. package/dist/types/components/Collapse/index.d.ts +5 -5
  83. package/dist/types/components/Diff/constants.d.ts +4 -0
  84. package/dist/types/components/Diff/index.d.ts +67 -0
  85. package/dist/types/components/Diff/types.d.ts +29 -0
  86. package/dist/types/components/Divider/index.d.ts +30 -0
  87. package/dist/types/components/Divider/types.d.ts +10 -0
  88. package/dist/types/components/Drawer/constants.d.ts +1 -0
  89. package/dist/types/components/Drawer/index.d.ts +72 -0
  90. package/dist/types/components/Drawer/types.d.ts +20 -0
  91. package/dist/types/components/Dropdown/index.d.ts +13 -3
  92. package/dist/types/components/Dropdown/types.d.ts +3 -0
  93. package/dist/types/components/Dropdown/useDropdownKeyboard.d.ts +8 -0
  94. package/dist/types/components/FileInput/index.d.ts +5 -5
  95. package/dist/types/components/Filter/constants.d.ts +5 -0
  96. package/dist/types/components/Filter/index.d.ts +59 -0
  97. package/dist/types/components/Filter/types.d.ts +38 -0
  98. package/dist/types/components/Indicator/constants.d.ts +2 -0
  99. package/dist/types/components/Indicator/index.d.ts +28 -0
  100. package/dist/types/components/Indicator/types.d.ts +10 -0
  101. package/dist/types/components/Input/index.d.ts +10 -10
  102. package/dist/types/components/Kbd/constants.d.ts +3 -0
  103. package/dist/types/components/Kbd/index.d.ts +24 -0
  104. package/dist/types/components/Kbd/types.d.ts +10 -0
  105. package/dist/types/components/Message/methods.d.ts +2 -0
  106. package/dist/types/components/Message/types.d.ts +7 -1
  107. package/dist/types/components/MessageBox/types.d.ts +14 -2
  108. package/dist/types/components/Notification/methods.d.ts +3 -0
  109. package/dist/types/components/Notification/types.d.ts +8 -2
  110. package/dist/types/components/Pixelate/constants.d.ts +2 -0
  111. package/dist/types/components/Pixelate/index.d.ts +71 -0
  112. package/dist/types/components/Pixelate/types.d.ts +23 -0
  113. package/dist/types/components/Popconfirm/index.d.ts +18 -9
  114. package/dist/types/components/Popconfirm/types.d.ts +2 -1
  115. package/dist/types/components/Progress/constants.d.ts +2 -0
  116. package/dist/types/components/Progress/index.d.ts +50 -0
  117. package/dist/types/components/Progress/types.d.ts +22 -0
  118. package/dist/types/components/Radio/constants.d.ts +5 -0
  119. package/dist/types/components/Radio/index.d.ts +88 -0
  120. package/dist/types/components/Radio/types.d.ts +43 -0
  121. package/dist/types/components/Resizable/constants.d.ts +3 -0
  122. package/dist/types/components/Resizable/index.d.ts +135 -0
  123. package/dist/types/components/Resizable/types.d.ts +52 -0
  124. package/dist/types/components/Select/index.d.ts +32 -23
  125. package/dist/types/components/Skeleton/index.d.ts +36 -0
  126. package/dist/types/components/Skeleton/types.d.ts +12 -0
  127. package/dist/types/components/Switch/index.d.ts +5 -5
  128. package/dist/types/components/Table/index.d.ts +27 -0
  129. package/dist/types/components/Table/types.d.ts +20 -0
  130. package/dist/types/components/Tooltip/index.d.ts +9 -3
  131. package/dist/types/components/Tooltip/types.d.ts +7 -0
  132. package/dist/types/components/Validator/index.d.ts +52 -0
  133. package/dist/types/components/Validator/types.d.ts +13 -0
  134. package/dist/types/components/index.d.ts +15 -0
  135. package/dist/types/hooks/index.d.ts +3 -1
  136. package/dist/types/hooks/useDraggable.d.ts +7 -0
  137. package/dist/types/hooks/useFocusTrap.d.ts +5 -0
  138. package/dist/types/utils/index.d.ts +2 -0
  139. package/dist/types/utils/instance-management.d.ts +40 -0
  140. package/dist/types/utils/pixelate.d.ts +10 -0
  141. package/dist/types/utils/style.d.ts +1 -0
  142. package/dist/umd/index.css +1 -1
  143. package/dist/umd/index.css.gz +0 -0
  144. package/dist/umd/index.umd.cjs +4 -4
  145. package/dist/umd/index.umd.cjs.gz +0 -0
  146. package/package.json +59 -59
  147. package/dist/es/Avatar-CxsRW-wl.js +0 -9
  148. package/dist/es/Dropdown-GcomGMAI.js +0 -40
  149. package/dist/es/Form-j90EzLXU.js +0 -122
  150. package/dist/es/Message-DCNnTUje.js +0 -123
  151. package/dist/es/Notification-CBzY5904.js +0 -58
  152. package/dist/es/Popconfirm-DF6d2ORS.js +0 -23
  153. package/dist/es/Tooltip-k6gKnMyt.js +0 -74
  154. package/dist/es/hooks-BaG7l8K5.js +0 -116
  155. package/dist/es/utils-bsCscZfS.js +0 -84
package/dist/theme/Avatar.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Avatar Variables */
2
- .px-avatar[data-v-47da9c60] {
2
+ .px-avatar[data-v-be451b35] {
3
3
  --px-avatar-size: 48px;
4
4
  --px-avatar-bg-color: var(--px-fill-color);
5
5
  --px-avatar-text-color: var(--px-text-color-primary);
@@ -8,7 +8,7 @@
8
8
  --px-avatar-font-size: var(--px-font-size-base);
9
9
  }
10
10
  /* Base Avatar Styles - Pixel Game Aesthetic */
11
- .px-avatar[data-v-47da9c60] {
11
+ .px-avatar[data-v-be451b35] {
12
12
  display: inline-flex;
13
13
  justify-content: center;
14
14
  align-items: center;
@@ -31,8 +31,8 @@
31
31
  filter: drop-shadow(2px 2px 0px var(--px-avatar-shadow-color));
32
32
  }
33
33
  /* Circle shape (default) — 4-step staircase pixel circle */
34
- .px-avatar[data-v-47da9c60]::before,
35
- .px-avatar[data-v-47da9c60]::after {
34
+ .px-avatar[data-v-be451b35]::before,
35
+ .px-avatar[data-v-be451b35]::after {
36
36
  content: '';
37
37
  position: absolute;
38
38
  background: var(--px-avatar-bg-color);
@@ -45,25 +45,25 @@
45
45
  );
46
46
  }
47
47
  /* Border layer — hidden by default, shown with is-border */
48
- .px-avatar[data-v-47da9c60]::before {
48
+ .px-avatar[data-v-be451b35]::before {
49
49
  inset: 0;
50
50
  background: var(--px-avatar-border-color);
51
51
  display: none;
52
52
  }
53
53
  /* Fill layer */
54
- .px-avatar[data-v-47da9c60]::after {
54
+ .px-avatar[data-v-be451b35]::after {
55
55
  inset: 0;
56
56
  }
57
57
  /* Border visible */
58
- .px-avatar.is-border[data-v-47da9c60]::before {
58
+ .px-avatar.is-border[data-v-be451b35]::before {
59
59
  display: block;
60
60
  }
61
- .px-avatar.is-border[data-v-47da9c60]::after {
61
+ .px-avatar.is-border[data-v-be451b35]::after {
62
62
  inset: 2px;
63
63
  }
64
64
  /* Square shape — 2px chamfered pixel rectangle */
65
- .px-avatar.is-square[data-v-47da9c60]::before,
66
- .px-avatar.is-square[data-v-47da9c60]::after {
65
+ .px-avatar.is-square[data-v-be451b35]::before,
66
+ .px-avatar.is-square[data-v-be451b35]::after {
67
67
  clip-path: polygon(
68
68
  0 2px, 2px 2px, 2px 0,
69
69
  calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
@@ -71,46 +71,16 @@
71
71
  2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
72
72
  );
73
73
  }
74
- .px-avatar + .px-avatar[data-v-47da9c60] {
74
+ .px-avatar + .px-avatar[data-v-be451b35] {
75
75
  margin-left: 8px;
76
76
  }
77
77
  /* Size variants */
78
- .px-avatar--large[data-v-47da9c60] {
78
+ .px-avatar--large[data-v-be451b35] {
79
79
  --px-avatar-size: 64px;
80
80
  --px-avatar-font-size: var(--px-font-size-large);
81
81
  }
82
- .px-avatar--small[data-v-47da9c60] {
82
+ .px-avatar--small[data-v-be451b35] {
83
83
  --px-avatar-size: 32px;
84
84
  --px-avatar-font-size: var(--px-font-size-small);
85
85
  filter: drop-shadow(1px 1px 0px var(--px-avatar-shadow-color));
86
86
  }
87
- /* Online/Offline indicator dot */
88
- .px-avatar__indicator[data-v-47da9c60] {
89
- --px-avatar-indicator-size: 10px;
90
-
91
- position: absolute;
92
- top: 2px;
93
- right: 2px;
94
- width: var(--px-avatar-indicator-size);
95
- height: var(--px-avatar-indicator-size);
96
- border: 2px solid var(--px-bg-color, #ffffff);
97
- border-radius: 50%;
98
- z-index: 1;
99
- }
100
- .px-avatar__indicator.is-online[data-v-47da9c60] {
101
- background-color: var(--px-color-success);
102
- }
103
- .px-avatar__indicator.is-offline[data-v-47da9c60] {
104
- background-color: var(--px-color-info);
105
- }
106
- .px-avatar--large .px-avatar__indicator[data-v-47da9c60] {
107
- --px-avatar-indicator-size: 12px;
108
- top: 4px;
109
- right: 4px;
110
- }
111
- .px-avatar--small .px-avatar__indicator[data-v-47da9c60] {
112
- --px-avatar-indicator-size: 8px;
113
- top: 0;
114
- right: 0;
115
- border-width: 1px;
116
- }
package/dist/theme/Badge.css CHANGED
@@ -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/theme/Breadcrumb.css CHANGED
@@ -42,10 +42,29 @@
42
42
  }
43
43
  a.px-breadcrumb__link[data-v-a0927948] {
44
44
  cursor: pointer;
45
- border-bottom: 2px solid transparent;
45
+ background-image: none;
46
+ background-repeat: no-repeat;
47
+ background-position: bottom 0 left 0;
48
+ background-size: 100% 2px;
49
+ padding-bottom: 2px;
50
+ transition: none;
46
51
  }
47
52
  a.px-breadcrumb__link[data-v-a0927948]:hover:not(.is-disabled) {
48
- border-bottom: 2px solid var(--px-breadcrumb-link-color);
53
+ background-image: repeating-linear-gradient(
54
+ to right,
55
+ var(--px-breadcrumb-link-color) 0px,
56
+ var(--px-breadcrumb-link-color) 4px,
57
+ transparent 4px,
58
+ transparent 8px
59
+ );
60
+ transform: translate(-1px, -1px);
61
+ }
62
+ a.px-breadcrumb__link[data-v-a0927948]:active:not(.is-disabled) {
63
+ transform: translate(1px, 1px);
64
+ }
65
+ a.px-breadcrumb__link[data-v-a0927948]:focus-visible:not(.is-disabled) {
66
+ outline: 2px dashed var(--px-color-primary);
67
+ outline-offset: 2px;
49
68
  }
50
69
  /* Current (last) item — plain text, no link styling */
51
70
  .px-breadcrumb__link.is-current[data-v-a0927948] {
@@ -72,6 +91,8 @@ a.px-breadcrumb__link[data-v-a0927948]:hover:not(.is-disabled) {
72
91
  margin: 0 8px;
73
92
  color: var(--px-breadcrumb-separator-color);
74
93
  font-weight: 400;
94
+ font-family: var(--px-font-family);
95
+ image-rendering: pixelated;
75
96
  }
76
97
  /* Breadcrumb Variables */
77
98
  .px-breadcrumb[data-v-8be388ff] {
@@ -117,10 +138,29 @@ a.px-breadcrumb__link[data-v-a0927948]:hover:not(.is-disabled) {
117
138
  }
118
139
  a.px-breadcrumb__link[data-v-8be388ff] {
119
140
  cursor: pointer;
120
- border-bottom: 2px solid transparent;
141
+ background-image: none;
142
+ background-repeat: no-repeat;
143
+ background-position: bottom 0 left 0;
144
+ background-size: 100% 2px;
145
+ padding-bottom: 2px;
146
+ transition: none;
121
147
  }
122
148
  a.px-breadcrumb__link[data-v-8be388ff]:hover:not(.is-disabled) {
123
- border-bottom: 2px solid var(--px-breadcrumb-link-color);
149
+ background-image: repeating-linear-gradient(
150
+ to right,
151
+ var(--px-breadcrumb-link-color) 0px,
152
+ var(--px-breadcrumb-link-color) 4px,
153
+ transparent 4px,
154
+ transparent 8px
155
+ );
156
+ transform: translate(-1px, -1px);
157
+ }
158
+ a.px-breadcrumb__link[data-v-8be388ff]:active:not(.is-disabled) {
159
+ transform: translate(1px, 1px);
160
+ }
161
+ a.px-breadcrumb__link[data-v-8be388ff]:focus-visible:not(.is-disabled) {
162
+ outline: 2px dashed var(--px-color-primary);
163
+ outline-offset: 2px;
124
164
  }
125
165
  /* Current (last) item — plain text, no link styling */
126
166
  .px-breadcrumb__link.is-current[data-v-8be388ff] {
@@ -147,4 +187,6 @@ a.px-breadcrumb__link[data-v-8be388ff]:hover:not(.is-disabled) {
147
187
  margin: 0 8px;
148
188
  color: var(--px-breadcrumb-separator-color);
149
189
  font-weight: 400;
190
+ font-family: var(--px-font-family);
191
+ image-rendering: pixelated;
150
192
  }