staffa 0.13.0 → 0.14.0

package/src/components/select.ts

@@ -37,8 +37,10 @@ A.insertGlobalCss({
  */
 export function select(opts: SelectOptions): void {
 	drawField(opts, (id, isInvalid) => {
-		A("div.s-select_wrap", opts.inputAttrs, () => {
-			A("select.s-input", () => {
+		A("div.s-select_wrap", () => {
+			// On the <select> itself, like every other field control — an
+			// aria-label on the wrapper div would label nothing.
+			A("select.s-input", opts.inputAttrs, () => {
 				applyControlAttrs(opts, id, isInvalid);
 
 				A("change=", (e: Event) => {

package/src/components/tabs.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Bindable, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
+import { cssZoom, type Bindable, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
 import { mk } from "../icons-helpers.js";
 
 /** A single tab definition. */
@@ -143,9 +143,13 @@ export function revealInStrip(el: HTMLElement): void {
 	// The overlays are 2.4em wide; clearing a little more than that keeps the
 	// revealed item from sitting right against one.
 	const pad = parseFloat(getComputedStyle(row).fontSize) * 2.6;
+	// The rects are in window coordinates while `scrollBy` counts in the row's
+	// own space; their difference scales over by the row's zoom (see `cssZoom`).
+	const z = cssZoom(row);
 	const box = el.getBoundingClientRect(), strip = row.getBoundingClientRect();
-	if (box.left < strip.left + pad) row.scrollBy({ left: box.left - strip.left - pad, behavior: "smooth" });
-	else if (box.right > strip.right - pad) row.scrollBy({ left: box.right - strip.right + pad, behavior: "smooth" });
+	const left = (box.left - strip.left) / z, right = (box.right - strip.right) / z;
+	if (left < pad) row.scrollBy({ left: left - pad, behavior: "smooth" });
+	else if (right > -pad) row.scrollBy({ left: right + pad, behavior: "smooth" });
 }
 
 /**

package/src/components/toast.ts

@@ -32,7 +32,9 @@ A.insertGlobalCss({
 	".s-toasts":
 		"position:fixed bottom:$3 right:$3 z-index:400 " +
 		"display:flex flex-direction:column gap:$2 " +
-		"pointer-events:none max-width:min(90vw,24rem) w:24rem",
+		// 90vw divided by --s-zoom: viewport units shrink with the page-fitting
+		// zoom (see `watchScale` in main.ts), and this cap means the window.
+		"pointer-events:none max-width:min(calc(90vw/var(--s-zoom,1)),24rem) w:24rem",
 	".s-toast": {
 		"&":
 			"display:flex align-items:flex-start gap:$2 " +

package/src/components/tooltip.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Slot, type Attributes, drawSlot, mountPortal } from "../core.js";
+import { cssZoom, type Slot, type Attributes, drawSlot, mountPortal } from "../core.js";
 
 /** Options for {@link addTooltip}. */
 export interface TooltipOptions {
@@ -39,10 +39,12 @@ if (typeof window !== "undefined") {
 	window.addEventListener("scroll", () => { $ttActive.value = undefined; }, { capture: true, passive: true });
 }
 
-function computePos(rect: DOMRect, tipW: number, tipH: number, placement: string): { x: number; y: number } {
+function computePos(rect: DOMRect, tipW: number, tipH: number, placement: string, zoom: number): { x: number; y: number } {
+	// `rect` is handed over already in the tip's own coordinate space; the
+	// window's size has to be brought into it too (see `cssZoom`).
 	const gap = 7;
-	const vw = window.innerWidth;
-	const vh = window.innerHeight;
+	const vw = window.innerWidth / zoom;
+	const vh = window.innerHeight / zoom;
 	let x = 0, y = 0;
 
 	if (placement === "bottom") {
@@ -96,7 +98,12 @@ mountPortal(() => {
 
 	requestAnimationFrame(() => {
 		if (!document.body.contains(tipEl)) return;
-		const { x, y } = computePos(anchor.getBoundingClientRect(), tipEl.offsetWidth, tipEl.offsetHeight, placement);
+		// The anchor's rect is in window coordinates; the left/top set below live
+		// in the tip's own space — scale it over before computing (see `cssZoom`).
+		const z = cssZoom(tipEl);
+		const r = anchor.getBoundingClientRect();
+		const rect = new DOMRect(r.x / z, r.y / z, r.width / z, r.height / z);
+		const { x, y } = computePos(rect, tipEl.offsetWidth, tipEl.offsetHeight, placement, z);
 		tipEl.style.left = x + "px";
 		tipEl.style.top = y + "px";
 		tipEl.style.visibility = "";

package/src/core.ts

@@ -62,6 +62,25 @@ export interface ContentOptions {
  */
 export const NARROW_PX = 640;
 
+/**
+ * The narrowest layout the library is designed for. A panel must work at this
+ * width (panels.ts sizes its columns from it), and a window narrower than this
+ * is shown the 360px layout scaled down to fit rather than squeezed further
+ * (see `watchScale` in main.ts).
+ */
+export const MIN_PX = 360;
+
+/**
+ * `el`'s effective CSS zoom: the factor between its own coordinate space and
+ * the window's — 1 wherever `zoom` isn't in play, or in browsers that predate
+ * it. A `getBoundingClientRect()` or pointer coordinate is in window space;
+ * divide it by this before using it as a length or scroll offset, which live
+ * in the element's own space. (`offsetWidth` and friends already do.)
+ */
+export function cssZoom(el: Element): number {
+	return (el as { currentCSSZoom?: number }).currentCSSZoom ?? 1;
+}
+
 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,7 +41,7 @@ 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, closeNav, type MainOptions } from "./components/main.js";
-export { type PanelStack, type Panel, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
+export { type PanelStack, type Panel, type PanelSize, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
 export { menu, menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuListOptions, 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";

package/src/theme.ts

@@ -59,16 +59,31 @@ import A from "aberdeen";
  */
 
 /**
- * The surface sheen: the subtle single-colour wash every surface (and the page)
- * is painted with, as a `background:` declaration. A shared constant rather
- * than a CSS custom property, deliberately: `var()`s inside a custom property
- * resolve where the property is *defined*, so a `--s-sheen` at `:root` would
- * paint every surface with the page's wash instead of its own `$s-bg`'s. Also
- * used by panels.ts, where the routed columns have to visually *be* the
- * surface around them.
+ * The subtle single-colour wash a surface is painted with, as a `background:`
+ * declaration, at the given angle. Shared constants rather than a CSS custom
+ * property, deliberately: `var()`s inside a custom property resolve where the
+ * property is *defined*, so a `--s-sheen` at `:root` would paint every surface
+ * with the page's wash instead of its own `$s-bg`'s.
  */
-export const SURFACE_SHEEN =
-	"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));";
+const sheen = (angle: string) =>
+	`background: linear-gradient(${angle}, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));`;
+
+/** The surface sheen: the wash every surface (and the page) is painted with. */
+export const SURFACE_SHEEN = sheen("170deg");
+
+/**
+ * The same wash, straight down — for panels.ts, where the routed columns and
+ * the ground beside them have to look like one continuous surface.
+ *
+ * A gradient at an angle takes its extent from the box's *width* as well as its
+ * height, so a 430px column and the 1720px region behind it would paint
+ * different slices of the same wash and meet at a visible step. Straight down,
+ * the extent is the height alone — which every column shares exactly with the
+ * region (a column is `top:0 bottom:0` in it) and so with every other column.
+ * The 10° of tilt is worth losing there; it buys the one place in the app where
+ * boxes of *different widths* must be seamless.
+ */
+export const PANEL_SHEEN = sheen("180deg");
 
 const STORAGE_KEY = "staffa:darkMode";