fluent-svelte-extra 1.0.0

package/src/lib/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { createEventDispatcher, setContext } from "svelte";
+	import { externalMouseEvents, arrowNavigation } from "$lib/internal";
+	import { tabbable } from "tabbable";
+
+	import MenuFlyoutSurface from "../MenuFlyout/MenuFlyoutSurface.svelte";
+
+	/** 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;
+
+	/** The current visibility state of the context menu. */
+	export let open = false;
+
+	/** 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;
+
+	const dispatch = createEventDispatcher();
+
+	let menu;
+	let menuPosition = {
+		x: 0,
+		y: 0
+	};
+	let mousePosition = {
+		x: 0,
+		y: 0
+	};
+
+	$: dispatch(open ? "open" : "close");
+	$: if (menu && tabbable(menuElement).length > 0) tabbable(menuElement)[0].focus();
+	$: if (anchorElement) {
+		const { width, height } = anchorElement.getBoundingClientRect();
+
+		menuPosition.x = Math.min(window.innerWidth - width, mousePosition.x);
+		menuPosition.y =
+			mousePosition.y > window.innerHeight - height
+				? (mousePosition.y -= height)
+				: mousePosition.y;
+
+		if (menuPosition.y < 0) menuPosition.y = 0;
+	}
+
+	async function handleContextMenu({ clientX, clientY }: MouseEvent) {
+		open = true;
+
+		mousePosition = {
+			x: clientX,
+			y: clientY
+		};
+	}
+
+	function handleEscapeKey({ key }) {
+		if (key === "Escape") open = false;
+	}
+
+	function mountMenu(node: HTMLDivElement) {
+		document.body.appendChild(node);
+		return {
+			destroy: () => node.remove()
+		};
+	}
+
+	setContext("closeFlyout", event => {
+		dispatch("select");
+		if (closeOnSelect) open = false;
+	});
+</script>
+
+<svelte:window on:keydown={handleEscapeKey} />
+
+<div
+	class="context-menu-wrapper"
+	on:contextmenu|preventDefault|stopPropagation={handleContextMenu}
+	on:contextmenu
+	bind:this={wrapperElement}
+>
+	<slot />
+	{#if open}
+		<div
+			use:mountMenu
+			use:arrowNavigation={{ preventTab: true }}
+			use:externalMouseEvents={{ type: "mousedown" }}
+			on:contextmenu|stopPropagation={e => e.preventDefault()}
+			bind:this={anchorElement}
+			on:outermousedown={() => (open = false)}
+			class="context-menu-anchor"
+			style="top: {menuPosition.y}px; left: {menuPosition.x}px;"
+		>
+			<MenuFlyoutSurface bind:this={menu} bind:element={menuElement} {...$$restProps}>
+				<slot name="flyout" />
+			</MenuFlyoutSurface>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "./ContextMenu";
+</style>

package/src/lib/Expander/Expander.scss

@@ -0,0 +1,134 @@
+@use "../mixins" as *;
+
+.expander {
+	@include flex($direction: column);
+	color: var(--text-primary);
+	border-radius: var(--control-corner-radius);
+	inline-size: 100%;
+	user-select: none;
+	&.direction- {
+		&down {
+			.expander-content {
+				border-block-start: none;
+				border-radius: var(--control-corner-radius);
+				border-start-start-radius: 0;
+				border-start-end-radius: 0;
+				transform: translateY(-100%);
+			}
+			&.expanded .expander-header {
+				border-radius: var(--control-corner-radius);
+				border-end-start-radius: 0;
+				border-end-end-radius: 0;
+			}
+		}
+		&up {
+			.expander-content {
+				border-bottom: none;
+				border-radius: var(--control-corner-radius);
+				border-end-start-radius: 0;
+				border-end-end-radius: 0;
+				transform: translateY(100%);
+				&-anchor {
+					order: -1;
+				}
+			}
+			&.expanded .expander-header {
+				border-radius: var(--control-corner-radius);
+				border-start-start-radius: 0;
+				border-start-end-radius: 0;
+			}
+		}
+	}
+	&.expanded {
+		.expander {
+			&-content {
+				transform: none;
+				transition: var(--control-slow-duration) var(--control-fast-out-slow-in-easing)
+					transform;
+				&-anchor {
+					max-block-size: 6.02e23vmax;
+					transition: none;
+				}
+			}
+			&-chevron svg {
+				transform: rotate(180deg);
+			}
+		}
+	}
+	> h3 {
+		display: contents;
+	}
+	&-icon {
+		flex: 0 0 auto;
+		color: var(--text-primary);
+		inline-size: 16px;
+		block-size: 16px;
+		margin-inline-end: 16px;
+		> :global(svg) {
+			@include icon($size: 16px);
+		}
+	}
+	&-header {
+		@include flex($align: center);
+		@include typography-body;
+		text-align: start;
+		outline: none;
+		box-sizing: border-box;
+		padding-inline-start: 16px;
+		padding: 8px;
+		background-clip: padding-box;
+		background-color: var(--card-background-default);
+		border: 1px solid var(--card-stroke-default);
+		border-radius: var(--control-corner-radius);
+		&-title {
+			flex: 1 1 auto;
+		}
+		&:focus-visible {
+			box-shadow: var(--focus-stroke);
+		}
+		&:hover .expander-chevron {
+			background-color: var(--subtle-fill-secondary);
+		}
+		&:active .expander-chevron {
+			color: var(--text-secondary);
+			background-color: var(--subtle-fill-tertiary);
+		}
+	}
+	&-chevron {
+		@include flex($align: center, $justify: center);
+		flex: 0 0 auto;
+		inline-size: 32px;
+		block-size: 32px;
+		margin-inline-start: 20px;
+		border: none;
+		outline: none;
+		appearance: none;
+		color: var(--text-primary);
+		border-radius: var(--control-corner-radius);
+		background-color: var(--subtle-fill-transparent);
+		&:focus-visible {
+			box-shadow: var(--focus-stroke);
+		}
+		svg {
+			inline-size: 12px;
+			block-size: 12px;
+			fill: currentColor;
+			transition: calc(var(--control-faster-duration) * 1.2) linear transform
+				var(--control-faster-duration);
+		}
+	}
+	&-content {
+		@include typography-body;
+		background-clip: padding-box;
+		background-color: var(--card-background-secondary);
+		border: 1px solid var(--card-stroke-default);
+		padding: 16px;
+		transition: var(--control-fast-duration) cubic-bezier(1, 1, 0, 1) transform;
+		&-anchor {
+			max-height: 0;
+			position: relative;
+			overflow: hidden;
+			transition: 0ms linear var(--control-slow-duration) max-height;
+		}
+	}
+}

package/src/lib/Expander/Expander.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	// TODO: progressively enhance this
+
+	import { createEventDispatcher } from "svelte";
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder, uid } from "$lib/internal";
+
+	/** Determines whether the expander is expanded (open) or not. */
+	export let expanded = false;
+
+	/** Determines the direction that the expander will extend to. */
+	export let direction: "down" | "up" = "down";
+
+	// svelte-ignore unused-export-let
+	/** Determines the expander header's semantic HTML heading tag (h1-h6). */
+	export let headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;
+
+	/** Specifies a custom class name for the expander. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the expander's container element. */
+	export let containerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the expander's header button element. */
+	export let headerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the expander's content container. */
+	export let contentElement: HTMLDivElement = null;
+
+	const dispatch = createEventDispatcher();
+	const forwardEvents = createEventForwarder(get_current_component(), ["expand", "collapse"]);
+	const headerId = uid("fds-expander-header-");
+	const contentId = uid("fds-expander-content-");
+
+	$: if (expanded) {
+		dispatch("expand");
+	} else {
+		dispatch("collapse");
+	}
+
+	function handleKeydown({ key }) {
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			expanded = !expanded;
+		}
+	}
+</script>
+
+<!--
+@component
+Expanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header. [Docs](https://fluent-svelte.vercel.app/docs/components/expander)
+- Usage:
+    ```tsx
+    <Expander>
+        Header
+        <svelte:fragment slot="content">
+            Content
+        </svelte:fragment>
+    </Expander>
+    ```
+-->
+<div
+	use:forwardEvents
+	class="expander direction-{direction} {className}"
+	role="region"
+	class:expanded
+	bind:this={containerElement}
+	{...$$restProps}
+>
+	<svelte:element this="h">
+		<div
+			role="button"
+			id={headerId}
+			aria-controls={contentId}
+			class="expander-header"
+			aria-expanded={expanded}
+			tabindex="0"
+			bind:this={headerElement}
+			on:keydown={handleKeydown}
+			on:click={() => (expanded = !expanded)}
+		>
+			{#if $$slots.icon}
+				<div class="expander-icon">
+					<slot name="icon" />
+				</div>
+			{/if}
+			<span class="expander-header-title">
+				<slot />
+			</span>
+			<button
+				class="expander-chevron"
+                type="button"
+				tabindex="-1"
+				id={contentId}
+				aria-labelledby={headerId}
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+					{#if direction === "down"}
+						<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"
+						/>
+					{:else}
+						<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"
+						/>
+					{/if}
+				</svg>
+			</button>
+		</div>
+	</svelte:element>
+	<div class="expander-content-anchor">
+		<div class="expander-content" bind:this={contentElement}>
+			<slot name="content" />
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@use "./Expander";
+</style>

package/src/lib/Flipper/Flipper.svelte

@@ -0,0 +1,49 @@
+<script>
+ export let direction;
+</script>
+
+<div id="flipper">
+ {#if direction === "right"}
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <g id="surface1">
+  <path d="M 6 11.933594 C 6 12.644531 6.84375 13.03125 7.378906 12.558594 L 11.589844 8.878906 C 11.84375 8.65625 11.988281 8.339844 11.988281 8 C 11.988281 7.660156 11.84375 7.34375 11.589844 7.121094 L 7.378906 3.441406 C 6.84375 2.96875 6 3.355469 6 4.066406 Z M 6 11.933594 "/>
+  </g>
+  </svg>
+  {:else if direction === "left"}
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+   <g id="surface1">
+   <path  d="M 10 11.933594 C 10 12.648438 9.15625 13.03125 8.617188 12.558594 L 4.410156 8.878906 C 4.15625 8.65625 4.011719 8.335938 4.011719 8 C 4.011719 7.664062 4.15625 7.34375 4.410156 7.121094 L 8.617188 3.441406 C 9.15625 2.96875 10 3.351562 10 4.066406 Z M 10 11.933594 "/>
+   </g>
+   </svg>   
+  {/if}
+</div>
+
+<style>
+
+ #flipper {
+  display:flex;
+  align-items: center;
+  justify-content:center;
+  height:35px;
+  border-radius:3px;
+  background-color: rgba(255,255,255,.1);
+  backdrop-filter: blur(30px) saturate(125%);
+  fill: rgb(205, 193, 193);
+ }
+
+ #flipper > svg {
+  transform:scale(0.9);
+ }
+
+ #flipper:hover {
+  fill: currentColor;
+ }
+
+ #flipper:hover > svg {
+  transform:scale(1);
+ }
+
+ #flipper:active > svg {
+  transform:scale(0.8);  
+ }
+</style>

