@dryui/ui 0.1.3 → 0.1.5

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 (55) hide show
  1. package/dist/accordion/accordion-trigger.svelte +5 -6
  2. package/dist/alert-dialog/alert-dialog-action.svelte +42 -6
  3. package/dist/alert-dialog/alert-dialog-cancel.svelte +44 -5
  4. package/dist/alert-dialog/alert-dialog-footer.svelte +3 -2
  5. package/dist/aurora/aurora.svelte.d.ts +6 -0
  6. package/dist/beam/beam.svelte +17 -10
  7. package/dist/chromatic-aberration/chromatic-aberration.svelte +7 -9
  8. package/dist/collapsible/collapsible-trigger.svelte +4 -7
  9. package/dist/color-picker/color-picker-eyedropper.svelte +4 -11
  10. package/dist/data-grid/data-grid-pagination.svelte +20 -2
  11. package/dist/data-grid/data-grid-root.svelte +1 -0
  12. package/dist/date-field/date-field-root.svelte +66 -20
  13. package/dist/date-field/date-field-segment.svelte +11 -9
  14. package/dist/date-field/date-field-separator.svelte +9 -1
  15. package/dist/date-picker/datepicker-calendar.svelte +168 -13
  16. package/dist/date-picker/datepicker-trigger.svelte +3 -8
  17. package/dist/date-range-picker/date-range-picker-calendar.svelte +177 -13
  18. package/dist/date-range-picker/date-range-picker-trigger.svelte +18 -12
  19. package/dist/dialog/dialog-content.svelte +1 -0
  20. package/dist/field/field-root.svelte +0 -1
  21. package/dist/file-select/file-select-clear.svelte +2 -8
  22. package/dist/file-upload/file-upload-item-delete.svelte +4 -7
  23. package/dist/flip-card/flip-card-back.svelte +2 -2
  24. package/dist/flip-card/flip-card-front.svelte +2 -2
  25. package/dist/flip-card/flip-card-root.svelte +2 -0
  26. package/dist/float-button/float-button-root.svelte +2 -1
  27. package/dist/image-comparison/image-comparison.svelte +16 -24
  28. package/dist/input-group/input-group-action.svelte +5 -0
  29. package/dist/input-group/input-group-input.svelte +7 -2
  30. package/dist/input-group/input-group-prefix.svelte +5 -0
  31. package/dist/input-group/input-group-root.svelte +10 -2
  32. package/dist/input-group/input-group-select.svelte +5 -0
  33. package/dist/input-group/input-group-separator.svelte +10 -0
  34. package/dist/input-group/input-group-suffix.svelte +5 -0
  35. package/dist/option-swatch-group/option-swatch-group-item.svelte +46 -0
  36. package/dist/option-swatch-group/option-swatch-group-label.svelte +10 -0
  37. package/dist/option-swatch-group/option-swatch-group-meta.svelte +10 -0
  38. package/dist/option-swatch-group/option-swatch-group-root.svelte +0 -79
  39. package/dist/option-swatch-group/option-swatch-group-swatch.svelte +25 -6
  40. package/dist/pin-input/pin-input-cell.svelte +4 -1
  41. package/dist/range-calendar/range-calendar-grid.svelte +219 -181
  42. package/dist/range-calendar/range-calendar-root.svelte +24 -10
  43. package/dist/select/select-trigger.svelte +5 -8
  44. package/dist/system-map/system-map.svelte +120 -674
  45. package/dist/tags-input/tags-input-input.svelte +3 -0
  46. package/dist/tags-input/tags-input-root.svelte +4 -13
  47. package/dist/tags-input/tags-input-tag.svelte +3 -0
  48. package/dist/themes/dark.css +6 -0
  49. package/dist/themes/default.css +3 -0
  50. package/dist/toast/toast-action.svelte +1 -0
  51. package/dist/toast/toast-close.svelte +4 -0
  52. package/dist/toast/toast-provider.svelte +5 -26
  53. package/dist/toast/toast-root.svelte +5 -10
  54. package/package.json +441 -1182
  55. package/skills/dryui/SKILL.md +24 -4
package/dist/tags-input/tags-input-input.svelte CHANGED
@@ -62,6 +62,8 @@
62
62
 
63
63
  <style>
64
64
  [data-part='input'] {
65
+ display: inline-grid;
66
+ vertical-align: middle;
65
67
  border: none;
66
68
  outline: none;
67
69
  background: transparent;
@@ -69,6 +71,7 @@
69
71
  font-size: var(--dry-tags-input-font-size, var(--dry-type-small-size, var(--dry-text-sm-size)));
70
72
  color: var(--dry-color-text-strong);
71
73
  padding: 0;
74
+ margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
72
75
  line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
73
76
 
74
77
  &::placeholder {
package/dist/tags-input/tags-input-root.svelte CHANGED
@@ -84,15 +84,12 @@
84
84
  }
85
85
 
86
86
  [data-part='root'] {
87
- display: grid;
88
- grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
89
- gap: var(--dry-space-1_5);
87
+ display: block;
90
88
  padding: var(--dry-space-2);
91
89
  border: 1px solid var(--dry-color-stroke-strong);
92
90
  border-radius: var(--dry-radius-md);
93
91
  background: var(--dry-color-bg-raised);
94
92
  min-height: 44px;
95
- align-items: center;
96
93
  box-sizing: border-box;
97
94
  transition:
98
95
  border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -123,7 +120,7 @@
123
120
  [data-size='sm'] {
124
121
  padding: var(--dry-space-1) var(--dry-space-1_5);
125
122
  min-height: 32px;
126
- gap: var(--dry-space-1);
123
+ --dry-tags-input-gap: var(--dry-space-1);
127
124
  --dry-tags-input-tag-padding-x: var(--dry-space-1_5);
128
125
  --dry-tags-input-tag-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
129
126
  --dry-tags-input-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
@@ -132,21 +129,15 @@
132
129
  [data-size='md'] {
133
130
  padding: var(--dry-space-2);
134
131
  min-height: 44px;
135
- gap: var(--dry-space-1_5);
132
+ --dry-tags-input-gap: var(--dry-space-1_5);
136
133
  }
137
134
 
138
135
  [data-size='lg'] {
139
136
  padding: var(--dry-space-2_5);
140
137
  min-height: 52px;
141
- gap: var(--dry-space-2);
138
+ --dry-tags-input-gap: var(--dry-space-2);
142
139
  --dry-tags-input-tag-padding-x: var(--dry-space-2_5);
143
140
  --dry-tags-input-tag-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
144
141
  --dry-tags-input-font-size: var(--dry-type-small-size, var(--dry-text-base-size));
145
142
  }
146
-
147
- @container (max-width: 200px) {
148
- [data-part='root'] {
149
- grid-template-columns: 1fr;
150
- }
151
- }
152
143
  </style>
package/dist/tags-input/tags-input-tag.svelte CHANGED
@@ -33,9 +33,12 @@
33
33
  display: inline-grid;
34
34
  grid-auto-flow: column;
35
35
  grid-auto-columns: max-content;
36
+ vertical-align: middle;
36
37
  align-items: center;
37
38
  gap: var(--dry-space-1);
38
39
  padding: var(--dry-space-1) var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
40
+ margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
41
+ margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
39
42
  background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
40
43
  color: var(--dry-color-fill-brand);
41
44
  border-radius: var(--dry-radius-full);
package/dist/themes/dark.css CHANGED
@@ -79,6 +79,9 @@
79
79
  --dry-toggle-label-color: var(--dry-color-text-strong);
80
80
  --dry-toggle-label-disabled-color: #ffffff1f;
81
81
 
82
+ /* ─── Component: Beam ─────────────────────────────────────────── */
83
+ --dry-beam-default-blend: screen;
84
+
82
85
  /* ─── Status: Error ───────────────────────────────────────────── */
83
86
  --dry-color-text-error: hsl(0, 60%, 70%);
84
87
  --dry-color-fill-error: hsl(0, 65%, 55%);
@@ -220,6 +223,9 @@
220
223
  --dry-toggle-label-color: var(--dry-color-text-strong);
221
224
  --dry-toggle-label-disabled-color: #ffffff1f;
222
225
 
226
+ /* ─── Component: Beam ─────────────────────────────────────────── */
227
+ --dry-beam-default-blend: screen;
228
+
223
229
  /* ─── Status: Error ───────────────────────────────────────────── */
224
230
  --dry-color-text-error: hsl(0, 60%, 70%);
225
231
  --dry-color-fill-error: hsl(0, 65%, 55%);
package/dist/themes/default.css CHANGED
@@ -87,6 +87,9 @@ code, pre, kbd, samp {
87
87
  --dry-toggle-label-color: rgba(0, 6, 38, 0.9);
88
88
  --dry-toggle-label-disabled-color: rgba(0, 17, 102, 0.1);
89
89
 
90
+ /* ─── Component: Beam ─────────────────────────────────────────── */
91
+ --dry-beam-default-blend: multiply;
92
+
90
93
  /* ─── Status: Error (hue 0) ───────────────────────────────────── */
91
94
  --dry-color-text-error: hsl(0, 70%, 35%);
92
95
  --dry-color-fill-error: hsl(0, 70%, 50%);
package/dist/toast/toast-action.svelte CHANGED
@@ -17,6 +17,7 @@
17
17
  <style>
18
18
  [data-part='action'] {
19
19
  all: unset;
20
+ justify-self: start;
20
21
  cursor: pointer;
21
22
  font-size: var(--dry-type-small-size);
22
23
  font-weight: 600;
package/dist/toast/toast-close.svelte CHANGED
@@ -26,6 +26,10 @@
26
26
 
27
27
  <style>
28
28
  [data-part='close'] {
29
+ position: absolute;
30
+ top: var(--dry-space-4);
31
+ right: var(--dry-space-4);
32
+ z-index: 1;
29
33
  cursor: pointer;
30
34
  background: none;
31
35
  border: none;
package/dist/toast/toast-provider.svelte CHANGED
@@ -19,31 +19,11 @@
19
19
  }
20
20
 
21
21
  let { class: className, position = 'bottom-right', children, ...rest }: Props = $props();
22
-
23
- let popoverEl = $state<HTMLDivElement>();
24
-
25
- $effect(() => {
26
- if (!popoverEl) return;
27
-
28
- if (toastStore.toasts.length > 0) {
29
- try {
30
- popoverEl.showPopover();
31
- } catch {
32
- // Already showing
33
- }
34
- } else {
35
- try {
36
- popoverEl.hidePopover();
37
- } catch {
38
- // Already hidden
39
- }
40
- }
41
- });
22
+ const visible = $derived(Boolean(children) || toastStore.toasts.length > 0);
42
23
  </script>
43
24
 
44
25
  <div
45
- bind:this={popoverEl}
46
- popover="manual"
26
+ hidden={!visible}
47
27
  role="region"
48
28
  aria-label="Notifications"
49
29
  data-part="provider"
@@ -82,6 +62,8 @@
82
62
 
83
63
  <style>
84
64
  [data-part='provider'] {
65
+ position: fixed;
66
+ z-index: var(--dry-layer-overlay);
85
67
  display: grid;
86
68
  grid-template-columns: minmax(0, min(420px, calc(100vw - var(--dry-space-8))));
87
69
  gap: var(--dry-space-3);
@@ -92,10 +74,6 @@
92
74
  overflow: visible;
93
75
  container-type: inline-size;
94
76
 
95
- &:not(:popover-open) {
96
- display: none;
97
- }
98
-
99
77
  &[data-position='top-right'] {
100
78
  inset: var(--dry-space-4) var(--dry-space-4) auto auto;
101
79
  }
@@ -125,6 +103,7 @@
125
103
 
126
104
  [data-part='content'] {
127
105
  display: grid;
106
+ grid-template-columns: minmax(0, 1fr);
128
107
  gap: var(--dry-space-1);
129
108
  }
130
109
  </style>
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.setProperty('--progress-width', `${progress}%`);
38
+ node.style.cssText = `--progress-width: ${progress}%`;
39
39
  });
40
40
  }
41
41
  </script>
@@ -67,11 +67,11 @@
67
67
  border-radius: var(--dry-radius-lg);
68
68
  box-shadow: var(--dry-shadow-lg);
69
69
  padding: var(--dry-space-4);
70
+ padding-right: calc(var(--dry-space-4) + var(--dry-space-12) + var(--dry-space-2));
70
71
  display: grid;
71
- grid-auto-flow: column;
72
- grid-auto-columns: max-content;
73
- align-items: flex-start;
74
- gap: var(--dry-space-3);
72
+ grid-template-columns: minmax(0, 1fr);
73
+ align-items: start;
74
+ gap: var(--dry-space-2);
75
75
  animation: slideIn var(--dry-duration-normal) var(--dry-ease-out);
76
76
 
77
77
  &[data-variant='info'] {
@@ -101,11 +101,6 @@
101
101
  --dry-toast-border: var(--dry-color-stroke-error);
102
102
  --dry-toast-action-hover-bg: var(--dry-color-fill-error-weak);
103
103
  }
104
-
105
- @container (max-width: 300px) {
106
- grid-auto-flow: row;
107
- grid-auto-columns: initial;
108
- }
109
104
  }
110
105
 
111
106
  @keyframes slideIn {