fluentui-svelte 0.1.2 → 0.2.1

package/dist/components/card/card.svelte

@@ -0,0 +1,242 @@
+<script lang="ts" generics="Tag extends CardTagTypes = 'div'">
+	import type { Horientation } from '../../types/index.js';
+	import { invokeHandlers } from '../../internal/utils.js';
+	import { setCardContext } from './card-context.svelte.js';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { CardContext, CardProps, CardTagTypes } from './types.js';
+	import { PREFIX } from '../../internal/constants.js';
+
+	const _ID = $props.id();
+	const FALLBACK_ID = PREFIX + '-card-' + _ID;
+
+	let {
+		as = 'div' as Tag,
+		ref = $bindable(),
+		orientation = 'horizontal',
+		id = FALLBACK_ID,
+		selectable = false,
+		showFloatingAction = false,
+		selected = $bindable(false),
+		disabled = false,
+		appearance = 'filled',
+		class: classes,
+		children,
+		onclick,
+		onSelectionChange,
+		...attributes
+	}: CardProps<Tag> = $props();
+
+	const context: CardContext = $state({
+		config: {
+			get as() {
+				return as;
+			},
+			get appearance() {
+				return appearance;
+			},
+			get selectable() {
+				return selectable;
+			},
+			get showFloatingAction() {
+				return showFloatingAction;
+			},
+			get id() {
+				return id;
+			}
+		},
+		state: {
+			get selected() {
+				return selected;
+			},
+			set selected(value: boolean) {
+				selected = value;
+			},
+			get disabled() {
+				return disabled;
+			},
+			set disabled(value: boolean) {
+				disabled = value;
+			},
+			get orientation() {
+				return orientation;
+			},
+			set orientation(value: Horientation) {
+				orientation = value;
+			}
+		},
+		events: null,
+		methods: {
+			handleAction(e) {
+				if (selectable && !disabled) {
+					selected = !selected;
+					onSelectionChange?.(id, selected);
+				}
+				onclick?.(e as any);
+			}
+		}
+	});
+
+	setCardContext(context);
+
+	let actionable = $derived(!disabled && (selectable || as === 'a'));
+
+	/**
+	 * The props the invariants rule over. The markup renders them through here, so reading any of
+	 * them validates the whole set during SSR and on every prop update.
+	 */
+	const _card = $derived.by(() => {
+		if (showFloatingAction && !selectable)
+			throw new Error('Floating action can only be shown if the card is selectable.');
+		if (selected && !selectable) throw new Error('A card cannot be selected if it is not selectable.');
+		if (as === 'a' && selectable) throw new Error('A card cannot be both a link and selectable.');
+		return { as, selected, showFloatingAction };
+	});
+
+	let isLink = $derived(as === 'a');
+
+	/** The root carries the selection semantics itself when no floating checkbox is there to carry them. */
+	let isRootControl = $derived(selectable && !isLink && !_card.showFloatingAction);
+
+	/**
+	 * A focusable root needs an accessible name. The title of the header provides it, unless the
+	 * consumer named the card itself.
+	 */
+	let rootLabelledBy = $derived(
+		isRootControl && !attributes['aria-label'] && !attributes['aria-labelledby'] ? `${id}-title` : undefined
+	);
+
+	/** Enter and Space toggle the selection, the same way a pointer click does. */
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		if (e.currentTarget instanceof HTMLElement) e.currentTarget.click();
+	};
+</script>
+
+<!--
+	@component
+	A card is a container that displays content and actions on a single topic.
+	- Usage:
+    ```tsx
+    <script>
+      import { Card, CardHeader } from 'fluentui-svelte';
+    </script>
+
+    <Card>
+      <CardHeader title="Card title" />
+      <p>Content goes here</p>
+    </Card>
+    ```
+ -->
+<svelte:element
+	this={_card.as}
+	class={['fs-card', { actionable, disabled, selected: _card.selected }, orientation, appearance, classes]}
+	bind:this={ref}
+	{id}
+	role={isLink ? undefined : isRootControl ? 'checkbox' : 'group'}
+	aria-checked={isRootControl ? _card.selected : undefined}
+	aria-labelledby={rootLabelledBy}
+	aria-disabled={disabled || undefined}
+	tabindex={isRootControl && !disabled ? 0 : undefined}
+	onclick={(e: MouseEvent) => invokeHandlers(e, [disabled], [context.methods.handleAction])}
+	onkeydown={isRootControl ? handleKeydown : undefined}
+	{...attributes}
+>
+	{#if selectable && _card.showFloatingAction && as !== 'a'}
+		<Checkbox
+			wrapperAs="div"
+			aria-labelledby={`${id}-title`}
+			bind:checked={selected}
+			{disabled}
+			onclick={(e) => e.stopPropagation()}
+			onchange={(e) => onSelectionChange?.(id, e.currentTarget.checked)}
+		/>
+	{/if}
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-card {
+		display: flex;
+		position: relative;
+		border-radius: var(--fs-control-overlay-border-radius);
+		background-clip: padding-box;
+		color: var(--fs-text-primary);
+		transition: box-shadow var(--fs-fast-duration) var(--fs-point-to-point);
+		text-decoration: none;
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+		&.filled {
+			background: var(--fs-card-background-default);
+			box-shadow: var(--fs-shadow-card);
+		}
+		&.filled,
+		&.outlined {
+			border: 1px solid var(--fs-control-stroke-default);
+		}
+		&.disabled {
+			user-select: none;
+			box-shadow: unset;
+			&.filled {
+				background: var(--fs-control-fill-disabled);
+				border-color: var(--fs-control-stroke-secondary);
+				color: var(--fs-text-disabled);
+			}
+			&:hover {
+				cursor: not-allowed;
+			}
+		}
+		&:hover {
+			&.filled:not(.disabled) {
+				box-shadow: var(--fs-shadow-card-hover);
+			}
+			&.outlined:not(.disabled) {
+				border-color: var(--fs-control-stroke-secondary);
+			}
+			&.subtle:not(.disabled) {
+				background: var(--fs-subtle-fill-secondary);
+			}
+		}
+		&:active.actionable:not(.disabled) {
+			box-shadow: unset;
+			&.filled {
+				background: var(--fs-card-background-tertiary);
+				border-color: var(--fs-control-surface-stroke-default);
+				color: var(--fs-text-secondary);
+			}
+			&.outlined {
+				border-color: var(--fs-control-surface-stroke-default);
+				color: var(--fs-text-secondary);
+			}
+			&.subtle {
+				background: var(--fs-subtle-fill-tertiary);
+				color: var(--fs-text-tertiary);
+			}
+		}
+		&.actionable {
+			cursor: pointer;
+		}
+		&.selected {
+			&.filled {
+				background: var(--fs-card-background-tertiary);
+				box-shadow: var(--fs-shadow-card);
+			}
+			&.outlined {
+				background: var(--fs-card-background-default);
+			}
+			&.subtle {
+				background: var(--fs-subtle-fill-tertiary);
+			}
+		}
+		&.vertical {
+			flex-direction: column;
+		}
+		& :global(.fs-checkbox) {
+			position: absolute;
+			top: 0.5rem;
+			right: 0.5rem;
+			z-index: 2;
+		}
+	}
+</style>

package/dist/components/card/card.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { CardProps, CardTagTypes } from './types.js';
+declare function $$render<Tag extends CardTagTypes = 'div'>(): {
+    props: CardProps<Tag>;
+    exports: {};
+    bindings: "ref" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends CardTagTypes = 'div'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends CardTagTypes = 'div'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends CardTagTypes = 'div'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A card is a container that displays content and actions on a single topic.
+ * - Usage:
+ *    ```tsx
+ *    <script>
+ *      import { Card, CardHeader } from 'fluentui-svelte';
+ *    </script>
+ *
+ *    <Card>
+ *      <CardHeader title="Card title" />
+ *      <p>Content goes here</p>
+ *    </Card>
+ *    ```
+ */
+declare const Card: $$IsomorphicComponent;
+type Card<Tag extends CardTagTypes = 'div'> = InstanceType<typeof Card<Tag>>;
+export default Card;

package/dist/components/card/docs/llms.md

@@ -0,0 +1,226 @@
+# Card
+
+A card is a container that groups content and actions about a single topic, and can optionally be selected.
+
+## Usage
+
+```svelte
+<script>
+	import { Card, CardPreview, CardHeader, CardFooter, Button } from 'fluentui-svelte';
+</script>
+
+{#snippet footerActions()}
+	<Button>Like</Button>
+	<Button appearance="standard">Share</Button>
+{/snippet}
+
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	<CardFooter action={footerActions} />
+</Card>
+```
+
+## Component API
+
+A card is built out of the following components:
+
+- `Card`: the root component. It creates all the state, provides context to its parts and handles the selection.
+- `CardPreview`: the media shown at one edge of the card, with an optional logo overlaid on it.
+- `CardHeader`: the title of the card, with an optional image, description and action.
+- `CardFooter`: the actions shown at the bottom of the card.
+
+`CardPreview`, `CardHeader` and `CardFooter` read the card context, so they throw when rendered outside a `Card`.
+They are all optional, and the card renders any other content passed to it as is.
+
+The following combinations are rejected at runtime, because they cannot be resolved visually:
+
+- `showFloatingAction` without `selectable`.
+- `selected` without `selectable`.
+- `as="a"` together with `selectable`.
+- `action` on `CardHeader` or `CardFooter` inside a selectable card.
+
+## Examples
+
+### Appearance
+
+A card can have its background and borders styled for greater emphasis or to be subtle.
+
+```svelte
+<Card appearance="filled">Filled</Card>
+<Card appearance="outlined">Outlined</Card>
+<Card appearance="subtle">Subtle</Card>
+```
+
+### Orientation
+
+A card lays its parts out horizontally by default. Set `orientation` to `vertical` to stack them instead.
+
+```svelte
+<Card orientation="horizontal">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="Horizontal" description="The default orientation" />
+</Card>
+
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+	<CardHeader title="Vertical" description="Stacks every part" />
+</Card>
+```
+
+### Selection
+
+A selectable card toggles its selection when clicked anywhere, and reports it through `onSelectionChange`. Set
+`showFloatingAction` to float a checkbox over the top right corner.
+
+```svelte
+<script>
+	let selected = $state(false);
+</script>
+
+<Card selectable showFloatingAction bind:selected onSelectionChange={(id, selected) => console.log(id, selected)}>
+	<CardHeader title="Selectable card" description={selected ? 'Selected' : 'Not selected'} />
+</Card>
+```
+
+### Header
+
+The header takes a `title`, and optionally an `image`, a `description` and an `action`. A string title renders inside
+a heading; a snippet or a component receives the id the floating checkbox is labelled by.
+
+```svelte
+<script>
+	import { Card, CardHeader, Button } from 'fluentui-svelte';
+	import { MoreHorizontalRegular } from 'fluentui-icons-svelte';
+</script>
+
+{#snippet title(attrs)}
+	<h4 class="body" {...attrs}><b>FluentUI Svelte</b> mentioned you</h4>
+{/snippet}
+
+{#snippet action()}
+	<Button appearance="subtle" aria-label="More actions"><MoreHorizontalRegular width="1em" height="1em" /></Button>
+{/snippet}
+
+<Card>
+	<CardHeader image="/logo.png" {title} description="5h ago · About us - Overview" {action} />
+</Card>
+```
+
+### Preview
+
+The preview holds the media of the card and rounds the corners it sits against. The `logoSrc` prop overlays a logo on
+the bottom left corner.
+
+```svelte
+<Card orientation="vertical">
+	<CardPreview logoSrc="/logo.png">
+		<img src="/preview.png" alt="Preview" />
+	</CardPreview>
+</Card>
+```
+
+### Footer
+
+The footer renders the actions of the card at the bottom, spread across the available width.
+
+```svelte
+<script>
+	import { Card, CardHeader, CardFooter, Button } from 'fluentui-svelte';
+</script>
+
+{#snippet action()}
+	<Button>Like</Button>
+	<Button appearance="standard">Share</Button>
+{/snippet}
+
+<Card orientation="vertical">
+	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
+	<CardFooter {action} />
+</Card>
+```
+
+## Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardProps -->
+
+| Name                  | Type                                                       | Default        | Description                                                                             |
+| --------------------- | ---------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_      | `CardElementDOMType[Tag]`                                  |                | The DOM reference of the card element.                                                  |
+| `as`                  | `'div'` &#124; `'article'` &#124; `'section'` &#124; `'a'` | `'div'`        | The DOM element to render.                                                              |
+| `orientation`         | `'horizontal'` &#124; `'vertical'`                         | `'horizontal'` | The axis the card lays its parts out on.                                                |
+| `selectable`          | `boolean`                                                  | `false`        | Lets the user select the card by clicking anywhere on it.                               |
+| `showFloatingAction`  | `boolean`                                                  | `false`        | Floats the selection checkbox over the top right corner of the card.                    |
+| `id`                  | `string`                                                   |                | The id of the card element. Falls back to a generated one.                              |
+| `selected` _bindable_ | `boolean`                                                  | `false`        | Whether the card is selected. Only available on selectable cards.                       |
+| `disabled`            | `boolean`                                                  | `false`        | Disables the user interaction.                                                          |
+| `appearance`          | `'filled'` &#124; `'outlined'` &#124; `'subtle'`           | `'filled'`     | A card can have its background and borders styled for greater emphasis or to be subtle. |
+| `onSelectionChange`   | `(id: string, selected: boolean) => void`                  |                | Called with the id of the card whenever its selection changes.                          |
+| HTML Attributes       |                                                            |                |                                                                                         |
+
+<!-- /props:CardProps -->
+
+## CardPreview
+
+The media shown at one edge of the card, with an optional logo overlaid on it.
+
+### Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardPreviewProps -->
+
+| Name                                                | Type             | Default | Description                                                                             |
+| --------------------------------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` |         | The DOM reference of the preview element.                                               |
+| `logoSrc`                                           | `string`         |         | The URL of the logo overlaid on the bottom left corner of the preview.                  |
+| `logoAlt`                                           | `string`         | `''`    | The alternative text of the logo. Empty by default, which marks the logo as decorative. |
+| `children`                                          | `Snippet`        |         | The media to preview, usually an image.                                                 |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                  |         |                                                                                         |
+
+<!-- /props:CardPreviewProps -->
+
+## CardHeader
+
+The title of the card, with an optional image, description and action.
+
+### Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardHeaderProps -->
+
+| Name                                                         | Type                                         | Default | Description                                                                                           |
+| ------------------------------------------------------------ | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                             | `HTMLDivElement`                             |         | The DOM reference of the header element.                                                              |
+| `title`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The title of the card. A snippet or a component receives the id the floating checkbox is labelled by. |
+| `image`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The image rendered before the title. A string is used as the `src` of an `<img>`.                     |
+| `imageAlt`                                                   | `string`                                     | `''`    | The alternative text of a string image. Empty by default, which marks the image as decorative.        |
+| `description`                                                | `Snippet` &#124; `Component` &#124; `string` |         | A second line of text below the title.                                                                |
+| `action`                                                     | `Snippet` &#124; `Component`                 |         | The action rendered at the end of the header. Not available on selectable cards.                      |
+| `HTMLAttributes<HTMLDivElement>` without `children`, `title` |                                              |         |                                                                                                       |
+
+<!-- /props:CardHeaderProps -->
+
+## CardFooter
+
+The actions shown at the bottom of the card.
+
+### Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardFooterProps -->
+
+| Name                                                | Type                         | Default | Description                                                                |
+| --------------------------------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement`             |         | The DOM reference of the footer element.                                   |
+| `action`                                            | `Snippet` &#124; `Component` |         | The actions rendered inside the footer. Not available on selectable cards. |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                              |         |                                                                            |
+
+<!-- /props:CardFooterProps -->

package/dist/components/card/types.d.ts

@@ -0,0 +1,129 @@
+import type { Horientation, PolymorphicProps } from '../../types/index.js';
+import type { FSContext } from '../../internal/index.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Component, Snippet } from 'svelte';
+export type CardTagTypes = 'div' | 'article' | 'section' | 'a';
+/** @propsmith CardProps */
+export type CardProps<Tag extends CardTagTypes = 'div'> = {
+    /** The DOM reference of the card element.
+     * @type CardElementDOMType[Tag]
+     * @bindable
+     */
+    ref?: CardElementDOMType[Tag];
+    /** The DOM element to render.
+     * @type 'div' | 'article' | 'section' | 'a'
+     * @default 'div'
+     */
+    as?: Tag;
+    /** The axis the card lays its parts out on.
+     * @default 'horizontal'
+     */
+    orientation?: Horientation;
+    /** Lets the user select the card by clicking anywhere on it.
+     * @default false
+     */
+    selectable?: boolean;
+    /** Floats the selection checkbox over the top right corner of the card.
+     *
+     * Only available on selectable cards, and ignored when the card renders as a link.
+     * @default false
+     */
+    showFloatingAction?: boolean;
+    /** The id of the card element. Falls back to a generated one. */
+    id?: string;
+    /** Whether the card is selected. Only available on selectable cards.
+     * @default false
+     * @bindable
+     */
+    selected?: boolean;
+    /** Disables the user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** A card can have its background and borders styled for greater emphasis or to be subtle.
+     * @default 'filled'
+     */
+    appearance?: 'filled' | 'outlined' | 'subtle';
+    /** Called with the id of the card whenever its selection changes.
+     * @type (id: string, selected: boolean) => void
+     */
+    onSelectionChange?: (id: string, selected: boolean) => void;
+} & PolymorphicProps<Tag>;
+export type CardElementDOMType = {
+    div: HTMLDivElement;
+    article: HTMLElement;
+    section: HTMLElement;
+    a: HTMLAnchorElement;
+};
+export type CardContext = FSContext<{
+    readonly as?: CardTagTypes;
+    readonly showFloatingAction?: boolean;
+    readonly appearance?: 'filled' | 'outlined' | 'subtle';
+    readonly selectable?: boolean;
+    /** The id of the card, which every part uses to build its own ids. */
+    readonly id?: string;
+}, {
+    orientation?: Horientation;
+    selected?: boolean;
+    disabled?: boolean;
+}, null, {
+    /** Toggles the selection and forwards the click to the consumer. */
+    handleAction?: (e: MouseEvent) => void;
+}>;
+/** @propsmith CardPreviewProps */
+export type CardPreviewProps = {
+    /** The DOM reference of the preview element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The URL of the logo overlaid on the bottom left corner of the preview. */
+    logoSrc: string;
+    /** The alternative text of the logo. Empty by default, which marks the logo as decorative.
+     * @default ''
+     */
+    logoAlt?: string;
+    /** The media to preview, usually an image. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/** @propsmith CardHeaderProps */
+export type CardHeaderProps = {
+    /** The DOM reference of the header element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The title of the card. A snippet or a component receives the id the floating checkbox is labelled by.
+     * @type Snippet | Component | string
+     */
+    title: Snippet<[attrs: {
+        id: string;
+    }]> | Component<{
+        id: string;
+    }> | string;
+    /** The image rendered before the title. A string is used as the `src` of an `<img>`.
+     * @type Snippet | Component | string
+     */
+    image?: Snippet | Component | string;
+    /** The alternative text of a string image. Empty by default, which marks the image as decorative.
+     * @default ''
+     */
+    imageAlt?: string;
+    /** A second line of text below the title.
+     * @type Snippet | Component | string
+     */
+    description?: Snippet | Component | string;
+    /** The action rendered at the end of the header. Not available on selectable cards.
+     * @type Snippet | Component
+     */
+    action?: Snippet | Component;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
+/** @propsmith CardFooterProps */
+export type CardFooterProps = {
+    /** The DOM reference of the footer element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The actions rendered inside the footer. Not available on selectable cards.
+     * @type Snippet | Component
+     */
+    action?: Snippet | Component;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/card/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/checkbox/checkbox.svelte

@@ -101,8 +101,8 @@
 			-moz-appearance: none;
 			&:indeterminate + div :global(svg.indeterminate),
 			&:checked + div :global(svg.checked) {
-				clip-path: ellipse(60px 60px at 0% 50%);
-				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) clip-path;
+				mask-size: 100% 100%;
+				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) mask-size;
 			}
 			&:is(:checked, :indeterminate) {
 				& + div {
@@ -148,7 +148,9 @@
 				width: 0;
 				fill: var(--fs-text-on-accent-primary);
 				transform-origin: 80% 20%;
-				clip-path: ellipse(0 0 at 0% 90%);
+				mask-image: linear-gradient(black, black);
+				mask-repeat: no-repeat;
+				mask-size: 0% 100%;
 			}
 		}
 		&:has(input:disabled) {