noph-ui 0.40.2 → 0.41.0

package/dist/button/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
@@ -285,18 +286,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		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/Button.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { ButtonProps } from './types.ts';
 declare const Button: import("svelte").Component<ButtonProps, {}, "element" | "selected">;
 type Button = ReturnType<typeof Button>;

package/dist/button/IconButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
@@ -290,18 +291,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		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/IconButton.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { IconButtonProps } from './types.ts';
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "element" | "selected">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/button/SegmentedButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { SegmentedButtonProps } from './types.js'
@@ -109,7 +110,7 @@
 		align-items: center;
 		border-inline-end: 1px solid var(--np-color-outline);
 		position: relative;
-		transition: all 0.15s linear;
+		transition: all var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button-icon-label {
 		display: inline-flex;
@@ -142,7 +143,7 @@
 		inset: 0;
 		z-index: -1;
 		opacity: 0;
-		transition: opacity 0.15s linear;
+		transition: opacity var(--np-motion-expressive-fast-effects);
 		background-color: var(--np-color-secondary-container);
 	}
 	.width-icon,
@@ -160,7 +161,7 @@
 		width: 0;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width 0.3s ease;
+		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.check-icon svg) {
 		display: block;
@@ -168,14 +169,14 @@
 	.check-icon-wrapper {
 		width: 0;
 		overflow: hidden;
-		transition: width 0.15s linear;
+		transition: width var(--np-motion-expressive-fast-effects);
 	}
 	.alternate-icon {
 		display: flex;
 		width: 1.5rem;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width 0.3s ease;
+		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.alternate-icon svg) {
 		display: block;
@@ -186,8 +187,8 @@
 		width: 2rem;
 		overflow: hidden;
 		transition:
-			width 0.15s linear,
-			opacity 0.15s linear;
+			width var(--np-motion-expressive-fast-effects),
+			opacity var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button:has(input:checked) :global(.alternate-icon-wrapper) {
 		width: 0;
@@ -212,20 +213,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/button/SegmentedButton.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { SegmentedButtonProps } from './types.ts';
 declare const SegmentedButton: import("svelte").Component<SegmentedButtonProps, {}, "element" | "group">;
 type SegmentedButton = ReturnType<typeof SegmentedButton>;

package/dist/card/Card.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { CardProps } from './types.js'
 
@@ -158,18 +159,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.np-card-disabled {
 		opacity: 0.38;

package/dist/card/Card.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { CardProps } from './types.ts';
 declare const Card: import("svelte").Component<CardProps, {}, "element">;
 type Card = ReturnType<typeof Card>;

package/dist/checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { CheckboxProps } from './types.js'
 
@@ -128,18 +129,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.np-outline,
 	.np-background,

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { CheckboxProps } from './types.ts';
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/chip/FilterChip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
@@ -237,18 +238,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-filter-chip-disabled .np-filter-chip-label {

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { FilterChipProps } from './types.ts';
 declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "selected" | "group">;
 type FilterChip = ReturnType<typeof FilterChip>;

package/dist/chip/InputChip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
@@ -149,18 +150,7 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-input-chip-disabled .np-input-chip-label {

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { InputChipProps } from './types.ts';
 declare const InputChip: import("svelte").Component<InputChipProps, {}, "element" | "selected" | "actionElement">;
 type InputChip = ReturnType<typeof InputChip>;

package/dist/dialog/Dialog.svelte

@@ -156,9 +156,9 @@
 
 	.np-animate[popover] {
 		transition:
-			opacity 0.25s ease,
-			display 0.25s allow-discrete,
-			overlay 0.25s allow-discrete;
+			opacity var(--np-motion-expressive-slow-effects),
+			display var(--np-motion-expressive-slow-effects) allow-discrete,
+			overlay var(--np-motion-expressive-slow-effects) allow-discrete;
 		opacity: 0;
 	}
 	.np-animate[popover]:popover-open {

package/dist/internal/focus-ring.css

@@ -0,0 +1,26 @@
+@keyframes focusAnimation {
+	0% {
+		outline-width: 3px;
+	}
+	50% {
+		outline-width: 6px;
+	}
+	100% {
+		outline-width: 3px;
+	}
+}
+
+@keyframes focusAnimationInset {
+	0% {
+		outline-offset: -3px;
+		outline-width: 3px;
+	}
+	50% {
+		outline-offset: -6px;
+		outline-width: 6px;
+	}
+	100% {
+		outline-offset: -3px;
+		outline-width: 3px;
+	}
+}

package/dist/list/Item.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { ItemProps } from './types.js'
 
@@ -150,21 +151,7 @@
 		outline-width: 3px;
 		outline-offset: -3px;
 		border-radius: var(--np-shape-corner-extra-small);
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	div.np-item {

package/dist/list/Item.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { ItemProps } from './types.ts';
 declare const Item: import("svelte").Component<ItemProps, {}, "">;
 type Item = ReturnType<typeof Item>;

package/dist/menu/Menu.svelte

@@ -29,6 +29,24 @@
 		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
+			if (menuEnd <= anchorStart) return 1
+			if (menuEnd === menuStart) return 0
+			const intersectionCenter =
+				(Math.max(anchorStart, menuStart) + Math.min(anchorEnd, menuEnd)) / 2
+			return (intersectionCenter - menuStart) / (menuEnd - menuStart)
+		}
+		const x = pivot(anchorRect.left, anchorRect.right, menuRect.left, menuRect.right)
+		const y = pivot(anchorRect.top, anchorRect.bottom, menuRect.top, menuRect.bottom)
+		return `${x * 100}% ${y * 100}%`
+	}
+
 	const refreshValues = () => {
 		if (element && anchor && open) {
 			const anchorRect = anchor.getBoundingClientRect()
@@ -40,6 +58,10 @@
 			const above = Math.max(anchorRect.top - margin, 0)
 			const overAnchor = coverAnchor && wanted > below && wanted > above && wanted <= room
 			element.style.maxHeight = `${Math.floor(overAnchor ? room : Math.max(below, above))}px`
+			element.style.transformOrigin = calculateTransformOrigin(
+				anchorRect,
+				element.getBoundingClientRect(),
+			)
 		}
 	}
 	$effect(refreshValues)
@@ -90,6 +112,7 @@
 		scrollbar-width: thin;
 		justify-self: var(--np-menu-justify-self, anchor-center);
 		position-area: var(--np-menu-position-area, bottom);
+		transform-origin: var(--np-menu-transform-origin, top center);
 		position-try-fallbacks:
 			flip-block,
 			flip-inline,
@@ -112,14 +135,19 @@
 
 	.np-menu-container:popover-open {
 		opacity: 1;
-		animation: fadeIn 0.2s linear;
+		scale: 1;
+		animation:
+			fadeIn var(--np-motion-expressive-fast-effects),
+			scaleIn var(--np-motion-expressive-fast-spatial);
 	}
 	@keyframes fadeIn {
-		0% {
+		from {
 			opacity: 0;
 		}
-		100% {
-			opacity: 1;
+	}
+	@keyframes scaleIn {
+		from {
+			scale: 0.8;
 		}
 	}
 </style>

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -110,13 +110,13 @@
 
 	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
-		transition: transform var(--np-motion-expressive-slow-effects);
+		transition: transform var(--np-motion-standard-slow-spatial);
 	}
 
 	.np-navigation-drawer-container[popover] {
 		transition:
-			overlay 0.3s allow-discrete,
-			display 0.3s allow-discrete;
+			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 {
@@ -139,7 +139,7 @@
 		position: fixed;
 		background-color: var(--np-color-scrim);
 		opacity: 0;
-		transition: opacity 0.25s ease;
+		transition: opacity var(--np-motion-expressive-slow-effects);
 	}
 	.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
 		opacity: 0.32;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationDrawerItemProps } from './types.js'
@@ -103,21 +104,7 @@
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-drawer-item:focus-visible {
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 	.np-navigation-drawer-item-icon {

package/dist/navigation-drawer/NavigationDrawerItem.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { NavigationDrawerItemProps } from './types.ts';
 declare const NavigationDrawerItem: import("svelte").Component<NavigationDrawerItemProps, {}, "">;
 type NavigationDrawerItem = ReturnType<typeof NavigationDrawerItem>;

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.js'
@@ -60,18 +61,7 @@
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-action:focus-visible {
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 	.np-navigation-action-icon {

package/dist/navigation-rail/NavigationRailItem.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { NavigationRailItemProps } from './types.ts';
 declare const NavigationRailItem: import("svelte").Component<NavigationRailItemProps, {}, "">;
 type NavigationRailItem = ReturnType<typeof NavigationRailItem>;

package/dist/progress/CircularProgress.svelte

@@ -298,6 +298,11 @@
 		animation-duration: 6000ms, calc(4 * 1333ms);
 	}
 
+	.four-color .spinner-track {
+		animation-name: cp-track-sweep, four-color-track;
+		animation-duration: 6000ms, calc(4 * 1333ms);
+	}
+
 	@media (forced-colors: active) {
 		.active-track {
 			stroke: CanvasText;
@@ -328,4 +333,25 @@
 			stroke: var(--np-color-primary);
 		}
 	}
+	@keyframes four-color-track {
+		0%,
+		15% {
+			stroke: var(--np-color-primary-container);
+		}
+		25%,
+		40% {
+			stroke: var(--np-color-primary);
+		}
+		50%,
+		65% {
+			stroke: var(--np-color-tertiary-container);
+		}
+		75%,
+		90% {
+			stroke: var(--np-color-tertiary);
+		}
+		100% {
+			stroke: var(--np-color-primary-container);
+		}
+	}
 </style>

package/dist/progress/LinearProgress.svelte

@@ -378,6 +378,10 @@
 		border-radius: var(--np-linear-progress-track-shape, var(--np-shape-corner-full));
 	}
 
+	.indeterminate.four-color .np-lp-track {
+		animation: four-color-track calc(1750ms * 4) linear infinite;
+	}
+
 	.np-lp-track.ahead {
 		left: min(calc(var(--np-lp-h1) + var(--np-linear-progress-track-gap, 0.25rem)), 100%);
 		right: 0;
@@ -572,6 +576,38 @@
 		}
 	}
 
+	@keyframes four-color-track {
+		0% {
+			background: var(--np-color-primary-container);
+		}
+
+		15% {
+			background: var(--np-color-primary-container);
+		}
+		25% {
+			background: var(--np-color-primary);
+		}
+		40% {
+			background: var(--np-color-primary);
+		}
+
+		50% {
+			background: var(--np-color-tertiary-container);
+		}
+		65% {
+			background: var(--np-color-tertiary-container);
+		}
+		75% {
+			background: var(--np-color-tertiary);
+		}
+		90% {
+			background: var(--np-color-tertiary);
+		}
+		100% {
+			background: var(--np-color-primary-container);
+		}
+	}
+
 	@media (forced-colors: active) {
 		.np-container {
 			outline: 1px solid CanvasText;

package/dist/radio/Radio.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { RadioProps } from './types.js'
 
@@ -127,17 +128,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: 2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/radio/Radio.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { RadioProps } from './types.ts';
 declare const Radio: import("svelte").Component<RadioProps, {}, "element" | "group">;
 type Radio = ReturnType<typeof Radio>;

package/dist/ripple/Ripple.svelte

@@ -339,7 +339,7 @@
 				transparent 100%
 			);
 			transform-origin: center center;
-			transition: opacity 375ms linear;
+			transition: opacity var(--np-motion-expressive-slow-effects);
 		}
 	}
 
@@ -351,6 +351,6 @@
 
 	.np-ripple-pressed::after {
 		opacity: var(--np-ripple-pressed-opacity, 0.1);
-		transition-duration: 105ms;
+		transition: opacity var(--np-motion-expressive-fast-effects);
 	}
 </style>

package/dist/select/NativeSelect.svelte

@@ -131,16 +131,21 @@
 		box-shadow: var(--np-elevation-2);
 		border: none;
 		opacity: 0;
+		scale: 0.8;
+		transform-origin: top center;
 		transition:
-			opacity var(--easing-fast),
+			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) {
 		opacity: 1;
+		scale: 1;
 		@starting-style {
 			opacity: 0;
+			scale: 0.8;
 		}
 	}
 

package/dist/select/Option.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { Snippet } from 'svelte'
 	import type { HTMLOptionAttributes } from 'svelte/elements'
@@ -58,22 +59,7 @@
 			outline-width: 3px;
 			outline-offset: -3px;
 			border-radius: var(--np-shape-corner-extra-small);
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 </style>

package/dist/select/Option.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { Snippet } from 'svelte';
 import type { HTMLOptionAttributes } from 'svelte/elements';
 interface OptionProps extends HTMLOptionAttributes {

package/dist/select/Select.svelte

@@ -806,15 +806,9 @@
 		opacity: 1;
 	}
 
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .arrow,
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .arrow {
-		color: var(--np-color-primary);
-	}
 	.icon .arrow {
 		display: flex;
-		transition:
-			color 75ms linear 75ms,
-			rotate 150ms cubic-bezier(0.2, 0, 0, 1);
+		transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1);
 	}
 	.field.menu-open .icon .arrow {
 		rotate: 180deg;

package/dist/switch/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { SwitchProps } from './types.js'
 
@@ -193,17 +194,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -2px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/switch/Switch.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { SwitchProps } from './types.ts';
 declare const Switch: import("svelte").Component<SwitchProps, {}, "element" | "selected" | "inputElement">;
 type Switch = ReturnType<typeof Switch>;

package/dist/tabs/Tab.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { tick } from 'svelte'
@@ -147,10 +148,11 @@
 		padding: 0 1rem;
 		color: var(--np-color-on-surface-variant);
 		height: 3rem;
-		transition: color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+		transition: color var(--np-motion-expressive-fast-effects);
 	}
 	.np-tab-content-active {
 		--_focus-bottom: 4px;
+		transition: color var(--np-motion-expressive-default-effects);
 	}
 	.np-tab-content-active.primary {
 		color: var(--np-color-primary);
@@ -226,20 +228,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/tabs/Tab.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { TabProps } from './types.ts';
 declare const Tab: import("svelte").Component<TabProps, {}, "element">;
 type Tab = ReturnType<typeof Tab>;

package/dist/tabs/Tabs.svelte

@@ -80,7 +80,7 @@
 			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-fast-spatial);
+			transition: var(--np-motion-expressive-default-spatial);
 		}
 	}
 </style>

package/dist/text-field/TextField.svelte

@@ -18,6 +18,8 @@
 		populated = false,
 		inputElement = $bindable(),
 		placeholder = ' ',
+		minLines = 1,
+		maxLines = 4,
 		children,
 		focused = $bindable(false),
 		clientWidth = $bindable(),
@@ -31,11 +33,13 @@
 
 <label
 	style={(variant === 'outlined'
-		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-inline-start:-2.25rem;--_focus-outline-width:3px;'
+		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-inline-start:-2.25rem;'
 		: !label?.length
 			? '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline);--top-space:1rem;--bottom-space:1rem; '
 			: '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline); ' +
-				(children ? '--top-space:2rem;--bottom-space:1rem;' : '')) + style}
+				(children ? '--top-space:2rem;--bottom-space:1rem;' : '')) +
+		`--_min-height:calc(${minLines} * 1lh);--_max-height:${`calc(${maxLines} * 1lh)`};` +
+		style}
 	class={['text-field', attributes.class]}
 	bind:this={element}
 	bind:clientWidth
@@ -43,7 +47,6 @@
 >
 	<div
 		class="field"
-		class:resizable={attributes.type === 'textarea'}
 		class:no-label={!label?.length}
 		class:with-start={start}
 		class:with-end={end}
@@ -109,8 +112,7 @@
 								bind:focused
 								bind:value
 								bind:this={inputElement}
-								class="input"
-								rows={attributes.rows || 2}></textarea>
+								class="input"></textarea>
 						{:else}
 							<div class="input-wrapper">
 								{#if suffixText}
@@ -272,7 +274,6 @@
 	}
 	.text-field {
 		display: inline-flex;
-		resize: both;
 		text-align: start;
 	}
 	:global(label) {
@@ -324,11 +325,6 @@
 		background: var(--np-color-on-surface);
 		opacity: 0.08;
 	}
-	.resizable .np-container > * {
-		top: var(--_focus-outline-width, 3px);
-		inset-inline-start: var(--_focus-outline-width, 0);
-	}
-
 	.content * {
 		all: unset;
 		color: currentColor;
@@ -418,6 +414,11 @@
 	.content textarea {
 		margin-top: var(--top-space, 1.5rem);
 		margin-bottom: var(--bottom-space, 0.5rem);
+		field-sizing: content;
+		min-inline-size: 20ch;
+		max-inline-size: 100%;
+		min-height: var(--_min-height, 1lh);
+		max-height: var(--_max-height, 4lh);
 	}
 
 	.content .input-wrapper .input,
@@ -627,10 +628,6 @@
 	.disabled .label:not(.np-hidden) {
 		opacity: 0.38;
 	}
-	.resizable:not(.disabled) .np-container {
-		resize: inherit;
-		overflow: hidden;
-	}
 	.disabled.no-label .content,
 	.disabled:has(input:-webkit-autofill) .content,
 	.disabled:has(input:not(:placeholder-shown)) .content,
@@ -638,15 +635,6 @@
 	.disabled.populated .content {
 		opacity: 0.38;
 	}
-	.field,
-	.container-overflow {
-		resize: inherit;
-	}
-	.resizable .np-container {
-		bottom: 3px;
-		inset-inline-end: var(--_focus-outline-width, 0);
-		clip-path: inset(3px 0 0 var(--_focus-outline-width));
-	}
 	.outline-start,
 	.outline-end {
 		border: inherit;

package/dist/text-field/types.d.ts

@@ -26,10 +26,14 @@ export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
 }
 export interface TextAreaFieldProps extends HTMLTextareaAttributes, FieldProps {
     type: 'textarea';
+    minLines?: number;
+    maxLines?: number;
 }
 export interface TextFieldProps extends HTMLAttributes<TextFieldElement>, Omit<HTMLInputAttributes, keyof HTMLAttributes<HTMLInputElement> | 'type' | 'value' | 'defaultValue' | 'defaultvalue'>, Omit<HTMLTextareaAttributes, keyof HTMLAttributes<HTMLTextAreaElement> | 'value' | 'defaultValue' | 'defaultvalue'>, FieldProps {
     type?: TextFieldType | 'textarea';
     value?: string | number | null;
     defaultValue?: string | number | null;
+    minLines?: number;
+    maxLines?: number;
 }
 export {};

package/dist/tooltip/Tooltip.svelte

@@ -141,15 +141,20 @@
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
-		animation: scaleIn var(--np-motion-expressive-fast-spatial);
+		scale: 1;
+		animation:
+			fadeIn var(--np-motion-expressive-fast-effects),
+			scaleIn var(--np-motion-expressive-fast-spatial);
 	}
 
-	@keyframes scaleIn {
+	@keyframes fadeIn {
 		from {
-			scale: 0;
+			opacity: 0;
 		}
-		to {
-			scale: 1;
+	}
+	@keyframes scaleIn {
+		from {
+			scale: 0.8;
 		}
 	}
 </style>

package/package.json

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