sakana-element 2.3.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 (115) hide show
  1. package/README.md +5 -5
  2. package/dist/es/{Alert-BwTsp4X3.js → Alert-DfLsJvQD.js} +2 -2
  3. package/dist/es/{Avatar-CJu6JYV3.js → Avatar-Ci4OKsv7.js} +1 -1
  4. package/dist/es/{Badge-BmxZXX8k.js → Badge-B4wEToK6.js} +2 -2
  5. package/dist/es/{Breadcrumb-BP8MSklj.js → Breadcrumb-BFzww8jd.js} +2 -2
  6. package/dist/es/{Button-BJHtN7gh.js → Button-DbFviVWb.js} +3 -3
  7. package/dist/es/{Card-DJHkCmsz.js → Card-ClRqKkc_.js} +1 -1
  8. package/dist/es/ChatBubble-DFEV_lVI.js +9 -0
  9. package/dist/es/{Checkbox-DX8L3fyp.js → Checkbox-l86YI3Fr.js} +3 -3
  10. package/dist/es/{Collapse-Ir3V9CuO.js → Collapse-B67v6RSE.js} +4 -4
  11. package/dist/es/{ConfigProvider-CsbSqwwi.js → ConfigProvider-BCoGbcS5.js} +2 -2
  12. package/dist/es/Diff-BLiniLom.js +64 -0
  13. package/dist/es/{Divider-C7PtODSK.js → Divider-DDSOHv8G.js} +1 -1
  14. package/dist/es/{Drawer-C2eVmvUp.js → Drawer-apeXw6EO.js} +2 -2
  15. package/dist/es/{Dropdown-CVg_c2fB.js → Dropdown-By9qIErf.js} +9 -9
  16. package/dist/es/{FileInput-BE26BmXm.js → FileInput-CZ5jTfB_.js} +3 -3
  17. package/dist/es/Filter-B_1zU4Dq.js +40 -0
  18. package/dist/es/{Form-7lZt5ehf.js → Form-B_XDnSjK.js} +62 -61
  19. package/dist/es/{Icon-BLDDdSU-.js → Icon-D6qRB3pq.js} +1 -1
  20. package/dist/es/{Indicator-B-en-MgG.js → Indicator-C6Ip4dpP.js} +1 -1
  21. package/dist/es/{Input-C5HuVehE.js → Input-bThwBbNZ.js} +5 -5
  22. package/dist/es/Kbd-DXNjs7at.js +13 -0
  23. package/dist/es/{Link-Av9RdcFv.js → Link-08Ee61Fv.js} +1 -1
  24. package/dist/es/{Loading-CBNDUWQd.js → Loading-ByI9mjss.js} +3 -3
  25. package/dist/es/{Message-DgnyyuXn.js → Message-CGG-lV5I.js} +14 -14
  26. package/dist/es/{Notification-LYRXnVAf.js → Notification-B4clKY5h.js} +13 -13
  27. package/dist/es/{Overlay-CpvMhnuU.js → Overlay-6iPenJB1.js} +1 -1
  28. package/dist/es/Pixelate-A8J7jxDW.js +39 -0
  29. package/dist/es/{Popconfirm-DvxFdLrw.js → Popconfirm-gcHGcOTz.js} +12 -12
  30. package/dist/es/{Progress-Bc5INMhJ.js → Progress-DFUBJQ4X.js} +1 -1
  31. package/dist/es/{Radio-263_rtRl.js → Radio-CLBa1XIM.js} +3 -3
  32. package/dist/es/Resizable-BWrFr2oj.js +151 -0
  33. package/dist/es/{Select-7ZxUCS8z.js → Select-BtLqds1d.js} +14 -14
  34. package/dist/es/Skeleton-CGUQv3nQ.js +15 -0
  35. package/dist/es/{Switch-DiCsMJT3.js → Switch-CZJ-S77_.js} +3 -3
  36. package/dist/es/{Table-BvA_xzDe.js → Table-lHbxiyGq.js} +1 -1
  37. package/dist/es/{Tooltip-J3ji6weH.js → Tooltip-CdPqNYdn.js} +3 -3
  38. package/dist/es/Validator-7ZT_nXDZ.js +40 -0
  39. package/dist/es/{hooks-BqobYUzS.js → hooks-pU4JmsO3.js} +1 -1
  40. package/dist/es/index.js +98 -81
  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/{es/theme → theme}/Badge.css +151 -151
  45. package/dist/{es/theme → theme}/Button.css +72 -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/Kbd/constants.d.ts +3 -0
  75. package/dist/types/components/Kbd/index.d.ts +24 -0
  76. package/dist/types/components/Kbd/types.d.ts +10 -0
  77. package/dist/types/components/Pixelate/index.d.ts +3 -3
  78. package/dist/types/components/Popconfirm/index.d.ts +3 -3
  79. package/dist/types/components/Resizable/constants.d.ts +3 -0
  80. package/dist/types/components/Resizable/index.d.ts +135 -0
  81. package/dist/types/components/Resizable/types.d.ts +52 -0
  82. package/dist/types/components/Select/index.d.ts +3 -3
  83. package/dist/types/components/Skeleton/index.d.ts +36 -0
  84. package/dist/types/components/Skeleton/types.d.ts +12 -0
  85. package/dist/types/components/Tooltip/index.d.ts +3 -3
  86. package/dist/types/components/Validator/index.d.ts +52 -0
  87. package/dist/types/components/Validator/types.d.ts +13 -0
  88. package/dist/types/components/index.d.ts +8 -1
  89. package/dist/types/utils/index.d.ts +1 -0
  90. package/dist/types/utils/pixelate.d.ts +10 -0
  91. package/dist/types/utils/style.d.ts +1 -0
  92. package/dist/umd/index.css +1 -1
  93. package/dist/umd/index.css.gz +0 -0
  94. package/dist/umd/index.umd.cjs +3 -3
  95. package/dist/umd/index.umd.cjs.gz +0 -0
  96. package/package.json +4 -4
  97. package/dist/es/Pixelate-BPypBgJU.js +0 -67
  98. package/dist/es/utils-BS5vsvlM.js +0 -101
  99. /package/dist/{es/theme → theme}/Alert.css +0 -0
  100. /package/dist/{es/theme → theme}/Avatar.css +0 -0
  101. /package/dist/{es/theme → theme}/Breadcrumb.css +0 -0
  102. /package/dist/{es/theme → theme}/Card.css +0 -0
  103. /package/dist/{es/theme → theme}/Drawer.css +0 -0
  104. /package/dist/{es/theme → theme}/Form.css +0 -0
  105. /package/dist/{es/theme → theme}/Icon.css +0 -0
  106. /package/dist/{es/theme → theme}/Indicator.css +0 -0
  107. /package/dist/{es/theme → theme}/Link.css +0 -0
  108. /package/dist/{es/theme → theme}/Loading.css +0 -0
  109. /package/dist/{es/theme → theme}/Overlay.css +0 -0
  110. /package/dist/{es/theme → theme}/Popconfirm.css +0 -0
  111. /package/dist/{es/theme → theme}/Progress.css +0 -0
  112. /package/dist/{es/theme → theme}/Table.css +0 -0
  113. /package/dist/{es/theme → theme}/Tooltip.css +0 -0
  114. /package/dist/{es/theme → theme}/fonts/zpix.woff2 +0 -0
  115. /package/dist/{es/theme → theme}/index.css +0 -0
package/dist/{es/theme → theme}/Divider.css RENAMED
@@ -17,7 +17,14 @@
17
17
  content: "";
18
18
  flex: 1;
19
19
  height: 2px;
20
- background: var(--px-divider-line-color);
20
+ /* Pixel-textured line: 2px on / 2px off */
21
+ background: repeating-linear-gradient(
22
+ to right,
23
+ var(--px-divider-line-color) 0px,
24
+ var(--px-divider-line-color) 2px,
25
+ transparent 2px,
26
+ transparent 4px
27
+ );
21
28
  }
22
29
  /* Vertical mode */
23
30
  .px-divider.is-vertical {
@@ -32,13 +39,45 @@
32
39
  flex: 1;
33
40
  width: 2px;
34
41
  height: auto;
42
+ /* Vertical pixel-textured line */
43
+ background: repeating-linear-gradient(
44
+ to bottom,
45
+ var(--px-divider-line-color) 0px,
46
+ var(--px-divider-line-color) 2px,
47
+ transparent 2px,
48
+ transparent 4px
49
+ );
35
50
  }
36
- /* Content text */
51
+ /* Content text – pixel-art badge styling */
37
52
  .px-divider__text {
38
- padding: 0 12px;
53
+ position: relative;
54
+ padding: 2px 12px;
39
55
  white-space: nowrap;
40
56
  line-height: 1;
41
57
  }
