@marianmeres/stuic 3.190.0 → 3.191.0

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 (9) hide show
  1. package/dist/components/RangeSlider/README.md +22 -22
  2. package/dist/components/RangeSlider/RangeSlider.svelte +4 -4
  3. package/dist/components/RangeSlider/RangeSlider.svelte.d.ts +2 -2
  4. package/dist/components/RangeSlider/index.css +9 -6
  5. package/dist/components/Slider/README.md +23 -24
  6. package/dist/components/Slider/Slider.svelte +4 -4
  7. package/dist/components/Slider/Slider.svelte.d.ts +2 -2
  8. package/dist/components/Slider/index.css +6 -3
  9. package/package.json +1 -1
package/dist/components/RangeSlider/README.md CHANGED
@@ -25,7 +25,7 @@ shape `FieldDateRange` uses.
25
25
  | `size` | `"sm" \| "md" \| "lg" \| string` | `"md"` | Cross-axis thickness preset |
26
26
  | `intent` | `"primary" \| "accent" \| "success" \| "warning" \| "destructive"` | - | Semantic fill color |
27
27
  | `thumb` | `boolean \| Snippet<[RangeSliderRenderCtx]>` | `true` | `false` hides both thumbs (fill-only look), a snippet renders inside each thumb (its context says which one) |
28
- | `fillRounded` | `boolean` | `false` | Round the fill's edges ("pill inside a pill") |
28
+ | `fillRounded` | `boolean` | `true` | Round the fill's edges ("pill inside a pill"); `false` cuts them flat |
29
29
  | `ticks` | `boolean \| number[]` | - | `true` = tick at every `step` (positive numeric step only; skipped above 101 auto ticks — pass an array), array = ticks at given in-range values |
30
30
  | `valueLabel` | `Snippet<[RangeSliderRenderCtx]>` | - | Floating label per thumb, at its value along the track |
31
31
  | `disabled` | `boolean` | `false` | Disable interaction |
@@ -263,29 +263,29 @@ when `thumb={false}`).
263
263
 
264
264
  ## CSS Variables
265
265
 
266
- | Variable | Default | Description |
267
- | --------------------------------------- | ----------------------------- | ---------------------------------- |
268
- | `--stuic-range-slider-track` | `--stuic-color-muted` | Track (pill background) color |
269
- | `--stuic-range-slider-fill` | `--stuic-color-primary` | Fill (selected range) color |
270
- | `--stuic-range-slider-thumb` | `--color-white` | Thumb background |
271
- | `--stuic-range-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color |
272
- | `--stuic-range-slider-tick` | foreground 25% mix | Tick mark color (over the track) |
273
- | `--stuic-range-slider-tick-on-fill` | background 55% mix | Tick mark color (over the fill) |
274
- | `--stuic-range-slider-ring-width` | `4px` | Focus ring width |
275
- | `--stuic-range-slider-ring-color` | `--stuic-color-ring` | Focus ring color |
276
- | `--stuic-range-slider-thickness` | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size |
277
- | `--stuic-range-slider-length` | `10rem` | Main-axis size |
278
- | `--stuic-range-slider-thumb-inset` | `3px` | Gap between thumb and track edge |
279
- | `--stuic-range-slider-radius` | `9999px` | Track corner radius |
280
- | `--stuic-range-slider-fill-radius` | `--stuic-range-slider-radius` | Fill radius (when `fillRounded`) |
281
- | `--stuic-range-slider-thumb-radius` | `9999px` | Thumb corner radius |
282
- | `--stuic-range-slider-thumb-shadow` | `--stuic-shadow` | Thumb shadow |
283
- | `--stuic-range-slider-tick-size` | `4px` | Tick mark diameter |
284
- | `--stuic-range-slider-value-gap` | `0.375rem` | Gap between track and value labels |
285
- | `--stuic-range-slider-transition` | `--stuic-transition` | Fill/thumb movement transition |
266
+ | Variable | Default | Description |
267
+ | --------------------------------------- | ----------------------------- | ------------------------------------------ |
268
+ | `--stuic-range-slider-track` | `--stuic-color-muted` | Track (pill background) color |
269
+ | `--stuic-range-slider-fill` | `--stuic-color-primary` | Fill (selected range) color |
270
+ | `--stuic-range-slider-thumb` | `--color-white` | Thumb background |
271
+ | `--stuic-range-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color |
272
+ | `--stuic-range-slider-tick` | foreground 25% mix | Tick mark color (over the track) |
273
+ | `--stuic-range-slider-tick-on-fill` | background 55% mix | Tick mark color (over the fill) |
274
+ | `--stuic-range-slider-ring-width` | `4px` | Focus ring width |
275
+ | `--stuic-range-slider-ring-color` | `--stuic-color-ring` | Focus ring color |
276
+ | `--stuic-range-slider-thickness` | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size |
277
+ | `--stuic-range-slider-length` | `10rem` | Main-axis size |
278
+ | `--stuic-range-slider-thumb-inset` | `3px` | Gap between thumb and track edge |
279
+ | `--stuic-range-slider-radius` | `9999px` | Track corner radius |
280
+ | `--stuic-range-slider-fill-radius` | `--stuic-range-slider-radius` | Fill radius (unless `fillRounded={false}`) |
281
+ | `--stuic-range-slider-thumb-radius` | `9999px` | Thumb corner radius |
282
+ | `--stuic-range-slider-thumb-shadow` | `--stuic-shadow` | Thumb shadow |
283
+ | `--stuic-range-slider-tick-size` | `4px` | Tick mark diameter |
284
+ | `--stuic-range-slider-value-gap` | `0.375rem` | Gap between track and value labels |
285
+ | `--stuic-range-slider-transition` | `--stuic-transition` | Fill/thumb movement transition |
286
286
 
