noph-ui 0.52.0 → 0.53.0

package/dist/internal/field.css

@@ -0,0 +1,337 @@
+.np-field {
+	--_outline-width: 1px;
+	--_outline-color: var(--np-color-outline);
+	--_indicator-color: var(--np-color-on-surface-variant);
+	--_indicator-focus-color: var(--_field-focus-indicator, var(--np-color-primary));
+	--_label-color: var(--np-color-on-surface-variant);
+	--_start-color: var(--np-color-on-surface-variant);
+	--_end-color: var(--np-color-on-surface-variant);
+	--_supporting-color: var(--np-color-on-surface-variant);
+	--_floating-label-top: 0.5rem;
+	--top-space: 1.5rem;
+	--bottom-space: 0.5rem;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	writing-mode: horizontal-tb;
+	max-width: 100%;
+}
+.np-field:where(.np-field-outlined, .np-field-no-label) {
+	--top-space: 1rem;
+	--bottom-space: 1rem;
+}
+.np-field-outlined {
+	--_floating-label-top: -0.5rem;
+}
+
+.np-field:where(:hover) {
+	--_outline-color: var(--np-color-on-surface);
+}
+.np-field-outlined:where(:hover) {
+	--_label-color: var(--np-color-on-surface);
+}
+.np-field:where(:focus, .np-field-open, :has(:is(.np-field-input, .np-field-value):focus)) {
+	--_outline-width: 3px;
+	--_outline-color: var(--_field-focus-outline, var(--np-color-primary));
+	--_label-color: var(--_field-focus-label, var(--np-color-primary));
+}
+.np-field:where(
+	[aria-invalid='true'],
+	:has(:is(.np-field-input, .np-field-value):is(:user-invalid, [aria-invalid='true']))
+) {
+	--_outline-color: var(--np-color-error);
+	--_indicator-color: var(--np-color-error);
+	--_indicator-focus-color: var(--np-color-error);
+	--_label-color: var(--np-color-error);
+	--_end-color: var(--np-color-error);
+	--_supporting-color: var(--np-color-error);
+
+	&:where(:hover) {
+		--_outline-color: var(--np-color-on-error-container);
+		--_indicator-focus-color: var(--np-color-on-error-container);
+		--_label-color: var(--np-color-on-error-container);
+		--_end-color: var(--np-color-on-error-container);
+	}
+}
+.np-field-disabled {
+	--_outline-color: var(--np-color-on-surface);
+	--_indicator-color: var(--np-color-on-surface);
+	--_label-color: var(--np-color-on-surface);
+	--_start-color: var(--np-color-on-surface);
+	--_end-color: var(--np-color-on-surface);
+	--_supporting-color: var(--np-color-on-surface);
+	cursor: default;
+	pointer-events: none;
+}
+
+.np-field-box {
+	display: flex;
+	height: 100%;
+	position: relative;
+	border-radius: var(--_field-shape) var(--_field-shape) 0 0;
+}
+.np-field-outlined .np-field-box {
+	border-radius: var(--_field-shape);
+}
+.np-field-background,
+.np-field-state-layer {
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	pointer-events: none;
+}
+.np-field-background {
+	background: var(--_field-container-color);
+}
+.np-field-disabled .np-field-background {
+	background: var(--np-color-on-surface);
+	opacity: 0.04;
+}
+.np-field:not(.np-field-disabled):hover .np-field-state-layer {
+	background: var(--np-color-on-surface);
+	opacity: 0.08;
+}
+
+.np-field-indicator {
+	position: absolute;
+	inset: auto 0 0 0;
+	pointer-events: none;
+	z-index: 1;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		inset: auto 0 0 0;
+		border-bottom: 1px solid var(--_indicator-color);
+	}
+	&::after {
+		border-bottom: 3px solid var(--_indicator-focus-color);
+		opacity: 0;
+		transition: opacity var(--np-motion-expressive-fast-effects);
+	}
+}
+.np-field:where(:focus, .np-field-open, :has(:is(.np-field-input, .np-field-value):focus))
+	.np-field-indicator::after {
+	opacity: 1;
+}
+.np-field-disabled .np-field-indicator::before {
+	opacity: 0.38;
+}
+
+/* The outline is a fieldset, which leaves a gap for its legend where the floating label sits. The
+   border runs through the middle of the 1rem legend, so the fieldset starts half of it higher. */
+.np-field-outline {
+	position: absolute;
+	inset: calc(var(--_outline-width) / 2 - 0.5rem) 0 0;
+	margin: 0;
+	padding: 0 calc(0.75rem - var(--_outline-width));
+	min-inline-size: 0;
+	border: var(--_outline-width) solid var(--_outline-color);
+	border-radius: inherit;
+	pointer-events: none;
+	text-align: start;
+	z-index: 1;
+	transition: border-color var(--np-motion-expressive-fast-effects);
+
+	& legend {
+		display: block;
+		float: none;
+		height: 1rem;
+		max-inline-size: 0.01px;
+		padding: 0;
+		overflow: hidden;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		white-space: nowrap;
+		visibility: hidden;
+	}
+	& legend > span {
+		padding-inline: 0.25rem;
+	}
+}
+.np-field-disabled .np-field-outline {
+	opacity: 0.12;
+}
+
+.np-field-row {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	position: relative;
+	min-width: 0;
+	min-height: 100%;
+	max-height: 100%;
+	border-radius: inherit;
+}
+.np-field-start,
+.np-field-middle,
+.np-field-end {
+	display: flex;
+	position: relative;
+	box-sizing: border-box;
+	height: 100%;
+}
+.np-field-start,
+.np-field-end {
+	align-items: center;
+	justify-content: center;
+}
+.np-field-start {
+	color: var(--_start-color);
+	margin-inline: 0.75rem 1rem;
+}
+.np-field-end {
+	color: var(--_end-color);
+	margin-inline: 1rem 0.75rem;
+}
+.np-field-start:has(.np-icon-button) {
+	margin-inline: 0.25rem 0.5rem;
+}
+.np-field-end:has(.np-icon-button) {
+	margin-inline: 0.5rem 0.25rem;
+}
+.np-field-disabled :is(.np-field-start, .np-field-end) {
+	opacity: 0.38;
+}
+.np-field-icon {
+	display: flex;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	fill: currentColor;
+
+	& svg {
+		fill: currentColor;
+	}
+}
+.np-field-middle {
+	flex: 1;
+	align-self: baseline;
+	align-items: stretch;
+	min-width: 0;
+}
+
+.np-field-content {
+	display: flex;
+	flex: 1 1 0%;
+	min-width: 0;
+	color: var(--np-color-on-surface);
+	opacity: 0;
+	transition: opacity 83ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.np-field-label-wrapper {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	user-select: none;
+	text-align: initial;
+	margin-inline: 1rem;
+}
+.np-field-with-start:not(.np-field-outlined) .np-field-label-wrapper {
+	margin-inline-start: 0;
+}
+.np-field-with-end:not(.np-field-outlined) .np-field-label-wrapper {
+	margin-inline-end: 0;
+}
+.np-field-label {
+	position: absolute;
+	top: 1rem;
+	inset-inline-start: 0;
+	z-index: 1;
+	box-sizing: border-box;
+	width: min-content;
+	max-width: 100%;
+	overflow: hidden;
+	color: var(--_label-color);
+	font-size: 1rem;
+	line-height: 1.5rem;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	transition: color var(--np-motion-expressive-fast-effects);
+}
+.np-field-disabled .np-field-label {
+	opacity: 0.38;
+}
+.np-field-required::after {
+	content: '*';
+}
+
+.np-field-outlined.np-field-with-start .np-field-label-wrapper {
+	margin-inline-start: 3.25rem;
+}
+.np-field-outlined.np-field-with-end .np-field-label-wrapper {
+	margin-inline-end: 3.25rem;
+}
+
+.np-field:is(
+	.np-field-populated,
+	:focus,
+	.np-field-open,
+	:has(.np-field-input:is(:focus, :not(:placeholder-shown), :autofill)),
+	:has(.np-field-value:focus)
+) {
+	& .np-field-content {
+		opacity: 1;
+	}
+	& .np-field-label {
+		top: var(--_floating-label-top);
+		font-size: 0.75rem;
+		line-height: 1rem;
+	}
+	&.np-field-outlined .np-field-label-wrapper {
+		margin-inline: 1rem;
+	}
+	& .np-field-outline legend {
+		max-inline-size: 100%;
+	}
+}
+.np-field-no-label .np-field-content {
+	opacity: 1;
+}
+.np-field-disabled:is(
+		.np-field-no-label,
+		.np-field-populated,
+		:has(.np-field-input:is(:not(:placeholder-shown), :autofill))
+	)
+	.np-field-content {
+	opacity: 0.38;
+}
+
+.np-field-supporting-text {
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 0.25rem 1rem 0;
+	color: var(--_supporting-color);
+	font-size: 0.75rem;
+	line-height: 1rem;
+}
+.np-field-disabled .np-field-supporting-text {
+	opacity: 0.38;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.np-field-label {
+		transition:
+			color var(--np-motion-expressive-fast-effects),
+			top var(--np-motion-expressive-fast-effects),
+			font-size var(--np-motion-expressive-fast-effects),
+			line-height var(--np-motion-expressive-fast-effects);
+	}
+	.np-field-label-wrapper {
+		transition: margin var(--np-motion-expressive-fast-effects);
+	}
+	.np-field-outline {
+		transition:
+			border-color var(--np-motion-expressive-fast-effects),
+			border-width var(--np-motion-expressive-fast-effects),
+			inset var(--np-motion-expressive-fast-effects),
+			padding var(--np-motion-expressive-fast-effects);
+
+		& legend {
+			transition: max-inline-size var(--np-motion-expressive-fast-effects);
+		}
+	}
+}

package/dist/internal/focus-ring.css

@@ -25,18 +25,33 @@
 	}
 }
 
