fluent-svelte-extra 1.9.5 → 1.9.6

package/Flyout/FlyoutWrapper.scss

@@ -1,86 +1,86 @@
-@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- {
-			--flyout-transform: translateX(0%);
-			&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;
-						--flyout-transform: translateX(0%);
-					}
-					&end {
-						inset-inline-end: 0;
-						--flyout-transform: translateX(0%);
-					}
-					&center {
-						inset-inline-start: 50%;
-						--flyout-transform: translateX(-50%);
-					}
-				}
-			}
-			&left,
-			&right {
-				&.alignment- {
-					&start {
-						inset-block-start: 0;
-						--flyout-transform: translateY(0%);
-					}
-					&end {
-						inset-block-end: 0;
-						--flyout-transform: translateY(0%);
-					}
-					&center {
-						inset-block-start: 50%;
-						--flyout-transform: translateY(-50%);
-					}
-				}
-			}
-		}
-	}
-}
+@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- {
+			--flyout-transform: translateX(0%);
+			&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;
+						--flyout-transform: translateX(0%);
+					}
+					&end {
+						inset-inline-end: 0;
+						--flyout-transform: translateX(0%);
+					}
+					&center {
+						inset-inline-start: 50%;
+						--flyout-transform: translateX(-50%);
+					}
+				}
+			}
+			&left,
+			&right {
+				&.alignment- {
+					&start {
+						inset-block-start: 0;
+						--flyout-transform: translateY(0%);
+					}
+					&end {
+						inset-block-end: 0;
+						--flyout-transform: translateY(0%);
+					}
+					&center {
+						inset-block-start: 50%;
+						--flyout-transform: translateY(-50%);
+					}
+				}
+			}
+		}
+	}
+}

package/Flyout/FlyoutWrapper.svelte

