@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.16

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 (204) hide show
  1. package/README.md +0 -3
  2. package/dist/components/compute/AppLayout.svelte +5 -3
  3. package/dist/components/compute/CollapsedPanelStrip.svelte +1 -1
  4. package/dist/components/compute/ParameterPresetManager.svelte +1 -1
  5. package/dist/components/compute/SolveMessages.svelte +2 -2
  6. package/dist/components/layout/FooterItemRenderer.svelte +1 -1
  7. package/dist/components/layout/PageFooter.svelte +2 -2
  8. package/dist/components/layout/PageHeader.svelte +1 -1
  9. package/dist/components/layout/SideNav.svelte +3 -3
  10. package/dist/components/layout/SubNav.svelte +2 -2
  11. package/dist/components/preview/ChartOutput.svelte +3 -3
  12. package/dist/components/preview/Group.svelte +7 -7
  13. package/dist/components/preview/ImageOutput.svelte +6 -6
  14. package/dist/components/preview/InputControl.svelte +1 -0
  15. package/dist/components/preview/OutputDisplay.svelte +8 -6
  16. package/dist/components/preview/TabBar.svelte +6 -4
  17. package/dist/components/preview/TabBar.svelte.d.ts +2 -0
  18. package/dist/components/preview/TabContent.svelte +1 -1
  19. package/dist/components/preview/TabLayout.svelte +3 -4
  20. package/dist/components/preview/inputs/ChecklistInput.svelte +3 -3
  21. package/dist/components/preview/inputs/ColorInput.svelte +356 -14
  22. package/dist/components/preview/inputs/ColorInput.svelte.d.ts +1 -0
  23. package/dist/components/preview/inputs/FileInput.svelte +3 -3
  24. package/dist/components/preview/inputs/SegmentedInput.svelte +2 -1
  25. package/dist/components/preview/inputs/TileInput.svelte +1 -1
  26. package/dist/components/primitives/CalculateButton.svelte +2 -2
  27. package/dist/components/primitives/Callout.svelte +7 -5
  28. package/dist/components/primitives/Callout.svelte.d.ts +4 -4
  29. package/dist/components/primitives/DataTable.svelte +1 -1
  30. package/dist/components/primitives/ImageUploadField.svelte +1 -1
  31. package/dist/components/primitives/alert-dialog/alert-dialog-content.svelte +1 -1
  32. package/dist/components/primitives/badge/badge.svelte +2 -2
  33. package/dist/components/primitives/badge/badge.svelte.d.ts +6 -6
  34. package/dist/components/primitives/button/button.svelte +6 -7
  35. package/dist/components/primitives/button/button.svelte.d.ts +18 -18
  36. package/dist/components/primitives/card/card.svelte +1 -1
  37. package/dist/components/primitives/card/card.svelte.d.ts +1 -1
  38. package/dist/components/primitives/checkbox/checkbox.svelte +1 -1
  39. package/dist/components/primitives/command/command-input.svelte +1 -1
  40. package/dist/components/primitives/command/command-item.svelte +1 -1
  41. package/dist/components/primitives/command/command-link-item.svelte +1 -1
  42. package/dist/components/primitives/command/command.svelte +1 -1
  43. package/dist/components/primitives/context-menu/context-menu-checkbox-item.svelte +1 -1
  44. package/dist/components/primitives/context-menu/context-menu-content.svelte +1 -1
  45. package/dist/components/primitives/context-menu/context-menu-item.svelte +1 -1
  46. package/dist/components/primitives/context-menu/context-menu-radio-item.svelte +1 -1
  47. package/dist/components/primitives/context-menu/context-menu-sub-content.svelte +1 -1
  48. package/dist/components/primitives/context-menu/context-menu-sub-trigger.svelte +1 -1
  49. package/dist/components/primitives/dialog/dialog-content.svelte +2 -2
  50. package/dist/components/primitives/drawer/Drawer.svelte +1 -1
  51. package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-item.svelte +31 -11
  52. package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts +2 -0
  53. package/dist/components/primitives/dropdown-menu/dropdown-menu-content.svelte +5 -1
  54. package/dist/components/primitives/dropdown-menu/dropdown-menu-content.svelte.d.ts +2 -0
  55. package/dist/components/primitives/dropdown-menu/dropdown-menu-item.svelte +4 -2
  56. package/dist/components/primitives/dropdown-menu/dropdown-menu-item.svelte.d.ts +2 -1
  57. package/dist/components/primitives/dropdown-menu/dropdown-menu-radio-item.svelte +1 -1
  58. package/dist/components/primitives/dropdown-menu/dropdown-menu-shortcut.svelte +1 -1
  59. package/dist/components/primitives/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  60. package/dist/components/primitives/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
  61. package/dist/components/primitives/index.d.ts +1 -1
  62. package/dist/components/primitives/index.js +1 -1
  63. package/dist/components/primitives/input/input.svelte +2 -2
  64. package/dist/components/primitives/input-group/input-group.svelte +1 -1
  65. package/dist/components/primitives/popover/popover-content.svelte +1 -1
  66. package/dist/components/primitives/resizable/resizable-handle.svelte +2 -2
  67. package/dist/components/primitives/search/search.svelte +1 -1
  68. package/dist/components/primitives/select/select-content.svelte +1 -1
  69. package/dist/components/primitives/select/select-item.svelte +1 -1
  70. package/dist/components/primitives/select/select-trigger.svelte +1 -1
  71. package/dist/components/primitives/slider/slider.svelte +1 -1
  72. package/dist/components/primitives/switch/switch.svelte +1 -1
  73. package/dist/components/primitives/tabs/tabs-list.svelte +1 -1
  74. package/dist/components/primitives/tabs/tabs-list.svelte.d.ts +3 -3
  75. package/dist/components/primitives/tabs/tabs-trigger.svelte +1 -1
  76. package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts +3 -3
  77. package/dist/components/primitives/textarea/textarea.svelte +1 -1
  78. package/dist/components/primitives/toggle/toggle.svelte +6 -3
  79. package/dist/components/primitives/toggle/toggle.svelte.d.ts +10 -7
  80. package/dist/components/primitives/toggle-group/toggle-group-item.svelte +1 -1
  81. package/dist/components/primitives/toggle-group/toggle-group.svelte +1 -1
  82. package/dist/components/primitives/tooltip/index.d.ts +6 -0
  83. package/dist/components/primitives/tooltip/index.js +8 -0
  84. package/dist/components/primitives/tooltip/tooltip-content.svelte +34 -0
  85. package/dist/components/primitives/tooltip/tooltip-content.svelte.d.ts +10 -0
  86. package/dist/components/primitives/tooltip/tooltip-portal.svelte +7 -0
  87. package/dist/components/primitives/tooltip/tooltip-portal.svelte.d.ts +4 -0
  88. package/dist/components/primitives/tooltip/tooltip-provider.svelte +7 -0
  89. package/dist/components/primitives/tooltip/tooltip-provider.svelte.d.ts +4 -0
  90. package/dist/components/primitives/tooltip/tooltip-trigger.svelte +7 -0
  91. package/dist/components/primitives/tooltip/tooltip-trigger.svelte.d.ts +4 -0
  92. package/dist/components/primitives/tooltip/tooltip.svelte +7 -0
  93. package/dist/components/primitives/tooltip/tooltip.svelte.d.ts +4 -0
  94. package/dist/components/viewer/MeshMetadataPanel.svelte +1 -1
  95. package/dist/components/viewer/SceneManager.svelte +19 -19
  96. package/dist/components/viewer/Viewer.svelte +68 -157
  97. package/dist/components/viewer/ViewerDock.svelte +404 -0
  98. package/dist/components/viewer/ViewerDock.svelte.d.ts +42 -0
  99. package/dist/i18n/messages.d.ts +11 -0
  100. package/dist/i18n/messages.js +18 -0
  101. package/dist/styles/base.css +81 -80
  102. package/dist/utils/color-space.d.ts +21 -0
  103. package/dist/utils/color-space.js +90 -0
  104. package/package.json +9 -10
  105. package/src/lib/components/compute/AppLayout.svelte +5 -3
  106. package/src/lib/components/compute/CollapsedPanelStrip.svelte +1 -1
  107. package/src/lib/components/compute/ParameterPresetManager.svelte +1 -1
  108. package/src/lib/components/compute/SolveMessages.svelte +2 -2
  109. package/src/lib/components/layout/FooterItemRenderer.svelte +1 -1
  110. package/src/lib/components/layout/PageFooter.svelte +2 -2
  111. package/src/lib/components/layout/PageHeader.svelte +1 -1
  112. package/src/lib/components/layout/SideNav.svelte +3 -3
  113. package/src/lib/components/layout/SubNav.svelte +2 -2
  114. package/src/lib/components/preview/ChartOutput.svelte +3 -3
  115. package/src/lib/components/preview/Group.svelte +7 -7
  116. package/src/lib/components/preview/ImageOutput.svelte +6 -6
  117. package/src/lib/components/preview/InputControl.svelte +1 -0
  118. package/src/lib/components/preview/OutputDisplay.svelte +8 -6
  119. package/src/lib/components/preview/TabBar.svelte +6 -4
  120. package/src/lib/components/preview/TabContent.svelte +1 -1
  121. package/src/lib/components/preview/TabLayout.svelte +3 -4
  122. package/src/lib/components/preview/inputs/ChecklistInput.svelte +3 -3
  123. package/src/lib/components/preview/inputs/ColorInput.svelte +356 -14
  124. package/src/lib/components/preview/inputs/FileInput.svelte +3 -3
  125. package/src/lib/components/preview/inputs/SegmentedInput.svelte +2 -1
  126. package/src/lib/components/preview/inputs/TileInput.svelte +1 -1
  127. package/src/lib/components/primitives/CalculateButton.svelte +2 -2
  128. package/src/lib/components/primitives/Callout.svelte +7 -5
  129. package/src/lib/components/primitives/DataTable.svelte +1 -1
  130. package/src/lib/components/primitives/ImageUploadField.svelte +1 -1
  131. package/src/lib/components/primitives/alert-dialog/alert-dialog-content.svelte +1 -1
  132. package/src/lib/components/primitives/badge/badge.svelte +2 -2
  133. package/src/lib/components/primitives/button/button.svelte +6 -7
  134. package/src/lib/components/primitives/card/card.svelte +1 -1
  135. package/src/lib/components/primitives/checkbox/checkbox.svelte +1 -1
  136. package/src/lib/components/primitives/command/command-input.svelte +1 -1
  137. package/src/lib/components/primitives/command/command-item.svelte +1 -1
  138. package/src/lib/components/primitives/command/command-link-item.svelte +1 -1
  139. package/src/lib/components/primitives/command/command.svelte +1 -1
  140. package/src/lib/components/primitives/context-menu/context-menu-checkbox-item.svelte +1 -1
  141. package/src/lib/components/primitives/context-menu/context-menu-content.svelte +1 -1
  142. package/src/lib/components/primitives/context-menu/context-menu-item.svelte +1 -1
  143. package/src/lib/components/primitives/context-menu/context-menu-radio-item.svelte +1 -1
  144. package/src/lib/components/primitives/context-menu/context-menu-sub-content.svelte +1 -1
  145. package/src/lib/components/primitives/context-menu/context-menu-sub-trigger.svelte +1 -1
  146. package/src/lib/components/primitives/dialog/dialog-content.svelte +2 -2
  147. package/src/lib/components/primitives/drawer/Drawer.svelte +1 -1
  148. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-checkbox-item.svelte +31 -11
  149. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-content.svelte +5 -1
  150. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-item.svelte +4 -2
  151. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-radio-item.svelte +1 -1
  152. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-shortcut.svelte +1 -1
  153. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  154. package/src/lib/components/primitives/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
  155. package/src/lib/components/primitives/index.ts +1 -1
  156. package/src/lib/components/primitives/input/input.svelte +2 -2
  157. package/src/lib/components/primitives/input-group/input-group.svelte +1 -1
  158. package/src/lib/components/primitives/popover/popover-content.svelte +1 -1
  159. package/src/lib/components/primitives/resizable/resizable-handle.svelte +2 -2
  160. package/src/lib/components/primitives/search/search.svelte +1 -1
  161. package/src/lib/components/primitives/select/select-content.svelte +1 -1
  162. package/src/lib/components/primitives/select/select-item.svelte +1 -1
  163. package/src/lib/components/primitives/select/select-trigger.svelte +1 -1
  164. package/src/lib/components/primitives/slider/slider.svelte +1 -1
  165. package/src/lib/components/primitives/switch/switch.svelte +1 -1
  166. package/src/lib/components/primitives/tabs/tabs-list.svelte +1 -1
  167. package/src/lib/components/primitives/tabs/tabs-trigger.svelte +1 -1
  168. package/src/lib/components/primitives/textarea/textarea.svelte +1 -1
  169. package/src/lib/components/primitives/toggle/toggle.svelte +6 -3
  170. package/src/lib/components/primitives/toggle-group/toggle-group-item.svelte +1 -1
  171. package/src/lib/components/primitives/toggle-group/toggle-group.svelte +1 -1
  172. package/src/lib/components/primitives/tooltip/index.ts +19 -0
  173. package/src/lib/components/primitives/tooltip/tooltip-content.svelte +34 -0
  174. package/src/lib/components/primitives/tooltip/tooltip-portal.svelte +7 -0
  175. package/src/lib/components/primitives/tooltip/tooltip-provider.svelte +7 -0
  176. package/src/lib/components/primitives/tooltip/tooltip-trigger.svelte +7 -0
  177. package/src/lib/components/primitives/tooltip/tooltip.svelte +7 -0
  178. package/src/lib/components/viewer/MeshMetadataPanel.svelte +1 -1
  179. package/src/lib/components/viewer/SceneManager.svelte +19 -19
  180. package/src/lib/components/viewer/Viewer.svelte +68 -157
  181. package/src/lib/components/viewer/ViewerDock.svelte +404 -0
  182. package/src/lib/i18n/messages.ts +29 -0
  183. package/src/lib/styles/base.css +81 -80
  184. package/src/lib/utils/color-space.ts +107 -0
  185. package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte +0 -39
  186. package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte.d.ts +0 -3
  187. package/dist/components/primitives/theme-switcher/index.d.ts +0 -1
  188. package/dist/components/primitives/theme-switcher/index.js +0 -1
  189. package/dist/styles/themes/cyberpunk.css +0 -98
  190. package/dist/styles/themes/neutral.css +0 -72
  191. package/dist/styles/themes/ocean.css +0 -75
  192. package/dist/styles/themes/selva.css +0 -105
  193. package/dist/theme/themeStore.svelte.d.ts +0 -12
  194. package/dist/theme/themeStore.svelte.js +0 -40
  195. package/dist/theme/themes.d.ts +0 -5
  196. package/dist/theme/themes.js +0 -13
  197. package/src/lib/components/primitives/theme-switcher/ThemeSwitcher.svelte +0 -39
  198. package/src/lib/components/primitives/theme-switcher/index.ts +0 -1
  199. package/src/lib/styles/themes/cyberpunk.css +0 -98
  200. package/src/lib/styles/themes/neutral.css +0 -72
  201. package/src/lib/styles/themes/ocean.css +0 -75
  202. package/src/lib/styles/themes/selva.css +0 -105
  203. package/src/lib/theme/themeStore.svelte.ts +0 -50
  204. package/src/lib/theme/themes.ts +0 -18
