@dryui/ui 0.1.11 → 0.1.12

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 (206) hide show
  1. package/dist/adjust/adjust.svelte +4 -2
  2. package/dist/alpha-slider/alpha-slider.svelte +4 -2
  3. package/dist/aspect-ratio/aspect-ratio.svelte +2 -1
  4. package/dist/aurora/aurora.svelte +12 -2
  5. package/dist/beam/beam.svelte +23 -22
  6. package/dist/chromatic-aberration/chromatic-aberration.svelte +3 -0
  7. package/dist/color-picker/color-picker-alpha-slider.svelte +2 -1
  8. package/dist/color-picker/color-picker-area.svelte +11 -5
  9. package/dist/color-picker/color-picker-swatch.svelte +6 -3
  10. package/dist/displacement/displacement.svelte +3 -0
  11. package/dist/gauge/gauge.svelte +3 -3
  12. package/dist/god-rays/god-rays.svelte +10 -0
  13. package/dist/image-comparison/image-comparison.svelte +3 -1
  14. package/dist/marquee/marquee.svelte +9 -13
  15. package/dist/progress/progress.svelte +8 -4
  16. package/dist/qr-code/qr-code.svelte +1 -1
  17. package/dist/reveal/reveal.svelte +3 -1
  18. package/dist/shader-canvas/shader-canvas.svelte +3 -2
  19. package/dist/skeleton/skeleton.svelte +8 -5
  20. package/dist/slider/slider.svelte +1 -1
  21. package/dist/splitter/splitter-root.svelte +7 -4
  22. package/dist/spotlight/spotlight.svelte +7 -0
  23. package/dist/thumbnail/accordion.svelte +2 -2
  24. package/dist/thumbnail/add-on-selector.svelte +2 -2
  25. package/dist/thumbnail/affix-group.svelte +2 -2
  26. package/dist/thumbnail/alert-dialog.svelte +2 -2
  27. package/dist/thumbnail/alert.svelte +2 -2
  28. package/dist/thumbnail/alpha-slider.svelte +2 -2
  29. package/dist/thumbnail/amenity-grid.svelte +2 -2
  30. package/dist/thumbnail/aspect-ratio.svelte +2 -2
  31. package/dist/thumbnail/aurora.svelte +2 -2
  32. package/dist/thumbnail/avatar.svelte +2 -2
  33. package/dist/thumbnail/backdrop.svelte +2 -2
  34. package/dist/thumbnail/badge.svelte +2 -2
  35. package/dist/thumbnail/booking-confirmation.svelte +2 -2
  36. package/dist/thumbnail/breadcrumb.svelte +2 -2
  37. package/dist/thumbnail/button-group.svelte +2 -2
  38. package/dist/thumbnail/button.svelte +2 -2
  39. package/dist/thumbnail/calendar.svelte +2 -2
  40. package/dist/thumbnail/card.svelte +2 -2
  41. package/dist/thumbnail/carousel.svelte +2 -2
  42. package/dist/thumbnail/chart.svelte +2 -2
  43. package/dist/thumbnail/chat-thread.svelte +2 -2
  44. package/dist/thumbnail/checkbox.svelte +2 -2
  45. package/dist/thumbnail/chip-group.svelte +2 -2
  46. package/dist/thumbnail/chip.svelte +2 -2
  47. package/dist/thumbnail/chromatic-shift.svelte +2 -2
  48. package/dist/thumbnail/clipboard.svelte +2 -2
  49. package/dist/thumbnail/code-block.svelte +2 -2
  50. package/dist/thumbnail/collapsible.svelte +2 -2
  51. package/dist/thumbnail/color-picker.svelte +2 -2
  52. package/dist/thumbnail/combobox.svelte +2 -2
  53. package/dist/thumbnail/command-palette.svelte +2 -2
  54. package/dist/thumbnail/commerce-header.svelte +2 -2
  55. package/dist/thumbnail/comparison-table.svelte +2 -2
  56. package/dist/thumbnail/container.svelte +2 -2
  57. package/dist/thumbnail/context-menu.svelte +2 -2
  58. package/dist/thumbnail/country-select.svelte +2 -2
  59. package/dist/thumbnail/currency-selector.svelte +2 -2
  60. package/dist/thumbnail/data-grid.svelte +2 -2
  61. package/dist/thumbnail/date-field.svelte +2 -2
  62. package/dist/thumbnail/date-picker.svelte +2 -2
  63. package/dist/thumbnail/date-range-picker.svelte +2 -2
  64. package/dist/thumbnail/date-time-input.svelte +2 -2
  65. package/dist/thumbnail/description-list.svelte +2 -2
  66. package/dist/thumbnail/dialog.svelte +2 -2
  67. package/dist/thumbnail/displacement.svelte +2 -2
  68. package/dist/thumbnail/drag-and-drop.svelte +2 -2
  69. package/dist/thumbnail/drawer.svelte +2 -2
  70. package/dist/thumbnail/drop-zone.svelte +2 -2
  71. package/dist/thumbnail/dropdown-menu.svelte +2 -2
  72. package/dist/thumbnail/fare-class-picker.svelte +2 -2
  73. package/dist/thumbnail/field.svelte +2 -2
  74. package/dist/thumbnail/fieldset.svelte +2 -2
  75. package/dist/thumbnail/file-select.svelte +2 -2
  76. package/dist/thumbnail/file-upload.svelte +2 -2
  77. package/dist/thumbnail/filter-sidebar.svelte +2 -2
  78. package/dist/thumbnail/flexible-dates-grid.svelte +2 -2
  79. package/dist/thumbnail/flight-timeline.svelte +2 -2
  80. package/dist/thumbnail/flip-card.svelte +2 -2
  81. package/dist/thumbnail/float-button.svelte +2 -2
  82. package/dist/thumbnail/focus-trap.svelte +2 -2
  83. package/dist/thumbnail/format-bytes.svelte +2 -2
  84. package/dist/thumbnail/format-date.svelte +2 -2
  85. package/dist/thumbnail/format-number.svelte +2 -2
  86. package/dist/thumbnail/gauge.svelte +2 -2
  87. package/dist/thumbnail/glow.svelte +2 -2
  88. package/dist/thumbnail/gradient-mesh.svelte +2 -2
  89. package/dist/thumbnail/guest-room-selector.svelte +2 -2
  90. package/dist/thumbnail/halftone.svelte +2 -2
  91. package/dist/thumbnail/heading.svelte +2 -2
  92. package/dist/thumbnail/hotel-gallery.svelte +2 -2
  93. package/dist/thumbnail/hotkey.svelte +2 -2
  94. package/dist/thumbnail/hover-card.svelte +2 -2
  95. package/dist/thumbnail/icon.svelte +2 -2
  96. package/dist/thumbnail/image-comparison.svelte +2 -2
  97. package/dist/thumbnail/image.svelte +2 -2
  98. package/dist/thumbnail/infinite-scroll.svelte +2 -2
  99. package/dist/thumbnail/input-group.svelte +2 -2
  100. package/dist/thumbnail/input.svelte +2 -2
  101. package/dist/thumbnail/itinerary-timeline.svelte +2 -2
  102. package/dist/thumbnail/kbd.svelte +2 -2
  103. package/dist/thumbnail/label.svelte +2 -2
  104. package/dist/thumbnail/layout-header-content-footer.svelte +2 -2
  105. package/dist/thumbnail/layout-header-sidebar-main.svelte +2 -2
  106. package/dist/thumbnail/layout-sidebar-main.svelte +2 -2
  107. package/dist/thumbnail/link-preview.svelte +2 -2
  108. package/dist/thumbnail/link.svelte +2 -2
  109. package/dist/thumbnail/list.svelte +2 -2
  110. package/dist/thumbnail/listbox.svelte +2 -2
  111. package/dist/thumbnail/location-autocomplete.svelte +2 -2
  112. package/dist/thumbnail/loyalty-points-display.svelte +2 -2
  113. package/dist/thumbnail/map-list-toggle.svelte +2 -2
  114. package/dist/thumbnail/map.svelte +2 -2
  115. package/dist/thumbnail/markdown-renderer.svelte +2 -2
  116. package/dist/thumbnail/marquee.svelte +2 -2
  117. package/dist/thumbnail/mask-reveal.svelte +2 -2
  118. package/dist/thumbnail/mega-menu.svelte +2 -2
  119. package/dist/thumbnail/menubar.svelte +2 -2
  120. package/dist/thumbnail/multi-city-search-form.svelte +2 -2
  121. package/dist/thumbnail/multi-select-combobox.svelte +2 -2
  122. package/dist/thumbnail/navigation-menu.svelte +2 -2
  123. package/dist/thumbnail/noise.svelte +2 -2
  124. package/dist/thumbnail/notification-center.svelte +2 -2
  125. package/dist/thumbnail/number-input.svelte +2 -2
  126. package/dist/thumbnail/option-swatch-group.svelte +2 -2
  127. package/dist/thumbnail/pagination.svelte +2 -2
  128. package/dist/thumbnail/passenger-class-selector.svelte +2 -2
  129. package/dist/thumbnail/payment-card-input.svelte +2 -2
  130. package/dist/thumbnail/phone-input.svelte +2 -2
  131. package/dist/thumbnail/pin-input.svelte +2 -2
  132. package/dist/thumbnail/popover.svelte +2 -2
  133. package/dist/thumbnail/portal.svelte +2 -2
  134. package/dist/thumbnail/price-calendar.svelte +2 -2
  135. package/dist/thumbnail/price-summary-panel.svelte +2 -2
  136. package/dist/thumbnail/progress-ring.svelte +2 -2
  137. package/dist/thumbnail/progress.svelte +2 -2
  138. package/dist/thumbnail/promo-code-input.svelte +2 -2
  139. package/dist/thumbnail/promo-mosaic.svelte +2 -2
  140. package/dist/thumbnail/prompt-input.svelte +2 -2
  141. package/dist/thumbnail/qr-code.svelte +2 -2
  142. package/dist/thumbnail/radio-group.svelte +2 -2
  143. package/dist/thumbnail/range-calendar.svelte +2 -2
  144. package/dist/thumbnail/rating.svelte +2 -2
  145. package/dist/thumbnail/recent-searches.svelte +2 -2
  146. package/dist/thumbnail/relative-time.svelte +2 -2
  147. package/dist/thumbnail/result-card-car.svelte +2 -2
  148. package/dist/thumbnail/result-card-flight.svelte +2 -2
  149. package/dist/thumbnail/result-card-hotel.svelte +2 -2
  150. package/dist/thumbnail/reveal.svelte +2 -2
  151. package/dist/thumbnail/review-card.svelte +2 -2
  152. package/dist/thumbnail/rich-text-editor.svelte +2 -2
  153. package/dist/thumbnail/room-type-picker.svelte +2 -2
  154. package/dist/thumbnail/root.svelte +2 -2
  155. package/dist/thumbnail/route-map.svelte +2 -2
  156. package/dist/thumbnail/scroll-area.svelte +2 -2
  157. package/dist/thumbnail/scroll-to-top.svelte +2 -2
  158. package/dist/thumbnail/search-form-tabs.svelte +2 -2
  159. package/dist/thumbnail/seat-map.svelte +2 -2
  160. package/dist/thumbnail/segmented-control.svelte +2 -2
  161. package/dist/thumbnail/select.svelte +2 -2
  162. package/dist/thumbnail/selectable-tile-group.svelte +2 -2
  163. package/dist/thumbnail/separator.svelte +2 -2
  164. package/dist/thumbnail/shader-canvas.svelte +2 -2
  165. package/dist/thumbnail/sidebar.svelte +2 -2
  166. package/dist/thumbnail/skeleton.svelte +2 -2
  167. package/dist/thumbnail/slider.svelte +2 -2
  168. package/dist/thumbnail/sort-bar.svelte +2 -2
  169. package/dist/thumbnail/spacer.svelte +2 -2
  170. package/dist/thumbnail/sparkline.svelte +2 -2
  171. package/dist/thumbnail/spinner.svelte +2 -2
  172. package/dist/thumbnail/splitter.svelte +2 -2
  173. package/dist/thumbnail/spotlight.svelte +2 -2
  174. package/dist/thumbnail/star-rating.svelte +2 -2
  175. package/dist/thumbnail/stepper.svelte +2 -2
  176. package/dist/thumbnail/svg.svelte +2 -2
  177. package/dist/thumbnail/system-map.svelte +2 -2
  178. package/dist/thumbnail/table-of-contents.svelte +2 -2
  179. package/dist/thumbnail/table.svelte +2 -2
  180. package/dist/thumbnail/tabs.svelte +2 -2
  181. package/dist/thumbnail/tag.svelte +2 -2
  182. package/dist/thumbnail/tags-input.svelte +2 -2
  183. package/dist/thumbnail/text.svelte +2 -2
  184. package/dist/thumbnail/textarea.svelte +2 -2
  185. package/dist/thumbnail/time-input.svelte +2 -2
  186. package/dist/thumbnail/timeline.svelte +2 -2
  187. package/dist/thumbnail/toast.svelte +2 -2
  188. package/dist/thumbnail/toggle-group.svelte +2 -2
  189. package/dist/thumbnail/toggle.svelte +2 -2
  190. package/dist/thumbnail/toolbar.svelte +2 -2
  191. package/dist/thumbnail/tooltip.svelte +2 -2
  192. package/dist/thumbnail/tour.svelte +2 -2
  193. package/dist/thumbnail/transfer.svelte +2 -2
  194. package/dist/thumbnail/tree.svelte +2 -2
  195. package/dist/thumbnail/trip-card.svelte +2 -2
  196. package/dist/thumbnail/trust-badges.svelte +2 -2
  197. package/dist/thumbnail/typing-indicator.svelte +2 -2
  198. package/dist/thumbnail/typography.svelte +2 -2
  199. package/dist/thumbnail/video-embed.svelte +2 -2
  200. package/dist/thumbnail/virtual-list.svelte +2 -2
  201. package/dist/thumbnail/visually-hidden.svelte +2 -2
  202. package/dist/toast/toast-root.svelte +1 -1
  203. package/dist/tree/tree-item-children.svelte +3 -2
  204. package/dist/video-embed/video-embed.svelte +2 -1
  205. package/dist/virtual-list/virtual-list.svelte +9 -5
  206. package/package.json +2 -2
