noph-ui 0.51.2 → 0.53.0

package/dist/chip/FilterChip.svelte

@@ -13,8 +13,9 @@
 		disabled = false,
 		label = '',
 		icon,
+		trailingIcon,
 		element = $bindable(),
-		removeAriaLabel = 'Remove',
+		removeAriaLabel,
 		onremove,
 		name,
 		value,
@@ -51,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' : '',
@@ -69,10 +71,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 +103,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 +113,7 @@
 
 <style>
 	.np-filter-chip {
+		box-sizing: border-box;
 		position: relative;
 		display: inline-flex;
 		align-items: center;
@@ -107,7 +122,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 +131,7 @@
 	}
 	.np-filter-chip-label {
 		cursor: pointer;
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		height: 2rem;
@@ -126,7 +141,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 +181,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;
@@ -229,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;
@@ -270,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/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

@@ -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,22 +104,32 @@
 		)
 	}
 
-	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
+		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':
-				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))
@@ -195,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>
@@ -254,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 />
@@ -273,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;
@@ -352,6 +358,10 @@
 		vertical-align: middle;
 	}
 
+	.np-calendar-weekday-short {
+		display: block;
+	}
+
 	.np-calendar-weekday {
 		box-sizing: content-box;
 		height: 1.5rem;
@@ -406,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);
 		}
 	}
 
@@ -456,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>;