@dryui/ui 3.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1075) hide show
  1. package/dist/accordion/accordion-root.svelte +1 -1
  2. package/dist/adjust/adjust.svelte +12 -8
  3. package/dist/alpha-slider/alpha-slider-input.svelte +14 -13
  4. package/dist/app-frame/app-frame.svelte +4 -1
  5. package/dist/aspect-ratio/aspect-ratio.svelte +7 -6
  6. package/dist/aurora/aurora.svelte +144 -81
  7. package/dist/avatar/avatar.svelte +22 -15
  8. package/dist/badge/badge.svelte +10 -22
  9. package/dist/beam/beam.svelte +20 -21
  10. package/dist/button/button.svelte +45 -24
  11. package/dist/button/button.svelte.d.ts +14 -0
  12. package/dist/button-group/button-group.svelte +4 -5
  13. package/dist/calendar/calendar-button-grid.svelte +11 -4
  14. package/dist/calendar/calendar-button-grid.svelte.d.ts +2 -2
  15. package/dist/calendar/calendar-event-legend.svelte +63 -0
  16. package/dist/calendar/calendar-event-legend.svelte.d.ts +6 -0
  17. package/dist/calendar/calendar-header.svelte +3 -1
  18. package/dist/calendar/calendar-heading.svelte +21 -9
  19. package/dist/calendar/calendar-nav-button.svelte +15 -2
  20. package/dist/calendar/calendar-root.svelte +94 -11
  21. package/dist/calendar/calendar-root.svelte.d.ts +10 -1
  22. package/dist/calendar/calendar-week.svelte +515 -0
  23. package/dist/calendar/calendar-week.svelte.d.ts +12 -0
  24. package/dist/calendar/calendar.meta.js +2 -2
  25. package/dist/calendar/context.svelte.d.ts +19 -0
  26. package/dist/calendar/index.d.ts +11 -1
  27. package/dist/calendar/index.js +5 -1
  28. package/dist/calendar/types.d.ts +32 -0
  29. package/dist/calendar/types.js +1 -0
  30. package/dist/calendar/week-utils.d.ts +12 -0
  31. package/dist/calendar/week-utils.js +133 -0
  32. package/dist/carousel/carousel-button-dots.svelte +12 -6
  33. package/dist/carousel/carousel-root.svelte +201 -17
  34. package/dist/carousel/carousel-root.svelte.d.ts +1 -1
  35. package/dist/carousel/carousel-viewport.svelte +19 -1
  36. package/dist/chart/chart-bars.svelte +43 -19
  37. package/dist/chart/chart-donut.svelte +50 -23
  38. package/dist/chart/chart-root.svelte +19 -4
  39. package/dist/chart/chart-stacked-bar.svelte +3 -2
  40. package/dist/chart/series-color.d.ts +7 -0
  41. package/dist/chart/series-color.js +11 -0
  42. package/dist/chat-thread/chat-thread.svelte +15 -126
  43. package/dist/chat-thread/chat-thread.svelte.d.ts +4 -7
  44. package/dist/chat-thread/index.d.ts +4 -7
  45. package/dist/checkbox/checkbox-input.svelte +48 -41
  46. package/dist/chip/chip-button.svelte +14 -17
  47. package/dist/chip/chip-button.svelte.d.ts +2 -3
  48. package/dist/chip-group/chip-group-root.svelte +6 -4
  49. package/dist/chromatic-aberration/chromatic-aberration.svelte +34 -19
  50. package/dist/chromatic-shift/chromatic-shift.svelte +7 -8
  51. package/dist/code-block/code-block-button.svelte +72 -40
  52. package/dist/color-picker/color-picker-area.svelte +20 -25
  53. package/dist/color-picker/color-picker-input-hue-slider.svelte +12 -9
  54. package/dist/color-picker/color-picker-root.svelte +18 -17
  55. package/dist/color-picker/color-picker-swatch.svelte +17 -16
  56. package/dist/combobox/combobox-content.svelte +4 -14
  57. package/dist/combobox/combobox-input-root.svelte +6 -3
  58. package/dist/combobox/combobox-input-root.svelte.d.ts +2 -1
  59. package/dist/combobox/combobox-input.svelte +13 -10
  60. package/dist/combobox/combobox-item.svelte +9 -4
  61. package/dist/command-palette/command-palette-dialog-root.svelte +1 -0
  62. package/dist/command-palette/command-palette-item.svelte +7 -4
  63. package/dist/context-menu/context-menu-content.svelte +7 -15
  64. package/dist/data-grid/data-grid-button-input-column.svelte +2 -2
  65. package/dist/data-grid/data-grid-cell.svelte +1 -1
  66. package/dist/data-grid/data-grid-input-select-all.svelte +1 -1
  67. package/dist/data-grid/data-grid-input-select-cell.svelte +1 -1
  68. package/dist/date-field/date-field-segment.svelte +10 -12
  69. package/dist/date-picker/datepicker-button-calendar.svelte +2 -2
  70. package/dist/date-picker/datepicker-button-calendar.svelte.d.ts +2 -2
  71. package/dist/date-picker/datepicker-button-trigger.svelte +146 -44
  72. package/dist/date-picker/index.d.ts +4 -1
  73. package/dist/date-range-picker/date-range-picker-button-calendar.svelte +2 -2
  74. package/dist/date-range-picker/date-range-picker-button-calendar.svelte.d.ts +2 -2
  75. package/dist/date-range-picker/date-range-picker-button-trigger.svelte +151 -40
  76. package/dist/date-range-picker/date-range-picker-button-trigger.svelte.d.ts +1 -0
  77. package/dist/date-range-picker/index.d.ts +4 -1
  78. package/dist/diagram/edge-routing.js +18 -7
  79. package/dist/diagram/layout.js +31 -16
  80. package/dist/displacement/displacement.svelte +30 -43
  81. package/dist/drag-and-drop/drag-and-drop-root.svelte +17 -5
  82. package/dist/drag-and-drop/index.d.ts +14 -1
  83. package/dist/drop-zone/drop-zone.svelte +7 -4
  84. package/dist/dropdown-menu/dropdown-menu-content.svelte +15 -16
  85. package/dist/field/field-description.svelte +6 -9
  86. package/dist/field/field-error.svelte +6 -10
  87. package/dist/file-select/file-select-root.svelte +13 -18
  88. package/dist/file-select/file-select-root.svelte.d.ts +2 -1
  89. package/dist/file-upload/file-upload-dropzone.svelte +22 -22
  90. package/dist/file-upload/file-upload-item.svelte +1 -1
  91. package/dist/file-upload/file-upload-list.svelte +1 -1
  92. package/dist/flip-card/flip-card-root.svelte +2 -2
  93. package/dist/float-button/context.svelte.d.ts +2 -0
  94. package/dist/float-button/float-button-action.svelte +41 -11
  95. package/dist/float-button/float-button-root.svelte +52 -13
  96. package/dist/float-button/float-button-trigger.svelte +25 -12
  97. package/dist/format-bytes/format-bytes.svelte +2 -5
  98. package/dist/format-date/format-date.svelte +2 -6
  99. package/dist/format-number/format-number.svelte +2 -6
  100. package/dist/gauge/gauge.svelte +9 -2
  101. package/dist/glass/glass.svelte +4 -3
  102. package/dist/glow/glow.svelte +0 -5
  103. package/dist/god-rays/god-rays.svelte +6 -6
  104. package/dist/gradient-mesh/gradient-mesh.svelte +112 -111
  105. package/dist/halftone/halftone.svelte +17 -28
  106. package/dist/heading/heading.svelte +0 -6
  107. package/dist/hover-card/hover-card-content.svelte +8 -5
  108. package/dist/hover-card/hover-card.meta.js +2 -2
  109. package/dist/icon/icon.svelte +24 -13
  110. package/dist/icon/icon.svelte.d.ts +2 -2
  111. package/dist/icon-swap/icon-swap.svelte +4 -3
  112. package/dist/icon-swap/icon-swap.svelte.d.ts +2 -1
  113. package/dist/image/image.svelte +5 -13
  114. package/dist/image-comparison/image-comparison.svelte +39 -45
  115. package/dist/index.d.ts +3 -5
  116. package/dist/index.js +1 -2
  117. package/dist/input/input.svelte +88 -9
  118. package/dist/input/input.svelte.d.ts +24 -1
  119. package/dist/internal/anchored-overlay-content.svelte.d.ts +12 -6
  120. package/dist/internal/anchored-overlay-content.svelte.js +13 -16
  121. package/dist/internal/calendar-event-layout.d.ts +53 -0
  122. package/dist/internal/calendar-event-layout.js +191 -0
  123. package/dist/internal/calendar-grid-button.svelte +618 -76
  124. package/dist/internal/calendar-grid-button.svelte.d.ts +2 -2
  125. package/dist/internal/calendar-grid-utils.d.ts +3 -0
  126. package/dist/internal/calendar-grid-utils.js +24 -0
  127. package/dist/internal/form-control-wrapper-attrs.d.ts +9 -0
  128. package/dist/internal/form-control-wrapper-attrs.js +1 -0
  129. package/dist/internal/menu-item.svelte +1 -0
  130. package/dist/internal/modal-content.svelte +2 -4
  131. package/dist/internal/motion.d.ts +1 -1
  132. package/dist/internal/motion.js +5 -2
  133. package/dist/internal/picker-popover-content.svelte +15 -16
  134. package/dist/link/link.svelte +8 -5
  135. package/dist/link-preview/link-preview-content.svelte +12 -15
  136. package/dist/link-preview/link-preview-trigger.svelte +3 -6
  137. package/dist/listbox/listbox-item.svelte +13 -18
  138. package/dist/listbox/listbox-root.svelte +4 -9
  139. package/dist/logo-mark/logo-mark.svelte +31 -31
  140. package/dist/map/map-marker.svelte +2 -2
  141. package/dist/map/map-root.svelte +11 -2
  142. package/dist/markdown-renderer/markdown-renderer.svelte +141 -164
  143. package/dist/marquee/marquee.svelte +12 -13
  144. package/dist/mask-reveal/mask-reveal.svelte +14 -27
  145. package/dist/mega-menu/mega-menu-column.svelte +1 -1
  146. package/dist/mega-menu/mega-menu-link.svelte +7 -7
  147. package/dist/mega-menu/mega-menu-panel.svelte +18 -32
  148. package/dist/menubar/menubar-content.svelte +18 -19
  149. package/dist/menubar/menubar-item.svelte +1 -0
  150. package/dist/menubar/menubar-menu.svelte +1 -2
  151. package/dist/menubar/menubar-root.svelte +1 -11
  152. package/dist/motion/enter.svelte +15 -14
  153. package/dist/motion/enter.svelte.d.ts +2 -1
  154. package/dist/motion/exit.svelte +6 -5
  155. package/dist/motion/exit.svelte.d.ts +2 -1
  156. package/dist/motion/stagger.svelte +10 -9
  157. package/dist/motion/stagger.svelte.d.ts +2 -1
  158. package/dist/multi-select-combobox/multi-select-combobox-content.svelte +4 -14
  159. package/dist/multi-select-combobox/multi-select-combobox-input.svelte +6 -5
  160. package/dist/multi-select-combobox/multi-select-combobox-item.svelte +25 -31
  161. package/dist/multi-select-combobox/multi-select-combobox-root-input.svelte +12 -16
  162. package/dist/noise/noise.svelte +20 -19
  163. package/dist/notification-center/notification-center-item.svelte +1 -1
  164. package/dist/notification-center/notification-center-panel.svelte +17 -19
  165. package/dist/number-input/number-input-button.svelte +78 -12
  166. package/dist/number-input/number-input-button.svelte.d.ts +15 -1
  167. package/dist/numeric/numeric.svelte +27 -12
  168. package/dist/numeric/numeric.svelte.d.ts +2 -1
  169. package/dist/option-picker/option-picker-item.svelte +8 -15
  170. package/dist/option-picker/option-picker-preview.svelte +44 -24
  171. package/dist/pagination/pagination-root.svelte +7 -0
  172. package/dist/pin-input/pin-input-root.svelte +2 -11
  173. package/dist/popover/popover-content.svelte +7 -4
  174. package/dist/progress/progress.svelte +2 -2
  175. package/dist/prompt-input/prompt-input-button-textarea.svelte +2 -10
  176. package/dist/qr-code/qr-code.svelte +78 -38
  177. package/dist/qr-code/qr-code.svelte.d.ts +1 -1
  178. package/dist/radio-group/radio-group-item-input.svelte +60 -14
  179. package/dist/radio-group/radio-group-item-input.svelte.d.ts +9 -2
  180. package/dist/range-calendar/index.d.ts +4 -1
  181. package/dist/range-calendar/range-calendar-grid-button.svelte +2 -2
  182. package/dist/range-calendar/range-calendar-grid-button.svelte.d.ts +2 -2
  183. package/dist/relative-time/relative-time.svelte +15 -15
  184. package/dist/reveal/reveal.svelte +12 -24
  185. package/dist/rich-text-editor/rich-text-editor-content.svelte +1 -4
  186. package/dist/scroll-to-top/scroll-to-top-button.svelte +5 -3
  187. package/dist/scroll-to-top/scroll-to-top-button.svelte.d.ts +2 -2
  188. package/dist/segmented-control/segmented-control-root.svelte +0 -3
  189. package/dist/select/index.d.ts +7 -1
  190. package/dist/select/select-content.svelte +15 -16
  191. package/dist/select/select-item.svelte +1 -0
  192. package/dist/select/select-root-input.svelte +5 -4
  193. package/dist/select/select-root-input.svelte.d.ts +2 -2
  194. package/dist/select/select-trigger-button.svelte +122 -16
  195. package/dist/select/select-trigger-button.svelte.d.ts +2 -2
  196. package/dist/shader-canvas/shader-canvas.svelte +11 -20
  197. package/dist/shimmer/shimmer.svelte +28 -25
  198. package/dist/skeleton/skeleton.svelte +18 -23
  199. package/dist/slider/slider-input.svelte +8 -7
  200. package/dist/sparkline/sparkline.svelte +1 -1
  201. package/dist/splitter/splitter-handle.svelte +3 -3
  202. package/dist/splitter/splitter-root.svelte +13 -12
  203. package/dist/spotlight/spotlight.svelte +30 -62
  204. package/dist/star-rating/star-rating-root.svelte +3 -4
  205. package/dist/stepper/stepper-step-button.svelte +2 -2
  206. package/dist/table-of-contents/table-of-contents-root.svelte +5 -16
  207. package/dist/tabs/tabs-content.svelte +7 -1
  208. package/dist/tag/tag-button.svelte +70 -68
  209. package/dist/tags-input/tags-input-root.svelte +2 -9
  210. package/dist/tags-input/tags-input-tag.svelte +1 -1
  211. package/dist/text/index.d.ts +2 -3
  212. package/dist/text/text.svelte +6 -12
  213. package/dist/text/text.svelte.d.ts +2 -3
  214. package/dist/textarea/textarea.svelte +91 -16
  215. package/dist/textarea/textarea.svelte.d.ts +20 -1
  216. package/dist/themes/aurora.css +155 -113
  217. package/dist/themes/component-defaults.css +47 -0
  218. package/dist/themes/dark.css +115 -229
  219. package/dist/themes/default.css +71 -176
  220. package/dist/themes/midnight.css +80 -65
  221. package/dist/themes/terminal.css +69 -73
  222. package/dist/time-input/index.d.ts +2 -2
  223. package/dist/time-input/time-input.meta.js +1 -1
  224. package/dist/time-input/time-input.svelte +5 -3
  225. package/dist/time-input/time-input.svelte.d.ts +2 -2
  226. package/dist/timeline/timeline-title.svelte +0 -6
  227. package/dist/toast/toast-root.svelte +10 -9
  228. package/dist/toggle/toggle-button.svelte +17 -6
  229. package/dist/toggle-group/toggle-group-root.svelte +3 -3
  230. package/dist/token-scope/index.d.ts +6 -0
  231. package/dist/token-scope/index.js +1 -0
  232. package/dist/token-scope/token-scope.meta.js +7 -0
  233. package/dist/toolbar/toolbar-root.svelte +4 -4
  234. package/dist/tooltip/tooltip-content.svelte +24 -13
  235. package/dist/tour/tour-root.css +6 -2
  236. package/dist/transfer/transfer-list-input.svelte +1 -2
  237. package/dist/transfer/transfer-root.svelte +0 -10
  238. package/dist/tree/tree-root.svelte +7 -4
  239. package/dist/typography/blockquote.svelte +2 -2
  240. package/dist/typography/code.svelte +2 -2
  241. package/dist/typography/heading.svelte +2 -2
  242. package/dist/typography/index.d.ts +0 -1
  243. package/dist/typography/text.svelte +2 -13
  244. package/dist/video-embed/video-embed-button.svelte +9 -9
  245. package/package.json +13 -12
  246. package/src/accordion/accordion-button-trigger.svelte +60 -0
  247. package/src/accordion/accordion-content.svelte +37 -0
  248. package/src/accordion/accordion-item.svelte +62 -0
  249. package/src/accordion/accordion-root.svelte +61 -0
  250. package/src/accordion/accordion.meta.ts +7 -0
  251. package/src/accordion/context.svelte.ts +19 -0
  252. package/src/accordion/index.ts +41 -0
  253. package/src/adjust/adjust.meta.ts +7 -0
  254. package/src/adjust/adjust.svelte +71 -0
  255. package/src/adjust/index.ts +20 -0
  256. package/src/alert/alert.meta.ts +7 -0
  257. package/src/alert/alert.svelte +174 -0
  258. package/src/alert/index.ts +18 -0
  259. package/src/alert-dialog/alert-dialog-body.svelte +23 -0
  260. package/src/alert-dialog/alert-dialog-button-action.svelte +15 -0
  261. package/src/alert-dialog/alert-dialog-button-cancel.svelte +18 -0
  262. package/src/alert-dialog/alert-dialog-content.svelte +26 -0
  263. package/src/alert-dialog/alert-dialog-footer.svelte +29 -0
  264. package/src/alert-dialog/alert-dialog-header.svelte +26 -0
  265. package/src/alert-dialog/alert-dialog-overlay.svelte +34 -0
  266. package/src/alert-dialog/alert-dialog-root.svelte +31 -0
  267. package/src/alert-dialog/alert-dialog-trigger.svelte +56 -0
  268. package/src/alert-dialog/alert-dialog.meta.ts +7 -0
  269. package/src/alert-dialog/context.svelte.ts +11 -0
  270. package/src/alert-dialog/index.ts +43 -0
  271. package/src/alpha-slider/alpha-slider-input.svelte +165 -0
  272. package/src/alpha-slider/alpha-slider.meta.ts +7 -0
  273. package/src/alpha-slider/index.ts +10 -0
  274. package/src/app-frame/app-frame.meta.ts +8 -0
  275. package/src/app-frame/app-frame.svelte +141 -0
  276. package/src/app-frame/index.ts +10 -0
  277. package/src/aspect-ratio/aspect-ratio.meta.ts +7 -0
  278. package/src/aspect-ratio/aspect-ratio.svelte +29 -0
  279. package/src/aspect-ratio/index.ts +9 -0
  280. package/src/aurora/aurora.meta.ts +8 -0
  281. package/src/aurora/aurora.svelte +526 -0
  282. package/src/aurora/index.ts +24 -0
  283. package/src/avatar/avatar.meta.ts +7 -0
  284. package/src/avatar/avatar.svelte +213 -0
  285. package/src/avatar/index.ts +15 -0
  286. package/src/backdrop/backdrop.meta.ts +7 -0
  287. package/src/backdrop/backdrop.svelte +51 -0
  288. package/src/backdrop/index.ts +3 -0
  289. package/src/badge/badge.meta.ts +7 -0
  290. package/src/badge/badge.svelte +334 -0
  291. package/src/badge/index.ts +12 -0
  292. package/src/beam/beam.meta.ts +8 -0
  293. package/src/beam/beam.svelte +118 -0
  294. package/src/beam/index.ts +17 -0
  295. package/src/border-beam/border-beam.meta.ts +8 -0
  296. package/src/border-beam/border-beam.svelte +42 -0
  297. package/src/border-beam/index.ts +10 -0
  298. package/src/breadcrumb/breadcrumb-item.svelte +23 -0
  299. package/src/breadcrumb/breadcrumb-link.svelte +60 -0
  300. package/src/breadcrumb/breadcrumb-list.svelte +28 -0
  301. package/src/breadcrumb/breadcrumb-root.svelte +14 -0
  302. package/src/breadcrumb/breadcrumb-separator.svelte +25 -0
  303. package/src/breadcrumb/breadcrumb.meta.ts +7 -0
  304. package/src/breadcrumb/index.ts +44 -0
  305. package/src/button/button.meta.ts +7 -0
  306. package/src/button/button.svelte +675 -0
  307. package/src/button/index.ts +29 -0
  308. package/src/button-group/button-group.meta.ts +7 -0
  309. package/src/button-group/button-group.svelte +61 -0
  310. package/src/button-group/context.svelte.ts +15 -0
  311. package/src/button-group/index.ts +7 -0
  312. package/src/calendar/calendar-button-grid.svelte +58 -0
  313. package/src/calendar/calendar-button-next.svelte +13 -0
  314. package/src/calendar/calendar-button-prev.svelte +13 -0
  315. package/src/calendar/calendar-event-legend.svelte +63 -0
  316. package/src/calendar/calendar-header.svelte +28 -0
  317. package/src/calendar/calendar-heading.svelte +42 -0
  318. package/src/calendar/calendar-nav-button.svelte +39 -0
  319. package/src/calendar/calendar-root.svelte +211 -0
  320. package/src/calendar/calendar-week.svelte +515 -0
  321. package/src/calendar/calendar.meta.ts +7 -0
  322. package/src/calendar/context.svelte.ts +43 -0
  323. package/src/calendar/index.ts +57 -0
  324. package/src/calendar/types.ts +39 -0
  325. package/src/calendar/week-utils.ts +175 -0
  326. package/src/carousel/carousel-button-dots.svelte +74 -0
  327. package/src/carousel/carousel-button-next.svelte +13 -0
  328. package/src/carousel/carousel-button-prev.svelte +13 -0
  329. package/src/carousel/carousel-button-thumbnails.svelte +82 -0
  330. package/src/carousel/carousel-nav-button.svelte +31 -0
  331. package/src/carousel/carousel-root.svelte +432 -0
  332. package/src/carousel/carousel-slide.svelte +39 -0
  333. package/src/carousel/carousel-viewport.svelte +91 -0
  334. package/src/carousel/carousel.meta.ts +7 -0
  335. package/src/carousel/context.svelte.ts +22 -0
  336. package/src/carousel/index.ts +35 -0
  337. package/src/chart/chart-area.svelte +76 -0
  338. package/src/chart/chart-bars.svelte +102 -0
  339. package/src/chart/chart-donut.svelte +145 -0
  340. package/src/chart/chart-horizontal-bar.svelte +67 -0
  341. package/src/chart/chart-line.svelte +66 -0
  342. package/src/chart/chart-root.svelte +257 -0
  343. package/src/chart/chart-stacked-bar.svelte +77 -0
  344. package/src/chart/chart-x-axis.svelte +50 -0
  345. package/src/chart/chart-y-axis.svelte +71 -0
  346. package/src/chart/chart.meta.ts +7 -0
  347. package/src/chart/context.svelte.ts +29 -0
  348. package/src/chart/index.ts +86 -0
  349. package/src/chart/series-color.ts +12 -0
  350. package/src/chat-thread/chat-thread.meta.ts +7 -0
  351. package/src/chat-thread/chat-thread.svelte +97 -0
  352. package/src/chat-thread/index.ts +10 -0
  353. package/src/checkbox/checkbox-input.svelte +259 -0
  354. package/src/checkbox/checkbox.meta.ts +7 -0
  355. package/src/checkbox/index.ts +7 -0
  356. package/src/chip/chip-button.svelte +170 -0
  357. package/src/chip/chip.meta.ts +7 -0
  358. package/src/chip/index.ts +29 -0
  359. package/src/chip-group/chip-group-button-item.svelte +36 -0
  360. package/src/chip-group/chip-group-label.svelte +26 -0
  361. package/src/chip-group/chip-group-root.svelte +129 -0
  362. package/src/chip-group/chip-group.meta.ts +19 -0
  363. package/src/chip-group/context.svelte.ts +11 -0
  364. package/src/chip-group/index.ts +26 -0
  365. package/src/chromatic-aberration/chromatic-aberration.meta.ts +7 -0
  366. package/src/chromatic-aberration/chromatic-aberration.svelte +87 -0
  367. package/src/chromatic-aberration/index.ts +10 -0
  368. package/src/chromatic-shift/chromatic-shift.meta.ts +7 -0
  369. package/src/chromatic-shift/chromatic-shift.svelte +226 -0
  370. package/src/chromatic-shift/index.ts +5 -0
  371. package/src/clipboard/clipboard.meta.ts +7 -0
  372. package/src/clipboard/clipboard.svelte +38 -0
  373. package/src/clipboard/index.ts +3 -0
  374. package/src/code-block/code-block-button.svelte +371 -0
  375. package/src/code-block/code-block.meta.ts +7 -0
  376. package/src/code-block/highlighter/css.ts +387 -0
  377. package/src/code-block/highlighter/generic.ts +24 -0
  378. package/src/code-block/highlighter/index.ts +30 -0
  379. package/src/code-block/highlighter/svelte.ts +597 -0
  380. package/src/code-block/highlighter/types.ts +7 -0
  381. package/src/code-block/index.ts +11 -0
  382. package/src/collapsible/collapsible-button-trigger.svelte +50 -0
  383. package/src/collapsible/collapsible-content.svelte +57 -0
  384. package/src/collapsible/collapsible-root.svelte +48 -0
  385. package/src/collapsible/collapsible.meta.ts +7 -0
  386. package/src/collapsible/context.svelte.ts +10 -0
  387. package/src/collapsible/index.ts +30 -0
  388. package/src/color-picker/color-picker-area.svelte +181 -0
  389. package/src/color-picker/color-picker-button-eyedropper.svelte +61 -0
  390. package/src/color-picker/color-picker-channel-input.svelte +85 -0
  391. package/src/color-picker/color-picker-input-alpha-slider.svelte +144 -0
  392. package/src/color-picker/color-picker-input-hue-slider.svelte +146 -0
  393. package/src/color-picker/color-picker-input.svelte +129 -0
  394. package/src/color-picker/color-picker-root.svelte +185 -0
  395. package/src/color-picker/color-picker-swatch.svelte +116 -0
  396. package/src/color-picker/color-picker.meta.ts +7 -0
  397. package/src/color-picker/context.svelte.ts +19 -0
  398. package/src/color-picker/index.ts +45 -0
  399. package/src/combobox/combobox-content.svelte +124 -0
  400. package/src/combobox/combobox-empty.svelte +23 -0
  401. package/src/combobox/combobox-group.svelte +35 -0
  402. package/src/combobox/combobox-input-root.svelte +109 -0
  403. package/src/combobox/combobox-input.svelte +348 -0
  404. package/src/combobox/combobox-item.svelte +150 -0
  405. package/src/combobox/combobox.meta.ts +7 -0
  406. package/src/combobox/context.svelte.ts +22 -0
  407. package/src/combobox/index.ts +44 -0
  408. package/src/command-palette/command-palette-dialog-root.svelte +184 -0
  409. package/src/command-palette/command-palette-empty.svelte +30 -0
  410. package/src/command-palette/command-palette-group.svelte +37 -0
  411. package/src/command-palette/command-palette-input.svelte +91 -0
  412. package/src/command-palette/command-palette-item.svelte +100 -0
  413. package/src/command-palette/command-palette-list.svelte +52 -0
  414. package/src/command-palette/command-palette-separator.svelte +17 -0
  415. package/src/command-palette/command-palette.meta.ts +7 -0
  416. package/src/command-palette/context.svelte.ts +19 -0
  417. package/src/command-palette/index.ts +35 -0
  418. package/src/container/container.meta.ts +7 -0
  419. package/src/container/container.svelte +66 -0
  420. package/src/container/index.ts +10 -0
  421. package/src/context-menu/context-menu-content.svelte +114 -0
  422. package/src/context-menu/context-menu-group.svelte +15 -0
  423. package/src/context-menu/context-menu-item.svelte +27 -0
  424. package/src/context-menu/context-menu-label.svelte +15 -0
  425. package/src/context-menu/context-menu-root.svelte +26 -0
  426. package/src/context-menu/context-menu-separator.svelte +10 -0
  427. package/src/context-menu/context-menu-trigger.svelte +35 -0
  428. package/src/context-menu/context-menu.meta.ts +7 -0
  429. package/src/context-menu/context.svelte.ts +7 -0
  430. package/src/context-menu/index.ts +35 -0
  431. package/src/data-grid/context.svelte.ts +28 -0
  432. package/src/data-grid/data-grid-body.svelte +17 -0
  433. package/src/data-grid/data-grid-button-expand-trigger.svelte +45 -0
  434. package/src/data-grid/data-grid-button-input-column.svelte +263 -0
  435. package/src/data-grid/data-grid-button-pagination.svelte +130 -0
  436. package/src/data-grid/data-grid-cell.svelte +37 -0
  437. package/src/data-grid/data-grid-expandable-row.svelte +58 -0
  438. package/src/data-grid/data-grid-header.svelte +21 -0
  439. package/src/data-grid/data-grid-input-select-all.svelte +52 -0
  440. package/src/data-grid/data-grid-input-select-cell.svelte +40 -0
  441. package/src/data-grid/data-grid-root.svelte +229 -0
  442. package/src/data-grid/data-grid-row.svelte +38 -0
  443. package/src/data-grid/data-grid-table.svelte +21 -0
  444. package/src/data-grid/data-grid.meta.ts +7 -0
  445. package/src/data-grid/index.ts +75 -0
  446. package/src/date-field/context.svelte.ts +50 -0
  447. package/src/date-field/date-field-input-root.svelte +284 -0
  448. package/src/date-field/date-field-segment.svelte +180 -0
  449. package/src/date-field/date-field-separator.svelte +25 -0
  450. package/src/date-field/date-field.meta.ts +7 -0
  451. package/src/date-field/index.ts +23 -0
  452. package/src/date-picker/context.svelte.ts +27 -0
  453. package/src/date-picker/date-picker.meta.ts +7 -0
  454. package/src/date-picker/datepicker-button-calendar.svelte +58 -0
  455. package/src/date-picker/datepicker-button-trigger.svelte +174 -0
  456. package/src/date-picker/datepicker-content.svelte +35 -0
  457. package/src/date-picker/datepicker-input-root.svelte +137 -0
  458. package/src/date-picker/index.ts +27 -0
  459. package/src/date-range-picker/context.svelte.ts +30 -0
  460. package/src/date-range-picker/date-range-picker-button-calendar.svelte +96 -0
  461. package/src/date-range-picker/date-range-picker-button-preset.svelte +25 -0
  462. package/src/date-range-picker/date-range-picker-button-trigger.svelte +188 -0
  463. package/src/date-range-picker/date-range-picker-content.svelte +35 -0
  464. package/src/date-range-picker/date-range-picker-root.svelte +155 -0
  465. package/src/date-range-picker/date-range-picker.meta.ts +7 -0
  466. package/src/date-range-picker/index.ts +30 -0
  467. package/src/date-time-input/date-time-input.meta.ts +7 -0
  468. package/src/date-time-input/date-time-input.svelte +104 -0
  469. package/src/date-time-input/index.ts +7 -0
  470. package/src/description-list/description-list-description.svelte +23 -0
  471. package/src/description-list/description-list-item.svelte +34 -0
  472. package/src/description-list/description-list-root.svelte +22 -0
  473. package/src/description-list/description-list-term.svelte +23 -0
  474. package/src/description-list/description-list.meta.ts +7 -0
  475. package/src/description-list/index.ts +35 -0
  476. package/src/diagram/diagram.meta.ts +8 -0
  477. package/src/diagram/diagram.svelte +966 -0
  478. package/src/diagram/edge-routing.ts +782 -0
  479. package/src/diagram/index.ts +23 -0
  480. package/src/diagram/layout.ts +2024 -0
  481. package/src/diagram/types.ts +262 -0
  482. package/src/dialog/context.svelte.ts +10 -0
  483. package/src/dialog/dialog-body.svelte +23 -0
  484. package/src/dialog/dialog-close.svelte +18 -0
  485. package/src/dialog/dialog-content.svelte +18 -0
  486. package/src/dialog/dialog-footer.svelte +35 -0
  487. package/src/dialog/dialog-header.svelte +26 -0
  488. package/src/dialog/dialog-overlay.svelte +28 -0
  489. package/src/dialog/dialog-root.svelte +31 -0
  490. package/src/dialog/dialog-trigger.svelte +56 -0
  491. package/src/dialog/dialog.meta.ts +7 -0
  492. package/src/dialog/index.ts +39 -0
  493. package/src/displacement/displacement.meta.ts +7 -0
  494. package/src/displacement/displacement.svelte +140 -0
  495. package/src/displacement/index.ts +5 -0
  496. package/src/drag-and-drop/context.svelte.ts +21 -0
  497. package/src/drag-and-drop/drag-and-drop-group.svelte +37 -0
  498. package/src/drag-and-drop/drag-and-drop-handle.svelte +106 -0
  499. package/src/drag-and-drop/drag-and-drop-item.svelte +151 -0
  500. package/src/drag-and-drop/drag-and-drop-root.svelte +876 -0
  501. package/src/drag-and-drop/drag-and-drop.meta.ts +7 -0
  502. package/src/drag-and-drop/group-context.svelte.ts +20 -0
  503. package/src/drag-and-drop/index.ts +34 -0
  504. package/src/drawer/context.svelte.ts +11 -0
  505. package/src/drawer/drawer-body.svelte +33 -0
  506. package/src/drawer/drawer-close.svelte +18 -0
  507. package/src/drawer/drawer-dialog-content.svelte +18 -0
  508. package/src/drawer/drawer-footer.svelte +27 -0
  509. package/{dist/card/card-footer.svelte → src/drawer/drawer-header.svelte} +8 -10
  510. package/src/drawer/drawer-overlay.svelte +34 -0
  511. package/src/drawer/drawer-root.svelte +35 -0
  512. package/src/drawer/drawer-trigger.svelte +56 -0
  513. package/src/drawer/drawer.meta.ts +7 -0
  514. package/src/drawer/index.ts +43 -0
  515. package/src/drop-zone/drop-zone.meta.ts +7 -0
  516. package/src/drop-zone/drop-zone.svelte +95 -0
  517. package/src/drop-zone/index.ts +6 -0
  518. package/src/dropdown-menu/context.svelte.ts +7 -0
  519. package/src/dropdown-menu/dropdown-menu-content.svelte +137 -0
  520. package/src/dropdown-menu/dropdown-menu-group.svelte +15 -0
  521. package/src/dropdown-menu/dropdown-menu-item.svelte +27 -0
  522. package/src/dropdown-menu/dropdown-menu-label.svelte +15 -0
  523. package/src/dropdown-menu/dropdown-menu-root.svelte +26 -0
  524. package/src/dropdown-menu/dropdown-menu-separator.svelte +10 -0
  525. package/src/dropdown-menu/dropdown-menu-trigger.svelte +65 -0
  526. package/src/dropdown-menu/dropdown-menu.meta.ts +7 -0
  527. package/src/dropdown-menu/index.ts +35 -0
  528. package/src/enter/enter.meta.ts +8 -0
  529. package/src/enter/index.ts +1 -0
  530. package/src/exit/exit.meta.ts +8 -0
  531. package/src/exit/index.ts +1 -0
  532. package/src/field/field-description.svelte +38 -0
  533. package/src/field/field-error.svelte +40 -0
  534. package/src/field/field-root.svelte +98 -0
  535. package/src/field/field.meta.ts +7 -0
  536. package/src/field/index.ts +15 -0
  537. package/src/fieldset/fieldset-content.svelte +21 -0
  538. package/src/fieldset/fieldset-description.svelte +26 -0
  539. package/src/fieldset/fieldset-legend.svelte +26 -0
  540. package/src/fieldset/fieldset-root.svelte +27 -0
  541. package/src/fieldset/fieldset.meta.ts +7 -0
  542. package/src/fieldset/index.ts +35 -0
  543. package/src/file-select/context.svelte.ts +10 -0
  544. package/src/file-select/file-select-button-clear.svelte +37 -0
  545. package/src/file-select/file-select-button-trigger.svelte +26 -0
  546. package/src/file-select/file-select-root.svelte +168 -0
  547. package/src/file-select/file-select-value.svelte +43 -0
  548. package/src/file-select/file-select.meta.ts +7 -0
  549. package/src/file-select/index.ts +29 -0
  550. package/src/file-upload/context.svelte.ts +17 -0
  551. package/src/file-upload/file-upload-button-item-delete.svelte +36 -0
  552. package/src/file-upload/file-upload-button-trigger.svelte +31 -0
  553. package/src/file-upload/file-upload-dropzone.svelte +145 -0
  554. package/src/file-upload/file-upload-input-root.svelte +144 -0
  555. package/src/file-upload/file-upload-item.svelte +63 -0
  556. package/src/file-upload/file-upload-list.svelte +37 -0
  557. package/src/file-upload/file-upload.meta.ts +7 -0
  558. package/src/file-upload/index.ts +52 -0
  559. package/src/flip-card/context.svelte.ts +8 -0
  560. package/src/flip-card/flip-card-back.svelte +34 -0
  561. package/src/flip-card/flip-card-front.svelte +25 -0
  562. package/src/flip-card/flip-card-root.svelte +116 -0
  563. package/src/flip-card/flip-card.meta.ts +7 -0
  564. package/src/flip-card/index.ts +15 -0
  565. package/src/float-button/context.svelte.ts +10 -0
  566. package/src/float-button/float-button-action.svelte +56 -0
  567. package/src/float-button/float-button-root.svelte +102 -0
  568. package/src/float-button/float-button-trigger.svelte +43 -0
  569. package/src/float-button/float-button.meta.ts +7 -0
  570. package/src/float-button/index.ts +29 -0
  571. package/src/focus-trap/focus-trap.meta.ts +7 -0
  572. package/src/focus-trap/focus-trap.svelte +16 -0
  573. package/src/focus-trap/index.ts +3 -0
  574. package/src/format-bytes/format-bytes.meta.ts +7 -0
  575. package/src/format-bytes/format-bytes.svelte +60 -0
  576. package/src/format-bytes/index.ts +3 -0
  577. package/src/format-date/format-date.meta.ts +7 -0
  578. package/src/format-date/format-date.svelte +80 -0
  579. package/src/format-date/index.ts +3 -0
  580. package/src/format-number/format-number.meta.ts +7 -0
  581. package/src/format-number/format-number.svelte +59 -0
  582. package/src/format-number/index.ts +3 -0
  583. package/src/gauge/gauge.meta.ts +7 -0
  584. package/src/gauge/gauge.svelte +143 -0
  585. package/src/gauge/index.ts +2 -0
  586. package/src/glass/glass.meta.ts +7 -0
  587. package/src/glass/glass.svelte +49 -0
  588. package/src/glass/index.ts +11 -0
  589. package/src/glow/glow.meta.ts +7 -0
  590. package/src/glow/glow.svelte +60 -0
  591. package/src/glow/index.ts +15 -0
  592. package/src/god-rays/god-rays.meta.ts +8 -0
  593. package/src/god-rays/god-rays.svelte +132 -0
  594. package/src/god-rays/index.ts +17 -0
  595. package/src/gradient-mesh/gradient-mesh.meta.ts +7 -0
  596. package/src/gradient-mesh/gradient-mesh.svelte +295 -0
  597. package/src/gradient-mesh/index.ts +5 -0
  598. package/src/halftone/halftone.meta.ts +7 -0
  599. package/src/halftone/halftone.svelte +93 -0
  600. package/src/halftone/index.ts +14 -0
  601. package/src/heading/heading.meta.ts +7 -0
  602. package/src/heading/heading.svelte +120 -0
  603. package/src/heading/index.ts +17 -0
  604. package/src/hotkey/hotkey.meta.ts +7 -0
  605. package/src/hotkey/index.ts +2 -0
  606. package/src/hover-card/context.svelte.ts +1 -0
  607. package/src/hover-card/hover-card-content.svelte +121 -0
  608. package/src/hover-card/hover-card-root.svelte +11 -0
  609. package/src/hover-card/hover-card-trigger.svelte +109 -0
  610. package/src/hover-card/hover-card.meta.ts +7 -0
  611. package/src/hover-card/index.ts +19 -0
  612. package/src/icon/icon.meta.ts +7 -0
  613. package/src/icon/icon.svelte +92 -0
  614. package/src/icon/index.ts +11 -0
  615. package/src/icon-swap/icon-swap.meta.ts +7 -0
  616. package/src/icon-swap/icon-swap.svelte +48 -0
  617. package/src/icon-swap/index.ts +1 -0
  618. package/src/image/image.meta.ts +7 -0
  619. package/src/image/image.svelte +73 -0
  620. package/src/image/index.ts +3 -0
  621. package/src/image-comparison/image-comparison.meta.ts +7 -0
  622. package/src/image-comparison/image-comparison.svelte +272 -0
  623. package/src/image-comparison/index.ts +3 -0
  624. package/src/index.ts +863 -0
  625. package/src/infinite-scroll/index.ts +3 -0
  626. package/src/infinite-scroll/infinite-scroll.meta.ts +7 -0
  627. package/src/infinite-scroll/infinite-scroll.svelte +109 -0
  628. package/src/input/index.ts +8 -0
  629. package/src/input/input.meta.ts +7 -0
  630. package/src/input/input.svelte +261 -0
  631. package/src/input-group/context.svelte.ts +9 -0
  632. package/src/input-group/index.ts +45 -0
  633. package/src/input-group/input-group-action-button.svelte +29 -0
  634. package/src/input-group/input-group-input.svelte +57 -0
  635. package/src/input-group/input-group-prefix.svelte +43 -0
  636. package/src/input-group/input-group-root.svelte +108 -0
  637. package/src/input-group/input-group-select.svelte +70 -0
  638. package/src/input-group/input-group-separator.svelte +38 -0
  639. package/src/input-group/input-group-suffix.svelte +43 -0
  640. package/src/input-group/input-group.meta.ts +8 -0
  641. package/src/internal/anchored-overlay-content.svelte.ts +42 -0
  642. package/src/internal/calendar-event-layout.ts +294 -0
  643. package/src/internal/calendar-grid-button.svelte +805 -0
  644. package/src/internal/calendar-grid-utils.ts +123 -0
  645. package/src/internal/close-button-base.svelte +35 -0
  646. package/src/internal/color-aliases.ts +37 -0
  647. package/src/internal/date-family-controller.svelte.ts +165 -0
  648. package/src/internal/form-control-wrapper-attrs.ts +20 -0
  649. package/src/internal/menu-group.svelte +15 -0
  650. package/src/internal/menu-item.svelte +89 -0
  651. package/src/internal/menu-label.svelte +24 -0
  652. package/src/internal/menu-root-state.svelte.ts +73 -0
  653. package/src/internal/menu-separator.svelte +19 -0
  654. package/src/internal/modal-content.svelte +351 -0
  655. package/src/internal/motion.ts +85 -0
  656. package/src/internal/nav-arrow-button.svelte +42 -0
  657. package/src/internal/picker-popover-content.svelte +111 -0
  658. package/src/kbd/index.ts +9 -0
  659. package/src/kbd/kbd.meta.ts +7 -0
  660. package/src/kbd/kbd.svelte +56 -0
  661. package/src/label/index.ts +7 -0
  662. package/src/label/label.meta.ts +7 -0
  663. package/src/label/label.svelte +74 -0
  664. package/src/link/index.ts +7 -0
  665. package/src/link/link.meta.ts +7 -0
  666. package/src/link/link.svelte +104 -0
  667. package/src/link-preview/context.svelte.ts +15 -0
  668. package/src/link-preview/index.ts +19 -0
  669. package/src/link-preview/link-preview-content.svelte +87 -0
  670. package/src/link-preview/link-preview-root.svelte +72 -0
  671. package/src/link-preview/link-preview-trigger.svelte +61 -0
  672. package/src/link-preview/link-preview.meta.ts +7 -0
  673. package/src/list/context.svelte.ts +7 -0
  674. package/src/list/index.ts +27 -0
  675. package/src/list/list-item-icon.svelte +22 -0
  676. package/src/list/list-item-text.svelte +42 -0
  677. package/src/list/list-item.svelte +116 -0
  678. package/src/list/list-root.svelte +71 -0
  679. package/src/list/list-subheader.svelte +25 -0
  680. package/src/list/list.meta.ts +7 -0
  681. package/src/listbox/context.svelte.ts +10 -0
  682. package/src/listbox/index.ts +12 -0
  683. package/src/listbox/listbox-item.svelte +90 -0
  684. package/src/listbox/listbox-root.svelte +115 -0
  685. package/src/listbox/listbox.meta.ts +7 -0
  686. package/src/logo-mark/index.ts +12 -0
  687. package/src/logo-mark/logo-mark.meta.ts +7 -0
  688. package/src/logo-mark/logo-mark.svelte +154 -0
  689. package/src/map/context.svelte.ts +19 -0
  690. package/src/map/index.ts +77 -0
  691. package/src/map/map-controls.svelte +68 -0
  692. package/src/map/map-layer.svelte +101 -0
  693. package/src/map/map-marker.svelte +83 -0
  694. package/src/map/map-popup.svelte +71 -0
  695. package/src/map/map-root.svelte +244 -0
  696. package/src/map/map.meta.ts +7 -0
  697. package/src/markdown-renderer/index.ts +4 -0
  698. package/src/markdown-renderer/markdown-renderer.meta.ts +7 -0
  699. package/src/markdown-renderer/markdown-renderer.svelte +202 -0
  700. package/src/marquee/index.ts +3 -0
  701. package/src/marquee/marquee.meta.ts +7 -0
  702. package/src/marquee/marquee.svelte +218 -0
  703. package/src/mask-reveal/index.ts +5 -0
  704. package/src/mask-reveal/mask-reveal.meta.ts +7 -0
  705. package/src/mask-reveal/mask-reveal.svelte +214 -0
  706. package/src/mega-menu/context.svelte.ts +17 -0
  707. package/src/mega-menu/index.ts +31 -0
  708. package/src/mega-menu/mega-menu-button-trigger.svelte +37 -0
  709. package/src/mega-menu/mega-menu-column.svelte +34 -0
  710. package/src/mega-menu/mega-menu-item.svelte +51 -0
  711. package/src/mega-menu/mega-menu-link.svelte +137 -0
  712. package/src/mega-menu/mega-menu-panel.svelte +134 -0
  713. package/src/mega-menu/mega-menu-root.svelte +98 -0
  714. package/src/mega-menu/mega-menu.meta.ts +7 -0
  715. package/src/menubar/context.svelte.ts +24 -0
  716. package/src/menubar/index.ts +35 -0
  717. package/src/menubar/menubar-button-trigger.svelte +75 -0
  718. package/src/menubar/menubar-content.svelte +147 -0
  719. package/src/menubar/menubar-item.svelte +96 -0
  720. package/{dist/card/card-header.svelte → src/menubar/menubar-label.svelte} +6 -10
  721. package/src/menubar/menubar-menu.svelte +32 -0
  722. package/src/menubar/menubar-root.svelte +78 -0
  723. package/src/menubar/menubar-separator.svelte +17 -0
  724. package/src/menubar/menubar.meta.ts +7 -0
  725. package/src/motion/enter.svelte +29 -0
  726. package/src/motion/enter.ts +46 -0
  727. package/src/motion/exit.svelte +21 -0
  728. package/src/motion/index.ts +7 -0
  729. package/src/motion/leave.ts +41 -0
  730. package/src/motion/motion.meta.ts +8 -0
  731. package/src/motion/stagger.svelte +30 -0
  732. package/src/multi-select-combobox/context.svelte.ts +31 -0
  733. package/src/multi-select-combobox/index.ts +43 -0
  734. package/src/multi-select-combobox/multi-select-combobox-content.svelte +118 -0
  735. package/src/multi-select-combobox/multi-select-combobox-empty.svelte +28 -0
  736. package/src/multi-select-combobox/multi-select-combobox-group.svelte +33 -0
  737. package/src/multi-select-combobox/multi-select-combobox-input.svelte +161 -0
  738. package/src/multi-select-combobox/multi-select-combobox-item.svelte +140 -0
  739. package/src/multi-select-combobox/multi-select-combobox-root-input.svelte +286 -0
  740. package/src/multi-select-combobox/multi-select-combobox-selection-item.svelte +63 -0
  741. package/src/multi-select-combobox/multi-select-combobox-selection-list.svelte +29 -0
  742. package/src/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte +36 -0
  743. package/src/multi-select-combobox/multi-select-combobox.meta.ts +7 -0
  744. package/src/navigation-menu/context.svelte.ts +18 -0
  745. package/src/navigation-menu/index.ts +50 -0
  746. package/src/navigation-menu/navigation-menu-content.svelte +55 -0
  747. package/src/navigation-menu/navigation-menu-item.svelte +35 -0
  748. package/src/navigation-menu/navigation-menu-link.svelte +49 -0
  749. package/src/navigation-menu/navigation-menu-list.svelte +47 -0
  750. package/src/navigation-menu/navigation-menu-root.svelte +46 -0
  751. package/src/navigation-menu/navigation-menu-trigger-button.svelte +62 -0
  752. package/src/navigation-menu/navigation-menu.meta.ts +7 -0
  753. package/src/noise/index.ts +15 -0
  754. package/src/noise/noise.meta.ts +7 -0
  755. package/src/noise/noise.svelte +179 -0
  756. package/src/notification-center/context.svelte.ts +24 -0
  757. package/src/notification-center/index.ts +28 -0
  758. package/src/notification-center/notification-center-group.svelte +30 -0
  759. package/src/notification-center/notification-center-item.svelte +70 -0
  760. package/src/notification-center/notification-center-panel.svelte +162 -0
  761. package/src/notification-center/notification-center-root.svelte +73 -0
  762. package/src/notification-center/notification-center-trigger-button.svelte +28 -0
  763. package/src/notification-center/notification-center.meta.ts +7 -0
  764. package/src/number-input/index.ts +7 -0
  765. package/src/number-input/number-input-button.svelte +222 -0
  766. package/src/number-input/number-input.meta.ts +7 -0
  767. package/src/numeric/index.ts +1 -0
  768. package/src/numeric/numeric.meta.ts +7 -0
  769. package/src/numeric/numeric.svelte +64 -0
  770. package/src/option-picker/context.svelte.ts +11 -0
  771. package/src/option-picker/index.ts +52 -0
  772. package/src/option-picker/option-picker-description.svelte +25 -0
  773. package/src/option-picker/option-picker-item.svelte +242 -0
  774. package/src/option-picker/option-picker-label.svelte +24 -0
  775. package/src/option-picker/option-picker-meta.svelte +24 -0
  776. package/src/option-picker/option-picker-preview.svelte +164 -0
  777. package/src/option-picker/option-picker-root.svelte +82 -0
  778. package/src/option-picker/option-picker.meta.ts +8 -0
  779. package/src/pagination/context.svelte.ts +12 -0
  780. package/src/pagination/index.ts +35 -0
  781. package/src/pagination/pagination-content.svelte +27 -0
  782. package/src/pagination/pagination-ellipsis.svelte +19 -0
  783. package/src/pagination/pagination-item.svelte +14 -0
  784. package/src/pagination/pagination-link-button.svelte +28 -0
  785. package/src/pagination/pagination-nav-button.svelte +28 -0
  786. package/src/pagination/pagination-next-button.svelte +13 -0
  787. package/src/pagination/pagination-previous-button.svelte +13 -0
  788. package/src/pagination/pagination-root.svelte +48 -0
  789. package/src/pagination/pagination.meta.ts +7 -0
  790. package/src/phone-input/index.ts +9 -0
  791. package/src/phone-input/phone-input-select.svelte +286 -0
  792. package/src/phone-input/phone-input.meta.ts +7 -0
  793. package/src/pin-input/context.svelte.ts +18 -0
  794. package/src/pin-input/index.ts +31 -0
  795. package/src/pin-input/pin-input-cell.svelte +117 -0
  796. package/src/pin-input/pin-input-group.svelte +24 -0
  797. package/src/pin-input/pin-input-root.svelte +315 -0
  798. package/src/pin-input/pin-input-separator.svelte +28 -0
  799. package/src/pin-input/pin-input.meta.ts +7 -0
  800. package/src/popover/context.svelte.ts +13 -0
  801. package/src/popover/index.ts +15 -0
  802. package/src/popover/popover-content.svelte +112 -0
  803. package/src/popover/popover-root.svelte +39 -0
  804. package/src/popover/popover-trigger.svelte +62 -0
  805. package/src/popover/popover.meta.ts +7 -0
  806. package/src/portal/index.ts +3 -0
  807. package/src/portal/portal.meta.ts +7 -0
  808. package/src/portal/portal.svelte +14 -0
  809. package/src/progress/index.ts +14 -0
  810. package/src/progress/progress.meta.ts +7 -0
  811. package/src/progress/progress.svelte +302 -0
  812. package/src/progress-ring/index.ts +8 -0
  813. package/src/progress-ring/progress-ring.meta.ts +7 -0
  814. package/src/progress-ring/progress-ring.svelte +169 -0
  815. package/src/prompt-input/index.ts +16 -0
  816. package/src/prompt-input/prompt-input-button-textarea.svelte +171 -0
  817. package/src/prompt-input/prompt-input.meta.ts +7 -0
  818. package/src/qr-code/index.ts +3 -0
  819. package/src/qr-code/qr-code.meta.ts +7 -0
  820. package/src/qr-code/qr-code.svelte +149 -0
  821. package/src/radio-group/context.svelte.ts +10 -0
  822. package/src/radio-group/index.ts +12 -0
  823. package/src/radio-group/radio-group-item-input.svelte +197 -0
  824. package/src/radio-group/radio-group.meta.ts +7 -0
  825. package/src/radio-group/radio-group.svelte +117 -0
  826. package/src/range-calendar/context.svelte.ts +22 -0
  827. package/src/range-calendar/index.ts +16 -0
  828. package/src/range-calendar/range-calendar-grid-button.svelte +77 -0
  829. package/src/range-calendar/range-calendar-root.svelte +146 -0
  830. package/src/range-calendar/range-calendar.meta.ts +7 -0
  831. package/src/rating/index.ts +7 -0
  832. package/src/rating/rating-button-input.svelte +265 -0
  833. package/src/rating/rating.meta.ts +7 -0
  834. package/src/relative-time/index.ts +3 -0
  835. package/src/relative-time/relative-time.meta.ts +7 -0
  836. package/src/relative-time/relative-time.svelte +71 -0
  837. package/src/reveal/index.ts +7 -0
  838. package/src/reveal/reveal.meta.ts +8 -0
  839. package/src/reveal/reveal.svelte +190 -0
  840. package/src/rich-text-editor/index.ts +19 -0
  841. package/src/rich-text-editor/rich-text-editor-content.svelte +184 -0
  842. package/src/rich-text-editor/rich-text-editor-root.svelte +213 -0
  843. package/src/rich-text-editor/rich-text-editor-toolbar-button-input.svelte +541 -0
  844. package/src/rich-text-editor/rich-text-editor.meta.ts +7 -0
  845. package/src/scroll-area/index.ts +3 -0
  846. package/src/scroll-area/scroll-area.meta.ts +7 -0
  847. package/src/scroll-area/scroll-area.svelte +85 -0
  848. package/src/scroll-to-top/index.ts +8 -0
  849. package/src/scroll-to-top/scroll-to-top-button.svelte +89 -0
  850. package/src/scroll-to-top/scroll-to-top.meta.ts +7 -0
  851. package/src/segmented-control/context.svelte.ts +10 -0
  852. package/src/segmented-control/index.ts +12 -0
  853. package/src/segmented-control/segmented-control-item-button.svelte +37 -0
  854. package/src/segmented-control/segmented-control-root.svelte +125 -0
  855. package/src/segmented-control/segmented-control.meta.ts +7 -0
  856. package/src/select/context.svelte.ts +17 -0
  857. package/src/select/index.ts +33 -0
  858. package/src/select/select-content.svelte +202 -0
  859. package/src/select/select-item.svelte +118 -0
  860. package/src/select/select-root-input.svelte +105 -0
  861. package/src/select/select-trigger-button.svelte +183 -0
  862. package/src/select/select-value.svelte +27 -0
  863. package/src/select/select.meta.ts +7 -0
  864. package/src/separator/index.ts +9 -0
  865. package/src/separator/separator.meta.ts +7 -0
  866. package/src/separator/separator.svelte +70 -0
  867. package/src/shader-canvas/index.ts +28 -0
  868. package/src/shader-canvas/presets.ts +212 -0
  869. package/src/shader-canvas/shader-canvas.meta.ts +7 -0
  870. package/src/shader-canvas/shader-canvas.svelte +115 -0
  871. package/src/shimmer/index.ts +10 -0
  872. package/src/shimmer/shimmer.meta.ts +7 -0
  873. package/src/shimmer/shimmer.svelte +125 -0
  874. package/src/sidebar/context.svelte.ts +10 -0
  875. package/src/sidebar/index.ts +66 -0
  876. package/src/sidebar/sidebar-content.svelte +43 -0
  877. package/src/sidebar/sidebar-footer.svelte +28 -0
  878. package/src/sidebar/sidebar-group-label.svelte +45 -0
  879. package/src/sidebar/sidebar-group.svelte +29 -0
  880. package/src/sidebar/sidebar-header.svelte +34 -0
  881. package/src/sidebar/sidebar-item.svelte +57 -0
  882. package/src/sidebar/sidebar-root.svelte +76 -0
  883. package/src/sidebar/sidebar-trigger-button.svelte +29 -0
  884. package/src/sidebar/sidebar.meta.ts +7 -0
  885. package/src/skeleton/index.ts +9 -0
  886. package/src/skeleton/skeleton.meta.ts +7 -0
  887. package/src/skeleton/skeleton.svelte +97 -0
  888. package/src/slider/index.ts +12 -0
  889. package/src/slider/slider-input.svelte +277 -0
  890. package/src/slider/slider.meta.ts +7 -0
  891. package/src/spacer/index.ts +8 -0
  892. package/src/spacer/spacer.meta.ts +7 -0
  893. package/src/spacer/spacer.svelte +84 -0
  894. package/src/sparkline/index.ts +3 -0
  895. package/src/sparkline/sparkline.meta.ts +7 -0
  896. package/src/sparkline/sparkline.svelte +113 -0
  897. package/src/spinner/index.ts +9 -0
  898. package/src/spinner/spinner.meta.ts +7 -0
  899. package/src/spinner/spinner.svelte +110 -0
  900. package/src/splitter/context.svelte.ts +11 -0
  901. package/src/splitter/index.ts +15 -0
  902. package/src/splitter/splitter-handle.svelte +171 -0
  903. package/src/splitter/splitter-panel.svelte +28 -0
  904. package/src/splitter/splitter-root.svelte +128 -0
  905. package/src/splitter/splitter.meta.ts +7 -0
  906. package/src/spotlight/index.ts +5 -0
  907. package/src/spotlight/spotlight.meta.ts +8 -0
  908. package/src/spotlight/spotlight.svelte +249 -0
  909. package/src/stagger/index.ts +1 -0
  910. package/src/stagger/stagger.meta.ts +8 -0
  911. package/src/star-rating/index.ts +16 -0
  912. package/src/star-rating/star-rating-root.svelte +109 -0
  913. package/src/star-rating/star-rating.meta.ts +7 -0
  914. package/src/stepper/context.svelte.ts +9 -0
  915. package/src/stepper/index.ts +23 -0
  916. package/src/stepper/stepper-list.svelte +37 -0
  917. package/src/stepper/stepper-root.svelte +51 -0
  918. package/src/stepper/stepper-separator.svelte +45 -0
  919. package/src/stepper/stepper-step-button.svelte +113 -0
  920. package/src/stepper/stepper.meta.ts +7 -0
  921. package/src/svg/index.ts +5 -0
  922. package/src/svg/svg.meta.ts +7 -0
  923. package/src/svg/svg.svelte +19 -0
  924. package/src/table/index.ts +39 -0
  925. package/src/table/table-body.svelte +14 -0
  926. package/src/table/table-caption.svelte +25 -0
  927. package/src/table/table-cell.svelte +24 -0
  928. package/src/table/table-footer.svelte +21 -0
  929. package/src/table/table-head.svelte +26 -0
  930. package/src/table/table-header.svelte +21 -0
  931. package/src/table/table-root.svelte +64 -0
  932. package/src/table/table-row.svelte +28 -0
  933. package/src/table/table.meta.ts +7 -0
  934. package/src/table-of-contents/context.svelte.ts +14 -0
  935. package/src/table-of-contents/index.ts +20 -0
  936. package/src/table-of-contents/table-of-contents-item.svelte +86 -0
  937. package/src/table-of-contents/table-of-contents-list.svelte +87 -0
  938. package/src/table-of-contents/table-of-contents-root.svelte +88 -0
  939. package/src/table-of-contents/table-of-contents.meta.ts +7 -0
  940. package/src/tabs/context.svelte.ts +16 -0
  941. package/src/tabs/index.ts +43 -0
  942. package/src/tabs/tabs-content.svelte +42 -0
  943. package/src/tabs/tabs-list.svelte +102 -0
  944. package/src/tabs/tabs-root.svelte +59 -0
  945. package/src/tabs/tabs-trigger-button.svelte +41 -0
  946. package/src/tabs/tabs.meta.ts +7 -0
  947. package/src/tag/index.ts +12 -0
  948. package/src/tag/tag-button.svelte +250 -0
  949. package/src/tag/tag.meta.ts +7 -0
  950. package/src/tags-input/context.svelte.ts +13 -0
  951. package/src/tags-input/index.ts +32 -0
  952. package/src/tags-input/tags-input-input.svelte +85 -0
  953. package/src/tags-input/tags-input-list.svelte +20 -0
  954. package/src/tags-input/tags-input-root.svelte +136 -0
  955. package/src/tags-input/tags-input-tag-delete-button.svelte +31 -0
  956. package/src/tags-input/tags-input-tag.svelte +61 -0
  957. package/src/tags-input/tags-input.meta.ts +7 -0
  958. package/src/text/index.ts +20 -0
  959. package/src/text/text.meta.ts +7 -0
  960. package/src/text/text.svelte +150 -0
  961. package/src/textarea/index.ts +7 -0
  962. package/src/textarea/textarea.meta.ts +7 -0
  963. package/src/textarea/textarea.svelte +210 -0
  964. package/src/theme-toggle/index.ts +30 -0
  965. package/src/theme-toggle/theme-controller.svelte.ts +171 -0
  966. package/src/theme-toggle/theme-flash.ts +39 -0
  967. package/src/theme-toggle/theme-toggle.meta.ts +7 -0
  968. package/src/theme-toggle/theme-toggle.svelte +199 -0
  969. package/src/themes/aurora.css +291 -0
  970. package/src/themes/component-defaults.css +47 -0
  971. package/src/themes/dark.css +377 -0
  972. package/src/themes/default.css +643 -0
  973. package/src/themes/midnight.css +177 -0
  974. package/src/themes/terminal.css +191 -0
  975. package/src/themes/token-scope.ts +1 -0
  976. package/src/time-input/index.ts +14 -0
  977. package/src/time-input/time-input.meta.ts +7 -0
  978. package/src/time-input/time-input.svelte +157 -0
  979. package/src/timeline/index.ts +40 -0
  980. package/src/timeline/timeline-content.svelte +22 -0
  981. package/src/timeline/timeline-description.svelte +22 -0
  982. package/src/timeline/timeline-icon.svelte +41 -0
  983. package/src/timeline/timeline-item.svelte +57 -0
  984. package/src/timeline/timeline-root.svelte +43 -0
  985. package/src/timeline/timeline-time.svelte +22 -0
  986. package/src/timeline/timeline-title.svelte +55 -0
  987. package/src/timeline/timeline.meta.ts +7 -0
  988. package/src/toast/context.svelte.ts +7 -0
  989. package/src/toast/index.ts +33 -0
  990. package/src/toast/toast-action-button.svelte +16 -0
  991. package/src/toast/toast-close-button.svelte +35 -0
  992. package/src/toast/toast-description.svelte +24 -0
  993. package/src/toast/toast-provider.svelte +120 -0
  994. package/src/toast/toast-root.svelte +169 -0
  995. package/src/toast/toast-title.svelte +25 -0
  996. package/src/toast/toast.meta.ts +7 -0
  997. package/src/toggle/index.ts +9 -0
  998. package/src/toggle/toggle-button.svelte +218 -0
  999. package/src/toggle/toggle.meta.ts +7 -0
  1000. package/src/toggle-group/context.svelte.ts +12 -0
  1001. package/src/toggle-group/index.ts +18 -0
  1002. package/src/toggle-group/toggle-group-item-button.svelte +36 -0
  1003. package/src/toggle-group/toggle-group-root.svelte +106 -0
  1004. package/src/toggle-group/toggle-group.meta.ts +7 -0
  1005. package/src/token-scope/index.ts +8 -0
  1006. package/src/token-scope/token-scope.meta.ts +7 -0
  1007. package/src/toolbar/context.svelte.ts +6 -0
  1008. package/src/toolbar/index.ts +23 -0
  1009. package/src/toolbar/toolbar-button.svelte +16 -0
  1010. package/src/toolbar/toolbar-link.svelte +46 -0
  1011. package/src/toolbar/toolbar-root.svelte +100 -0
  1012. package/src/toolbar/toolbar-separator.svelte +33 -0
  1013. package/src/toolbar/toolbar.meta.ts +7 -0
  1014. package/src/tooltip/context.svelte.ts +14 -0
  1015. package/src/tooltip/index.ts +15 -0
  1016. package/src/tooltip/tooltip-content.svelte +106 -0
  1017. package/src/tooltip/tooltip-root.svelte +73 -0
  1018. package/src/tooltip/tooltip-trigger.svelte +74 -0
  1019. package/src/tooltip/tooltip.meta.ts +7 -0
  1020. package/src/tour/index.ts +12 -0
  1021. package/src/tour/tour-root.css +215 -0
  1022. package/src/tour/tour-root.css.d.ts +2 -0
  1023. package/src/tour/tour-root.svelte +19 -0
  1024. package/src/tour/tour-tooltip-button.svelte +48 -0
  1025. package/src/tour/tour.meta.ts +7 -0
  1026. package/src/transfer/context.svelte.ts +31 -0
  1027. package/src/transfer/index.ts +29 -0
  1028. package/src/transfer/transfer-actions-button.svelte +91 -0
  1029. package/src/transfer/transfer-item.svelte +35 -0
  1030. package/src/transfer/transfer-list-input.svelte +204 -0
  1031. package/src/transfer/transfer-root.svelte +145 -0
  1032. package/src/transfer/transfer.meta.ts +7 -0
  1033. package/src/tree/context.svelte.ts +24 -0
  1034. package/src/tree/index.ts +23 -0
  1035. package/src/tree/tree-item-children.svelte +51 -0
  1036. package/src/tree/tree-item-label.svelte +56 -0
  1037. package/src/tree/tree-item.svelte +63 -0
  1038. package/src/tree/tree-root.svelte +246 -0
  1039. package/src/tree/tree.meta.ts +7 -0
  1040. package/src/typing-indicator/index.ts +5 -0
  1041. package/src/typing-indicator/typing-indicator.meta.ts +7 -0
  1042. package/src/typing-indicator/typing-indicator.svelte +72 -0
  1043. package/src/typography/blockquote.svelte +24 -0
  1044. package/src/typography/code.svelte +25 -0
  1045. package/src/typography/heading.svelte +17 -0
  1046. package/src/typography/index.ts +30 -0
  1047. package/src/typography/text.svelte +25 -0
  1048. package/src/typography/typography.meta.ts +7 -0
  1049. package/src/video-embed/index.ts +3 -0
  1050. package/src/video-embed/video-embed-button.svelte +177 -0
  1051. package/src/video-embed/video-embed.meta.ts +7 -0
  1052. package/src/virtual-list/index.ts +3 -0
  1053. package/src/virtual-list/virtual-list.meta.ts +7 -0
  1054. package/src/virtual-list/virtual-list.svelte +239 -0
  1055. package/src/visually-hidden/index.ts +8 -0
  1056. package/src/visually-hidden/visually-hidden.meta.ts +7 -0
  1057. package/src/visually-hidden/visually-hidden.svelte +28 -0
  1058. package/dist/card/card-content.svelte +0 -32
  1059. package/dist/card/card-content.svelte.d.ts +0 -9
  1060. package/dist/card/card-footer.svelte.d.ts +0 -8
  1061. package/dist/card/card-header.svelte.d.ts +0 -8
  1062. package/dist/card/card-root.svelte +0 -184
  1063. package/dist/card/card-root.svelte.d.ts +0 -15
  1064. package/dist/card/card.meta.js +0 -7
  1065. package/dist/card/index.d.ts +0 -31
  1066. package/dist/card/index.js +0 -10
  1067. package/skills/dryui/SKILL.md +0 -306
  1068. package/skills/dryui/agents/openai.yaml +0 -10
  1069. package/skills/dryui/rules/accessibility.md +0 -215
  1070. package/skills/dryui/rules/composition.md +0 -500
  1071. package/skills/dryui/rules/compound-components.md +0 -312
  1072. package/skills/dryui/rules/native-web-transitions.md +0 -99
  1073. package/skills/dryui/rules/svelte.md +0 -234
  1074. package/skills/dryui/rules/theming.md +0 -305
  1075. /package/dist/{card/card.meta.d.ts → token-scope/token-scope.meta.d.ts} +0 -0
