fluent-svelte-extra 1.0.0

package/src/lib/MenuFlyout/MenuFlyoutWrapper.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { SvelteComponentTyped } from "svelte";
+
+	import { tabbable } from "tabbable";
+
+	import { createEventDispatcher, setContext } from "svelte";
+	import { arrowNavigation, uid } from "$lib/internal";
+
+	import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
+
+	/** Determines the flyout's visibility. */
+	export let open = false;
+
+	/** Determines if the flyout can be closed using conventional user interaction. */
+	export let closable = true;
+
+	/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
+	export let closeOnSelect = true;
+
+	/** Direction that the flyout will be opened from. */
+	export let placement: "top" | "bottom" | "left" | "right" = "top";
+
+	/** Alignment of the menu along the clickable target's given axis. */
+	export let alignment: "start" | "center" | "end" = "center";
+
+	/** Distance of the flyout from the control button in pixels. */
+	export let offset = 4;
+
+	/** Specifies a custom class name for the flyout. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the content wrapper element. */
+	export let wrapperElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the menu's positioning anchor element. */
+	export let anchorElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the inner menu element. */
+	export let menuElement: HTMLUListElement = null;
+
+	/** Obtains a bound DOM reference to the menu backdrop, which is present while the menu is `open`. */
+	export let backdropElement: HTMLDivElement = null;
+
+	const dispatch = createEventDispatcher();
+	const menuId = uid("fds-menu-flyout-anchor-");
+
+	let menu: SvelteComponentTyped = null;
+	let previousFocus: Element = null;
+
+	$: dispatch(open ? "open" : "close");
+
+	$: if (menu && tabbable(menuElement).length > 0) tabbable(menuElement)[0].focus();
+
+	function handleEscapeKey({ key }: KeyboardEvent) {
+		if (key === "Escape" && closable) open = false;
+		(<HTMLElement>previousFocus)?.focus();
+	}
+
+	function toggleFlyout() {
+		previousFocus = document.activeElement;
+		open = !open;
+	}
+
+	function closeFlyout() {
+		if (closable) open = false;
+	}
+
+	setContext("closeFlyout", event => {
+		dispatch("select");
+		if (closeOnSelect && closable) {
+			event.stopPropagation();
+			open = false;
+		}
+	});
+</script>
+
+<svelte:window on:keydown={handleEscapeKey} />
+
+<div
+	class="menu-flyout-wrapper {className}"
+	aria-expanded={open}
+	aria-haspopup={open}
+	aria-controls={menuId}
+	on:click={toggleFlyout}
+	bind:this={wrapperElement}
+>
+	<slot />
+	{#if open}
+		<div
+			id={menuId}
+			class="menu-flyout-anchor placement-{placement} alignment-{alignment}"
+			style="--fds-menu-flyout-offset: {offset}px;"
+			tabindex="-1"
+			bind:this={anchorElement}
+			use:arrowNavigation={{ preventTab: true }}
+			on:click={e => e.stopPropagation()}
+		>
+			<MenuFlyoutSurface bind:element={menuElement} bind:this={menu} {...$$restProps}>
+				<slot name="flyout" />
+			</MenuFlyoutSurface>
+		</div>
+		<div
+			class="menu-flyout-backdrop"
+			bind:this={backdropElement}
+			on:click={e => e.stopPropagation()}
+			on:mousedown={closeFlyout}
+		/>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "./MenuFlyoutWrapper";
+</style>

package/src/lib/NavigationView/NavigationView.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	export let variant: "default" | "compact" | "minimal" = "default";
+	export let expanded = true;
+	export let menuButton = true;
+	export let backButton = true;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<main class="navigation-view variant-{variant}">
+	<aside class="navigation-view-pane" class:expanded>
+		<header class="navigation-view-pane-header">
+			{#if backButton}
+				<button type="button" on:click={() => dispatch("back")}>
+					{"<-"}
+				</button>
+			{/if}
+			{#if menuButton}
+				<button type="button" on:click={() => (expanded = !expanded)}>
+					{"-"}
+				</button>
+			{/if}
+
+			<slot name="header" />
+		</header>
+		<slot name="items" />
+		<footer class="navigation-view-pane-footer">
+			<slot name="footer" />
+		</footer>
+	</aside>
+	<article class="navigation-view-page">
+		<slot />
+	</article>
+</main>
+
+<style lang="scss">
+	@use "./NavigationView";
+
+	@use "../mixins" as *;
+
+	.navigation-view {
+		@include typography-body;
+		display: flex;
+		inline-size: 100%;
+		block-size: 100%;
+		&.variant- {
+			&-default {
+				.navigation-view-pane {
+					inline-size: 48px;
+					&.expanded {
+						inline-size: 320px;
+					}
+				}
+			}
+		}
+		&-pane {
+			@include flex($direction: column);
+			user-select: none;
+			flex: 0 0 auto;
+			block-size: 100%;
+			&-header {
+				display: block;
+				flex: 0 0 auto;
+				padding-block-start: 4px;
+			}
+		}
+		&-page {
+			@include flex($direction: column);
+			flex: 1 1 auto;
+			border-start-start-radius: var(--overlay-corner-radius);
+			background-clip: padding-box;
+			background-color: var(--layer-background-default);
+			border: 1px solid var(--card-stroke-default);
+			border-block-end: none;
+			border-inline-end: none;
+			padding-inline: 56px;
+			padding-block: 44px;
+		}
+	}
+</style>

package/src/lib/NumberBox/NumberBox.scss

@@ -0,0 +1,31 @@
+@use "../mixins" as *;
+
+:global {
+	.number-box input {
+		appearance: textfield;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			appearance: none;
+			margin: 0;
+		}
+	}
+}
+
+.number-box-spinner-flyout {
+	@include flex($direction: column);
+	border-radius: var(--overlay-corner-radius);
+	border: 1px solid var(--surface-stroke-flyout);
+	background-clip: padding-box;
+	box-sizing: border-box;
+	background-color: var(--fds-solid-background-quarternary);
+	box-shadow: var(--flyout-shadow);
+	position: absolute;
+	padding: 2px 4px;
+	inset-inline-end: -16px;
+	z-index: 100;
+	:global(.number-box-spinner) {
+		margin: 2px 1px;
+		inline-size: 36px;
+		block-size: 36px;
+	}
+}

package/src/lib/NumberBox/NumberBox.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+	import TextBox from "../TextBox/TextBox.svelte";
+	import TextBoxButton from "../TextBox/TextBoxButton.svelte";
+
+	/** @extends {"../TextBox/TextBox.svelte"} */
+	/** Determines whether the spinner buttons will be placed in an inline layout. */
+	export let inline = false;
+
+	/** The input's current value. */
+	export let value: any = "";
+
+	/** Minimum value for the input. */
+	export let min: number = undefined;
+
+	/** Maximum value for the input. */
+	export let max: number = undefined;
+
+	/** Controls the interval between two value changes when triggering a spin button. */
+	export let step: number = undefined;
+
+	/** Controls whether the NumberBox is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Specifies a custom class name for the NumberBox. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the input element. */
+	export let inputElement: HTMLInputElement = null;
+
+	/** Obtains a bound DOM reference to the NumberBox's container element. */
+	export let containerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the NumberBox's buttons container element. */
+	export let buttonsContainerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the spin button element that increases the input's value. */
+	export let spinUpButtonElement: HTMLButtonElement = null;
+
+	/** Obtains a bound DOM reference to the NumberBox's clear button element. Only available if `clearButton` is set to true, `readonly` is set to false, and a `value` is present. */
+	export let clearButtonElement: HTMLButtonElement = null;
+
+	/** Obtains a bound DOM reference to the spin button element that decreases the input's value. */
+	export let spinDownButtonElement: HTMLButtonElement = null;
+
+	/** Obtains a bound DOM reference to the spin button flyout. Only available when `inline` is set to `false`. */
+	export let spinnerFlyoutElement: HTMLDivElement = null;
+
+	let spinUpTimeout;
+	let spinDownTimeout;
+	let spinUpInterval;
+	let spinDownInterval;
+	let spinnerFlyoutOpen = false;
+
+	function spinUp() {
+		stepUp();
+
+		spinUpTimeout = setTimeout(() => {
+			spinUpInterval = setInterval(() => {
+				stepUp();
+			}, 50);
+		}, 500);
+	}
+
+	function spinDown() {
+		stepDown();
+
+		spinDownTimeout = setTimeout(() => {
+			spinDownInterval = setInterval(() => {
+				stepDown();
+			}, 50);
+		}, 500);
+	}
+
+	function stopSpinIntervals() {
+		clearTimeout(spinUpTimeout);
+		clearInterval(spinUpInterval);
+		clearTimeout(spinDownTimeout);
+		clearInterval(spinDownInterval);
+	}
+
+	function handleTabKey({ key }) {
+		if (key === "Tab") spinnerFlyoutOpen = false;
+	}
+
+	export function stepUp() {
+		inputElement.stepUp();
+		value = inputElement.value;
+	}
+
+	export function stepDown() {
+		inputElement.stepDown();
+		value = inputElement.value;
+	}
+
+	$: if (value?.toString() === max?.toString() || value?.toString() === min?.toString())
+		stopSpinIntervals();
+	$: spinUpButtonDisabled = disabled || value?.toString() === max?.toString();
+	$: spinDownButtonDisabled = disabled || value?.toString() === min?.toString();
+</script>
+
+<svelte:window on:keydown={handleTabKey} />
+
+<TextBox
+	class="number-box {className ?? ''}"
+	type="number"
+	bind:inputElement
+	bind:containerElement
+	bind:buttonsContainerElement
+	bind:clearButtonElement
+	bind:value
+	on:outermousedown={() => (spinnerFlyoutOpen = false)}
+	on:change
+	on:input
+	on:beforeinput
+	on:click
+	on:blur
+	on:focus={() => (spinnerFlyoutOpen = true)}
+	on:focus
+	on:dblclick
+	on:contextmenu
+	on:mousedown
+	on:mouseup
+	on:mouseover
+	on:mouseout
+	on:mouseenter
+	on:mouseleave
+	on:keypress
+	on:keydown
+	on:keyup
+	on:clear
+	{min}
+	{max}
+	{step}
+	{disabled}
+	{...$$restProps}
+>
+	<slot />
+	<svelte:fragment slot="buttons">
+		{#if inline}
+			{#if !disabled}
+				<TextBoxButton
+					on:mousedown={spinUp}
+					on:mouseup={stopSpinIntervals}
+					on:mouseleave={stopSpinIntervals}
+					bind:element={spinUpButtonElement}
+					tabindex="-1"
+					aria-label="Increase number"
+					disabled={spinUpButtonDisabled}
+					class="number-box-spinner"
+				>
+					<svg
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+					>
+						<path
+							fill="currentColor"
+							d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
+						/>
+					</svg>
+				</TextBoxButton>
+				<TextBoxButton
+					on:mousedown={spinDown}
+					on:mouseup={stopSpinIntervals}
+					on:mouseleave={stopSpinIntervals}
+					bind:element={spinDownButtonElement}
+					tabindex="-1"
+					aria-label="Decrease number"
+					class="number-box-spinner"
+					disabled={spinDownButtonDisabled}
+				>
+					<svg
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+					>
+						<path
+							fill="currentColor"
+							d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
+						/>
+					</svg>
+				</TextBoxButton>
+			{/if}
+		{:else}
+			<TextBoxButton
+				{disabled}
+				class="number-box-spinner-compact"
+				tabindex="-1"
+				on:mousedown={() => inputElement.focus()}
+			>
+				<svg
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					height="12"
+					width="100%"
+					viewBox="128 0 768 1024"
+				>
+					<path
+						fill="currentColor"
+						d="M128,384C128,375.333 131.167,367.833 137.5,361.5L487,10.5C494,3.5 502.333,0 512,0C521.667,0 530,3.5 537,10.5L886.5,361.5C892.833,367.833 896,375.333 896,384C896,392.667 892.833,400.167 886.5,406.5C880.167,412.833 872.667,416 864,416C855.333,416 847.833,412.833 841.5,406.5L512,76L182.5,406.5C176.167,412.833 168.667,416 160,416C151.333,416 143.833,412.833 137.5,406.5C131.167,400.167 128,392.667 128,384ZM128,640C128,631.333 131.167,623.833 137.5,617.5C143.833,611.167 151.333,608 160,608C168.667,608 176.167,611.167 182.5,617.5L512,948L841.5,617.5C847.833,611.167 855.333,608 864,608C872.667,608 880.167,611.167 886.5,617.5C892.833,623.833 896,631.333 896,640C896,648.667 892.833,656.167 886.5,662.5L537,1013.5C530,1020.5 521.667,1024 512,1024C502.333,1024 494,1020.5 487,1013.5L137.5,662.5C131.167,656.167 128,648.667 128,640Z"
+					/>
+				</svg>
+			</TextBoxButton>
+			{#if spinnerFlyoutOpen}
+				<div class="number-box-spinner-flyout" bind:this={spinnerFlyoutElement}>
+					<TextBoxButton
+						on:mousedown={spinUp}
+						on:mouseup={stopSpinIntervals}
+						on:mouseleave={stopSpinIntervals}
+						bind:element={spinUpButtonElement}
+						class="number-box-spinner"
+						disabled={spinUpButtonDisabled}
+						aria-label="Increase number"
+						tabindex="-1"
+					>
+						<svg
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+						>
+							<path
+								fill="currentColor"
+								d="M3.14645 10.3536C3.34171 10.5488 3.65829 10.5488 3.85355 10.3536L8 6.20711L12.1464 10.3536C12.3417 10.5488 12.6583 10.5488 12.8536 10.3536C13.0488 10.1583 13.0488 9.84171 12.8536 9.64645L8.35355 5.14645C8.15829 4.95118 7.84171 4.95118 7.64645 5.14645L3.14645 9.64645C2.95118 9.84171 2.95118 10.1583 3.14645 10.3536Z"
+							/>
+						</svg>
+					</TextBoxButton>
+					<TextBoxButton
+						on:mousedown={spinDown}
+						on:mouseup={stopSpinIntervals}
+						on:mouseleave={stopSpinIntervals}
+						bind:element={spinDownButtonElement}
+						tabindex="-1"
+						aria-label="Decrease number"
+						class="number-box-spinner"
+						disabled={spinDownButtonDisabled}
+					>
+						<svg
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+						>
+							<path
+								fill="currentColor"
+								d="M3.14645 5.64645C3.34171 5.45118 3.65829 5.45118 3.85355 5.64645L8 9.79289L12.1464 5.64645C12.3417 5.45118 12.6583 5.45118 12.8536 5.64645C13.0488 5.84171 13.0488 6.15829 12.8536 6.35355L8.35355 10.8536C8.15829 11.0488 7.84171 11.0488 7.64645 10.8536L3.14645 6.35355C2.95118 6.15829 2.95118 5.84171 3.14645 5.64645Z"
+							/>
+						</svg>
+					</TextBoxButton>
+				</div>
+			{/if}
+		{/if}
+
+		<slot name="buttons" />
+	</svelte:fragment>
+</TextBox>
+
+<style lang="scss">
+	@use "./NumberBox";
+</style>

package/src/lib/PersonPicture/PersonPicture.scss

@@ -0,0 +1,35 @@
+@use "../mixins" as *;
+
+.person-picture {
+	@include flex($justify: center, $align: center);
+	user-select: none;
+	text-align: center;
+	overflow: hidden;
+	inline-size: 100%;
+	block-size: 100%;
+	flex: 0 0 auto;
+	background-color: var(--control-alt-fill-quarternary);
+	border: 1px solid var(--card-stroke-default);
+	background-clip: padding-box;
+	box-sizing: border-box;
+	border-radius: 50%;
+	font: {
+		family: var(--font-family-display);
+		weight: 600;
+		size: calc(var(--person-picture-size) * (5 / 12));
+	}
+	&-container {
+		display: flex;
+		position: relative;
+		inline-size: var(--person-picture-size);
+		block-size: var(--person-picture-size);
+	}
+	&-badge {
+		@include flex($direction: column, $align: end);
+		position: absolute;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+}

package/src/lib/PersonPicture/PersonPicture.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	/** The size of the picture in pixels. */
+	export let size = 72;
+
+	/** Source URL used for the picture. */
+	export let src: string = undefined;
+
+	/** Defines the alt text used if an `src` attribute is specified. Also used as fallback text if no `src` or slot text is provided. */
+	export let alt: string = undefined;
+
+	/** Specifies a custom class name for the inner picture. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the inner picture element. */
+	export let element: HTMLImageElement | HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the outer picture container. */
+	export let containerElement: HTMLDivElement = null;
+
+	let error = false;
+
+	$: if (src) error = false;
+</script>
+
+<div
+	class="person-picture-container"
+	style="--fds-person-picture-size: {size}px"
+	bind:this={containerElement}
+>
+	{#if src && !error}
+		<img
+			bind:this={element}
+			on:error={() => (error = true)}
+			class="person-picture {className}"
+			width={size}
+			height={size}
+			{src}
+			{alt}
+			{...$$restProps}
+		/>
+	{:else}
+		<div bind:this={element} class="person-picture {className}" {...$$restProps}>
+			<slot>
+				{alt
+					?.split(" ")
+					.map(i => i.charAt(0))
+					.join("")
+					.toUpperCase() ?? ""}
+			</slot>
+		</div>
+	{/if}
+	{#if $$slots.badge}
+		<span class="person-picture-badge">
+			<slot name="badge" />
+		</span>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "./PersonPicture";
+</style>

package/src/lib/ProgressBar/ProgressBar.scss

@@ -0,0 +1,83 @@
+@use "../mixins" as *;
+
+@keyframes indeterminate-1 {
+	0% {
+		opacity: 1;
+		transform: translateX(-100%);
+	}
+	75% {
+		opacity: 1;
+		transform: translateX(300%);
+	}
+	75.01% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0;
+		transform: translateX(300%);
+	}
+}
+@keyframes indeterminate-2 {
+	0% {
+		opacity: 0;
+		transform: translateX(-150%);
+	}
+	37.49% {
+		opacity: 0;
+	}
+	37.5% {
+		opacity: 1;
+		transform: translateX(-150%);
+	}
+	100% {
+		transform: translateX(166.66%);
+		opacity: 1;
+	}
+}
+
+.progress-bar {
+	@include flex($align: center);
+	width: 100%;
+	min-block-size: 3px;
+	&-track {
+		height: 3px;
+		max-width: 50%;
+		transition: var(--control-fast-duration) linear fill;
+		fill: var(--accent-default);
+	}
+	&-rail {
+		fill: var(--control-strong-stroke-default);
+		width: 100%;
+		height: 1px;
+	}
+	&.indeterminate {
+		.progress-bar- {
+			&rail {
+				display: none;
+			}
+			&track {
+				animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+				&:first-of-type {
+					width: 40%;
+					animation: 2s infinite indeterminate-1;
+				}
+				&:nth-of-type(2) {
+					width: 60%;
+					animation: 2s infinite indeterminate-2;
+				}
+			}
+		}
+	}
+	// &.status- {
+	// 	&paused {
+	// 		.progress-bar-fill {
+	// 			fill: var(--system-caution);
+	// 		}
+	// 	}
+	// 	&error {
+	// 		.progress-bar-fill {
+	// 			fill: var(--system-critical);
+	// 		}
+	// 	}
+	// }
+}