@joewinke/jatui 0.39.0 → 0.40.0

package/dist/components/IconButton.svelte

@@ -0,0 +1,200 @@
+<script module lang="ts">
+	export type IconButtonVariant =
+		| 'ghost'
+		| 'outline'
+		| 'soft'
+		| 'primary'
+		| 'secondary'
+		| 'error'
+		| 'overlay';
+	export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+</script>
+
+<script lang="ts">
+	/**
+	 * IconButton — an icon-only button with a REQUIRED accessible name.
+	 *
+	 * The square/circle `btn` that consumers hand-write hundreds of times
+	 * (`btn btn-sm btn-circle btn-ghost` + an inline svg + an aria-label that is
+	 * sometimes forgotten). `label` is required by the types, becomes the
+	 * aria-label, and — with `tooltip` — the hover/focus hint too.
+	 *
+	 *   <IconButton label="Edit" onclick={edit}><PencilIcon size={16} /></IconButton>
+	 *   <IconButton label="Pin" pressed={pinned} tooltip onclick={toggle}>…</IconButton>
+	 *   <IconButton label="Open" href="/x" shape="circle" variant="outline">…</IconButton>
+	 *
+	 * `variant="overlay"` is light-on-dark translucent chrome for controls that
+	 * sit over media (lightboxes, video stages) where a ghost button vanishes.
+	 *
+	 * Idea from BoardUI's icon-button (MIT); written fresh for Svelte 5 + jatui
+	 * tokens.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction, type TooltipOptions } from '../actions/tooltip';
+
+	interface Props
+		extends Omit<
+			HTMLButtonAttributes,
+			'type' | 'disabled' | 'class' | 'onclick' | 'children' | 'aria-label'
+		> {
+		/** Accessible name — required. Rendered as aria-label (and the tooltip text). */
+		label: string;
+		variant?: IconButtonVariant;
+		size?: IconButtonSize;
+		shape?: 'square' | 'circle';
+		/** Render an `<a>` instead of a `<button>`. */
+		href?: string;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		/** Toggle semantics — renders aria-pressed and the pressed surface. */
+		pressed?: boolean;
+		/** Show a tooltip: `true` uses `label`; a string shows that text instead (e.g. with a shortcut). */
+		tooltip?: boolean | string;
+		tooltipPlacement?: TooltipOptions['placement'];
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		/** The icon. Size it to the button (16px for sm/md is the house default). */
+		children?: Snippet;
+	}
+
+	let {
+		label,
+		variant = 'ghost',
+		size = 'md',
+		shape = 'square',
+		href,
+		type = 'button',
+		disabled = false,
+		pressed,
+		tooltip = false,
+		tooltipPlacement = 'top',
+		class: className = '',
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const VARIANT: Record<IconButtonVariant, string> = {
+		ghost: 'btn-ghost',
+		outline: 'btn-outline',
+		soft: 'btn-soft',
+		primary: 'btn-primary',
+		secondary: 'btn-secondary',
+		error: 'btn-error',
+		overlay: 'jatui-icon-btn--overlay'
+	};
+	const SIZE: Record<IconButtonSize, string> = {
+		xs: 'btn-xs',
+		sm: 'btn-sm',
+		md: '',
+		lg: 'btn-lg'
+	};
+
+	const classes = $derived(
+		[
+			'btn jatui-icon-btn',
+			shape === 'circle' ? 'btn-circle' : 'btn-square',
+			VARIANT[variant] ?? 'btn-ghost',
+			SIZE[size],
+			pressed ? 'jatui-icon-btn--pressed' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const ariaPressed = $derived(pressed === undefined ? undefined : pressed ? 'true' : 'false');
+	const tipText = $derived(typeof tooltip === 'string' ? tooltip : tooltip ? label : '');
+
+	/** use:tooltip only when asked for — no aria-describedby noise otherwise. */
+	function maybeTooltip(node: HTMLElement, text: string) {
+		let handle: ReturnType<typeof tooltipAction> | undefined;
+		const apply = (t: string) => {
+			if (t && !handle) handle = tooltipAction(node, { text: t, placement: tooltipPlacement });
+			else if (t && handle) handle.update?.({ text: t, placement: tooltipPlacement });
+			else if (!t && handle) {
+				handle.destroy?.();
+				handle = undefined;
+			}
+		};
+		apply(text);
+		return { update: apply, destroy: () => handle?.destroy?.() };
+	}
+</script>
+
+{#if href && !disabled}
+	<a
+		{...rest as Record<string, unknown>}
+		{href}
+		class={classes}
+		aria-label={label}
+		aria-pressed={ariaPressed}
+		{onclick}
+		use:maybeTooltip={tipText}
+	>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else}
+	<button
+		{...rest}
+		{type}
+		{disabled}
+		class={classes}
+		aria-label={label}
+		aria-pressed={ariaPressed}
+		{onclick}
+		use:maybeTooltip={tipText}
+	>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}
+
+<style>
+	/* Flat (no DaisyUI v5 variant shadow), press squish, token focus ring. */
+	.jatui-icon-btn {
+		--btn-shadow: 0 0 0 0 transparent;
+		transition:
+			transform 500ms var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-icon-btn:active:not(:disabled) {
+		transform: scale(0.92);
+		transition: transform var(--motion-instant, 80ms) ease-out;
+	}
+	.jatui-icon-btn:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+	}
+	.jatui-icon-btn--pressed:not(.btn-primary):not(.btn-secondary):not(.btn-error) {
+		background-color: var(
+			--jatui-selection-bg,
+			color-mix(in oklab, var(--color-primary) 14%, transparent)
+		);
+		color: var(--color-primary);
+	}
+
+	/* Over media: translucent light chrome that reads on any image or video. */
+	.jatui-icon-btn--overlay {
+		--btn-color: color-mix(in oklab, white 10%, transparent);
+		--btn-fg: color-mix(in oklab, white 95%, transparent);
+		--btn-border: color-mix(in oklab, white 15%, transparent);
+		--btn-noise: none;
+		background-color: color-mix(in oklab, white 10%, transparent);
+		border: 1px solid color-mix(in oklab, white 15%, transparent);
+		color: color-mix(in oklab, white 95%, transparent);
+	}
+	.jatui-icon-btn--overlay:hover {
+		background-color: color-mix(in oklab, white 20%, transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-icon-btn,
+		.jatui-icon-btn:active:not(:disabled) {
+			transform: none;
+			transition: none;
+		}
+	}
+</style>

package/dist/components/IconButton.svelte.d.ts

@@ -0,0 +1,46 @@
+export type IconButtonVariant = 'ghost' | 'outline' | 'soft' | 'primary' | 'secondary' | 'error' | 'overlay';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+     * IconButton — an icon-only button with a REQUIRED accessible name.
+     *
+     * The square/circle `btn` that consumers hand-write hundreds of times
+     * (`btn btn-sm btn-circle btn-ghost` + an inline svg + an aria-label that is
+     * sometimes forgotten). `label` is required by the types, becomes the
+     * aria-label, and — with `tooltip` — the hover/focus hint too.
+     *
+     *   <IconButton label="Edit" onclick={edit}><PencilIcon size={16} /></IconButton>
+     *   <IconButton label="Pin" pressed={pinned} tooltip onclick={toggle}>…</IconButton>
+     *   <IconButton label="Open" href="/x" shape="circle" variant="outline">…</IconButton>
+     *
+     * `variant="overlay"` is light-on-dark translucent chrome for controls that
+     * sit over media (lightboxes, video stages) where a ghost button vanishes.
+     *
+     * Idea from BoardUI's icon-button (MIT); written fresh for Svelte 5 + jatui
+     * tokens.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type TooltipOptions } from '../actions/tooltip';
+interface Props extends Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'class' | 'onclick' | 'children' | 'aria-label'> {
+    /** Accessible name — required. Rendered as aria-label (and the tooltip text). */
+    label: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    shape?: 'square' | 'circle';
+    /** Render an `<a>` instead of a `<button>`. */
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    /** Toggle semantics — renders aria-pressed and the pressed surface. */
+    pressed?: boolean;
+    /** Show a tooltip: `true` uses `label`; a string shows that text instead (e.g. with a shortcut). */
+    tooltip?: boolean | string;
+    tooltipPlacement?: TooltipOptions['placement'];
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    /** The icon. Size it to the button (16px for sm/md is the house default). */
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/LinkButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	/**
+	 * LinkButton — a text action that looks like a link: no box, underline on
+	 * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+	 * pick by what it DOES (navigates vs acts), not by how it looks.
+	 *
+	 *   <LinkButton onclick={resend}>Resend code</LinkButton>
+	 *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+	 *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+	 *
+	 * `external` opens a new tab with rel="noopener noreferrer" and tells
+	 * screen-reader users so. Idea from BoardUI's link-button (MIT).
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		/** Ink: inherit the surrounding text, primary accent, muted, or error. */
+		tone?: 'inherit' | 'primary' | 'muted' | 'error';
+		size?: 'xs' | 'sm' | 'md';
+		/** Underline: on hover/focus only (default) or always. */
+		underline?: 'hover' | 'always';
+		/** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+		external?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	}
+
+	let {
+		href,
+		tone = 'primary',
+		size = 'sm',
+		underline = 'hover',
+		external = false,
+		type = 'button',
+		disabled = false,
+		class: className = '',
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const TONE = {
+		inherit: '',
+		primary: 'link-primary',
+		muted: 'jatui-link-btn--muted',
+		error: 'link-error'
+	} as const;
+	const SIZE = { xs: 'text-xs', sm: 'text-sm', md: 'text-base' } as const;
+
+	const classes = $derived(
+		[
+			'link jatui-link-btn',
+			underline === 'hover' ? 'link-hover' : '',
+			TONE[tone] ?? '',
+			SIZE[size] ?? '',
+			disabled ? 'jatui-link-btn--disabled' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+{#if href && !disabled}
+	<a
+		{...rest}
+		{href}
+		class={classes}
+		target={external ? '_blank' : rest.target as string | undefined}
+		rel={external ? 'noopener noreferrer' : rest.rel as string | undefined}
+		{onclick}
+	>
+		{#if children}{@render children()}{/if}
+		{#if external}<span class="sr-only"> (opens in a new tab)</span>{/if}
+	</a>
+{:else}
+	<button {...rest} {type} {disabled} class={classes} {onclick}>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}
+
+<style>
+	.jatui-link-btn {
+		display: inline;
+		padding: 0;
+		background: none;
+		border: 0;
+		font-weight: 500;
+		text-underline-offset: 0.2em;
+		cursor: pointer;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		transition: color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-link-btn:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+		text-decoration-line: underline;
+	}
+	.jatui-link-btn--muted {
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+	}
+	.jatui-link-btn--muted:hover {
+		color: var(--color-base-content);
+	}
+	.jatui-link-btn--disabled,
+	.jatui-link-btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		text-decoration: none;
+	}
+</style>

package/dist/components/LinkButton.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+     * LinkButton — a text action that looks like a link: no box, underline on
+     * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+     * pick by what it DOES (navigates vs acts), not by how it looks.
+     *
+     *   <LinkButton onclick={resend}>Resend code</LinkButton>
+     *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+     *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+     *
+     * `external` opens a new tab with rel="noopener noreferrer" and tells
+     * screen-reader users so. Idea from BoardUI's link-button (MIT).
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    /** Ink: inherit the surrounding text, primary accent, muted, or error. */
+    tone?: 'inherit' | 'primary' | 'muted' | 'error';
+    size?: 'xs' | 'sm' | 'md';
+    /** Underline: on hover/focus only (default) or always. */
+    underline?: 'hover' | 'always';
+    /** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+    external?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/MediaLightbox.svelte

@@ -24,6 +24,7 @@
 	 *   ]} initialIndex={0} onClose={close} />
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { fade } from 'svelte/transition';
 
 	export type MediaItem = {
@@ -175,9 +176,7 @@
 				>
 					Download
 				</a>
-				<button type="button" class="mlb-btn mlb-close" onclick={close} aria-label="Close">
-					×
-				</button>
+				<CloseButton label="Close" variant="overlay" shape="square" onclick={close} />
 			</div>
 		</div>
 
@@ -288,10 +287,6 @@
 	.mlb-btn:hover {
 		background: oklch(1 0 0 / 0.2);
 	}
-	.mlb-close {
-		font-size: 1.25rem;
-		line-height: 1;
-	}
 	.mlb-nav {
 		position: absolute;
 		top: 50%;

package/dist/components/Modal.svelte

@@ -6,6 +6,7 @@
 	 * Converted from Svelte 4 to Svelte 5 runes.
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { onMount, untrack } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import { fly, fade } from 'svelte/transition';
@@ -241,16 +242,7 @@
 						{/if}
 
 						{#if showCloseButton && dismissible}
-							<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={close} aria-label="Close modal">
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
-							</button>
+							<CloseButton label="Close modal" onclick={close} />
 						{/if}
 					</div>
 				{/if}

package/dist/components/PinInput.svelte

@@ -1,4 +1,20 @@
 <script lang="ts">
+	/**
+	 * PinInput — one box per character for PINs and one-time codes.
+	 *
+	 * OTP autofill (BoardUI wave 1, jatui-owg2z): every cell carries
+	 * `autocomplete="one-time-code"` and accepts multi-character input (no
+	 * maxlength), so iOS/Android SMS autofill and Chrome WebOTP — which drop
+	 * the WHOLE code into whichever cell is focused — fill every cell from the
+	 * first. A paste distributes from the caret cell. Logic: utils/pinInput.ts.
+	 */
+	import {
+		applyCellInput,
+		cellsFromValue,
+		distribute,
+		isPinComplete
+	} from '../utils/pinInput';
+
 	interface Props {
 		length?: number;
 		value?: string;
@@ -7,6 +23,10 @@
 		error?: string;
 		disabled?: boolean;
 		label?: string;
+		/** `name` on the first cell, so a plain form post carries the code. */
+		name?: string;
+		/** Override the autocomplete token. Default `one-time-code`; use `off` for a static PIN. */
+		autocomplete?: HTMLInputElement['autocomplete'];
 		oncomplete?: (value: string) => void;
 	}
 
@@ -18,14 +38,27 @@
 		error = '',
 		disabled = false,
 		label = '',
+		name,
+		autocomplete = 'one-time-code',
 		oncomplete
 	}: Props = $props();
 
-	let cells: string[] = $state(Array(length).fill(''));
+	// Cells mirror `value`; an external write (reset, prefill) re-seeds them.
+	let cells: string[] = $state(cellsFromValue(value, length, numeric));
 	let inputEls: HTMLInputElement[] = $state([]);
 	let poppingCells: boolean[] = $state(Array(length).fill(false));
 	let shaking = $state(false);
 	let hadError = false;
+	let lastCompleted = '';
+
+	$effect(() => {
+		const v = value ?? '';
+		const n = length;
+		if (v !== cells.join('') || cells.length !== n) {
+			cells = cellsFromValue(v, n, numeric);
+			poppingCells = Array(n).fill(false);
+		}
+	});
 
 	$effect(() => {
 		const hasError = !!error;
@@ -48,50 +81,73 @@
 		setTimeout(() => { poppingCells[i] = false; }, 350);
 	}
 
-	function onInput(i: number, e: Event) {
-		const el = e.target as HTMLInputElement;
-		let char = el.value;
-
-		if (numeric) char = char.replace(/\D/g, '');
-
-		if (char.length > 1) {
-			// paste — split across cells
-			const chars = char.slice(0, length - i).split('');
-			chars.forEach((c, offset) => {
-				if (i + offset < length) {
-					cells[i + offset] = c;
-					if (c) popCell(i + offset);
-				}
-			});
-			const nextIdx = Math.min(i + chars.length, length - 1);
-			inputEls[nextIdx]?.focus();
-		} else {
-			cells[i] = char.slice(-1);
-			if (cells[i]) {
-				popCell(i);
-				inputEls[i + 1]?.focus();
+	function commit(next: string[], focus: number) {
+		next.forEach((c, i) => {
+			if (c && c !== cells[i]) popCell(i);
+		});
+		cells = next;
+		// The DOM value may hold extra characters (no maxlength, so OS autofill
+		// can deliver a whole code) — write each cell back to its single char.
+		inputEls.forEach((el, i) => {
+			if (el && el.value !== next[i]) el.value = next[i];
+		});
+		value = next.join('');
+		inputEls[focus]?.focus();
+		if (isPinComplete(next, length)) {
+			if (value !== lastCompleted) {
+				lastCompleted = value;
+				oncomplete?.(value);
 			}
+		} else {
+			lastCompleted = '';
 		}
+	}
 
-		value = cells.join('');
-		if (value.length === length && !value.includes('')) {
-			oncomplete?.(value);
-		}
+	function onInput(i: number, e: Event) {
+		const el = e.target as HTMLInputElement;
+		const r = applyCellInput(cells, i, el.value, { length, numeric });
+		commit(r.cells, r.focus);
+	}
+
+	function onPaste(i: number, e: ClipboardEvent) {
+		const text = e.clipboardData?.getData('text') ?? '';
+		if (!text) return;
+		e.preventDefault();
+		const r = distribute(cells, i, text, { length, numeric });
+		commit(r.cells, r.focus);
 	}
 
 	function onKeydown(i: number, e: KeyboardEvent) {
 		if (e.key === 'Backspace') {
+			e.preventDefault();
 			if (!cells[i]) {
-				inputEls[i - 1]?.focus();
+				if (i > 0) {
+					const next = [...cells];
+					next[i - 1] = '';
+					commit(next, i - 1);
+				}
 			} else {
-				cells[i] = '';
-				value = cells.join('');
+				const next = [...cells];
+				next[i] = '';
+				commit(next, i);
 			}
+		} else if (e.key === 'Delete') {
 			e.preventDefault();
+			const next = [...cells];
+			next[i] = '';
+			commit(next, i);
 		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
 			inputEls[i - 1]?.focus();
 		} else if (e.key === 'ArrowRight') {
+			e.preventDefault();
 			inputEls[i + 1]?.focus();
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			inputEls[0]?.focus();
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			inputEls[length - 1]?.focus();
 		}
 	}
 
@@ -111,6 +167,7 @@
 
 	<div
 		class="flex gap-2"
+		dir="ltr"
 		role="group"
 		aria-label={label || 'PIN input'}
 		aria-describedby={error ? `${groupId}-error` : undefined}
@@ -120,7 +177,12 @@
 				bind:this={inputEls[i]}
 				type={masked ? 'password' : 'text'}
 				inputmode={numeric ? 'numeric' : 'text'}
-				maxlength={1}
+				pattern={numeric ? '[0-9]*' : undefined}
+				autocomplete={autocomplete as any}
+				name={i === 0 ? name : undefined}
+				dir="ltr"
+				spellcheck="false"
+				autocapitalize="off"
 				value={cells[i]}
 				{disabled}
 				aria-label={`Digit ${i + 1} of ${length}`}
@@ -129,6 +191,7 @@
 				class:pin-cell--filled={!!cells[i]}
 				class:pin-cell--pop={poppingCells[i]}
 				oninput={(e) => onInput(i, e)}
+				onpaste={(e) => onPaste(i, e)}
 				onkeydown={(e) => onKeydown(i, e)}
 				onfocus={(e) => onFocus(e.target as HTMLInputElement)}
 			/>

package/dist/components/PinInput.svelte.d.ts

@@ -6,6 +6,10 @@ interface Props {
     error?: string;
     disabled?: boolean;
     label?: string;
+    /** `name` on the first cell, so a plain form post carries the code. */
+    name?: string;
+    /** Override the autocomplete token. Default `one-time-code`; use `off` for a static PIN. */
+    autocomplete?: HTMLInputElement['autocomplete'];
     oncomplete?: (value: string) => void;
 }
 declare const PinInput: import("svelte").Component<Props, {}, "value">;