fluent-svelte-extra 1.9.3 → 1.9.5

package/Acrylic/AcrylicSurface.scss

@@ -1,6 +1,6 @@
-.acrylic-surface {
-	background: var(--acrylic-background-default) var(--acrylic-noise-asset-alpha);
-	backdrop-filter: var(--acrylic-blur-factor);
-	-webkit-backdrop-filter: var(--acrylic-blur-factor);
-	mix-blend-mode: luminosity;
-}
+.acrylic-surface {
+	background: var(--acrylic-background-default) var(--acrylic-noise-asset-alpha);
+	backdrop-filter: var(--acrylic-blur-factor);
+	-webkit-backdrop-filter: var(--acrylic-blur-factor);
+	mix-blend-mode: luminosity;
+}

package/Acrylic/AcrylicSurface.svelte

@@ -7,29 +7,29 @@ export { className as class };
 /** Obtains a bound DOM reference to the surface or anchor element. */
 export let element = null;
 const forwardEvents = createEventForwarder(get_current_component());
-</script>
-
-<!--
-@component
-A component that provides an acrylic surface for content.
-- Usage:
-    ```tsx
-    <div>
-        <AcrylicSurface></AcrylicSurface>
-        <div id="content">
-            <h1>Acrylic Surface</h1>
-        </div>
-    </div>
-    ```
--->
-<svelte:element
-	this="div"
-	use:forwardEvents
-	bind:this={element}
-	class="acrylic-surface {className}"
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
-
-<style >.acrylic-surface{backdrop-filter:var(--fds-acrylic-blur-factor);-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);background:var(--fds-acrylic-background-default) var(--fds-acrylic-noise-asset-alpha);mix-blend-mode:luminosity}</style>
+</script>
+
+<!--
+@component
+A component that provides an acrylic surface for content.
+- Usage:
+    ```tsx
+    <div>
+        <AcrylicSurface></AcrylicSurface>
+        <div id="content">
+            <h1>Acrylic Surface</h1>
+        </div>
+    </div>
+    ```
+-->
+<svelte:element
+	this="div"
+	use:forwardEvents
+	bind:this={element}
+	class="acrylic-surface {className}"
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
+
+<style >.acrylic-surface{backdrop-filter:var(--fds-acrylic-blur-factor);-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);background:var(--fds-acrylic-background-default) var(--fds-acrylic-noise-asset-alpha);mix-blend-mode:luminosity}</style>

package/AutoSuggestBox/AutoSuggestBox.scss

@@ -1,44 +1,44 @@
-@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;
+}
+
+.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";
@@ -123,86 +123,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}>
+			{#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>

package/Button/Button.scss

@@ -1,94 +1,94 @@
-@use "../mixins" as *;
-
-.button {
-	@include flex($inline: true, $align: center, $justify: center);
-	@include typography-body;
-
-	position: relative;
-	box-sizing: border-box;
-	padding-block: 4px 6px;
-	padding-inline: 11px;
-	text-decoration: none;
-	border: none;
-	outline: none;
-	cursor: default;
-	border-radius: var(--control-corner-radius);
-	transition: var(--control-faster-duration) ease background;
-
-	&:focus-visible {
-		box-shadow: var(--focus-stroke);
-	}
-
-	&.style- {
-		&standard {
-			border: 1px solid;
-			border-color: var(--control-border-default);
-			background-color: var(--control-fill-default);
-			color: var(--text-primary);
-			background-clip: padding-box;
-
-			&:hover {
-				background-color: var(--control-fill-secondary);
-			}
-
-			&:active {
-				border-color: var(--control-stroke-default);
-				background-color: var(--control-fill-tertiary);
-				color: var(--text-secondary);
-			}
-
-			&.disabled {
-				border-color: var(--control-stroke-default);
-				background-color: var(--control-fill-disabled);
-				color: var(--text-disabled);
-			}
-		}
-
-		&accent {
-			border: 1px solid var(--control-stroke-on-accent-default);
-			border-bottom-color: var(--control-stroke-on-accent-secondary);
-			background-color: var(--accent-default);
-			color: var(--text-on-accent-primary);
-			transition: var(--control-faster-duration) ease border-color;
-
-			&:hover {
-				background-color: var(--accent-secondary);
-			}
-
-			&:active {
-				border-color: transparent;
-				background-color: var(--accent-tertiary);
-				color: var(--text-on-accent-secondary);
-			}
-
-			&.disabled {
-				border-color: transparent;
-				background-color: var(--accent-disabled);
-				color: var(--text-on-accent-disabled);
-			}
-		}
-
-		&hyperlink {
-			background-color: var(--subtle-fill-transparent);
-			color: var(--accent-text-primary);
-			cursor: pointer;
-
-			&:hover {
-				background-color: var(--subtle-fill-secondary);
-			}
-
-			&:active {
-				background-color: var(--subtle-fill-tertiary);
-				color: var(--accent-text-tertiary);
-			}
-
-			&.disabled {
-				color: var(--accent-text-disabled);
-			}
-		}
-	}
-
-	&.disabled {
-		pointer-events: none;
-	}
-}
+@use "../mixins" as *;
+
+.button {
+	@include flex($inline: true, $align: center, $justify: center);
+	@include typography-body;
+
+	position: relative;
+	box-sizing: border-box;
+	padding-block: 4px 6px;
+	padding-inline: 11px;
+	text-decoration: none;
+	border: none;
+	outline: none;
+	cursor: default;
+	border-radius: var(--control-corner-radius);
+	transition: var(--control-faster-duration) ease background;
+
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+
+	&.style- {
+		&standard {
+			border: 1px solid;
+			border-color: var(--control-border-default);
+			background-color: var(--control-fill-default);
+			color: var(--text-primary);
+			background-clip: padding-box;
+
+			&:hover {
+				background-color: var(--control-fill-secondary);
+			}
+
+			&:active {
+				border-color: var(--control-stroke-default);
+				background-color: var(--control-fill-tertiary);
+				color: var(--text-secondary);
+			}
+
+			&.disabled {
+				border-color: var(--control-stroke-default);
+				background-color: var(--control-fill-disabled);
+				color: var(--text-disabled);
+			}
+		}
+
+		&accent {
+			border: 1px solid var(--control-stroke-on-accent-default);
+			border-bottom-color: var(--control-stroke-on-accent-secondary);
+			background-color: var(--accent-default);
+			color: var(--text-on-accent-primary);
+			transition: var(--control-faster-duration) ease border-color;
+
+			&:hover {
+				background-color: var(--accent-secondary);
+			}
+
+			&:active {
+				border-color: transparent;
+				background-color: var(--accent-tertiary);
+				color: var(--text-on-accent-secondary);
+			}
+
+			&.disabled {
+				border-color: transparent;
+				background-color: var(--accent-disabled);
+				color: var(--text-on-accent-disabled);
+			}
+		}
+
+		&hyperlink {
+			background-color: var(--subtle-fill-transparent);
+			color: var(--accent-text-primary);
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--subtle-fill-secondary);
+			}
+
+			&:active {
+				background-color: var(--subtle-fill-tertiary);
+				color: var(--accent-text-tertiary);
+			}
+
+			&.disabled {
+				color: var(--accent-text-disabled);
+			}
+		}
+	}
+
+	&.disabled {
+		pointer-events: none;
+	}
+}