@@ -51,63 +51,63 @@ function handleKeyDown(event) {
         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={() => {
-		enableClick && (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 >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-{--fds-flyout-transform:translateX(0%)}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{--fds-flyout-transform:translateX(0%);inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{--fds-flyout-transform:translateX(0%);inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{--fds-flyout-transform:translateY(0%);inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{--fds-flyout-transform:translateY(0%);inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>
+</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={() => {
+		enableClick && (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 >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-{--fds-flyout-transform:translateX(0%)}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{--fds-flyout-transform:translateX(0%);inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{--fds-flyout-transform:translateX(0%);inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{--fds-flyout-transform:translateY(0%);inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{--fds-flyout-transform:translateY(0%);inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>

package/GridView/GridViewItem.scss

@@ -1,20 +1,20 @@
-.grid-view-item {
-	position: relative;
-	border-radius: var(--control-corner-radius);
-	transition: box-shadow var(--control-fast-duration);
-	width: fit-content;
-	user-select: none;
-
-	&.selected {
-		box-shadow: inset 0 0 0 2px var(--control-solid-fill-default),
-			0 0 0 3px var(--accent-default);
-	}
-
-	& > .item-checkbox {
-		position: absolute;
-		top: 0;
-		right: 6px;
-		overflow: hidden;
-		z-index: 1;
-	}
-}
+.grid-view-item {
+	position: relative;
+	border-radius: var(--control-corner-radius);
+	transition: box-shadow var(--control-fast-duration);
+	width: fit-content;
+	user-select: none;
+
+	&.selected {
+		box-shadow: inset 0 0 0 2px var(--control-solid-fill-default),
+			0 0 0 3px var(--accent-default);
+	}
+
+	& > .item-checkbox {
+		position: absolute;
+		top: 0;
+		right: 6px;
+		overflow: hidden;
+		z-index: 1;
+	}
+}

package/GridView/GridViewItem.svelte

@@ -34,28 +34,36 @@ if (group.length) {
     });
     setKey(`group:${group}`, getAvailableGroupItems);
 }
-</script>
-
-<div
-	class="grid-view-item"
-	class:selected
-	{...$$restProps}
-	tabindex="0"
-	on:click={() => singleSelect && setSelected(!selected, false)}
-	on:keydown={e => e.key === "Enter" && singleSelect && setSelected(!selected, false)}
->
-	{#if !singleSelect}
-		<div class="item-checkbox">
-			<Checkbox
-				tabindex="-1"
-				bind:checked={selected}
-				on:change={() => {
-					dispatch("change", { selected: !selected });
-				}}
-			/>
-		</div>
-	{/if}
-	<slot {setSelected} />
-</div>
-
-<style >.grid-view-item{border-radius:var(--fds-control-corner-radius);position:relative;transition:box-shadow var(--fds-control-fast-duration);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.grid-view-item.selected{box-shadow:inset 0 0 0 2px var(--fds-control-solid-fill-default),0 0 0 3px var(--fds-accent-default)}.grid-view-item>.item-checkbox{overflow:hidden;position:absolute;right:6px;top:0;z-index:1}</style>
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+	class="grid-view-item"
+	class:selected
+	{...$$restProps}
+	tabindex="0"
+	on:click={() => {
+		setSelected(!selected, false);
+		dispatch("change", { selected: selected });
+	}}
+	on:keydown={e => {
+		if (e.key !== "Enter") return;
+		setSelected(!selected, false);
+		dispatch("change", { selected: selected });
+	}}
+>
+	{#if !singleSelect}
+		<div class="item-checkbox">
+			<Checkbox
+				tabindex="-1"
+				bind:checked={selected}
+				on:change={() => {
+					dispatch("change", { selected: !selected });
+				}}
+			/>
+		</div>
+	{/if}
+	<slot {setSelected} />
+</div>
+
+<style >.grid-view-item{border-radius:var(--fds-control-corner-radius);position:relative;transition:box-shadow var(--fds-control-fast-duration);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.grid-view-item.selected{box-shadow:inset 0 0 0 2px var(--fds-control-solid-fill-default),0 0 0 3px var(--fds-accent-default)}.grid-view-item>.item-checkbox{overflow:hidden;position:absolute;right:6px;top:0;z-index:1}</style>

package/IconButton/IconButton.scss

@@ -1,32 +1,32 @@
-@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,
-	&.disabled {
-		background-color: var(--subtle-fill-disabled);
-		color: var(--text-disabled);
-	}
-	:global(svg) {
-		@include icon($size: 16px);
-	}
-}
+@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,
+	&.disabled {
+		background-color: var(--subtle-fill-disabled);
+		color: var(--text-disabled);
+	}
+	:global(svg) {
+		@include icon($size: 16px);
+	}
+}

package/IconButton/IconButton.svelte

@@ -11,31 +11,31 @@ 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
-An Icon Button is a clickable control that triggers an immediate action. Unlike the Button control, it serves the purpose of encapsulating an icon glyph as it’s content. [Docs](https://fluent-svelte.vercel.app/docs/components/iconbutton)
-- Usage:
-    ```tsx
-    <IconButton>
-        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8 14A6 6 0 108 2a6 6 0 000 12zm0-1A5 5 0 118 3a5 5 0 010 10z" />
-        </svg>
-    </IconButton>
-    ```
--->
-<svelte:element
-	this={href && !disabled ? "a" : "button"}
-	use:forwardEvents
-	bind:this={element}
-	role={href && !disabled ? "button" : undefined}
-	href={href && !disabled ? href : undefined}
-	class="icon-button {className}"
-	class:disabled
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
-
-<style >.icon-button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;justify-content:center;min-block-size:30px;min-inline-size:30px;outline:none;padding:8px}.icon-button:focus-visible{box-shadow:var(--fds-focus-stroke)}.icon-button:hover{background-color:var(--fds-subtle-fill-secondary)}.icon-button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.icon-button.disabled,.icon-button:disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.icon-button :global(svg){fill:currentColor;block-size:auto;inline-size:16px}</style>
+</script>
+
+<!--
+@component
+An Icon Button is a clickable control that triggers an immediate action. Unlike the Button control, it serves the purpose of encapsulating an icon glyph as it’s content. [Docs](https://fluent-svelte.vercel.app/docs/components/iconbutton)
+- Usage:
+    ```tsx
+    <IconButton>
+        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 14A6 6 0 108 2a6 6 0 000 12zm0-1A5 5 0 118 3a5 5 0 010 10z" />
+        </svg>
+    </IconButton>
+    ```
+-->
+<svelte:element
+	this={href && !disabled ? "a" : "button"}
+	use:forwardEvents
+	bind:this={element}
+	role={href && !disabled ? "button" : undefined}
+	href={href && !disabled ? href : undefined}
+	class="icon-button {className}"
+	class:disabled
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
+
+<style >.icon-button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;justify-content:center;min-block-size:30px;min-inline-size:30px;outline:none;padding:8px}.icon-button:focus-visible{box-shadow:var(--fds-focus-stroke)}.icon-button:hover{background-color:var(--fds-subtle-fill-secondary)}.icon-button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.icon-button.disabled,.icon-button:disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.icon-button :global(svg){fill:currentColor;block-size:auto;inline-size:16px}</style>

package/InfoBadge/InfoBadge.scss

@@ -1,39 +1,39 @@
-@use "../mixins" as *;
-
-.info-badge {
-	@include flex($inline: true, $align: center, $justify: center);
-	box-sizing: border-box;
-	user-select: none;
-	min-inline-size: 16px;
-	min-block-size: 16px;
-	border-radius: 16px;
-	padding: 2px 4px;
-	color: var(--text-on-accent-primary);
-	line-height: var(--caption-font-size);
-	font: {
-		family: var(--font-family-small);
-		size: var(--caption-font-size);
-	}
-	&.severity- {
-		&attention {
-			background-color: var(--system-attention);
-		}
-		&success {
-			background-color: var(--system-success);
-		}
-		&caution {
-			background-color: var(--system-caution);
-		}
-		&critical {
-			background-color: var(--system-critical);
-		}
-		&information {
-			background-color: var(--system-solid-neutral);
-		}
-	}
-	:global(svg) {
-		inline-size: 8px;
-		block-size: 8px;
-		fill: currentColor;
-	}
-}
+@use "../mixins" as *;
+
+.info-badge {
+	@include flex($inline: true, $align: center, $justify: center);
+	box-sizing: border-box;
+	user-select: none;
+	min-inline-size: 16px;
+	min-block-size: 16px;
+	border-radius: 16px;
+	padding: 2px 4px;
+	color: var(--text-on-accent-primary);
+	line-height: var(--caption-font-size);
+	font: {
+		family: var(--font-family-small);
+		size: var(--caption-font-size);
+	}
+	&.severity- {
+		&attention {
+			background-color: var(--system-attention);
+		}
+		&success {
+			background-color: var(--system-success);
+		}
+		&caution {
+			background-color: var(--system-caution);
+		}
+		&critical {
+			background-color: var(--system-critical);
+		}
+		&information {
+			background-color: var(--system-solid-neutral);
+		}
+	}
+	:global(svg) {
+		inline-size: 8px;
+		block-size: 8px;
+		fill: currentColor;
+	}
+}