@pathscale/ui 2.7.2 → 2.7.3

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 (194) hide show
  1. package/dist/components/_shared/index.d.ts +1 -1
  2. package/dist/components/_shared/material.css +23 -6
  3. package/dist/components/_shared/overlayPosition.d.ts +2 -2
  4. package/dist/components/accordion/Accordion.css +3 -3
  5. package/dist/components/accordion/index.d.ts +1 -1
  6. package/dist/components/address/Address.css +24 -8
  7. package/dist/components/address/index.d.ts +3 -3
  8. package/dist/components/address/index.js +1 -1
  9. package/dist/components/alert/Alert.css +8 -2
  10. package/dist/components/alert/index.d.ts +2 -2
  11. package/dist/components/auth-card/index.d.ts +1 -1
  12. package/dist/components/auth-field-group/index.d.ts +1 -1
  13. package/dist/components/auth-footer-links/index.d.ts +1 -1
  14. package/dist/components/auth-message/index.d.ts +1 -1
  15. package/dist/components/auth-powered-by/index.d.ts +1 -1
  16. package/dist/components/auth-submit-button/index.d.ts +1 -1
  17. package/dist/components/avatar/Avatar.css +10 -6
  18. package/dist/components/avatar/index.d.ts +1 -1
  19. package/dist/components/badge/Badge.css +0 -1
  20. package/dist/components/badge/index.d.ts +2 -2
  21. package/dist/components/breadcrumb/index.d.ts +1 -1
  22. package/dist/components/button/Button.css +35 -7
  23. package/dist/components/button/index.d.ts +1 -1
  24. package/dist/components/button-group/ButtonGroup.css +2 -1
  25. package/dist/components/button-group/index.d.ts +1 -1
  26. package/dist/components/calendar/Calendar.css +18 -5
  27. package/dist/components/calendar/index.d.ts +1 -1
  28. package/dist/components/card/index.d.ts +4 -4
  29. package/dist/components/chatbubble/index.d.ts +1 -1
  30. package/dist/components/checkbox/Checkbox.css +26 -9
  31. package/dist/components/checkbox/index.d.ts +1 -1
  32. package/dist/components/checkbox-group/index.d.ts +1 -1
  33. package/dist/components/chip/Chip.css +61 -19
  34. package/dist/components/chip/index.d.ts +2 -2
  35. package/dist/components/close-button/CloseButton.css +5 -1
  36. package/dist/components/close-button/index.d.ts +1 -1
  37. package/dist/components/collapsible/index.d.ts +2 -2
  38. package/dist/components/color-field/ColorField.css +12 -4
  39. package/dist/components/color-field/index.d.ts +1 -1
  40. package/dist/components/color-picker/index.d.ts +2 -2
  41. package/dist/components/color-slider/ColorSlider.css +2 -1
  42. package/dist/components/color-slider/index.d.ts +1 -1
  43. package/dist/components/color-swatch/index.d.ts +1 -1
  44. package/dist/components/color-swatch-picker/index.d.ts +2 -3
  45. package/dist/components/color-wheel-flower/ColorWheelFlower.css +6 -2
  46. package/dist/components/color-wheel-flower/colorWheelFlowerContext.d.ts +1 -1
  47. package/dist/components/color-wheel-flower/index.d.ts +4 -4
  48. package/dist/components/combo-box/ComboBox.css +29 -10
  49. package/dist/components/combo-box/index.d.ts +1 -1
  50. package/dist/components/composer/Composer.css +65 -21
  51. package/dist/components/composer/index.d.ts +3 -3
  52. package/dist/components/composer/index.js +1 -1
  53. package/dist/components/data-grid/createDataGrid.d.ts +1 -1
  54. package/dist/components/data-grid/index.d.ts +1 -1
  55. package/dist/components/date-field/DateField.css +47 -13
  56. package/dist/components/date-field/index.d.ts +1 -1
  57. package/dist/components/date-picker/DatePicker.css +24 -6
  58. package/dist/components/date-picker/index.d.ts +1 -1
  59. package/dist/components/date-range-picker/DateRangePicker.css +28 -7
  60. package/dist/components/date-range-picker/index.d.ts +1 -1
  61. package/dist/components/dialog/Dialog.css +17 -4
  62. package/dist/components/dialog/index.d.ts +1 -1
  63. package/dist/components/dock/Dock.css +10 -2
  64. package/dist/components/dock/index.d.ts +1 -1
  65. package/dist/components/drawer/Drawer.a11y.d.ts +1 -1
  66. package/dist/components/drawer/Drawer.css +31 -7
  67. package/dist/components/drawer/index.d.ts +1 -1
  68. package/dist/components/dropdown/Dropdown.css +2 -1
  69. package/dist/components/dropdown/index.d.ts +2 -2
  70. package/dist/components/empty/index.d.ts +1 -1
  71. package/dist/components/fieldset/index.d.ts +1 -1
  72. package/dist/components/footer/index.d.ts +1 -1
  73. package/dist/components/form/index.d.ts +3 -3
  74. package/dist/components/form/index.js +1 -1
  75. package/dist/components/glow-card/GlowCard.css +5 -2
  76. package/dist/components/glow-card/index.d.ts +1 -1
  77. package/dist/components/header/Header.css +4 -1
  78. package/dist/components/header/index.d.ts +1 -1
  79. package/dist/components/icon/Icon.css +24 -8
  80. package/dist/components/icon/index.d.ts +1 -1
  81. package/dist/components/immersive-landing/ImmersiveLanding.css +27 -12
  82. package/dist/components/immersive-landing/components/CookieConsent.d.ts +1 -1
  83. package/dist/components/immersive-landing/components/FirefoxPWABanner.d.ts +1 -1
  84. package/dist/components/immersive-landing/components/PWAInstallPrompt.d.ts +1 -1
  85. package/dist/components/immersive-landing/index.d.ts +5 -5
  86. package/dist/components/immersive-landing/index.js +4 -4
  87. package/dist/components/immersive-landing/types.d.ts +1 -1
  88. package/dist/components/input/Input.css +14 -5
  89. package/dist/components/input/index.d.ts +1 -1
  90. package/dist/components/input-otp/InputOTP.css +10 -3
  91. package/dist/components/input-otp/index.d.ts +1 -1
  92. package/dist/components/kbd/index.d.ts +1 -1
  93. package/dist/components/label/Label.css +5 -2
  94. package/dist/components/label/index.d.ts +1 -1
  95. package/dist/components/language-switcher/LanguageSwitcher.css +4 -2
  96. package/dist/components/language-switcher/createI18n.d.ts +1 -1
  97. package/dist/components/language-switcher/index.d.ts +2 -2
  98. package/dist/components/language-switcher/index.js +1 -1
  99. package/dist/components/link/index.d.ts +1 -1
  100. package/dist/components/list-box/ListBox.css +8 -4
  101. package/dist/components/list-box/index.d.ts +5 -5
  102. package/dist/components/live-chat/LiveChat.css +15 -6
  103. package/dist/components/live-chat/index.d.ts +3 -3
  104. package/dist/components/menu/Menu.css +28 -10
  105. package/dist/components/menu/index.d.ts +2 -2
  106. package/dist/components/metal-border/engine/color.js +1 -1
  107. package/dist/components/metal-border/engine/glow/geometry.d.ts +5 -5
  108. package/dist/components/metal-border/engine/glow/geometry.js +10 -10
  109. package/dist/components/metal-border/engine/glow/glow.d.ts +18 -6
  110. package/dist/components/metal-border/engine/glow/glow.js +37 -37
  111. package/dist/components/metal-border/engine/index.d.ts +3 -3
  112. package/dist/components/metal-border/engine/index.js +1 -1
  113. package/dist/components/metal-border/engine/presets.d.ts +3 -3
  114. package/dist/components/metal-border/engine/presets.js +45 -45
  115. package/dist/components/metal-border/engine/renderer/core.d.ts +1 -1
  116. package/dist/components/metal-border/engine/shaders.js +4 -4
  117. package/dist/components/metal-border/index.d.ts +1 -1
  118. package/dist/components/meter/Meter.css +0 -5
  119. package/dist/components/meter/index.d.ts +1 -1
  120. package/dist/components/navbar/Navbar.css +2 -1
  121. package/dist/components/navbar/index.d.ts +2 -2
  122. package/dist/components/noise-background/index.d.ts +1 -1
  123. package/dist/components/pagination/Pagination.css +0 -1
  124. package/dist/components/password-field/index.d.ts +2 -2
  125. package/dist/components/password-requirements/index.d.ts +1 -1
  126. package/dist/components/popover/Popover.css +5 -1
  127. package/dist/components/popover/index.d.ts +2 -2
  128. package/dist/components/progress/Progress.css +2 -6
  129. package/dist/components/progress/index.d.ts +1 -1
  130. package/dist/components/radial-progress/RadialProgress.css +0 -5
  131. package/dist/components/radial-progress/index.d.ts +1 -1
  132. package/dist/components/radio/Radio.css +23 -8
  133. package/dist/components/radio-group/RadioGroup.css +11 -3
  134. package/dist/components/radio-group/index.d.ts +1 -1
  135. package/dist/components/range-calendar/RangeCalendar.css +8 -5
  136. package/dist/components/scroll-area/ScrollArea.css +8 -26
  137. package/dist/components/scroll-area/index.d.ts +1 -1
  138. package/dist/components/select/Select.css +14 -4
  139. package/dist/components/select/index.d.ts +1 -1
  140. package/dist/components/separator/index.d.ts +1 -1
  141. package/dist/components/size-picker/index.d.ts +2 -2
  142. package/dist/components/skeleton/Skeleton.css +86 -26
  143. package/dist/components/skeleton/index.d.ts +2 -2
  144. package/dist/components/slider/index.d.ts +1 -1
  145. package/dist/components/spinner/index.d.ts +1 -1
  146. package/dist/components/status/index.d.ts +2 -3
  147. package/dist/components/switch/Switch.css +62 -18
  148. package/dist/components/switch/index.d.ts +1 -1
  149. package/dist/components/table/Table.context.d.ts +1 -1
  150. package/dist/components/table/Table.css +27 -9
  151. package/dist/components/tabs/Tabs.css +7 -2
  152. package/dist/components/tabs/index.d.ts +1 -1
  153. package/dist/components/text/index.d.ts +1 -1
  154. package/dist/components/textarea/Textarea.css +39 -10
  155. package/dist/components/textarea/index.d.ts +1 -1
  156. package/dist/components/theme-color-picker/index.d.ts +2 -2
  157. package/dist/components/theme-color-picker/index.js +1 -1
  158. package/dist/components/time-field/TimeField.css +47 -13
  159. package/dist/components/time-field/index.d.ts +1 -1
  160. package/dist/components/toast/Toast.css +2 -1
  161. package/dist/components/toast/index.d.ts +1 -1
  162. package/dist/components/toolbar/Toolbar.css +5 -2
  163. package/dist/components/toolbar/index.d.ts +1 -1
  164. package/dist/components/tooltip/Tooltip.css +6 -3
  165. package/dist/components/tooltip/index.d.ts +1 -1
  166. package/dist/components/video-preview/index.d.ts +1 -1
  167. package/dist/hooks/date/index.d.ts +2 -2
  168. package/dist/hooks/date/index.js +2 -2
  169. package/dist/hooks/form/getFirstFieldError.js +0 -1
  170. package/dist/hooks/form/index.d.ts +3 -3
  171. package/dist/hooks/form/index.js +1 -1
  172. package/dist/hooks/table/index.d.ts +1 -1
  173. package/dist/hooks/table/useAnchoredOverlayPosition.d.ts +1 -1
  174. package/dist/index.d.ts +94 -100
  175. package/dist/index.js +32 -32
  176. package/dist/lab.d.ts +34 -35
  177. package/dist/lab.js +10 -10
  178. package/dist/layouts.manifest.json +1 -1
  179. package/dist/lib/layouts/index.d.ts +1 -1
  180. package/dist/lib/style/index.d.ts +1 -1
  181. package/dist/motion/easing.js +2 -2
  182. package/dist/motion/index.d.ts +7 -9
  183. package/dist/motion/index.js +5 -5
  184. package/dist/motion/route.js +1 -1
  185. package/dist/motion/solid/AnimatedCollapse.d.ts +2 -2
  186. package/dist/motion/solid/MotionDiv.d.ts +1 -1
  187. package/dist/motion/solid/index.d.ts +4 -4
  188. package/dist/motion/solid/index.js +1 -1
  189. package/dist/motion/system.js +1 -1
  190. package/dist/motion/tokens.d.ts +1 -1
  191. package/dist/primitives/streaming/index.d.ts +2 -2
  192. package/dist/styles/themes/dark.css +12 -4
  193. package/dist/styles/themes/light.css +12 -4
  194. package/package.json +1 -1
