noph-ui 0.44.0 → 0.45.1

package/dist/dialog/Dialog.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import type { DialogProps } from './types.js'
 
 	let {
 		element = $bindable(),
+		open = $bindable(),
 		quick = false,
 		children,
 		headline,
@@ -12,82 +14,47 @@
 		actions,
 		divider,
 		ontoggle,
-		// Naming attributes belong on the element that carries role="dialog", not on the popover
-		// container the rest of the attributes are spread onto.
-		'aria-label': ariaLabel,
 		'aria-labelledby': ariaLabelledby,
 		...attributes
 	}: DialogProps = $props()
 
 	const uid = $props.id()
 
-	let dialogEl: HTMLDivElement | undefined = $state()
-	let previouslyFocused: HTMLElement | undefined
-	let inerted: HTMLElement[] = []
-
-	export const showPopover = () => {
-		element?.showPopover()
-	}
-
-	export const hidePopover = () => {
-		element?.hidePopover()
+	export const show = () => {
+		if (element && !element.open) element.showModal()
 	}
 
-	const trapFocus = () => {
-		if (!element) return
-		previouslyFocused = document.activeElement as HTMLElement | undefined
-		for (let node: HTMLElement | null = element; node && node !== document.body;) {
-			const parent: HTMLElement | null = node.parentElement
-			if (!parent) break
-			for (const sibling of parent.children) {
-				if (sibling === node || !(sibling instanceof HTMLElement) || sibling.inert) continue
-				sibling.inert = true
-				inerted.push(sibling)
-			}
-			node = parent
-		}
-		dialogEl?.focus()
+	export const close = () => {
+		element?.close()
 	}
 
-	const releaseFocus = () => {
-		for (const node of inerted) node.inert = false
-		inerted = []
-		previouslyFocused?.focus?.()
-		previouslyFocused = undefined
-	}
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 </script>
 
-<div
+<dialog
 	bind:this={element}
 	{...attributes}
-	popover="auto"
+	tabindex="-1"
+	closedby="any"
+	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]}
 	ontoggle={(event) => {
-		if (event.newState === 'open') {
-			trapFocus()
-		} else {
-			releaseFocus()
-		}
+		open = event.newState === 'open'
+		if (event.newState === 'open') element?.focus()
 		ontoggle?.(event)
 	}}
-	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
+	onclick={(event) => {
+		attributes.onclick?.(event)
+		if (event.target === element) close()
+	}}
 >
