staffa 0.13.0 → 0.15.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

@@ -144,8 +144,9 @@ export function revealInStrip(el: HTMLElement): void {
 	// revealed item from sitting right against one.
 	const pad = parseFloat(getComputedStyle(row).fontSize) * 2.6;
 	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, right = box.right - strip.right;
+	if (left < pad) row.scrollBy({ left: left - pad, behavior: "smooth" });
+	else if (right > -pad) row.scrollBy({ left: right + pad, behavior: "smooth" });
 }
 
 /**

package/src/components/tooltip.ts

@@ -96,7 +96,8 @@ mountPortal(() => {
 
 	requestAnimationFrame(() => {
 		if (!document.body.contains(tipEl)) return;
-		const { x, y } = computePos(anchor.getBoundingClientRect(), tipEl.offsetWidth, tipEl.offsetHeight, placement);
+		const rect = anchor.getBoundingClientRect();
+		const { x, y } = computePos(rect, tipEl.offsetWidth, tipEl.offsetHeight, placement);
 		tipEl.style.left = x + "px";
 		tipEl.style.top = y + "px";
 		tipEl.style.visibility = "";

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";