fluent-svelte-extra 1.9.5 → 1.9.6

package/ExpandMenu/ExpandMenu.svelte

@@ -40,12 +40,12 @@ onMount(() => {
         findText.classList.add("expand-menu-text");
     }
 });
-</script>
-
-<div class="glob">
-	<div role="list" class="expand-menu" bind:this={root} use:forwardEvents>
-		<slot />
-	</div>
-</div>
-
-<style>.expand-menu{background-color:var(--fds-solid-background-quarternary);display:flex;flex-direction:column;overflow:hidden;transition:width var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing)}.glob :global(.expand-menu-closed){width:48px!important}.glob :global(.expand-menu-closed>li[role=listitem]){padding-inline:unset!important}.glob :global(.expand-menu-icon){-webkit-margin-end:unset!important;left:11px;margin-inline-end:unset!important;min-height:16px;min-width:16px;position:absolute}.glob :global(.expand-menu-text){left:45px;position:absolute;white-space:nowrap!important}:global(.fds-copy-calculation){display:block;left:-1000000000px;opacity:0;position:absolute}</style>
+</script>
+
+<div class="glob">
+	<div role="list" class="expand-menu" bind:this={root} use:forwardEvents>
+		<slot />
+	</div>
+</div>
+
+<style>.expand-menu{background-color:var(--fds-solid-background-quarternary);display:flex;flex-direction:column;overflow:hidden;transition:width var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing)}.glob :global(.expand-menu-closed){width:48px!important}.glob :global(.expand-menu-closed>li[role=listitem]){padding-inline:unset!important}.glob :global(.expand-menu-icon){-webkit-margin-end:unset!important;left:11px;margin-inline-end:unset!important;min-height:16px;min-width:16px;position:absolute}.glob :global(.expand-menu-text){left:45px;position:absolute;white-space:nowrap!important}:global(.fds-copy-calculation){display:block;left:-1000000000px;opacity:0;position:absolute}</style>

package/Expander/Expander.scss

@@ -1,136 +1,136 @@
-@use "../mixins" as *;
-
-.expander {
-	@include flex($direction: column);
-	color: var(--text-primary);
-	border-radius: var(--control-corner-radius);
-	inline-size: 100%;
-	user-select: none;
-	.expander-header {
-		transition: var(--fds-control-faster-duration) ease background;
-	}
-
-	&.expandable .expander-header {
-		&:hover {
-			background-color: var(--control-fill-secondary);
-			border: 1px solid var(--fds-control-stroke-default);
-		}
-		&:active {
-			background-color: var(--control-fill-tertiary);
-			border: 1px solid var(--fds-control-stroke-default);
-		}
-	}
-
-	&.direction- {
-		&down {
-			.expander-content {
-				border-block-start: none;
-				border-radius: var(--control-corner-radius);
-				border-start-start-radius: 0 !important;
-				border-start-end-radius: 0 !important;
-			}
-			&.expanded .expander-header {
-				border-radius: var(--control-corner-radius);
-				border-end-start-radius: 0 !important;
-				border-end-end-radius: 0 !important;
-			}
-		}
-		&up {
-			.expander-content {
-				border-bottom: none;
-				border-radius: var(--control-corner-radius);
-				border-end-start-radius: 0 !important;
-				border-end-end-radius: 0 !important;
-				&-anchor {
-					order: -1;
-				}
-			}
-			&.expanded .expander-header {
-				border-radius: var(--control-corner-radius);
-				border-start-start-radius: 0 !important;
-				border-start-end-radius: 0 !important;
-			}
-		}
-	}
-	&.expanded {
-		.expander {
-			&-content {
-				transform: 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;
-		min-height: 50px;
-		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);
-		}
-		&:active .expander-chevron {
-			color: var(--text-secondary);
-		}
-	}
-	&-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-fast-duration)) var(--control-fast-out-slow-in-easing)
-				transform var(--control-fast-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 {
-			position: relative;
-			max-block-size: 6.02e23vmax;
-		}
-	}
-}
+@use "../mixins" as *;
+
+.expander {
+	@include flex($direction: column);
+	color: var(--text-primary);
+	border-radius: var(--control-corner-radius);
+	inline-size: 100%;
+	user-select: none;
+	.expander-header {
+		transition: var(--fds-control-faster-duration) ease background;
+	}
+
+	&.expandable .expander-header {
+		&:hover {
+			background-color: var(--control-fill-secondary);
+			border: 1px solid var(--fds-control-stroke-default);
+		}
+		&:active {
+			background-color: var(--control-fill-tertiary);
+			border: 1px solid var(--fds-control-stroke-default);
+		}
+	}
+
+	&.direction- {
+		&down {
+			.expander-content {
+				border-block-start: none;
+				border-radius: var(--control-corner-radius);
+				border-start-start-radius: 0 !important;
+				border-start-end-radius: 0 !important;
+			}
+			&.expanded .expander-header {
+				border-radius: var(--control-corner-radius);
+				border-end-start-radius: 0 !important;
+				border-end-end-radius: 0 !important;
+			}
+		}
+		&up {
+			.expander-content {
+				border-bottom: none;
+				border-radius: var(--control-corner-radius);
+				border-end-start-radius: 0 !important;
+				border-end-end-radius: 0 !important;
+				&-anchor {
+					order: -1;
+				}
+			}
+			&.expanded .expander-header {
+				border-radius: var(--control-corner-radius);
+				border-start-start-radius: 0 !important;
+				border-start-end-radius: 0 !important;
+			}
+		}
+	}
+	&.expanded {
+		.expander {
+			&-content {
+				transform: 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;
+		min-height: 50px;
+		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);
+		}
+		&:active .expander-chevron {
+			color: var(--text-secondary);
+		}
+	}
+	&-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-fast-duration)) var(--control-fast-out-slow-in-easing)
+				transform var(--control-fast-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 {
+			position: relative;
+			max-block-size: 6.02e23vmax;
+		}
+	}
+}

package/Expander/Expander.svelte

@@ -43,101 +43,101 @@ function fadeSlide(node, options) {
     return {
         duration: options.duration,
         easing: options.easing,
-        css: t => `
-				${slideTrans.css(t, options.duration)}
-				opacity: ${t};
+        css: t => `
+				${slideTrans.css(t, options.duration)}
+				opacity: ${t};
 			`
     };
 }
-</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"
-	bind:this={containerElement}
-	class:expanded
-	class:expandable
-	{...$$restProps}
->
-	<svelte:element this="h">
-		<div
-			role="button"
-			id={headerId}
-			aria-controls={contentId}
-			class="expander-header"
-			aria-expanded={expanded}
-			tabindex={expandable ? 0 : -1}
-			bind:this={headerElement}
-			on:keydown={handleKeydown}
-			on:click={() => {
-				if (expandable) {
-					expanded = !expanded;
-				}
-			}}
-		>
-			{#if $$slots.icon}
-				<div class="expander-icon">
-					<slot name="icon" />
-				</div>
-			{/if}
-			<span class="expander-header-title">
-				<slot />
-			</span>
-
-			{#if expandable}
-				<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>
-			{/if}
-		</div>
-	</svelte:element>
-	{#if expanded}
-		<div
-			class="expander-content-anchor"
-			transition:fadeSlide={{ duration: 500, easing: expoOut }}
-		>
-			<div class="expander-content" bind:this={contentElement}>
-				<slot name="content" />
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
+</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"
+	bind:this={containerElement}
+	class:expanded
+	class:expandable
+	{...$$restProps}
+>
+	<svelte:element this="h">
+		<div
+			role="button"
+			id={headerId}
+			aria-controls={contentId}
+			class="expander-header"
+			aria-expanded={expanded}
+			tabindex={expandable ? 0 : -1}
+			bind:this={headerElement}
+			on:keydown={handleKeydown}
+			on:click={() => {
+				if (expandable) {
+					expanded = !expanded;
+				}
+			}}
+		>
+			{#if $$slots.icon}
+				<div class="expander-icon">
+					<slot name="icon" />
+				</div>
+			{/if}
+			<span class="expander-header-title">
+				<slot />
+			</span>
+
+			{#if expandable}
+				<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>
+			{/if}
+		</div>
+	</svelte:element>
+	{#if expanded}
+		<div
+			class="expander-content-anchor"
+			transition:fadeSlide={{ duration: 500, easing: expoOut }}
+		>
+			<div class="expander-content" bind:this={contentElement}>
+				<slot name="content" />
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>

package/Flipper/Flipper.svelte

@@ -1,40 +1,40 @@
 <script >export let direction;
 let className = "";
 export { className as class };
-</script>
-
-<button class="flipper {className}" on:click {...$$restProps}>
-	{#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}
-</button>
-
-<style>.flipper{fill:currentColor;align-items:center;-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);backdrop-filter:var(--fds-acrylic-blur-factor);background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-border-default);border-radius:var(--fds-control-corner-radius);box-shadow:var(--fds-flyout-shadow);color:var(--fds-control-strong-fill-default);display:flex;height:35px;justify-content:center;padding:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.flipper>svg{transform:scale(.9)}.flipper:hover{color:var(--fds-text-primary)}.flipper:hover>svg{transform:scale(1)}.flipper:active>svg{transform:scale(.8)}</style>
+</script>
+
+<button class="flipper {className}" on:click {...$$restProps}>
+	{#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}
+</button>
+
+<style>.flipper{fill:currentColor;align-items:center;-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);backdrop-filter:var(--fds-acrylic-blur-factor);background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-border-default);border-radius:var(--fds-control-corner-radius);box-shadow:var(--fds-flyout-shadow);color:var(--fds-control-strong-fill-default);display:flex;height:35px;justify-content:center;padding:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.flipper>svg{transform:scale(.9)}.flipper:hover{color:var(--fds-text-primary)}.flipper:hover>svg{transform:scale(1)}.flipper:active>svg{transform:scale(.8)}</style>

package/Flyout/FlyoutSurface.scss

@@ -1,14 +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);
-}
+@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/Flyout/FlyoutSurface.svelte

@@ -6,10 +6,10 @@ export { className as class };
 /** Obtains a bound DOM reference to the surface element. */
 export let element = null;
 const forwardEvents = createEventForwarder(get_current_component());
-</script>
-
-<div class="flyout {className}" use:forwardEvents bind:this={element} {...$$restProps}>
-	<slot />
-</div>
-
-<style >.flyout{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-inline-size:320px;padding:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>
+</script>
+
+<div class="flyout {className}" use:forwardEvents bind:this={element} {...$$restProps}>
+	<slot />
+</div>
+
+<style >.flyout{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-inline-size:320px;padding:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>