@wells-nelson/displays 1.0.3 → 1.1.0

package/README.md

@@ -20,6 +20,11 @@ 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, download, gear, grip, home, mail, pencil, plus,
@@ -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/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.3",
+  "version": "1.1.0",
   "description": "Svelte 5 display components and theme CSS shared by Wells Nelson apps.",
   "license": "MIT",
   "repository": {