287
287
  Data attributes on the root, for custom CSS: `data-orientation`, `data-thumbs`
288
- (`"true"` / `"false"`), `data-fill-rounded`, `data-size`, `data-intent`,
288
+ (`"true"` / `"false"`), `data-fill-rounded` (`"true"` / `"false"`), `data-size`, `data-intent`,
289
289
  `data-disabled`, `data-dragging` / `data-ring` / `data-active-thumb` (each naming a
290
290
  thumb: `"start"` / `"end"`). Thumbs, value labels and the hidden inputs carry
291
291
  `data-thumb="start|end"`; tick layers `data-layer="before|on-fill|after"`.
package/dist/components/RangeSlider/RangeSlider.svelte CHANGED
@@ -120,8 +120,8 @@
120
120
  */
121
121
  thumb?: boolean | Snippet<[RangeSliderRenderCtx]>;
122
122
  /**
123
- * Round the fill's edges (instead of flat cuts), giving the "pill inside a
124
- * pill" look.
123
+ * Round the fill's edges, giving the "pill inside a pill" look (the
124
+ * default). `false` cuts them flat.
125
125
  */
126
126
  fillRounded?: boolean;
127
127
  /**
@@ -183,7 +183,7 @@
183
183
  tickClass,
184
184
  valueClass,
185
185
  thumb = true,
186
- fillRounded = false,
186
+ fillRounded = true,
187
187
  ticks,
188
188
  valueLabel,
189
189
  el = $bindable(),
@@ -670,7 +670,7 @@
670
670
  data-stuic-range-slider=""
671
671
  data-orientation={orientation}
672
672
  data-thumbs={_thumbReserved ? "true" : "false"}
673
- data-fill-rounded={fillRounded ? "true" : undefined}
673
+ data-fill-rounded={fillRounded ? "true" : "false"}
674
674
  data-size={!unstyled ? size : undefined}
675
675
  data-intent={!unstyled ? intent : undefined}
676
676
  data-disabled={disabled ? "true" : undefined}
package/dist/components/RangeSlider/RangeSlider.svelte.d.ts CHANGED
@@ -87,8 +87,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
87
87
  */
88
88
  thumb?: boolean | Snippet<[RangeSliderRenderCtx]>;
89
89
  /**
90
- * Round the fill's edges (instead of flat cuts), giving the "pill inside a
91
- * pill" look.
90
+ * Round the fill's edges, giving the "pill inside a pill" look (the
91
+ * default). `false` cuts them flat.
92
92
  */
93
93
  fillRounded?: boolean;
94
94
  /**
package/dist/components/RangeSlider/index.css CHANGED
@@ -174,6 +174,12 @@
174
174
  .stuic-range-slider .fill {
175
175
  position: absolute;
176
176
  background: var(--_fill);
177
+ /* Rounded edges ("pill inside a pill") are the default;
178
+ `fillRounded={false}` cuts them flat below. */
179
+ border-radius: var(
180
+ --stuic-range-slider-fill-radius,
181
+ var(--stuic-range-slider-radius, 9999px)
182
+ );
177
183
  }