@@ -4,12 +4,12 @@ import { type VariantProps } from 'tailwind-variants';
4
4
  export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
5
5
  variant: {
6
6
  default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
7
- destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
8
- outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
9
- overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
10
- secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
11
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
12
- dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
7
+ destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
8
+ outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
9
+ overlay: "border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground";
10
+ secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-selected";
11
+ ghost: "hover:bg-hover hover:text-foreground";
12
+ dashed: "border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground";
13
13
  link: "text-primary underline-offset-4 hover:underline";
14
14
  };
15
15
  size: {
@@ -24,12 +24,12 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
24
24
  }, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
25
25
  variant: {
26
26
  default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
27
- destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
28
- outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
29
- overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
30
- secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
31
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
32
- dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
27
+ destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
28
+ outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
29
+ overlay: "border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground";
30
+ secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-selected";
31
+ ghost: "hover:bg-hover hover:text-foreground";
32
+ dashed: "border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground";
33
33
  link: "text-primary underline-offset-4 hover:underline";
34
34
  };
35
35
  size: {
@@ -44,12 +44,12 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
44
44
  }, undefined, import("tailwind-variants").TVReturnTypeLike<{
45
45
  variant: {
46
46
  default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
47
- destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
48
- outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
49
- overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
50
- secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
51
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
52
- dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
47
+ destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
48
+ outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
49
+ overlay: "border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground";
50
+ secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-selected";
51
+ ghost: "hover:bg-hover hover:text-foreground";
52
+ dashed: "border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground";
53
53
  link: "text-primary underline-offset-4 hover:underline";
54
54
  };
55
55
  size: {
@@ -2,7 +2,7 @@
2
2
  import { tv, type VariantProps } from 'tailwind-variants';
3
3
 
4
4
  export const cardVariants = tv({
5
- base: 'shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground',
5
+ base: 'shadow-raised flex flex-col rounded-xl border bg-card text-card-foreground',
6
6
  variants: {
7
7
  variant: {
8
8
  default: 'gap-6 py-6',
@@ -5,7 +5,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
5
5
  /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
6
6
  flush: "gap-0 overflow-hidden";
7
7
  };
8
- }, undefined, "shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground", {
8
+ }, undefined, "shadow-raised flex flex-col rounded-xl border bg-card text-card-foreground", {
9
9
  variant: {
10
10
  default: "gap-6 py-6";
11
11
  /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
@@ -17,7 +17,7 @@
17
17
  bind:ref
18
18
  data-slot="checkbox"
19
19
  class={cn(
20
- 'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
20
+ 'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input bg-field transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
21
21
  className
22
22
  )}
23
23
  bind:checked
@@ -14,7 +14,7 @@
14
14
 
15
15
  <div data-slot="command-input-wrapper" class="p-1 pb-0">
16
16
  <InputGroup.Root
17
- class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-lg! border-input/30 bg-input/30 shadow-none!"
17
+ class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-inner! border-border-strong bg-field shadow-none!"
18
18
  >
19
19
  <CommandPrimitive.Input
20
20
  {value}
@@ -15,7 +15,7 @@
15
15
  bind:ref
16
16
  data-slot="command-item"
17
17
  class={cn(
18
- "gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
18
+ "gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
19
19
  'data-disabled:pointer-events-none data-disabled:opacity-50',
20
20
  className
21
21
  )}
@@ -13,7 +13,7 @@
13
13
  bind:ref
14
14
  data-slot="command-item"
15
15
  class={cn(
16
- "gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
16
+ "gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
17
17
  'data-disabled:pointer-events-none data-disabled:opacity-50',
18
18
  className
19
19
  )}
@@ -21,7 +21,7 @@
21
21
  bind:ref
22
22
  data-slot="command"
23
23
  class={cn(
24
- 'p-1 flex size-full flex-col overflow-hidden rounded-xl! bg-popover text-popover-foreground',
24
+ 'p-1 flex size-full flex-col overflow-hidden rounded-lg! bg-popover text-popover-foreground',
25
25
  className
26
26
  )}
27
27
  {...restProps}
@@ -22,7 +22,7 @@
22
22
  bind:indeterminate
23
23
  data-slot="context-menu-checkbox-item"
24
24
  class={cn(
25
- "gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
25
+ "gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
26
26
  className
27
27
  )}
28
28
  {...restProps}
@@ -17,7 +17,7 @@
17
17
  bind:ref
18
18
  data-slot="context-menu-content"
19
19
  class={cn(
20
- 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-md min-w-32 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
20
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 min-w-32 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
21
21
  className
22
22
  )}
23
23
  {...restProps}
@@ -20,7 +20,7 @@
20
20
  data-inset={inset}
21
21
  data-variant={variant}
22
22
  class={cn(
23
- "gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
23
+ "gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
24
24
  className
25
25
  )}
26
26
  {...restProps}
@@ -15,7 +15,7 @@
15
15
  bind:ref
16
16
  data-slot="context-menu-radio-item"
17
17
  class={cn(
18
- "gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
18
+ "gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
19
19
  className
20
20
  )}
21
21
  {...restProps}
@@ -13,7 +13,7 @@
13
13
  bind:ref
14
14
  data-slot="context-menu-sub-content"
15
15
  class={cn(
16
- 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-lg min-w-32 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground',
16
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 min-w-32 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
17
17
  className
18
18
  )}
19
19
  {...restProps}
@@ -19,7 +19,7 @@
19
19
  data-slot="context-menu-sub-trigger"
20
20
  data-inset={inset}
21
21
  class={cn(
22
- "gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
22
+ "gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-selected data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
23
23
  className
24
24
  )}
25
25
  {...restProps}
@@ -32,7 +32,7 @@
32
32
  data-slot="dialog-content"
33
33
  class={cn(
34
34
  variant === 'flush' ? 'gap-0' : 'gap-4 p-6',
35
- 'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
35
+ 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-raised shadow-popover duration-200',
36
36
  className
37
37
  )}
38
38
  {...restProps}
@@ -41,7 +41,7 @@
41
41
  {#if showCloseButton}
42
42
  <!-- 24px around the 16px icon, and 44px of hit area on touch, without moving the icon. -->
43
43
  <DialogPrimitive.Close
44
- class="end-3 top-3 p-1 rounded-xs [&_svg:not([class*='size-'])]:size-4 pointer-coarse:after:-inset-2.5 absolute opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none pointer-coarse:after:absolute [&_svg]:pointer-events-none [&_svg]:shrink-0"
44
+ class="end-3 top-3 p-1 [&_svg:not([class*='size-'])]:size-4 pointer-coarse:after:-inset-2.5 absolute rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none pointer-coarse:after:absolute [&_svg]:pointer-events-none [&_svg]:shrink-0"
45
45
  >
46
46
  <XIcon />
47
47
  <span class="sr-only">{locale.messages.close}</span>
@@ -26,7 +26,7 @@
26
26
  onkeydown={handleKey}
27
27
  ></div>
28
28
  <div
29
- class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
29
+ class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-raised {width} flex-col overflow-y-auto border-l duration-150"
30
30
  >
31
31
  {@render children()}
32
32
  </div>
@@ -12,9 +12,12 @@
12
12
  class: className,
13
13
  children: childrenProp,
14
14
  closeOnSelect = false,
15
+ switch: asSwitch = false,
15
16
  ...restProps
16
17
  }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
17
18
  children?: Snippet;
19
+ /** Shows an on/off switch at the row's end instead of a checkmark. */
20
+ switch?: boolean;
18
21
  } = $props();
19
22
  </script>
20
23
 
@@ -25,22 +28,39 @@
25
28
  bind:indeterminate
26
29
  data-slot="dropdown-menu-checkbox-item"
27
30
  class={cn(
28
- "gap-1.5 py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
31
+ asSwitch ? 'pr-2 gap-2.5' : 'pr-8',
32
+ "gap-1.5 py-1 pointer-coarse:py-2.5 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none focus:bg-hover focus:text-foreground focus:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
29
33
  className
30
34
  )}
31
35
  {...restProps}
32
36
  >
33
37
  {#snippet children({ checked, indeterminate })}
34
- <span
35
- class="right-2 pointer-events-none absolute flex items-center justify-center"
36
- data-slot="dropdown-menu-checkbox-item-indicator"
37
- >
38
- {#if indeterminate}
39
- <MinusIcon />
40
- {:else if checked}
41
- <CheckIcon />
42
- {/if}
43
- </span>
44
38
  {@render childrenProp?.()}
39
+ {#if asSwitch}
40
+ <span
41
+ class="[[data-slot=dropdown-menu-shortcut]+&]:ml-2 h-4.5 w-8 pointer-events-none relative ml-auto shrink-0 rounded-full transition-colors {checked
42
+ ? 'bg-primary'
43
+ : 'bg-input'}"
44
+ data-slot="dropdown-menu-checkbox-item-switch"
45
+ aria-hidden="true"
46
+ >
47
+ <span
48
+ class="left-0.5 top-0.5 size-3.5 absolute rounded-full bg-background transition-transform dark:bg-foreground {checked
49
+ ? 'translate-x-3.5 dark:bg-primary-foreground'
50
+ : ''}"
51
+ ></span>
52
+ </span>
53
+ {:else}
54
+ <span
55
+ class="right-2 pointer-events-none absolute flex items-center justify-center"
56
+ data-slot="dropdown-menu-checkbox-item-indicator"
57
+ >
58
+ {#if indeterminate}
59
+ <MinusIcon />
60
+ {:else if checked}
61
+ <CheckIcon />
62
+ {/if}
63
+ </span>
64
+ {/if}
45
65
  {/snippet}
46
66
  </DropdownMenuPrimitive.CheckboxItem>
@@ -3,6 +3,8 @@ import { type WithoutChildrenOrChild } from '../../../utils.js';
3
3
  import type { Snippet } from 'svelte';
4
4
  type $$ComponentProps = WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
5
5
  children?: Snippet;
6
+ /** Shows an on/off switch at the row's end instead of a checkmark. */
7
+ switch?: boolean;
6
8
  };
7
9
  declare const DropdownMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
8
10
  type DropdownMenuCheckboxItem = ReturnType<typeof DropdownMenuCheckboxItem>;
@@ -9,10 +9,13 @@
9
9
  sideOffset = 4,
10
10
  align = 'start',
11
11
  portalProps,
12
+ variant = 'default',
12
13
  class: className,
13
14
  ...restProps
14
15
  }: DropdownMenuPrimitive.ContentProps & {
15
16
  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
17
+ /** `glass` is the translucent blurred surface used over the 3D viewer. */
18
+ variant?: 'default' | 'glass';
16
19
  } = $props();
17
20
  </script>
18
21
 
@@ -23,7 +26,8 @@
23
26
  {sideOffset}
24
27
  {align}
25
28
  class={cn(
26
- 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-32 p-1 shadow-md z-50 max-h-(--bits-dropdown-menu-content-available-height) w-(--bits-dropdown-menu-anchor-width) origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[state=closed]:overflow-hidden',
29
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-32 p-1 z-50 max-h-(--bits-dropdown-menu-content-available-height) w-(--bits-dropdown-menu-anchor-width) origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-border-strong duration-100 data-[state=closed]:overflow-hidden',
30
+ variant === 'glass' && 'backdrop-blur-md bg-popover/70',
27
31
  className
28
32
  )}
29
33
  {...restProps}
@@ -4,6 +4,8 @@ import DropdownMenuPortal from './dropdown-menu-portal.svelte';
4
4
  import type { ComponentProps } from 'svelte';
5
5
  type $$ComponentProps = DropdownMenuPrimitive.ContentProps & {
6
6
  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
7
+ /** `glass` is the translucent blurred surface used over the 3D viewer. */
8
+ variant?: 'default' | 'glass';
7
9
  };
8
10
  declare const DropdownMenuContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
9
11
  type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
@@ -10,7 +10,8 @@
10
10
  ...restProps
11
11
  }: DropdownMenuPrimitive.ItemProps & {
12
12
  inset?: boolean;
13
- variant?: 'default' | 'destructive';
13
+ /** `chip` is a centered bordered cell for compact grids. */
14
+ variant?: 'default' | 'destructive' | 'chip';
14
15
  } = $props();
15
16
  </script>
16
17
 
@@ -20,7 +21,8 @@
20
21
  data-inset={inset}
21
22
  data-variant={variant}
22
23
  class={cn(
23
- "gap-1.5 px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive",
24
+ "gap-1.5 px-1.5 py-1 pointer-coarse:py-2.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center rounded-inner outline-hidden select-none focus:bg-hover focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive",
25
+ variant === 'chip' && 'px-1 py-1.5 pointer-coarse:py-3 text-xs justify-center border',
24
26
  className
25
27
  )}
26
28
  {...restProps}
@@ -1,7 +1,8 @@
1
1
  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
2
2
  type $$ComponentProps = DropdownMenuPrimitive.ItemProps & {
3
3
  inset?: boolean;
4
- variant?: 'default' | 'destructive';
4
+ /** `chip` is a centered bordered cell for compact grids. */
5
+ variant?: 'default' | 'destructive' | 'chip';
5
6
  };
6
7
  declare const DropdownMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
7
8
  type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
@@ -17,7 +17,7 @@
17
17
  {closeOnSelect}
18
18
  data-slot="dropdown-menu-radio-item"
19
19
  class={cn(
20
- "gap-1.5 py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
20
+ "gap-1.5 py-1 pointer-coarse:py-2.5 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none focus:bg-hover focus:text-foreground focus:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
21
21
  className
22
22
  )}
23
23
  {...restProps}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="dropdown-menu-shortcut"
16
16
  class={cn(
17
- 'text-xs tracking-widest ml-auto text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
17
+ 'h-5 min-w-5 px-1 font-mono ml-auto inline-flex items-center justify-center rounded-sm border bg-muted text-2xs text-muted-foreground group-focus/dropdown-menu-item:text-foreground',
18
18
  className
19
19
  )}
20
20
  {...restProps}
@@ -23,7 +23,7 @@
23
23
  {align}
24
24
  {alignOffset}
25
25
  class={cn(
26
- 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-24 p-1 shadow-lg z-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 duration-100',
26
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-24 p-1 z-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-border-strong duration-100',
27
27
  className
28
28
  )}
29
29
  {...restProps}
@@ -19,7 +19,7 @@
19
19
  data-slot="dropdown-menu-sub-trigger"
20
20
  data-inset={inset}
21
21
  class={cn(
22
- "gap-1.5 px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
22
+ "gap-1.5 px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-inner outline-hidden select-none focus:bg-hover focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
23
23
  className
24
24
  )}
25
25
  {...restProps}
@@ -15,6 +15,7 @@ export * as AlertDialog from './alert-dialog';
15
15
  export * as ContextMenu from './context-menu';
16
16
  export * as DropdownMenu from './dropdown-menu';
17
17
  export * as Popover from './popover';
18
+ export * as Tooltip from './tooltip';
18
19
  export * as Command from './command';
19
20
  export * as ToggleGroup from './toggle-group';
20
21
  export * as Empty from './empty';
@@ -26,7 +27,6 @@ export * as Resizable from './resizable';
26
27
  export { Separator } from './separator';
27
28
  export { Switch } from './switch';
28
29
  export { Toaster, toast } from './sonner';
29
- export { ThemeSwitcher } from './theme-switcher';
30
30
  export { default as StateDisplay } from './StateDisplay.svelte';
31
31
  export { default as Callout, calloutVariants, type CalloutTone } from './Callout.svelte';
32
32
  export { default as SeverityIcon } from './SeverityIcon.svelte';
@@ -16,6 +16,7 @@ export * as AlertDialog from './alert-dialog';
16
16
  export * as ContextMenu from './context-menu';
17
17
  export * as DropdownMenu from './dropdown-menu';
18
18
  export * as Popover from './popover';
19
+ export * as Tooltip from './tooltip';
19
20
  export * as Command from './command';
20
21
  export * as ToggleGroup from './toggle-group';
21
22
  export * as Empty from './empty';
@@ -27,7 +28,6 @@ export * as Resizable from './resizable';
27
28
  export { Separator } from './separator';
28
29
  export { Switch } from './switch';
29
30
  export { Toaster, toast } from './sonner';
30
- export { ThemeSwitcher } from './theme-switcher';
31
31
  // Custom components (not replaced by shadcn)
32
32
  export { default as StateDisplay } from './StateDisplay.svelte';
33
33
  export { default as Callout, calloutVariants } from './Callout.svelte';
@@ -25,7 +25,7 @@
25
25
  bind:this={ref}
26
26
  data-slot={dataSlot}
27
27
  class={cn(
28
- 'h-9 min-w-0 px-3 pt-1.5 text-sm font-medium shadow-xs flex w-full rounded-md border border-input bg-transparent ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
28
+ 'h-9 min-w-0 px-3 pt-1.5 text-sm font-medium shadow-xs flex w-full rounded-md border border-input bg-field ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
29
29
  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
30
30
  'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
31
31
  className
@@ -40,7 +40,7 @@
40
40
  bind:this={ref}
41
41
  data-slot={dataSlot}
42
42
  class={cn(
43
- 'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
43
+ 'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-field ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
44
44
  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
45
45
  'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
46
46
  className
@@ -15,7 +15,7 @@
15
15
  data-slot="input-group"
16
16
  role="group"
17
17
  class={cn(
18
- 'group/input-group h-9 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
18
+ 'group/input-group h-9 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-field transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-muted has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
19
19
  className
20
20
  )}
21
21
  {...props}
@@ -23,7 +23,7 @@
23
23
  {sideOffset}
24
24
  {align}
25
25
  class={cn(
26
- 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 gap-2.5 p-2.5 text-sm shadow-md w-72 z-50 flex origin-(--bits-popover-content-transform-origin) flex-col rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 outline-hidden duration-100',
26
+ 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 gap-2.5 p-2.5 text-sm w-72 z-50 flex origin-(--bits-popover-content-transform-origin) flex-col rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-border-strong outline-hidden duration-100',
27
27
  className
28
28
  )}
29
29
  {...restProps}
@@ -20,14 +20,14 @@
20
20
  data-slot="resizable-handle"
21
21
  class={cn(
22
22
  'group/handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
23
- line ? 'bg-border' : 'bg-transparent',
23
+ line ? 'bg-border' : 'w-3 data-[direction=vertical]:h-3 bg-transparent',
24
24
  className
25
25
  )}
26
26
  {...restProps}
27
27
  >
28
28
  {#if withHandle}
29
29
  <div
30
- class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition duration-150 group-hover/handle:scale-y-110 group-hover/handle:bg-foreground/40 group-active/handle:bg-foreground/60"
30
+ class="h-8 w-0.75 group-hover/handle:h-12 z-10 flex shrink-0 rounded-full bg-border-strong transition duration-150 group-hover/handle:bg-input group-active/handle:bg-muted-foreground"
31
31
  ></div>
32
32
  {/if}
33
33
  </ResizablePrimitive.PaneResizer>
@@ -45,7 +45,7 @@
45
45
  {placeholder}
46
46
  data-slot="input"
47
47
  class={cn(
48
- 'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
48
+ 'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-field ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
49
49
  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
50
50
  'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
51
51
  'pl-9 pr-12',
@@ -22,7 +22,7 @@
22
22
  {sideOffset}
23
23
  data-slot="select-content"
24
24
  class={cn(
25
- 'shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 min-w-32 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
25
+ 'data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 min-w-32 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
26
26
  className
27
27
  )}
28
28
  {...restProps}
@@ -18,7 +18,7 @@
18
18
  {value}
19
19
  data-slot="select-item"
20
20
  class={cn(
21
- "gap-2 py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center rounded-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center",
21
+ "gap-2 py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center rounded-inner outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-hover data-[highlighted]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center",
22
22
  className
23
23
  )}
24
24
  {...restProps}
@@ -19,7 +19,7 @@
19
19
  data-slot="select-trigger"
20
20
  data-size={size}
21
21
  class={cn(
22
- "gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
22
+ "gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-field whitespace-nowrap transition outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
23
23
  className
24
24
  )}
25
25
  {...restProps}
@@ -35,7 +35,7 @@ get along, so we shut typescript up by casting `value` to `never`.
35
35
  data-orientation={orientation}
36
36
  data-slot="slider-track"
37
37
  class={cn(
38
- 'data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full dark:bg-foreground/15'
38
+ 'data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full'
39
39
  )}
40
40
  >
41
41
  <SliderPrimitive.Range
@@ -15,7 +15,7 @@
15
15
  bind:checked
16
16
  data-slot="switch"
17
17
  class={cn(
18
- 'peer w-8 shadow-xs h-4.5 inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
18
+ 'peer w-8 shadow-xs h-4.5 inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
19
19
  className
20
20
  )}
21
21
  {...restProps}
@@ -5,7 +5,7 @@
5
5
  base: 'inline-flex items-center text-muted-foreground',
6
6
  variants: {
7
7
  variant: {
8
- default: 'h-9 w-fit justify-center rounded-lg bg-muted p-0.75',
8
+ default: 'h-9 w-fit justify-center rounded-md bg-muted p-0.5',
9
9
  line: 'gap-1 px-2 w-full justify-start'
10
10
  }
11
11
  },