fluent-svelte-extra 1.9.5 → 1.9.6

package/CalendarView/CalendarViewItem.scss

@@ -1,130 +1,130 @@
-@use "../mixins" as *;
-
-.calendar-view-item {
-	@include flex($inline: true, $justify: center, $align: center);
-	position: relative;
-	user-select: none;
-	text-align: center;
-	box-sizing: border-box;
-	padding: 0;
-	border: 1px solid transparent;
-	outline: none;
-	background-color: var(--subtle-fill-transparent);
-	color: var(--text-primary);
-	border-radius: 50%;
-	line-height: 20px;
-	font: {
-		family: var(--font-family-text);
-		size: 14px;
-		weight: 400;
-	}
-	&:focus-visible {
-		box-shadow: var(--focus-stroke);
-	}
-	&:hover {
-		background-color: var(--subtle-fill-secondary);
-	}
-	&:active {
-		background-color: var(--subtle-fill-tertiary);
-		color: var(--text-secondary);
-	}
-	&.out-of-range {
-		color: var(--text-secondary);
-		&:active {
-			color: var(--text-tertiary);
-		}
-	}
-	&.disabled {
-		background-color: var(--subtle-fill-disabled);
-		color: var(--text-disabled);
-		&.blackout::after {
-			content: none;
-		}
-	}
-	&.blackout {
-		pointer-events: none;
-		&::after {
-			content: "";
-			transform-origin: center;
-			inline-size: 26px;
-			block-size: 1px;
-			position: absolute;
-			transform: matrix(-0.71, -0.71, -0.71, 0.71, 0, 0);
-			border-block-start: 1px solid var(--control-strong-stroke-default);
-		}
-	}
-	&.type- {
-		&day {
-			inline-size: 40px;
-			block-size: 40px;
-			small {
-				inset-block-start: 2px;
-			}
-		}
-		&month-year {
-			inline-size: 56px;
-			block-size: 56px;
-			small {
-				inset-block-start: 9.58px; // figma toolkit is weird idk
-			}
-		}
-	}
-	&.selected {
-		color: var(--accent-text-primary);
-		border: 1px solid var(--accent-default);
-		&:hover {
-			background-color: var(--subtle-fill-secondary);
-			border-color: var(--accent-secondary);
-		}
-		&:active {
-			background-color: var(--subtle-fill-tertiary);
-			border-color: var(--accent-tertiary);
-		}
-		&.disabled {
-			color: var(--accent-text-disabled);
-			background-color: var(--subtle-fill-disabled);
-			border-color: var(--accent-disabled);
-		}
-		&.current {
-			box-shadow: inset 0 0 0 1px var(--text-on-accent-primary);
-			&:focus-visible {
-				box-shadow: inset 0 0 0 1px var(--text-on-accent-primary), var(--focus-stroke);
-			}
-		}
-		&.blackout::after {
-			border-block-start-color: var(--accent-tertiary);
-		}
-	}
-	&.current {
-		color: var(--text-on-accent-primary);
-		background-color: var(--accent-default);
-		&:hover {
-			background-color: var(--accent-secondary);
-		}
-		&:active {
-			background-color: var(--accent-tertiary);
-			color: var(--text-on-accent-secondary);
-		}
-		&.disabled {
-			background-color: var(--accent-disabled);
-		}
-		&.blackout::after {
-			border-block-start-color: var(--text-on-accent-primary);
-		}
-	}
-	small {
-		pointer-events: none;
-		position: absolute;
-		inline-size: 100%;
-		padding-inline: 1px;
-		letter-spacing: 0.04em;
-		text-align: center;
-		color: inherit;
-		line-height: 12px;
-		font: {
-			family: var(--font-family-small);
-			weight: 400;
-			size: 8px;
-		}
-	}
-}
+@use "../mixins" as *;
+
+.calendar-view-item {
+	@include flex($inline: true, $justify: center, $align: center);
+	position: relative;
+	user-select: none;
+	text-align: center;
+	box-sizing: border-box;
+	padding: 0;
+	border: 1px solid transparent;
+	outline: none;
+	background-color: var(--subtle-fill-transparent);
+	color: var(--text-primary);
+	border-radius: 50%;
+	line-height: 20px;
+	font: {
+		family: var(--font-family-text);
+		size: 14px;
+		weight: 400;
+	}
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+	&:hover {
+		background-color: var(--subtle-fill-secondary);
+	}
+	&:active {
+		background-color: var(--subtle-fill-tertiary);
+		color: var(--text-secondary);
+	}
+	&.out-of-range {
+		color: var(--text-secondary);
+		&:active {
+			color: var(--text-tertiary);
+		}
+	}
+	&.disabled {
+		background-color: var(--subtle-fill-disabled);
+		color: var(--text-disabled);
+		&.blackout::after {
+			content: none;
+		}
+	}
+	&.blackout {
+		pointer-events: none;
+		&::after {
+			content: "";
+			transform-origin: center;
+			inline-size: 26px;
+			block-size: 1px;
+			position: absolute;
+			transform: matrix(-0.71, -0.71, -0.71, 0.71, 0, 0);
+			border-block-start: 1px solid var(--control-strong-stroke-default);
+		}
+	}
+	&.type- {
+		&day {
+			inline-size: 40px;
+			block-size: 40px;
+			small {
+				inset-block-start: 2px;
+			}
+		}
+		&month-year {
+			inline-size: 56px;
+			block-size: 56px;
+			small {
+				inset-block-start: 9.58px; // figma toolkit is weird idk
+			}
+		}
+	}
+	&.selected {
+		color: var(--accent-text-primary);
+		border: 1px solid var(--accent-default);
+		&:hover {
+			background-color: var(--subtle-fill-secondary);
+			border-color: var(--accent-secondary);
+		}
+		&:active {
+			background-color: var(--subtle-fill-tertiary);
+			border-color: var(--accent-tertiary);
+		}
+		&.disabled {
+			color: var(--accent-text-disabled);
+			background-color: var(--subtle-fill-disabled);
+			border-color: var(--accent-disabled);
+		}
+		&.current {
+			box-shadow: inset 0 0 0 1px var(--text-on-accent-primary);
+			&:focus-visible {
+				box-shadow: inset 0 0 0 1px var(--text-on-accent-primary), var(--focus-stroke);
+			}
+		}
+		&.blackout::after {
+			border-block-start-color: var(--accent-tertiary);
+		}
+	}
+	&.current {
+		color: var(--text-on-accent-primary);
+		background-color: var(--accent-default);
+		&:hover {
+			background-color: var(--accent-secondary);
+		}
+		&:active {
+			background-color: var(--accent-tertiary);
+			color: var(--text-on-accent-secondary);
+		}
+		&.disabled {
+			background-color: var(--accent-disabled);
+		}
+		&.blackout::after {
+			border-block-start-color: var(--text-on-accent-primary);
+		}
+	}
+	small {
+		pointer-events: none;
+		position: absolute;
+		inline-size: 100%;
+		padding-inline: 1px;
+		letter-spacing: 0.04em;
+		text-align: center;
+		color: inherit;
+		line-height: 12px;
+		font: {
+			family: var(--font-family-small);
+			weight: 400;
+			size: 8px;
+		}
+	}
+}