178
184
  /* With thumbs, the fill spans the thumb-center travel between the two values
179
185
  plus one thumb: it reaches the outer edge of both thumbs and, when they
@@ -198,12 +204,9 @@
198
204
  height: var(--_fill-len);
199
205
  }
200
206
 
201
- /* Rounded edges ("pill inside a pill") */
202
- .stuic-range-slider[data-fill-rounded="true"] .fill {
203
- border-radius: var(
204
- --stuic-range-slider-fill-radius,
205
- var(--stuic-range-slider-radius, 9999px)
206
- );
207
+ /* Flat edges (opt out of the default pill) */
208
+ .stuic-range-slider[data-fill-rounded="false"] .fill {
209
+ border-radius: 0;
207
210
  }
208
211
 
209
212
  /* ============================================================================
package/dist/components/Slider/README.md CHANGED
@@ -22,7 +22,7 @@ variant for custom UI (volume/brightness controls, dashboards, media players).
22
22
  | `thumb` | `boolean \| Snippet<[SliderRenderCtx]>` | `true` | `false` hides the thumb (fill-only look), snippet renders inside thumb |
23
23
  | `thumbPosition` | `"value" \| "start"` | `"value"` | `"value"` rides the fill edge; `"start"` pins it to the left/bottom so only the bar moves (true iOS volume look) |
24
24
  | `thumbReserve` | `boolean` | `true` | Reserve the thumb's footprint along the track, so the fill never shrinks below the thumb. `false` = linear mapping across the full track (fill collapses to zero at `min`); only honored with `thumbPosition="start"` |
25
- | `fillRounded` | `boolean` | `false` | Round the fill's leading edge ("pill inside a pill") |
25
+ | `fillRounded` | `boolean` | `true` | Round the fill's leading edge ("pill inside a pill"); `false` cuts it flat |
26
26
  | `ticks` | `boolean \| number[]` | - | `true` = tick at every `step` (positive numeric step only; skipped above 101 auto ticks — pass an array), array = ticks at given in-range values |
27
27
  | `valueLabel` | `Snippet<[SliderRenderCtx]>` | - | Floating label at the current value along the track |
28
28
  | `disabled` | `boolean` | `false` | Disable interaction |
@@ -103,7 +103,6 @@ track and the fill collapses to zero at `min`.
103
103
  <Slider
104
104
  orientation="vertical"
105
105
  thumbPosition="start"
106
- fillRounded
107
106
  thumbClass="bg-transparent shadow-none"
108
107
  bind:value={volume}
109
108
  >
@@ -123,8 +122,8 @@ track and the fill collapses to zero at `min`.
123
122
  With `thumbPosition="start"` the thumb never moves — only the bar does. It is purely
124
123
  decorative (the full-size hidden input is always the topmost hit target, so the thumb
125
124
  never receives pointer events), but it still **reserves its footprint** along the track:
126
- the fill can never shrink below it, and at `min` it is exactly a thumb-sized nub — with
127
- `fillRounded`, a circle enclosing the pinned thumb, same as the default
125
+ the fill can never shrink below it, and at `min` it is exactly a thumb-sized nub — by
126
+ default (`fillRounded`) a circle enclosing the pinned thumb, same as the default
128
127
  `thumbPosition="value"` look.
129
128
 
130
129
  Opt out with `thumbReserve={false}` for a linear mapping across the full track, where
@@ -202,23 +201,23 @@ the fill collapses to zero at `min` (and, at low values, is shorter than the thu
202
201
 
203
202
  ## CSS Variables
204
203
 
205
- | Variable | Default | Description |
206
- | --------------------------------- | -------------------------- | --------------------------------- |
207
- | `--stuic-slider-track` | `--stuic-color-muted` | Track (pill background) color |
208
- | `--stuic-slider-fill` | `--stuic-color-primary` | Fill color |
209
- | `--stuic-slider-thumb` | `--color-white` | Thumb background |
210
- | `--stuic-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color |
211
- | `--stuic-slider-tick` | foreground 25% mix | Tick mark color (over the track) |
212
- | `--stuic-slider-tick-on-fill` | background 55% mix | Tick mark color (over the fill) |
213
- | `--stuic-slider-ring-width` | `4px` | Focus ring width |
214
- | `--stuic-slider-ring-color` | `--stuic-color-ring` | Focus ring color |
215
- | `--stuic-slider-thickness` | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size |
216
- | `--stuic-slider-length` | `10rem` | Main-axis size |
217
- | `--stuic-slider-thumb-inset` | `3px` | Gap between thumb and track edge |
218
- | `--stuic-slider-radius` | `9999px` | Track corner radius |
219
- | `--stuic-slider-fill-radius` | `--stuic-slider-radius` | Fill radius (when `fillRounded`) |
220
- | `--stuic-slider-thumb-radius` | `9999px` | Thumb corner radius |
221
- | `--stuic-slider-thumb-shadow` | `--stuic-shadow` | Thumb shadow |
222
- | `--stuic-slider-tick-size` | `4px` | Tick mark diameter |
223
- | `--stuic-slider-value-gap` | `0.375rem` | Gap between track and value label |
224
- | `--stuic-slider-transition` | `--stuic-transition` | Fill/thumb movement transition |
204
+ | Variable | Default | Description |
205
+ | --------------------------------- | -------------------------- | ------------------------------------------ |
206
+ | `--stuic-slider-track` | `--stuic-color-muted` | Track (pill background) color |
207
+ | `--stuic-slider-fill` | `--stuic-color-primary` | Fill color |
208
+ | `--stuic-slider-thumb` | `--color-white` | Thumb background |
209
+ | `--stuic-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color |
210
+ | `--stuic-slider-tick` | foreground 25% mix | Tick mark color (over the track) |
211
+ | `--stuic-slider-tick-on-fill` | background 55% mix | Tick mark color (over the fill) |
212
+ | `--stuic-slider-ring-width` | `4px` | Focus ring width |
213
+ | `--stuic-slider-ring-color` | `--stuic-color-ring` | Focus ring color |
214
+ | `--stuic-slider-thickness` | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size |
215
+ | `--stuic-slider-length` | `10rem` | Main-axis size |
216
+ | `--stuic-slider-thumb-inset` | `3px` | Gap between thumb and track edge |
217
+ | `--stuic-slider-radius` | `9999px` | Track corner radius |
218
+ | `--stuic-slider-fill-radius` | `--stuic-slider-radius` | Fill radius (unless `fillRounded={false}`) |
219
+ | `--stuic-slider-thumb-radius` | `9999px` | Thumb corner radius |
220
+ | `--stuic-slider-thumb-shadow` | `--stuic-shadow` | Thumb shadow |
221
+ | `--stuic-slider-tick-size` | `4px` | Tick mark diameter |
222
+ | `--stuic-slider-value-gap` | `0.375rem` | Gap between track and value label |
223
+ | `--stuic-slider-transition` | `--stuic-transition` | Fill/thumb movement transition |
package/dist/components/Slider/Slider.svelte CHANGED
@@ -100,8 +100,8 @@
100
100
  */
101
101
  thumbReserve?: boolean;
102
102
  /**
103
- * Round the fill's leading edge (instead of a flat cut), giving the
104
- * "pill inside a pill" look.
103
+ * Round the fill's leading edge, giving the "pill inside a pill" look
104
+ * (the default). `false` cuts it flat.
105
105
  */
106
106
  fillRounded?: boolean;
107
107
  /**
@@ -152,7 +152,7 @@
152
152
  thumb = true,
153
153
  thumbPosition = "value",
154
154
  thumbReserve = true,
155
- fillRounded = false,
155
+ fillRounded = true,
156
156
  ticks,
157
157
  valueLabel,
158
158
  el = $bindable(),
@@ -447,7 +447,7 @@
447
447
  data-thumb-position={thumb !== false ? thumbPosition : undefined}
448
448
  data-thumb-travels={_thumbTravels ? "true" : "false"}
449
449
  data-thumb-reserved={_thumbReserved ? "true" : "false"}
450
- data-fill-rounded={fillRounded ? "true" : undefined}
450
+ data-fill-rounded={fillRounded ? "true" : "false"}
451
451
  data-size={!unstyled ? size : undefined}
452
452
  data-intent={!unstyled ? intent : undefined}
453
453
  data-disabled={disabled ? "true" : undefined}
package/dist/components/Slider/Slider.svelte.d.ts CHANGED
@@ -80,8 +80,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
80
80
  */
81
81
  thumbReserve?: boolean;
82
82
  /**
83
- * Round the fill's leading edge (instead of a flat cut), giving the
84
- * "pill inside a pill" look.
83
+ * Round the fill's leading edge, giving the "pill inside a pill" look
84
+ * (the default). `false` cuts it flat.
85
85
  */
86
86
  fillRounded?: boolean;
87
87
  /**
package/dist/components/Slider/index.css CHANGED
@@ -115,6 +115,9 @@
115
115
  .stuic-slider .fill {
116
116
  position: absolute;
117
117
  background: var(--_fill);
118
+ /* Rounded leading edge ("pill inside a pill") is the default;
119
+ `fillRounded={false}` cuts it flat below. */
120
+ border-radius: var(--stuic-slider-fill-radius, var(--stuic-slider-radius, 9999px));
118
121
  }
119
122
  /* With a reserved thumb (traveling OR pinned), the fill spans the thumb-center
120
123
  travel plus the thumb itself: it reaches the far edge of a traveling thumb and,
@@ -135,9 +138,9 @@
135
138
  height: var(--_fill-len);
136
139
  }
137
140
 
138
- /* Rounded leading edge ("pill inside a pill") */
139
- .stuic-slider[data-fill-rounded="true"] .fill {
140
- border-radius: var(--stuic-slider-fill-radius, var(--stuic-slider-radius, 9999px));
141
+ /* Flat leading edge (opt out of the default pill) */
142
+ .stuic-slider[data-fill-rounded="false"] .fill {
143
+ border-radius: 0;
141
144
  }
142
145
 
143
146
  /* ============================================================================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/stuic",
3
- "version": "3.190.0",
3
+ "version": "3.191.0",
4
4
  "packageManager": "pnpm@11.5.0",
5
5
  "scripts": {
6
6
  "dev": "vite dev",