fluent-svelte-extra 1.9.5 → 1.9.6

package/ComboBox/ComboBox.scss

@@ -1,152 +1,152 @@
-@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;
+
+		@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%);
+			}
+		}
+	}
+}

package/ComboBox/ComboBox.svelte

@@ -168,158 +168,158 @@ function handleInput(event) {
         value = match.value;
     searchValue = searchInputElement.value;
 }
-</script>
-
-<!--
-@component
-Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. A combo box starts in a compact state and expands to show a list of selectable items. 
-
-When the combo box is closed, it either displays the current selection or is empty if there is no selected item. When the user expands the combo box, it displays the list of selectable items.
-[Docs](https://fluent-svelte.vercel.app/docs/components/combobox)
-
-- Usage:
-    ```tsx
-    <ComboBox items={[
-		{ name: "Item 0", value: 0 },
-		{ name: "Item 1", value: 1 },
-		{ name: "Item 2", value: 2 },
-	]} />
-    ```
--->
-<div
-	use:forwardEvents
-	use:externalMouseEvents={{ type: "mousedown" }}
-	class="combo-box {className}"
-	class:disabled
-	class:editable
-	class:open
-	on:outermousedown={() => {
-		if (open) open = false;
-	}}
-	bind:this={containerElement}
-	{...$$restProps}
->
-	{#if editable}
-		<TextBox
-			clearButton={false}
-			class="combo-box-text-box"
-			role="combobox"
-			aria-activedescendant={inputFocused}
-			aria-autocomplete="both"
-			aria-controls={dropdownId}
-			aria-expanded={open}
-			aria-haspopup={open ? "listbox" : undefined}
-			bind:value={searchValue}
-			bind:inputElement={searchInputElement}
-			on:keydown={handleKeyboardNavigation}
-			on:input={handleInput}
-			on:focus={handleInputFocus}
-			on:blur={handleInputBlur}
-			on:change
-			on:input
-			on:beforeinput
-			on:keydown
-			{placeholder}
-			{disabled}
-		>
-			<TextBoxButton
-				aria-expanded={open}
-				aria-label="Open dropdown"
-				aria-controls={dropdownId}
-				class="combo-box-dropdown-button"
-				on:click={openMenu}
-				bind:element={buttonElement}
-				slot="buttons"
-			>
-				<svg
-					aria-hidden="true"
-					class="combo-box-icon"
-					xmlns="http://www.w3.org/2000/svg"
-					width="48"
-					height="48"
-					viewBox="0 0 48 48"
-				>
-					<path
-						fill="currentColor"
-						d="M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z"
-					/>
-				</svg>
-			</TextBoxButton>
-		</TextBox>
-	{:else}
-		<Button
-			type="button"
-			class="combo-box-button"
-			id={buttonId}
-			aria-labelledby={buttonId}
-			aria-haspopup={open ? "listbox" : undefined}
-			aria-controls={dropdownId}
-			on:keydown={handleKeyboardNavigation}
-			on:keydown
-			on:click={openMenu}
-			bind:element={buttonElement}
-			{disabled}
-		>
-			<span class="combo-box-label" class:placeholder={!selection}>
-				{selection?.name || placeholder}
-			</span>
-			<svg
-				aria-hidden="true"
-				class="combo-box-icon"
-				xmlns="http://www.w3.org/2000/svg"
-				width="48"
-				height="48"
-				viewBox="0 0 48 48"
-			>
-				<path
-					fill="currentColor"
-					d="M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z"
-				/>
-			</svg>
-		</Button>
-	{/if}
-	{#if !disabled && items.length > 0}
-		{#if open}
-			<ul
-				bind:this={menuElement}
-				on:blur={() => (open = false)}
-				id={dropdownId}
-				aria-labelledby={buttonId}
-				aria-activedescendant={editable
-					? undefined
-					: `${dropdownId}-item-${items.indexOf(selection)}`}
-				role="listbox"
-				class="combo-box-dropdown direction-{!editable
-					? menuGrowDirection ?? 'center'
-					: 'top'}"
-				style="--fds-menu-offset: {menuOffset}px;"
-			>
-				{#each items as item, i}
-					<ComboBoxItem
-						role="option"
-						selected={item.value === value}
-						disabled={item.disabled}
-						id="{dropdownId}-item-{i}"
-						on:keydown={handleKeyboardNavigation}
-						on:click={() => selectItem(item)}
-					>
-						{item.name}
-					</ComboBoxItem>
-				{/each}
-			</ul>
-		{/if}
-
-		<input
-			type="hidden"
-			aria-hidden="true"
-			bind:this={inputElement}
-			bind:value
-			on:change
-			on:input
-			on:beforeinput
-		/>
-		<slot />
-	{/if}
-</div>
-
-<style >@-webkit-keyframes menu-in{0%{-webkit-clip-path:var(--fds-grow-clip-path);clip-path:var(--fds-grow-clip-path)}to{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes menu-in{0%{-webkit-clip-path:var(--fds-grow-clip-path);clip-path:var(--fds-grow-clip-path)}to{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@-webkit-keyframes shadow-in{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes shadow-in{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.combo-box{display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.combo-box :global(.button),.combo-box :global(.text-box){flex:1 1 auto}.combo-box :global(.text-box){border-color:var(--fds-control-border-default)}.combo-box :global(.text-box-underline:after){border-color:transparent}.combo-box :global(.text-box-container){cursor:default}.combo-box :global(.text-box-container:focus-visible){cursor:text}.combo-box.editable :global(.combo-box-textbox:not(:focus-within)){border-color:var(--fds-control-border-default);cursor:default}.combo-box.editable :global(.combo-box-textbox:not(:focus-within)) :global(.text-box-underline:after){content:none}.combo-box.editable :global(.combo-box-textbox.disabled){border-color:var(--fds-control-stroke-default)}.combo-box.editable.open :global(.combo-box-textbox){background-color:var(--fds-control-fill-input-active);cursor:text}.combo-box.editable.open :global(.combo-box-textbox) :global(.text-box-underline:after){border-bottom:2px solid var(--fds-accent-default);content:""}.combo-box.editable.open :global(.combo-box-textbox) :global(input::-moz-placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.combo-box-textbox) :global(input:-ms-input-placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.combo-box-textbox) :global(input::placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.text-box-underline){border-end-end-radius:0;border-end-start-radius:0}.combo-box.editable .combo-box-dropdown{border-radius:var(--fds-overlay-corner-radius);border-start-end-radius:0;border-start-start-radius:0;inline-size:100%;inset-block-start:100%;inset-inline-start:0;margin:0}.combo-box.editable .combo-box-icon{margin:0}.combo-box-label{flex:1 1 auto;min-block-size:20px;text-align:start}.combo-box-label.placeholder{color:var(--fds-text-secondary)}.combo-box.disabled .placeholder{color:var(--fds-text-disabled)}.combo-box-icon{-webkit-margin-start:8px;block-size:12px;inline-size:12px;margin-inline-start:8px}.combo-box-dropdown{-webkit-margin-before:-6px;-webkit-margin-start:-5px;-webkit-animation:menu-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),shadow-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration);animation:menu-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),shadow-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration);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;inline-size:calc(100% + 8px);inset-block-start:var(--fds-menu-offset,0);inset-inline-start:0;margin:0;margin-block-start:-6px;margin-inline-start:-5px;max-block-size:504px;overflow:auto;padding:1px;position:absolute;z-index:100}@supports (overflow:overlay){.combo-box-dropdown{overflow:overlay}}.combo-box-dropdown.direction-top{--fds-grow-clip-path:polygon(0 0,100% 0,100% 25%,0 25%)}.combo-box-dropdown.direction-center{--fds-grow-clip-path:polygon(0 25%,100% 24%,100% 75%,0 75%)}.combo-box-dropdown.direction-bottom{--fds-grow-clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%)}</style>
+</script>
+
+<!--
+@component
+Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. A combo box starts in a compact state and expands to show a list of selectable items. 
+
+When the combo box is closed, it either displays the current selection or is empty if there is no selected item. When the user expands the combo box, it displays the list of selectable items.
+[Docs](https://fluent-svelte.vercel.app/docs/components/combobox)
+
+- Usage:
+    ```tsx
+    <ComboBox items={[
+		{ name: "Item 0", value: 0 },
+		{ name: "Item 1", value: 1 },
+		{ name: "Item 2", value: 2 },
+	]} />
+    ```
+-->
+<div
+	use:forwardEvents
+	use:externalMouseEvents={{ type: "mousedown" }}
+	class="combo-box {className}"
+	class:disabled
+	class:editable
+	class:open
+	on:outermousedown={() => {
+		if (open) open = false;
+	}}
+	bind:this={containerElement}
+	{...$$restProps}
+>
+	{#if editable}
+		<TextBox
+			clearButton={false}
+			class="combo-box-text-box"
+			role="combobox"
+			aria-activedescendant={inputFocused}
+			aria-autocomplete="both"
+			aria-controls={dropdownId}
+			aria-expanded={open}
+			aria-haspopup={open ? "listbox" : undefined}
+			bind:value={searchValue}
+			bind:inputElement={searchInputElement}
+			on:keydown={handleKeyboardNavigation}
+			on:input={handleInput}
+			on:focus={handleInputFocus}
+			on:blur={handleInputBlur}
+			on:change
+			on:input
+			on:beforeinput
+			on:keydown
+			{placeholder}
+			{disabled}
+		>
+			<TextBoxButton
+				aria-expanded={open}
+				aria-label="Open dropdown"
+				aria-controls={dropdownId}
+				class="combo-box-dropdown-button"
+				on:click={openMenu}
+				bind:element={buttonElement}
+				slot="buttons"
+			>
+				<svg
+					aria-hidden="true"
+					class="combo-box-icon"
+					xmlns="http://www.w3.org/2000/svg"
+					width="48"
+					height="48"
+					viewBox="0 0 48 48"
+				>
+					<path
+						fill="currentColor"
+						d="M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z"
+					/>
+				</svg>
+			</TextBoxButton>
+		</TextBox>
+	{:else}
+		<Button
+			type="button"
+			class="combo-box-button"
+			id={buttonId}
+			aria-labelledby={buttonId}
+			aria-haspopup={open ? "listbox" : undefined}
+			aria-controls={dropdownId}
+			on:keydown={handleKeyboardNavigation}
+			on:keydown
+			on:click={openMenu}
+			bind:element={buttonElement}
+			{disabled}
+		>
+			<span class="combo-box-label" class:placeholder={!selection}>
+				{selection?.name || placeholder}
+			</span>
+			<svg
+				aria-hidden="true"
+				class="combo-box-icon"
+				xmlns="http://www.w3.org/2000/svg"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
+			>
+				<path
+					fill="currentColor"
+					d="M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z"
+				/>
+			</svg>
+		</Button>
+	{/if}
+	{#if !disabled && items.length > 0}
+		{#if open}
+			<ul
+				bind:this={menuElement}
+				on:blur={() => (open = false)}
+				id={dropdownId}
+				aria-labelledby={buttonId}
+				aria-activedescendant={editable
+					? undefined
+					: `${dropdownId}-item-${items.indexOf(selection)}`}
+				role="listbox"
+				class="combo-box-dropdown direction-{!editable
+					? menuGrowDirection ?? 'center'
+					: 'top'}"
+				style="--fds-menu-offset: {menuOffset}px;"
+			>
+				{#each items as item, i}
+					<ComboBoxItem
+						role="option"
+						selected={item.value === value}
+						disabled={item.disabled}
+						id="{dropdownId}-item-{i}"
+						on:keydown={handleKeyboardNavigation}
+						on:click={() => selectItem(item)}
+					>
+						{item.name}
+					</ComboBoxItem>
+				{/each}
+			</ul>
+		{/if}
+
+		<input
+			type="hidden"
+			aria-hidden="true"
+			bind:this={inputElement}
+			bind:value
+			on:change
+			on:input
+			on:beforeinput
+		/>
+		<slot />
+	{/if}
+</div>
+
+<style >@-webkit-keyframes menu-in{0%{-webkit-clip-path:var(--fds-grow-clip-path);clip-path:var(--fds-grow-clip-path)}to{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes menu-in{0%{-webkit-clip-path:var(--fds-grow-clip-path);clip-path:var(--fds-grow-clip-path)}to{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@-webkit-keyframes shadow-in{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes shadow-in{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.combo-box{display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.combo-box :global(.button),.combo-box :global(.text-box){flex:1 1 auto}.combo-box :global(.text-box){border-color:var(--fds-control-border-default)}.combo-box :global(.text-box-underline:after){border-color:transparent}.combo-box :global(.text-box-container){cursor:default}.combo-box :global(.text-box-container:focus-visible){cursor:text}.combo-box.editable :global(.combo-box-textbox:not(:focus-within)){border-color:var(--fds-control-border-default);cursor:default}.combo-box.editable :global(.combo-box-textbox:not(:focus-within)) :global(.text-box-underline:after){content:none}.combo-box.editable :global(.combo-box-textbox.disabled){border-color:var(--fds-control-stroke-default)}.combo-box.editable.open :global(.combo-box-textbox){background-color:var(--fds-control-fill-input-active);cursor:text}.combo-box.editable.open :global(.combo-box-textbox) :global(.text-box-underline:after){border-bottom:2px solid var(--fds-accent-default);content:""}.combo-box.editable.open :global(.combo-box-textbox) :global(input::-moz-placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.combo-box-textbox) :global(input:-ms-input-placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.combo-box-textbox) :global(input::placeholder){color:var(--fds-text-tertiary)}.combo-box.editable.open :global(.text-box-underline){border-end-end-radius:0;border-end-start-radius:0}.combo-box.editable .combo-box-dropdown{border-radius:var(--fds-overlay-corner-radius);border-start-end-radius:0;border-start-start-radius:0;inline-size:100%;inset-block-start:100%;inset-inline-start:0;margin:0}.combo-box.editable .combo-box-icon{margin:0}.combo-box-label{flex:1 1 auto;min-block-size:20px;text-align:start}.combo-box-label.placeholder{color:var(--fds-text-secondary)}.combo-box.disabled .placeholder{color:var(--fds-text-disabled)}.combo-box-icon{-webkit-margin-start:8px;block-size:12px;inline-size:12px;margin-inline-start:8px}.combo-box-dropdown{-webkit-margin-before:-6px;-webkit-margin-start:-5px;-webkit-animation:menu-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),shadow-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration);animation:menu-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),shadow-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration);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;inline-size:calc(100% + 8px);inset-block-start:var(--fds-menu-offset,0);inset-inline-start:0;margin:0;margin-block-start:-6px;margin-inline-start:-5px;max-block-size:504px;overflow:auto;padding:1px;position:absolute;z-index:100}@supports (overflow:overlay){.combo-box-dropdown{overflow:overlay}}.combo-box-dropdown.direction-top{--fds-grow-clip-path:polygon(0 0,100% 0,100% 25%,0 25%)}.combo-box-dropdown.direction-center{--fds-grow-clip-path:polygon(0 25%,100% 24%,100% 75%,0 75%)}.combo-box-dropdown.direction-bottom{--fds-grow-clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%)}</style>