@widgetic/design-system 0.5.23 → 0.5.25

package/dist/components/ui/avatar/avatar.svelte

@@ -50,14 +50,33 @@
 	} = $props();
 
 	const initials = $derived(avatarInitials(name || alt));
+
+	// The picture: the initials (or the icon) are always drawn first, and the picture fades in on top of them once it has
+	// loaded. A picture that fails (a Gravatar asked with `d=404` answers 404 for everybody who has none, a blocked or an
+	// offline request) never shows the browser's broken-image glyph: the initials simply stay. Both states belong to the
+	// address that produced them, so a new `src` starts from scratch.
+	let loadedSource = $state<string | undefined>(undefined);
+	let failedSource = $state<string | undefined>(undefined);
+	const showPicture = $derived(Boolean(src) && src !== failedSource);
+	const pictureLoaded = $derived(Boolean(src) && src === loadedSource);
 </script>
 
 <span class={cn(avatarVariants({ size, type }), className)} {...restProps}>
-	{#if src}
-		<img {src} {alt} class="size-full object-cover" />
-	{:else if type === "icon" && icon}
+	{#if type === "icon" && icon}
 		<span class="flex items-center justify-center">{@render icon()}</span>
 	{:else}
 		<span aria-hidden="true">{initials}</span>
 	{/if}
+	{#if showPicture}
+		<img
+			{src}
+			{alt}
+			class={cn(
+				"absolute inset-0 size-full object-cover transition-opacity duration-base ease-out",
+				pictureLoaded ? "opacity-100" : "opacity-0",
+			)}
+			onload={() => (loadedSource = src)}
+			onerror={() => (failedSource = src)}
+		/>
+	{/if}
 </span>

package/dist/components/ui/button/button.svelte

@@ -13,7 +13,7 @@
 	import type { VariantProps } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		base: "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",

package/dist/components/ui/button/button.svelte.d.ts

@@ -23,7 +23,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
     responsiveVariants?: boolean | (string | number | symbol)[] | {
         size?: boolean | (string | number | symbol)[] | undefined;
         variant?: boolean | (string | number | symbol)[] | undefined;
@@ -81,7 +81,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -6,6 +6,6 @@ export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps>
     nextLabel?: string;
 };
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "ref" | "value">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/command/command-item.svelte

@@ -15,7 +15,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		"text-body aria-selected:bg-accent aria-selected:text-foreground relative flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		"text-body aria-selected:bg-accent aria-selected:text-foreground relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		className
 	)}
 	bind:ref

package/dist/components/ui/command/command-link-item.svelte

@@ -15,7 +15,7 @@
 
 <CommandPrimitive.LinkItem
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	bind:ref

package/dist/components/ui/dialog/dialog-content.svelte

@@ -4,6 +4,10 @@
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn } from "../../../utils.js";
+	import {
+		overlayDialogContentClasses,
+		overlayReducedMotionClasses
+	} from "../../../utils/overlayMotion.js";
 
 	let {
 		ref = $bindable(null),
@@ -24,8 +28,11 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		data-widgetic-overlay="dialog-panel"
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background border-border fixed start-1/2 top-1/2 z-50 grid w-dialog max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-panel border p-6 duration-base",
+			"bg-background border-border fixed start-1/2 top-1/2 z-50 grid w-dialog max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-panel border p-6",
+			overlayDialogContentClasses,
+			overlayReducedMotionClasses,
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -5,6 +5,10 @@
 
 <script lang="ts">
 		import { cn } from "../../../utils.js";
+	import {
+		overlayDialogOverlayClasses,
+		overlayReducedMotionClasses
+	} from "../../../utils/overlayMotion.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +19,11 @@
 
 <DialogPrimitive.Overlay
 	bind:ref
+	data-widgetic-overlay="dialog-backdrop"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm",
+		"fixed inset-0 z-50",
+		overlayDialogOverlayClasses,
+		overlayReducedMotionClasses,
 		className
 	)}
 	{...restProps}