package/CalendarView/CalendarViewItem.svelte

@@ -5,26 +5,26 @@ export let current = false;
 export let outOfRange = false;
 export let variant = "day";
 export let header = "";
-</script>
-
-<button
-	on:click
-	on:keydown
-	type="button"
-	class="calendar-view-item type-{variant === 'day' ? 'day' : 'month-year'}"
-	class:selected
-	class:current
-	class:blackout
-	class:disabled
-	class:out-of-range={outOfRange}
-	disabled={disabled || blackout}
-	aria-selected={selected}
-	{...$$restProps}
->
-	{#if header}
-		<small>{header}</small>
-	{/if}
-	<slot />
-</button>
-
-<style >.calendar-view-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:1px solid transparent;border-radius:50%;box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;font-family:var(--fds-font-family-text);font-size:14px;font-weight:400;justify-content:center;line-height:20px;outline:none;padding:0;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar-view-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.calendar-view-item:hover{background-color:var(--fds-subtle-fill-secondary)}.calendar-view-item:active{background-color:var(--fds-subtle-fill-tertiary)}.calendar-view-item.out-of-range,.calendar-view-item:active{color:var(--fds-text-secondary)}.calendar-view-item.out-of-range:active{color:var(--fds-text-tertiary)}.calendar-view-item.disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.calendar-view-item.disabled.blackout:after{content:none}.calendar-view-item.blackout{pointer-events:none}.calendar-view-item.blackout:after{-webkit-border-before:1px solid var(--fds-control-strong-stroke-default);block-size:1px;border-block-start:1px solid var(--fds-control-strong-stroke-default);content:"";inline-size:26px;position:absolute;transform:matrix(-.71,-.71,-.71,.71,0,0);transform-origin:center}.calendar-view-item.type-day{block-size:40px;inline-size:40px}.calendar-view-item.type-day small{inset-block-start:2px}.calendar-view-item.type-month-year{block-size:56px;inline-size:56px}.calendar-view-item.type-month-year small{inset-block-start:9.58px}.calendar-view-item.selected{border:1px solid var(--fds-accent-default);color:var(--fds-accent-text-primary)}.calendar-view-item.selected:hover{background-color:var(--fds-subtle-fill-secondary);border-color:var(--fds-accent-secondary)}.calendar-view-item.selected:active{background-color:var(--fds-subtle-fill-tertiary);border-color:var(--fds-accent-tertiary)}.calendar-view-item.selected.disabled{background-color:var(--fds-subtle-fill-disabled);border-color:var(--fds-accent-disabled);color:var(--fds-accent-text-disabled)}.calendar-view-item.selected.current{box-shadow:inset 0 0 0 1px var(--fds-text-on-accent-primary)}.calendar-view-item.selected.current:focus-visible{box-shadow:inset 0 0 0 1px var(--fds-text-on-accent-primary),var(--fds-focus-stroke)}.calendar-view-item.selected.blackout:after{border-block-start-color:var(--fds-accent-tertiary)}.calendar-view-item.current{background-color:var(--fds-accent-default);color:var(--fds-text-on-accent-primary)}.calendar-view-item.current:hover{background-color:var(--fds-accent-secondary)}.calendar-view-item.current:active{background-color:var(--fds-accent-tertiary);color:var(--fds-text-on-accent-secondary)}.calendar-view-item.current.disabled{background-color:var(--fds-accent-disabled)}.calendar-view-item.current.blackout:after{border-block-start-color:var(--fds-text-on-accent-primary)}.calendar-view-item small{color:inherit;font-family:var(--fds-font-family-small);font-size:8px;font-weight:400;inline-size:100%;letter-spacing:.04em;line-height:12px;padding-inline:1px;pointer-events:none;position:absolute;text-align:center}</style>
+</script>
+
+<button
+	on:click
+	on:keydown
+	type="button"
+	class="calendar-view-item type-{variant === 'day' ? 'day' : 'month-year'}"
+	class:selected
+	class:current
+	class:blackout
+	class:disabled
+	class:out-of-range={outOfRange}
+	disabled={disabled || blackout}
+	aria-selected={selected}
+	{...$$restProps}
+>
+	{#if header}
+		<small>{header}</small>
+	{/if}
+	<slot />
+</button>
+
+<style >.calendar-view-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:1px solid transparent;border-radius:50%;box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;font-family:var(--fds-font-family-text);font-size:14px;font-weight:400;justify-content:center;line-height:20px;outline:none;padding:0;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar-view-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.calendar-view-item:hover{background-color:var(--fds-subtle-fill-secondary)}.calendar-view-item:active{background-color:var(--fds-subtle-fill-tertiary)}.calendar-view-item.out-of-range,.calendar-view-item:active{color:var(--fds-text-secondary)}.calendar-view-item.out-of-range:active{color:var(--fds-text-tertiary)}.calendar-view-item.disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.calendar-view-item.disabled.blackout:after{content:none}.calendar-view-item.blackout{pointer-events:none}.calendar-view-item.blackout:after{-webkit-border-before:1px solid var(--fds-control-strong-stroke-default);block-size:1px;border-block-start:1px solid var(--fds-control-strong-stroke-default);content:"";inline-size:26px;position:absolute;transform:matrix(-.71,-.71,-.71,.71,0,0);transform-origin:center}.calendar-view-item.type-day{block-size:40px;inline-size:40px}.calendar-view-item.type-day small{inset-block-start:2px}.calendar-view-item.type-month-year{block-size:56px;inline-size:56px}.calendar-view-item.type-month-year small{inset-block-start:9.58px}.calendar-view-item.selected{border:1px solid var(--fds-accent-default);color:var(--fds-accent-text-primary)}.calendar-view-item.selected:hover{background-color:var(--fds-subtle-fill-secondary);border-color:var(--fds-accent-secondary)}.calendar-view-item.selected:active{background-color:var(--fds-subtle-fill-tertiary);border-color:var(--fds-accent-tertiary)}.calendar-view-item.selected.disabled{background-color:var(--fds-subtle-fill-disabled);border-color:var(--fds-accent-disabled);color:var(--fds-accent-text-disabled)}.calendar-view-item.selected.current{box-shadow:inset 0 0 0 1px var(--fds-text-on-accent-primary)}.calendar-view-item.selected.current:focus-visible{box-shadow:inset 0 0 0 1px var(--fds-text-on-accent-primary),var(--fds-focus-stroke)}.calendar-view-item.selected.blackout:after{border-block-start-color:var(--fds-accent-tertiary)}.calendar-view-item.current{background-color:var(--fds-accent-default);color:var(--fds-text-on-accent-primary)}.calendar-view-item.current:hover{background-color:var(--fds-accent-secondary)}.calendar-view-item.current:active{background-color:var(--fds-accent-tertiary);color:var(--fds-text-on-accent-secondary)}.calendar-view-item.current.disabled{background-color:var(--fds-accent-disabled)}.calendar-view-item.current.blackout:after{border-block-start-color:var(--fds-text-on-accent-primary)}.calendar-view-item small{color:inherit;font-family:var(--fds-font-family-small);font-size:8px;font-weight:400;inline-size:100%;letter-spacing:.04em;line-height:12px;padding-inline:1px;pointer-events:none;position:absolute;text-align:center}</style>

package/Checkbox/Checkbox.scss

@@ -1,117 +1,117 @@
-@use "../mixins" as *;
-
-.checkbox {
-	@include typography-body;
-
-	margin: 0;
-	border: 1px solid var(--control-strong-stroke-default);
-	border-radius: var(--control-corner-radius);
-	outline: none;
-	background-clip: padding-box;
-	background-color: var(--control-alt-fill-secondary);
-	appearance: none;
-	inline-size: 20px;
-	block-size: 20px;
-
-	&: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);
-		+ .checkbox-glyph {
-			color: var(--text-on-accent-secondary);
-		}
-	}
-
-	&:disabled {
-		border-color: var(--control-strong-stroke-disabled);
-		background-color: var(--control-alt-fill-disabled);
-		pointer-events: none;
-	}
-
-	&:checked,
-	&:indeterminate {
-		border: none;
-		background-color: var(--accent-default);
-
-		&:hover {
-			background-color: var(--accent-secondary);
-		}
-
-		&:active {
-			background-color: var(--accent-tertiary);
-		}
-
-		&:disabled {
-			border-color: var(--control-strong-stroke-disabled);
-			background-color: var(--accent-disabled);
-			+ .checkbox-glyph {
-				color: var(--text-on-accent-disabled);
-			}
-		}
-
-		+ .checkbox-glyph .path-checkmark {
-			transition: var(--control-normal-duration) cubic-bezier(0.55, 0, 0, 1) stroke-dashoffset;
-			stroke-dashoffset: 0;
-		}
-	}
-
-	&-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;
-		}
-
-		&.disabled > span {
-			color: var(--text-disabled);
-		}
-	}
-
-	&-inner {
-		@include flex($align: center, $justify: center);
-		position: relative;
-	}
-
-	&-glyph {
-		position: absolute;
-		color: inherit;
-		color: var(--text-on-accent-primary);
-		inline-size: 12px;
-		block-size: 12px;
-
-		path {
-			transform-origin: center;
-		}
-
-		.path- {
-			&checkmark {
-				transform: scale(1.2);
-				stroke: currentColor;
-				stroke: {
-					width: 2;
-					linecap: round;
-					linejoin: round;
-					dasharray: 20.5;
-					dashoffset: 20.5;
-				}
-			}
-
-			&indeterminate {
-				transform: scale(calc(2 / 3)) translateX(80px) translateY(240px);
-				fill: currentColor;
-			}
-		}
-	}
-}
+@use "../mixins" as *;
+
+.checkbox {
+	@include typography-body;
+
+	margin: 0;
+	border: 1px solid var(--control-strong-stroke-default);
+	border-radius: var(--control-corner-radius);
+	outline: none;
+	background-clip: padding-box;
+	background-color: var(--control-alt-fill-secondary);
+	appearance: none;
+	inline-size: 20px;
+	block-size: 20px;
+
+	&: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);
+		+ .checkbox-glyph {
+			color: var(--text-on-accent-secondary);
+		}
+	}
+
+	&:disabled {
+		border-color: var(--control-strong-stroke-disabled);
+		background-color: var(--control-alt-fill-disabled);
+		pointer-events: none;
+	}
+
+	&:checked,
+	&:indeterminate {
+		border: none;
+		background-color: var(--accent-default);
+
+		&:hover {
+			background-color: var(--accent-secondary);
+		}
+
+		&:active {
+			background-color: var(--accent-tertiary);
+		}
+
+		&:disabled {
+			border-color: var(--control-strong-stroke-disabled);
+			background-color: var(--accent-disabled);
+			+ .checkbox-glyph {
+				color: var(--text-on-accent-disabled);
+			}
+		}
+
+		+ .checkbox-glyph .path-checkmark {
+			transition: var(--control-normal-duration) cubic-bezier(0.55, 0, 0, 1) stroke-dashoffset;
+			stroke-dashoffset: 0;
+		}
+	}
+
+	&-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;
+		}
+
+		&.disabled > span {
+			color: var(--text-disabled);
+		}
+	}
+
+	&-inner {
+		@include flex($align: center, $justify: center);
+		position: relative;
+	}
+
+	&-glyph {
+		position: absolute;
+		color: inherit;
+		color: var(--text-on-accent-primary);
+		inline-size: 12px;
+		block-size: 12px;
+
+		path {
+			transform-origin: center;
+		}
+
+		.path- {
+			&checkmark {
+				transform: scale(1.2);
+				stroke: currentColor;
+				stroke: {
+					width: 2;
+					linecap: round;
+					linejoin: round;
+					dasharray: 20.5;
+					dashoffset: 20.5;
+				}
+			}
+
+			&indeterminate {
+				transform: scale(calc(2 / 3)) translateX(80px) translateY(240px);
+				fill: currentColor;
+			}
+		}
+	}
+}

package/Checkbox/Checkbox.svelte

@@ -16,55 +16,55 @@ export let inputElement = null;
 /** Obtains a bound DOM reference to the checkbox's outer container element. */
 export let containerElement = null;
 const forwardEvents = createEventForwarder(get_current_component());
-</script>
-
-<!--
-@component
-Checkboxes represent a control that a user can select (check) or clear (uncheck). A Checkbox can also report its value as indeterminate. [Docs](https://fluent-svelte.vercel.app/docs/components/checkbox)
-- Usage:
-    ```tsx
-    <Checkbox bind:checked />
-    ```
--->
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<!-- https://github.com/sveltejs/svelte/pull/5323 -->
-<label class="checkbox-container" class:disabled class:indeterminate bind:this={containerElement}>
-	<div class="checkbox-inner">
-		<input
-			use:forwardEvents
-			bind:checked
-			bind:indeterminate
-			bind:this={inputElement}
-			type="checkbox"
-			class="checkbox {className}"
-			{value}
-			{disabled}
-			{...$$restProps}
-		/>
-		<svg
-			aria-hidden="true"
-			class="checkbox-glyph"
-			viewBox={indeterminate ? "171 470 683 85" : "0 0 24 24"}
-		>
-			{#if indeterminate}
-				<path
-					class="path-indeterminate"
-					d="M213.5,554.5C207.5,554.5 201.917,553.417 196.75,551.25C191.583,549.083 187.083,546.083 183.25,542.25C179.417,538.417 176.333,533.917 174,528.75C171.667,523.583 170.5,518 170.5,512C170.5,506 171.667,500.417 174,495.25C176.333,490.083 179.417,485.583 183.25,481.75C187.083,477.917 191.583,474.917 196.75,472.75C201.917,470.583 207.5,469.5 213.5,469.5L810.5,469.5C816.5,469.5 822.083,470.583 827.25,472.75C832.417,474.917 836.917,477.917 840.75,481.75C844.583,485.583 847.667,490.083 850,495.25C852.333,500.417 853.5,506 853.5,512C853.5,518 852.333,523.583 850,528.75C847.667,533.917 844.583,538.417 840.75,542.25C836.917,546.083 832.417,549.083 827.25,551.25C822.083,553.417 816.5,554.5 810.5,554.5Z"
-				/>
-			{:else}
-				<path
-					class="path-checkmark"
-					d="M 4.5303 12.9697 L 8.5 16.9393 L 18.9697 6.4697"
-					fill="none"
-				/>
-			{/if}
-		</svg>
-	</div>
-	{#if $$slots.default}
-		<span>
-			<slot />
-		</span>
-	{/if}
-</label>
-
-<style >.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-clip:padding-box;background-color:var(--fds-control-alt-fill-secondary);block-size:20px;border:1px solid var(--fds-control-strong-stroke-default);border-radius:var(--fds-control-corner-radius);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:20px;line-height:20px;margin:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox:focus-visible{box-shadow:var(--fds-focus-stroke)}.checkbox:hover{background-color:var(--fds-control-alt-fill-tertiary)}.checkbox:active{background-color:var(--fds-control-alt-fill-quarternary);border-color:var(--fds-control-strong-stroke-disabled)}.checkbox:active+.checkbox-glyph{color:var(--fds-text-on-accent-secondary)}.checkbox:disabled{background-color:var(--fds-control-alt-fill-disabled);border-color:var(--fds-control-strong-stroke-disabled);pointer-events:none}.checkbox:checked,.checkbox:indeterminate{background-color:var(--fds-accent-default);border:none}.checkbox:checked:hover,.checkbox:indeterminate:hover{background-color:var(--fds-accent-secondary)}.checkbox:checked:active,.checkbox:indeterminate:active{background-color:var(--fds-accent-tertiary)}.checkbox:checked:disabled,.checkbox:indeterminate:disabled{background-color:var(--fds-accent-disabled);border-color:var(--fds-control-strong-stroke-disabled)}.checkbox:checked:disabled+.checkbox-glyph,.checkbox:indeterminate:disabled+.checkbox-glyph{color:var(--fds-text-on-accent-disabled)}.checkbox:checked+.checkbox-glyph .path-checkmark,.checkbox:indeterminate+.checkbox-glyph .path-checkmark{stroke-dashoffset:0;transition:var(--fds-control-normal-duration) cubic-bezier(.55,0,0,1) stroke-dashoffset}.checkbox-container{align-items:center;color:var(--fds-text-primary);display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-block-size:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox-container>span{-webkit-padding-start:8px;padding-inline-start:8px}.checkbox-container.disabled>span{color:var(--fds-text-disabled)}.checkbox-inner{align-items:center;display:flex;justify-content:center;position:relative}.checkbox-glyph{block-size:12px;color:inherit;color:var(--fds-text-on-accent-primary);inline-size:12px;position:absolute}.checkbox-glyph path{transform-origin:center}.checkbox-glyph .path-checkmark{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20.5;stroke-dashoffset:20.5;transform:scale(1.2)}.checkbox-glyph .path-indeterminate{fill:currentColor;transform:scale(.6666666667) translateX(80px) translateY(240px)}</style>
+</script>
+
+<!--
+@component
+Checkboxes represent a control that a user can select (check) or clear (uncheck). A Checkbox can also report its value as indeterminate. [Docs](https://fluent-svelte.vercel.app/docs/components/checkbox)
+- Usage:
+    ```tsx
+    <Checkbox bind:checked />
+    ```
+-->
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- https://github.com/sveltejs/svelte/pull/5323 -->
+<label class="checkbox-container" class:disabled class:indeterminate bind:this={containerElement}>
+	<div class="checkbox-inner">
+		<input
+			use:forwardEvents
+			bind:checked
+			bind:indeterminate
+			bind:this={inputElement}
+			type="checkbox"
+			class="checkbox {className}"
+			{value}
+			{disabled}
+			{...$$restProps}
+		/>
+		<svg
+			aria-hidden="true"
+			class="checkbox-glyph"
+			viewBox={indeterminate ? "171 470 683 85" : "0 0 24 24"}
+		>
+			{#if indeterminate}
+				<path
+					class="path-indeterminate"
+					d="M213.5,554.5C207.5,554.5 201.917,553.417 196.75,551.25C191.583,549.083 187.083,546.083 183.25,542.25C179.417,538.417 176.333,533.917 174,528.75C171.667,523.583 170.5,518 170.5,512C170.5,506 171.667,500.417 174,495.25C176.333,490.083 179.417,485.583 183.25,481.75C187.083,477.917 191.583,474.917 196.75,472.75C201.917,470.583 207.5,469.5 213.5,469.5L810.5,469.5C816.5,469.5 822.083,470.583 827.25,472.75C832.417,474.917 836.917,477.917 840.75,481.75C844.583,485.583 847.667,490.083 850,495.25C852.333,500.417 853.5,506 853.5,512C853.5,518 852.333,523.583 850,528.75C847.667,533.917 844.583,538.417 840.75,542.25C836.917,546.083 832.417,549.083 827.25,551.25C822.083,553.417 816.5,554.5 810.5,554.5Z"
+				/>
+			{:else}
+				<path
+					class="path-checkmark"
+					d="M 4.5303 12.9697 L 8.5 16.9393 L 18.9697 6.4697"
+					fill="none"
+				/>
+			{/if}
+		</svg>
+	</div>
+	{#if $$slots.default}
+		<span>
+			<slot />
+		</span>
+	{/if}
+</label>
+
+<style >.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-clip:padding-box;background-color:var(--fds-control-alt-fill-secondary);block-size:20px;border:1px solid var(--fds-control-strong-stroke-default);border-radius:var(--fds-control-corner-radius);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:20px;line-height:20px;margin:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox:focus-visible{box-shadow:var(--fds-focus-stroke)}.checkbox:hover{background-color:var(--fds-control-alt-fill-tertiary)}.checkbox:active{background-color:var(--fds-control-alt-fill-quarternary);border-color:var(--fds-control-strong-stroke-disabled)}.checkbox:active+.checkbox-glyph{color:var(--fds-text-on-accent-secondary)}.checkbox:disabled{background-color:var(--fds-control-alt-fill-disabled);border-color:var(--fds-control-strong-stroke-disabled);pointer-events:none}.checkbox:checked,.checkbox:indeterminate{background-color:var(--fds-accent-default);border:none}.checkbox:checked:hover,.checkbox:indeterminate:hover{background-color:var(--fds-accent-secondary)}.checkbox:checked:active,.checkbox:indeterminate:active{background-color:var(--fds-accent-tertiary)}.checkbox:checked:disabled,.checkbox:indeterminate:disabled{background-color:var(--fds-accent-disabled);border-color:var(--fds-control-strong-stroke-disabled)}.checkbox:checked:disabled+.checkbox-glyph,.checkbox:indeterminate:disabled+.checkbox-glyph{color:var(--fds-text-on-accent-disabled)}.checkbox:checked+.checkbox-glyph .path-checkmark,.checkbox:indeterminate+.checkbox-glyph .path-checkmark{stroke-dashoffset:0;transition:var(--fds-control-normal-duration) cubic-bezier(.55,0,0,1) stroke-dashoffset}.checkbox-container{align-items:center;color:var(--fds-text-primary);display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-block-size:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox-container>span{-webkit-padding-start:8px;padding-inline-start:8px}.checkbox-container.disabled>span{color:var(--fds-text-disabled)}.checkbox-inner{align-items:center;display:flex;justify-content:center;position:relative}.checkbox-glyph{block-size:12px;color:inherit;color:var(--fds-text-on-accent-primary);inline-size:12px;position:absolute}.checkbox-glyph path{transform-origin:center}.checkbox-glyph .path-checkmark{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20.5;stroke-dashoffset:20.5;transform:scale(1.2)}.checkbox-glyph .path-indeterminate{fill:currentColor;transform:scale(.6666666667) translateX(80px) translateY(240px)}</style>