noph-ui 0.12.4 → 0.12.6

package/README.md

@@ -75,7 +75,7 @@ In progress (Breaking changes expected)
 - Navigation Drawer (Docs missing)
 - Navigation Rail (Badge is missing + Docs missing)
 - Tooltips (Positioning missing)
-- Select (iOS issues + Docs missing)
+- Select (Docs missing)
 
 Pending
 

package/dist/menu/Menu.svelte

@@ -45,23 +45,6 @@
 
 	$effect(() => {
 		if (anchor && element) {
-			element.addEventListener('toggle', (event) => {
-				const { newState, currentTarget } = event as ToggleEvent & {
-					currentTarget: EventTarget & HTMLDivElement
-				}
-				if (newState === 'open') {
-					const rect = currentTarget.getBoundingClientRect()
-					const viewportHeight = window.innerHeight
-
-					if (rect.bottom > viewportHeight) {
-						const maxHeight = viewportHeight - rect.top - 18
-						currentTarget.style.maxHeight = `${maxHeight}px`
-					}
-				}
-				if (newState === 'closed') {
-					currentTarget.style.maxHeight = '80dvh'
-				}
-			})
 			if (!('anchorName' in document.documentElement.style)) {
 				anchor.addEventListener('click', () => {
 					refreshValues()
@@ -83,12 +66,27 @@
 </script>
 
 <svelte:window bind:innerHeight onresize={refreshValues} />
-
 <div
 	{...attributes}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
+	ontoggle={(event) => {
+		const { newState, currentTarget } = event
+		if (newState === 'open') {
+			const rect = currentTarget.getBoundingClientRect()
+			const viewportHeight = innerHeight
+
+			if (rect.bottom > viewportHeight && rect.top < viewportHeight / 2) {
+				const maxHeight = viewportHeight - rect.top - 18
+				currentTarget.style.maxHeight = `${maxHeight}px`
+			}
+		}
+		if (newState === 'closed') {
+			currentTarget.style.maxHeight = '80dvh'
+		}
+		attributes.ontoggle?.(event)
+	}}
 	popover="auto"
 	class={['np-menu', attributes.class]}
 	role="menu"
@@ -106,6 +104,7 @@
 		padding: 0.5rem 0;
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
+		inset: auto;
 		max-height: 80dvh;
 		scrollbar-color: var(--np-color-on-surface-variant) transparent;
 		scrollbar-width: thin;
@@ -115,7 +114,7 @@
 		opacity: 0;
 		justify-self: var(--np-menu-justify-self, anchor-center);
 		position-area: var(--np-menu-position-area, bottom center);
-		position-try-fallbacks: --np-menu-position-fallback;
+		position-try: normal flip-block;
 	}
 
 	.np-menu:popover-open {
@@ -124,8 +123,4 @@
 			opacity: 0;
 		}
 	}
-	@position-try --np-menu-position-fallback {
-		position-area: var(--np-menu-position-area-fallback, top center);
-		position-area: var(--np-menu-position-area-fallback, top center);
-	}
 </style>

package/dist/select/Select.svelte

@@ -34,6 +34,7 @@
 	let selectElement: HTMLSelectElement | undefined = $state()
 	let menuElement: HTMLDivElement | undefined = $state()
 	let field: HTMLDivElement | undefined = $state()
+	let clientWidth = $state(0)
 	let menuId = $state(`--select-${crypto.randomUUID()}`)
 	let menuOpen = $state(false)
 	let selectedLabel = $derived.by<string>(() => {
@@ -88,11 +89,11 @@
 		aria-label={attributes['aria-label'] || label}
 		data-testid={attributes['data-testid']}
 		bind:this={field}
+		bind:clientWidth
 		autofocus={disabled ? false : autofocus}
 		onclick={(event) => {
 			event.preventDefault()
 			menuElement?.showPopover()
-			menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
 		}}
 		onkeydown={(event) => {
 			if (event.key === 'Tab') {
@@ -101,7 +102,6 @@
 				event.preventDefault()
 				if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
 					menuElement?.showPopover()
-					menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
 					;(menuElement?.firstElementChild as HTMLElement)?.focus()
 				}
 			}
@@ -161,7 +161,8 @@
 									errorTextRaw = currentTarget.validationMessage
 								}
 								if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-									currentTarget.focus()
+									field?.focus()
+									menuElement?.showPopover()
 								}
 							}}
 							bind:value
@@ -198,7 +199,7 @@
 </div>
 
 <Menu
-	style="position-anchor:{menuId}"
+	style="position-anchor:{menuId};min-width:{clientWidth}px;"
 	popover="manual"
 	--np-menu-justify-self="none"
 	--np-menu-position-area-fallback="top span-right"
@@ -250,8 +251,9 @@
 				}
 			}}
 			variant="button"
-			selected={value === option.value}>{option.label}</Item
-		>
+			selected={value === option.value}
+			>{option.label}
+		</Item>
 	{/each}
 </Menu>
 

package/dist/tooltip/Tooltip.svelte

@@ -92,6 +92,7 @@
 	.np-tooltip[popover] {
 		width: max-content;
 		margin: 4px 0;
+		inset: auto;
 		background: var(--np-color-inverse-surface);
 		color: var(--np-color-inverse-on-surface);
 		padding: 0.25rem 0.5rem;
@@ -106,15 +107,12 @@
 			opacity 0.3s ease;
 		justify-self: var(--np-tooltip-justify-self, anchor-center);
 		position-area: var(--np-tooltip-position-area, top);
-		position-try-fallbacks: --np-tooltip-position-fallback;
+		position-try: normal flip-block;
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
 		animation: scaleIn 0.3s ease;
 	}
-	@position-try --np-tooltip-position-fallback {
-		position-area: var(--np-tooltip-position-area-fallback, bottom);
-	}
 
 	@keyframes scaleIn {
 		from {

package/package.json

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