-	<div
-		role="none"
-		class="np-backdrop"
-		onclick={() => {
-			hidePopover()
-		}}
-	></div>
-	<div
-		bind:this={dialogEl}
-		class="np-dialog"
-		role="dialog"
-		tabindex="-1"
-		aria-modal="true"
-		aria-label={ariaLabel}
-		aria-labelledby={ariaLabelledby ?? (headline ? `${uid}-dialog-headline` : undefined)}
-		aria-describedby={supportingText ? `${uid}-dialog-supporting-text` : undefined}
-	>
+	<div class="np-dialog">
 		{#if icon}
 			<div class="np-dialog-icon">
 				{@render icon()}
@@ -119,19 +86,30 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</dialog>
 
 <style>
 	.np-dialog-container {
 		background: transparent;
 		border: none;
+		outline: none;
 		margin: auto;
 		padding: var(--np-dialog-inset, 2rem 1rem);
 		box-sizing: border-box;
 		min-width: var(--np-dialog-container-min-width, 19.5rem);
 		width: var(--np-dialog-container-width, 37rem);
 		max-width: 100%;
+		max-height: none;
+		overflow: visible;
+		color: var(--np-color-on-surface);
+	}
+	.np-dialog-container:not([open]) {
+		display: none;
 	}
+	.np-animate:not([open]) {
+		pointer-events: none;
+	}
+
 	.np-dialog {
 		border: 0;
 		background-color: var(--np-dialog-container-color, var(--np-color-surface));
@@ -154,27 +132,36 @@
 		flex-direction: column;
 	}
 
-	.np-animate[popover] {
+	.np-dialog-container::backdrop {
+		background-color: var(--np-color-scrim);
+		opacity: 0.32;
+	}
+
+	.np-animate {
 		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;
 	}
-	.np-animate[popover]:popover-open {
+	.np-animate[open] {
 		opacity: 1;
 		@starting-style {
 			opacity: 0;
 		}
 	}
-	.np-dialog-container[popover] .np-backdrop {
-		inset: 0;
-		position: fixed;
-		background-color: var(--np-color-scrim);
-		opacity: 0.32;
+	.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: 0;
 	}
-	.np-dialog:focus-visible {
-		outline: none;
+	.np-animate[open]::backdrop {
+		opacity: 0.32;
+		@starting-style {
+			opacity: 0;
+		}
 	}
 
 	.np-dialog-icon {

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

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

package/dist/dialog/types.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'popover'> {
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export interface DialogProps extends Omit<HTMLDialogAttributes, 'open'> {
     icon?: Snippet;
     headline?: string;
     supportingText?: string;
     divider?: boolean;
     actions?: Snippet;
     quick?: boolean;
-    element?: HTMLElement;
+    element?: HTMLDialogElement;
+    open?: boolean;
 }

package/dist/fab/ExtendedFab.svelte

@@ -0,0 +1,255 @@
+<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'
+	import type { ExtendedFabProps } from './types.js'
+
+	let {
+		variant = 'primary-container',
+		size = 's',
+		shape = 'round',
+		lowered = false,
+		disabled = false,
+		collapsed = false,
+		icon,
+		label,
+		element = $bindable(),
+		...attributes
+	}: ExtendedFabProps = $props()
+
+	const uid = $props.id()
+
+	const isLink = $derived(attributes.href != null && !disabled)
+	const tooltipId = $derived(collapsed && label && !disabled ? uid : undefined)
+
+	const morph = pressMorph()
+	morph.supersededBy(() => shape)
+
+	const handlePress = () => {
+		if (disabled) return
+		morph.press()
+	}
+
+	const classes = $derived([
+		'np-extended-fab',
+		'np-focus-ring',
+		`np-fab-${variant}`,
+		size,
+		shape,
+		lowered && 'np-fab-lowered',
+		collapsed && 'np-fab-collapsed',
+		morph.pressed && 'pressed',
+		attributes.class,
+	])
+</script>
+
+{#snippet content()}
+	{#if !disabled}
+		<Ripple forElement={element} />
+	{/if}
+	{#if icon}
+		<span class="np-fab-icon">{@render icon()}</span>
+	{/if}
+	{#if label}
+		<span class="np-fab-label">{label}</span>
+	{/if}
+{/snippet}
+
+{#if isLink}
+	<a
+		{...attributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={collapsed ? label || attributes['aria-label'] : attributes['aria-label']}
+		class={classes}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={collapsed ? label || attributes['aria-label'] : attributes['aria-label']}
+		type={(attributes['type'] as HTMLButtonAttributes['type']) ?? 'button'}
+		{disabled}
+		class={classes}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+{#if tooltipId}
+	<Tooltip id={tooltipId}>{label}</Tooltip>
+{/if}
+
+<style>
+	.np-extended-fab {
+		interpolate-size: allow-keywords;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: flex-start;
+		box-sizing: border-box;
+		border-width: 0;
+		cursor: pointer;
+		font: inherit;
+		font-weight: 500;
+		text-decoration: none;
+		white-space: nowrap;
+		overflow: hidden;
+		-webkit-tap-highlight-color: transparent;
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
+		background-color: var(--np-fab-container-color, var(--_container-color));
+		color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-hover-color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-pressed-color: var(--np-fab-icon-color, var(--_icon-color));
+		width: auto;
+		min-width: var(--_height);
+		height: var(--_height);
+		gap: var(--_gap);
+		padding-inline: var(--_padding);
+	}
+
+	.round {
+		border-radius: var(--np-fab-shape, calc(var(--_height) / 2));
+	}
+	.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;
+		--_padding: 1rem;
+		font-size: 1rem;
+		--np-icon-size: 1.5rem;
+	}
+	.m {
+		--_height: 5rem;
+		--_square-radius: 1.25rem;
+		--_gap: 1rem;
+		--_padding: 1.5rem;
+		font-size: 1.375rem;
+		--np-icon-size: 1.75rem;
+	}
+	.l {
+		--_height: 6rem;
+		--_square-radius: 1.75rem;
+		--_gap: 1rem;
+		--_padding: 2rem;
+		font-size: 1.5rem;
+		--np-icon-size: 2.25rem;
+	}
+
+	.np-fab-collapsed {
+		width: var(--_height);
+		padding-inline: 0;
+		justify-content: center;
+		gap: 0;
+	}
+	.np-fab-collapsed .np-fab-label {
+		opacity: 0;
+		max-width: 0;
+	}
+
+	.np-fab-label {
+		max-width: 20rem;
+		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),
+				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);
+		}
+	}
+
+	.np-fab-primary {
+		--_container-color: var(--np-color-primary);
+		--_icon-color: var(--np-color-on-primary);
+	}
+	.np-fab-secondary {
+		--_container-color: var(--np-color-secondary);
+		--_icon-color: var(--np-color-on-secondary);
+	}
+	.np-fab-tertiary {
+		--_container-color: var(--np-color-tertiary);
+		--_icon-color: var(--np-color-on-tertiary);
+	}
+	.np-fab-primary-container {
+		--_container-color: var(--np-color-primary-container);
+		--_icon-color: var(--np-color-on-primary-container);
+	}
+	.np-fab-secondary-container {
+		--_container-color: var(--np-color-secondary-container);
+		--_icon-color: var(--np-color-on-secondary-container);
+	}
+	.np-fab-tertiary-container {
+		--_container-color: var(--np-color-tertiary-container);
+		--_icon-color: var(--np-color-on-tertiary-container);
+	}
+
+	.np-fab-lowered {
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-1));
+	}
+
+	@media (hover: hover) {
+		.np-extended-fab:not(:disabled):hover {
+			background-color: color-mix(
+				in srgb,
+				var(--np-fab-icon-color, var(--_icon-color)) 8%,
+				var(--np-fab-container-color, var(--_container-color))
+			);
+		}
+		.np-fab-lowered:not(:disabled):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;
+		fill: currentColor;
+		pointer-events: none;
+	}
+</style>

package/dist/fab/ExtendedFab.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../internal/focus-ring.css';
+import type { ExtendedFabProps } from './types.ts';
+declare const ExtendedFab: import("svelte").Component<ExtendedFabProps, {}, "element">;
+type ExtendedFab = ReturnType<typeof ExtendedFab>;
+export default ExtendedFab;

package/dist/fab/Fab.svelte

@@ -0,0 +1,211 @@
+<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'
+	import type { FabProps } from './types.js'
+
+	let {
+		variant = 'primary-container',
+		size = 's',
+		shape = 'round',
+		lowered = false,
+		disabled = false,
+		icon,
+		label,
+		element = $bindable(),
+		...attributes
+	}: FabProps = $props()
+
+	const uid = $props.id()
+
+	const isLink = $derived(attributes.href != null && !disabled)
+	const tooltipId = $derived(label && !disabled ? uid : undefined)
+
+	const morph = pressMorph()
+	morph.supersededBy(() => shape)
+
+	const handlePress = () => {
+		if (disabled) return
+		morph.press()
+	}
+
+	const classes = $derived([
+		'np-fab',
+		'np-focus-ring',
+		`np-fab-${variant}`,
+		size,
+		shape,
+		lowered && 'np-fab-lowered',
+		morph.pressed && 'pressed',
+		attributes.class,
+	])
+</script>
+
+{#snippet content()}
+	{#if !disabled}
+		<Ripple forElement={element} />
+	{/if}
+	{#if icon}
+		<span class="np-fab-icon">{@render icon()}</span>
+	{/if}
+{/snippet}
+
+{#if isLink}
+	<a
+		{...attributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={label || attributes['aria-label']}
+		class={classes}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={label || attributes['aria-label']}
+		type={(attributes['type'] as HTMLButtonAttributes['type']) ?? 'button'}
+		{disabled}
+		class={classes}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+{#if tooltipId}
+	<Tooltip id={tooltipId}>{label}</Tooltip>
+{/if}
+
+<style>
+	.np-fab {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		border-width: 0;
+		cursor: pointer;
+		font: inherit;
+		text-decoration: none;
+		-webkit-tap-highlight-color: transparent;
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
+		background-color: var(--np-fab-container-color, var(--_container-color));
+		color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-hover-color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-pressed-color: var(--np-fab-icon-color, var(--_icon-color));
+	}
+
+	.round {
+		border-radius: var(--np-fab-shape, 50%);
+	}
+	.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, 50%);
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab {
+			transition:
+				border-radius var(--np-motion-expressive-default-spatial),
+				box-shadow var(--np-motion-expressive-fast-effects),
+				background-color var(--np-motion-expressive-fast-effects);
+		}
+	}
+
+	.s {
+		width: 3.5rem;
+		height: 3.5rem;
+		--_square-radius: 1rem;
+		--np-icon-size: 1.5rem;
+	}
+	.m {
+		width: 5rem;
+		height: 5rem;
+		--_square-radius: 1.25rem;
+		--np-icon-size: 1.75rem;
+	}
+	.l {
+		width: 6rem;
+		height: 6rem;
+		--_square-radius: 1.75rem;
+		--np-icon-size: 2.25rem;
+	}
+
+	.np-fab-primary {
+		--_container-color: var(--np-color-primary);
+		--_icon-color: var(--np-color-on-primary);
+	}
+	.np-fab-secondary {
+		--_container-color: var(--np-color-secondary);
+		--_icon-color: var(--np-color-on-secondary);
+	}
+	.np-fab-tertiary {
+		--_container-color: var(--np-color-tertiary);
+		--_icon-color: var(--np-color-on-tertiary);
+	}
+	.np-fab-primary-container {
+		--_container-color: var(--np-color-primary-container);
+		--_icon-color: var(--np-color-on-primary-container);
+	}
+	.np-fab-secondary-container {
+		--_container-color: var(--np-color-secondary-container);
+		--_icon-color: var(--np-color-on-secondary-container);
+	}
+	.np-fab-tertiary-container {
+		--_container-color: var(--np-color-tertiary-container);
+		--_icon-color: var(--np-color-on-tertiary-container);
+	}
+
+	.np-fab-lowered {
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-1));
+	}
+
+	@media (hover: hover) {
+		.np-fab:not(:disabled):hover {
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
+			background-color: color-mix(
+				in srgb,
+				var(--np-fab-icon-color, var(--_icon-color)) 8%,
+				var(--np-fab-container-color, var(--_container-color))
+			);
+		}
+		.np-fab-lowered:not(:disabled):hover {
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));
+		}
+	}
+
+	.np-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;
+		fill: currentColor;
+		pointer-events: none;
+	}
+</style>

package/dist/fab/Fab.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../internal/focus-ring.css';
+import type { FabProps } from './types.ts';
+declare const Fab: import("svelte").Component<FabProps, {}, "element">;
+type Fab = ReturnType<typeof Fab>;
+export default Fab;