noph-ui 0.12.9 → 0.12.11

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

@@ -36,7 +36,7 @@
 				maxHeight > innerHeight - anchorRect.height
 					? `${innerHeight - anchorRect.height - 4}px`
 					: `${maxHeight - 4}px`
-			if (!('anchorName' in document.documentElement.style)) {
+			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`
@@ -101,6 +101,7 @@
 
 <svelte:window bind:innerHeight onresize={refreshValues} />
 <div
+	role="menu"
 	{...attributes}
 	bind:this={element}
 	bind:clientWidth
@@ -108,10 +109,10 @@
 	ontoggle={(event) => {
 		let { newState } = event
 		menuOpen = newState === 'open'
+		attributes.ontoggle?.(event)
 	}}
 	popover="auto"
 	class={['np-menu-container', attributes.class]}
-	role="menu"
 >
 	<div class="np-menu">
 		{@render children()}
@@ -142,7 +143,7 @@
 		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-container:popover-open {

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,10 +131,10 @@
 					<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>
+						<span class="icon">{@render start()}</span>
 					</div>
 				{/if}
 				<div class="middle">
@@ -175,8 +177,6 @@
 						<div class="input">
 							{#if selectedLabel}
 								{selectedLabel}
-							{:else}
-								&nbsp;
 							{/if}
 						</div>
 					</div>
@@ -201,13 +201,14 @@
 <Menu
 	style="position-anchor:{menuId};min-width:{clientWidth}px;"
 	popover="manual"
+	role="listbox"
 	--np-menu-justify-self="none"
 	--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
@@ -319,8 +320,9 @@
 		flex: 1;
 		max-height: 100%;
 		min-height: 100%;
-		min-width: min-content;
+		min-width: 0;
 		position: relative;
+		user-select: none;
 	}
 	.outlined .container-overflow {
 		border-start-start-radius: var(
@@ -424,13 +426,18 @@
 		align-items: stretch;
 		align-self: baseline;
 		flex: 1;
+		min-width: 0;
 	}
 
 	.input {
 		caret-color: var(--np-color-primary);
-		overflow-x: hidden;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 		text-align: inherit;
-		width: 100%;
+		flex: 1;
+		min-width: 0;
+		height: 1.5rem;
 
 		&::placeholder {
 			color: currentColor;
@@ -475,6 +482,7 @@
 		display: flex;
 		flex: 1 1 0%;
 		opacity: 1;
+		min-width: 0;
 		transition: opacity 83ms cubic-bezier(0.2, 0, 0, 1);
 	}
 	.disabled .content {
@@ -599,6 +607,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/text-field/TextField.svelte

@@ -105,7 +105,7 @@
 			<div class="np-container">
 				{#if start}
 					<div class="start">
-						<span class="icon leading">{@render start()}</span>
+						<span class="icon">{@render start()}</span>
 					</div>
 				{/if}
 				<div class="middle">

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