58
+ /* Pixel-corner border behind text */
59
+ .px-divider__text::before {
60
+ content: "";
61
+ position: absolute;
62
+ inset: 0;
63
+ background: var(--px-divider-line-color);
64
+ opacity: 0.15;
65
+ clip-path: polygon(
66
+ 0 2px,
67
+ 2px 2px,
68
+ 2px 0,
69
+ calc(100% - 2px) 0,
70
+ calc(100% - 2px) 2px,
71
+ 100% 2px,
72
+ 100% calc(100% - 2px),
73
+ calc(100% - 2px) calc(100% - 2px),
74
+ calc(100% - 2px) 100%,
75
+ 2px 100%,
76
+ 2px calc(100% - 2px),
77
+ 0 calc(100% - 2px)
78
+ );
79
+ z-index: -1;
80
+ }
42
81
  /* Content position */
43
82
  .px-divider--left::before {
44
83
  flex: 0 0 5%;
package/dist/{es/theme → theme}/Dropdown.css RENAMED
@@ -466,6 +466,6 @@
466
466
  transparent 12px
467
467
  );
468
468
  }
469
- .px-dropdown .px-button-group > :last-child {
469
+ .px-dropdown .px-button-group > :last-child {
470
470
  padding: 5px 7px;
471
- }
471
+ }
package/dist/{es/theme → theme}/FileInput.css RENAMED
@@ -12,6 +12,18 @@
12
12
  --px-file-input-trigger-hover-bg-color: var(--px-fill-color-darker);
13
13
  --px-file-input-icon-color: var(--px-text-color-secondary);
14
14
  --px-file-input-clear-hover-color: var(--px-text-color-primary);
15
+
16
+ /* Raised bevel for trigger button (same as PxButton) */
17
+ --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
18
+ --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
19
+
20
+ /* Sunken bevel for filename area (same as PxInput) */
21
+ --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
22
+ --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
23
+
24
+ /* Hover-state bevel (slightly stronger) */
25
+ --px-file-input-trigger-hover-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
26
+ --px-file-input-trigger-hover-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
15
27
  }
16
28
  /* Base FileInput Styles */
17
29
  .px-file-input {
@@ -123,6 +135,12 @@
123
135
  0 calc(100% - 4px)
124
136
  );
125
137
  z-index: -1;
138
+ /* Sunken bevel on the filename area */
139
+ box-shadow: var(--px-file-input-inset-shadow), var(--px-file-input-inset-highlight);
140
+ }
141
+ .px-file-input__wrapper:hover {
142
+ transform: translate(-1px, -1px);
143
+ filter: drop-shadow(4px 4px 0px var(--px-file-input-shadow-color));
126
144
  }
127
145
  .px-file-input__wrapper:hover::before {
128
146
  background: var(--px-file-input-hover-border-color);
@@ -154,6 +172,9 @@
154
172
  border-right: 2px solid var(--px-file-input-border-color);
155
173
  user-select: none;
156
174
 
175
+ /* Raised bevel at rest */
176
+ box-shadow: var(--px-file-input-trigger-inset-highlight), var(--px-file-input-trigger-inset-shadow);
177
+
157
178
  /* Notch top-left and bottom-left corners to match the pixel staircase border */
158
179
  clip-path: polygon(
159
180
  0 2px,
@@ -168,6 +189,10 @@
168
189
  }
169
190
  .px-file-input__trigger:hover {
170
191
  background: var(--px-file-input-trigger-hover-bg-color);
192
+ box-shadow: var(--px-file-input-trigger-hover-highlight), var(--px-file-input-trigger-hover-shadow);
193
+ }
194
+ .px-file-input__trigger:active {
195
+ box-shadow: var(--px-file-input-trigger-inset-shadow), var(--px-file-input-trigger-inset-highlight);
171
196
  }
172
197
  /* File name display */
173
198
  .px-file-input__name {
@@ -363,3 +388,10 @@
363
388
  .px-file-input--danger.is-ghost .px-file-input__wrapper:hover {
364
389
  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
365
390
  }
391
+ /* Dark mode bevel adjustment */
392
+ html.dark .px-file-input {
393
+ --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
394
+ --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.3);
395
+ --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
396
+ --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.05);
397
+ }