noph-ui 0.52.0 → 0.53.0

package/dist/checkbox/Checkbox.svelte

@@ -54,7 +54,7 @@
 		<rect class="mark short" />
 		<rect class="mark long" />
 	</svg>
-	<div class="np-input-wrapper">
+	<div class="np-input-wrapper np-focus-ring-within">
 		{#if !attributes.disabled}
 			<Ripple forElement={inputEl} />
 		{/if}
@@ -115,13 +115,6 @@
 		cursor: inherit;
 	}
 
-	.np-input-wrapper:has(input:focus-visible) {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-	}
 	.np-outline,
 	.np-background,
 	.np-icon {

package/dist/chip/FilterChip.svelte

@@ -52,6 +52,7 @@
 	bind:this={element}
 	class={[
 		'np-filter-chip',
+		'np-focus-ring-within',
 		variant === 'elevated' ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
 		icon ? 'np-filter-chip-icon' : '',
 		removable ? 'np-filter-chip-removable' : '',
@@ -257,16 +258,6 @@
 	.np-filter-chip:has(input:checked) .np-filter-chip-label {
 		color: var(--np-color-on-secondary-container);
 	}
-	.np-filter-chip-label:focus-visible {
-		outline-width: 0;
-	}
-	.np-filter-chip:has(input:focus-visible) {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-	}
-
 	.np-filter-chip-disabled .np-filter-chip-label {
 		cursor: default;
 		color: var(--np-color-on-surface) !important;
@@ -298,8 +289,5 @@
 		.np-filter-chip-icon .np-chip-icon-checked {
 			transition: none;
 		}
-		.np-filter-chip:has(input:focus-visible) {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
 	}
 </style>

package/dist/date-picker/Calendar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
+	import '../internal/visually-hidden.css'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { tick } from 'svelte'
+	import { flushSync } from 'svelte'
 	import type { Attachment } from 'svelte/attachments'
 	import {
 		addDays,
@@ -16,6 +18,7 @@
 		isSameDay,
 		isWithin,
 		MAX_CALENDAR_ROWS,
+		parseISODate,
 		startOfDay,
 		toISODate,
 		today as getToday,
@@ -42,6 +45,7 @@
 		tabStopDate,
 		focusRoot,
 		onselect,
+		onconfirm,
 		onfocusday,
 		onmonthstep,
 		monthSubhead,
@@ -100,17 +104,25 @@
 		)
 	}
 
-	const moveFocus = async (grid: HTMLElement, date: Date) => {
+	// The month changes and focus moves in one step, so no key lands on the page in between.
+	const moveFocus = (grid: HTMLElement, date: Date) => {
 		const target = startOfDay(clampDate(date, min, max))
-		onfocusday?.(target)
-		await tick()
+		flushSync(() => onfocusday?.(target))
 		findDay(focusRoot ?? grid, target)?.focus()
 	}
 
 	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.
+		if (event.key === 'Enter' && onconfirm) {
+			const day = (event.target as HTMLElement).closest<HTMLElement>('.np-calendar-day')
+			const date = parseISODate(day?.dataset.date)
+			if (!day || !date || day.getAttribute('aria-disabled') === 'true') return
+			event.preventDefault()
+			onselect?.(date)
+			onconfirm(date)
+			return
+		}
 		const forward = getComputedStyle(grid).direction === 'rtl' ? -1 : 1
 		switch (event.key) {
 			case 'ArrowLeft':
@@ -197,12 +209,14 @@
 			aria-label={monthLabel}
 			onkeydown={handleKeydown}
 		>
-			<thead class={weekdays ? undefined : 'np-calendar-head-hidden'}>
+			<thead class={weekdays ? undefined : 'np-visually-hidden'}>
 				<tr>
 					{#each weekdayLabels as weekday (weekday.long)}
 						<th scope="col" abbr={weekday.long} class="np-calendar-weekday">
-							<span aria-hidden="true">{weekday.narrow}</span>
-							<span class="np-calendar-sr-only">{weekday.long}</span>
+							<span class="np-calendar-weekday-short" aria-hidden="true" title={weekday.long}
+								>{weekday.narrow}</span
+							>
+							<span class="np-visually-hidden">{weekday.long}</span>
 						</th>
 					{/each}
 				</tr>
@@ -256,7 +270,7 @@
 											if (event.currentTarget.matches(':focus-visible')) onfocusday?.(date)
 										}}
 									>
-										<span class="np-calendar-day-container">
+										<span class="np-calendar-day-container np-focus-ring-part">
 											{date.getDate()}
 											{#if enabled}
 												<Ripple />
@@ -275,27 +289,17 @@
 
 <style>
 	.np-calendar-body.dynamic {
+		box-sizing: content-box;
 		overflow: hidden;
 		height: calc(var(--np-calendar-head, 2.5rem) + var(--np-calendar-rows) * 3rem);
+		padding: 0 0.25rem 0.25rem;
+		margin: 0 -0.25rem -0.25rem;
 	}
 
 	.np-calendar.swipeable {
 		touch-action: pan-y;
 	}
 
-	.np-calendar-sr-only,
-	.np-calendar-head-hidden {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-		border-width: 0;
-	}
-
 	.np-calendar-grid {
 		display: table;
 		border-collapse: collapse;
@@ -354,6 +358,10 @@
 		vertical-align: middle;
 	}
 
+	.np-calendar-weekday-short {
+		display: block;
+	}
+
 	.np-calendar-weekday {
 		box-sizing: content-box;
 		height: 1.5rem;
@@ -408,9 +416,7 @@
 		}
 
 		.np-calendar-day:not(.between) .np-calendar-day-container {
-			transition:
-				background-color var(--np-motion-expressive-default-effects),
-				outline-color var(--np-motion-expressive-default-effects);
+			transition: background-color var(--np-motion-expressive-default-effects);
 		}
 	}
 
@@ -458,11 +464,6 @@
 		outline: none;
 	}
 
-	.np-calendar-day:focus-visible .np-calendar-day-container {
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: 2px;
-	}
-
 	.np-calendar-cell.in-range::before,
 	.np-calendar-cell.range-start::before,
 	.np-calendar-cell.range-end::before {

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

@@ -1,3 +1,5 @@
+import '../internal/focus-ring.css';
+import '../internal/visually-hidden.css';
 import type { CalendarProps } from './types.js';
 declare const Calendar: import("svelte").Component<CalendarProps, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/date-picker/CalendarHeader.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
+	import IconButton from '../button/IconButton.svelte'
 	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import ChevronLeftIcon from '../icons/ChevronLeftIcon.svelte'
 	import ChevronRightIcon from '../icons/ChevronRightIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
+	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLAttributes } from 'svelte/elements'
+	import { DEFAULT_SHORTCUT_LABELS, withShortcut } from './shortcuts.js'
+	import type { DatePickerShortcutLabels } from './types.js'
 
 	interface CalendarHeaderProps extends HTMLAttributes<HTMLDivElement> {
 		monthLabel: string
@@ -19,6 +24,7 @@
 		nextYearLabel: string
 		selectMonthLabel: string
 		selectYearLabel: string
+		shortcutLabels?: Partial<DatePickerShortcutLabels>
 		monthListId: string
 		yearListId: string
 		onpreviousmonth?: () => void
@@ -43,6 +49,7 @@
 		nextYearLabel,
 		selectMonthLabel,
 		selectYearLabel,
+		shortcutLabels,
 		monthListId,
 		yearListId,
 		onpreviousmonth,
@@ -54,40 +61,51 @@
 		...attributes
 	}: CalendarHeaderProps = $props()
 
+	const uid = $props.id()
 	let showSteppers = $derived(mode === 'days')
+	let keys = $derived({ ...DEFAULT_SHORTCUT_LABELS, ...shortcutLabels })
 </script>
 
-{#snippet stepper(label: string, enabled: boolean, next: boolean, onclick?: () => void)}
-	<button
-		type="button"
-		class={['np-date-picker-stepper', !showSteppers && 'hidden']}
-		aria-label={label}
-		disabled={!enabled}
-		{onclick}
-	>
-		{#if next}
-			<ChevronRightIcon />
-		{:else}
-			<ChevronLeftIcon />
-		{/if}
-		{#if enabled}
-			<Ripple />
-		{/if}
-	</button>
+{#snippet stepper(
+	label: string,
+	key: string,
+	enabled: boolean,
+	next: boolean,
+	onclick?: () => void,
+)}
+	<span class={['np-date-picker-stepper', !showSteppers && 'hidden']}>
+		<IconButton
+			type="button"
+			class="np-focus-ring-inset"
+			aria-label={label}
+			title={withShortcut(label, key)}
+			disabled={!enabled}
+			{onclick}
+		>
+			{#if next}
+				<ChevronRightIcon />
+			{:else}
+				<ChevronLeftIcon />
+			{/if}
+		</IconButton>
+	</span>
 {/snippet}
 
 {#snippet menuButton(
 	label: string,
 	accessibleLabel: string,
+	key: string,
 	expanded: boolean,
 	disabled: boolean,
 	controls: string,
+	tooltipId: string,
 	onclick?: () => void,
 )}
 	<button
 		type="button"
-		class="np-date-picker-menu-button"
+		class="np-date-picker-menu-button np-focus-ring"
 		aria-label="{accessibleLabel}, {label}"
+		aria-describedby={disabled ? undefined : tooltipId}
 		aria-haspopup="listbox"
 		aria-expanded={expanded}
 		aria-controls={expanded ? controls : undefined}
@@ -102,32 +120,45 @@
 			<Ripple />
 		{/if}
 	</button>
+	{#if !disabled}
+		<Tooltip id={tooltipId}>{withShortcut(accessibleLabel, key)}</Tooltip>
+	{/if}
 {/snippet}
 
 <div {...attributes} class={['np-date-picker-header', attributes.class]}>
 	<div class="np-date-picker-header-group">
-		{@render stepper(previousMonthLabel, canPreviousMonth, false, onpreviousmonth)}
+		{@render stepper(
+			previousMonthLabel,
+			keys.previousMonth,
+			canPreviousMonth,
+			false,
+			onpreviousmonth,
+		)}
 		{@render menuButton(
 			monthLabel,
 			selectMonthLabel,
+			keys.monthList,
 			mode === 'months',
 			mode === 'years',
 			monthListId,
+			`${uid}-month-tip`,
 			ontogglemonths,
 		)}
-		{@render stepper(nextMonthLabel, canNextMonth, true, onnextmonth)}
+		{@render stepper(nextMonthLabel, keys.nextMonth, canNextMonth, true, onnextmonth)}
 	</div>
 	<div class="np-date-picker-header-group">
-		{@render stepper(previousYearLabel, canPreviousYear, false, onpreviousyear)}
+		{@render stepper(previousYearLabel, keys.previousYear, canPreviousYear, false, onpreviousyear)}
 		{@render menuButton(
 			yearLabel,
 			selectYearLabel,
+			keys.yearList,
 			mode === 'years',
 			mode === 'months',
 			yearListId,
+			`${uid}-year-tip`,
 			ontoggleyears,
 		)}
-		{@render stepper(nextYearLabel, canNextYear, true, onnextyear)}
+		{@render stepper(nextYearLabel, keys.nextYear, canNextYear, true, onnextyear)}
 	</div>
 </div>
 
@@ -138,6 +169,10 @@
 		justify-content: space-between;
 		height: 1.5rem;
 		color: var(--np-date-picker-header-color, var(--np-color-on-surface-variant));
+		--np-icon-button-icon-color: var(
+			--np-date-picker-header-color,
+			var(--np-color-on-surface-variant)
+		);
 	}
 
 	.np-date-picker-header-group {
@@ -146,24 +181,48 @@
 		gap: 0.25rem;
 	}
 
-	.np-date-picker-stepper,
+	.np-date-picker-header-group:first-child {
+		margin-inline-start: -0.5rem;
+	}
+	.np-date-picker-header-group:last-child {
+		margin-inline-end: -0.5rem;
+	}
+
+	.np-date-picker-stepper {
+		display: flex;
+		flex: none;
+	}
+
+	.np-date-picker-stepper.hidden {
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-date-picker-stepper {
+			transition:
+				opacity var(--np-motion-expressive-default-effects),
+				visibility var(--np-motion-expressive-default-effects);
+		}
+	}
+
 	.np-date-picker-menu-button {
 		font: inherit;
 		-webkit-tap-highlight-color: transparent;
 		background: none;
 		border: 0;
-		padding: 0;
 		margin: 0;
 		color: inherit;
 		cursor: pointer;
 		position: relative;
 		display: flex;
 		align-items: center;
+		gap: 0.25rem;
 		height: 1.5rem;
+		padding: 0 0.5rem;
 		border-radius: var(--np-shape-corner-full);
 	}
 
-	.np-date-picker-stepper::before,
 	.np-date-picker-menu-button::before {
 		content: '';
 		position: absolute;
@@ -171,30 +230,6 @@
 		inset-inline: 0;
 	}
 
-	.np-date-picker-stepper.hidden {
-		visibility: hidden;
-		opacity: 0;
-	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		.np-date-picker-stepper {
-			transition:
-				opacity var(--np-motion-expressive-default-effects),
-				visibility var(--np-motion-expressive-default-effects);
-		}
-	}
-
-	.np-date-picker-stepper {
-		width: 1.5rem;
-		justify-content: center;
-		flex: none;
-	}
-
-	.np-date-picker-menu-button {
-		gap: 0.25rem;
-		padding-inline: 0.5rem;
-	}
-
 	.np-date-picker-menu-button-label {
 		font-size: 0.875rem;
 		line-height: 1.25rem;
@@ -212,27 +247,14 @@
 		rotate: 180deg;
 	}
 
-	:global(.np-date-picker-stepper svg) {
-		width: 1.5rem;
-		height: 1.5rem;
-		fill: currentColor;
-	}
-
 	:global(.np-date-picker-menu-button-caret svg) {
 		width: 1.25rem;
 		height: 1.25rem;
 		fill: currentColor;
 	}
 
-	.np-date-picker-stepper:disabled,
 	.np-date-picker-menu-button:disabled {
 		cursor: default;
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 	}
-
-	.np-date-picker-stepper:focus-visible,
-	.np-date-picker-menu-button:focus-visible {
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: 2px;
-	}
 </style>

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

@@ -1,4 +1,6 @@
+import '../internal/focus-ring.css';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { DatePickerShortcutLabels } from './types.js';
 interface CalendarHeaderProps extends HTMLAttributes<HTMLDivElement> {
     monthLabel: string;
     yearLabel: string;
@@ -13,6 +15,7 @@ interface CalendarHeaderProps extends HTMLAttributes<HTMLDivElement> {
     nextYearLabel: string;
     selectMonthLabel: string;
     selectYearLabel: string;
+    shortcutLabels?: Partial<DatePickerShortcutLabels>;
     monthListId: string;
     yearListId: string;
     onpreviousmonth?: () => void;