@@ -14,9 +14,7 @@
14
14
 
15
15
  .scroll-area--fade.scroll-area--vertical[data-top-scroll="true"] {
16
16
  --scroll-linear-gradient:
17
- 0deg,
18
- #000 calc(100% - var(--scroll-area-size)),
19
- transparent;
17
+ 0deg, #000 calc(100% - var(--scroll-area-size)), transparent;
20
18
 
21
19
  mask-image: linear-gradient(var(--scroll-linear-gradient));
22
20
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -24,9 +22,7 @@
24
22
 
25
23
  .scroll-area--fade.scroll-area--vertical[data-bottom-scroll="true"] {
26
24
  --scroll-linear-gradient:
27
- 180deg,
28
- #000 calc(100% - var(--scroll-area-size)),
29
- transparent;
25
+ 180deg, #000 calc(100% - var(--scroll-area-size)), transparent;
30
26
 
31
27
  mask-image: linear-gradient(var(--scroll-linear-gradient));
32
28
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -34,12 +30,8 @@
34
30
 
35
31
  .scroll-area--fade.scroll-area--vertical[data-top-bottom-scroll="true"] {
36
32
  --scroll-linear-gradient:
37
- #000,
38
- #000,
39
- transparent 0,
40
- #000 var(--scroll-area-size),
41
- #000 calc(100% - var(--scroll-area-size)),
42
- transparent;
33
+ #000, #000, transparent 0, #000 var(--scroll-area-size),
34
+ #000 calc(100% - var(--scroll-area-size)), transparent;
43
35
 
44
36
  mask-image: linear-gradient(var(--scroll-linear-gradient));
45
37
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -47,9 +39,7 @@
47
39
 
48
40
  .scroll-area--fade.scroll-area--horizontal[data-left-scroll="true"] {
49
41
  --scroll-linear-gradient:
50
- 270deg,
51
- #000 calc(100% - var(--scroll-area-size)),
52
- transparent;
42
+ 270deg, #000 calc(100% - var(--scroll-area-size)), transparent;
53
43
 
54
44
  mask-image: linear-gradient(var(--scroll-linear-gradient));
55
45
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -57,9 +47,7 @@
57
47
 
58
48
  .scroll-area--fade.scroll-area--horizontal[data-right-scroll="true"] {
59
49
  --scroll-linear-gradient:
60
- 90deg,
61
- #000 calc(100% - var(--scroll-area-size)),
62
- transparent;
50
+ 90deg, #000 calc(100% - var(--scroll-area-size)), transparent;
63
51
 
64
52
  mask-image: linear-gradient(var(--scroll-linear-gradient));
65
53
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -67,13 +55,8 @@
67
55
 
68
56
  .scroll-area--fade.scroll-area--horizontal[data-left-right-scroll="true"] {
69
57
  --scroll-linear-gradient:
70
- to right,
71
- #000,
72
- #000,
73
- transparent 0,
74
- #000 var(--scroll-area-size),
75
- #000 calc(100% - var(--scroll-area-size)),
76
- transparent;
58
+ to right, #000, #000, transparent 0, #000 var(--scroll-area-size),
59
+ #000 calc(100% - var(--scroll-area-size)), transparent;
77
60
 
78
61
  mask-image: linear-gradient(var(--scroll-linear-gradient));
79
62
  -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
@@ -90,4 +73,3 @@
90
73
  height: 0;
91
74
  }
92
75
  }
93
-
@@ -1,2 +1,2 @@
1
+ export type { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaVariant, ScrollAreaVisibility, } from "./ScrollArea.generated";
1
2
  export { default } from "./ScrollArea.generated";
2
- export type { ScrollAreaProps, ScrollAreaVisibility, ScrollAreaOrientation, ScrollAreaVariant, } from "./ScrollArea.generated";
@@ -20,7 +20,8 @@
20
20
  justify-content: space-between;
21
21
  gap: 0.5rem;
22
22
  border-radius: 1rem;
23
- border: var(--border, 1px) solid var(--color-field-border, var(--color-base-300));
23
+ border: var(--border, 1px) solid
24
+ var(--color-field-border, var(--color-base-300));
24
25
  background-color: var(--color-field, var(--color-base-100));
25
26
  padding: 0.5rem 0.75rem;
26
27
  text-align: left;
@@ -48,7 +49,11 @@
48
49
  @media (hover: hover) {
49
50
  .ui-select__trigger:hover:not(:disabled) {
50
51
  background-color: var(--color-base-200);
51
- border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
52
+ border-color: color-mix(
53
+ in oklch,
54
+ var(--color-base-content) 10%,
55
+ transparent
56
+ );
52
57
  }
53
58
  }
54
59
 
@@ -57,7 +62,11 @@
57
62
  outline: var(--focus-ring-width, 2px) solid var(--color-accent);
58
63
  outline-offset: var(--focus-ring-offset, 2px);
59
64
  border-color: var(--color-accent);
60
- background-color: color-mix(in oklch, var(--color-accent) 8%, var(--color-base-100));
65
+ background-color: color-mix(
66
+ in oklch,
67
+ var(--color-accent) 8%,
68
+ var(--color-base-100)
69
+ );
61
70
  }
62
71
 
63
72
  .ui-select__trigger:active:not(:disabled) {
@@ -140,7 +149,8 @@
140
149
  overflow-y: auto;
141
150
  overscroll-behavior: contain;
142
151
  border-radius: 1.5rem;
143
- border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
152
+ border: var(--border, 1px) solid
153
+ color-mix(in oklch, var(--color-base-content) 8%, transparent);
144
154
  background-color: var(--color-base-100);
145
155
  box-shadow:
146
156
  0 20px 32px rgb(var(--shadow-color, 0 0 0) / 16%),
@@ -1,2 +1,2 @@
1
+ export type { SelectIndicatorProps, SelectListboxProps, SelectOptionProps, SelectPlacement, SelectPopoverProps, SelectProps, SelectRootProps, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectValueType, SelectVariant, } from "./Select.generated";
1
2
  export { default } from "./Select.generated";
2
- export type { SelectProps, SelectRootProps, SelectPlacement, SelectValueType, SelectVariant, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, SelectListboxProps, SelectOptionProps, } from "./Select.generated";
@@ -1 +1 @@
1
- export { default, Separator, type SeparatorProps, type SeparatorOrientation, type SeparatorVariant, } from "./Separator.generated";
1
+ export { default, Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorVariant, } from "./Separator.generated";
@@ -1,3 +1,3 @@
1
- export { default as SizePicker } from "./SizePicker.generated";
2
1
  export type { SizePickerProps } from "./SizePicker.generated";
3
- export { createSizeStore, getDefaultSizeStore, type SizeStore, type SizePreset, } from "./sizeStore";
2
+ export { default as SizePicker } from "./SizePicker.generated";
3
+ export { createSizeStore, getDefaultSizeStore, type SizePreset, type SizeStore, } from "./sizeStore";
@@ -7,7 +7,11 @@
7
7
  position: relative;
8
8
  overflow: hidden;
9
9
  border-radius: var(--radius-field, 0.25rem);
10
- background-color: color-mix(in oklab, var(--color-base-300) 70%, transparent);
10
+ background-color: color-mix(
11
+ in oklab,
12
+ var(--color-base-300) 70%,
13
+ transparent
14
+ );
11
15
  }
12
16
 
13
17
  /* -------------------------------------------------------------------------------------------------
@@ -67,7 +71,8 @@
67
71
  }
68
72
 
69
73
  @keyframes skeleton-pulse {
70
- 0%, 100% {
74
+ 0%,
75
+ 100% {
71
76
  opacity: 1;
72
77
  }
73
78
  50% {
@@ -112,33 +117,84 @@
112
117
  width: 100%;
113
118
  }
114
119
 
115
- .skeleton--xs { height: 0.5rem; }
116
- .skeleton--sm { height: 0.75rem; }
117
- .skeleton--md { height: 1rem; }
118
- .skeleton--lg { height: 1.5rem; }
119
- .skeleton--xl { height: 2rem; }
120
+ .skeleton--xs {
121
+ height: 0.5rem;
122
+ }
123
+ .skeleton--sm {
124
+ height: 0.75rem;
125
+ }
126
+ .skeleton--md {
127
+ height: 1rem;
128
+ }
129
+ .skeleton--lg {
130
+ height: 1.5rem;
131
+ }
132
+ .skeleton--xl {
133
+ height: 2rem;
134
+ }
120
135
 
121
- .skeleton--circle.skeleton--xs { width: 1.5rem; height: 1.5rem; }
122
- .skeleton--circle.skeleton--sm { width: 2rem; height: 2rem; }
123
- .skeleton--circle.skeleton--md { width: 2.5rem; height: 2.5rem; }
124
- .skeleton--circle.skeleton--lg { width: 3rem; height: 3rem; }
125
- .skeleton--circle.skeleton--xl { width: 4rem; height: 4rem; }
136
+ .skeleton--circle.skeleton--xs {
137
+ width: 1.5rem;
138
+ height: 1.5rem;
139
+ }
140
+ .skeleton--circle.skeleton--sm {
141
+ width: 2rem;
142
+ height: 2rem;
143
+ }
144
+ .skeleton--circle.skeleton--md {
145
+ width: 2.5rem;
146
+ height: 2.5rem;
147
+ }
148
+ .skeleton--circle.skeleton--lg {
149
+ width: 3rem;
150
+ height: 3rem;
151
+ }
152
+ .skeleton--circle.skeleton--xl {
153
+ width: 4rem;
154
+ height: 4rem;
155
+ }
126
156
 
127
- .skeleton--rect.skeleton--xs { height: 4rem; }
128
- .skeleton--rect.skeleton--sm { height: 6rem; }
129
- .skeleton--rect.skeleton--md { height: 8rem; }
130
- .skeleton--rect.skeleton--lg { height: 12rem; }
131
- .skeleton--rect.skeleton--xl { height: 16rem; }
157
+ .skeleton--rect.skeleton--xs {
158
+ height: 4rem;
159
+ }
160
+ .skeleton--rect.skeleton--sm {
161
+ height: 6rem;
162
+ }
163
+ .skeleton--rect.skeleton--md {
164
+ height: 8rem;
165
+ }
166
+ .skeleton--rect.skeleton--lg {
167
+ height: 12rem;
168
+ }
169
+ .skeleton--rect.skeleton--xl {
170
+ height: 16rem;
171
+ }
132
172
 
133
- .skeleton--width-full { width: 100%; }
134
- .skeleton--width-fit { width: fit-content; }
135
- .skeleton--width-screen { width: 100vw; }
173
+ .skeleton--width-full {
174
+ width: 100%;
175
+ }
176
+ .skeleton--width-fit {
177
+ width: fit-content;
178
+ }
179
+ .skeleton--width-screen {
180
+ width: 100vw;
181
+ }
136
182
 
137
- .skeleton--radius-none { border-radius: 0; }
138
- .skeleton--radius-sm { border-radius: 0.25rem; }
139
- .skeleton--radius-md { border-radius: 0.5rem; }
140
- .skeleton--radius-lg { border-radius: 0.75rem; }
141
- .skeleton--radius-full { border-radius: var(--radius-pill, 9999px); }
183
+ .skeleton--radius-none {
184
+ border-radius: 0;
185
+ }
186
+ .skeleton--radius-sm {
187
+ border-radius: 0.25rem;
188
+ }
189
+ .skeleton--radius-md {
190
+ border-radius: 0.5rem;
191
+ }
192
+ .skeleton--radius-lg {
193
+ border-radius: 0.75rem;
194
+ }
195
+ .skeleton--radius-full {
196
+ border-radius: var(--radius-pill, 9999px);
197
+ }
142
198
 
143
199
  /* -----------------------------------------------------------------------
144
200
  * Multi-line text placeholder
@@ -156,7 +212,11 @@
156
212
  height: 1rem;
157
213
  width: 100%;
158
214
  border-radius: inherit;
159
- background-color: color-mix(in oklab, var(--color-base-300) 70%, transparent);
215
+ background-color: color-mix(
216
+ in oklab,
217
+ var(--color-base-300) 70%,
218
+ transparent
219
+ );
160
220
  }
161
221
 
162
222
  /* A short last line is what makes a stack read as a paragraph. */
@@ -1,3 +1,3 @@
1
- export { SkeletonLayout as default, SkeletonLayout as Skeleton } from "./Skeleton.generated";
2
- export type { SkeletonProps, SkeletonShape, SkeletonAnimation } from "./Skeleton.generated";
1
+ export type { SkeletonAnimation, SkeletonProps, SkeletonShape, } from "./Skeleton.generated";
2
+ export { SkeletonLayout as default, SkeletonLayout as Skeleton, } from "./Skeleton.generated";
3
3
  export { skeleton } from "./Skeleton.recipe";
@@ -1,2 +1,2 @@
1
- export { default } from "./Slider.generated";
2
1
  export type { SliderProps, SliderSize } from "./Slider.generated";
2
+ export { default } from "./Slider.generated";
@@ -1,3 +1,3 @@
1
- export { SpinnerLayout as default, SpinnerLayout as Spinner } from "./Spinner.generated";
2
1
  export type { SpinnerProps, SpinnerShape } from "./Spinner.generated";
2
+ export { SpinnerLayout as default, SpinnerLayout as Spinner, } from "./Spinner.generated";
3
3
  export { spinner } from "./Spinner.recipe";
@@ -1,3 +1,2 @@
1
- export { summarizeStatus, diffStatus } from "./status";
2
- export type { Health, Quality, StatusItem, StatusSummary, StatusTransition } from "./status";
3
- export { FLAPPING_THRESHOLD } from "./status";
1
+ export type { Health, Quality, StatusItem, StatusSummary, StatusTransition, } from "./status";
2
+ export { diffStatus, FLAPPING_THRESHOLD, summarizeStatus } from "./status";
@@ -11,11 +11,23 @@
11
11
  -webkit-tap-highlight-color: transparent;
12
12
 
13
13
  --switch-control-bg: var(--color-default);
14
- --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
14
+ --switch-control-bg-hover: color-mix(
15
+ in oklab,
16
+ var(--switch-control-bg),
17
+ transparent 20%
18
+ );
15
19
  --switch-control-bg-pressed: var(--switch-control-bg-hover);
16
20
  --switch-control-bg-checked: var(--color-accent);
17
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
18
- --switch-control-border: color-mix(in oklab, var(--color-base-content) 24%, transparent);
21
+ --switch-control-bg-checked-hover: color-mix(
22
+ in oklab,
23
+ var(--switch-control-bg-checked),
24
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
25
+ );
26
+ --switch-control-border: color-mix(
27
+ in oklab,
28
+ var(--color-base-content) 24%,
29
+ transparent
30
+ );
19
31
  --switch-control-border-checked: color-mix(
20
32
  in oklab,
21
33
  var(--switch-control-bg-checked) 74%,
@@ -106,7 +118,8 @@
106
118
  .switch:focus-within .switch__control,
107
119
  .switch__input:focus-visible + .switch__control,
108
120
  .switch[data-focus-visible="true"] .switch__control {
109
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-control-bg-checked) 22%, transparent);
121
+ box-shadow: 0 0 0 3px
122
+ color-mix(in oklab, var(--switch-control-bg-checked) 22%, transparent);
110
123
  }
111
124
 
112
125
  /* ── Hover state ── */
@@ -196,19 +209,14 @@
196
209
 
197
210
  /* ── Color: default ── */
198
211
 
199
-
200
212
  /* ── Color: accent (default) ── */
201
213
 
202
-
203
214
  /* ── Color: success ── */
204
215
 
205
-
206
216
  /* ── Color: warning ── */
207
217
 
208
-
209
218
  /* ── Color: danger ── */
210
219
 
211
-
212
220
  /* ── Disabled state ── */
213
221
 
214
222
  .switch--disabled,
@@ -219,7 +227,11 @@
219
227
 
220
228
  .switch--disabled .switch__thumb,
221
229
  .switch[data-disabled="true"] .switch__thumb {
222
- background-color: color-mix(in oklab, var(--color-default-foreground) 20%, transparent);
230
+ background-color: color-mix(
231
+ in oklab,
232
+ var(--color-default-foreground) 20%,
233
+ transparent
234
+ );
223
235
  }
224
236
 
225
237
  .switch--disabled[data-selected="true"] .switch__thumb,
@@ -229,41 +241,73 @@
229
241
 
230
242
  .switch--flavor-neutral {
231
243
  --switch-control-bg-checked: var(--color-default-foreground);
232
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
244
+ --switch-control-bg-checked-hover: color-mix(
245
+ in oklab,
246
+ var(--switch-control-bg-checked),
247
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
248
+ );
233
249
  }
234
250
 
235
251
  .switch--flavor-primary {
236
252
  --switch-control-bg-checked: var(--color-primary);
237
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
253
+ --switch-control-bg-checked-hover: color-mix(
254
+ in oklab,
255
+ var(--switch-control-bg-checked),
256
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
257
+ );
238
258
  }
239
259
 
240
260
  .switch--flavor-secondary {
241
261
  --switch-control-bg-checked: var(--color-secondary);
242
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
262
+ --switch-control-bg-checked-hover: color-mix(
263
+ in oklab,
264
+ var(--switch-control-bg-checked),
265
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
266
+ );
243
267
  }
244
268
 
245
269
  .switch--flavor-accent {
246
270
  --switch-control-bg-checked: var(--color-accent);
247
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
271
+ --switch-control-bg-checked-hover: color-mix(
272
+ in oklab,
273
+ var(--switch-control-bg-checked),
274
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
275
+ );
248
276
  }
249
277
 
250
278
  .switch--flavor-destructive {
251
279
  --switch-control-bg-checked: var(--color-danger);
252
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
280
+ --switch-control-bg-checked-hover: color-mix(
281
+ in oklab,
282
+ var(--switch-control-bg-checked),
283
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
284
+ );
253
285
  }
254
286
 
255
287
  .switch--flavor-success {
256
288
  --switch-control-bg-checked: var(--color-success);
257
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
289
+ --switch-control-bg-checked-hover: color-mix(
290
+ in oklab,
291
+ var(--switch-control-bg-checked),
292
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
293
+ );
258
294
  }
259
295
 
260
296
  .switch--flavor-warning {
261
297
  --switch-control-bg-checked: var(--color-warning);
262
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
298
+ --switch-control-bg-checked-hover: color-mix(
299
+ in oklab,
300
+ var(--switch-control-bg-checked),
301
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
302
+ );
263
303
  }
264
304
 
265
305
  .switch--flavor-info {
266
306
  --switch-control-bg-checked: var(--color-info);
267
- --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
307
+ --switch-control-bg-checked-hover: color-mix(
308
+ in oklab,
309
+ var(--switch-control-bg-checked),
310
+ var(--shade, var(--color-base-content)) var(--shade-hover, 8%)
311
+ );
268
312
  }
269
313
  }
@@ -1 +1 @@
1
- export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Switch.generated";
1
+ export { default, type ToggleColor, type ToggleProps, type ToggleSize, } from "./Switch.generated";
@@ -1,5 +1,5 @@
1
- import { type Accessor } from "solid-js";
2
1
  import type { JSX } from "@solidjs/web";
2
+ import { type Accessor } from "solid-js";
3
3
  export type TableVariant = "primary" | "secondary";
4
4
  export type TableSortDirection = "ascending" | "descending";
5
5
  export type TableSortDescriptor = {
@@ -52,11 +52,13 @@
52
52
  scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
53
53
  }
54
54
 
55
- :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb {
55
+ :is([data-theme="dark"], .dark)
56
+ .table__scroll-container::-webkit-scrollbar-thumb {
56
57
  background: oklch(100% 0 0 / 0.15);
57
58
  }
58
59
 
59
- :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover {
60
+ :is([data-theme="dark"], .dark)
61
+ .table__scroll-container::-webkit-scrollbar-thumb:hover {
60
62
  background: oklch(100% 0 0 / 0.25);
61
63
  }
62
64
 
@@ -88,7 +90,8 @@
88
90
 
89
91
  @supports (color: color-mix(in lab, red, red)) {
90
92
  .table__header {
91
- border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
93
+ border-bottom: var(--border, 1px) solid
94
+ color-mix(in oklch, var(--color-base-content) 8%, transparent);
92
95
  }
93
96
  }
94
97
 
@@ -124,7 +127,8 @@
124
127
 
125
128
  @supports (color: color-mix(in lab, red, red)) {
126
129
  .table-root--secondary .table__row .table__cell {
127
- border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
130
+ border-bottom: var(--border, 1px) solid
131
+ color-mix(in oklch, var(--color-base-content) 5%, transparent);
128
132
  }
129
133
  }
130
134
 
@@ -183,7 +187,11 @@
183
187
 
184
188
  @supports (color: color-mix(in lab, red, red)) {
185
189
  .table__column::after {
186
- background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
190
+ background-color: color-mix(
191
+ in oklch,
192
+ var(--color-base-content) 10%,
193
+ transparent
194
+ );
187
195
  }
188
196
  }
189
197
 
@@ -279,7 +287,8 @@
279
287
 
280
288
  @supports (color: color-mix(in lab, red, red)) {
281
289
  .table__cell {
282
- border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
290
+ border-bottom: var(--border, 1px) solid
291
+ color-mix(in oklch, var(--color-base-content) 5%, transparent);
283
292
  }
284
293
  }
285
294
 
@@ -294,7 +303,11 @@
294
303
  }
295
304
 
296
305
  .table__expanded-row .table__expanded-cell {
297
- background-color: color-mix(in oklch, var(--color-base-200) 75%, var(--color-base-100));
306
+ background-color: color-mix(
307
+ in oklch,
308
+ var(--color-base-200) 75%,
309
+ var(--color-base-100)
310
+ );
298
311
  }
299
312
 
300
313
  .table__expanded-cell {
@@ -328,7 +341,8 @@
328
341
  .table__page-size-select {
329
342
  min-width: 4.5rem;
330
343
  border-radius: 0.75rem;
331
- border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
344
+ border: var(--border, 1px) solid
345
+ color-mix(in oklch, var(--color-base-content) 10%, transparent);
332
346
  background-color: var(--color-base-100);
333
347
  padding-inline: 0.75rem;
334
348
  padding-block: 0.5rem;
@@ -375,7 +389,11 @@
375
389
 
376
390
  @supports (color: color-mix(in lab, red, red)) {
377
391
  .table__column-resizer {
378
- background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
392
+ background-color: color-mix(
393
+ in oklch,
394
+ var(--color-base-content) 10%,
395
+ transparent
396
+ );
379
397
  }
380
398
  }
381
399
 
@@ -143,7 +143,11 @@
143
143
  border-radius: var(--radius-box);
144
144
  width: var(--tabs-indicator-width, 0px);
145
145
  height: var(--tabs-indicator-height, 0px);
146
- transform: translate3d(var(--tabs-indicator-x, 0px), var(--tabs-indicator-y, 0px), 0);
146
+ transform: translate3d(
147
+ var(--tabs-indicator-x, 0px),
148
+ var(--tabs-indicator-y, 0px),
149
+ 0
150
+ );
147
151
  opacity: 0;
148
152
  pointer-events: none;
149
153
  background-color: var(--color-base-100);
@@ -175,7 +179,8 @@
175
179
  scrollbar-width: none;
176
180
  }
177
181
 
178
- .tabs--secondary .tabs__list[data-orientation="horizontal"]::-webkit-scrollbar {
182
+ .tabs--secondary
183
+ .tabs__list[data-orientation="horizontal"]::-webkit-scrollbar {
179
184
  display: none;
180
185
  }
181
186
 
@@ -1,2 +1,2 @@
1
+ export type { TabIndicatorProps, TabListContainerProps, TabListProps, TabPanelProps, TabProps, TabSeparatorProps, TabsRootProps, } from "./Tabs.generated";
1
2
  export { default, Tabs } from "./Tabs.generated";
2
- export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, } from "./Tabs.generated";
@@ -1 +1 @@
1
- export { default, Text, TextRoot, type TextProps, type TextRootProps, type TextSize, type TextVariant, type TextWeight, type TextTransform, type TextTracking, type TextLeading, type TextFamily, } from "./Text.generated";
1
+ export { default, Text, type TextFamily, type TextLeading, type TextProps, TextRoot, type TextRootProps, type TextSize, type TextTracking, type TextTransform, type TextVariant, type TextWeight, } from "./Text.generated";