package/dist/components/ui/drawer/drawer-overlay.svelte

@@ -15,6 +15,6 @@
 
 <DrawerPrimitive.Overlay
 	bind:ref
-	class={cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm", className)}
+	class={cn("fixed inset-0 z-50 bg-muted-foreground/80 backdrop-blur-[3px]", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-pointer select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -22,7 +22,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] data-[variant=destructive]:text-destructive data-highlighted:data-[variant=destructive]:text-destructive",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] data-[variant=destructive]:text-destructive data-highlighted:data-[variant=destructive]:text-destructive",
 		description ? "min-h-12" : "min-h-8",
 		inset && "ps-8",
 		className

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -18,7 +18,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-pointer select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		inset && "ps-8",
 		className
 	)}

package/dist/components/ui/icon-button/icon-button.svelte

@@ -8,7 +8,7 @@
 	import type { VariantProps } from "tailwind-variants";
 
 	export const iconButtonVariants = tv({
-		base: "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		base: "inline-flex shrink-0 items-center justify-center press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		variants: {
 			variant: {
 				ghost:

package/dist/components/ui/icon-button/icon-button.svelte.d.ts

@@ -13,7 +13,7 @@ export declare const iconButtonVariants: import("tailwind-variants").TVReturnTyp
         default: string;
         sm: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+}, undefined, "inline-flex shrink-0 items-center justify-center press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
     responsiveVariants?: boolean | (string | number | symbol)[] | {
         size?: boolean | (string | number | symbol)[] | undefined;
         variant?: boolean | (string | number | symbol)[] | undefined;
@@ -50,7 +50,7 @@ export declare const iconButtonVariants: import("tailwind-variants").TVReturnTyp
         default: string;
         sm: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex shrink-0 items-center justify-center press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         ghost: string;
         secondary: string;

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -6,6 +6,6 @@ export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.R
     nextLabel?: string;
 };
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "placeholder" | "ref" | "value">;
+declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "ref" | "value" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/select/select-content.svelte

@@ -2,11 +2,16 @@
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
 	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { onMount } from "svelte";
 	import { cn } from "../../../utils.js";
 	import { useTextDirection } from "../../textDirection.js";
+	import { installInputModality } from "../../../utils/inputModality.js";
 
 	const textDirection = useTextDirection();
 
+	// The rows paint the highlight only while the keyboard drives the list (see select-item.svelte): this is what tells them so
+	onMount(() => installInputModality());
+
 	let {
 		ref = $bindable(null),
 		class: className,

package/dist/components/ui/select/select-item.svelte

@@ -18,11 +18,18 @@
 	}: SelectItemProps = $props();
 </script>
 
+<!--
+	Which row is painted. bits-ui highlights the row the pointer moves over and never takes the highlight back when the pointer
+	leaves, so painting `data-highlighted` left the last row crossed lit after the pointer had gone. So:
+	 - the pointer paints with :hover, which ends when the pointer does (a selected row keeps its own look);
+	 - the keyboard paints `data-highlighted`, while the last input was a key press (data-input-modality="keyboard", set by
+	   utils/inputModality.ts), and the hover of a pointer that is resting somewhere does not paint a second row then.
+-->
 <SelectPrimitive.Item
 	bind:ref
 	{value}
 	class={cn(
-		"relative flex h-8 w-full cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[highlighted]:bg-accent data-[selected]:bg-brand-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex h-8 w-full cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[selected]:bg-brand-subtle hover:not-data-[selected]:bg-accent [[data-input-modality=keyboard]_&]:not-data-[selected]:data-[highlighted]:bg-accent [[data-input-modality=keyboard]_&]:not-data-[selected]:not-data-[highlighted]:hover:bg-transparent data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/select/select-trigger.svelte

@@ -19,11 +19,12 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-start text-body transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[placeholder]:text-muted-foreground aria-invalid:border-destructive [&>span]:line-clamp-1",
+		"flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-start text-body transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[placeholder]:text-muted-foreground aria-invalid:border-destructive [&>span]:line-clamp-1 [&[data-state=open]>svg:last-child]:rotate-180",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<IconChevronDown class="size-4 shrink-0 stroke-[1.333] opacity-50" aria-hidden="true" />
+	<!-- Figma: the open trigger shows the arrow up. It turns with the motion of the accordion's arrow (transition-transform duration-base). -->
+	<IconChevronDown class="size-4 shrink-0 stroke-[1.333] opacity-50 transition-transform duration-base" aria-hidden="true" />
 </SelectPrimitive.Trigger>

package/dist/components/ui/stepper-button/stepper-button.svelte

@@ -24,7 +24,7 @@
 	aria-label={label}
 	{disabled}
 	class={cn(
-		"inline-flex size-6 shrink-0 items-center justify-center rounded-lg bg-transparent text-foreground transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 press-feedback",
+		"inline-flex size-6 shrink-0 items-center justify-center rounded-lg bg-transparent text-foreground hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 press-feedback",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/switch/switch.svelte

@@ -18,12 +18,15 @@
 <!--
 	The track is 36x20. `relative before:absolute before:inset-x-0 before:-inset-y-0.5` adds an invisible 2px above and below,
 	so the tap target is 36x24 (the minimum height of a target). Figma keeps the same 24px frame around the 20px track.
+	The thumb (the "scrub") is 16x16 and sits 2px from every edge of the track, as Figma's track pads it (2/2/2/2). The track has no
+	border of its own: a transparent 1px border here would add a pixel of padding on every side, which left the thumb 3px from the
+	start and 1px from the end.
 -->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	class={cn(
-		"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 transition-colors duration-base ease-out before:absolute before:inset-x-0 before:-inset-y-0.5 hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary/90",
+		"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-input p-0.5 transition-colors duration-base ease-out before:absolute before:inset-x-0 before:-inset-y-0.5 hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary/90",
 		className
 	)}
 	{...restProps}

package/dist/styles/global.css

@@ -609,10 +609,11 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Modal System */
+  /* The scrim of every overlay: the muted foreground token at 80%, set on the colour, with a 3px blur (Figma `Overlay/Scrim blur`) */
   .modal-overlay {
     @apply fixed inset-0 z-50;
-    backdrop-filter: blur(30px);
-    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(3px);
+    background-color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
   }
 
   .modal-shadow {

package/dist/styles/tokens.css

@@ -238,8 +238,28 @@
 	transition-timing-function: var(--ease-drawer);
 }
 
+/*
+ * A pressable control shrinks to `--scale-press` while it is pressed and goes back to 100% when it is released
+ * (Figma: the Pressed variants of Button and Icon Button are 0.97 of the Default size).
+ *
+ * The utility owns the whole transition of the control: the colours that hover changes and the transform of the press.
+ * `transition-colors` sets `transition-property` too, with the same specificity, so whichever of the two came last in the
+ * stylesheet won, and when that was `transition-colors` the press had no transition at all: the control snapped in and
+ * snapped back. `:not([data-no-press])` raises the specificity above `transition-colors` and `duration-*`, so they compose
+ * in any order, and `data-no-press` is the way to opt one control out.
+ */
 @utility press-feedback {
-	transition: transform var(--duration-base) var(--ease-out);
+	&:not([data-no-press]) {
+		transition:
+			color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			background-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			border-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			outline-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			text-decoration-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			fill var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			stroke var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+			transform var(--duration-base) var(--ease-out);
+	}
 
 	&:active:not(:disabled):not([aria-disabled='true']) {
 		transform: scale(var(--scale-press));

package/dist/utils/inputModality.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tells the styles whether the last thing a person did was press a key or use the pointer.
+ *
+ * The root element carries `data-input-modality="keyboard"` after a key press and `data-input-modality="pointer"` after the
+ * pointer moved or pressed. A list can then paint the row that the keyboard highlighted without painting, for ever, the row
+ * the pointer happened to cross last: bits-ui's Select never takes the highlight back when the pointer leaves, so what the
+ * pointer highlighted stayed painted after it had gone (Figma Select Option has Default, Hover and Selected looks, not a
+ * "was hovered" one).
+ *
+ * `installInputModality` is safe to call as often as needed: it listens once per document.
+ */
+/** The attribute on the root element that carries the modality. */
+export declare const inputModalityAttribute = "data-input-modality";
+export type InputModality = 'keyboard' | 'pointer';
+/** Start listening in `doc` (the page by default). Does nothing on the server. */
+export declare function installInputModality(doc?: Document | undefined): void;

package/dist/utils/inputModality.js

@@ -0,0 +1,55 @@
+/**
+ * Tells the styles whether the last thing a person did was press a key or use the pointer.
+ *
+ * The root element carries `data-input-modality="keyboard"` after a key press and `data-input-modality="pointer"` after the
+ * pointer moved or pressed. A list can then paint the row that the keyboard highlighted without painting, for ever, the row
+ * the pointer happened to cross last: bits-ui's Select never takes the highlight back when the pointer leaves, so what the
+ * pointer highlighted stayed painted after it had gone (Figma Select Option has Default, Hover and Selected looks, not a
+ * "was hovered" one).
+ *
+ * `installInputModality` is safe to call as often as needed: it listens once per document.
+ */
+/** The attribute on the root element that carries the modality. */
+export const inputModalityAttribute = 'data-input-modality';
+/** The documents that already listen, so that a second call does nothing. */
+const listeningDocuments = new WeakSet();
+/**
+ * Keys that act on a list. A modifier on its own (Shift, Meta…) or a shortcut (Cmd+C) is not the keyboard driving a list:
+ * a person who opens a menu with the pointer and then presses Shift must not see the highlight appear.
+ */
+function isListNavigationKey(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey)
+        return false;
+    return (event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key === 'PageUp' ||
+        event.key === 'PageDown' ||
+        event.key === 'Enter' ||
+        event.key === ' ' ||
+        event.key === 'Tab' ||
+        // Type-ahead: a single character moves the highlight to the row that starts with it
+        event.key.length === 1);
+}
+/** Start listening in `doc` (the page by default). Does nothing on the server. */
+export function installInputModality(doc = typeof document === 'undefined' ? undefined : document) {
+    if (!doc || listeningDocuments.has(doc))
+        return;
+    listeningDocuments.add(doc);
+    const root = doc.documentElement;
+    const setModality = (modality) => {
+        // Compared first: the pointer moves hundreds of times a second and nothing has to be written for that
+        if (root.getAttribute(inputModalityAttribute) !== modality) {
+            root.setAttribute(inputModalityAttribute, modality);
+        }
+    };
+    doc.addEventListener('keydown', (event) => {
+        if (isListNavigationKey(event))
+            setModality('keyboard');
+    }, true);
+    doc.addEventListener('pointermove', () => setModality('pointer'), { capture: true, passive: true });
+    doc.addEventListener('pointerdown', () => setModality('pointer'), { capture: true, passive: true });
+}

package/dist/utils/overlayMotion.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared overlay motion tokens so BaseModal, bits-ui Dialog, and related surfaces stay in sync.
+ * FilePreview / legacy modals: backdrop fades 200ms with cubicOut; the card scales from 0.95 with the same timing.
+ * Change here when Figma updates overlay motion.
+ */
+import { cubicOut } from 'svelte/easing';
+/** Backdrop scrim + card motion duration (ms). Intentionally 200ms; DS `--duration-base` is 160ms for small UI. */
+export declare const overlayTransitionDurationMs = 200;
+/** Easing for open/close (Svelte transition easing function — matches “cubic out” in the legacy modals). */
+export declare const overlayTransitionEasing: typeof cubicOut;
+/**
+ * Backdrop blur (px) of the scrim behind every modal, dialog, drawer and sheet. It is the Figma effect style
+ * `Overlay/Scrim blur` (a background blur of 3).
+ */
+export declare const overlayBackdropBlurPx = 3;
+/** Content scale at the start of the open transition / end of the close transition. */
+export declare const overlayContentScaleStart = 0.95;
+/**
+ * Tailwind duration class — must be a source literal so Tailwind's scanner emits `duration-[200ms]`.
+ * Kept in sync with `overlayTransitionDurationMs` (see tests/overlayMotionDuration.test.ts).
+ */
+export declare const overlayDurationClass = "duration-[200ms]";
+/**
+ * bits-ui applies `data-[state=open]:animate-in` at specificity 0,2,0 with a 150ms default duration, which beats a
+ * plain `duration-[200ms]` (0,1,0). These state-scoped arbitrary properties match open/closed and win in cascade.
+ * Literal strings — keep in sync with `overlayTransitionDurationMs`.
+ */
+export declare const overlayDialogOpenClosedAnimationDurationClasses: readonly ["data-[state=open]:[animation-duration:200ms]", "data-[state=closed]:[animation-duration:200ms]"];
+/**
+ * The scrim colour: the muted foreground token (neutral 550 in the design system) at 80%. The opacity is part of the colour, not of
+ * the layer, because an element that is itself translucent would not blur what is behind it. Literal so Tailwind's
+ * scanner emits it; `bg-muted-foreground/80` is the Figma scrim (`Foundations / Overlay`).
+ */
+export declare const overlayScrimColorClass = "bg-muted-foreground/80";
+/** Backdrop blur class — matches `overlayBackdropBlurPx`. Literal for the same reason as the colour. */
+export declare const overlayBackdropBlurClass = "backdrop-blur-[3px]";
+/**
+ * The whole scrim: colour and blur. Every surface that dims the page behind a panel (dialogs, modals, drawers, the
+ * navigation drawer) uses these two classes, so the overlay looks the same everywhere. Written out, not joined from the
+ * two constants above, so the scanner of Tailwind finds both classes in this one literal as well.
+ */
+export declare const overlayScrimClasses = "bg-muted-foreground/80 backdrop-blur-[3px]";
+/** Tailwind arbitrary easing approximating Svelte `cubicOut` (ease-out cubic, 1 − (1 − t)³). */
+export declare const overlayEasingClass = "ease-[cubic-bezier(0.33,1,0.68,1)]";
+/** Overlay + panel classes for bits-ui Dialog (aligned with BaseModal motion: fade, 200ms, cubic-out-like, zoom from 0.95). */
+export declare const overlayDialogOverlayClasses: string;
+export declare const overlayDialogContentClasses: string;
+/** Applied with overlay dialog classes so users who prefer reduced motion get instant open/close. */
+export declare const overlayReducedMotionClasses = "motion-reduce:!duration-0 motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none";

package/dist/utils/overlayMotion.js

@@ -0,0 +1,71 @@
+/**
+ * Shared overlay motion tokens so BaseModal, bits-ui Dialog, and related surfaces stay in sync.
+ * FilePreview / legacy modals: backdrop fades 200ms with cubicOut; the card scales from 0.95 with the same timing.
+ * Change here when Figma updates overlay motion.
+ */
+import { cubicOut } from 'svelte/easing';
+/** Backdrop scrim + card motion duration (ms). Intentionally 200ms; DS `--duration-base` is 160ms for small UI. */
+export const overlayTransitionDurationMs = 200;
+/** Easing for open/close (Svelte transition easing function — matches “cubic out” in the legacy modals). */
+export const overlayTransitionEasing = cubicOut;
+/**
+ * Backdrop blur (px) of the scrim behind every modal, dialog, drawer and sheet. It is the Figma effect style
+ * `Overlay/Scrim blur` (a background blur of 3).
+ */
+export const overlayBackdropBlurPx = 3;
+/** Content scale at the start of the open transition / end of the close transition. */
+export const overlayContentScaleStart = 0.95;
+/**
+ * Tailwind duration class — must be a source literal so Tailwind's scanner emits `duration-[200ms]`.
+ * Kept in sync with `overlayTransitionDurationMs` (see tests/overlayMotionDuration.test.ts).
+ */
+export const overlayDurationClass = 'duration-[200ms]';
+/**
+ * bits-ui applies `data-[state=open]:animate-in` at specificity 0,2,0 with a 150ms default duration, which beats a
+ * plain `duration-[200ms]` (0,1,0). These state-scoped arbitrary properties match open/closed and win in cascade.
+ * Literal strings — keep in sync with `overlayTransitionDurationMs`.
+ */
+export const overlayDialogOpenClosedAnimationDurationClasses = [
+    'data-[state=open]:[animation-duration:200ms]',
+    'data-[state=closed]:[animation-duration:200ms]'
+];
+/**
+ * The scrim colour: the muted foreground token (neutral 550 in the design system) at 80%. The opacity is part of the colour, not of
+ * the layer, because an element that is itself translucent would not blur what is behind it. Literal so Tailwind's
+ * scanner emits it; `bg-muted-foreground/80` is the Figma scrim (`Foundations / Overlay`).
+ */
+export const overlayScrimColorClass = 'bg-muted-foreground/80';
+/** Backdrop blur class — matches `overlayBackdropBlurPx`. Literal for the same reason as the colour. */
+export const overlayBackdropBlurClass = 'backdrop-blur-[3px]';
+/**
+ * The whole scrim: colour and blur. Every surface that dims the page behind a panel (dialogs, modals, drawers, the
+ * navigation drawer) uses these two classes, so the overlay looks the same everywhere. Written out, not joined from the
+ * two constants above, so the scanner of Tailwind finds both classes in this one literal as well.
+ */
+export const overlayScrimClasses = 'bg-muted-foreground/80 backdrop-blur-[3px]';
+/** Tailwind arbitrary easing approximating Svelte `cubicOut` (ease-out cubic, 1 − (1 − t)³). */
+export const overlayEasingClass = 'ease-[cubic-bezier(0.33,1,0.68,1)]';
+/** Overlay + panel classes for bits-ui Dialog (aligned with BaseModal motion: fade, 200ms, cubic-out-like, zoom from 0.95). */
+export const overlayDialogOverlayClasses = [
+    overlayScrimClasses,
+    overlayDurationClass,
+    overlayEasingClass,
+    ...overlayDialogOpenClosedAnimationDurationClasses,
+    `data-[state=open]:animate-in`,
+    `data-[state=closed]:animate-out`,
+    `data-[state=closed]:fade-out-0`,
+    `data-[state=open]:fade-in-0`
+].join(' ');
+export const overlayDialogContentClasses = [
+    overlayDurationClass,
+    overlayEasingClass,
+    ...overlayDialogOpenClosedAnimationDurationClasses,
+    `data-[state=open]:animate-in`,
+    `data-[state=closed]:animate-out`,
+    `data-[state=closed]:fade-out-0`,
+    `data-[state=open]:fade-in-0`,
+    `data-[state=closed]:zoom-out-95`,
+    `data-[state=open]:zoom-in-95`
+].join(' ');
+/** Applied with overlay dialog classes so users who prefer reduced motion get instant open/close. */
+export const overlayReducedMotionClasses = 'motion-reduce:!duration-0 motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.23",
+	"version": "0.5.25",
 	"license": "SEE LICENSE IN LICENSE",
 	"type": "module",
 	"svelte": "./dist/index.js",

package/dist/components/shell/messages.d.ts

@@ -1,7 +0,0 @@
-/** Footer links in SettingsDialog (Figma Settings Dialog 107:618). */
-export interface SettingsDialogMessages {
-    privacyPolicy: string;
-    termsOfService: string;
-    cookieSettings: string;
-}
-export declare const defaultSettingsDialogMessages: SettingsDialogMessages;

package/dist/components/shell/messages.js

@@ -1,5 +0,0 @@
-export const defaultSettingsDialogMessages = {
-    privacyPolicy: 'Privacy policy',
-    termsOfService: 'Terms of service',
-    cookieSettings: 'Cookie settings'
-};