noph-ui 0.41.0 → 0.42.0

package/dist/button/Button.svelte

@@ -26,6 +26,8 @@
 
 	const uid = $props.id()
 
+	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+
 	let pressed = $state(false)
 	let pressedTimeout: ReturnType<typeof setTimeout>
 
@@ -79,7 +81,8 @@
 			}
 			attributes.onclick?.(event)
 		}}
-		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
 		aria-label={title || attributes['aria-label']}
 		bind:this={element}
 		class={[
@@ -99,7 +102,8 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
 		aria-label={title || attributes['aria-label']}
 		disabled={disabled || loading}
 		aria-pressed={toggle ? selected : undefined}
@@ -130,8 +134,8 @@
 	</button>
 {/if}
 
-{#if title && !disabled && !loading}
-	<Tooltip id={uid}>{title}</Tooltip>
+{#if tooltipId}
+	<Tooltip id={tooltipId}>{title}</Tooltip>
 {/if}
 
 <style>
@@ -170,9 +174,16 @@
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 		transition:
 			background-color var(--np-motion-expressive-default-effects),
-			border-radius var(--np-motion-expressive-default-effects),
 			box-shadow var(--np-motion-expressive-default-effects);
 	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-button {
+			transition:
+				background-color var(--np-motion-expressive-default-effects),
+				border-radius var(--np-motion-expressive-default-effects),
+				box-shadow var(--np-motion-expressive-default-effects);
+		}
+	}
 	.xs {
 		font-size: 0.875rem;
 		height: 2rem;
@@ -286,7 +297,11 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.enabled:focus-visible {
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 	.text {
 		--np-ripple-hover-color: var(--np-text-button-label-text-color, var(--np-color-primary));

package/dist/button/IconButton.svelte

@@ -25,6 +25,7 @@
 	}: IconButtonProps = $props()
 
 	const uid = $props.id()
+	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
 	let pressed = $state(false)
 	let pressedTimeout: ReturnType<typeof setTimeout>
@@ -70,7 +71,8 @@
 			}
 			attributes.onclick?.(event)
 		}}
-		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
 		aria-label={title || attributes['aria-label']}
 		bind:this={element}
 		class={[
@@ -91,7 +93,8 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
 		aria-label={title || attributes['aria-label']}
 		aria-pressed={toggle ? selected : undefined}
 		aria-busy={loading}
@@ -122,8 +125,8 @@
 	</button>
 {/if}
 
-{#if title && !disabled && !loading}
-	<Tooltip id={uid}>{title}</Tooltip>
+{#if tooltipId}
+	<Tooltip id={tooltipId}>{title}</Tooltip>
 {/if}
 
 <style>
@@ -142,9 +145,14 @@
 		align-items: center;
 		justify-content: center;
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-		transition:
-			background-color var(--np-motion-expressive-default-effects),
-			border-radius var(--np-motion-expressive-default-effects);
+		transition: background-color var(--np-motion-expressive-default-effects);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-icon-button {
+			transition:
+				background-color var(--np-motion-expressive-default-effects),
+				border-radius var(--np-motion-expressive-default-effects);
+		}
 	}
 
 	:global(.np-icon-button svg) {
@@ -291,7 +299,11 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.enabled:focus-visible {
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 	.text {
 		--np-ripple-hover-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));

package/dist/button/SegmentedButton.svelte

@@ -110,7 +110,7 @@
 		align-items: center;
 		border-inline-end: 1px solid var(--np-color-outline);
 		position: relative;
-		transition: all var(--np-motion-expressive-fast-effects);
+		transition: color var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button-icon-label {
 		display: inline-flex;
@@ -161,7 +161,6 @@
 		width: 0;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.check-icon svg) {
 		display: block;
@@ -169,14 +168,12 @@
 	.check-icon-wrapper {
 		width: 0;
 		overflow: hidden;
-		transition: width var(--np-motion-expressive-fast-effects);
 	}
 	.alternate-icon {
 		display: flex;
 		width: 1.5rem;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.alternate-icon svg) {
 		display: block;
@@ -186,9 +183,7 @@
 	.alternate-icon-wrapper {
 		width: 2rem;
 		overflow: hidden;
-		transition:
-			width var(--np-motion-expressive-fast-effects),
-			opacity var(--np-motion-expressive-fast-effects);
+		transition: opacity var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button:has(input:checked) :global(.alternate-icon-wrapper) {
 		width: 0;
@@ -213,6 +208,28 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-segmented-button {
+			transition: all var(--np-motion-expressive-fast-effects);
+		}
+		.check-icon {
+			transition: width var(--np-motion-expressive-slow-effects);
+		}
+		.check-icon-wrapper {
+			transition: width var(--np-motion-expressive-fast-effects);
+		}
+		.alternate-icon {
+			transition: width var(--np-motion-expressive-slow-effects);
+		}
+		.alternate-icon-wrapper {
+			transition:
+				width var(--np-motion-expressive-fast-effects),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+		.np-segmented-button:has(input:focus-visible) {
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 </style>

package/dist/card/Card.svelte

@@ -159,7 +159,11 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-card-container:focus-visible {
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 	.np-card-disabled {
 		opacity: 0.38;

package/dist/chip/FilterChip.svelte

@@ -133,7 +133,6 @@
 		z-index: 1;
 		padding-inline: 1rem;
 		overflow: hidden;
-		transition: padding var(--np-motion-expressive-default-effects);
 	}
 	.np-chip-icon-checked {
 		display: flex;
@@ -141,17 +140,11 @@
 		min-width: 0;
 		margin-inline-end: -0.5rem;
 		overflow: hidden;
-		transition:
-			width var(--np-motion-expressive-default-effects),
-			margin var(--np-motion-expressive-default-effects);
 	}
 	.np-filter-chip:has(input:checked) .np-chip-icon-checked {
 		width: 18px;
 		margin-inline-end: 0;
 	}
-	.np-filter-chip-icon .np-chip-icon-checked {
-		transition: none;
-	}
 	.np-filter-chip:has(input:checked) .np-chip-icon {
 		display: none;
 	}
@@ -238,7 +231,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-filter-chip-disabled .np-filter-chip-label {
@@ -259,4 +251,21 @@
 		outline-color: transparent;
 		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-filter-chip-label {
+			transition: padding var(--np-motion-expressive-default-effects);
+		}
+		.np-chip-icon-checked {
+			transition:
+				width var(--np-motion-expressive-default-effects),
+				margin var(--np-motion-expressive-default-effects);
+		}
+		.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

@@ -150,7 +150,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-input-chip-disabled .np-input-chip-label {
@@ -166,4 +165,10 @@
 		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/internal/interest.css

@@ -0,0 +1,4 @@
+[interestfor][aria-describedby] {
+	interest-delay-start: 0s;
+	interest-delay-end: 500ms;
+}

package/dist/list/Item.svelte

@@ -151,7 +151,11 @@
 		outline-width: 3px;
 		outline-offset: -3px;
 		border-radius: var(--np-shape-corner-extra-small);
-		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-item:focus-visible {
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 
 	div.np-item {

package/dist/menu/Menu.svelte

@@ -29,10 +29,6 @@
 		element?.hidePopover()
 	}
 
-	// CSS anchor positioning has no way to read which position-try fallback won, so the
-	// scale pivot can't be expressed declaratively (see open spec request for @position-try
-	// to set transform-origin: https://github.com/w3c/csswg-drafts/issues/11666). Until that
-	// lands, mirror Compose's calculateTransformOrigin (Menu.kt) in JS instead.
 	const calculateTransformOrigin = (anchorRect: DOMRect, menuRect: DOMRect) => {
 		const pivot = (anchorStart: number, anchorEnd: number, menuStart: number, menuEnd: number) => {
 			if (menuStart >= anchorEnd) return 0
@@ -136,9 +132,13 @@
 	.np-menu-container:popover-open {
 		opacity: 1;
 		scale: 1;
-		animation:
-			fadeIn var(--np-motion-expressive-fast-effects),
-			scaleIn var(--np-motion-expressive-fast-spatial);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-menu-container:popover-open {
+			animation:
+				fadeIn var(--np-motion-expressive-fast-effects),
+				scaleIn var(--np-motion-expressive-fast-spatial);
+		}
 	}
 	@keyframes fadeIn {
 		from {

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -110,19 +110,27 @@
 
 	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
-		transition: transform var(--np-motion-standard-slow-spatial);
-	}
-
-	.np-navigation-drawer-container[popover] {
-		transition:
-			overlay var(--np-motion-standard-slow-spatial) allow-discrete,
-			display var(--np-motion-standard-slow-spatial) allow-discrete;
 	}
 
 	.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
 		transform: translateX(0);
-		@starting-style {
-			transform: var(--np-navigation-drawer-start, translateX(-100%));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-container[popover] .np-navigation-wrapper {
+			transition: transform var(--np-motion-standard-slow-spatial);
+		}
+
+		.np-navigation-drawer-container[popover] {
+			transition:
+				overlay var(--np-motion-standard-slow-spatial) allow-discrete,
+				display var(--np-motion-standard-slow-spatial) allow-discrete;
+		}
+
+		.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
+			@starting-style {
+				transform: var(--np-navigation-drawer-start, translateX(-100%));
+			}
 		}
 	}
 	.np-navigation-drawer {

package/dist/ripple/Ripple.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { on } from 'svelte/events'
+	import { MediaQuery } from 'svelte/reactivity'
 	import type { RippleProps } from './types.js'
 
 	let {
@@ -22,6 +23,8 @@
 	const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)'
 	const TOUCH_DELAY_MS = 150
 
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
+
 	let rippleSize = $state('')
 	let rippleScale = $state('')
 	let initialSize = $state(0)
@@ -128,7 +131,7 @@
 			},
 			{
 				pseudoElement: PRESS_PSEUDO,
-				duration: PRESS_GROW_MS,
+				duration: reducedMotion.current ? 0 : PRESS_GROW_MS,
 				easing: EASING_STANDARD,
 				fill: ANIMATION_FILL,
 			},

package/dist/select/NativeSelect.svelte

@@ -104,6 +104,9 @@
 		position: relative;
 		font-size: 1rem;
 		display: inline-block;
+		box-sizing: border-box;
+		min-width: var(--np-select-min-width, 210px);
+		max-width: var(--np-select-max-width, 100%);
 		color: var(--np-color-on-surface-variant);
 	}
 
@@ -135,7 +138,6 @@
 		transform-origin: top center;
 		transition:
 			opacity var(--np-motion-expressive-fast-effects),
-			scale var(--np-motion-expressive-fast-spatial),
 			display 150ms allow-discrete,
 			overlay 150ms allow-discrete;
 	}
@@ -145,7 +147,6 @@
 		scale: 1;
 		@starting-style {
 			opacity: 0;
-			scale: 0.8;
 		}
 	}
 
@@ -181,7 +182,8 @@
 
 	.np-select-outline-start,
 	.np-select-outline-notch,
-	.np-select-outline-end {
+	.np-select-outline-end,
+	.np-select-filled {
 		transition:
 			border-color var(--easing-fast),
 			border-width var(--easing-fast);
@@ -210,7 +212,6 @@
 		pointer-events: none;
 		inset-inline-end: 0.75rem;
 		inset-block-start: 1rem;
-		transition: rotate var(--easing-fast);
 	}
 
 	.np-select-container:has(select:open) .arrow {
@@ -258,9 +259,6 @@
 		border-start-start-radius: var(--np-shape-corner-extra-small);
 		border-start-end-radius: var(--np-shape-corner-extra-small);
 		border-block-end: 1px solid var(--np-color-on-surface-variant);
-		transition:
-			border-color var(--easing-fast),
-			border-width var(--easing-fast);
 	}
 
 	.np-select-container:focus-within .np-select-filled {
@@ -306,20 +304,10 @@
 		transform: translateY(0.5rem);
 	}
 
-	.animate-label label {
-		transition-property: font-size;
-		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: 150ms;
-	}
-
 	.np-select-container:focus-within label {
 		color: var(--np-color-primary);
 	}
 
-	.animate-label:not(.is-empty) .np-select-outline label {
-		animation: slideUpOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-	}
-
 	@keyframes slideUpOutline {
 		from {
 			transform: translateY(1rem);
@@ -329,10 +317,6 @@
 		}
 	}
 
-	.animate-label:not(.is-empty) .np-select-filled label {
-		animation: slideUpFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-	}
-
 	@keyframes slideUpFilled {
 		from {
 			transform: translateY(1.25rem);
@@ -349,10 +333,6 @@
 		position: absolute;
 	}
 
-	.is-empty.animate-label .np-select-outline label {
-		animation: slideDownOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-	}
-
 	@keyframes slideDownOutline {
 		from {
 			transform: translateY(-1.5rem);
@@ -367,10 +347,6 @@
 		transform: translateY(1.25rem);
 	}
 
-	.is-empty.animate-label .np-select-filled label {
-		animation: slideDownFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-	}
-
 	@keyframes slideDownFilled {
 		from {
 			transform: translateY(0.5rem);
@@ -433,4 +409,47 @@
 	.disabled .np-select-outline {
 		border-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		::picker(select) {
+			transition:
+				opacity var(--np-motion-expressive-fast-effects),
+				scale var(--np-motion-expressive-fast-spatial),
+				display 150ms allow-discrete,
+				overlay 150ms allow-discrete;
+		}
+
+		select:open::picker(select) {
+			@starting-style {
+				opacity: 0;
+				scale: 0.8;
+			}
+		}
+
+		.arrow {
+			transition: rotate var(--easing-fast);
+		}
+
+		.animate-label label {
+			transition-property: font-size;
+			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+			transition-duration: 150ms;
+		}
+
+		.animate-label:not(.is-empty) .np-select-outline label {
+			animation: slideUpOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+		}
+
+		.animate-label:not(.is-empty) .np-select-filled label {
+			animation: slideUpFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+		}
+
+		.is-empty.animate-label .np-select-outline label {
+			animation: slideDownOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+		}
+
+		.is-empty.animate-label .np-select-filled label {
+			animation: slideDownFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+		}
+	}
 </style>

package/dist/select/Option.svelte

@@ -59,7 +59,10 @@
 			outline-width: 3px;
 			outline-offset: -3px;
 			border-radius: var(--np-shape-corner-extra-small);
-			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+
+			@media (prefers-reduced-motion: no-preference) {
+				animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+			}
 		}
 	}
 </style>

package/dist/select/Select.svelte

@@ -808,7 +808,6 @@
 
 	.icon .arrow {
 		display: flex;
-		transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1);
 	}
 	.field.menu-open .icon .arrow {
 		rotate: 180deg;
@@ -949,9 +948,7 @@
 		inset-inline-start: var(--floating-label-left, 0);
 	}
 	.label {
-		transition-property: all;
-		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: 150ms;
+		transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 		box-sizing: border-box;
 		color: var(--np-color-on-surface-variant);
 		overflow: hidden;
@@ -1138,4 +1135,16 @@
 	.disabled .outline-notch {
 		opacity: 0.12;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.icon .arrow {
+			transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1);
+		}
+
+		.label {
+			transition-property: all;
+			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+			transition-duration: 150ms;
+		}
+	}
 </style>

package/dist/snackbar/Snackbar.svelte

@@ -138,7 +138,12 @@
 
 	.np-snackbar:popover-open {
 		opacity: 1;
-		animation: slideIn var(--np-motion-expressive-default-spatial);
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-snackbar:popover-open {
+			animation: slideIn var(--np-motion-expressive-default-spatial);
+		}
 	}
 
 	@keyframes slideIn {

package/dist/tabs/Tab.svelte

@@ -216,7 +216,6 @@
 		inset-inline: 0;
 		bottom: var(--_focus-bottom, 0);
 		border-radius: var(--np-shape-corner-medium);
-		transition: height 0.3s ease;
 		pointer-events: none;
 	}
 	.np-tab:focus-visible {
@@ -228,6 +227,15 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.focus-area {
+			transition: height 0.3s ease;
+		}
+
+		.np-tab:focus-visible .focus-area {
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+		}
 	}
 </style>

package/dist/tabs/Tabs.svelte

@@ -80,7 +80,10 @@
 			border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 			border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 			position-anchor: --np-tab-indicator;
-			transition: var(--np-motion-expressive-default-spatial);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: var(--np-motion-expressive-default-spatial);
+			}
 		}
 	}
 </style>

package/dist/text-field/TextField.svelte

@@ -588,7 +588,7 @@
 		inset-inline-start: var(--floating-label-inline-start, 0);
 	}
 	.label {
-		transition: all var(--np-motion-expressive-fast-effects);
+		transition: color var(--np-motion-expressive-fast-effects);
 		box-sizing: border-box;
 		color: var(--np-color-on-surface-variant);
 		overflow: hidden;
@@ -793,4 +793,10 @@
 	.disabled .outline-notch {
 		opacity: 0.12;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.label {
+			transition: all var(--np-motion-expressive-fast-effects);
+		}
+	}
 </style>

package/dist/tooltip/RichTooltip.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { RichTooltipProps } from './types.js'
+
+	let {
+		children,
+		subhead,
+		actions,
+		open = $bindable(),
+		element = $bindable(),
+		id,
+		ontoggle,
+		...attributes
+	}: RichTooltipProps = $props()
+
+	const findControl = () =>
+		id ? (document.querySelector<HTMLElement>(`[popovertarget="${id}"]`) ?? undefined) : undefined
+
+	export const showPopover = () => {
+		if (!element || element.matches(':popover-open')) return
+		const source = findControl()
+		element.showPopover(source ? { source } : undefined)
+	}
+
+	export const hidePopover = () => {
+		element?.hidePopover()
+	}
+
+	$effect(() => {
+		if (!element) return
+		if (open === true) showPopover()
+		else if (open === false) hidePopover()
+	})
+</script>
+
+<div
+	{...attributes}
+	{id}
+	class={[
+		'np-rich-tooltip',
+		subhead && 'np-rich-tooltip-with-subhead',
+		actions && 'np-rich-tooltip-with-actions',
+		attributes.class,
+	]}
+	role="tooltip"
+	popover="auto"
+	bind:this={element}
+	ontoggle={(event) => {
+		let { newState } = event
+		open = newState === 'open'
+		ontoggle?.(event)
+	}}
+>
+	{#if subhead}
+		<div class="np-rich-tooltip-subhead">{subhead}</div>
+	{/if}
+	{#if children}
+		<div class="np-rich-tooltip-text">{@render children()}</div>
+	{/if}
+	{#if actions}
+		<div class="np-rich-tooltip-actions">{@render actions()}</div>
+	{/if}
+</div>
+
+<style>
+	.np-rich-tooltip[popover] {
+		box-sizing: border-box;
+		width: max-content;
+		max-width: 20rem;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		margin: 4px 0;
+		padding: 0.25rem 1rem;
+		border: none;
+		border-radius: var(--np-shape-corner-medium);
+		background: var(--np-color-surface-container);
+		color: var(--np-color-on-surface-variant);
+		box-shadow: var(--np-elevation-2);
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		justify-self: var(--np-rich-tooltip-justify-self, anchor-center);
+		position-area: var(--np-rich-tooltip-position-area, bottom);
+		position-try-fallbacks: flip-block;
+	}
+	.np-rich-tooltip-with-subhead[popover] {
+		padding-block: 0.75rem 1rem;
+	}
+	.np-rich-tooltip-with-actions[popover] {
+		padding-bottom: 0.5rem;
+	}
+	.np-rich-tooltip-subhead {
+		margin-bottom: 0.25rem;
+		font-weight: 500;
+	}
+
+	.np-rich-tooltip-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.25rem;
+		margin-top: 1rem;
+		margin-inline-start: calc(-1 * var(--np-rich-tooltip-action-inset, 1rem));
+		padding-inline-end: var(--np-rich-tooltip-action-inset, 1rem);
+	}
+	.np-rich-tooltip:popover-open {
+		opacity: 1;
+		scale: 1;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-rich-tooltip:popover-open {
+			animation:
+				fadeIn var(--np-motion-expressive-fast-effects),
+				scaleIn var(--np-motion-expressive-fast-spatial);
+		}
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+	}
+	@keyframes scaleIn {
+		from {
+			scale: 0.8;
+		}
+	}
+</style>

package/dist/tooltip/RichTooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RichTooltipProps } from './types.ts';
+declare const RichTooltip: import("svelte").Component<RichTooltipProps, {
+    showPopover: () => void;
+    hidePopover: () => void;
+}, "element" | "open">;
+type RichTooltip = ReturnType<typeof RichTooltip>;
+export default RichTooltip;

package/dist/tooltip/Tooltip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/interest.css'
 	import { on } from 'svelte/events'
 	import { MediaQuery } from 'svelte/reactivity'
 	import type { TooltipProps } from './types.js'
@@ -14,16 +15,33 @@
 
 	let isTouch = new MediaQuery('(hover: none) and (pointer: coarse)', false)
 
-	let attachAnchor = (el: HTMLDivElement) => {
-		const anchor =
-			(document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
+	const isInterestInvoker = (anchor: Element) =>
+		'interestForElement' in anchor &&
+		(!(anchor instanceof HTMLAnchorElement || anchor instanceof HTMLAreaElement) ||
+			anchor.hasAttribute('href'))
+
+	let native = $state(false)
+
+	const attachAnchor = (el: HTMLDivElement) => {
+		if (!id) return
+		const anchor = document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`)
 		if (!anchor) return
+		if (isInterestInvoker(anchor)) {
+			native = true
+			const wired = anchor.getAttribute('interestfor') === id
+			if (!wired) anchor.setAttribute('interestfor', id)
+			return () => {
+				native = false
+				if (!wired) anchor.removeAttribute('interestfor')
+			}
+		}
 		const anchorName = anchor.style.getPropertyValue('anchor-name')
 		const generatedId = anchorName || `--${uid}`
 		el.style.setProperty('position-anchor', generatedId)
 		if (!anchorName) {
 			anchor.style.setProperty('anchor-name', generatedId)
 		}
+		if (isTouch.current) return
 		const mouseEnter = on(anchor, 'mouseenter', onAnchorEnter)
 		const mouseLeave = on(anchor, 'mouseleave', onAnchorLeave)
 		const focus = on(anchor, 'focus', onAnchorFocus)
@@ -93,6 +111,7 @@
 	}
 
 	$effect(() => {
+		if (native) return
 		const off = on(document, 'keydown', onEscape)
 		return () => {
 			off()
@@ -101,25 +120,23 @@
 	})
 </script>
 
-{#if !isTouch.current}
-	<div
-		{...attributes}
-		{id}
-		{@attach attachAnchor}
-		class={['np-tooltip', attributes.class]}
-		role="tooltip"
-		popover="hint"
-		bind:this={element}
-		onmouseenter={onTooltipEnter}
-		onmouseleave={onTooltipLeave}
-		ontoggle={(event) => {
-			let { newState } = event
-			open = newState === 'open'
-		}}
-	>
-		{#if children}{@render children()}{/if}
-	</div>
-{/if}
+<div
+	{...attributes}
+	{id}
+	{@attach attachAnchor}
+	class={['np-tooltip', attributes.class]}
+	role="tooltip"
+	popover="hint"
+	bind:this={element}
+	onmouseenter={native ? undefined : onTooltipEnter}
+	onmouseleave={native ? undefined : onTooltipLeave}
+	ontoggle={(event) => {
+		let { newState } = event
+		open = newState === 'open'
+	}}
+>
+	{#if children}{@render children()}{/if}
+</div>
 
 <style>
 	.np-tooltip[popover] {
@@ -142,9 +159,13 @@
 	.np-tooltip:popover-open {
 		opacity: 1;
 		scale: 1;
-		animation:
-			fadeIn var(--np-motion-expressive-fast-effects),
-			scaleIn var(--np-motion-expressive-fast-spatial);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-tooltip:popover-open {
+			animation:
+				fadeIn var(--np-motion-expressive-fast-effects),
+				scaleIn var(--np-motion-expressive-fast-spatial);
+		}
 	}
 
 	@keyframes fadeIn {

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/interest.css';
 import type { TooltipProps } from './types.ts';
 declare const Tooltip: import("svelte").Component<TooltipProps, {}, "element" | "open">;
 type Tooltip = ReturnType<typeof Tooltip>;

package/dist/tooltip/index.d.ts

@@ -1 +1,2 @@
+export { default as RichTooltip } from './RichTooltip.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/tooltip/index.js

@@ -1 +1,2 @@
+export { default as RichTooltip } from './RichTooltip.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/tooltip/types.d.ts

@@ -1,5 +1,20 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+declare module 'svelte/elements' {
+    interface HTMLAnchorAttributes {
+        interestfor?: string | undefined | null;
+    }
+    interface HTMLButtonAttributes {
+        interestfor?: string | undefined | null;
+    }
+}
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     element?: HTMLDivElement;
     open?: boolean;
 }
+export interface RichTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'popover'> {
+    subhead?: string;
+    actions?: Snippet;
+    element?: HTMLDivElement;
+    open?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {