noph-ui 0.51.2 → 0.52.0

package/dist/checkbox/Checkbox.svelte

@@ -87,6 +87,7 @@
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 		margin: var(--np-checkbox-margin, max(0px, (48px - 18px)/2));
+		--np-ripple-pressed-color: var(--np-color-primary);
 	}
 	:global(label) {
 		-webkit-tap-highlight-color: transparent;
@@ -188,6 +189,10 @@
 	.np-error .np-icon {
 		fill: var(--np-color-on-error);
 	}
+	.np-checkbox-container:not(.np-error):has(input:checked, input:indeterminate) {
+		--np-ripple-hover-color: var(--np-color-primary);
+		--np-ripple-pressed-color: var(--np-color-on-surface);
+	}
 	.np-error {
 		--np-ripple-hover-color: var(--np-color-error);
 		--np-ripple-pressed-color: var(--np-color-error);

package/dist/chip/ChipSet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { arrowKeyNav, focusableItems, focusedItem, rovingTabindex } from '../keyboard-nav.js'
 	import type { ChipSetProps } from './types.js'
 
 	let { children, element = $bindable(), ...attributes }: ChipSetProps = $props()
@@ -9,7 +9,33 @@
 		currentAttr: 'aria-current',
 		currentValue: 'true',
 	})
-	const onkeydown = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
+	const arrows = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
+
+	// In a set that wraps, ↑ and ↓ move to the chip closest above or below the focused one.
+	const toRow = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		const chips = focusableItems(event.currentTarget, CHIP_SELECTOR)
+		const focused = focusedItem(event.currentTarget, CHIP_SELECTOR, chips)
+		if (!focused) return
+		const from = focused.getBoundingClientRect()
+		const fromX = from.left + from.width / 2
+		const below = event.key === 'ArrowDown'
+		const candidates = chips
+			.map((chip) => ({ chip, box: chip.getBoundingClientRect() }))
+			.filter(({ box }) => (below ? box.top >= from.bottom : box.bottom <= from.top))
+		if (!candidates.length) return
+		const rowTop = below
+			? Math.min(...candidates.map(({ box }) => box.top))
+			: Math.max(...candidates.map(({ box }) => box.top))
+		const row = candidates.filter(({ box }) => Math.abs(box.top - rowTop) < 1)
+		const distance = (box: DOMRect) => Math.abs(box.left + box.width / 2 - fromX)
+		row.sort((a, b) => distance(a.box) - distance(b.box))[0].chip.focus()
+		event.preventDefault()
+	}
+
+	const onkeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') toRow(event)
+		else arrows(event)
+	}
 </script>
 
 <div {...attributes} bind:this={element} class={['np-chip-set-wrapper', attributes.class]}>

package/dist/chip/FilterChip.svelte

@@ -13,8 +13,9 @@
 		disabled = false,
 		label = '',
 		icon,
+		trailingIcon,
 		element = $bindable(),
-		removeAriaLabel = 'Remove',
+		removeAriaLabel,
 		onremove,
 		name,
 		value,
@@ -69,10 +70,22 @@
 			<CheckIcon width={18} height={18} />
 		</div>
 		<div class="np-chip-label">{label}</div>
+		{#if trailingIcon && !removable}
+			<div class="np-chip-trailing-icon" aria-hidden="true">
+				{@render trailingIcon()}
+			</div>
+		{/if}
+		<span class="np-touch"></span>
 		<input
 			type="checkbox"
 			checked={isChecked}
 			{onchange}
+			onkeydown={(event) => {
+				// Enter selects like Space, instead of submitting the form.
+				if (event.key !== 'Enter') return
+				event.preventDefault()
+				event.currentTarget.click()
+			}}
 			{value}
 			{name}
 			{disabled}
@@ -89,7 +102,7 @@
 			type="button"
 			size="xs"
 			--np-icon-button-icon-size="1.125rem"
-			aria-label={removeAriaLabel}
+			aria-label={removeAriaLabel ?? `Remove ${label}`}
 			onclick={onremove}
 		>
 			<CloseIcon />
@@ -99,6 +112,7 @@
 
 <style>
 	.np-filter-chip {
+		box-sizing: border-box;
 		position: relative;
 		display: inline-flex;
 		align-items: center;
@@ -107,7 +121,6 @@
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
 		--np-ripple-pressed-opacity: 0.1;
-		min-width: 0;
 		transition: box-shadow var(--np-motion-expressive-slow-effects);
 	}
 	.np-filter-chip-label input {
@@ -117,6 +130,7 @@
 	}
 	.np-filter-chip-label {
 		cursor: pointer;
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		height: 2rem;
@@ -126,7 +140,19 @@
 		gap: 0.5rem;
 		z-index: 1;
 		padding-inline: 1rem;
-		overflow: hidden;
+	}
+	.np-chip-trailing-icon {
+		display: flex;
+		margin-inline-end: -0.5rem;
+	}
+	/* The chip keeps a 48px tall target. */
+	.np-touch {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		translate: 0 -50%;
+		height: 3rem;
+		z-index: -1;
 	}
 	.np-chip-icon-checked {
 		display: flex;
@@ -154,8 +180,10 @@
 	.np-filter-chip-icon .np-filter-chip-label {
 		padding-inline-start: 0.5rem;
 	}
+	/* Removable, selecting and removing each keep a 48px target side by side. */
 	.np-filter-chip-removable {
 		padding-inline-end: 1px;
+		min-width: 5.5rem;
 	}
 	.np-filter-chip-removable .np-filter-chip-label {
 		padding-inline-end: 1px;

package/dist/chip/InputChip.svelte

@@ -10,9 +10,11 @@
 		disabled = false,
 		label = '',
 		icon,
+		avatar,
+		variant = 'outlined',
 		element = $bindable(),
 		actionElement = $bindable(),
-		removeAriaLabel = 'Remove',
+		removeAriaLabel,
 		onclick,
 		onremove,
 		name,
@@ -22,46 +24,88 @@
 	}: InputChipProps = $props()
 
 	let hasError = $derived(!!issues?.length)
+	let content = $derived(label || `${value ?? ''}`)
+	// With nothing to do but remove, the chip is one focusable element: its remove button.
+	let hasAction = $derived(!!onclick)
+	let removeElement: HTMLElement | undefined = $state()
+
+	// Backspace and Delete remove the focused chip. Focus moves on to a neighbour first, so it is
+	// not lost when the chip leaves the page.
+	const removeWithKey = (event: KeyboardEvent) => {
+		if (disabled || (event.key !== 'Backspace' && event.key !== 'Delete')) return
+		event.preventDefault()
+		const set = element?.closest('.np-chip-set')
+		if (set && element) {
+			const chips = [
+				...set.querySelectorAll<HTMLElement>('.np-input-chip:not(.np-input-chip-disabled)'),
+			]
+			const index = chips.indexOf(element)
+			const neighbour = chips[index + 1] ?? chips[index - 1]
+			neighbour?.querySelector<HTMLElement>('button')?.focus()
+		}
+		removeElement?.click()
+	}
 </script>
 
 <div
 	{...attributes}
 	bind:this={element}
 	aria-disabled={disabled}
+	onkeydown={(event) => {
+		attributes.onkeydown?.(event)
+		if (!event.defaultPrevented) removeWithKey(event)
+	}}
 	class={[
 		'np-input-chip',
-		icon ? 'np-input-chip-icon' : '',
+		variant === 'elevated' && 'np-input-chip-elevated',
+		hasAction && 'np-input-chip-action',
+		avatar ? 'np-input-chip-avatar' : icon ? 'np-input-chip-icon' : '',
 		disabled ? 'np-input-chip-disabled' : '',
 		selected ? 'np-input-chip-selected' : '',
 		hasError && !disabled && 'np-chip-error',
 		attributes.class,
 	]}
 >
-	<button
-		bind:this={actionElement}
-		type="button"
-		class="np-input-chip-label"
-		aria-pressed={selected === undefined ? undefined : selected}
-		{disabled}
-		{onclick}
-	>
-		{#if icon}
-			<div class="np-chip-icon">
+	{#snippet chipContent()}
+		{#if avatar}
+			<div class="np-chip-avatar" aria-hidden="true">
+				{@render avatar()}
+			</div>
+		{:else if icon}
+			<div class="np-chip-icon" aria-hidden="true">
 				{@render icon()}
 			</div>
 		{/if}
-		<div class="np-chip-label">{label || value}</div>
-	</button>
-	<input type="hidden" {value} {name} {disabled} />
-	{#if !disabled}
-		<Ripple forElement={actionElement} />
+		<div class="np-chip-label">{content}</div>
+	{/snippet}
+	{#if hasAction}
+		<button
+			bind:this={actionElement}
+			type="button"
+			class="np-input-chip-label"
+			aria-pressed={selected === undefined ? undefined : selected}
+			{disabled}
+			{onclick}
+		>
+			{@render chipContent()}
+			<span class="np-touch"></span>
+		</button>
+		{#if !disabled}
+			<Ripple forElement={actionElement} />
+		{/if}
+	{:else}
+		<div class="np-input-chip-label">
+			{@render chipContent()}
+		</div>
 	{/if}
+	<input type="hidden" {value} {name} {disabled} />
 	<IconButton
 		{disabled}
 		type="button"
 		size="xs"
 		--np-icon-button-icon-size="1.125rem"
-		aria-label={removeAriaLabel}
+		aria-label={removeAriaLabel ?? `Remove ${content}`}
+		bind:element={removeElement}
 		onclick={onremove}
 	>
 		<CloseIcon />
@@ -70,6 +114,7 @@
 
 <style>
 	.np-input-chip {
+		box-sizing: border-box;
 		position: relative;
 		display: inline-flex;
 		align-items: center;
@@ -78,8 +123,12 @@
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
 		--np-ripple-pressed-opacity: 0.1;
+		--_state-color: var(--np-color-on-surface-variant);
 		padding-inline-end: 1px;
-		min-width: 0;
+	}
+	/* With an action besides remove, both keep a 48px target side by side. */
+	.np-input-chip-action {
+		min-width: 5.5rem;
 	}
 	.np-chip-error {
 		--np-input-chip-outline-color: var(--np-color-error);
@@ -97,6 +146,7 @@
 		padding-block: 0;
 		padding-inline-end: 0;
 		cursor: pointer;
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		height: 2rem;
@@ -119,9 +169,36 @@
 	.np-input-chip-selected .np-chip-icon {
 		color: var(--np-color-primary);
 	}
+	div.np-input-chip-label {
+		cursor: default;
+	}
 	.np-input-chip-icon .np-input-chip-label {
 		padding-inline-start: 0.5rem;
 	}
+	.np-input-chip-avatar .np-input-chip-label {
+		padding-inline-start: 0.25rem;
+	}
+	/* A leading image is larger than an icon, with rounded corners. */
+	.np-chip-avatar {
+		display: flex;
+		flex: none;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.75rem;
+		overflow: hidden;
+	}
+	.np-chip-avatar > :global(*) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.np-touch {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		translate: 0 -50%;
+		height: 3rem;
+	}
 	.np-chip-label {
 		line-height: 1.25rem;
 		font-size: 0.875rem;
@@ -150,17 +227,47 @@
 		outline-color: transparent;
 		background-color: var(--np-color-secondary-container);
 	}
+	.np-input-chip-elevated {
+		box-shadow: var(--np-elevation-1);
+	}
+	.np-input-chip-elevated:not(.np-input-chip-selected)::before {
+		outline-color: transparent;
+		background-color: var(--np-color-surface-container-low);
+	}
+	.np-input-chip-elevated.np-input-chip-disabled {
+		box-shadow: none;
+	}
 	.np-input-chip-selected {
 		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
+		--_state-color: var(--np-color-on-secondary-container);
 	}
 	.np-input-chip-selected .np-input-chip-label {
 		color: var(--np-color-on-secondary-container);
 	}
-	.np-input-chip:has(:focus-visible) {
+	/* The whole chip shows focus, with its ring and a 10% state layer: when its body is focused, or its
+	   remove button when that is all the chip has. A remove button next to a body shows its own. */
+	.np-input-chip:is(
+		:has(> .np-input-chip-label:focus-visible),
+		:not(.np-input-chip-action):has(:global(:focus-visible))
+	) {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
+		&::before {
+			--_state-layer: color-mix(in srgb, var(--_state-color) 10%, transparent);
+			background-image: linear-gradient(var(--_state-layer), var(--_state-layer));
+		}
+		@media (prefers-reduced-motion: no-preference) {
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+		}
+	}
+	.np-input-chip:not(.np-input-chip-action) {
+		--np-ripple-focus-opacity: 0;
+	}
+	.np-input-chip:not(.np-input-chip-action) :global(.np-icon-button:focus-visible) {
+		outline: none;
+		animation: none;
 	}
 
 	.np-input-chip-disabled .np-input-chip-label {
@@ -176,10 +283,4 @@
 		outline-color: transparent;
 		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		.np-input-chip:has(:focus-visible) {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 </style>

package/dist/chip/SuggestionChip.svelte

@@ -1,29 +1,13 @@
 <script lang="ts">
-	import Button from '../button/Button.svelte'
+	import AssistChip from './AssistChip.svelte'
 	import type { SuggestionChipProps } from './types.js'
 
-	let {
-		variant = 'outlined',
-		disabled = false,
-		label = '',
-		element = $bindable(),
-		...attributes
-	}: SuggestionChipProps = $props()
+	let { element = $bindable(), ...attributes }: SuggestionChipProps = $props()
 </script>
 
-<Button
-	--np-elevated-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
-	--np-outlined-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
-	--np-outlined-button-outline-color="var(--np-suggestion-chip-outline-color, var(--np-color-outline-variant))"
-	--np-button-padding="1rem"
-	--np-button-shape="0.5rem"
-	style="letter-spacing: 0.006rem"
+<AssistChip
+	--np-assist-chip-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-assist-chip-outline-color="var(--np-suggestion-chip-outline-color, var(--np-color-outline-variant))"
 	bind:element
 	{...attributes}
-	size="xs"
-	shape="square"
-	{variant}
-	{disabled}
->
-	{label}
-</Button>
+/>

package/dist/chip/SuggestionChip.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { SuggestionChipProps } from './types.js';
-declare const SuggestionChip: import("svelte").Component<SuggestionChipProps, {}, "element">;
+declare const SuggestionChip: import("svelte").Component<import("./types.js").AssistChipProps, {}, "element">;
 type SuggestionChip = ReturnType<typeof SuggestionChip>;
 export default SuggestionChip;

package/dist/chip/types.d.ts

@@ -13,7 +13,7 @@ export interface AssistChipProps extends HTMLAttributes<ButtonElement>, Omit<HTM
     element?: HTMLElement;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
-export type SuggestionChipProps = Omit<AssistChipProps, 'icon'>;
+export type SuggestionChipProps = AssistChipProps;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
@@ -21,6 +21,9 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'outlined' | 'elevated';
     label?: string;
     icon?: Snippet;
+    /** Trailing icon, such as an arrow for a chip that opens a menu. Not shown when `removable`. */
+    trailingIcon?: Snippet;
+    /** Defaults to "Remove" and the chip's label. */
     removeAriaLabel?: string;
     element?: HTMLDivElement;
     name?: string;
@@ -33,8 +36,12 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
 export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     selected?: boolean;
     disabled?: boolean | null;
+    variant?: 'outlined' | 'elevated';
     label?: string;
     icon?: Snippet;
+    /** A 24px leading image, such as a person's photo. Takes the place of `icon`. */
+    avatar?: Snippet;
+    /** Defaults to "Remove" and the chip's label. */
     removeAriaLabel?: string;
     element?: HTMLDivElement;
     actionElement?: HTMLButtonElement;

package/dist/date-picker/Calendar.svelte

@@ -110,12 +110,14 @@
 	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		const grid = event.currentTarget
 		const from = focusedDate ?? tabStop
+		// Right to left, the next day sits to the left.
+		const forward = getComputedStyle(grid).direction === 'rtl' ? -1 : 1
 		switch (event.key) {
 			case 'ArrowLeft':
-				moveFocus(grid, addDays(from, -1))
+				moveFocus(grid, addDays(from, -forward))
 				break
 			case 'ArrowRight':
-				moveFocus(grid, addDays(from, 1))
+				moveFocus(grid, addDays(from, forward))
 				break
 			case 'ArrowUp':
 				moveFocus(grid, addDays(from, -DAYS_IN_WEEK))

package/dist/date-picker/DatePickerDialog.svelte

@@ -197,6 +197,7 @@
 </script>
 
 <Dialog
+	role="dialog"
 	{...attributes}
 	bind:element
 	aria-label={title}

package/dist/date-picker/DatePickerDialog.svelte.d.ts

@@ -2,6 +2,6 @@ import type { DatePickerDialogProps } from './types.js';
 declare const DatePickerDialog: import("svelte").Component<DatePickerDialogProps, {
     show: () => void;
     close: () => void;
-}, "element" | "value" | "open" | "displayMonth">;
+}, "open" | "element" | "value" | "displayMonth">;
 type DatePickerDialog = ReturnType<typeof DatePickerDialog>;
 export default DatePickerDialog;

package/dist/date-picker/DateRangePicker.svelte

@@ -184,6 +184,7 @@
 </script>
 
 <Dialog
+	role="dialog"
 	{...attributes}
 	bind:element
 	aria-label={title}

package/dist/date-picker/DateRangePicker.svelte.d.ts

@@ -2,6 +2,6 @@ import type { DateRangePickerProps } from './types.js';
 declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {
     show: () => void;
     close: () => void;
-}, "element" | "value" | "open">;
+}, "open" | "element" | "value">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/date-picker/DockedDatePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { exitVisibility } from './exitVisibility.svelte.js'
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
 	import Divider from '../divider/Divider.svelte'
@@ -82,6 +83,8 @@
 	const uid = $props.id()
 
 	let menuElement = $state<HTMLDivElement>()
+	// Keeps the content while the menu animates out, so it fades as a whole, not as an empty box.
+	const exit = exitVisibility()
 	let mode = $state<'days' | 'months' | 'years'>('days')
 	let listMode = $state<'months' | 'years' | undefined>(undefined)
 	let pending = $state<ISODate | undefined>(undefined)
@@ -368,19 +371,23 @@
 	bind:open
 	ontoggle={({ newState }) => {
 		if (newState === 'open') {
+			exit.show()
 			monthBeforeOpen = displayMonth
 			pending = current
 			focusCalendarWhenReady()
 		}
 		if (newState === 'closed') {
-			setMode('days')
-			listMode = undefined
-			focusedDay = undefined
-			displayMonth = monthBeforeOpen
+			// Reset once the menu is gone, not while it still shows.
+			exit.scheduleExit(menuElement, () => {
+				setMode('days')
+				listMode = undefined
+				focusedDay = undefined
+				displayMonth = monthBeforeOpen
+			})
 		}
 	}}
 >
-	{#if open}
+	{#if open || exit.visible}
 		<div class="np-docked-date-picker-container" style:--np-calendar-rows={rowCount}>
 			<CalendarHeader
 				{mode}

package/dist/date-picker/DockedDatePicker.svelte.d.ts

@@ -2,6 +2,6 @@ import type { DockedDatePickerProps } from './types.js';
 declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {
     show: () => void;
     close: () => void;
-}, "element" | "value" | "open" | "displayMonth">;
+}, "open" | "element" | "value" | "displayMonth">;
 type DockedDatePicker = ReturnType<typeof DockedDatePicker>;
 export default DockedDatePicker;

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { exitVisibility } from './exitVisibility.svelte.js'
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
 	import Divider from '../divider/Divider.svelte'
@@ -103,6 +104,8 @@
 	const uid = $props.id()
 
 	let menuElement = $state<HTMLDivElement>()
+	// Keeps the content while the menu animates out, so it fades as a whole, not as an empty box.
+	const exit = exitVisibility()
 	let mode = $state<'days' | 'months' | 'years'>('days')
 	let listMode = $state<'months' | 'years' | undefined>(undefined)
 	let pendingDay = $state<ISODate | undefined>(undefined)
@@ -461,20 +464,24 @@
 	bind:open
 	ontoggle={({ newState }) => {
 		if (newState === 'open') {
+			exit.show()
 			monthBeforeOpen = displayMonth
 			pendingDay = committed ? toISODate(committed) : undefined
 			pendingMinutes = committed ? minutesOfDay(committed) : defaultMinutes
 			focusCalendarWhenReady()
 		}
 		if (newState === 'closed') {
-			setMode('days')
-			listMode = undefined
-			focusedDay = undefined
-			displayMonth = monthBeforeOpen
+			// Reset once the menu is gone, not while it still shows.
+			exit.scheduleExit(menuElement, () => {
+				setMode('days')
+				listMode = undefined
+				focusedDay = undefined
+				displayMonth = monthBeforeOpen
+			})
 		}
 	}}
 >
-	{#if open}
+	{#if open || exit.visible}
 		<div
 			class="np-docked-date-time-picker-container"
 			style:--np-calendar-rows={rowCount}

package/dist/date-picker/DockedDateTimePicker.svelte.d.ts

@@ -2,6 +2,6 @@ import type { DockedDateTimePickerProps } from './types.js';
 declare const DockedDateTimePicker: import("svelte").Component<DockedDateTimePickerProps, {
     show: () => void;
     close: () => void;
-}, "element" | "value" | "open" | "displayMonth">;
+}, "open" | "element" | "value" | "displayMonth">;
 type DockedDateTimePicker = ReturnType<typeof DockedDateTimePicker>;
 export default DockedDateTimePicker;

package/dist/date-picker/YearGrid.svelte

@@ -45,12 +45,14 @@
 		)
 		const from = Number(focused?.dataset.year)
 		if (!focused || Number.isNaN(from)) return
+		// Right to left, the next year sits to the left.
+		const forward = getComputedStyle(grid).direction === 'rtl' ? -1 : 1
 		switch (event.key) {
 			case 'ArrowLeft':
-				focusYear(grid, from - 1)
+				focusYear(grid, from - forward)
 				break
 			case 'ArrowRight':
-				focusYear(grid, from + 1)
+				focusYear(grid, from + forward)
 				break
 			case 'ArrowUp':
 				focusYear(grid, from - YEARS_IN_ROW)