fluent-svelte-extra 2.2.3 → 2.2.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 (6) hide show
  1. package/MenuFlyout/MenuFlyoutWrapper.svelte +8 -2
  2. package/MenuFlyout/MenuFlyoutWrapper.svelte.d.ts +4 -3
  3. package/Slider/Slider.scss +18 -0
  4. package/Slider/Slider.svelte +125 -31
  5. package/Slider/Slider.svelte.d.ts +6 -0
  6. package/package.json +1 -1
package/MenuFlyout/MenuFlyoutWrapper.svelte CHANGED
@@ -4,6 +4,7 @@ import { arrowNavigation, uid } from "../internal";
4
4
  import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
5
5
  /** Determines the flyout's visibility. */
6
6
  export let open = false;
7
+ export let disabled = false;
7
8
  /** Determines if the flyout can be closed using conventional user interaction. */
8
9
  export let closable = true;
9
10
  /** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
@@ -41,6 +42,8 @@ function handleEscapeKey({ key }) {
41
42
  }
42
43
  }
43
44
  function toggleFlyout() {
45
+ if (!open && disabled)
46
+ return;
44
47
  previousFocus = document.activeElement;
45
48
  open = !open;
46
49
  }
@@ -50,10 +53,10 @@ function closeFlyout() {
50
53
  previousFocus = null;
51
54
  }
52
55
  }
53
- setContext("closeFlyout", event => {
56
+ setContext("closeFlyout", (e) => {
54
57
  dispatch("select");
55
58
  if (closeOnSelect && closable) {
56
- event.stopPropagation();
59
+ e.stopPropagation();
57
60
  open = false;
58
61
  previousFocus = null;
59
62
  }
@@ -62,6 +65,7 @@ setContext("closeFlyout", event => {
62
65
 
63
66
  <svelte:window on:keydown={handleEscapeKey} />
64
67
 
68
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
65
69
  <div
66
70
  class="menu-flyout-wrapper {className}"
67
71
  aria-expanded={open}
@@ -72,6 +76,7 @@ setContext("closeFlyout", event => {
72
76
  >
73
77
  <slot />
74
78
  {#if open}
79
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
75
80
  <div
76
81
  id={menuId}
77
82
  class="menu-flyout-anchor placement-{placement} alignment-{alignment}"
@@ -90,6 +95,7 @@ setContext("closeFlyout", event => {
90
95
  <slot name="flyout" />
91
96
  </MenuFlyoutSurface>
92
97
  </div>
98
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
93
99
  <div
94
100
  class="menu-flyout-backdrop"
95
101
  bind:this={backdropElement}
package/MenuFlyout/MenuFlyoutWrapper.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  open?: boolean;
6
+ disabled?: boolean;
6
7
  closable?: boolean;
7
8
  closeOnSelect?: boolean;
8
9
  placement?: "top" | "bottom" | "left" | "right";
@@ -10,10 +11,10 @@ declare const __propDef: {
10
11
  offset?: number;
11
12
  acrylic?: boolean;
12
13
  class?: string;
13
- wrapperElement?: HTMLDivElement;
14
- anchorElement?: HTMLDivElement;
14
+ wrapperElement?: HTMLDivElement | null;
15
+ anchorElement?: HTMLDivElement | null;
15
16
  menuElement?: HTMLUListElement;
16
- backdropElement?: HTMLDivElement;
17
+ backdropElement?: HTMLDivElement | null;
17
18
  };
18
19
  events: {
19
20
  select: CustomEvent<any>;
package/Slider/Slider.scss CHANGED
@@ -60,6 +60,12 @@
60
60
  transform: translateX(-50%);
61
61
  }
62
62
 
63
+ &hover-preview {
64
+ inset-inline-start: var(--slider-hover-position);
65
+ inset-block-end: calc(100% + 8px);
66
+ transform: translateX(-50%);
67
+ }
68
+
63
69
  &tick {
64
70
  flex-direction: column;
65
71
  height: 100%;
@@ -118,6 +124,12 @@
118
124
  transform: translateY(50%);
119
125
  }
120
126
 
127
+ &hover-preview {
128
+ inset-block-end: var(--slider-hover-position);
129
+ inset-inline-start: calc(100% + 8px);
130
+ transform: translateY(50%);
131
+ }
132
+
121
133
  &tick {
122
134
  width: 100%;
123
135
  padding: 0 6px;
@@ -194,6 +206,12 @@
194
206
  background-color: var(--control-strong-stroke-default);
195
207
  }
196
208
 
209
+ &-hover-preview {
210
+ position: absolute;
211
+ z-index: 30;
212
+ pointer-events: none;
213
+ }
214
+
197
215
  &-tick-bar {
198
216
  position: absolute;
199
217
  z-index: -1;
package/Slider/Slider.svelte CHANGED
@@ -51,6 +51,11 @@ export let bufferElement = null;
51
51
  let dragging = false;
52
52
  let holding = false;
53
53
  let directionAwareReverse = false;
54
+ let activePointerEvent = null;
55
+ let hoveringRail = false;
56
+ let hoverPreviewValue = min;
57
+ let hoverValuePercentage = 0;
58
+ let hoverPositionPercentage = 0;
54
59
  // also adding client height will enable users to create distinct shapes for the thumb
55
60
  let thumbClientWidth = 20;
56
61
  let thumbClientHeight = 20;
@@ -69,64 +74,130 @@ const forwardEvents = createEventForwarder(get_current_component(), [
69
74
  "end",
70
75
  "beforeinput"
71
76
  ]);
77
+ const clamp = (v, minValue, maxValue) => Math.min(maxValue, Math.max(minValue, v));
72
78
  // Divides the current value minus the minimum value
73
79
  // by the difference between the max and min values,
74
80
  // and multiplies by 100 to get a percentage.
75
- const valueToPercentage = v => ((v - min) / (max - min)) * 100;
76
- const bufferValueToPercentage = v => (v * 100) / max;
81
+ const valueToPercentage = (v) => {
82
+ if (max === min)
83
+ return 0;
84
+ return ((v - min) / (max - min)) * 100;
85
+ };
86
+ const bufferValueToPercentage = (v) => {
87
+ if (max === 0)
88
+ return 0;
89
+ return (v * 100) / max;
90
+ };
77
91
  function cancelMove() {
78
92
  holding = false;
79
93
  dragging = false;
94
+ activePointerEvent = null;
80
95
  if (sliderThumbHolding) {
81
96
  sliderThumbHolding = false;
82
97
  dispatch("userHoldEnd");
83
98
  }
84
99
  }
85
- function handleMove() {
100
+ function handleMove(event) {
101
+ activePointerEvent = event;
86
102
  if (holding)
87
103
  dragging = true;
104
+ if (hoveringRail)
105
+ updateHoverPreview(event);
88
106
  }
89
- function calculateValue(event) {
107
+ function getClientPoint(event) {
108
+ var _a;
109
+ if ("touches" in event) {
110
+ const touch = (_a = event.touches[0]) !== null && _a !== void 0 ? _a : event.changedTouches[0];
111
+ if (!touch)
112
+ return null;
113
+ return {
114
+ x: touch.clientX,
115
+ y: touch.clientY
116
+ };
117
+ }
118
+ return {
119
+ x: event.clientX,
120
+ y: event.clientY
121
+ };
122
+ }
123
+ function percentToStepValue(percent) {
124
+ const safeStep = step > 0 ? step : 1;
125
+ let nextStep = min + Math.round(((max - min) * percent) / safeStep) * safeStep;
126
+ if (nextStep <= min)
127
+ nextStep = min;
128
+ else if (nextStep >= max)
129
+ nextStep = max;
130
+ return nextStep;
131
+ }
132
+ function getPointerData(event) {
90
133
  if (disabled || !railElement)
91
- return;
92
- const { top, bottom, left, right, width, height } = railElement.getBoundingClientRect();
93
- const percentageX = event.touches ? event.touches[0].clientX : event.clientX;
94
- const percentageY = event.touches ? event.touches[0].clientY : event.clientY;
134
+ return null;
135
+ const point = getClientPoint(event);
136
+ if (!point)
137
+ return null;
138
+ const rect = railElement.getBoundingClientRect();
95
139
  const thumbSize = orientation === "horizontal" ? thumbClientWidth : thumbClientHeight;
96
- const totalLength = orientation === "horizontal" ? width : height;
140
+ const totalLength = orientation === "horizontal" ? rect.width : rect.height;
97
141
  const effectiveLength = totalLength - thumbSize;
98
- if (effectiveLength <= 0)
99
- return;
142
+ if (totalLength <= 0 || effectiveLength <= 0)
143
+ return null;
100
144
  let distanceFromMin = 0;
145
+ let visualPercent = 0;
101
146
  if (orientation === "horizontal") {
147
+ const visualDistance = clamp(point.x - rect.left, 0, rect.width);
148
+ visualPercent = visualDistance / rect.width;
102
149
  if (directionAwareReverse) {
103
- distanceFromMin = right - percentageX;
150
+ distanceFromMin = rect.right - point.x;
104
151
  }
105
152
  else {
106
- distanceFromMin = percentageX - left;
153
+ distanceFromMin = point.x - rect.left;
107
154
  }
108
155
  }
109
156
  else {
157
+ const visualDistance = clamp(rect.bottom - point.y, 0, rect.height);
158
+ visualPercent = visualDistance / rect.height;
110
159
  if (directionAwareReverse) {
111
- distanceFromMin = percentageY - top;
160
+ distanceFromMin = point.y - rect.top;
112
161
  }
113
162
  else {
114
- distanceFromMin = bottom - percentageY;
163
+ distanceFromMin = rect.bottom - point.y;
115
164
  }
116
165
  }
117
166
  const relativePos = distanceFromMin - thumbSize / 2;
118
- let percent = relativePos / effectiveLength;
119
- if (percent < 0)
120
- percent = 0;
121
- if (percent > 1)
122
- percent = 1;
123
- let nextStep = min + Math.round(((max - min) * percent) / step) * step;
124
- if (nextStep <= min)
125
- nextStep = min;
126
- else if (nextStep >= max)
127
- nextStep = max;
128
- dispatch("userChange", [value, nextStep]);
129
- value = nextStep;
167
+ const logicalPercent = clamp(relativePos / effectiveLength, 0, 1);
168
+ return {
169
+ value: percentToStepValue(logicalPercent),
170
+ valuePercentage: logicalPercent * 100,
171
+ positionPercentage: visualPercent * 100
172
+ };
173
+ }
174
+ function calculateValue(event) {
175
+ const pointerData = getPointerData(event);
176
+ if (!pointerData)
177
+ return;
178
+ dispatch("userChange", [value, pointerData.value]);
179
+ value = pointerData.value;
180
+ }
181
+ function updateHoverPreview(event) {
182
+ const pointerData = getPointerData(event);
183
+ if (!pointerData)
184
+ return;
185
+ hoveringRail = true;
186
+ hoverPreviewValue = pointerData.value;
187
+ hoverValuePercentage = pointerData.valuePercentage;
188
+ hoverPositionPercentage = pointerData.positionPercentage;
189
+ dispatch("hoverChange", {
190
+ value: hoverPreviewValue,
191
+ percentage: hoverValuePercentage,
192
+ positionPercentage: hoverPositionPercentage
193
+ });
194
+ }
195
+ function clearHoverPreview() {
196
+ hoveringRail = false;
197
+ }
198
+ function handleHoverMove(event) {
199
+ activePointerEvent = event;
200
+ updateHoverPreview(event);
130
201
  }
131
202
  function handleArrowKeys(event) {
132
203
  const { key } = event;
@@ -153,6 +224,8 @@ function handleTouchStart(event) {
153
224
  if (event.cancelable)
154
225
  event.preventDefault();
155
226
  holding = true;
227
+ activePointerEvent = event;
228
+ updateHoverPreview(event);
156
229
  }
157
230
  function linearScale(input, output) {
158
231
  return (value) => {
@@ -188,8 +261,8 @@ $: {
188
261
  value = min;
189
262
  else if (value >= max)
190
263
  value = max;
191
- if (dragging) {
192
- calculateValue(event);
264
+ if (dragging && activePointerEvent) {
265
+ calculateValue(activePointerEvent);
193
266
  dragging = false;
194
267
  }
195
268
  }
@@ -214,17 +287,24 @@ A slider is a control that lets the user select from a range of values by moving
214
287
  -->
215
288
  <div
216
289
  use:forwardEvents
217
- on:mousedown|preventDefault={() => {
290
+ on:mousedown|preventDefault={event => {
218
291
  holding = true;
219
292
  dragging = true;
293
+ activePointerEvent = event;
294
+ updateHoverPreview(event);
220
295
  }}
296
+ on:mousemove={handleHoverMove}
297
+ on:mouseleave={clearHoverPreview}
221
298
  on:mouseup|preventDefault={() => {
222
299
  dispatch("userUpdate", value);
223
300
  }}
301
+ on:touchmove={handleHoverMove}
224
302
  on:touchend|preventDefault={() => {
303
+ clearHoverPreview();
225
304
  dispatch("userUpdate", value);
226
305
  }}
227
306
  on:touchcancel|preventDefault={() => {
307
+ clearHoverPreview();
228
308
  dispatch("userUpdate", value);
229
309
  }}
230
310
  on:touchstart={handleTouchStart}
@@ -301,6 +381,20 @@ A slider is a control that lets the user select from a range of values by moving
301
381
  {/if}
302
382
  </div>
303
383
 
384
+ {#if hoveringRail && $$slots["hover-preview"] && !disabled}
385
+ <div
386
+ class="slider-hover-preview"
387
+ style="--fds-slider-hover-position: {hoverPositionPercentage}%"
388
+ >
389
+ <slot
390
+ name="hover-preview"
391
+ value={hoverPreviewValue}
392
+ percentage={hoverValuePercentage}
393
+ positionPercentage={hoverPositionPercentage}
394
+ />
395
+ </div>
396
+ {/if}
397
+
304
398
  {#if ticks}
305
399
  <div class="slider-tick-bar placement-{tickPlacement}" bind:this={tickBarElement}>
306
400
  {#each ticks as tick}
@@ -315,4 +409,4 @@ A slider is a control that lets the user select from a range of values by moving
315
409
  <input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputElement} />
316
410
  </div>
317
411
 
318
- <style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start;position:relative}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage);position:absolute;z-index:1}.slider.orientation-horizontal .slider-buffer-track{block-size:100%;inline-size:var(--fds-buffer-percentage);position:absolute}.slider.orientation-horizontal .slider-loading-track{width:100%;z-index:1}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-buffer-track{background-color:var(--fds-control-strong-stroke-default)}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
412
+ <style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start;position:relative}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage);position:absolute;z-index:1}.slider.orientation-horizontal .slider-buffer-track{block-size:100%;inline-size:var(--fds-buffer-percentage);position:absolute}.slider.orientation-horizontal .slider-loading-track{width:100%;z-index:1}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-hover-preview{inset-block-end:calc(100% + 8px);inset-inline-start:var(--fds-slider-hover-position);transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-hover-preview{inset-block-end:var(--fds-slider-hover-position);inset-inline-start:calc(100% + 8px);transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-buffer-track{background-color:var(--fds-control-strong-stroke-default)}.slider-hover-preview{pointer-events:none;position:absolute;z-index:30}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
package/Slider/Slider.svelte.d.ts CHANGED
@@ -33,6 +33,7 @@ declare const __propDef: {
33
33
  userHoldStart: CustomEvent<any>;
34
34
  userHoldEnd: CustomEvent<any>;
35
35
  userChange: CustomEvent<any>;
36
+ hoverChange: CustomEvent<any>;
36
37
  change: CustomEvent<any>;
37
38
  end: CustomEvent<any>;
38
39
  } & {
@@ -44,6 +45,11 @@ declare const __propDef: {
44
45
  suffix: string;
45
46
  value: number;
46
47
  };
48
+ 'hover-preview': {
49
+ value: number;
50
+ percentage: number;
51
+ positionPercentage: number;
52
+ };
47
53
  };
48
54
  };
49
55
  export declare type SliderProps = typeof __propDef.props;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "2.2.3",
3
+ "version": "2.2.5",
4
4
  "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
5
5
  "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
6
6
  "license": "MIT",