@wells-nelson/displays 1.0.2 → 1.0.4

package/README.md

@@ -20,10 +20,15 @@ Tokens: `--bg`, `--surface`, `--surface-2`, `--surface-hover`, `--text`, `--mute
 `.stack`, `.card`, `.row-card`, `.muted`, `.notice`, `.empty`, `.visually-hidden`, plus
 drag-and-drop classes. Keep app-only tokens in the app's own stylesheet.
 
+Date and time inputs (`date`, `time`, `datetime-local`) match the text inputs, and on iOS keep a
+fixed size whatever their value. On touch screens text can't be selected (a long press acts like an
+app, not a page), except in fields and anything marked `.selectable`; `Leaderboards` and
+`SortableTable` are.
+
 ## Icons
 
-The base set: alert, check, chevron, cloud, cloud-pending, gear, grip, home, mail, pencil, plus,
-refresh, search, share, trash, undo, user, wifi-off, x. Register app icons at startup:
+The base set: alert, check, chevron, cloud, cloud-pending, download, gear, grip, home, mail, pencil, plus,
+refresh, search, share, trash, undo, upload, user, wifi-off, x. Register app icons at startup:
 
 ```ts
 import { registerIcons } from '@wells-nelson/displays';
@@ -42,12 +47,13 @@ registerIcons({ calendar: '<rect …/>', folder: '<path …/>' }); // 24x24, str
 	unsynced={cloud.hasAnyPending || cloud.sessionExpired}
 	hideOnScroll
 	width={isDashboard ? '64rem' : undefined}