package/Button/Button.svelte

@@ -13,28 +13,28 @@ export { className as class };
 /** Obtains a bound DOM reference to the button or anchor element. */
 export let element = null;
 const forwardEvents = createEventForwarder(get_current_component());
-</script>
-
-<!--
-@component
-A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
-- Usage:
-    ```tsx
-    <Button>Click me!</Button>
-    ```
--->
-<svelte:element
-	this={href && !disabled ? "a" : "button"}
-	use:forwardEvents
-	bind:this={element}
-	role={href && !disabled ? "button" : undefined}
-	href={href && !disabled ? href : undefined}
-	class="button style-{variant} {className}"
-	tabindex={!disabled ? 0 : -1}
-	class:disabled
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
-
-<style >.button{align-items:center;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;padding-block:4px 6px;padding-inline:11px;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button:focus-visible{box-shadow:var(--fds-focus-stroke)}.button.style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.button.style-standard:hover{background-color:var(--fds-control-fill-secondary)}.button.style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.button.style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.button.style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.button.style-accent:hover{background-color:var(--fds-accent-secondary)}.button.style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.button.style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.button.style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.button.style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.button.style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.button.style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.button.disabled{pointer-events:none}</style>
+</script>
+
+<!--
+@component
+A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
+- Usage:
+    ```tsx
+    <Button>Click me!</Button>
+    ```
+-->
+<svelte:element
+	this={href && !disabled ? "a" : "button"}
+	use:forwardEvents
+	bind:this={element}
+	role={href && !disabled ? "button" : undefined}
+	href={href && !disabled ? href : undefined}
+	class="button style-{variant} {className}"
+	tabindex={!disabled ? 0 : -1}
+	class:disabled
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
+
+<style >.button{align-items:center;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;padding-block:4px 6px;padding-inline:11px;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button:focus-visible{box-shadow:var(--fds-focus-stroke)}.button.style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.button.style-standard:hover{background-color:var(--fds-control-fill-secondary)}.button.style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.button.style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.button.style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.button.style-accent:hover{background-color:var(--fds-accent-secondary)}.button.style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.button.style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.button.style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.button.style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.button.style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.button.style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.button.disabled{pointer-events:none}</style>

package/CalendarDatePicker/CalendarDatePicker.scss

@@ -1,15 +1,15 @@
-@use "../mixins" as *;
-
-.calendar-date-picker- {
-	&label {
-		padding-inline-end: 2px;
-		&.placeholder:not(.disabled) {
-			color: var(--text-secondary);
-		}
-	}
-	&icon {
-		@include icon($size: 12px);
-		margin-inline-start: 8px;
-		color: currentColor;
-	}
-}
+@use "../mixins" as *;
+
+.calendar-date-picker- {
+	&label {
+		padding-inline-end: 2px;
+		&.placeholder:not(.disabled) {
+			color: var(--text-secondary);
+		}
+	}
+	&icon {
+		@include icon($size: 12px);
+		margin-inline-start: 8px;
+		color: currentColor;
+	}
+}