package/dist/thumbnail/toolbar.svelte CHANGED
@@ -90,8 +90,8 @@
90
90
  <style>
91
91
  [data-thumbnail] {
92
92
  display: inline-grid;
93
- width: var(--thumbnail-w);
94
- height: var(--thumbnail-h);
93
+ width: var(--thumbnail-w, 80px);
94
+ height: var(--thumbnail-h, 53px);
95
95
  }
96
96
 
97
97
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/tooltip.svelte CHANGED
@@ -66,8 +66,8 @@
66
66
  <style>
67
67
  [data-thumbnail] {
68
68
  display: inline-grid;
69
- width: var(--thumbnail-w);
70
- height: var(--thumbnail-h);
69
+ width: var(--thumbnail-w, 80px);
70
+ height: var(--thumbnail-h, 53px);
71
71
  }
72
72
 
73
73
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/tour.svelte CHANGED
@@ -130,8 +130,8 @@
130
130
  <style>
131
131
  [data-thumbnail] {
132
132
  display: inline-grid;
133
- width: var(--thumbnail-w);
134
- height: var(--thumbnail-h);
133
+ width: var(--thumbnail-w, 80px);
134
+ height: var(--thumbnail-h, 53px);
135
135
  }
136
136
 
137
137
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/transfer.svelte CHANGED
@@ -149,8 +149,8 @@
149
149
  <style>
