staffa 0.7.3 → 0.8.0

package/src/components/tabs.ts

@@ -1,5 +1,6 @@
 import A from "aberdeen";
 import { type Bindable, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
+import { mk } from "../icons-helpers.js";
 
 /** A single tab definition. */
 export interface Tab {
@@ -30,19 +31,55 @@ export interface TabsOptions {
 	contentAttrs?: Attributes;
 }
 
+// Chevrons for the scroll buttons, as inline SVG (the icon set's own helper, so
+// no icon data comes along) rather than `‹`/`›` characters — matching Lucide's
+// `chevron-left`/`chevron-right`.
+const chevronLeft = mk('<path d="m15 18-6-6 6-6"/>');
+const chevronRight = mk('<path d="m9 18 6-6-6-6"/>');
+
 A.insertGlobalCss({
 	".s-tabs": {
 		"&": "display:flex flex-direction:column gap:$3",
-		".s-tablist": "display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-faint;",
+		// The bar owns the hairline (so it runs the full width, under the scroll
+		// buttons too) and is the positioning context they overlay from.
+		".s-tabbar": "position:relative display:flex border-bottom: 1px solid $s-faint;",
+		// The strip scrolls horizontally when the tabs outgrow it. Its own scrollbar
+		// is hidden — a raw scrollbar under a tab row reads as a mistake — so the
+		// affordance is the pair of buttons below, plus the fade they sit in.
+		// `overflow-y:hidden` is load-bearing: `overflow-x:auto` alone forces the
+		// computed `overflow-y` off `visible`, which turned the active tab's 1px
+		// overhang into a stray couple of pixels of *vertical* scroll.
+		".s-tablist":
+			"display:flex gap:$1 align-items:stretch flex:1 min-width:0 " +
+			"overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth " +
+			// Pulls the strip 1px down over the bar's hairline, so the active tab's
+			// underline lands *on* it rather than stacking above it. On the strip, not
+			// the tabs: a negative margin inside a scroll container is overflow.
+			"margin-bottom:-1px",
 		".s-tablist::-webkit-scrollbar": "display:none",
 		".s-tab":
 			"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
-			"border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; " +
-			"border-bottom: 3px solid transparent; margin-bottom:-1px " +
+			"border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap " +
+			"border-bottom: 3px solid transparent; " +
 			"transition: color 0.15s, background 0.15s, border-color 0.15s;",
 		".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]": "color: $s-text;",
-".s-tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",
+		// An inset ring: the strip is a scroll container, so it clips its own
+		// painting, and an outset ring on the first/last tab would be shaved off.
+		".s-tab:focus-visible": "outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",
 		".s-tab[aria-selected=true]": "border-image: $s-gradient 1;",
+		// The scroll buttons overlay the strip's ends rather than sitting beside it,
+		// so no width is reserved when there's nothing to scroll — and the tabs slide
+		// out from under a fade instead of stopping at a hard edge.
+		".s-tabscroll":
+			"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center " +
+			"width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted " +
+			"transition: color 0.15s;",
+		".s-tabscroll:hover": "fg:$s-text",
+		".s-tabscroll-left": "left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",
+		".s-tabscroll-right": "right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",
+		// Shown only for the direction there is actually something to scroll towards,
+		// so the pair doubles as a position indicator.
+		".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right": "display:flex",
 		".s-tabpanel": "display:block",
 	},
 });
@@ -51,6 +88,11 @@ A.insertGlobalCss({
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).
  *
+ * More tabs than fit make the strip scroll sideways, with a ‹ / › button
+ * appearing over whichever end still has something to reach — a bare scroll area
+ * says nothing about itself to a mouse. Selecting a tab that's out of view
+ * (arrow keys, or a `bind` written from elsewhere) scrolls it back in.
+ *
  * @example
  * ```ts
  * S.tabs({ tabs: [
@@ -79,23 +121,33 @@ export function tabs(opts: TabsOptions): void {
 	};
 
 	A("div.s-tabs", opts.attrs, () => {
-		A("div.s-tablist role=tablist", () => {
-			opts.tabs.forEach((tab, index) => {
-				const key = keyOf(tab, index);
-				A("button.s-tab type=button role=tab", () => {
-					A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
-					A(() => {
-						const selected = $sel.value === key;
-						A("aria-selected=", selected ? "true" : "false");
-						A("tabindex=", selected ? "0" : "-1");
+		A("div.s-tabbar", () => {
+			const listEl = A("div.s-tablist role=tablist", () => {
+				opts.tabs.forEach((tab, index) => {
+					const key = keyOf(tab, index);
+					const tabEl = A("button.s-tab type=button role=tab", () => {
+						A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
+						A(() => {
+							const selected = $sel.value === key;
+							A("aria-selected=", selected ? "true" : "false");
+							A("tabindex=", selected ? "0" : "-1");
+							// Selecting a tab that's (partly) scrolled out brings it into
+							// view, so the strip follows the selection however it was made:
+							// a click, the arrow keys, or a `bind` written from elsewhere.
+							if (selected) requestAnimationFrame(() => reveal(tabEl as HTMLElement));
+						});
+						if (tab.disabled) A("disabled=true");
+						A("click=", () => select(tab, index));
+						A("keydown=", (e: KeyboardEvent) => onKey(e, opts.tabs, index, select));
+						drawSlot(tab.icon);
+						drawSlot(tab.label);
 					});
-					if (tab.disabled) A("disabled=true");
-					A("click=", () => select(tab, index));
-					A("keydown=", (e: KeyboardEvent) => onKey(e, opts.tabs, index, select));
-					drawSlot(tab.icon);
-					drawSlot(tab.label);
 				});
-			});
+			}) as HTMLElement;
+
+			drawScrollButton(listEl, -1);
+			drawScrollButton(listEl, 1);
+			watchScroll(listEl);
 		});
 
 		A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
@@ -111,6 +163,61 @@ export function tabs(opts: TabsOptions): void {
 	});
 }
 
+/**
+ * One of the two scroll buttons overlaying the ends of the strip. `dir` is -1 for
+ * the left one and 1 for the right. A page at a time (not a tab at a time): the
+ * strip scrolls smoothly, so a nudge that moved one tab would read as a twitch.
+ */
+function drawScrollButton(list: HTMLElement, dir: -1 | 1): void {
+	A(`button.s-tabscroll.s-tabscroll-${dir < 0 ? "left" : "right"} type=button`, () => {
+		// The tabs themselves are the real control; this is a convenience the strip
+		// offers a mouse. Keeping it out of the tab order means Tab still steps from
+		// the tablist straight into the panel.
+		A("tabindex=-1 aria-hidden=true");
+		A("click=", () => list.scrollBy({ left: dir * list.clientWidth * 0.8, behavior: "smooth" }));
+		(dir < 0 ? chevronLeft : chevronRight)({ size: "1.1em" });
+	});
+}
+
+/**
+ * Keep the `.s-can-left` / `.s-can-right` classes on the bar in step with what
+ * there is left to scroll towards, so each button appears exactly when it has
+ * somewhere to go. Watches the strip's own scrolling *and* its size (a resize, or
+ * tabs being added or removed, changes the answer without any scrolling at all).
+ */
+function watchScroll(list: HTMLElement): void {
+	const bar = list.parentElement;
+	if (!bar || typeof ResizeObserver === "undefined") return; // No-op outside the browser.
+	const update = () => {
+		// A sub-pixel slack: fractional layout widths otherwise leave a permanent
+		// half-pixel of "scrollable" at an end that is plainly already reached.
+		const max = list.scrollWidth - list.clientWidth;
+		bar.classList.toggle("s-can-left", list.scrollLeft > 1);
+		bar.classList.toggle("s-can-right", list.scrollLeft < max - 1);
+	};
+	list.addEventListener("scroll", update, { passive: true });
+	const ro = new ResizeObserver(update);
+	ro.observe(list);
+	for (const tab of Array.from(list.children)) ro.observe(tab);
+	update();
+	A.clean(() => {
+		list.removeEventListener("scroll", update);
+		ro.disconnect();
+	});
+}
+
+/** Scroll `el`'s strip just far enough to clear the buttons overlaying its ends. */
+function reveal(el: HTMLElement): void {
+	const list = el.parentElement;
+	if (!list || !el.isConnected) return;
+	// The overlays are 2.4em wide; clearing a little more than that keeps the tab
+	// from sitting right against one.
+	const pad = parseFloat(getComputedStyle(list).fontSize) * 2.6;
+	const tab = el.getBoundingClientRect(), strip = list.getBoundingClientRect();
+	if (tab.left < strip.left + pad) list.scrollBy({ left: tab.left - strip.left - pad, behavior: "smooth" });
+	else if (tab.right > strip.right - pad) list.scrollBy({ left: tab.right - strip.right + pad, behavior: "smooth" });
+}
+
 /** Roving-tabindex keyboard handling for the tab strip. */
 function onKey(
 	e: KeyboardEvent,

package/src/core.ts

@@ -54,6 +54,14 @@ export interface ContentOptions {
 	content?: Slot;
 }
 
+/**
+ * Shell width — not viewport width — at or below which the app shell goes
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * has room for exactly one full-bleed column. Shared by the `@container` queries
+ * that do the switching and by the JS that has to agree with them.
+ */
+export const NARROW_PX = 640;
+
 let idCounter = 0;
 /** Generates a process-unique id, used to wire `<label for>` to its control. */
 export function uniqueId(prefix = "s"): string {

package/src/index.ts

@@ -41,8 +41,9 @@ export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.j
 export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
 export { form, type FormOptions } from "./components/form.js";
 export { main, type MainOptions } from "./components/main.js";
-export { menuButton, showFloatingMenu, addContextMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
-export { dialog, alert, confirm, prompt, type DialogOptions } from "./components/dialog.js";
+export { panels, type Page, type Routes, type RouteHandler, type RouteTable, type PathParams, type SegParams } from "./components/panels.js";
+export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
+export { dialog, alert, confirm, prompt, isDialogOpen, type DialogOptions } from "./components/dialog.js";
 export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
 export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";
 export { textarea, type TextareaOptions } from "./components/textarea.js";