@wells-nelson/displays 1.0.1 → 1.0.2

package/README.md

@@ -15,13 +15,14 @@ import '@wells-nelson/displays/palettes/green.css';
 Tokens: `--bg`, `--surface`, `--surface-2`, `--surface-hover`, `--text`, `--muted`, `--border`,
 `--border-strong`, `--accent`, `--accent-strong`, `--accent-text`, `--accent-soft`, `--on-accent`,
 `--danger`, `--danger-soft`, `--warning`, `--warning-soft`, `--radius`, `--radius-lg`, `--shadow`,
-`--shadow-lg`, `--header-h`, `--header-offset`, `--content-w`. Helpers: `.page`, `.page-title`,
+`--shadow-lg`, `--header-h`, `--header-offset`, `--content-w`, `--tabbar-h`, `--footer-offset`
+(the space fixed bottom UI leaves for a `TabBar`; 0 without one). Helpers: `.page`, `.page-title`,
 `.stack`, `.card`, `.row-card`, `.muted`, `.notice`, `.empty`, `.visually-hidden`, plus
 drag-and-drop classes. Keep app-only tokens in the app's own stylesheet.
 
 ## Icons
 
-The base set: alert, check, chevron, cloud, cloud-pending, gear, grip, mail, pencil, plus,
+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:
 
 ```ts
@@ -46,6 +47,15 @@ registerIcons({ calendar: '<rect …/>', folder: '<path …/>' }); // 24x24, str
 	{#snippet nav()}<IconButton icon="calendar" label="Schedule" href={…} active={…} />{/snippet}
 </AppHeader>
 
+<!-- Phones: a bottom tab bar instead of the header (set --header-h: 0px at that width). -->
+<TabBar
+	items={[
+		{ label: 'Home', icon: 'home', href: resolve('/'), active: routeId === '/' },
+		{ label: 'Schedule', icon: 'calendar', href: projectId ? scheduleHref : undefined }, // no href: disabled
+		{ label: 'Profile', icon: 'user', href: resolve('/profile'), imageUrl: avatar, dot: unsynced, dotLabel: 'Unsynced changes' }
+	]}
+/>
+
 <SortableTable
 	title="Members"
 	rows={stats}

package/dist/TabBar.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import type { TabItem } from './types.js';
+
+	/**
+	 * 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.
+	 */
+	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');
+	});
+</script>
+
+{#snippet content(item: TabItem)}
+	<span class="icon">
+		{#if item.imageUrl}
+			<img src={item.imageUrl} alt="" referrerpolicy="no-referrer" />
+		{:else}
+			<Icon name={item.icon} size={24} />
+		{/if}
+		{#if item.dot}
+			<span class="dot" title={item.dotLabel}></span>
+		{/if}
+	</span>
+	<span class="label">{item.label}</span>
+	{#if item.dot && item.dotLabel}<span class="visually-hidden">({item.dotLabel})</span>{/if}
+{/snippet}
+
+<div class="spacer" aria-hidden="true"></div>
+<nav class="tab-bar" aria-label={label}>
+	{#each items as item (item.label)}
+		{#if item.href}
+			<a class="tab" class:active={item.active} href={item.href} aria-current={item.active ? 'page' : undefined}>
+				{@render content(item)}
+			</a>
+		{:else}
+			<span class="tab disabled" aria-disabled="true">{@render content(item)}</span>
+		{/if}
+	{/each}
+</nav>
+
+<style>
+	.spacer {
+		height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
+	}
+	.tab-bar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 50;
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: 1fr;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		background: var(--surface);
+		border-top: 1px solid var(--border);
+	}
+	.tab {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.15rem;
+		height: var(--tabbar-h);
+		color: var(--muted);
+		font-size: 0.72rem;
+		font-weight: 600;
+		text-decoration: none;
+		-webkit-touch-callout: none;
+		user-select: none;
+	}
+	.icon {
+		position: relative;
+		display: grid;
+		place-items: center;
+		width: 3.5rem;
+		height: 1.9rem;
+		border-radius: 1rem;
+		transition: background-color 0.15s;
+	}
+	.active {
+		color: var(--accent-text);
+	}
+	.active .icon {
+		background: var(--accent-soft);
+	}
+	.disabled {
+		opacity: 0.4;
+	}
+	img {
+		width: 1.6rem;
+		height: 1.6rem;
+		border-radius: 50%;
+	}
+	.dot {
+		position: absolute;
+		top: 0.1rem;
+		right: 0.95rem;
+		width: 0.6rem;
+		height: 0.6rem;
+		border-radius: 50%;
+		background: var(--warning);
+		border: 2px solid var(--surface);
+	}
+</style>

package/dist/TabBar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TabItem } from './types.js';
+type $$ComponentProps = {
+    items: TabItem[];
+    label?: string;
+};
+declare const TabBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabBar = ReturnType<typeof TabBar>;
+export default TabBar;

package/dist/icons.d.ts

@@ -11,6 +11,7 @@ export declare const baseIcons: {
     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 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\"/>";
     readonly mail: "<rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"2\"/><path d=\"M3.5 7l8.5 6 8.5-6\"/>";
     readonly pencil: "<path d=\"M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z\"/><path d=\"M13.5 6.5l4 4\"/>";
     readonly plus: "<path d=\"M12 5v14M5 12h14\"/>";

package/dist/icons.js

@@ -11,6 +11,7 @@ export const baseIcons = {
     '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"/>',
     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"/>',
     mail: '<rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3.5 7l8.5 6 8.5-6"/>',
     pencil: '<path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
     plus: '<path d="M12 5v14M5 12h14"/>',

package/dist/index.d.ts

@@ -9,5 +9,6 @@ export { default as Leaderboards } from './Leaderboards.svelte';
 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 { baseIcons, hasIcon, iconMarkup, registerIcons, type BaseIconName, type IconName } from './icons.js';
-export { sortRows, type Leaderboard, type SortableColumn } from './types.js';
+export { sortRows, type Leaderboard, type SortableColumn, type TabItem } from './types.js';

package/dist/index.js

@@ -9,5 +9,6 @@ export { default as Leaderboards } from './Leaderboards.svelte';
 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 { baseIcons, hasIcon, iconMarkup, registerIcons } from './icons.js';
 export { sortRows } from './types.js';

package/dist/theme.css

@@ -35,6 +35,9 @@
 	--header-h: 3.5rem;
 	--header-offset: calc(var(--header-h) + env(safe-area-inset-top, 0px));
 	--content-w: 42rem;
+	/* Bottom tab bar height (TabBar), and the space fixed bottom UI leaves for it (0 without one). */
+	--tabbar-h: 3.75rem;
+	--footer-offset: 0px;
 	font-family:
 		system-ui,
 		-apple-system,

package/dist/types.d.ts

@@ -1,3 +1,18 @@
+import type { IconName } from './icons.js';
+/** One destination of `TabBar`. */
+export interface TabItem {
+    label: string;
+    icon: IconName;
+    /** Where it goes; without one the tab shows disabled (e.g. nothing to open yet). */
+    href?: string;
+    /** The current section (highlighted, `aria-current="page"`). */
+    active?: boolean;
+    /** A round image instead of the icon, e.g. the signed-in user's avatar. */
+    imageUrl?: string | null;
+    /** A warning dot on the icon, e.g. unsynced changes; `dotLabel` says what it means. */
+    dot?: boolean;
+    dotLabel?: string;
+}
 /** A sortable column of `SortableTable`. */
 export interface SortableColumn<T> {
     /** Unique key; also what `sortKey` refers to. */

package/package.json

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