+	labels="always"
 >
 	{#snippet brand()}MA{/snippet}
-	{#snippet nav()}<IconButton icon="calendar" label="Schedule" href={…} active={…} />{/snippet}
+	{#snippet nav()}<IconButton icon="calendar" label="Schedule" href={…} active={…} showLabel />{/snippet}
 </AppHeader>
 
-<!-- Phones: a bottom tab bar instead of the header (set --header-h: 0px at that width). -->
+<!-- Phones: a bottom tab bar instead of the header. -->
 <TabBar
 	items={[
 		{ label: 'Home', icon: 'home', href: resolve('/'), active: routeId === '/' },
@@ -75,6 +81,24 @@ registerIcons({ calendar: '<rect …/>', folder: '<path …/>' }); // 24x24, str
 <FatalError error={app.fatal} />
 ```
 
+Nav buttons with `showLabel` show their label to the right of the icon. `AppHeader`'s `labels` decides
+which: `always` (default) all of them, `active` only the current one. `profileShowLabel` does the same
+for the avatar (off by default).
+
+**Phones.** Show a `TabBar` instead of the `AppHeader` when `phoneLayout.current` is true: narrow
+screens (up to 40rem) and touch screens held sideways (up to 30rem tall). It goes by the screen,
+not the user agent, which can't tell an iPad from a Mac; the query is `PHONE_LAYOUT_QUERY`. While
+mounted, `TabBar` sets `--header-h: 0px` so pages start at the top, and `--footer-offset` so fixed
+bottom UI sits above it.
+
+```svelte
+<script>
+	import { phoneLayout } from '@wells-nelson/displays';
+</script>
+
+{#if phoneLayout.current}<TabBar items={…} />{:else}<AppHeader …>…</AppHeader>{/if}
+```
+
 `Button` (primary / secondary / danger / ghost, optional icon, `block`), `IconButton` (button or
-link, required label, `active`), `Modal` (native `<dialog>`, sm / md / lg) and `ConfirmDialog`
+link, required label, `active`, `showLabel`), `Modal` (native `<dialog>`, sm / md / lg) and `ConfirmDialog`
 (danger variant, busy state) complete the set. See them all in the sandbox (`npm run sandbox`).

package/dist/AppHeader.svelte

@@ -19,14 +19,19 @@
 		unsynced = false,
 		unsyncedLabel = 'Unsynced changes',
 		hideOnScroll = false,
-		width = 'var(--content-w)'
+		width = 'var(--content-w)',
+		labels = 'always',
+		profileShowLabel = false
 	}: {
 		/** Brand mark, rendered inside the home link. */
 		brand: Snippet;
 		brandHref: string;
 		/** Accessible name of the home link, e.g. "Home — all projects". */
 		brandLabel: string;
-		/** Context navigation, usually `IconButton`s with `href`. */
+		/**
+		 * Context navigation, usually `IconButton`s with `href`. Give them `showLabel` to show their
+		 * label next to the icon (see `labels`).
+		 */
 		nav?: Snippet;
 		/** Development-only tools; the app passes this only in dev builds. */
 		dev?: Snippet;
@@ -41,6 +46,13 @@
 		hideOnScroll?: boolean;
 		/** Max width of the header content (CSS length), e.g. a wider value on dashboard screens. */
 		width?: string;
+		/**
+		 * Which nav buttons with `showLabel` show their label: `always` all of them, `active` only the
+		 * current one (the others show just the icon).
+		 */
+		labels?: 'always' | 'active';
+		/** Show `profileLabel` next to the avatar, like a nav button with `showLabel`. */
+		profileShowLabel?: boolean;
 	} = $props();
 
 	let scrolledAway = $state(false);
@@ -68,18 +80,28 @@
 <header class="app-header" class:hidden>
 	<div class="inner" style:max-width={width}>
 		<a class="brand" href={brandHref} aria-label={brandLabel}>{@render brand()}</a>
-		<nav aria-label="Main">
+		<nav aria-label="Main" class="labels-{labels}">
 			{@render dev?.()}
 			{@render nav?.()}
-			<a class="profile" href={profileHref} aria-label={profileLabel} title={profileLabel} class:active={profileActive}>
-				{#if avatarUrl}
-					<img src={avatarUrl} alt="" referrerpolicy="no-referrer" />
-				{:else}
-					<Icon name="user" size={22} />
-				{/if}
-				{#if unsynced}
-					<span class="dot" title={unsyncedLabel}></span>
-				{/if}
+			<a
+				class="profile"
+				class:labeled={profileShowLabel}
+				href={profileHref}
+				aria-label={profileLabel}
+				title={profileShowLabel ? undefined : profileLabel}
+				class:active={profileActive}
+			>
+				<span class="avatar">
+					{#if avatarUrl}
+						<img src={avatarUrl} alt="" referrerpolicy="no-referrer" />
+					{:else}
+						<Icon name="user" size={22} />
+					{/if}
+					{#if unsynced}
+						<span class="dot" title={unsyncedLabel}></span>
+					{/if}
+				</span>
+				{#if profileShowLabel}<span class="text" aria-hidden="true">{profileLabel}</span>{/if}
 			</a>
 		</nav>
 	</div>
@@ -118,15 +140,47 @@
 	nav {
 		display: flex;
 		align-items: center;
+		gap: 0.1rem;
+	}
+	/* labels="active": labeled buttons other than the current one show just their icon. */
+	.labels-active :global(.icon-btn.labeled:not(.active)) {
+		width: 2.5rem;
+		padding: 0;
+		justify-content: center;
+		border-radius: 50%;
+	}
+	.labels-active :global(.icon-btn.labeled:not(.active) .text),
+	.labels-active .profile.labeled:not(.active) .text {
+		display: none;
 	}
 	.profile {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		min-width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 1.25rem;
+		color: inherit;
+		text-decoration: none;
+	}
+	.profile.labeled {
+		padding: 0 0.85rem 0 0.3rem;
+	}
+	.labels-active .profile.labeled:not(.active) {
+		padding: 0;
+	}
+	.avatar {
 		position: relative;
 		display: grid;
 		place-items: center;
 		width: 2.5rem;
 		height: 2.5rem;
-		border-radius: 50%;
-		color: inherit;
+	}
+	.text {
+		font-size: 0.92rem;
+		font-weight: 600;
+		white-space: nowrap;
 	}
 	.profile:hover,
 	.profile.active {

package/dist/AppHeader.svelte.d.ts

@@ -5,7 +5,10 @@ type $$ComponentProps = {
     brandHref: string;
     /** Accessible name of the home link, e.g. "Home — all projects". */
     brandLabel: string;
-    /** Context navigation, usually `IconButton`s with `href`. */
+    /**
+     * Context navigation, usually `IconButton`s with `href`. Give them `showLabel` to show their
+     * label next to the icon (see `labels`).
+     */
     nav?: Snippet;
     /** Development-only tools; the app passes this only in dev builds. */
     dev?: Snippet;
@@ -20,6 +23,13 @@ type $$ComponentProps = {
     hideOnScroll?: boolean;
     /** Max width of the header content (CSS length), e.g. a wider value on dashboard screens. */
     width?: string;
+    /**
+     * Which nav buttons with `showLabel` show their label: `always` all of them, `active` only the
+     * current one (the others show just the icon).
+     */
+    labels?: 'always' | 'active';
+    /** Show `profileLabel` next to the avatar, like a nav button with `showLabel`. */
+    profileShowLabel?: boolean;
 };
 declare const AppHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppHeader = ReturnType<typeof AppHeader>;

package/dist/IconButton.svelte

@@ -9,7 +9,8 @@
 		onclick,
 		active = false,
 		size = 22,
-		disabled = false
+		disabled = false,
+		showLabel = false
 	}: {
 		icon: IconName;
 		label: string;
@@ -18,16 +19,43 @@
 		active?: boolean;
 		size?: number;
 		disabled?: boolean;
+		/**
+		 * Show the label to the right of the icon. In `AppHeader`'s nav, its `labels` option can
+		 * limit this to the active button.
+		 */
+		showLabel?: boolean;
 	} = $props();
 </script>
 
+{#snippet content()}
+	<Icon name={icon} {size} />
+	{#if showLabel}<span class="text" aria-hidden="true">{label}</span>{/if}
+{/snippet}
+
 {#if href}
-	<a class="icon-btn" class:active {href} aria-label={label} title={label} aria-current={active ? 'page' : undefined}>
-		<Icon name={icon} {size} />
+	<a
+		class="icon-btn"
+		class:active
+		class:labeled={showLabel}
+		{href}
+		aria-label={label}
+		title={showLabel ? undefined : label}
+		aria-current={active ? 'page' : undefined}
+	>
+		{@render content()}
 	</a>
 {:else}
-	<button type="button" class="icon-btn" class:active aria-label={label} title={label} {onclick} {disabled}>
-		<Icon name={icon} {size} />
+	<button
+		type="button"
+		class="icon-btn"
+		class:active
+		class:labeled={showLabel}
+		aria-label={label}
+		title={showLabel ? undefined : label}
+		{onclick}
+		{disabled}
+	>
+		{@render content()}
 	</button>
 {/if}
 
@@ -45,6 +73,19 @@
 		cursor: pointer;
 		text-decoration: none;
 	}
+	.labeled {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		width: auto;
+		padding: 0 0.85rem 0 0.6rem;
+		border-radius: 1.25rem;
+	}
+	.text {
+		font-size: 0.92rem;
+		font-weight: 600;
+		white-space: nowrap;
+	}
 	.icon-btn:hover:not(:disabled) {
 		background: var(--surface-hover);
 	}

package/dist/IconButton.svelte.d.ts

@@ -7,6 +7,11 @@ type $$ComponentProps = {
     active?: boolean;
     size?: number;
     disabled?: boolean;
+    /**
+     * Show the label to the right of the icon. In `AppHeader`'s nav, its `labels` option can
+     * limit this to the active button.
+     */
+    showLabel?: boolean;
 };
 declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/Leaderboards.svelte

@@ -16,7 +16,7 @@
 	} = $props();
 </script>
 
-<div class="boards" role="region" aria-label={label}>
+<div class="boards selectable" role="region" aria-label={label}>
 	{#each boards as board (board.title)}
 		<section class="board card">
 			<h2>{board.title}</h2>

package/dist/SortableTable.svelte

@@ -47,7 +47,7 @@
 	}
 </script>
 
-<section class="table-card card">
+<section class="table-card card selectable">
 	{#if title}<h2>{title}</h2>{/if}
 	{#if rows.length === 0}
 		<p class="muted empty-row">{emptyText}</p>

package/dist/TabBar.svelte

@@ -4,17 +4,21 @@
 
 	/**
 	 * Fixed bottom navigation for phones: one tab per top-level destination, icon over label.
-	 * Use it instead of `AppHeader` on small screens (set `--header-h: 0px` there so the page
-	 * starts at the top). While mounted it sets `--footer-offset` on <html>, which `SearchBar`,
-	 * `UndoButton` and other fixed bottom UI use to sit above it, and it leaves a spacer of its
-	 * height at the end of the page.
+	 * Use it instead of `AppHeader` on phones (`phoneLayout` says when). While mounted it sets
+	 * `--header-h: 0px` on <html>, so pages start at the top, and `--footer-offset`, which
+	 * `SearchBar`, `UndoButton` and other fixed bottom UI use to sit above it; it leaves a spacer
+	 * of its height at the end of the page.
 	 */
 	let { items, label = 'Main' }: { items: TabItem[]; label?: string } = $props();
 
 	$effect(() => {
 		const root = document.documentElement.style;
 		root.setProperty('--footer-offset', 'calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px))');
-		return () => root.removeProperty('--footer-offset');
+		root.setProperty('--header-h', '0px');
+		return () => {
+			root.removeProperty('--footer-offset');
+			root.removeProperty('--header-h');
+		};
 	});
 </script>
 

package/dist/icons.d.ts

@@ -9,6 +9,7 @@ export declare const baseIcons: {
     readonly chevron: "<path d=\"M6 9l6 6 6-6\"/>";
     readonly cloud: "<path d=\"M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z\"/>";
     readonly 'cloud-pending': "<path d=\"M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z\"/><path d=\"M12 10.5v5M9.8 12.7l2.2-2.2 2.2 2.2\"/>";
+    readonly download: "<path d=\"M12 4v11M7.5 10.5L12 15l4.5-4.5\"/><path d=\"M4.5 16v3a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-3\"/>";
     readonly gear: "<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z\"/>";
     readonly grip: "<circle cx=\"9\" cy=\"6\" r=\"1\"/><circle cx=\"15\" cy=\"6\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"18\" r=\"1\"/><circle cx=\"15\" cy=\"18\" r=\"1\"/>";
     readonly home: "<path d=\"M3.5 11L12 4l8.5 7\"/><path d=\"M6 9.5V20h4.5v-5.5h3V20H18V9.5\"/>";
@@ -19,6 +20,7 @@ export declare const baseIcons: {
     readonly search: "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"M20 20l-4.4-4.4\"/>";
     readonly share: "<circle cx=\"18\" cy=\"5.5\" r=\"2.5\"/><circle cx=\"6\" cy=\"12\" r=\"2.5\"/><circle cx=\"18\" cy=\"18.5\" r=\"2.5\"/><path d=\"M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1\"/>";
     readonly trash: "<path d=\"M4 7h16M10 11v6M14 11v6M5.5 7l1 12.5a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5l1-12.5M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7\"/>";
+    readonly upload: "<path d=\"M12 15V4M7.5 8.5L12 4l4.5 4.5\"/><path d=\"M4.5 16v3a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-3\"/>";
     readonly undo: "<path d=\"M9 14L4 9l5-5\"/><path d=\"M4 9h10.5a5.5 5.5 0 0 1 0 11H11\"/>";
     readonly user: "<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/>";
     readonly 'wifi-off': "<path d=\"M3 3l18 18M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 4.2-2.4M14.8 10.5A10 10 0 0 1 19 12.9M2 9a15 15 0 0 1 4.1-2.6M10.7 5.1A15 15 0 0 1 22 9\"/><circle cx=\"12\" cy=\"20\" r=\"0.6\"/>";

package/dist/icons.js

@@ -9,6 +9,7 @@ export const baseIcons = {
     chevron: '<path d="M6 9l6 6 6-6"/>',
     cloud: '<path d="M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z"/>',
     'cloud-pending': '<path d="M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z"/><path d="M12 10.5v5M9.8 12.7l2.2-2.2 2.2 2.2"/>',
+    download: '<path d="M12 4v11M7.5 10.5L12 15l4.5-4.5"/><path d="M4.5 16v3a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-3"/>',
     gear: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
     grip: '<circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/>',
     home: '<path d="M3.5 11L12 4l8.5 7"/><path d="M6 9.5V20h4.5v-5.5h3V20H18V9.5"/>',
@@ -19,6 +20,7 @@ export const baseIcons = {
     search: '<circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.4-4.4"/>',
     share: '<circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1"/>',
     trash: '<path d="M4 7h16M10 11v6M14 11v6M5.5 7l1 12.5a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5l1-12.5M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7"/>',
+    upload: '<path d="M12 15V4M7.5 8.5L12 4l4.5 4.5"/><path d="M4.5 16v3a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-3"/>',
     undo: '<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',
     user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
     'wifi-off': '<path d="M3 3l18 18M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 4.2-2.4M14.8 10.5A10 10 0 0 1 19 12.9M2 9a15 15 0 0 1 4.1-2.6M10.7 5.1A15 15 0 0 1 22 9"/><circle cx="12" cy="20" r="0.6"/>',

package/dist/index.d.ts

@@ -10,5 +10,6 @@ export { default as Modal } from './Modal.svelte';
 export { default as SortableTable } from './SortableTable.svelte';
 export { default as Splash } from './Splash.svelte';
 export { default as TabBar } from './TabBar.svelte';
+export { PHONE_LAYOUT_QUERY, phoneLayout } from './layout.js';
 export { baseIcons, hasIcon, iconMarkup, registerIcons, type BaseIconName, type IconName } from './icons.js';
 export { sortRows, type Leaderboard, type SortableColumn, type TabItem } from './types.js';

package/dist/index.js

@@ -10,5 +10,6 @@ export { default as Modal } from './Modal.svelte';
 export { default as SortableTable } from './SortableTable.svelte';
 export { default as Splash } from './Splash.svelte';
 export { default as TabBar } from './TabBar.svelte';
+export { PHONE_LAYOUT_QUERY, phoneLayout } from './layout.js';
 export { baseIcons, hasIcon, iconMarkup, registerIcons } from './icons.js';
 export { sortRows } from './types.js';

package/dist/layout.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Screens that get the phone layout (a bottom `TabBar` instead of the `AppHeader`): narrow ones,
+ * and touch screens that are short, i.e. a phone held sideways. Tablets and desktops keep the
+ * header. Device type comes from how the screen is used (pointer, size), not the user agent, which
+ * can't tell an iPad from a Mac.
+ */
+export declare const PHONE_LAYOUT_QUERY = "(max-width: 40rem), (pointer: coarse) and (max-height: 30rem)";
+/**
+ * Reactive `PHONE_LAYOUT_QUERY`: read `phoneLayout.current` in a component or effect. False where
+ * there's no `matchMedia` (server rendering, tests).
+ */
+export declare const phoneLayout: {
+    readonly current: boolean;
+};

package/dist/layout.js

@@ -0,0 +1,20 @@
+import { MediaQuery } from 'svelte/reactivity';
+/**
+ * Screens that get the phone layout (a bottom `TabBar` instead of the `AppHeader`): narrow ones,
+ * and touch screens that are short, i.e. a phone held sideways. Tablets and desktops keep the
+ * header. Device type comes from how the screen is used (pointer, size), not the user agent, which
+ * can't tell an iPad from a Mac.
+ */
+export const PHONE_LAYOUT_QUERY = '(max-width: 40rem), (pointer: coarse) and (max-height: 30rem)';
+let query;
+/**
+ * Reactive `PHONE_LAYOUT_QUERY`: read `phoneLayout.current` in a component or effect. False where
+ * there's no `matchMedia` (server rendering, tests).
+ */
+export const phoneLayout = {
+    get current() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return false;
+        return (query ??= new MediaQuery(PHONE_LAYOUT_QUERY)).current;
+    }
+};

package/dist/theme.css

@@ -109,6 +109,38 @@ input:not([type]) {
 	background: var(--surface);
 }
 
+/*
+ * Date and time inputs match the text inputs. iOS draws its own control that ignores the padding
+ * and changes size with the value, so there it's reset to a plain box of the same height.
+ */
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'] {
+	font: inherit;
+	color: inherit;
+	width: 100%;
+	min-height: calc(1.4em + 1.2rem + 2px);
+	padding: 0.6rem 0.75rem;
+	border: 1px solid var(--border-strong);
+	border-radius: var(--radius);
+	background: var(--surface);
+}
+
+@supports (-webkit-touch-callout: none) {
+	input[type='date'],
+	input[type='time'],
+	input[type='datetime-local'] {
+		-webkit-appearance: none;
+		appearance: none;
+		display: block;
+	}
+	input::-webkit-date-and-time-value {
+		margin: 0;
+		text-align: left;
+		min-height: 1.4em;
+	}
+}
+
 input:focus-visible {
 	outline: none;
 	border-color: var(--accent);
@@ -124,6 +156,27 @@ button {
 	color: inherit;
 }
 
+/*
+ * Touch screens: text can't be selected by accident (a long press selects instead of acting like
+ * an app). Fields, and anything marked `.selectable` (reports, tables, logs), still can.
+ * `Leaderboards` and `SortableTable` are selectable.
+ */
+@media (hover: none) and (pointer: coarse) {
+	body {
+		-webkit-user-select: none;
+		user-select: none;
+		-webkit-touch-callout: none;
+	}
+	input,
+	textarea,
+	[contenteditable],
+	.selectable {
+		-webkit-user-select: text;
+		user-select: text;
+		-webkit-touch-callout: default;
+	}
+}
+
 .visually-hidden {
 	position: absolute !important;
 	width: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wells-nelson/displays",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Svelte 5 display components and theme CSS shared by Wells Nelson apps.",
   "license": "MIT",
   "repository": {