@jxsuite/ui 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
   "license": "MIT",
   "repository": {
@@ -58,11 +58,12 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@jxsuite/runtime": "^4.1.0",
-    "@jxsuite/schema": "^3.0.0"
+    "@jxsuite/runtime": "^5.0.0",
+    "@jxsuite/schema": "^4.0.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.14.6",
+    "@happy-dom/global-registrator": "^21.0.3",
+    "@jxsuite/test-support": "^0.0.0",
     "@phosphor-icons/core": "^2.1.1"
   }
 }

package/src/behaviors/action-group.ts

@@ -24,7 +24,6 @@ const ITEM = "jx-action-button";
 export interface ActionGroupState {
   selects?: string;
   orientation?: string;
-  [key: string]: unknown;
 }
 
 /** A child action button, with the property accessors its own document installs. */

package/src/behaviors/color-area.ts

@@ -37,7 +37,9 @@
  * @docs extending/ui-kit
  */
 
-import { snapToStep } from "../color.ts";
+import { isFunction } from "@jxsuite/schema/guards";
+
+import { ARROW_SIGN, snapToStep } from "../color.ts";
 
 /** The tag this sidecar belongs to. */
 const HOST = "jx-color-area";
@@ -54,27 +56,18 @@ export interface ColorAreaState {
   step: number;
   /** Whether the element refuses to move. */
   disabled: boolean;
-  [key: string]: unknown;
 }
 
 /** Which state key each axis writes. `x` is saturation and `y` is brightness. */
 const AXIS_KEY = { x: "saturation", y: "brightness" } as const;
 
 /** The axis a key belongs to when nothing cancels it. */
-const KEY_AXIS: Readonly<Record<string, "x" | "y">> = {
-  ArrowDown: "y",
-  ArrowLeft: "x",
-  ArrowRight: "x",
-  ArrowUp: "y",
-};
-
-/** Which way each arrow moves its axis. Up and Right increase; the square's y is measured upward. */
-const KEY_SIGN: Readonly<Record<string, number>> = {
-  ArrowDown: -1,
-  ArrowLeft: -1,
-  ArrowRight: 1,
-  ArrowUp: 1,
-};
+const KEY_AXIS: ReadonlyMap<string, "x" | "y"> = new Map([
+  ["ArrowDown", "y"],
+  ["ArrowLeft", "x"],
+  ["ArrowRight", "x"],
+  ["ArrowUp", "y"],
+]);
 
 /** The hosts with a pointer down on them. Off to the side, because a drag is not element state. */
 const dragging = new WeakSet<HTMLElement>();
@@ -151,6 +144,8 @@ export function onAreaAxisInput(state: ColorAreaState, event: Event): void {
     return;
   }
   event.stopPropagation();
+  /* SAFETY: axisOf answers only for a node whose part is `x` or `y`, and jx-color-area.json renders
+     exactly those two parts, each as a native `<input type="range">`. */
   writeAxis(state, axis, Number((event.target as HTMLInputElement).value));
   announce(host, "input");
 }
@@ -168,6 +163,8 @@ export function onAreaAxisChange(state: ColorAreaState, event: Event): void {
     return;
   }
   event.stopPropagation();
+  /* SAFETY: axisOf answers only for a node whose part is `x` or `y`, and jx-color-area.json renders
+     exactly those two parts, each as a native `<input type="range">`. */
   writeAxis(state, axis, Number((event.target as HTMLInputElement).value));
   announce(host, "change");
 }
@@ -188,7 +185,7 @@ export function onAreaKeydown(state: ColorAreaState, event: KeyboardEvent): void
   if (!host || !focused || state.disabled === true) {
     return;
   }
-  const axis = KEY_AXIS[event.key];
+  const axis = KEY_AXIS.get(event.key);
   if (!axis) {
     return;
   }
@@ -197,7 +194,7 @@ export function onAreaKeydown(state: ColorAreaState, event: KeyboardEvent): void
   }
   event.preventDefault();
   event.stopPropagation();
-  const delta = stepOf(state) * (event.shiftKey ? 10 : 1) * (KEY_SIGN[event.key] ?? 0);
+  const delta = stepOf(state) * (event.shiftKey ? 10 : 1) * (ARROW_SIGN.get(event.key) ?? 0);
   if (writeAxis(state, axis, Number(state[AXIS_KEY[axis]]) + delta)) {
     /* Both names: a keystroke on a slider is a move AND a commit, which is what the platform's own
        arrow does on the axis it owns. A key that changed nothing says nothing. */
@@ -244,7 +241,7 @@ export function onAreaPointerDown(state: ColorAreaState, event: PointerEvent): v
   event.preventDefault();
   dragging.add(host);
   const track = trackOf(host);
-  if (track && typeof track.setPointerCapture === "function") {
+  if (track && isFunction(track.setPointerCapture)) {
     /* Capture on the TRACK, so a drag that leaves the square keeps arriving here rather than
        stopping wherever the pointer crossed the edge. */
     try {
@@ -294,8 +291,9 @@ export function onAreaPointerUp(_state: ColorAreaState, event: PointerEvent): vo
   const track = trackOf(host);
   if (
     track &&
-    typeof track.releasePointerCapture === "function" &&
-    track.hasPointerCapture?.(event.pointerId)
+    isFunction(track.releasePointerCapture) &&
+    isFunction(track.hasPointerCapture) &&
+    track.hasPointerCapture(event.pointerId)
   ) {
     track.releasePointerCapture(event.pointerId);
   }

package/src/behaviors/color-field.ts

@@ -33,6 +33,9 @@
  * @docs extending/ui-kit
  */
 
+import { isFunction } from "@jxsuite/schema/guards";
+import type { JsonValue } from "@jxsuite/schema/types";
+
 import {
   formatHex,
   formatOklch,
@@ -44,19 +47,24 @@ import {
 } from "../color.ts";
 import type { Rgb } from "../color.ts";
 import { close, openAt } from "./popover.ts";
+import type { PlacedPopover } from "./popover.ts";
 
 /** The tag this sidecar belongs to. */
 const HOST = "jx-color-field";
 
 /** The reactive scope a `jx-color-field` document hands its handlers. */
 export interface ColorFieldState {
-  /** The colour, spelled as `format` says. */
-  value: string;
+  /**
+   * The colour, spelled as `format` says. Null when a host clears the reflected `value` attribute,
+   * which is a write this module reads but never makes.
+   */
+  value: string | null;
   /**
    * The colour behind `value` when `value` is a reference this page cannot resolve; empty when the
-   * value stands for itself. Drawn by the chip and opened on by the picker, never written.
+   * value stands for itself. Drawn by the chip and opened on by the picker, never written; null
+   * when a host clears the reflected attribute.
    */
-  resolved: string;
+  resolved: string | null;
   /** `hex` or `oklch`: which spelling {@link compose} writes. */
   format: string;
   /** Whether the alpha channel is offered at all. */
@@ -83,14 +91,26 @@ export interface ColorFieldState {
   uid: string;
   /** Whether the element refuses to move. */
   disabled: boolean;
-  [key: string]: unknown;
 }
 
-/** The system's screen-colour picker, where the engine has one. */
+/**
+ * The system's screen-colour picker, where the engine has one. Not in the TypeScript DOM library
+ * yet, so its result is typed as loosely as an engine's own implementation could hand it back.
+ */
 interface EyeDropperApi {
-  open: () => Promise<{ sRGBHex: string }>;
+  open: () => Promise<{ sRGBHex?: string } | undefined>;
 }
 
+/**
+ * A node the document has named a channel, with the properties the composed elements install: the
+ * area's two axes, and the `value` a slider or a slotted palette carries.
+ */
+type ChannelElement = HTMLElement & {
+  saturation?: number;
+  brightness?: number;
+  value?: number | string;
+};
+
 /** How many stems have been minted, so no two instances share one. */
 let minted = 0;
 
@@ -120,9 +140,9 @@ function ownerOf(event: Event): HTMLElement | null {
   return target instanceof Element ? target.closest<HTMLElement>(HOST) : null;
 }
 
-/** The picker panel. */
-function panelOf(host: HTMLElement): HTMLElement | null {
-  return host.querySelector<HTMLElement>('[part="picker"]');
+/** The picker panel: the `jx-popover` jx-color-field.json renders as its `picker` part. */
+function panelOf(host: HTMLElement): PlacedPopover | null {
+  return host.querySelector<PlacedPopover>('[part="picker"]');
 }
 
 /** The colour the channels currently describe. */
@@ -242,11 +262,20 @@ const CHANNEL = "[data-jx-channel]";
  * channel by name is what makes the answer the same for a control the element owns, a control one
  * of its children owns, and a palette a consumer slotted in.
  */
-function sourceOf(event: Event): (HTMLElement & Record<string, unknown>) | null {
+function sourceOf(event: Event): ChannelElement | null {
   const { target } = event;
-  return target instanceof Element
-    ? target.closest<HTMLElement & Record<string, unknown>>(CHANNEL)
-    : null;
+  return target instanceof Element ? target.closest<ChannelElement>(CHANNEL) : null;
+}
+
+/**
+ * The `value` an event's target carries, as text; empty when it carries none.
+ *
+ * The target is a native `<input>` for the text and system channels, but for a palette it is
+ * whatever a consumer slotted in, which may expose no `value` at all.
+ */
+function targetValue(event: Event): string {
+  const { target } = event;
+  return target !== null && "value" in target ? String(target.value ?? "") : "";
 }
 
 /**
@@ -272,7 +301,7 @@ function route(state: ColorFieldState, event: Event, name: "input" | "change"):
   }
   event.stopPropagation();
   if (channel === "text") {
-    const typed = String((event.target as HTMLInputElement).value ?? "");
+    const typed = targetValue(event);
     state.text = typed;
     const parsed = parseColor(typed);
     if (name === "input") {
@@ -295,18 +324,18 @@ function route(state: ColorFieldState, event: Event, name: "input" | "change"):
        whatever announced them, and both are opaque by construction — a colour well cannot express
        an alpha and a palette entry need not — so the alpha the reader already chose is carried
        across rather than reset to full by a control that has nothing to say about it. */
-    const parsed = parseColor(String((event.target as HTMLInputElement).value ?? ""));
+    const parsed = parseColor(targetValue(event));
     if (!parsed) {
       return;
     }
     applyRgb(state, { ...parsed, a: state.alpha === true ? Number(state.opacity) / 100 : 1 });
   } else if (channel === "area") {
-    state.saturation = Number(source["saturation"]);
-    state.brightness = Number(source["brightness"]);
+    state.saturation = Number(source.saturation);
+    state.brightness = Number(source.brightness);
   } else if (channel === "hue") {
-    state.hue = Number(source["value"]);
+    state.hue = Number(source.value);
   } else if (channel === "opacity") {
-    state.opacity = Number(source["value"]);
+    state.opacity = Number(source.value);
   } else {
     return;
   }
@@ -373,8 +402,8 @@ export function onOpenPicker(state: ColorFieldState, event: Event): void {
     return;
   }
   const box = host.getBoundingClientRect();
-  (panel as HTMLElement & { x: number; y: number }).x = Math.round(box.left);
-  (panel as HTMLElement & { x: number; y: number }).y = Math.round(box.bottom);
+  panel.x = Math.round(box.left);
+  panel.y = Math.round(box.bottom);
   openAt(panel, event.currentTarget instanceof Element ? event.currentTarget : host);
 }
 
@@ -392,10 +421,16 @@ export function onOpenPicker(state: ColorFieldState, event: Event): void {
  * @param offered The element's own `eyedropper` prop.
  * @returns Whether to draw the button.
  */
-export function eyeDropperAvailable(offered: unknown): boolean {
-  return (
-    offered === true && typeof (globalThis as { EyeDropper?: unknown }).EyeDropper === "function"
-  );
+export function eyeDropperAvailable(offered: JsonValue | undefined): boolean {
+  return offered === true && isFunction(eyeDropperOf());
+}
+
+/** The engine's `EyeDropper` constructor, or undefined where it ships none. */
+function eyeDropperOf(): (new () => EyeDropperApi) | undefined {
+  /* SAFETY: `EyeDropper` is the WICG screen-picker constructor, absent from lib.dom; where an engine
+     ships it, `new EyeDropper().open()` resolves the picked colour, and where it does not the
+     property is undefined, which every caller guards. */
+  return (globalThis as { EyeDropper?: new () => EyeDropperApi }).EyeDropper;
 }
 
 /**
@@ -410,7 +445,7 @@ export function eyeDropperAvailable(offered: unknown): boolean {
  */
 export function onEyeDropper(state: ColorFieldState, event: Event): Promise<void> {
   const host = ownerOf(event);
-  const Api = (globalThis as { EyeDropper?: new () => EyeDropperApi }).EyeDropper;
+  const Api = eyeDropperOf();
   if (!host || !Api || state.disabled === true) {
     return Promise.resolve();
   }
@@ -459,7 +494,7 @@ export function onFieldMount(state: ColorFieldState, event: Event): void {
   const panel = panelOf(host);
   if (panel) {
     panel.addEventListener("toggle", (toggle: Event) => {
-      state.expanded = (toggle as Event & { newState?: string }).newState === "open";
+      state.expanded = "newState" in toggle && toggle.newState === "open";
     });
   }
 }

package/src/behaviors/color-slider.ts

@@ -24,7 +24,7 @@
  * @docs extending/ui-kit
  */
 
-import { snapToStep } from "../color.ts";
+import { ARROW_SIGN, snapToStep } from "../color.ts";
 
 /** The tag this sidecar belongs to. */
 const HOST = "jx-color-slider";
@@ -41,16 +41,14 @@ export interface ColorSliderState {
   step: number;
   /** Whether the element refuses to move. */
   disabled: boolean;
-  [key: string]: unknown;
 }
 
-/** Which way each arrow moves the value. */
-const KEY_SIGN: Readonly<Record<string, number>> = {
-  ArrowDown: -1,
-  ArrowLeft: -1,
-  ArrowRight: 1,
-  ArrowUp: 1,
-};
+/** The track's resolved range and grid, every member a finite number. */
+interface SliderBounds {
+  min: number;
+  max: number;
+  step: number;
+}
 
 /** The `jx-color-slider` an event is being handled on. */
 function hostOf(event: Event): HTMLElement | null {
@@ -79,7 +77,7 @@ function announce(host: HTMLElement, ...names: string[]): void {
  * is what the inner range's own `max` attribute is bound to, so the platform's clamp and this one
  * cannot drift apart.
  */
-function boundsOf(state: ColorSliderState): { min: number; max: number; step: number } {
+function boundsOf(state: ColorSliderState): SliderBounds {
   const min = Number.isFinite(Number(state.min)) ? Number(state.min) : 0;
   const top = Number(state.maxValue);
   const step = Number(state.step);
@@ -104,6 +102,8 @@ export function onSliderInput(state: ColorSliderState, event: Event): void {
     return;
   }
   event.stopPropagation();
+  /* SAFETY: the element's only form control is its `input[part="input"]` range, so an `input` event
+     reaching the host from anything other than the host itself was fired by that range. */
   state.value = Number((event.target as HTMLInputElement).value);
   announce(host, "input");
 }
@@ -120,6 +120,8 @@ export function onSliderChange(state: ColorSliderState, event: Event): void {
     return;
   }
   event.stopPropagation();
+  /* SAFETY: the element's only form control is its `input[part="input"]` range, so a `change` event
+     reaching the host from anything other than the host itself was fired by that range. */
   state.value = Number((event.target as HTMLInputElement).value);
   announce(host, "change");
 }
@@ -132,7 +134,7 @@ export function onSliderChange(state: ColorSliderState, event: Event): void {
  */
 export function onSliderKeydown(state: ColorSliderState, event: KeyboardEvent): void {
   const host = hostOf(event);
-  const sign = KEY_SIGN[event.key];
+  const sign = ARROW_SIGN.get(event.key);
   if (!host || !sign || !event.shiftKey || state.disabled === true) {
     return;
   }

package/src/behaviors/combobox.ts

@@ -49,6 +49,7 @@
  */
 
 import { close, openAt } from "./popover.ts";
+import type { PlacedPopover } from "./popover.ts";
 
 /** A row as the element draws it. */
 export interface ComboboxRow {
@@ -84,7 +85,6 @@ export interface ComboboxState {
   disabled?: boolean;
   readonly?: boolean;
   uid?: string;
-  [key: string]: unknown;
 }
 
 const HOST = "jx-combobox";
@@ -103,9 +103,9 @@ export function inputOf(host: HTMLElement): HTMLInputElement | null {
   return host.querySelector<HTMLInputElement>('input[part="input"]');
 }
 
-/** The element's own panel. */
-function panelOf(host: HTMLElement): HTMLElement | null {
-  return host.querySelector<HTMLElement>('[part="popup"]');
+/** The element's own panel: the `jx-popover` jx-combobox.json renders as its `popup` part. */
+function panelOf(host: HTMLElement): PlacedPopover | null {
+  return host.querySelector<PlacedPopover>('[part="popup"]');
 }
 
 /** The rows the element was handed, whatever it was handed. */
@@ -146,9 +146,8 @@ export function openList(host: HTMLElement): void {
     return;
   }
   const box = host.getBoundingClientRect();
-  const placed = panel as HTMLElement & { x: number; y: number };
-  placed.x = Math.round(box.left);
-  placed.y = Math.round(box.bottom);
+  panel.x = Math.round(box.left);
+  panel.y = Math.round(box.bottom);
   openAt(panel, host);
 }
 
@@ -295,7 +294,7 @@ export function onComboboxInput(state: ComboboxState, event: Event): void {
  * @param event The platform's ToggleEvent, from the panel.
  */
 export function onComboboxToggle(state: ComboboxState, event: Event): void {
-  const opening = (event as { newState?: string }).newState === "open";
+  const opening = "newState" in event && event.newState === "open";
   state.open = opening;
   if (!opening) {
     state.activeIndex = -1;
@@ -332,7 +331,7 @@ export function onComboboxButton(state: ComboboxState, event: Event): void {
  */
 export function onComboboxPick(state: ComboboxState, event: Event): void {
   const host = comboboxOf(event);
-  const picked = String((event as CustomEvent<unknown>).detail ?? "");
+  const picked = "detail" in event ? String(event.detail ?? "") : "";
   const row = rowFor(rowsOf(state), picked);
   if (!host || !row) {
     return;

package/src/behaviors/dialog.ts

@@ -79,7 +79,7 @@ export function close(host: HTMLElement, returnValue?: string): void {
 
 /** The platform's `toggle` on the inner dialog: the one source of truth for `open`. */
 export function onToggle(state: DialogState, event: Event): void {
-  state.open = (event as { newState?: string }).newState === "open";
+  state.open = "newState" in event && event.newState === "open";
 }
 
 /**
@@ -106,7 +106,7 @@ export function onNativeClose(state: DialogState, event: Event): void {
  */
 export function onCommand(_state: DialogState, event: Event): void {
   const host = hostOf(event);
-  const command = (event as { command?: string }).command ?? "";
+  const command = "command" in event ? event.command : undefined;
   if (!host) {
     return;
   }

package/src/behaviors/listbox.ts

@@ -31,6 +31,8 @@
  * @docs extending/ui-kit
  */
 
+import { isFunction } from "@jxsuite/schema/guards";
+
 /** A row element with the property accessors its own document installs. */
 type OptionElement = HTMLElement & { selected?: boolean; disabled?: boolean; value?: string };
 
@@ -38,7 +40,6 @@ type OptionElement = HTMLElement & { selected?: boolean; disabled?: boolean; val
 export interface ListboxState {
   /** The id of the row the caret is on; the empty string when none is. */
   active?: string;
-  [key: string]: unknown;
 }
 
 const ROW = "jx-option";
@@ -81,7 +82,7 @@ export function syncListbox(host: HTMLElement, active: string): OptionElement |
       row.selected = wanted;
     }
   }
-  if (landed && moved && typeof landed.scrollIntoView === "function") {
+  if (landed && moved && isFunction(landed.scrollIntoView)) {
     landed.scrollIntoView({ block: "nearest" });
   }
   return landed;
@@ -125,7 +126,7 @@ export function mountListbox(state: ListboxState, host: HTMLElement): void {
     });
   };
   const observer = new MutationObserver(() => {
-    if (typeof requestAnimationFrame === "function") {
+    if (isFunction(globalThis.requestAnimationFrame)) {
       scheduleSync();
     } else {
       syncListbox(host, String(state.active ?? ""));

package/src/behaviors/menu.ts

@@ -24,6 +24,8 @@
  * @docs extending/ui-kit
  */
 
+import { isFunction } from "@jxsuite/schema/guards";
+
 import { anchorOf, clampIntoViewport, openAt, supportsAnchorPositioning } from "./popover.ts";
 
 export { clampIntoViewport } from "./popover.ts";
@@ -43,7 +45,6 @@ export interface MenuState {
   area?: string;
   /** Whether the platform is placing this panel against the element it was shown from. */
   anchored?: boolean;
-  [key: string]: unknown;
 }
 
 /** Where a submenu sits when its document says nothing: beside its row, extending downward. */
@@ -57,9 +58,7 @@ type MenuElement = HTMLElement & { open?: boolean; x?: number; y?: number; floor
 /** The menu an event's `currentTarget` is. */
 function menuOf(event: Event): MenuElement | null {
   const target = event.currentTarget;
-  return target instanceof HTMLElement && target.localName === MENU
-    ? (target as MenuElement)
-    : null;
+  return target instanceof HTMLElement && target.localName === MENU ? target : null;
 }
 
 /**
@@ -99,11 +98,11 @@ export function submenuOf(row: HTMLElement): MenuElement | null {
 
 /** The row a submenu is slotted into, if it is a submenu. */
 export function parentRowOf(menu: HTMLElement): RowElement | null {
-  return (menu.parentElement?.closest(ROW) as RowElement | null) ?? null;
+  return menu.parentElement?.closest<RowElement>(ROW) ?? null;
 }
 
 /** The outermost menu of a stack. */
-export function rootMenuOf(menu: HTMLElement): HTMLElement {
+export function rootMenuOf(menu: HTMLElement): MenuElement {
   let root = menu;
   for (;;) {
     const row = parentRowOf(root);
@@ -140,7 +139,7 @@ export function showMenu(menu: MenuElement, source?: Element | null): void {
 
 /** Hide a menu panel through the platform, if it is showing. */
 export function hideMenu(menu: MenuElement): void {
-  if (isShowing(menu) && typeof menu.hidePopover === "function") {
+  if (isShowing(menu) && isFunction(menu.hidePopover)) {
     menu.hidePopover();
   }
 }
@@ -201,7 +200,7 @@ function closeSubmenus(menu: HTMLElement, except: RowElement | null = null): voi
 
 /** A row's label text: its label part, else all of its text. */
 function rowLabel(row: HTMLElement): string {
-  return row.querySelector('[part="label"]')?.textContent ?? row.textContent ?? "";
+  return row.querySelector('[part="label"]')?.textContent ?? row.textContent;
 }
 
 /** The next row after `active` whose label starts with `char`, wrapping; -1 when none does. */
@@ -285,7 +284,7 @@ export function onMenuKeydown(_state: MenuState, event: KeyboardEvent): void {
       break;
     }
     case "Tab": {
-      hideMenu(rootMenuOf(menu) as MenuElement);
+      hideMenu(rootMenuOf(menu));
       break;
     }
     default: {
@@ -321,10 +320,10 @@ export function onMenuBeforeToggle(state: MenuState, event: Event): void {
   if (!menu) {
     return;
   }
-  const opening = (event as { newState?: string }).newState === "open";
+  const opening = "newState" in event && event.newState === "open";
   const area = String(state.placement ?? "") || (parentRowOf(menu) ? SUBMENU_PLACEMENT : "");
   state.area = area;
-  const { source } = event as Event & { source?: unknown };
+  const source = "source" in event ? event.source : null;
   const from = source instanceof Element ? source : anchorOf(menu);
   state.anchored = opening && area !== "" && from !== null && !hasFloor(menu);
 }
@@ -342,7 +341,7 @@ export function onMenuToggle(state: MenuState, event: Event): void {
   if (!menu) {
     return;
   }
-  const opening = (event as { newState?: string }).newState === "open";
+  const opening = "newState" in event && event.newState === "open";
   state.open = opening;
   const parent = parentRowOf(menu);
   if (!opening) {
@@ -365,12 +364,12 @@ export function onMenuToggle(state: MenuState, event: Event): void {
 
 /** Whether the stack's root declares a floor at all. */
 function hasFloor(menu: HTMLElement): boolean {
-  return Number((rootMenuOf(menu) as MenuElement).floor ?? 0) > 0;
+  return Number(rootMenuOf(menu).floor ?? 0) > 0;
 }
 
 /** The lowest edge a stack may reach: the root menu's `floor`, else the viewport's bottom. */
 function floorOf(menu: HTMLElement): number {
-  const floor = Number((rootMenuOf(menu) as MenuElement).floor ?? 0);
+  const floor = Number(rootMenuOf(menu).floor ?? 0);
   return floor > 0 ? floor : window.innerHeight;
 }
 
@@ -385,7 +384,7 @@ export function ensureCaret(menu: HTMLElement): void {
   if (menu.contains(document.activeElement)) {
     return;
   }
-  let deepest = menu as MenuElement;
+  let deepest: MenuElement = menu;
   for (;;) {
     const open = rowsOf(deepest, { includeDisabled: true })
       .map((row) => submenuOf(row))

package/src/behaviors/number-field.ts

@@ -41,7 +41,6 @@ export interface NumberFieldState {
   value: string;
   /** Whether the control is holding something it cannot parse as a number. */
   badInput: boolean;
-  [key: string]: unknown;
 }
 
 const HOST = "jx-number-field";
@@ -65,7 +64,7 @@ function controlOf(host: HTMLElement): HTMLInputElement | null {
  */
 function mirror(state: NumberFieldState, control: HTMLInputElement): void {
   state.value = control.value;
-  state.badInput = control.validity?.badInput === true;
+  state.badInput = control.validity.badInput;
 }
 
 /**
@@ -115,16 +114,15 @@ export function stepBy(state: NumberFieldState, event: Event, n: number): void {
  * @param state The element's reactive scope.
  * @param event The keyboard event.
  */
-export function onNumberKeydown(state: NumberFieldState, event: Event): void {
-  const key = event as KeyboardEvent;
-  if (!key.shiftKey) {
+export function onNumberKeydown(state: NumberFieldState, event: KeyboardEvent): void {
+  if (!event.shiftKey) {
     return;
   }
-  if (key.key === "ArrowUp") {
-    key.preventDefault();
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
     stepBy(state, event, 10);
-  } else if (key.key === "ArrowDown") {
-    key.preventDefault();
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
     stepBy(state, event, -10);
   }
 }