noph-ui 0.51.2 → 0.52.0

package/dist/dialog/Dialog.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import '../internal/exit.css'
+	import { exitAnimation } from '../animation.js'
+	import IconButton from '../button/IconButton.svelte'
 	import Divider from '../divider/Divider.svelte'
+	import CloseIcon from '../icons/CloseIcon.svelte'
 	import { syncOpenEffect } from '../popover.svelte.js'
 	import type { DialogProps } from './types.js'
 
 	let {
 		element = $bindable(),
 		open = $bindable(),
+		variant = 'basic',
+		closeLabel = 'Close',
 		quick = false,
 		children,
 		headline,
@@ -13,13 +19,18 @@
 		icon,
 		supportingText,
 		actions,
+		actionBar,
 		divider,
+		closedby = 'any',
+		role,
 		ontoggle,
+		oncancel,
 		'aria-labelledby': ariaLabelledby,
 		...attributes
 	}: DialogProps = $props()
 
 	const uid = $props.id()
+	let fullScreen = $derived(variant === 'full-screen')
 
 	export const show = () => {
 		if (element && !element.open) element.showModal()
@@ -37,50 +48,90 @@
 	)
 </script>
 
+{#snippet title()}
+	<svelte:element this={`h${headlineLevel}`} id="{uid}-dialog-headline" class="np-dialog-headline">
+		{headline}
+	</svelte:element>
+{/snippet}
+
+<!-- A basic dialog is an alert dialog on the web, as M3 asks; one that holds a task, like a
+     full-screen dialog or a picker, is a plain dialog. -->
 <dialog
-	bind:this={element}
 	{...attributes}
-	closedby="any"
+	bind:this={element}
+	{@attach !quick && exitAnimation}
+	{closedby}
+	role={role ?? (fullScreen ? 'dialog' : 'alertdialog')}
 	aria-labelledby={ariaLabelledby ?? (headline ? `${uid}-dialog-headline` : undefined)}
 	aria-describedby={supportingText ? `${uid}-dialog-supporting-text` : undefined}
-	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
+	class={[
+		'np-dialog-container',
+		fullScreen && 'np-dialog-full-screen',
+		!quick && 'np-animate np-exit-scrim',
+		attributes.class,
+	]}
 	ontoggle={(event) => {
 		open = event.newState === 'open'
 		ontoggle?.(event)
 	}}
+	oncancel={(event) => {
+		// Browsers without closedby still close on Escape.
+		if (closedby === 'none') event.preventDefault()
+		oncancel?.(event)
+	}}
 	onclick={(event) => {
 		attributes.onclick?.(event)
-		if (event.target === element) close()
+		if (event.target === element && closedby === 'any') close()
 	}}
 >
 	<div class="np-dialog">
-		{#if icon}
-			<div class="np-dialog-icon">
-				{@render icon()}
+		{#if fullScreen}
+			<div class="np-dialog-header">
+				<IconButton type="button" aria-label={closeLabel} onclick={close}>
+					<CloseIcon />
+				</IconButton>
+				{#if headline}
+					{@render title()}
+				{/if}
+				{#if actions}
+					<div class="np-dialog-header-actions">{@render actions()}</div>
+				{/if}
 			</div>
+			{#if divider}
+				<Divider />
+			{/if}
+		{:else}
+			{#if icon}
+				<div class="np-dialog-icon">
+					{@render icon()}
+				</div>
+			{/if}
+			{#if headline}
+				<div class={['np-dialog-title', icon && 'np-dialog-title-centered']}>{@render title()}</div>
+			{/if}
+			{#if divider && (supportingText || children)}
+				<Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
+			{/if}
 		{/if}
-		{#if headline}
-			<svelte:element
-				this={`h${headlineLevel}`}
-				id="{uid}-dialog-headline"
-				class="np-dialog-headline"
-				style={icon ? 'text-align: center' : ''}
-			>
-				{headline}
-			</svelte:element>
-		{/if}
-		{#if supportingText}
-			<p id="{uid}-dialog-supporting-text" class="np-dialog-supporting-text">{supportingText}</p>
-		{/if}
-		{#if divider}
-			<Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
-		{/if}
-		{#if children}
+		<!-- Headline and actions stay put; everything between them scrolls. -->
+		{#if supportingText || children}
 			<div class="np-dialog-scroller">
-				{@render children()}
+				{#if supportingText}
+					<p id="{uid}-dialog-supporting-text" class="np-dialog-supporting-text">
+						{supportingText}
+					</p>
+				{/if}
+				{@render children?.()}
 			</div>
 		{/if}
-		{#if actions}
+		{#if fullScreen}
+			{#if actionBar}
+				<div class="np-dialog-action-bar">{@render actionBar()}</div>
+			{/if}
+		{:else if actions}
+			{#if divider && (supportingText || children)}
+				<Divider style="margin-bottom: 1rem" --np-divider-color="var(--np-color-outline)" />
+			{/if}
 			<div class="np-dialog-actions">
 				{@render actions()}
 			</div>
@@ -117,7 +168,9 @@
 		padding: var(--np-dialog-padding, 1.5rem);
 		border-radius: var(--np-dialog-container-shape, var(--np-shape-corner-extra-large));
 		box-shadow: var(--np-dialog-elevation, var(--np-elevation-3));
-		max-height: var(--np-dialog-max-height, calc(100dvh - 3rem));
+		/* Its padding included, so it fits the window inside the container's own inset. */
+		box-sizing: border-box;
+		max-height: var(--np-dialog-max-height, calc(100dvh - 4rem));
 		scrollbar-color: var(--np-color-on-surface-variant) transparent;
 		scrollbar-width: thin;
 		position: relative;
@@ -138,33 +191,118 @@
 		opacity: 0.32;
 	}
 
+	/* It fades in, and closes like a menu: a short fade while it shrinks a little, its scrim
+	   fading along. */
 	.np-animate {
+		--_exit: var(--np-motion-expressive-default-effects);
+		--np-exit-scrim-motion: var(--_exit);
 		transition:
-			opacity var(--np-motion-expressive-slow-effects),
-			display var(--np-motion-expressive-slow-effects) allow-discrete,
-			overlay var(--np-motion-expressive-slow-effects) allow-discrete;
+			opacity var(--_exit),
+			scale var(--_exit),
+			display var(--_exit) allow-discrete,
+			overlay var(--_exit) allow-discrete;
 		opacity: 0;
 	}
 	.np-animate[open] {
+		--_enter: var(--np-motion-expressive-slow-effects);
+		transition:
+			opacity var(--_enter),
+			display var(--_enter) allow-discrete,
+			overlay var(--_enter) allow-discrete;
 		opacity: 1;
 		@starting-style {
 			opacity: 0;
 		}
 	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-animate:not([open]) {
+			scale: 0.95;
+		}
+	}
 	.np-animate::backdrop {
 		transition:
-			opacity var(--np-motion-expressive-slow-effects),
-			display var(--np-motion-expressive-slow-effects) allow-discrete,
-			overlay var(--np-motion-expressive-slow-effects) allow-discrete;
+			opacity var(--np-motion-expressive-default-effects),
+			display var(--np-motion-expressive-default-effects) allow-discrete,
+			overlay var(--np-motion-expressive-default-effects) allow-discrete;
 		opacity: 0;
 	}
 	.np-animate[open]::backdrop {
+		transition:
+			opacity var(--np-motion-expressive-slow-effects),
+			display var(--np-motion-expressive-slow-effects) allow-discrete,
+			overlay var(--np-motion-expressive-slow-effects) allow-discrete;
 		opacity: 0.32;
 		@starting-style {
 			opacity: 0;
 		}
 	}
 
+	.np-dialog-title-centered {
+		text-align: center;
+	}
+
+	/* Full-screen: a 56dp header with the close button, headline and confirming action, the
+	   content 24dp from the sides and an optional 56dp action bar. It fills a compact window and
+	   floats, at most 560dp wide, on larger ones. */
+	.np-dialog-full-screen {
+		width: var(--np-dialog-container-width, 35rem);
+	}
+	.np-dialog-full-screen .np-dialog {
+		padding: 0;
+	}
+	.np-dialog-header {
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 3.5rem;
+		padding-inline: 0.5rem 0.75rem;
+		--np-icon-button-icon-color: var(--np-color-on-surface);
+	}
+	.np-dialog-header .np-dialog-headline {
+		flex: 1;
+		min-width: 0;
+		margin: 0;
+		font-size: 1.375rem;
+		line-height: 1.75rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.np-dialog-header-actions {
+		display: flex;
+		gap: 0.5rem;
+		margin-inline-start: auto;
+	}
+	.np-dialog-full-screen .np-dialog-scroller {
+		padding: 1.5rem 1.5rem;
+	}
+	.np-dialog-action-bar {
+		flex: none;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		min-height: 3.5rem;
+		padding-inline: 1.5rem;
+	}
+	@media (width < 600px) {
+		.np-dialog-full-screen {
+			width: 100%;
+			height: 100%;
+			min-width: 0;
+			max-height: none;
+			margin: 0;
+			padding: 0;
+		}
+		.np-dialog-full-screen .np-dialog {
+			height: 100%;
+			max-height: none;
+			border-radius: 0;
+			box-shadow: none;
+		}
+	}
+
 	.np-dialog-icon {
 		color: var(--np-color-secondary);
 		display: flex;

package/dist/dialog/Dialog.svelte.d.ts

@@ -1,7 +1,8 @@
+import '../internal/exit.css';
 import type { DialogProps } from './types.js';
 declare const Dialog: import("svelte").Component<DialogProps, {
     show: () => void;
     close: () => void;
-}, "element" | "open">;
+}, "open" | "element">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/types.d.ts

@@ -1,6 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
 export interface DialogProps extends Omit<HTMLDialogAttributes, 'open'> {
+    /** A basic dialog floats over a scrim; a full-screen one fills a compact window. */
+    variant?: 'basic' | 'full-screen';
+    /** Names the close button of a full-screen dialog. */
+    closeLabel?: string;
+    /** The 56dp bar at the bottom of a full-screen dialog. */
+    actionBar?: Snippet;
     icon?: Snippet;
     headline?: string;
     headlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/divider/Divider.svelte

@@ -1,31 +1,57 @@
 <script lang="ts">
 	import type { DividerProps } from './types.js'
 
-	let { variant = 'full', element = $bindable(), ...attributes }: DividerProps = $props()
+	let {
+		variant = 'full',
+		orientation = 'horizontal',
+		element = $bindable(),
+		...attributes
+	}: DividerProps = $props()
 </script>
 
 <template
 	{...attributes}
 	bind:this={element}
 	role="separator"
-	class={['np-divider', variant, attributes.class]}
+	aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
+	class={[
+		'np-divider',
+		variant,
+		orientation === 'vertical' && 'np-divider-vertical',
+		attributes.class,
+	]}
 ></template>
 
 <style>
-	.inset {
+	.np-divider {
+		display: flex;
+		flex-shrink: 0;
+		background-color: var(--np-divider-color, var(--np-color-outline-variant));
+	}
+	.np-divider:not(.np-divider-vertical) {
+		height: 1px;
+	}
+	.np-divider:not(.np-divider-vertical).full {
+		width: 100%;
+	}
+	.np-divider:not(.np-divider-vertical).inset {
 		width: calc(100% - 1rem);
 		margin-inline-start: 1rem;
 	}
-	.inset-middle {
+	.np-divider:not(.np-divider-vertical).inset-middle {
 		width: calc(100% - 2rem);
 		margin-inline: 1rem;
 	}
-	.full {
-		width: 100%;
+
+	/* Takes the height of a flex or grid row. */
+	.np-divider-vertical {
+		width: 1px;
+		align-self: stretch;
 	}
-	.np-divider {
-		height: 1px;
-		display: flex;
-		background-color: var(--np-divider-color, var(--np-color-outline-variant));
+	.np-divider-vertical.inset {
+		margin-block-start: 1rem;
+	}
+	.np-divider-vertical.inset-middle {
+		margin-block: 1rem;
 	}
 </style>

package/dist/divider/types.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
     variant?: 'full' | 'inset' | 'inset-middle';
+    orientation?: 'horizontal' | 'vertical';
     element?: HTMLElement;
 }

package/dist/fab/ExtendedFab.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
-	import { pressMorph } from '../press.svelte.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
@@ -9,9 +8,8 @@
 	let {
 		variant = 'primary-container',
 		size = 's',
-		shape = 'round',
+		shape = 'square',
 		lowered = false,
-		disabled = false,
 		collapsed = false,
 		icon,
 		label,
@@ -21,16 +19,10 @@
 
 	const uid = $props.id()
 
-	let isLink = $derived(attributes.href != null && !disabled)
-	let tooltipId = $derived(collapsed && label && !disabled ? uid : undefined)
+	let isLink = $derived(attributes.href != null)
+	let tooltipId = $derived(collapsed && label ? uid : undefined)
 
-	const morph = pressMorph()
-	morph.supersededBy(() => shape)
-
-	const handlePress = () => {
-		if (disabled) return
-		morph.press()
-	}
+	let tooltipNames = $derived(!!tooltipId && !attributes['aria-label'])
 
 	let classes = $derived([
 		'np-extended-fab',
@@ -40,15 +32,12 @@
 		shape,
 		lowered && 'np-fab-lowered',
 		collapsed && 'np-fab-collapsed',
-		morph.pressed && 'pressed',
 		attributes.class,
 	])
 </script>
 
 {#snippet content()}
-	{#if !disabled}
-		<Ripple forElement={element} />
-	{/if}
+	<Ripple forElement={element} />
 	{#if icon}
 		<span class="np-fab-icon">{@render icon()}</span>
 	{/if}
@@ -60,14 +49,10 @@
 {#if isLink}
 	<a
 		{...attributes}
-		onclick={(event) => {
-			handlePress()
-			attributes.onclick?.(event)
-		}}
 		bind:this={element}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={collapsed ? label || attributes['aria-label'] : attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? (collapsed ? label : undefined)}
 		class={classes}
 	>
 		{@render content()}
@@ -75,16 +60,11 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		onclick={(event) => {
-			handlePress()
-			attributes.onclick?.(event)
-		}}
 		bind:this={element}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={collapsed ? label || attributes['aria-label'] : attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? (collapsed ? label : undefined)}
 		type={(attributes['type'] as HTMLButtonAttributes['type']) ?? 'button'}
-		{disabled}
 		class={classes}
 	>
 		{@render content()}
@@ -129,19 +109,10 @@
 	.square {
 		border-radius: var(--np-fab-shape, var(--_square-radius));
 	}
-	@media (prefers-reduced-motion: no-preference) {
-		.round:not(:disabled):is(:active, .pressed) {
-			border-radius: var(--np-fab-pressed-shape, var(--_square-radius));
-		}
-		.square:not(:disabled):is(:active, .pressed) {
-			border-radius: var(--np-fab-pressed-shape, calc(var(--_height) / 2));
-		}
-	}
-
 	.s {
 		--_height: 3.5rem;
 		--_square-radius: 1rem;
-		--_gap: 0.75rem;
+		--_gap: 0.5rem;
 		--_padding: 1rem;
 		font-size: 1rem;
 		--np-icon-size: 1.5rem;
@@ -149,8 +120,9 @@
 	.m {
 		--_height: 5rem;
 		--_square-radius: 1.25rem;
-		--_gap: 1rem;
-		--_padding: 1.5rem;
+		--_gap: 0.75rem;
+		--_padding: 1.625rem;
+		font-weight: 400;
 		font-size: 1.375rem;
 		--np-icon-size: 1.75rem;
 	}
@@ -158,15 +130,17 @@
 		--_height: 6rem;
 		--_square-radius: 1.75rem;
 		--_gap: 1rem;
-		--_padding: 2rem;
+		--_padding: 1.75rem;
+		font-weight: 400;
 		font-size: 1.5rem;
 		--np-icon-size: 2.25rem;
 	}
 
+	/* Collapsed, the icon keeps its place at the start: the padding centres it in the square, and
+	   only the gap and the label shrink, so the icon does not drift while the FAB changes width. */
 	.np-fab-collapsed {
 		width: var(--_height);
-		padding-inline: 0;
-		justify-content: center;
+		padding-inline: calc((var(--_height) - var(--np-icon-size)) / 2);
 		gap: 0;
 	}
 	.np-fab-collapsed .np-fab-label {
@@ -175,25 +149,24 @@
 	}
 
 	.np-fab-label {
-		max-width: 20rem;
+		max-width: max-content;
 		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-extended-fab {
 			transition:
-				width var(--np-motion-expressive-default-spatial),
-				gap var(--np-motion-expressive-default-spatial),
-				padding-inline var(--np-motion-expressive-default-spatial),
-				border-radius var(--np-motion-expressive-default-spatial),
+				width var(--np-fab-motion-spatial, var(--np-motion-expressive-default-spatial)),
+				gap var(--np-fab-motion-spatial, var(--np-motion-expressive-default-spatial)),
+				padding-inline var(--np-fab-motion-spatial, var(--np-motion-expressive-default-spatial)),
+				border-radius var(--np-fab-motion-spatial, var(--np-motion-expressive-default-spatial)),
 				box-shadow var(--np-motion-expressive-fast-effects),
 				background-color var(--np-motion-expressive-fast-effects);
 		}
 		.np-fab-label {
 			transition:
 				opacity var(--np-motion-expressive-fast-effects),
-				max-width var(--np-motion-expressive-default-spatial);
+				max-width var(--np-fab-motion-spatial, var(--np-motion-expressive-default-spatial));
 		}
 	}
 
@@ -227,21 +200,14 @@
 	}
 
 	@media (hover: hover) {
-		.np-extended-fab:not(:disabled):hover {
+		.np-extended-fab:hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-4));
 		}
-		.np-fab-lowered:not(:disabled):hover {
+		.np-fab-lowered:hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));
 		}
 	}
 
-	.np-extended-fab:disabled {
-		cursor: default;
-		box-shadow: none;
-		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
-		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
-	}
-
 	.np-fab-icon {
 		display: flex;
 		flex: none;