@@ -1,306 +0,0 @@
1
- ---
2
- name: dryui
3
- description: 'Use when building UIs with DryUI (@dryui/ui) Svelte 5 components. Teaches correct patterns for compound components, theming, forms, and accessibility. Use the CLI as the default entry point; MCP mirrors the same workflow when available.'
4
- ---
5
-
6
- # DryUI
7
-
8
- Zero-dependency Svelte 5 components. All imports from `@dryui/ui`. Requires a theme CSS import. Svelte 5 runes only.
9
-
10
- **Tradeoff:** These rules bias toward correctness over speed. For throwaway prototypes, use judgment.
11
-
12
- ## UI Creation Pipeline
13
-
14
- DryUI work is explicit. Confirm contracts, build, then validate.
15
-
16
- 1. **User brief** — one line capturing what you are building and for whom.
17
- 2. **DryUI lookup/plan** — use `dryui ask` or MCP `ask` to confirm component contracts, tokens, recipes, and accessibility notes before choosing components.
18
- 3. **Implementation** — build with DryUI components, Svelte 5 runes, grid layout, `--dry-*` tokens, and accessible composition.
19
- 4. **Deterministic check** — run `dryui check [path]` or MCP `check` to catch contract drift, accessibility regressions, token drift, and CSS discipline violations.
20
-
21
- ## Design guidance, critique, polish
22
-
23
- DryUI is zero-dependency components + tokens + contracts. It deliberately does NOT ship design opinion. For design-quality flows like brief, critique, polish, visual review, or anti-pattern detection, use [impeccable](https://impeccable.style), which is installed alongside DryUI by `dryui init` or via `npx impeccable skills install`.
24
-
25
- Invoke from your AI harness:
26
-
27
- - `/impeccable teach` — one-time: scaffold `PRODUCT.md` + `DESIGN.md`
28
- - `/impeccable craft` — design-then-build a feature
29
- - `/impeccable shape` — plan UX/UI before writing code
30
- - `/impeccable critique <target>` — UX design review
31
- - `/impeccable audit <target>` — a11y, performance, responsive checks
32
- - `/impeccable polish <target>` — final pass before shipping
33
- - Full catalog: https://impeccable.style/cheatsheet
34
-
35
- `PRODUCT.md` and `DESIGN.md` at the project root are impeccable-owned. DryUI tools do not read or write them. Anti-pattern detection: `npx impeccable detect <path-or-url>`.
36
-
37
- ## 1. Look Up Before You Write
38
-
39
- **Never guess a component API. Always verify first.**
40
-
41
- - Call `dryui ask --scope component "<Component>"` or `dryui ask --scope recipe "<pattern>"` before using any component for the first time. MCP `ask` is the equivalent surface.
42
- - Component APIs vary. `bind:value`, `bind:open`, `bind:checked` are NOT interchangeable.
43
- - Compound vs simple, required parts, available props — all differ per component.
44
- - If you skip the lookup, you'll write plausible-looking code that silently breaks.
45
-
46
- The test: can you point to a `dryui ask` or MCP `ask` call for every component or pattern in your output?
47
-
48
- ## 2. Everything is Compound Until Proven Otherwise
49
-
50
- **Use `.Root`. Always check.**
51
-
52
- Most DryUI components are compound. They require `<Card.Root>`, not `<Card>`. The bare name silently fails or renders wrong. Assume compound, verify with `ask --scope component`.
53
-
54
- ```svelte
55
- <!-- Wrong -->
56
- <Card>content</Card>
57
- <!-- Right -->
58
- <Card.Root>content</Card.Root>
59
- ```
60
-
61
- Compound components are tracked in the manifest at `packages/mcp/src/component-catalog.ts`. Verify with `ask --scope component` before you assume a bare name works, then use `.Root` and wrap the parts inside it.
62
-
63
- The test: every compound component in your markup uses `.Root`, and its parts are wrapped inside it. See `rules/compound-components.md` for the parts reference.
64
-
65
- ## 3. Let the Theme Do Its Job
66
-
67
- **Import it. Use its tokens. Don't fight it.**
68
-
69
- - Import `@dryui/ui/themes/default.css` (and `dark.css`) before any component use.
70
- - Use `--dry-color-*` and `--dry-space-*` tokens. Never hardcode colors or spacing.
71
- - Don't add decorative CSS (gradients, shadows, colored borders). The theme handles appearance.
72
- - Override semantic tokens (Tier 2) in `:root`, not component tokens (Tier 3).
73
- - Prefer `<html class="theme-auto">`. Use `data-theme="light|dark"` only for explicit overrides.
74
-
75
- ```css
76
- /* Wrong */
77
- .card {
78
- background: #6366f1;
79
- color: white;
80
- }
81
-
82
- /* Right */
83
- .card {
84
- background: var(--dry-color-fill-brand);
85
- color: var(--dry-color-text-strong);
86
- }
87
- ```
88
-
89
- The test: does your CSS contain zero hex colors, zero `rgb()` values, and zero inline styles?
90
-
91
- Theming precedence beats design opinion. If impeccable guidance conflicts with DryUI theme contracts, tokens, or accessibility rules, DryUI wins.
92
-
93
- ## 4. Grid for Layout. Container for Width. @container for Responsive.
94
-
95
- **Nothing else.**
96
-
97
- - All layout is `display: grid` with `--dry-space-*` tokens in scoped `<style>`.
98
- - `Container` (simple component, no `.Root`) for constrained content width.
99
- - Use `@container` queries for responsive sizing. Never `@media` for layout breakpoints.
100
- - No flexbox. No inline styles. No `width`/`min-width`/`max-width` properties.
101
-
102
- ```svelte
103
- <div class="layout">...</div>
104
-
105
- <style>
106
- .layout {
107
- display: grid;
108
- gap: var(--dry-space-4);
109
- }
110
- </style>
111
- ```
112
-
113
- The test: grep your output for `display: flex`, `style=`, `@media`. All should return nothing.
114
-
115
- ## 4A. Escape Hatches Mean Stop.
116
-
117
- **If lint or the compiler pushes you toward an escape hatch, the structure is usually wrong.**
118
-
119
- - Never add `:global()`, `!important`, `all: unset`, `<svelte:element>`, or `<!-- svelte-ignore ... -->` just to make a selector or warning go away.
120
- - Never add `width`, `min-width`, `max-width`, `inline-size`, `min-inline-size`, or `max-inline-size` to solve layout pressure.
121
- - Never use raw native elements outside their canonical DryUI component directories just because composition feels inconvenient.
122
- - Never pass `class=` to DryUI components expecting it to style their internals. Use wrapper elements, component props, `data-*` attributes, or `--dry-*` tokens instead.
123
- - When blocked, restructure the markup instead: add a local wrapper, split explicit `{#if}` branches, move sizing to parent grid tracks, or promote the pattern into the canonical component where the raw element belongs.
124
- - Treat `dryui/no-global`, `dryui/no-important`, `dryui/no-width`, `dryui/no-raw-native-element`, `dryui/no-css-ignore`, and `dryui/no-svelte-element` as design feedback, not obstacles to suppress.
125
-
126
- The test: grep your output for `:global(`, `!important`, `all: unset`, `svelte-ignore`, `svelte:element`, raw `<button`, raw `<input`, raw `<select`, raw `<dialog`, raw `<hr`, raw `<table`, and `width:`. All should return nothing unless you are editing the canonical component that owns that native element.
127
-
128
- ## 5. Every Input Gets a Field.Root
129
-
130
- **Accessibility isn't optional.**
131
-
132
- - Wrap every form input in `Field.Root` with a `Label`.
133
- - Use `AlertDialog` (not `Dialog`) for destructive confirmations.
134
- - Add `aria-label` to every icon-only button.
135
- - Use `type="submit"` on primary form action buttons.
136
-
137
- ```svelte
138
- <!-- Wrong -->
139
- <label>Email</label>
140
- <Input bind:value={email} />
141
-
142
- <!-- Right -->
143
- <Field.Root>
144
- <Label>Email</Label>
145
- <Input bind:value={email} />
146
- </Field.Root>
147
- ```
148
-
149
- The test: every `<Input>`, `<Select.Root>`, `<Textarea>` is inside a `Field.Root` with a `Label` sibling.
150
-
151
- ## 6. Prefer DryUI Over Native HTML
152
-
153
- **If a DryUI component exists for it, use it.**
154
-
155
- `DatePicker` not `<input type="date">`. `Select.Root` not `<select>`. `Dialog.Root` not `<dialog>`. `Separator` not `<hr>`. `Button` not `<button>`. DryUI components handle theming and accessibility automatically. Native elements don't.
156
-
157
- The test: search your markup for raw `<input`, `<select>`, `<dialog>`, `<button>`, `<hr>`, `<table>`. Each should be a DryUI component instead.
158
-
159
- ## 7. Ask the Svelte MCP for Svelte Questions
160
-
161
- **DryUI owns components. `@sveltejs/mcp` owns the framework.**
162
-
163
- For Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`), snippets, SvelteKit load fns, `+page.server.ts` shape, form actions, and anything Svelte-syntax adjacent: call the official `svelte-autofixer` and `get-documentation` tools from `@sveltejs/mcp` before guessing from memory.
164
-
165
- - `dryui setup --install` registers `@sveltejs/mcp` by default. Pass `--no-svelte-mcp` to skip.
166
- - If it's not registered, the fallback is the remote endpoint `https://mcp.svelte.dev/mcp` or a one-liner like `claude mcp add -t stdio -s user svelte -- npx -y @sveltejs/mcp`.
167
- - Scope split: DryUI `ask`/`check` cover component APIs, theming, composition, and validation. Svelte MCP covers the runtime, compiler, and framework idioms.
168
-
169
- The test: before writing non-trivial Svelte 5 or SvelteKit code, did you either (a) call `svelte-autofixer` / `get-documentation`, or (b) confirm the pattern is already covered by a DryUI recipe via `ask --scope recipe`?
170
-
171
- ## Quick Start
172
-
173
- **1. Install the CLI** so every subsequent command is short and fast:
174
-
175
- ```bash
176
- bun install -g @dryui/cli@latest # or: npm install -g @dryui/cli@latest
177
- ```
178
-
179
- **2. Start with bare `dryui`** when you want editor integration and feedback:
180
-
181
- ```bash
182
- dryui
183
- ```
184
-
185
- **3. Bootstrap or inspect the project** with the CLI:
186
-
187
- ```bash
188
- dryui init # existing project
189
- dryui init my-app # new project, scaffolds SvelteKit + DryUI in one step
190
- cd my-app && bun run dev
191
- ```
192
-
193
- This works for greenfield (empty directory), brownfield (existing non-SvelteKit project), and existing SvelteKit projects. On existing projects, `dryui install` prints the ordered plan and `dryui detect` verifies that setup is complete.
194
-
195
- > **No global install?** `bunx @dryui/cli <cmd>` and `npx -y @dryui/cli <cmd>` work anywhere without installing. Same commands, just slower (re-fetches on each call).
196
-
197
- **4. Add the editor integration layer** after the CLI is working:
198
-
199
- - Claude Code: `claude plugin marketplace add rob-balfre/dryui && claude plugin install dryui@dryui` (plugin is the canonical Claude skill install path)
200
- - Codex (0.121.0+): `codex marketplace add rob-balfre/dryui`, then start `codex`, run `/plugins`, and install `DryUI` (plugin is the canonical Codex skill install path)
201
- - OpenCode: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .opencode/skills/dryui` + add the `dryui` and `dryui-feedback` local MCP servers in `opencode.json` (OpenCode also loads `.agents/skills/dryui` and reads `AGENTS.md`)
202
- - Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
203
-
204
- **5. Register the Svelte MCP companion.** `dryui setup --install` does this automatically for Copilot, Cursor, OpenCode, Windsurf, and Zed. For Claude Code run `claude mcp add -t stdio -s user svelte -- npx -y @sveltejs/mcp`. For Codex add `[mcp_servers.svelte] command = "npx", args = ["-y", "@sveltejs/mcp"]` to `~/.codex/config.toml`. See rule 7 above.
205
-
206
- ### Manual setup
207
-
208
- 1. `bun add @dryui/ui`
209
- 2. `bun add -d @dryui/lint`. Enforces grid-only layout, bans flexbox/inline-style/width at build time. Without this step the CSS discipline rules are not enforced at build time, and only post-write `check` / CLI validation remain.
210
- 3. Wire the lint preprocessor in `svelte.config.js` (add `dryuiLint` as the **first** item in the `preprocess` array):
211
-
212
- ```js
213
- import { dryuiLint } from '@dryui/lint';
214
-
215
- /** @type {import('@sveltejs/kit').Config} */
216
- const config = {
217
- preprocess: [
218
- dryuiLint({
219
- strict: true,
220
- exclude: ['.svelte-kit/', '/dist/']
221
- })
222
- // keep any existing preprocessors after this
223
- ]
224
- };
225
-
226
- export default config;
227
- ```
228
-
229
- 4. Add `class="theme-auto"` to `<html>` in `src/app.html`.
230
- 5. In root layout (`src/routes/+layout.svelte`), import themes:
231
- ```svelte
232
- <script>
233
- import '@dryui/ui/themes/default.css';
234
- import '@dryui/ui/themes/dark.css';
235
- </script>
236
- ```
237
- 6. Import `app.css` AFTER theme CSS if you have custom styles.
238
-
239
- > `dryui init` applies all six steps automatically. Prefer it over manual setup when you can.
240
-
241
- ## Bindable Props, Common Confusion
242
-
243
- Always verify with `ask --scope component`, but these are the most common mistakes:
244
-
245
- - `bind:value` (Input, Select, Tabs...) vs `bind:checked` (Checkbox, Switch) vs `bind:pressed` (Toggle) vs `bind:open` (Dialog, Popover, Drawer...)
246
- - Select and Combobox support both `bind:value` and `bind:open`.
247
- - ColorPicker also exposes `bind:alpha`. Transfer uses `bind:sourceItems` / `bind:targetItems`.
248
- - Tour uses `bind:active`, not `bind:open`.
249
-
250
- ## Tools
251
-
252
- Use these to look up APIs, discover components, plan setup, and validate code.
253
-
254
- ### Recommended workflow
255
-
256
- 1. Resolve any component or recipe uncertainty with `dryui ask --scope component "<Component>"` or `dryui ask --scope recipe "<pattern>"`. If MCP is available, `ask --scope component` and `ask --scope recipe` are the equivalent surface.
257
- 2. Build the route or component with raw CSS grid, `Container` for constrained width, and `@container` for responsive layout.
258
- 3. Run `dryui check [path]` or MCP `check` after implementation to catch composition drift, layout violations, accessibility regressions, and token drift.
259
- 4. Never guess component shape from memory. DryUI is intentionally strict, and the lookup cost is lower than rework.
260
-
261
- ### CLI (default entry point)
262
-
263
- Install once with `bun install -g @dryui/cli@latest` (or `npm install -g @dryui/cli@latest`), then use the short form below. Every command outputs TOON (token-optimized, agent-friendly) by default. Pass `--text` for human-readable plain text, `--json` where supported, or `--full` to disable truncation.
264
-
265
- ```bash
266
- dryui # default onboarding entry point
267
- dryui setup # explicit onboarding subcommand
268
- dryui init [path] [--pm bun] # Bootstrap SvelteKit + DryUI project
269
- dryui ask <scope> "<query>" # Look up components, recipes, tokens, setup
270
- dryui detect [path] # Check project setup
271
- dryui install [path] # Print install plan
272
- dryui check [path] # Validate file, theme, directory, or workspace
273
- dryui list # List components
274
- dryui tokens --category color # Browse design tokens
275
- dryui ambient # SessionStart context
276
- dryui install-hook --dry-run # Preview Claude hook wiring
277
- dryui feedback init # Feedback tooling setup
278
- ```
279
-
280
- Without a global install, prefix any command with `bunx @dryui/cli …` or `npx -y @dryui/cli …`. Same behaviour, just slower (re-fetches on each call).
281
-
282
- ### MCP tools (same workflow in-editor)
283
-
284
- | Workflow | Tools |
285
- | -------------------- | ----------------------------------------------------------------- |
286
- | Project setup | `ask --scope setup ""` |
287
- | Lookup & composition | `ask --scope component`, `ask --scope recipe`, `ask --scope list` |
288
- | Validation | `check <file.svelte>`, `check <theme.css>` |
289
- | Audit | `check`, `check <directory>` |
290
-
291
- Categories: action, input, form, layout, navigation, overlay, display, feedback, interaction, utility
292
-
293
- ## Rule Files
294
-
295
- Read these when you need deeper guidance:
296
-
297
- - **`rules/compound-components.md`** — Parts lists, component selection table, common mistakes
298
- - **`rules/theming.md`** — Three-tier token system, dark mode, palette customization
299
- - **`rules/composition.md`** — Form patterns, page layouts, composition recipes
300
- - **`rules/accessibility.md`** — Field.Root, ARIA, focus management, pre-ship checklist
301
- - **`rules/svelte.md`** — Runes, snippets, native browser APIs, styling rules
302
- - **`rules/native-web-transitions.md`** — View Transition API, scroll animations, reduced-motion
303
-
304
- ---
305
-
306
- **These rules are working if:** every component traces to a lookup, diffs contain zero hardcoded colors, and `dryui check` finds nothing.
@@ -1,10 +0,0 @@
1
- interface:
2
- display_name: 'DryUI'
3
- short_description: 'Zero-dependency Svelte 5 component library patterns'
4
- default_prompt: 'Use $dryui to build with correct compound components, theming, accessibility, and composition patterns.'
5
-
6
- dependencies:
7
- tools:
8
- - type: 'mcp'
9
- value: 'dryui'
10
- description: 'DryUI component lookup, validation, composition guidance, and project planning'
@@ -1,215 +0,0 @@
1
- # Accessibility
2
-
3
- ## Field.Root for Form Inputs
4
-
5
- Field.Root generates unique IDs and links Label to the input via `for`/`id` attributes. Always use it instead of raw `<label>` elements.
6
-
7
- ```svelte
8
- <!-- Incorrect: label not linked to input -->
9
- <label>Email</label>
10
- <Input bind:value={email} />
11
-
12
- <!-- Correct: Field.Root handles accessible linking -->
13
- <Field.Root>
14
- <Label>Email</Label>
15
- <Input bind:value={email} />
16
- </Field.Root>
17
- ```
18
-
19
- Field.Root also connects Description and Error parts via `aria-describedby`:
20
-
21
- ```svelte
22
- <Field.Root>
23
- <Label>Password</Label>
24
- <Input type="password" bind:value={password} />
25
- <Field.Description>Must be at least 8 characters.</Field.Description>
26
- <Field.Error>Password is too short.</Field.Error>
27
- </Field.Root>
28
- ```
29
-
30
- This produces the correct ARIA relationships automatically:
31
-
32
- - Label is linked to the input via `for`/`id`
33
- - Description is linked via `aria-describedby`
34
- - Error is linked via `aria-describedby` and sets `aria-invalid` on the input
35
-
36
- ## Dialog and AlertDialog
37
-
38
- ### Dialog
39
-
40
- Dialog traps focus inside the overlay. Always provide a title and a way to close.
41
-
42
- ```svelte
43
- <!-- Incorrect: dialog without header or close mechanism -->
44
- <Dialog.Root bind:open={show}>
45
- <Dialog.Content>
46
- <p>Some content</p>
47
- </Dialog.Content>
48
- </Dialog.Root>
49
-
50
- <!-- Correct: header provides accessible title, close button available -->
51
- <Dialog.Root bind:open={show}>
52
- <Dialog.Trigger>
53
- <Button>Open</Button>
54
- </Dialog.Trigger>
55
- <Dialog.Content>
56
- <Dialog.Header>Edit Profile</Dialog.Header>
57
- <Dialog.Body>
58
- <Field.Root>
59
- <Label>Name</Label>
60
- <Input bind:value={name} />
61
- </Field.Root>
62
- </Dialog.Body>
63
- <Dialog.Footer>
64
- <Button variant="outline" onclick={() => (show = false)}>Cancel</Button>
65
- <Button variant="solid">Save</Button>
66
- </Dialog.Footer>
67
- </Dialog.Content>
68
- </Dialog.Root>
69
- ```
70
-
71
- ### AlertDialog
72
-
73
- Use AlertDialog (not Dialog) for destructive confirmations. It requires explicit user action and cannot be dismissed by clicking the overlay.
74
-
75
- ```svelte
76
- <!-- Incorrect: using Dialog for destructive confirmation -->
77
- <Dialog.Root bind:open={showDelete}>
78
- <Dialog.Content>
79
- <p>Delete this item?</p>
80
- <Button onclick={handleDelete}>Delete</Button>
81
- </Dialog.Content>
82
- </Dialog.Root>
83
-
84
- <!-- Correct: AlertDialog with Action and Cancel parts -->
85
- <AlertDialog.Root>
86
- <AlertDialog.Trigger>
87
- <Button variant="outline">Delete</Button>
88
- </AlertDialog.Trigger>
89
- <AlertDialog.Content>
90
- <AlertDialog.Header>Delete Item</AlertDialog.Header>
91
- <AlertDialog.Body>
92
- <p>This action cannot be undone.</p>
93
- </AlertDialog.Body>
94
- <AlertDialog.Footer>
95
- <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
96
- <AlertDialog.Action>Delete</AlertDialog.Action>
97
- </AlertDialog.Footer>
98
- </AlertDialog.Content>
99
- </AlertDialog.Root>
100
- ```
101
-
102
- ## Button vs Anchor
103
-
104
- Use Button for actions. Use `<a>` for navigation.
105
-
106
- ```svelte
107
- <!-- Incorrect: anchor styled as action button -->
108
- <a href="#" onclick={handleSave}>Save</a>
109
-
110
- <!-- Correct: Button for actions -->
111
- <Button onclick={handleSave}>Save</Button>
112
-
113
- <!-- Correct: anchor for navigation -->
114
- <a href="/settings">Go to Settings</a>
115
- ```
116
-
117
- ## Icon-Only Buttons
118
-
119
- Always add `aria-label` to buttons that contain only an icon and no visible text.
120
-
121
- ```svelte
122
- <!-- Incorrect: icon button without accessible name -->
123
- <Button variant="ghost" onclick={toggleMenu}>
124
- <MenuIcon />
125
- </Button>
126
-
127
- <!-- Correct: aria-label provides accessible name -->
128
- <Button variant="ghost" onclick={toggleMenu} aria-label="Open menu">
129
- <MenuIcon />
130
- </Button>
131
- ```
132
-
133
- ## Avatar
134
-
135
- Always provide `alt` text for Avatar images.
136
-
137
- ```svelte
138
- <!-- Incorrect: no alt text -->
139
- <Avatar src="/photo.jpg" />
140
-
141
- <!-- Correct: descriptive alt text -->
142
- <Avatar src="/photo.jpg" alt="Jane Doe's profile photo" />
143
- ```
144
-
145
- ## Keyboard Navigation
146
-
147
- DryUI components handle keyboard navigation automatically:
148
-
149
- - **Tabs**: Arrow keys move between triggers, Enter/Space activates
150
- - **Accordion**: Arrow keys navigate triggers, Enter/Space toggles
151
- - **DropdownMenu**: Arrow keys navigate items, Enter selects, Escape closes
152
- - **Select**: Arrow keys navigate items, Enter selects, Escape closes
153
- - **Dialog/AlertDialog**: Tab cycles through focusable elements, Escape closes (Dialog only)
154
-
155
- No extra code needed for standard keyboard behavior. Avoid overriding `onkeydown` on these components unless you have a specific accessibility need.
156
-
157
- ## Form Submission
158
-
159
- Use `type="submit"` on the primary form action button so that pressing Enter in any input submits the form.
160
-
161
- ```svelte
162
- <!-- Incorrect: button without type, won't submit on Enter -->
163
- <form onsubmit={handleSubmit}>
164
- <Field.Root>
165
- <Label>Search</Label>
166
- <Input bind:value={query} />
167
- </Field.Root>
168
- <Button variant="solid" onclick={handleSubmit}>Search</Button>
169
- </form>
170
-
171
- <!-- Correct: type="submit" enables Enter key submission -->
172
- <form onsubmit={handleSubmit}>
173
- <Field.Root>
174
- <Label>Search</Label>
175
- <Input bind:value={query} />
176
- </Field.Root>
177
- <Button type="submit" variant="solid">Search</Button>
178
- </form>
179
- ```
180
-
181
- ## Loading States
182
-
183
- Use `disabled` and descriptive text or `aria-label` during loading states.
184
-
185
- ```svelte
186
- <!-- Incorrect: no indication of loading -->
187
- <Button onclick={save}>
188
- {#if saving}
189
- <Spinner />
190
- {:else}
191
- Save
192
- {/if}
193
- </Button>
194
-
195
- <!-- Correct: disabled and labeled during loading -->
196
- <Button onclick={save} disabled={saving} aria-label={saving ? 'Saving...' : undefined}>
197
- {#if saving}
198
- <Spinner /> Saving...
199
- {:else}
200
- Save
201
- {/if}
202
- </Button>
203
- ```
204
-
205
- ## Checklist
206
-
207
- Before shipping a page with DryUI components:
208
-
209
- 1. Every form input is wrapped in `Field.Root` with a `Label`
210
- 2. Every Dialog/AlertDialog has a header or `aria-label`
211
- 3. Every icon-only Button has `aria-label`
212
- 4. Destructive confirmations use `AlertDialog`, not `Dialog`
213
- 5. Primary form buttons use `type="submit"`
214
- 6. Avatar images have `alt` text
215
- 7. No `<a href="#">` used as action buttons