-.np-focus-ring:focus-visible {
-	outline-style: solid;
-	outline-color: var(--np-color-secondary);
-	outline-width: 3px;
-	outline-offset: 2px;
+@property --np-focus-ring-offset {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 2px;
 }
-/* The focused state layer, on top of the ring. */
-.np-focus-ring:focus-visible .np-ripple-surface::before {
+
+/* A part draws the ring of the focused element around it, for a shape smaller than its target. */
+.np-focus-ring:is(:focus-visible, .np-focus-ring-shown),
+.np-focus-ring-within:has(input:focus-visible),
+:focus-visible > .np-focus-ring-part {
+	outline: 3px solid var(--np-color-secondary);
+	outline-offset: var(--np-focus-ring-offset);
+}
+.np-focus-ring-inset:is(:focus-visible, .np-focus-ring-shown, :has(input:focus-visible)) {
+	outline-offset: -3px;
+}
+.np-focus-ring:is(:focus-visible, .np-focus-ring-shown) .np-ripple-surface::before,
+:focus-visible > .np-focus-ring-part .np-ripple-surface::before {
 	opacity: var(--np-ripple-focus-opacity, 0.1);
 }
 @media (prefers-reduced-motion: no-preference) {
-	.np-focus-ring:focus-visible {
+	.np-focus-ring:is(:focus-visible, .np-focus-ring-shown),
+	.np-focus-ring-within:has(input:focus-visible),
+	:focus-visible > .np-focus-ring-part {
 		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
+	.np-focus-ring-inset:is(:focus-visible, .np-focus-ring-shown, :has(input:focus-visible)) {
+		animation-name: focusAnimationInset;
+	}
 }

package/dist/internal/pop-in.css

@@ -0,0 +1,19 @@
+@media (prefers-reduced-motion: no-preference) {
+	.np-pop-in:popover-open {
+		animation:
+			np-fade-in var(--np-motion-expressive-fast-effects),
+			np-scale-in var(--np-motion-expressive-fast-spatial);
+	}
+}
+
+@keyframes np-fade-in {
+	from {
+		opacity: 0;
+	}
+}
+
+@keyframes np-scale-in {
+	from {
+		scale: 0.8;
+	}
+}

package/dist/internal/visually-hidden.css

@@ -0,0 +1,11 @@
+.np-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}

package/dist/list/Item.svelte

@@ -77,7 +77,14 @@
 		{...attributes}
 		bind:this={element}
 		aria-disabled="true"
-		class={['np-item disabled', lazy && 'np-item-lazy', attributes.class]}
+		class={[
+			'np-item',
+			'disabled',
+			'np-focus-ring',
+			'np-focus-ring-inset',
+			lazy && 'np-item-lazy',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</div>
@@ -85,7 +92,14 @@
 	<div
 		{...attributes}
 		bind:this={element}
-		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
+		class={[
+			'np-item',
+			'np-focus-ring',
+			'np-focus-ring-inset',
+			selected && 'selected',
+			lazy && 'np-item-lazy',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</div>
@@ -94,7 +108,14 @@
 		{...attributes}
 		bind:this={element}
 		type={buttonType(type)}
-		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
+		class={[
+			'np-item',
+			'np-focus-ring',
+			'np-focus-ring-inset',
+			selected && 'selected',
+			lazy && 'np-item-lazy',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 		<Ripple forceHover={softFocus} />
@@ -103,7 +124,14 @@
 	<a
 		{...attributes}
 		bind:this={element}
-		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
+		class={[
+			'np-item',
+			'np-focus-ring',
+			'np-focus-ring-inset',
+			selected && 'selected',
+			lazy && 'np-item-lazy',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 		<Ripple forceHover={softFocus} />
@@ -145,7 +173,6 @@
 		cursor: pointer;
 		display: flex;
 		flex: 1;
-		flex-grow: 1;
 		user-select: none;
 		align-items: center;
 		text-align: start;
@@ -203,22 +230,9 @@
 		contain-intrinsic-block-size: auto var(--np-item-container-height, 4.5rem);
 	}
 
-	.np-item:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
-
 	.np-item:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: -3px;
 		border-radius: var(--np-shape-corner-extra-small);
 	}
-	@media (prefers-reduced-motion: no-preference) {
-		.np-item:focus-visible {
-			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 
 	div.np-item {
 		cursor: unset;

package/dist/menu/Menu.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import '../internal/exit.css'
-	import { exitAnimation, motionOf } from '../animation.js'
-	import { reducedMotion } from '../media.js'
-	import type { Attachment } from 'svelte/attachments'
+	import '../internal/pop-in.css'
+	import { exitAnimation } from '../animation.js'
 	import { arrowKeyNav, rovingTabindex, typeahead } from '../keyboard-nav.js'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { MenuProps } from './types.js'
@@ -33,24 +32,6 @@
 
 	const controller = popoverController(() => element)
 
-	// Opens with a fade and a scale from the anchor, started just before the menu shows. Driven by
-	// script rather than @starting-style, which Safari does not apply again when a popover reopens.
-	const openAnimation: Attachment<HTMLElement> = (menu) => {
-		const onBeforeToggle = (event: Event) => {
-			if ((event as ToggleEvent).newState !== 'open' || reducedMotion.current) return
-			menu.animate(
-				[{ opacity: 0 }, { opacity: 1 }],
-				motionOf(menu, '--np-motion-expressive-fast-effects'),
-			)
-			menu.animate(
-				[{ scale: 0.8 }, { scale: 1 }],
-				motionOf(menu, '--np-motion-expressive-fast-spatial'),
-			)
-		}
-		menu.addEventListener('beforetoggle', onBeforeToggle)
-		return () => menu.removeEventListener('beforetoggle', onBeforeToggle)
-	}
-
 	export const show = () => controller.show()
 	export const close = () => controller.close()
 
@@ -101,7 +82,6 @@
 	{role}
 	bind:this={element}
 	{@attach exitAnimation}
-	{@attach openAnimation}
 	ontoggle={(event) => {
 		let { newState } = event
 		open = newState === 'open'
@@ -111,7 +91,7 @@
 		ontoggle?.(event)
 	}}
 	{popover}
-	class={['np-menu-container', !coverAnchor && 'np-menu-no-cover', attributes.class]}
+	class={['np-menu-container', 'np-pop-in', !coverAnchor && 'np-menu-no-cover', attributes.class]}
 	{style}
 	onkeydown={(event) => {
 		attributes.onkeydown?.(event)
@@ -162,7 +142,7 @@
 		border: none;
 		border-radius: var(--np-menu-container-shape, var(--np-shape-corner-extra-small));
 		padding: 0;
-		box-shadow: var(--np-elevation-2);
+		box-shadow: var(--np-menu-elevation, var(--np-elevation-2));
 		margin: var(--np-menu-margin, 2px);
 		scrollbar-color: var(--np-color-on-surface-variant) transparent;
 		scrollbar-width: thin;
@@ -191,7 +171,8 @@
 
 	@media (prefers-reduced-motion: no-preference) {
 		/* Closes with a fade and a slight shrink towards the anchor, on the default effects curve,
-		   which is gentler at the start than the fast one. It opens through openAnimation.
+		   which is gentler at the start than the fast one. It opens through np-pop-in, from its
+		   keyframes, which run again on every opening where @starting-style does not in Safari.
 		   NativeSelect's list closes the same way. */
 		.np-menu-container[popover] {
 			--_exit: var(--np-motion-expressive-default-effects);

package/dist/menu/Menu.svelte.d.ts

@@ -1,4 +1,5 @@
 import '../internal/exit.css';
+import '../internal/pop-in.css';
 import type { MenuProps } from './types.js';
 declare const Menu: import("svelte").Component<MenuProps, {
     show: () => void;

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -28,6 +28,7 @@
 	let isLink = $derived(attributes.href != null)
 	let classes = $derived([
 		'np-navigation-bar-item',
+		'np-focus-ring',
 		selected && 'np-navigation-bar-item-selected',
 		labelBehavior === 'selected' && 'np-navigation-bar-item-label-selected',
 		orientation === 'horizontal' && 'np-navigation-bar-item-horizontal',
@@ -115,7 +116,9 @@
 		z-index: 1;
 	}
 
-	.np-navigation-bar-item-icon::before {
+	/* The active indicator: behind the icon, or behind the whole item when it lies horizontal. */
+	.np-navigation-bar-item-icon::before,
+	.np-navigation-bar-item-horizontal::before {
 		content: '';
 		position: absolute;
 		inset: 0;
@@ -128,7 +131,8 @@
 		border-radius: inherit;
 		z-index: -1;
 	}
-	.np-navigation-bar-item-selected .np-navigation-bar-item-icon::before {
+	.np-navigation-bar-item-selected .np-navigation-bar-item-icon::before,
+	.np-navigation-bar-item-horizontal.np-navigation-bar-item-selected::before {
 		opacity: 1;
 		transform: scaleX(1);
 	}
@@ -171,23 +175,6 @@
 		align-self: center;
 		z-index: 0;
 	}
-	.np-navigation-bar-item-horizontal::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		opacity: 0;
-		transform: scaleX(0.32);
-		background-color: var(
-			--np-navigation-bar-item-active-indicator-color,
-			var(--np-color-secondary-container)
-		);
-		border-radius: inherit;
-		z-index: -1;
-	}
-	.np-navigation-bar-item-horizontal.np-navigation-bar-item-selected::before {
-		opacity: 1;
-		transform: scaleX(1);
-	}
 	.np-navigation-bar-item-horizontal .np-navigation-bar-item-icon {
 		width: 1.5rem;
 		height: 1.5rem;
@@ -227,16 +214,8 @@
 	}
 
 	.np-navigation-bar-item:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
 		border-radius: 1rem;
 	}
-	/* The focused state layer, on top of the ring. */
-	.np-navigation-bar-item:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-bar-item-icon::before {
@@ -247,8 +226,5 @@
 		.np-navigation-bar-item-label {
 			transition: color var(--np-motion-expressive-default-effects);
 		}
-		.np-navigation-bar-item:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
 	}
 </style>

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -43,6 +43,8 @@
 		href={attributes.href}
 		class={[
 			'np-navigation-drawer-item',
+			'np-focus-ring',
+			'np-focus-ring-inset',
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
@@ -57,6 +59,8 @@
 		bind:this={element}
 		class={[
 			'np-navigation-drawer-item',
+			'np-focus-ring',
+			'np-focus-ring-inset',
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
@@ -113,17 +117,6 @@
 		}
 	}
 
-	.np-navigation-drawer-item:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: -3px;
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		.np-navigation-drawer-item:focus-visible {
-			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 	.np-navigation-drawer-item-icon {
 		color: var(--np-color-on-surface-variant);
 		display: flex;