noph-ui 0.40.3 → 0.41.0

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 var(--np-motion-expressive-default-effects);
+		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/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/tabs/Tab.svelte

@@ -148,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);

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.3",
+  "version": "0.41.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {