fluent-svelte-extra 2.0.2 → 2.0.3

package/AutoSuggestBox/AutoSuggestBox.scss

@@ -1,44 +1,50 @@
-@use "../mixins" as *;
-
-.auto-suggest-box-flyout {
-	z-index: 100;
-	overflow: auto;
-	position: absolute;
-	inset-inline-start: -1px;
-	inset-block-start: calc(100% + 1px);
-	inline-size: calc(100% + 2px);
-	margin: 0;
-	padding: 0;
-	padding-block: 2px;
-	box-sizing: border-box;
-	color: var(--text-primary);
-	border-radius: var(--overlay-corner-radius);
-	border-end-start-radius: 0;
-	border-end-end-radius: 0;
-	border: 1px solid var(--surface-stroke-flyout);
-	background-color: var(--solid-background-quarternary);
-	background-clip: padding-box;
-	box-shadow: var(--flyout-shadow);
-	max-block-size: 472px;
-}
-
-.auto-suggest-item-wrapper {
-	display: block;
-}
-
-:global {
-	.auto-suggest-box.open {
-		background-color: var(--control-fill-input-active) !important;
-		.text-box-underline::after {
-			content: "";
-			border-bottom: 2px solid var(--fds-accent-default);
-		}
-		input::placeholder {
-			color: var(--text-tertiary);
-		}
-		.text-box-underline {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-}
+@use "../mixins" as *;
+
+.auto-suggest-box-flyout {
+	z-index: 100;
+	overflow: auto;
+	position: absolute;
+	inset-inline-start: -1px;
+	inset-block-start: calc(100% + 1px);
+	inline-size: calc(100% + 2px);
+	margin: 0;
+	padding: 0;
+	padding-block: 2px;
+	box-sizing: border-box;
+	color: var(--text-primary);
+	border-radius: var(--overlay-corner-radius);
+	border-end-start-radius: 0;
+	border-end-end-radius: 0;
+	border: 1px solid var(--surface-stroke-flyout);
+	background-color: var(--solid-background-quarternary);
+	background-clip: padding-box;
+	box-shadow: var(--flyout-shadow);
+	max-block-size: 472px;
+	&.acrylic {
+		background-color: var(--acrylic-fallback-background-base);
+		background-image: var(--acrylic-noise-asset-alpha);
+		backdrop-filter: var(--acrylic-fallback-filter);
+		background-clip: border-box;
+	}
+}
+
+.auto-suggest-item-wrapper {
+	display: block;
+}
+
+:global {
+	.auto-suggest-box.open {
+		background-color: var(--control-fill-input-active) !important;
+		.text-box-underline::after {
+			content: "";
+			border-bottom: 2px solid var(--fds-accent-default);
+		}
+		input::placeholder {
+			color: var(--text-tertiary);
+		}
+		.text-box-underline {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+}

package/AutoSuggestBox/AutoSuggestBox.svelte

@@ -1,5 +1,5 @@
-<svelte:options accessors />
-
+<svelte:options accessors />
+
 <script >import { createEventDispatcher } from "svelte";
 import { uid } from "../internal";
 import TextBox from "../TextBox/TextBox.svelte";
@@ -12,6 +12,8 @@ export let maxSuggestions = 99999;
 export let items = [];
 /** The current visibility state of the suggestion flyout. */
 export let open = false;
+/** Whether to use acryllic styling for the flyout. */
+export let acrylic = true;
 /** Disables or enables AutoSuggest mode */
 export let autoSuggest = true;
 /** Bindable index of the currently selected item. */
@@ -123,86 +125,86 @@ function handleKeyDown(event) {
         open = true;
     }
 }
-</script>
-
-<TextBox
-	type="search"
-	class="auto-suggest-box {open && matches.length > 0 ? 'open' : ''} {className}"
-	on:search={() => {
-		if (open && matches.length > 0) value = matches[selection];
-	}}
-	on:search
-	on:input
-	on:input={handleInput}
-	on:outermousedown={() => (open = false)}
-	on:focus={() => (focused = true)}
-	on:focus
-	on:blur={() => (focused = false)}
-	on:blur
-	on:keydown={handleKeyDown}
-	on:keydown
-	on:change
-	on:beforeinput
-	on:click
-	on:dblclick
-	on:contextmenu
-	on:mousedown
-	on:mouseup
-	on:mouseover
-	on:mouseout
-	on:mouseenter
-	on:mouseleave
-	on:keypress
-	on:keyup
-	on:clear={() => {
-		typedValue = "";
-		if (items.length > 0) open = true;
-	}}
-	on:clear
-	bind:inputElement
-	bind:containerElement
-	bind:clearButtonElement
-	bind:searchButtonElement
-	bind:buttonsContainerElement
-	bind:value
-	{...$$restProps}
->
-	{#if open && matches.length > 0}
-		<ul id={flyoutId} role="listbox" class="auto-suggest-box-flyout" bind:this={flyoutElement}>
-			{#each matches as item, index (item)}
-				<div class="auto-suggest-item-wrapper">
-					<slot
-						name="item-template"
-						id="{flyoutId}-item-{index}"
-						{value}
-						{matches}
-						{selection}
-						{item}
-						{index}
-					>
-						<ListItem
-							tabindex={-1}
-							id="{flyoutId}-item-{index}"
-							role="option"
-							on:click={() => {
-								value = matches[selection];
-								selection = index;
-								dispatch("itemSelectedOnPurpose", {
-									item: matches[selection],
-									index: selection
-								});
-								open = false;
-							}}
-							selected={selection === index}>{item}</ListItem
-						>
-					</slot>
-				</div>
-			{/each}
-		</ul>
-	{/if}
-
-	<slot />
-	<slot name="buttons" slot="buttons" />
-</TextBox>
-
-<style >.auto-suggest-box-flyout{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);inline-size:calc(100% + 2px);inset-block-start:calc(100% + 1px);inset-inline-start:-1px;margin:0;max-block-size:472px;overflow:auto;padding:0;padding-block:2px;position:absolute;z-index:100}.auto-suggest-item-wrapper{display:block}:global(.auto-suggest-box.open){background-color:var(--fds-control-fill-input-active)!important}:global(.auto-suggest-box.open) :global(.text-box-underline:after){border-bottom:2px solid var(--fds-accent-default);content:""}:global(.auto-suggest-box.open) :global(input::-moz-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input:-ms-input-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input::placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(.text-box-underline){border-bottom-left-radius:0;border-bottom-right-radius:0}</style>
+</script>
+
+<TextBox
+	type="search"
+	class="auto-suggest-box {open && matches.length > 0 ? 'open' : ''} {className}"
+	on:search={() => {
+		if (open && matches.length > 0) value = matches[selection];
+	}}
+	on:search
+	on:input
+	on:input={handleInput}
+	on:outermousedown={() => (open = false)}
+	on:focus={() => (focused = true)}
+	on:focus
+	on:blur={() => (focused = false)}
+	on:blur
+	on:keydown={handleKeyDown}
+	on:keydown
+	on:change
+	on:beforeinput
+	on:click
+	on:dblclick
+	on:contextmenu
+	on:mousedown
+	on:mouseup
+	on:mouseover
+	on:mouseout
+	on:mouseenter
+	on:mouseleave
+	on:keypress
+	on:keyup
+	on:clear={() => {
+		typedValue = "";
+		if (items.length > 0) open = true;
+	}}
+	on:clear
+	bind:inputElement
+	bind:containerElement
+	bind:clearButtonElement
+	bind:searchButtonElement
+	bind:buttonsContainerElement
+	bind:value
+	{...$$restProps}
+>
+	{#if open && matches.length > 0}
+		<ul id={flyoutId} role="listbox" class="auto-suggest-box-flyout" bind:this={flyoutElement} class:acrylic>
+			{#each matches as item, index (item)}
+				<div class="auto-suggest-item-wrapper">
+					<slot
+						name="item-template"
+						id="{flyoutId}-item-{index}"
+						{value}
+						{matches}
+						{selection}
+						{item}
+						{index}
+					>
+						<ListItem
+							tabindex={-1}
+							id="{flyoutId}-item-{index}"
+							role="option"
+							on:click={() => {
+								value = matches[selection];
+								selection = index;
+								dispatch("itemSelectedOnPurpose", {
+									item: matches[selection],
+									index: selection
+								});
+								open = false;
+							}}
+							selected={selection === index}>{item}</ListItem
+						>
+					</slot>
+				</div>
+			{/each}
+		</ul>
+	{/if}
+
+	<slot />
+	<slot name="buttons" slot="buttons" />
+</TextBox>
+
+<style >.auto-suggest-box-flyout{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);inline-size:calc(100% + 2px);inset-block-start:calc(100% + 1px);inset-inline-start:-1px;margin:0;max-block-size:472px;overflow:auto;padding:0;padding-block:2px;position:absolute;z-index:100}.auto-suggest-box-flyout.acrylic{-webkit-backdrop-filter:var(--fds-acrylic-fallback-filter);backdrop-filter:var(--fds-acrylic-fallback-filter);background-clip:border-box;background-color:var(--fds-acrylic-fallback-background-base);background-image:var(--fds-acrylic-noise-asset-alpha)}.auto-suggest-item-wrapper{display:block}:global(.auto-suggest-box.open){background-color:var(--fds-control-fill-input-active)!important}:global(.auto-suggest-box.open) :global(.text-box-underline:after){border-bottom:2px solid var(--fds-accent-default);content:""}:global(.auto-suggest-box.open) :global(input::-moz-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input:-ms-input-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input::placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(.text-box-underline){border-bottom-left-radius:0;border-bottom-right-radius:0}</style>

package/AutoSuggestBox/AutoSuggestBox.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         maxSuggestions?: number;
         items?: string[];
         open?: boolean;
+        acrylic?: boolean;
         autoSuggest?: boolean;
         selection?: number;
         matches?: string[];
@@ -89,6 +90,9 @@ export default class AutoSuggestBox extends SvelteComponentTyped<AutoSuggestBoxP
     get open(): boolean;
     /**accessor*/
     set open(_: boolean);
+    get acrylic(): boolean;
+    /**accessor*/
+    set acrylic(_: boolean);
     get autoSuggest(): boolean;
     /**accessor*/
     set autoSuggest(_: boolean);

package/ComboBox/ComboBox.scss

@@ -1,152 +1,158 @@
-@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%);
-			}
-		}
-	}
-}
+@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;
+
+		&.acrylic {
+			background-color: var(--acrylic-fallback-background-base);
+			background-image: var(--acrylic-noise-asset-alpha);
+			backdrop-filter: var(--acrylic-fallback-filter);
+			background-clip: border-box;
+		}
+		@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%);
+			}
+		}
+	}
+}