@lumiose/ui 0.0.0-stage → 0.1.0

package/dist/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,266 @@
+// Navigation Menu (decision-62, TASK-380): site navigation whose items open panels of links, after
+// Base UI's NavigationMenu and the WAI-ARIA disclosure navigation pattern. Root is a `<nav>`
+// landmark (a `<div>` when nested in another menu's panel) around a list; each item's trigger
+// opens its content through `popovertarget`: a `popover="auto"` placed under the trigger by CSS
+// anchor positioning. So without JavaScript the links work, a panel opens on a click, one at a
+// time, and closes on Escape or a click outside. `<lu-navigation-menu>`
+// (./navigation-menu.script.ts) adds hover intent, the arrow keys, closing when focus leaves,
+// `value` and the activation direction. Base UI's Viewport, Positioner, Portal, Backdrop and Arrow
+// are left out: the top layer and anchor positioning place each panel, and without a portal the
+// panels cannot share one viewport.
+import { createContext, Dynamic, effect, onMount, ref, untrack, useContext, useId } from "lumiose";
+import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
+import navigationMenuScript from "./navigation-menu.script.ts?client";
+import type {
+  NavigationMenuElement,
+  NavigationMenuValueChangeDetail,
+} from "./navigation-menu.script.ts";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * NavigationMenu.Root's element: it opens and closes its items' contents. Property `value`;
+       * event `valuechange` (`detail.value`).
+       */
+      "lu-navigation-menu": JSX.HTMLProps<NavigationMenuElement> & {
+        "data-delay"?: number;
+        "data-close-delay"?: number;
+      };
+    }
+  }
+}
+
+/** Which way a navigation menu's items run. */
+export type NavigationMenuOrientation = "horizontal" | "vertical";
+
+/**
+ * `NavigationMenu.Root` renders a `<nav>` (a `<div>` inside another navigation menu's content)
+ * inside `<lu-navigation-menu>`. `bind:value={signal}` stands in for `value` and `onValueChange`.
+ */
+export type NavigationMenuRootProps = Omit<JSX.IntrinsicElements["nav"], symbol> & {
+  /**
+   * The `value` of the item whose content is open, or `null` for none; opens or closes them when it
+   * changes, in the browser. Pair it with `onValueChange`; leave both out and the menu keeps its own
+   * state. Server HTML always starts closed.
+   */
+  value?: string | null;
+  /** The item open at first, in the browser, when `value` is left out. */
+  defaultValue?: string | null;
+  /** Called after an item's content opens (its `value`) or the open one closes (`null`). */
+  onValueChange?: (value: string | null) => void;
+  /** How long the pointer rests on a trigger before its content opens, in milliseconds. Default `50`. */
+  delay?: number;
+  /** How long after the pointer leaves an item its content closes, in milliseconds. Default `50`. */
+  closeDelay?: number;
+  /**
+   * Which way the items run: `"vertical"` moves between them with Arrow Up and Down, and places
+   * contents at the inline end. Default `"horizontal"`.
+   */
+  orientation?: NavigationMenuOrientation;
+};
+
+/** A `<ul>` of the menu's items. */
+export type NavigationMenuListProps = JSX.IntrinsicElements["ul"];
+
+/** An `<li>`: a trigger with its content, or a link. */
+export type NavigationMenuItemProps = JSX.IntrinsicElements["li"] & {
+  /** The value `Root`'s `value` names this item by. Default: a generated id. */
+  value?: string;
+};
+
+/** The `<button popovertarget="…">` that opens and closes its item's content. */
+export type NavigationMenuTriggerProps = JSX.IntrinsicElements["button"];
+
+/** A `<span aria-hidden="true">` inside the trigger, such as a chevron. */
+export type NavigationMenuIconProps = JSX.IntrinsicElements["span"];
+
+/** The `<div popover="auto">` of an item's links, placed next to its trigger. */
+export type NavigationMenuContentProps = JSX.IntrinsicElements["div"] & PlacementProps;
+
+/** An `<a>`: a link in the list or in a content. */
+export type NavigationMenuLinkProps = JSX.IntrinsicElements["a"] & {
+  /** The link to the current page: `aria-current="page"` and `data-active`. */
+  active?: boolean;
+  /** Whether following the link closes the open content. Default `false`. */
+  closeOnClick?: boolean;
+};
+
+interface RootContextValue {
+  orientation: NavigationMenuOrientation;
+}
+
+interface ItemContextValue {
+  id: string;
+}
+
+const RootContext = createContext<RootContextValue>();
+const ItemContext = createContext<ItemContextValue>();
+
+function useItem(part: string): ItemContextValue {
+  const item = useContext(ItemContext);
+  if (!item) throw new Error(`NavigationMenu.${part} must be inside <NavigationMenu.Item>.`);
+  return item;
+}
+
+function Root({
+  value,
+  defaultValue,
+  onValueChange,
+  delay,
+  closeDelay,
+  orientation,
+  children,
+  ...rest
+}: NavigationMenuRootProps) {
+  // Hover intent, keys and `value` where JavaScript runs; the page loads it once (decision-63).
+  navigationMenuScript();
+  const nested = useContext(RootContext) !== undefined;
+  const host = ref<NavigationMenuElement>();
+  const vertical = () => orientation === "vertical";
+
+  // `value` drives the element; its `valuechange` event reports back, so a signal written by
+  // `onValueChange` sees the same value again and nothing loops. A content opened from the server
+  // HTML before the island hydrated stays open, and the signal hears of it.
+  let mounted = false;
+  effect(() => {
+    const element = host();
+    const wanted = value;
+    if (!element?.isConnected || wanted === undefined) return;
+    if (!mounted && wanted === null && element.value !== null) {
+      untrack(() => onValueChange?.(element.value));
+    } else {
+      element.value = wanted;
+    }
+    mounted = true;
+  });
+  onMount(() => {
+    const element = host();
+    if (element && value === undefined && defaultValue != null) element.value = defaultValue;
+  });
+
+  const attributes = () => ({
+    ...rest,
+    "data-orientation": vertical() ? "vertical" : "horizontal",
+  });
+  return (
+    <RootContext value={{ orientation: vertical() ? "vertical" : "horizontal" }}>
+      <lu-navigation-menu
+        ref={host}
+        data-delay={delay}
+        data-close-delay={closeDelay}
+        data-orientation={vertical() ? "vertical" : "horizontal"}
+        on:valuechange={(event: CustomEvent<NavigationMenuValueChangeDetail>) =>
+          onValueChange?.(event.detail.value)
+        }
+      >
+        {/* A nested menu is a `<div>`, inside its parent's landmark. */}
+        <Dynamic component={nested ? "div" : "nav"} {...attributes()}>
+          {children}
+        </Dynamic>
+      </lu-navigation-menu>
+    </RootContext>
+  );
+}
+
+// Children are rendered explicitly: a spread does not pass them on (TASK-347).
+function List({ children, ...rest }: NavigationMenuListProps) {
+  return <ul {...rest}>{children}</ul>;
+}
+
+function Item({ value, children, ...rest }: NavigationMenuItemProps) {
+  const id = useId();
+  return (
+    <ItemContext value={{ id }}>
+      <li {...rest} data-value={value ?? id}>
+        {children}
+      </li>
+    </ItemContext>
+  );
+}
+
+function Trigger({ children, style, ...rest }: NavigationMenuTriggerProps) {
+  const item = useItem("Trigger");
+  return (
+    <button
+      type="button"
+      {...rest}
+      // Nothing points at the trigger: a caller's `id` names it (TASK-441 M39).
+      id={rest.id ?? `${item.id}-trigger`}
+      popovertarget={`${item.id}-content`}
+      style={withStyle(style, { "anchor-name": anchorName(item.id) })}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Icon({ children, ...rest }: NavigationMenuIconProps) {
+  return (
+    <span aria-hidden="true" {...rest}>
+      {children}
+    </span>
+  );
+}
+
+function Content({
+  children,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  style,
+  ...rest
+}: NavigationMenuContentProps) {
+  const item = useItem("Content");
+  const root = useContext(RootContext);
+  return (
+    <div
+      {...rest}
+      id={`${item.id}-content`}
+      popover="auto"
+      {...placement(
+        { side, align, sideOffset, alignOffset, style },
+        item.id,
+        root?.orientation === "vertical" ? "inline-end" : "bottom",
+        root?.orientation === "vertical" ? "start" : "center",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Link({ children, active, closeOnClick, ...rest }: NavigationMenuLinkProps) {
+  return (
+    <a
+      {...rest}
+      aria-current={active ? "page" : rest["aria-current"]}
+      data-active={active || undefined}
+      data-close-on-click={closeOnClick ? "true" : undefined}
+    >
+      {children}
+    </a>
+  );
+}
+
+/**
+ * Site navigation whose items open panels of links, after Base UI's NavigationMenu: Root, List,
+ * Item, Trigger, Icon, Content and Link. A `<nav>` landmark whose links work without JavaScript.
+ *
+ * @example
+ * <NavigationMenu.Root aria-label="Main">
+ *   <NavigationMenu.List>
+ *     <NavigationMenu.Item>
+ *       <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+ *       <NavigationMenu.Content>
+ *         <NavigationMenu.Link href="/analytics">Analytics</NavigationMenu.Link>
+ *       </NavigationMenu.Content>
+ *     </NavigationMenu.Item>
+ *     <NavigationMenu.Item>
+ *       <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
+ *     </NavigationMenu.Item>
+ *   </NavigationMenu.List>
+ * </NavigationMenu.Root>
+ */
+export const NavigationMenu = { Root, List, Item, Trigger, Icon, Content, Link };

package/dist/number-field/format.ts

@@ -0,0 +1,70 @@
+// A number field's values as text and back, shared by the component (server HTML, islands) and its
+// script: `Intl.NumberFormat` writes them, and `parseNumber` reads what a person typed in the same
+// locale and format (grouping, the decimal sign, the locale's digits, a currency, a percent sign).
+import { digitValue } from "../locale/digits.ts";
+
+/**
+ * The formatter for `format` (`Intl.NumberFormat` options) and `locale`. Options the browser
+ * refuses (`{"style":"currency"}` without a currency) are left out, and then an invalid locale,
+ * so the field still works (TASK-473, L12); the server falls back the same way.
+ */
+export function formatter(
+  format: Intl.NumberFormatOptions | undefined,
+  locale: Intl.LocalesArgument | null | undefined,
+): Intl.NumberFormat {
+  try {
+    return new Intl.NumberFormat(locale ?? undefined, format);
+  } catch {
+    try {
+      return new Intl.NumberFormat(locale ?? undefined);
+    } catch {
+      return new Intl.NumberFormat();
+    }
+  }
+}
+
+/** `value` as the field shows it: `""` for no value. */
+export function formatNumber(value: number | null, numbers: Intl.NumberFormat): string {
+  return value === null || !Number.isFinite(value) ? "" : numbers.format(value);
+}
+
+/** The signs `numbers` writes: its decimal sign and its digits, 0 to 9. */
+function signs(numbers: Intl.NumberFormat) {
+  const { locale, numberingSystem } = numbers.resolvedOptions();
+  const plain = new Intl.NumberFormat(locale, { numberingSystem, useGrouping: false });
+  const decimal =
+    numbers.formatToParts(1.5).find((part) => part.type === "decimal")?.value ??
+    plain.formatToParts(1.5).find((part) => part.type === "decimal")?.value ??
+    ".";
+  const digits = new Map<string, string>();
+  for (let digit = 0; digit <= 9; digit++) digits.set(plain.format(digit), String(digit));
+  return { decimal, digits };
+}
+
+/**
+ * The number in `text`, as typed in `numbers`' locale and format: `null` when it is empty, `NaN`
+ * when it holds no number. Grouping, currency and unit signs and spaces are skipped; the locale's
+ * decimal sign (or a `.`) marks the fraction; a minus sign or parentheses make it negative; with
+ * the percent style, `50 %` is `0.5`.
+ */
+export function parseNumber(text: string, numbers: Intl.NumberFormat): number | null {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  const { decimal, digits } = signs(numbers);
+  let normalized = "";
+  let negative = false;
+  let fraction = false;
+  for (const char of trimmed) {
+    if (/\d/.test(char)) normalized += char;
+    else if (digits.has(char)) normalized += digits.get(char);
+    // Digits of another script (full-width `１`, `٤`): what a keyboard or an IME may type (M34).
+    else if (digitValue(char) !== undefined) normalized += String(digitValue(char));
+    else if ((char === decimal || (char === "." && decimal !== ",")) && !fraction) {
+      normalized += ".";
+      fraction = true;
+    } else if (char === "-" || char === "−" || char === "(") negative = true;
+  }
+  if (!/\d/.test(normalized)) return Number.NaN;
+  const value = Number(normalized) * (negative ? -1 : 1);
+  return numbers.resolvedOptions().style === "percent" ? value / 100 : value;
+}

package/dist/number-field/number-field.css

@@ -0,0 +1,38 @@
+/*
+ * The CSS Number Field needs to work, and nothing else (decision-62). Its own buttons replace the
+ * native number input's spinners once its script runs (`:defined`); until then (or without
+ * JavaScript) the buttons, which need the script, stay hidden and the native spinners work. A
+ * scrub area takes the pointer for its drag. It sits in the `lu.core` layer, so any app CSS wins.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  lu-number-field {
+    display: block;
+  }
+  lu-number-field:not(:defined) button[data-action] {
+    visibility: hidden;
+  }
+  lu-number-field:defined input[type="number"] {
+    appearance: textfield;
+  }
+  lu-number-field:defined input[type="number"]::-webkit-inner-spin-button,
+  lu-number-field:defined input[type="number"]::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+  /* Held, a button must not select text or open a touch callout. */
+  lu-number-field button[data-action] {
+    user-select: none;
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
+  }
+  lu-number-field [data-scrub] {
+    cursor: ew-resize;
+    touch-action: none;
+    user-select: none;
+  }
+  lu-number-field [data-scrub][data-direction="vertical"] {
+    cursor: ns-resize;
+  }
+}