fluent-svelte-extra 1.0.0

package/src/lib/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	/** Determines a completion amount in percentage. If no value or an invalid value is provided, the bar will be indeterminate. */
+	export let value: number = undefined;
+
+	/** Determines the progress bar's visual state. */
+	// export let status: "running" | "paused" | "error" = "running";
+
+	/** Specifies a custom class name for the bar. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the bar's SVG element. */
+	export let element: SVGElement = null;
+
+	/** Obtains a bound DOM reference to the bar's background rail element. Only available if the bar has a determinate value. */
+	export let railElement: SVGRectElement = null;
+
+	/** Obtains a bound DOM reference to the bar's primary track element. */
+	export let trackElement: SVGRectElement = null;
+
+	/** Obtains a bound DOM reference to the bar's secondary track element. Only available if the bar is indeterminate. */
+	export let secondaryTrackElement: SVGRectElement = null;
+</script>
+
+<svg
+	class="progress-bar {className}"
+	role="progressbar"
+	width="100%"
+	height="3"
+	aria-valuemin={value ? 0 : undefined}
+	aria-valuemax={value ? 100 : undefined}
+	aria-valuenow={value}
+	class:indeterminate={!value}
+	bind:this={element}
+	{...$$restProps}
+>
+	{#if value}
+		<rect
+			bind:this={railElement}
+			height="1"
+			rx="0.5"
+			y="1"
+			width="100%"
+			class="progress-bar-rail"
+		/>
+	{:else}
+		<rect bind:this={secondaryTrackElement} height="3" ry="3" class="progress-bar-track" />
+	{/if}
+	<rect
+		bind:this={trackElement}
+		width={value ? `${value}%` : undefined}
+		height="3"
+		rx="1.5"
+		class="progress-bar-track"
+	/>
+</svg>
+
+<style lang="scss">
+	@use "./ProgressBar";
+</style>

package/src/lib/ProgressRing/ProgressRing.scss

@@ -0,0 +1,37 @@
+@keyframes progress-ring-indeterminate {
+	0% {
+		stroke-dasharray: 0.01px 43.97px;
+		transform: rotate(0);
+	}
+	50% {
+		stroke-dasharray: 21.99px 21.99px;
+		transform: rotate(450deg);
+	}
+	100% {
+		stroke-dasharray: 0.01px 43.97px;
+		transform: rotate(1080deg);
+	}
+}
+
+.progress-ring {
+	outline: none;
+	min-inline-size: 16px;
+	min-block-size: 16px;
+
+	circle {
+		transform: rotate(-90deg);
+		transform-origin: 50% 50%;
+		transition: all var(--control-normal-duration) linear;
+		fill: none;
+		stroke: var(--accent-default);
+		stroke: {
+			width: 1.5;
+			linecap: round;
+			dasharray: 43.97;
+		}
+	}
+
+	&.indeterminate circle {
+		animation: progress-ring-indeterminate 2s linear infinite;
+	}
+}

package/src/lib/ProgressRing/ProgressRing.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { createEventForwarder } from "$lib/internal";
+	import { createEventDispatcher } from "svelte";
+	import { get_current_component } from "svelte/internal";
+
+	/** Determines a completion amount in percentage (0-100). If no value or an invalid value is provided, the ring will be indeterminate. */
+	export let value: number = undefined;
+
+	/** The size (diameter) of the ring in pixels. */
+	export let size = 32;
+
+	/** Specifies a custom class name for the ring. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the ring's SVG element. */
+	export let element: SVGElement = null;
+
+	/** Obtains a bound DOM reference to the ring's fill circle element. */
+	export let circleElement: SVGCircleElement = null;
+
+	const forwardEvents = createEventForwarder(get_current_component(), ["change"]);
+	const dispatch = createEventDispatcher();
+
+	let circumference: number;
+
+	$: indeterminate = typeof value === "undefined" || value === null || Number.isNaN(value);
+	$: dispatch("change", value);
+	$: if (circleElement) circumference = Math.PI * (circleElement.r.baseVal.value * 2);
+	$: if (value < 0) {
+		value = 0;
+	} else if (value > 100) {
+		value = 100;
+	}
+</script>
+
+<!--
+@component
+ProgressRing provides visual feedback to to the user that a long-running operation is underway. It can mean that the user cannot interact with the app when the progress indicator is visible, and can also indicate how long the wait time might be. [Docs](https://fluent-svelte.vercel.app/docs/components/progressring)
+- Usage:
+    ```tsx
+    <ProgressRing />
+    <ProgressRing value={50} />
+    ```
+-->
+<svg
+	use:forwardEvents
+	bind:this={element}
+	tabindex="-1"
+	class="progress-ring {className}"
+	class:indeterminate
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	role={value ? "progressbar" : "status"}
+	aria-valuemin={!indeterminate ? 0 : undefined}
+	aria-valuemax={!indeterminate ? 100 : undefined}
+	aria-valuenow={value}
+	{...$$restProps}
+>
+	<circle
+		bind:this={circleElement}
+		cx="50%"
+		cy="50%"
+		r="7"
+		stroke-dasharray="3"
+		stroke-dashoffset={((100 - value) / 100) * circumference}
+	/>
+</svg>
+
+<style lang="scss">
+	@use "./ProgressRing";
+</style>

package/src/lib/RadioButton/RadioButton.scss

@@ -0,0 +1,114 @@
+@use "../mixins" as *;
+
+.radio-button {
+	@include flex($inline: true, $align: center, $justify: center);
+	@include typography-body;
+
+	position: relative;
+	margin: 0;
+	border: 1px solid var(--control-strong-stroke-default);
+	border-radius: 20px;
+	outline: none;
+	background-clip: padding-box;
+	background-color: var(--control-alt-fill-secondary);
+	appearance: none;
+	inline-size: 20px;
+	block-size: 20px;
+
+	&::before {
+		content: "";
+		inline-size: 4px;
+		block-size: 4px;
+		visibility: hidden;
+		position: absolute;
+		border-radius: 12px;
+		background-color: var(--text-on-accent-primary);
+	}
+
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+
+	&:hover {
+		background-color: var(--control-alt-fill-tertiary);
+	}
+
+	&:active {
+		border-color: var(--control-strong-stroke-disabled);
+		background-color: var(--control-alt-fill-quarternary);
+
+		&::before {
+			transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
+			visibility: visible;
+			inline-size: 10px;
+			block-size: 10px;
+		}
+	}
+
+	&:disabled {
+		border-color: var(--control-strong-stroke-disabled);
+		background-color: var(--control-alt-fill-disabled);
+
+		&::before {
+			visibility: hidden;
+		}
+
+		+ span {
+			color: var(--text-disabled);
+		}
+	}
+
+	&:checked {
+		border: none;
+		background-color: var(--accent-default);
+
+		&::before {
+			visibility: visible;
+			transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
+			box-shadow: 0 0 0 1px var(--control-stroke-default);
+			inline-size: 12px;
+			block-size: 12px;
+		}
+
+		&:hover {
+			background-color: var(--accent-secondary);
+
+			&::before {
+				inline-size: 14px;
+				block-size: 14px;
+			}
+		}
+
+		&:active {
+			background-color: var(--accent-tertiary);
+
+			&::before {
+				inline-size: 10px;
+				block-size: 10px;
+			}
+		}
+
+		&:disabled {
+			background-color: var(--accent-disabled);
+
+			&::before {
+				box-shadow: none;
+				inline-size: 12px;
+				block-size: 12px;
+			}
+		}
+	}
+
+	&-container {
+		@include flex($inline: true, $align: center);
+		@include typography-body;
+
+		color: var(--text-primary);
+		user-select: none;
+		min-block-size: 32px;
+
+		> span {
+			padding-inline-start: 8px;
+		}
+	}
+}

package/src/lib/RadioButton/RadioButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder } from "$lib/internal";
+
+	/** Bindable value representing a group of radio inputs that the input will be bound to. */
+	export let group: any = undefined;
+
+	/** Controls whether the radio is checked or not. Only valid is `group` is not bound. */
+	export let checked = false;
+
+	/** Sets the input element's native `value` attribute for usage in forms. */
+	export let value: any = undefined;
+
+	/** Controls whether the radio is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Specifies a custom class name for the radio. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the checkbox's <input /> element. */
+	export let inputElement: HTMLInputElement = null;
+
+	/** Obtains a bound DOM reference to the checkbox's outer container element. */
+	export let containerElement: HTMLLabelElement = null;
+
+	const forwardEvents = createEventForwarder(get_current_component());
+</script>
+
+<!--
+@component
+Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options. The singular behavior of a RadioButtons group distinguishes it from check boxes, which support multi-selection and deselection, or clearing. [Docs](https://fluent-svelte.vercel.app/docs/components/radiobutton)
+- Usage:
+    ```tsx
+    <script>
+        import { RadioButton } from "fluent-svelte";
+
+        let flavor = "chocolate";
+    </script>
+
+    <RadioButton bind:group={flavor} value="chocolate">Chocolate</RadioButton>
+    <RadioButton bind:group={flavor} value="vanilla">Vanilla</RadioButton>
+    <RadioButton bind:group={flavor} value="strawberry">Strawberry</RadioButton>
+    ```
+-->
+<label class="radio-button-container" bind:this={containerElement}>
+	<input
+		use:forwardEvents
+		type="radio"
+		class="radio-button {className}"
+		bind:group
+		bind:this={inputElement}
+		{value}
+		{checked}
+		{disabled}
+		{...$$restProps}
+	/>
+	{#if $$slots.default}
+		<span>
+			<slot />
+		</span>
+	{/if}
+</label>
+
+<style lang="scss">
+	@use "./RadioButton";
+</style>

package/src/lib/RangeSlider/RangeSlider.svelte

@@ -0,0 +1,91 @@
+<script>
+ import { createEventDispatcher } from 'svelte'
+ import Slider from '@bulatdashiev/svelte-slider'
+ import { TextBlock } from 'fluent-svelte'
+ export let min
+ export let max
+ export let width;
+ let values = min + ',' + max
+ let range = [min, max]
+
+ const dispatch = createEventDispatcher()
+
+ function handleChange(event) {
+     values = event.detail.toString()
+     dispatch('change', event.detail)
+ }
+</script>
+
+<div id="sliderComp" style="width: {width}">
+ <Slider
+     bind:value={range}
+     {min}
+     {max}
+     range
+     on:input={(e) => handleChange(e)}
+ >
+     <div
+         slot="left"
+         class="handle"
+         on:mouseup={() => dispatch('finish', values.toString())}
+     />
+     <div
+         slot="right"
+         class="handle"
+         on:mouseup={() => dispatch('finish', values.toString())}
+     />
+ </Slider>
+ <div id="vals">
+     <TextBlock>{values.split(',')[0]}</TextBlock>
+     <TextBlock>{values.split(',')[1]}</TextBlock>
+ </div>
+</div>
+
+<style>
+    #vals {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .handle {
+        width: 0;
+        height: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .handle::after {
+        background-color: hsl(199, 99%, 69%); /*mavi*/
+        border: solid 5px hsl(0, 0%, 30%);
+        content: ' ';
+        box-sizing: border-box;
+        position: absolute;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        transition: all 0.1s linear !important;
+    }
+
+    .handle:hover::after {
+        border: solid 4px hsl(0, 0%, 30%);
+    }
+
+    .handle:active::after {
+        border: solid 6px hsl(0, 0%, 30%);
+        box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
+    }
+
+    #sliderComp {
+        --thumb-bg: transparent;
+        --progress-bg: hsl(199, 99%, 69%);
+        --track-bg: hsl(0, 0%, 27%);
+    }
+
+    #sliderComp {
+        --thumb-bg: transparent;
+        --progress-bg: hsl(199, 99%, 69%);
+        --track-bg: hsl(0, 0%, 27%);
+    }
+</style>

package/src/lib/ScrollView/ScrollView.svelte

@@ -0,0 +1,9 @@
+<div class="scroll-view" />
+
+<style>
+	.scroll-view {
+		width: 100px;
+		height: 100px;
+		overflow: scroll;
+	}
+</style>

package/src/lib/Slider/Slider.scss

@@ -0,0 +1,263 @@
+@use "../mixins" as *;
+
+.slider {
+	@include flex($align: center, $justify: center);
+	position: relative;
+	border-radius: var(--control-corner-radius);
+	min-inline-size: 32px;
+	min-block-size: 32px;
+
+	> :global(*) {
+		direction: ltr;
+	}
+
+	&:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-stroke);
+	}
+
+	&:active,
+	&-thumb:active,
+	&:focus-visible {
+		:global(.slider-tooltip) {
+			opacity: 1;
+		}
+	}
+
+	&.orientation- {
+		&horizontal {
+			block-size: 32px;
+			inline-size: 100%;
+
+			.slider- {
+				&rail {
+					justify-content: flex-start;
+					inline-size: 100%;
+					block-size: 4px;
+				}
+
+				&track {
+					inline-size: var(--slider-percentage);
+					block-size: 100%;
+				}
+
+				&thumb {
+					inset-inline-start: calc(var(--slider-percentage) + var(--slider-thumb-offset));
+					transform: translateX(-50%);
+				}
+
+				&tick {
+					flex-direction: column;
+					height: 100%;
+					padding: 6px 0;
+					inset-inline-start: var(--slider-tick-percentage);
+
+					&::before,
+					&::after {
+						width: 1px;
+						height: 4px;
+						border-inline-start: 1px solid var(--control-strong-fill-default);
+					}
+				}
+			}
+
+			&.reverse {
+				.slider- {
+					&rail {
+						justify-content: flex-end;
+					}
+
+					&thumb {
+						inset-inline-start: unset;
+						inset-inline-end: calc(
+							var(--slider-percentage) + var(--slider-thumb-offset)
+						);
+						transform: translateX(50%);
+					}
+
+					&tick {
+						inset-inline-start: unset;
+						inset-inline-end: var(--slider-tick-percentage);
+					}
+				}
+			}
+		}
+
+		&vertical {
+			block-size: 100%;
+			inline-size: 32px;
+
+			.slider- {
+				&rail {
+					align-items: flex-end;
+					block-size: 100%;
+					inline-size: 4px;
+				}
+
+				&track {
+					inline-size: 100%;
+					block-size: var(--slider-percentage);
+				}
+
+				&thumb {
+					inset-block-end: calc(var(--slider-percentage) + var(--slider-thumb-offset));
+					transform: translateY(50%);
+				}
+
+				&tick {
+					width: 100%;
+					padding: 0 6px;
+					inset-block-end: var(--slider-tick-percentage);
+
+					&::before,
+					&::after {
+						width: 4px;
+						height: 1px;
+						border-block-start: 1px solid var(--control-strong-fill-default);
+					}
+				}
+			}
+
+			&.reverse {
+				.slider- {
+					&rail {
+						align-items: flex-start;
+					}
+
+					&thumb {
+						inset-block-end: unset;
+						inset-block-start: calc(
+							var(--slider-percentage) + var(--slider-thumb-offset)
+						);
+						transform: translateY(-50%);
+					}
+
+					&tick {
+						inset-block-end: unset;
+						inset-block-start: var(--slider-tick-percentage);
+					}
+				}
+			}
+		}
+	}
+
+	&.disabled {
+		.slider- {
+			&rail {
+				background-color: var(--accent-disabled);
+			}
+
+			&track {
+				background-color: var(--accent-disabled);
+			}
+
+			&thumb::before {
+				background-color: var(--accent-disabled);
+				transform: none;
+			}
+
+			&tick {
+				&::before,
+				&::after {
+					border-color: var(--control-fill-disabled);
+				}
+			}
+		}
+	}
+
+	&-rail {
+		@include flex($align: center);
+		overflow: hidden;
+		border-radius: 50px;
+		background-color: var(--control-strong-fill-default);
+	}
+
+	&-track {
+		background-color: var(--accent-default);
+	}
+
+	&-tick-bar {
+		position: absolute;
+		z-index: -1;
+		width: 100%;
+		height: 100%;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+
+		&.placement- {
+			&before {
+				.slider-tick::after {
+					visibility: hidden;
+				}
+			}
+
+			&after {
+				.slider-tick::before {
+					visibility: hidden;
+				}
+			}
+		}
+	}
+
+	&-tick {
+		@include flex($justify: between, $align: center);
+		position: absolute;
+		box-sizing: border-box;
+
+		&::before,
+		&::after {
+			content: "";
+		}
+	}
+
+	&-thumb {
+		@include flex($justify: center, $align: center);
+		position: absolute;
+		z-index: 10;
+		border-radius: 100%;
+		background-color: var(--control-solid-fill-default);
+		box-shadow: 0 0 0 1px var(--control-stroke-default);
+		inline-size: 20px;
+		block-size: 20px;
+
+		&::before {
+			content: "";
+			position: absolute;
+			border-radius: 100%;
+			background-color: var(--accent-default);
+			transition: var(--control-fast-duration) var(--control-fast-out-slow-in-easing)
+				transform;
+			inline-size: 12px;
+			block-size: 12px;
+		}
+
+		&:hover {
+			&::before {
+				transform: scale(1.167);
+			}
+
+			:global(.slider-tooltip) {
+				transition-delay: 1s;
+				opacity: 1;
+			}
+		}
+
+		&:active::before {
+			background-color: var(--accent-tertiary);
+			transform: scale(0.833);
+		}
+	}
+
+	:global(.slider-tooltip) {
+		z-index: 100;
+		opacity: 0;
+		transition: var(--control-fast-duration) linear opacity;
+		transform: translateX(-50%);
+		inset-inline-start: 50%;
+		inset-block-end: calc(100% + 18px);
+		position: absolute;
+		pointer-events: none;
+		white-space: nowrap;
+		max-inline-size: unset;
+	}
+}