noph-ui 0.12.8 → 0.12.10

package/README.md

@@ -64,6 +64,7 @@ Beta (No breaking changes expected)
 - Radio
 - Ripple
 - Segmented buttons
+- Select
 - Snackbar
 - Text fields
 
@@ -75,7 +76,6 @@ In progress (Breaking changes expected)
 - Navigation Drawer (Docs missing)
 - Navigation Rail (Badge is missing + Docs missing)
 - Tooltips (Positioning missing)
-- Select (Docs missing)
 
 Pending
 

package/dist/button/Button.svelte

@@ -15,6 +15,7 @@
 		disabled = false,
 		loading = false,
 		keepTooltipOnClick,
+		loadingAriaLabel,
 		...attributes
 	}: ButtonProps = $props()
 
@@ -34,7 +35,7 @@
 	{/if}
 	{#if loading}
 		<div class="circular-progress">
-			<CircularProgress indeterminate />
+			<CircularProgress aria-label={loadingAriaLabel} indeterminate />
 		</div>
 	{/if}
 	<div class="button-icon">

package/dist/button/types.d.ts

@@ -7,6 +7,7 @@ interface ButtonButtonProps extends HTMLButtonAttributes {
     element?: HTMLElement;
     disabled?: boolean;
     loading?: boolean;
+    loadingAriaLabel?: string;
     keepTooltipOnClick?: boolean;
 }
 interface ButtonAnchorProps extends HTMLAnchorAttributes {
@@ -17,6 +18,7 @@ interface ButtonAnchorProps extends HTMLAnchorAttributes {
     keepTooltipOnClick?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    loadingAriaLabel?: string;
 }
 interface IconButtonButtonProps extends HTMLButtonAttributes {
     variant?: 'text' | 'filled' | 'outlined' | 'tonal';

package/dist/menu/Menu.svelte

@@ -13,6 +13,7 @@
 	let clientWidth = $state(0)
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
+	let menuOpen = $state(false)
 
 	showPopover = () => {
 		element?.showPopover()
@@ -23,7 +24,7 @@
 	}
 
 	const refreshValues = () => {
-		if (element && anchor) {
+		if (element && anchor && menuOpen) {
 			const anchorRect = anchor.getBoundingClientRect()
 			let maxHeight: number
 			if (innerHeight - anchorRect.bottom > anchorRect.top) {
@@ -33,9 +34,9 @@
 			}
 			element.style.maxHeight =
 				maxHeight > innerHeight - anchorRect.height
-					? `${innerHeight - anchorRect.height - 20}px`
-					: `${maxHeight - 20}px`
-			if (!('anchorName' in document.documentElement.style)) {
+					? `${innerHeight - anchorRect.height - 4}px`
+					: `${maxHeight - 4}px`
+			if (!('positionArea' in document.documentElement.style)) {
 				const docClientWidth = document.documentElement.clientWidth
 				if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {
 					element.style.top = `${anchorRect.top - clientHeight - 2}px`
@@ -86,9 +87,6 @@
 				},
 				{ passive: true },
 			)
-			anchor.addEventListener('click', () => {
-				refreshValues()
-			})
 			if (
 				'anchorName' in document.documentElement.style &&
 				!anchor.style.getPropertyValue('anchor-name')
@@ -103,41 +101,54 @@
 
 <svelte:window bind:innerHeight onresize={refreshValues} />
 <div
+	role="menu"
 	{...attributes}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
+	ontoggle={(event) => {
+		let { newState } = event
+		menuOpen = newState === 'open'
+		attributes.ontoggle?.(event)
+	}}
 	popover="auto"
-	class={['np-menu', attributes.class]}
-	role="menu"
+	class={['np-menu-container', attributes.class]}
 >
-	{@render children()}
+	<div class="np-menu">
+		{@render children()}
+	</div>
 </div>
 
 <style>
-	.np-menu[popover] {
+	.np-menu {
+		overflow-y: auto;
+		overflow-x: hidden;
+		flex: 1;
+		padding: 0.5rem 0;
+		scrollbar-color: var(--np-color-on-surface-variant) transparent;
+		scrollbar-width: thin;
+	}
+	.np-menu-container[popover] {
 		color: var(--np-menu-text-color, var(--np-color-on-surface));
 		background-color: var(--np-menu-container-color, var(--np-color-surface-container));
-		overflow-y: auto;
 		border: none;
 		border-radius: var(--np-menu-container-shape, var(--np-shape-corner-extra-small));
-		padding: 0.5rem 0;
+		padding: 0;
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
 		inset: auto;
-		scrollbar-color: var(--np-color-on-surface-variant) transparent;
-		scrollbar-width: thin;
 		transition:
 			display 0.2s allow-discrete,
 			opacity 0.2s linear;
 		opacity: 0;
 		justify-self: var(--np-menu-justify-self, anchor-center);
 		position-area: var(--np-menu-position-area, bottom center);
-		position-try: most-height flip-block;
+		position-try: normal flip-block;
 	}
 
-	.np-menu:popover-open {
+	.np-menu-container:popover-open {
 		opacity: 1;
+		display: flex;
 		@starting-style {
 			opacity: 0;
 		}

package/dist/select/Select.svelte

@@ -33,6 +33,7 @@
 	let errorRaw = $state(error)
 	let selectElement: HTMLSelectElement | undefined = $state()
 	let menuElement: HTMLDivElement | undefined = $state()
+	let anchorElement: HTMLDivElement | undefined = $state()
 	let field: HTMLDivElement | undefined = $state()
 	let clientWidth = $state(0)
 	let menuId = $state(`--select-${crypto.randomUUID()}`)
@@ -87,6 +88,7 @@
 		aria-controls="listbox"
 		aria-expanded={menuOpen}
 		aria-label={attributes['aria-label'] || label}
+		aria-disabled={disabled}
 		data-testid={attributes['data-testid']}
 		bind:this={field}
 		bind:clientWidth
@@ -102,7 +104,7 @@
 				event.preventDefault()
 				if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
 					menuElement?.showPopover()
-					;(menuElement?.firstElementChild as HTMLElement)?.focus()
+					;(menuElement?.firstElementChild?.firstElementChild as HTMLElement)?.focus()
 				}
 			}
 		}}
@@ -129,7 +131,7 @@
 					<div class="outline-end"></div>
 				</div>
 			{/if}
-			<div class="np-container" style="anchor-name:{menuId};">
+			<div class="np-container" bind:this={anchorElement} style="anchor-name:{menuId};">
 				{#if start}
 					<div class="start">
 						<span class="icon leading">{@render start()}</span>
@@ -175,8 +177,6 @@
 						<div class="input">
 							{#if selectedLabel}
 								{selectedLabel}
-							{:else}
-								&nbsp;
 							{/if}
 						</div>
 					</div>
@@ -201,14 +201,14 @@
 <Menu
 	style="position-anchor:{menuId};min-width:{clientWidth}px;"
 	popover="manual"
+	role="listbox"
 	--np-menu-justify-self="none"
-	--np-menu-position-area-fallback="top span-right"
 	--np-menu-position-area="bottom span-right"
 	--np-menu-margin="2px 0"
 	--np-menu-container-shape={variant === 'outlined'
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
-	anchor={element}
+	anchor={anchorElement}
 	ontoggle={({ newState }) => {
 		if (newState === 'open') {
 			menuOpen = true
@@ -322,6 +322,7 @@
 		min-height: 100%;
 		min-width: min-content;
 		position: relative;
+		user-select: none;
 	}
 	.outlined .container-overflow {
 		border-start-start-radius: var(
@@ -432,6 +433,7 @@
 		overflow-x: hidden;
 		text-align: inherit;
 		width: 100%;
+		height: 1.5rem;
 
 		&::placeholder {
 			color: currentColor;
@@ -600,6 +602,7 @@
 	}
 
 	.with-start.menu-open .label,
+	.with-start:focus .label,
 	.with-start:has(select:focus-visible option:checked:not([value=''])) .label,
 	.with-start:has(select option:checked:not([value=''])) .label,
 	.with-start:has(select:focus-visible) .label {

package/dist/select/types.d.ts

@@ -7,7 +7,6 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'multiple' | 'si
     errorText?: string;
     variant?: 'outlined' | 'filled';
     start?: Snippet;
-    end?: Snippet;
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
     options: {

package/dist/tooltip/Tooltip.svelte

@@ -14,7 +14,7 @@
 	let anchor: HTMLElement | undefined = $state()
 
 	const refreshValues = () => {
-		if (element && anchor && !('anchorName' in document.documentElement.style)) {
+		if (element && anchor && !('positionArea' in document.documentElement.style)) {
 			const docClientWidth = document.documentElement.clientWidth
 			const anchorRect = anchor.getBoundingClientRect()
 			if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {

package/package.json

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