package/src/lib/Flyout/FlyoutSurface.scss

@@ -0,0 +1,14 @@
+@use "../mixins" as *;
+
+.flyout {
+	@include typography-body;
+	padding: 16px;
+	min-inline-size: 320px;
+	box-sizing: border-box;
+	color: var(--text-primary);
+	border-radius: var(--overlay-corner-radius);
+	border: 1px solid var(--surface-stroke-flyout);
+	background-color: var(--solid-background-quarternary);
+	background-clip: padding-box;
+	box-shadow: var(--flyout-shadow);
+}

package/src/lib/Flyout/FlyoutSurface.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder } from "$lib/internal";
+
+	/** Specifies a custom class name for the surface. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the surface element. */
+	export let element: HTMLDivElement = null;
+
+	const forwardEvents = createEventForwarder(get_current_component());
+</script>
+
+<div class="flyout {className}" use:forwardEvents bind:this={element} {...$$restProps}>
+	<slot />
+</div>
+
+<style lang="scss">
+	@use "./FlyoutSurface";
+</style>

package/src/lib/Flyout/FlyoutWrapper.scss

@@ -0,0 +1,81 @@
+@keyframes flyout-in {
+	0% {
+		opacity: 0;
+		transform: var(--flyout-transform) var(--flyout-transition-offset, translateY(12px));
+	}
+	100% {
+		opacity: 1;
+		transform: var(--flyout-transform);
+	}
+}
+
+.flyout- {
+	&wrapper {
+		display: inline-block;
+		inline-size: fit-content;
+		block-size: fit-content;
+		position: relative;
+	}
+	&backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		z-index: 9999;
+	}
+	&anchor {
+		position: absolute;
+		z-index: 10000;
+		animation: flyout-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
+		transform: var(--flyout-transform);
+		&.placement- {
+			&top {
+				bottom: calc(100% + var(--flyout-offset));
+				--flyout-transition-offset: translateY(12px);
+			}
+			&bottom {
+				top: calc(100% + var(--flyout-offset));
+				--flyout-transition-offset: translateY(-12px);
+			}
+			&left {
+				right: calc(100% + var(--flyout-offset));
+				--flyout-transition-offset: translateX(12px);
+			}
+			&right {
+				left: calc(100% + var(--flyout-offset));
+				--flyout-transition-offset: translateX(-12px);
+			}
+			&top,
+			&bottom {
+				&.alignment- {
+					&start {
+						inset-inline-start: 0;
+					}
+					&end {
+						inset-inline-end: 0;
+					}
+					&center {
+						inset-inline-start: 50%;
+						--flyout-transform: translateX(-50%);
+					}
+				}
+			}
+			&left,
+			&right {
+				&.alignment- {
+					&start {
+						inset-block-start: 0;
+					}
+					&end {
+						inset-block-end: 0;
+					}
+					&center {
+						inset-block-start: 50%;
+						--flyout-transform: translateY(-50%);
+					}
+				}
+			}
+		}
+	}
+}

package/src/lib/Flyout/FlyoutWrapper.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { uid, focusTrap, getCSSDuration } from "$lib/internal";
+	import { fade } from "svelte/transition";
+	import { circOut } from "svelte/easing";
+
+	import FlyoutSurface from "./FlyoutSurface.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;
+
+	/** 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;
+
+	/** Determines if keyboard focus should be locked to the flyout's contents. */
+	export let trapFocus = true;
+
+	/** Specifies a custom class name for the content wrapper. */
+	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: HTMLDivElement = 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-flyout-anchor-");
+
+	$: _focusTrap = trapFocus ? focusTrap : () => {};
+	$: if (open) {
+		dispatch("open");
+	} else {
+		dispatch("close");
+	}
+
+	function handleEscapeKey({ key }: KeyboardEvent) {
+		if (key === "Escape" && closable) open = false;
+	}
+
+	function closeFlyout() {
+		if (closable) open = false;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			open = !open;
+		}
+	}
+</script>
+
+<!--
+@component
+Flyouts represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be dismissed by clicking or tapping outside of it, or pressing the Esc key. [Docs](https://fluent-svelte.vercel.app/docs/components/flyout)
+- Usage:
+    ```tsx
+    <Flyout>
+        <Button>Trigger Button</Button>
+        <svelte:fragment slot="flyout">
+            Flyout Contents
+        </svelte:fragment>
+    </Flyout>
+    ```
+-->
+
+<svelte:window on:keydown={handleEscapeKey} />
+
+<div
+	class="flyout-wrapper {className}"
+	aria-expanded={open}
+	aria-haspopup={open}
+	aria-controls={menuId}
+	on:click={() => (open = !open)}
+	on:keydown={handleKeyDown}
+	bind:this={wrapperElement}
+>
+	<slot />
+	{#if open}
+		<div
+			id={menuId}
+			class="flyout-anchor placement-{placement} alignment-{alignment}"
+			style="--fds-flyout-offset: {offset}px;"
+			use:_focusTrap
+			out:fade|local={{
+				duration: getCSSDuration("--fds-control-faster-duration"),
+				easing: circOut
+			}}
+			bind:this={anchorElement}
+			on:click={e => e.stopPropagation()}
+			{...$$restProps}
+		>
+			<slot name="override">
+				<FlyoutSurface bind:element={menuElement}>
+					<slot name="flyout" />
+				</FlyoutSurface>
+			</slot>
+		</div>
+		<div
+			class="flyout-backdrop"
+			bind:this={backdropElement}
+			on:click={e => e.stopPropagation()}
+			on:mousedown={closeFlyout}
+		/>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "./FlyoutWrapper";
+</style>

package/src/lib/IconButton/IconButton.scss

@@ -0,0 +1,31 @@
+@use "../mixins" as *;
+
+.icon-button {
+	@include flex($inline: true, $align: center, $justify: center);
+	outline: none;
+	border: none;
+	box-sizing: border-box;
+	min-inline-size: 30px;
+	min-block-size: 30px;
+	padding: 8px;
+	color: var(--text-primary);
+	border-radius: var(--control-corner-radius);
+	background-color: var(--subtle-fill-transparent);
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+	&:hover {
+		background-color: var(--subtle-fill-secondary);
+	}
+	&:active {
+		color: var(--text-secondary);
+		background-color: var(--subtle-fill-tertiary);
+	}
+	&:disabled {
+		background-color: var(--subtle-fill-disabled);
+		color: var(--text-disabled);
+	}
+	:global(svg) {
+		@include icon($size: 16px);
+	}
+}