noph-ui 0.34.4 → 0.36.1

package/README.md

@@ -52,30 +52,30 @@ body {
 
 ## Roadmap
 
-Beta (No breaking changes expected)
+Beta
 
+- Auto complete
+- Badges
 - Buttons
 - Cards
 - Checkbox
+- Chips
+- Dialogs
 - Divider
 - Icon buttons
-- Lists (Docs missing)
+- Lists
+- Loading indicator
+- Menus
+- Navigation Drawer
+- Navigation Rail
 - Progress indicators
 - Radio
 - Ripple
 - Segmented buttons
 - Select
+- Slider
 - Snackbar
 - Switch
-- Text fields
 - Tabs
-
-In progress (Breaking changes expected)
-
-- Auto complete
-- Chips (Docs missing)
-- Dialogs (Fullscreen + Docs missing)
-- Menus (Positioning missing + Docs missing)
-- Navigation Drawer (Docs missing)
-- Navigation Rail (Badge is missing + Docs missing)
-- Tooltips (Positioning missing)
+- Text fields
+- Tooltips

package/dist/badge/Badge.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	let { label }: { label?: string | number } = $props()
+	let { label, ariaLabel }: { label?: string | number; ariaLabel?: string } = $props()
 </script>
 
 <div
-	aria-hidden="true"
+	aria-hidden={ariaLabel ? undefined : 'true'}
+	role={ariaLabel ? 'status' : undefined}
+	aria-label={ariaLabel}
 	class={[
 		'np-badge-container',
 		label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',

package/dist/badge/Badge.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     label?: string | number;
+    ariaLabel?: string;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/button/Button.svelte

@@ -49,7 +49,7 @@
 	{/if}
 	{#if loading}
 		<div class="circular-progress">
-			<CircularProgress aria-label={loadingAriaLabel} indeterminate />
+			<CircularProgress aria-label={loadingAriaLabel} indeterminate track={false} />
 		</div>
 	{/if}
 	{#if start}
@@ -417,10 +417,8 @@
 	:global(.np-button .button-icon svg) {
 		fill: currentColor;
 		display: block;
-	}
-	:global(.np-button .button-icon svg) {
-		width: calc((var(--button-height) - 0.375rem) / 2);
-		height: calc((var(--button-height) - 0.375rem) / 2);
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 	}
 
 	@media (forced-colors: active) {

package/dist/button/IconButton.svelte

@@ -50,7 +50,7 @@
 	{/if}
 	{#if loading}
 		<div class="np-icon-button-circular-progress">
-			<CircularProgress aria-label={loadingAriaLabel} indeterminate />
+			<CircularProgress aria-label={loadingAriaLabel} indeterminate track={false} />
 		</div>
 	{/if}
 	{#if selectedIcon && selected}
@@ -69,8 +69,8 @@
 			}
 			attributes.onclick?.(event)
 		}}
-		aria-describedby={title ? uid : undefined}
-		aria-label={title}
+		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-label={title || attributes['aria-label']}
 		bind:this={element}
 		class={[
 			'np-icon-button',
@@ -184,7 +184,7 @@
 		border-radius: 1.25rem;
 	}
 	.s.square {
-		border-radius: var(--np-button-shape, 0.75rem);
+		border-radius: var(--np-icon-button-shape, 0.75rem);
 	}
 	.s.narrow {
 		width: 2rem;
@@ -206,7 +206,7 @@
 		border-radius: 1.75rem;
 	}
 	.m.square {
-		border-radius: var(--np-button-shape, 1rem);
+		border-radius: var(--np-icon-button-shape, 1rem);
 	}
 	.m.narrow {
 		width: 3rem;
@@ -228,7 +228,7 @@
 		border-radius: 3rem;
 	}
 	.l.square {
-		border-radius: var(--np-button-shape, 1.75rem);
+		border-radius: var(--np-icon-button-shape, 1.75rem);
 	}
 	.l.narrow {
 		width: 4rem;
@@ -250,7 +250,7 @@
 		border-radius: 4.25rem;
 	}
 	.xl.square {
-		border-radius: var(--np-button-shape, 1.75rem);
+		border-radius: var(--np-icon-button-shape, 1.75rem);
 	}
 	.xl.narrow {
 		width: 6.5rem;

package/dist/button/SegmentedButton.svelte

@@ -11,7 +11,6 @@
 		group = $bindable(),
 		...attributes
 	}: SegmentedButtonProps = $props()
-	let hoverState = $state(-1)
 </script>
 
 <div
@@ -21,6 +20,7 @@
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
 	{#each options as option, i (i)}
+		{@const optionLabel = option.label ?? `${name}-${i}`}
 		<label class={['np-segmented-button', option.icon && 'width-icon']}>
 			<div class="check-icon-wrapper">
 				<div class="check-icon">
@@ -42,7 +42,7 @@
 				{option.label}
 			{/if}
 			{#if !option.disabled}
-				<Ripple forceHover={i === hoverState} />
+				<Ripple />
 			{/if}
 			{#if group !== undefined}
 				{#if multiSelect}
@@ -50,13 +50,9 @@
 						type="checkbox"
 						onclick={option.onclick}
 						bind:group
-						onfocus={(event) => {
-							if (event) hoverState = i
-						}}
-						onblur={() => (hoverState = -1)}
 						{name}
-						aria-label={typeof option.label === 'function' ? `${name}-${i}` : option.label}
-						value={option.label}
+						aria-label={optionLabel}
+						value={optionLabel}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -65,13 +61,9 @@
 						type="radio"
 						onclick={option.onclick}
 						bind:group
-						onfocus={(event) => {
-							if (event) hoverState = i
-						}}
-						onblur={() => (hoverState = -1)}
 						{name}
-						aria-label={typeof option.label === 'function' ? `${name}-${i}` : option.label}
-						value={option.label}
+						aria-label={optionLabel}
+						value={optionLabel}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -80,13 +72,9 @@
 				<input
 					type={multiSelect ? 'checkbox' : 'radio'}
 					onclick={option.onclick}
-					onfocus={(event) => {
-						if (event) hoverState = i
-					}}
-					onblur={() => (hoverState = -1)}
 					{name}
-					aria-label={option.label ?? `${name}-${i}`}
-					value={option.label}
+					aria-label={optionLabel}
+					value={optionLabel}
 					disabled={option.disabled}
 					checked={option.selected}
 				/>
@@ -108,7 +96,7 @@
 
 	.np-segmented-button {
 		flex: 1;
-		padding: 0.5rem 2rem;
+		padding: 0.5rem 1.75rem;
 		text-align: center;
 		cursor: pointer;
 		font-size: 0.875rem;
@@ -136,7 +124,7 @@
 
 	.np-segmented-button:has(input:disabled) {
 		cursor: unset;
-		opacity: 0.5;
+		opacity: 0.38;
 	}
 
 	.np-segmented-button:last-child {
@@ -159,7 +147,7 @@
 	}
 	.width-icon,
 	.np-segmented-button:has(input:checked) {
-		padding: 0.5rem 1rem;
+		padding: 0.5rem 0.75rem;
 	}
 	.np-segmented-button:has(input:checked) {
 		color: var(--np-color-on-secondary-container);
@@ -168,6 +156,7 @@
 		opacity: 1;
 	}
 	.check-icon {
+		display: flex;
 		width: 0;
 		overflow: hidden;
 		fill: currentColor;
@@ -182,6 +171,7 @@
 		transition: width 0.15s linear;
 	}
 	.alternate-icon {
+		display: flex;
 		width: 1.5rem;
 		overflow: hidden;
 		fill: currentColor;
@@ -213,21 +203,28 @@
 		width: 1.5rem;
 	}
 
-	.np-segmented-buttons:has(input:focus-visible) {
+	.np-segmented-button:has(input:focus-visible) :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
+
+	.np-segmented-button:has(input:focus-visible) {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
-		outline-offset: 2px;
+		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;
 		}
 	}

package/dist/card/Card.svelte

@@ -12,25 +12,9 @@
 		supportingText,
 		action,
 		children,
-		onfocus,
-		onblur,
 		type,
 		...attributes
 	}: CardProps = $props()
-
-	let focused = $state(false)
-
-	$effect(() => {
-		if (!element) return
-		// eslint-disable-next-line no-undef
-		const formElements: NodeListOf<
-			HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-		> = element.querySelectorAll('input, button, select, textarea')
-
-		formElements.forEach((el) => {
-			el.disabled = disabled
-		})
-	})
 </script>
 
 {#snippet content()}
@@ -61,7 +45,7 @@
 		{/if}
 	</div>
 	{#if !disabled && type !== 'text'}
-		<Ripple forceHover={focused} />
+		<Ripple />
 	{/if}
 {/snippet}
 
@@ -85,14 +69,6 @@
 		{...attributes}
 		type="button"
 		bind:this={element}
-		onfocus={(event) => {
-			focused = true
-			onfocus?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			onblur?.(event)
-		}}
 		{disabled}
 		class={[
 			'np-card-container',
@@ -110,14 +86,6 @@
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
 		role="link"
-		onfocus={(event) => {
-			focused = true
-			onfocus?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			onblur?.(event)
-		}}
 		class={[
 			'np-card-container',
 			`np-card-${variant}`,
@@ -162,8 +130,8 @@
 		--border-radius: var(--np-outlined-card-container-shape, var(--np-shape-corner-medium));
 	}
 	.np-card-outlined.np-card-disabled {
-		border-color: color-mix(in srgb, var(--np-color-outline) 32%, transparent);
-		--background-color: none;
+		border-color: color-mix(in srgb, var(--np-color-outline) 12%, transparent);
+		--background-color: transparent;
 	}
 	.np-card-container {
 		font: inherit;
@@ -181,6 +149,10 @@
 		cursor: pointer;
 	}
 
+	.np-card-container:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
+
 	.np-card-container:focus-visible {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
@@ -211,6 +183,10 @@
 		overflow: hidden;
 		background-size: cover;
 		background-position: 50%;
+		border-start-start-radius: var(--border-radius);
+		border-start-end-radius: var(--border-radius);
+	}
+	.np-card-container:not(:has(.np-card-content:not(:empty))) .np-card-image {
 		border-radius: var(--border-radius);
 	}
 	.np-card-content {

package/dist/checkbox/Checkbox.svelte

@@ -7,37 +7,41 @@
 		checked = $bindable(),
 		element = $bindable(),
 		group = $bindable(),
+		error = false,
 		style,
 		value,
 		...attributes
 	}: CheckboxProps = $props()
 
-	$effect(() => {
-		if (group && value) {
-			checked = group.includes(value)
-		}
-	})
+	let inputEl: HTMLInputElement | undefined = $state()
+
+	let groupValue = $derived(
+		typeof value === 'string' || typeof value === 'number' ? value : undefined,
+	)
+	let grouped = $derived(Array.isArray(group) && groupValue !== undefined)
+	let groupChecked = $derived(
+		Array.isArray(group) && groupValue !== undefined ? group.includes(groupValue) : false,
+	)
 
-	$effect(() => {
-		if (value && group) {
-			const index = group.indexOf(value)
-			if (checked) {
-				if (index < 0) {
-					group?.push(value)
-					group = group
-				}
-			} else {
-				if (index >= 0) {
-					group.splice(index, 1)
-					group = group
-				}
-			}
+	const onchange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		const next = event.currentTarget.checked
+		if (Array.isArray(group) && groupValue !== undefined) {
+			group = next
+				? group.includes(groupValue)
+					? group
+					: [...group, groupValue]
+				: group.filter((entry) => entry !== groupValue)
 		}
-	})
-	let inputEl: HTMLInputElement | undefined = $state()
+		checked = next
+		attributes.onchange?.(event)
+	}
 </script>
 
-<div {style} class={['np-container', attributes.class]} bind:this={element}>
+<div
+	{style}
+	class={['np-container', error && !attributes.disabled && 'np-error', attributes.class]}
+	bind:this={element}
+>
 	<div class="np-outline"></div>
 	<div class="np-background"></div>
 	<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
@@ -48,16 +52,32 @@
 		{#if !attributes.disabled}
 			<Ripple forElement={inputEl} />
 		{/if}
-		<input
-			{...attributes}
-			{value}
-			class="np-input"
-			type="checkbox"
-			bind:indeterminate
-			bind:checked
-			bind:this={inputEl}
-			aria-checked={indeterminate ? 'mixed' : undefined}
-		/>
+		{#if grouped}
+			<input
+				{...attributes}
+				{value}
+				class="np-input"
+				type="checkbox"
+				bind:indeterminate
+				bind:this={inputEl}
+				checked={groupChecked}
+				{onchange}
+				aria-invalid={error ? 'true' : undefined}
+				aria-checked={indeterminate ? 'mixed' : undefined}
+			/>
+		{:else}
+			<input
+				{...attributes}
+				{value}
+				class="np-input"
+				type="checkbox"
+				bind:indeterminate
+				bind:checked
+				bind:this={inputEl}
+				aria-invalid={error ? 'true' : undefined}
+				aria-checked={indeterminate ? 'mixed' : undefined}
+			/>
+		{/if}
 	</div>
 </div>
 
@@ -172,6 +192,22 @@
 		background: var(--np-color-on-surface);
 		opacity: 0.38;
 	}
+
+	.np-error .np-outline,
+	.np-error:hover .np-outline,
+	.np-error:focus-within .np-outline {
+		border-color: var(--np-color-error);
+	}
+	.np-error .np-background {
+		background-color: var(--np-color-error);
+	}
+	.np-error .np-icon {
+		fill: var(--np-color-on-error);
+	}
+	.np-error {
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+	}
 	.np-icon {
 		fill: var(--np-checkbox-selected-icon-color, var(--np-color-on-primary));
 		height: 18px;

package/dist/checkbox/types.d.ts

@@ -2,4 +2,5 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
     group?: (string | number)[] | null;
+    error?: boolean;
 }

package/dist/chip/ChipSet.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { ChipSetProps } from './types.ts'
 
 	let { children, chipsCount, ...attributes }: ChipSetProps = $props()
+
+	const CHIP_SELECTOR = "input:not([type='hidden']), button, a[href]"
+	const attach = rovingTabindex(CHIP_SELECTOR, {
+		currentAttr: 'aria-current',
+		currentValue: 'true',
+	})
+	const onkeydown = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
 </script>
 
 <div
@@ -13,7 +21,7 @@
 	style={attributes.style}
 >
 	{#if children}
-		<div class={['np-chip-set']} role="toolbar">
+		<div {@attach attach} class={['np-chip-set']} role="toolbar" tabindex="-1" {onkeydown}>
 			{@render children()}
 		</div>
 	{/if}
@@ -26,7 +34,7 @@
 		margin: -0.5rem;
 	}
 	.np-chip-set-has-chips {
-		margin-right: 0;
+		margin-inline-end: 0;
 	}
 	.np-chip-set {
 		display: flex;