150
150
  [data-thumbnail] {
151
151
  display: inline-grid;
152
- width: var(--thumbnail-w);
153
- height: var(--thumbnail-h);
152
+ width: var(--thumbnail-w, 80px);
153
+ height: var(--thumbnail-h, 53px);
154
154
  }
155
155
 
156
156
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/tree.svelte CHANGED
@@ -196,8 +196,8 @@
196
196
  <style>
197
197
  [data-thumbnail] {
198
198
  display: inline-grid;
199
- width: var(--thumbnail-w);
200
- height: var(--thumbnail-h);
199
+ width: var(--thumbnail-w, 80px);
200
+ height: var(--thumbnail-h, 53px);
201
201
  }
202
202
 
203
203
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/trip-card.svelte CHANGED
@@ -118,8 +118,8 @@
118
118
  <style>
119
119
  [data-thumbnail] {
120
120
  display: inline-grid;
121
- width: var(--thumbnail-w);
122
- height: var(--thumbnail-h);
121
+ width: var(--thumbnail-w, 80px);
122
+ height: var(--thumbnail-h, 53px);
123
123
  }
124
124
 
125
125
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/trust-badges.svelte CHANGED
@@ -188,8 +188,8 @@
188
188
  <style>
189
189
  [data-thumbnail] {
190
190
  display: inline-grid;
191
- width: var(--thumbnail-w);
192
- height: var(--thumbnail-h);
191
+ width: var(--thumbnail-w, 80px);
192
+ height: var(--thumbnail-h, 53px);
193
193
  }
