fluent-svelte-extra 1.0.0

package/src/lib/CalendarView/CalendarViewItem.scss

@@ -0,0 +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;
+		}
+	}
+}

package/src/lib/CalendarView/CalendarViewItem.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let selected = false;
+	export let disabled = false;
+	export let blackout = false;
+	export let current = false;
+	export let outOfRange = false;
+	export let variant: "day" | "monthYear" = "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 lang="scss">
+	@use "./CalendarViewItem";
+</style>

package/src/lib/Checkbox/Checkbox.scss

@@ -0,0 +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;
+			}
+		}
+	}
+}

package/src/lib/Checkbox/Checkbox.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder } from "$lib/internal";
+
+	/** Controls whether the checkbox is checked or not. */
+	export let checked = false;
+
+	/** Controls whether the checkbox is in an indeterminate state. */
+	export let indeterminate = false;
+
+	/** Sets the input element's native `value` attribute for usage in forms. */
+	export let value: any = undefined;
+
+	/** Controls whether the checkbox is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Specifies a custom class name for the checkbox. */
+	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
+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 lang="scss">
+	@use "./Checkbox";
+</style>

package/src/lib/ComboBox/ComboBox.scss

@@ -0,0 +1,152 @@
+@use "../mixins" as *;
+
+@keyframes menu-in {
+	0% {
+		clip-path: var(--grow-clip-path);
+	}
+	100% {
+		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+	}
+}
+
+@keyframes shadow-in {
+	0% {
+		box-shadow: none;
+	}
+	100% {
+		box-shadow: var(--flyout-shadow);
+	}
+}
+
+.combo-box {
+	position: relative;
+	display: inline-flex;
+	user-select: none;
+
+	:global {
+		.button,
+		.text-box {
+			flex: 1 1 auto;
+		}
+
+		.text-box {
+			border-color: var(--control-border-default);
+			&-underline::after {
+				border-color: transparent;
+			}
+			&-container {
+				cursor: default;
+				&:focus-visible {
+					cursor: text;
+				}
+			}
+		}
+	}
+
+	&.editable {
+		:global {
+			.combo-box-textbox:not(:focus-within) {
+				cursor: default;
+				border-color: var(--control-border-default);
+				.text-box-underline::after {
+					content: none;
+				}
+			}
+			&.combo-box-textbox.disabled {
+				border-color: var(--control-stroke-default);
+			}
+		}
+		&.open {
+			:global {
+				.combo-box-textbox {
+					cursor: text;
+					background-color: var(--control-fill-input-active);
+					.text-box-underline::after {
+						content: "";
+						border-bottom: 2px solid var(--fds-accent-default);
+					}
+					input::placeholder {
+						color: var(--text-tertiary);
+					}
+				}
+				.text-box-underline {
+					border-end-start-radius: 0;
+					border-end-end-radius: 0;
+				}
+			}
+		}
+		.combo-box-dropdown {
+			margin: 0;
+			inset-inline-start: 0;
+			inset-block-start: 100%;
+			inline-size: 100%;
+			border-radius: var(--overlay-corner-radius);
+			border-start-start-radius: 0;
+			border-start-end-radius: 0;
+		}
+		.combo-box-icon {
+			margin: 0;
+		}
+	}
+
+	&-label {
+		flex: 1 1 auto;
+		text-align: start;
+		min-block-size: 20px;
+
+		&.placeholder {
+			color: var(--text-secondary);
+		}
+	}
+
+	&.disabled .placeholder {
+		color: var(--text-disabled);
+	}
+
+	&-icon {
+		margin-inline-start: 8px;
+		inline-size: 12px;
+		block-size: 12px;
+	}
+
+	&-dropdown {
+		z-index: 100;
+		position: absolute;
+		box-sizing: border-box;
+		margin: 0;
+		margin-block-start: -6px;
+		margin-inline-start: -5px;
+		padding: 1px;
+		border: 1px solid var(--surface-stroke-flyout);
+		border-radius: var(--overlay-corner-radius);
+		background-color: var(--solid-background-quarternary);
+		background-clip: padding-box;
+		box-shadow: var(--flyout-shadow);
+		animation: menu-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing),
+			shadow-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing)
+				var(--control-normal-duration);
+		overflow: auto;
+		inline-size: calc(100% + 8px);
+		max-block-size: 504px;
+		inset-block-start: var(--menu-offset, 0);
+		inset-inline-start: 0;
+
+		@supports (overflow: overlay) {
+			overflow: overlay;
+		}
+
+		&.direction- {
+			&top {
+				--grow-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
+			}
+
+			&center {
+				--grow-clip-path: polygon(0 25%, 100% 24%, 100% 75%, 0 75%);
+			}
+
+			&bottom {
+				--grow-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
+			}
+		}
+	}
+}