@widgetic/design-system 0.5.24 → 0.5.25

package/dist/components/CopyableHeader.svelte

@@ -130,9 +130,10 @@
 	}
 </script>
 
-<div class={cn('copyable-header flex w-full flex-col gap-3', className)} {style}>
+<!-- `min-w-0` on the root and on the title row: a `truncate` title has its whole text as min-content, so inside a grid or flex parent (a dialog) the row would push the copy button out of the parent instead of cutting the title. -->
+<div class={cn('copyable-header flex w-full min-w-0 flex-col gap-3', className)} {style}>
 	<!-- Title row: section label + copy control (Figma 32px). -->
-	<div class={cn('flex h-8 items-center justify-between gap-3', headerBackgroundColor)}>
+	<div class={cn('flex h-8 min-w-0 items-center justify-between gap-3', headerBackgroundColor)}>
 		<div class={cn('text-heading-section text-foreground min-w-0 truncate', headerTextClass)}>
 			{headerText}
 		</div>
@@ -262,7 +263,8 @@
 	</div>
 
 	{#if showHelpRow}
-		<div class="flex flex-wrap items-center gap-1">
+		<!-- Figma: the help row is 20 high (the 14/20 link sets it), whatever the size of the link. -->
+		<div class="flex min-h-5 flex-wrap items-center gap-1">
 			{#if helpPrompt}
 				<span class="text-caption text-muted-foreground">{helpPrompt}</span>
 			{/if}

package/dist/components/index.d.ts

@@ -16,7 +16,7 @@ export { Breadcrumbs, type BreadcrumbsProps } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
 export { ShadEditor, checkShadEditorMessages, type ShadEditorMessageKey, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
-export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, type ErrorStateMessages, NotificationRow, type NotificationRowProps, SettingsNav, type SettingsNavProps, SettingsDialog, type SettingsDialogProps, Stat, type StatProps, statVariants, Banner, type BannerProps, type BannerTone, bannerVariants, Link, type LinkProps, type LinkSize, linkVariants, type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive, externalLinkAttributes, statHintClass, type StatTone, type SettingsDialogMessages, defaultSettingsDialogMessages } from './shell';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, type ErrorStateMessages, NotificationRow, type NotificationRowProps, SettingsNav, type SettingsNavProps, SettingsDialog, type SettingsDialogProps, Stat, type StatProps, statVariants, Banner, type BannerProps, type BannerTone, bannerVariants, Link, type LinkProps, type LinkSize, linkVariants, type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive, externalLinkAttributes, statHintClass, type StatTone } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/index.js

@@ -17,7 +17,7 @@ export { Breadcrumbs } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
 export { ShadEditor, checkShadEditorMessages } from './shad-editor';
-export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, NotificationRow, SettingsNav, SettingsDialog, Stat, statVariants, Banner, bannerVariants, Link, linkVariants, settingsNavItemIsActive, externalLinkAttributes, statHintClass, defaultSettingsDialogMessages } from './shell';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, NotificationRow, SettingsNav, SettingsDialog, Stat, statVariants, Banner, bannerVariants, Link, linkVariants, settingsNavItemIsActive, externalLinkAttributes, statHintClass } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/shell/NavRow.svelte

@@ -8,7 +8,10 @@
 		variants: {
 			active: {
 				true: 'bg-sidebar-accent text-sidebar-accent-foreground text-body-medium',
-				false: 'text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+				// The inactive row carries its own type style (14/20 regular, Figma Nav Row): without it the label took the size
+				// of whatever it sat in (16px in a dialog), bigger than the active row's 14/20 medium.
+				false:
+					'text-body text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
 			}
 		},
 		defaultVariants: {

package/dist/components/shell/SettingsDialog.svelte

@@ -11,10 +11,6 @@
 		groups: import('./settings-nav-types.js').SettingsNavGroup[];
 		onSelect?: (id: string) => void;
 		closeLabel?: string;
-		messages?: import('./messages.js').SettingsDialogMessages;
-		privacyHref?: string;
-		termsHref?: string;
-		cookieHref?: string;
 		children: import('svelte').Snippet;
 		descriptionSlot?: import('svelte').Snippet;
 	};
@@ -28,7 +24,6 @@
 	import { cn } from '../../utils.js';
 	import { modalState } from '../modals/modalStore.js';
 	import SettingsNav from './SettingsNav.svelte';
-	import { defaultSettingsDialogMessages, type SettingsDialogMessages } from './messages.js';
 	import type { SettingsNavGroup } from './settings-nav-types.js';
 	import { createNestedModalTracker } from './nested-modal-guard.js';
 
@@ -41,10 +36,6 @@
 		groups,
 		onSelect,
 		closeLabel = 'Close',
-		messages = defaultSettingsDialogMessages,
-		privacyHref = '#',
-		termsHref = '#',
-		cookieHref = '#',
 		children,
 		descriptionSlot
 	}: SettingsDialogProps = $props();
@@ -110,23 +101,6 @@
 					class="border-border bg-sidebar flex w-full shrink-0 flex-col border-b p-3 lg:w-64 lg:border-e lg:border-b-0"
 				>
 					<SettingsNav {groups} {activeId} {onSelect} class="flex-1" />
-					<div class="mt-auto flex flex-col gap-1 px-2 pt-4 pb-1">
-						<a
-							href={privacyHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.privacyPolicy}</a
-						>
-						<a
-							href={termsHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.termsOfService}</a
-						>
-						<a
-							href={cookieHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.cookieSettings}</a
-						>
-					</div>
 				</aside>
 				<div class="flex min-h-0 min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-8">
 					<header class="flex flex-col gap-1 pe-10">

package/dist/components/shell/SettingsDialog.svelte.d.ts

@@ -7,10 +7,6 @@ export type SettingsDialogProps = {
     groups: import('./settings-nav-types.js').SettingsNavGroup[];
     onSelect?: (id: string) => void;
     closeLabel?: string;
-    messages?: import('./messages.js').SettingsDialogMessages;
-    privacyHref?: string;
-    termsHref?: string;
-    cookieHref?: string;
     children: import('svelte').Snippet;
     descriptionSlot?: import('svelte').Snippet;
 };

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

@@ -19,4 +19,3 @@ export { default as Link, type LinkProps, type LinkSize, linkVariants } from './
 export { type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive } from './settings-nav-types.js';
 export { externalLinkAttributes } from './link-external.js';
 export { statHintClass, type StatTone } from './stat-tone.js';
-export { type SettingsDialogMessages, defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/index.js

@@ -22,4 +22,3 @@ export { default as Link, linkVariants } from './Link.svelte';
 export { settingsNavItemIsActive } from './settings-nav-types.js';
 export { externalLinkAttributes } from './link-external.js';
 export { statHintClass } from './stat-tone.js';
-export { defaultSettingsDialogMessages } from './messages.js';

package/dist/components/ui/alert/index.d.ts

@@ -7,7 +7,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", {
+}, undefined, "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2", {
     responsiveVariants?: boolean | (string | number | symbol)[] | {
         variant?: boolean | (string | number | symbol)[] | undefined;
     } | undefined;
@@ -29,7 +29,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/alert/index.js

@@ -3,7 +3,10 @@ import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export const alertVariants = tv({
-    base: "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2",
+    // The icon column exists only when the alert has an icon (a direct <svg> child): an alert without one starts its text at
+    // the left padding instead of leaving the empty icon column and its 12px gap in front of the text. The description sits
+    // on the second row only under a title: alone (an icon and a sentence, or a sentence) it shares the first row with the icon.
+    base: "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2",
     variants: {
         variant: {
             default: "text-foreground [&>svg]:text-foreground",

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/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/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-pointer 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]:cursor-not-allowed 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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.24",
+	"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'
-};