194
194
 
195
195
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/typing-indicator.svelte CHANGED
@@ -46,8 +46,8 @@
46
46
  <style>
47
47
  [data-thumbnail] {
48
48
  display: inline-grid;
49
- width: var(--thumbnail-w);
50
- height: var(--thumbnail-h);
49
+ width: var(--thumbnail-w, 80px);
50
+ height: var(--thumbnail-h, 53px);
51
51
  }
52
52
 
53
53
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/typography.svelte CHANGED
@@ -61,8 +61,8 @@
61
61
  <style>
62
62
  [data-thumbnail] {
63
63
  display: inline-grid;
64
- width: var(--thumbnail-w);
65
- height: var(--thumbnail-h);
64
+ width: var(--thumbnail-w, 80px);
65
+ height: var(--thumbnail-h, 53px);
66
66
  }
67
67
 
68
68
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/video-embed.svelte CHANGED
@@ -68,8 +68,8 @@
68
68
  <style>
69
69
  [data-thumbnail] {
70
70
  display: inline-grid;
71
- width: var(--thumbnail-w);
72
- height: var(--thumbnail-h);
71
+ width: var(--thumbnail-w, 80px);
72
+ height: var(--thumbnail-h, 53px);
73
73
  }
74
74
 
75
75
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/virtual-list.svelte CHANGED
@@ -159,8 +159,8 @@
159
159
  <style>
160
160
  [data-thumbnail] {
161
161
  display: inline-grid;
162
- width: var(--thumbnail-w);
163
- height: var(--thumbnail-h);
162
+ width: var(--thumbnail-w, 80px);
163
+ height: var(--thumbnail-h, 53px);
164
164
  }
165
165
 
166
166
  [data-thumbnail][data-size='sm'] {
package/dist/thumbnail/visually-hidden.svelte CHANGED
@@ -87,8 +87,8 @@
87
87
  <style>
88
88
  [data-thumbnail] {
89
89
  display: inline-grid;
90
- width: var(--thumbnail-w);
91
- height: var(--thumbnail-h);
90
+ width: var(--thumbnail-w, 80px);
91
+ height: var(--thumbnail-h, 53px);
92
92
  }
93
93
 
94
94
  [data-thumbnail][data-size='sm'] {
package/dist/toast/toast-root.svelte CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  function applyProgressStyles(node: HTMLElement) {
37
37
  $effect(() => {
38
- node.style.cssText = `--progress-width: ${progress}%`;
38
+ node.style.setProperty('--progress-width', `${progress}%`);
39
39
  });
40
40
  }
41
41
  </script>
package/dist/tree/tree-item-children.svelte CHANGED
@@ -16,8 +16,7 @@
16
16
  function applyStyles(node: HTMLElement) {
17
17
  $effect(() => {
18
18
  node.style.cssText = style || '';
19
- node.style.setProperty('display', 'grid');
20
- node.style.setProperty('grid-template-rows', open ? '1fr' : '0fr');
19
+ node.style.setProperty('--_rows', open ? '1fr' : '0fr');
21
20
  });
22
21
  }
23
22
  </script>
@@ -42,6 +41,8 @@
42
41
  }
43
42
 
44
43
  [data-part='children'] {
44
+ display: grid;
45
+ grid-template-rows: var(--_rows, 0fr);
45
46
  padding-left: var(--dry-tree-indent, var(--dry-space-4));
46
47
  transition: grid-template-rows var(--dry-duration-normal, 200ms) var(--dry-ease-default, ease);
47
48
  }
package/dist/video-embed/video-embed.svelte CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  function applyAspectRatio(node: HTMLElement) {
61
61
  $effect(() => {
62
- node.style.setProperty('aspect-ratio', aspectRatio);
62
+ node.style.setProperty('--_ratio', aspectRatio);
63
63
  });
64
64
  }
65
65
  </script>
@@ -129,6 +129,7 @@
129
129
  overflow: hidden;
130
130
  border-radius: var(--dry-video-embed-radius);
131
131
  background: var(--dry-color-fill, #0f0f0f);
132
+ aspect-ratio: var(--_ratio, 16/9);
132
133
  }
133
134
 
134
135
  [data-video-embed] [data-part='media'] {
package/dist/virtual-list/virtual-list.svelte CHANGED
@@ -146,15 +146,12 @@
146
146
  function applyContainerStyles(node: HTMLElement) {
147
147
  $effect(() => {
148
148
  node.style.cssText = style || '';
149
- node.style.setProperty('position', 'relative');
150
- node.style.setProperty('overflow-y', 'auto');
151
149
  });
152
150
  }
153
151
 
154
152
  function applyInnerStyles(node: HTMLElement) {
155
153
  $effect(() => {
156
- node.style.setProperty('height', `${totalHeight}px`);
157
- node.style.setProperty('position', 'relative');
154
+ node.style.setProperty('--_inner-height', `${totalHeight}px`);
158
155
  });
159
156
  }
160
157
 
@@ -191,7 +188,7 @@
191
188
  data-virtual-list
192
189
  {...rest}
193
190
  >
194
- <div use:applyInnerStyles>
191
+ <div data-virtual-list-inner use:applyInnerStyles>
195
192
  {#each visibleItems as entry (entry.index)}
196
193
  {@render children(entry)}
197
194
  {/each}
@@ -200,6 +197,8 @@
200
197
 
201
198
  <style>
202
199
  [data-virtual-list] {
200
+ position: relative;
201
+ overflow-y: auto;
203
202
  height: 100%;
204
203
  --dry-virtual-list-scrollbar-width: 8px;
205
204
  --dry-virtual-list-scrollbar-track: var(--dry-color-bg-raised, transparent);
@@ -232,4 +231,9 @@
232
231
  [data-virtual-list]::-webkit-scrollbar-thumb:hover {
233
232
  background: var(--dry-virtual-list-scrollbar-thumb-hover);
234
233
  }
234
+
235
+ [data-virtual-list-inner] {
236
+ position: relative;
237
+ height: var(--_inner-height, 0px);
238
+ }
235
239
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dryui/ui",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "author": "Rob Balfre",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -1504,7 +1504,7 @@
1504
1504
  "thumbnail:create": "bun scripts/create-thumbnail.ts"
1505
1505
  },
1506
1506
  "dependencies": {
1507
- "@dryui/primitives": "^0.1.10"
1507
+ "@dryui/primitives": "^0.1.12"
1508
1508
  },
1509
1509
  "peerDependencies": {
1510
1510
  "svelte": "^5.55.1"