@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/index.ts

@@ -0,0 +1,261 @@
+// @lumiose/ui: accessible UI primitives (decision-54, decision-62). Each component also has its
+// own entry (`@lumiose/ui/dialog`), and its CSS its own stylesheet (`@lumiose/ui/dialog.css`).
+export { Dialog } from "./dialog/dialog.tsx";
+export type {
+  DialogCloseProps,
+  DialogDescriptionProps,
+  DialogPopupProps,
+  DialogRootProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+} from "./dialog/dialog.tsx";
+export { Popover } from "./popover/popover.tsx";
+export type {
+  PopoverCloseProps,
+  PopoverDescriptionProps,
+  PopoverPopupProps,
+  PopoverRootProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+} from "./popover/popover.tsx";
+export { Tooltip } from "./tooltip/tooltip.tsx";
+export type {
+  TooltipPopupProps,
+  TooltipRootProps,
+  TooltipTriggerProps,
+} from "./tooltip/tooltip.tsx";
+export type { Align, PlacementProps, Side } from "./placement/placement.ts";
+export { Tabs } from "./tabs/tabs.tsx";
+export type {
+  TabsIndicatorProps,
+  TabsListProps,
+  TabsPanelProps,
+  TabsRootProps,
+  TabsTabProps,
+} from "./tabs/tabs.tsx";
+export { Menu } from "./menu/menu.tsx";
+export type {
+  MenuCheckboxItemProps,
+  MenuGroupLabelProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuLinkItemProps,
+  MenuPopupProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
+  MenuRootProps,
+  MenuSeparatorProps,
+  MenuSubmenuRootProps,
+  MenuSubmenuTriggerProps,
+  MenuTriggerProps,
+} from "./menu/menu.tsx";
+export { Combobox } from "./combobox/combobox.tsx";
+export type {
+  ComboboxChipsProps,
+  ComboboxClearProps,
+  ComboboxEmptyProps,
+  ComboboxGroupLabelProps,
+  ComboboxGroupProps,
+  ComboboxInputProps,
+  ComboboxItemProps,
+  ComboboxLabelProps,
+  ComboboxListProps,
+  ComboboxPopupProps,
+  ComboboxRootProps,
+  ComboboxStatusProps,
+  ComboboxTriggerProps,
+  ComboboxValue,
+} from "./combobox/combobox.tsx";
+export { Select } from "./select/select.tsx";
+export type {
+  SelectGroupProps,
+  SelectItemProps,
+  SelectRootProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "./select/select.tsx";
+export { Field } from "./field/field.tsx";
+export type {
+  FieldControlProps,
+  FieldDescriptionProps,
+  FieldErrorMatch,
+  FieldErrorProps,
+  FieldLabelProps,
+  FieldRootProps,
+  FieldValidate,
+  FieldValidityProps,
+  FieldValidityState,
+} from "./field/field.tsx";
+export type { ValidationMode } from "./field/context.ts";
+export { Fieldset } from "./fieldset/fieldset.tsx";
+export type { FieldsetLegendProps, FieldsetRootProps } from "./fieldset/fieldset.tsx";
+export { Form } from "./form/form.tsx";
+export type { FormProps } from "./form/form.tsx";
+export type { FormErrors } from "./field/context.ts";
+export { Input } from "./input/input.tsx";
+export type { InputProps } from "./input/input.tsx";
+export { Checkbox } from "./checkbox/checkbox.tsx";
+export type { CheckboxRootProps } from "./checkbox/checkbox.tsx";
+export { CheckboxGroup } from "./checkbox-group/checkbox-group.tsx";
+export type { CheckboxGroupProps } from "./checkbox-group/checkbox-group.tsx";
+export { Radio, RadioGroup } from "./radio-group/radio-group.tsx";
+export type { RadioGroupProps, RadioRootProps } from "./radio-group/radio-group.tsx";
+export { Switch } from "./switch/switch.tsx";
+export type { SwitchRootProps } from "./switch/switch.tsx";
+export { Collapsible } from "./collapsible/collapsible.tsx";
+export type {
+  CollapsiblePanelProps,
+  CollapsibleRootProps,
+  CollapsibleTriggerProps,
+} from "./collapsible/collapsible.tsx";
+export { Accordion } from "./accordion/accordion.tsx";
+export type {
+  AccordionHeaderProps,
+  AccordionItemProps,
+  AccordionPanelProps,
+  AccordionRootProps,
+  AccordionTriggerProps,
+} from "./accordion/accordion.tsx";
+export { Toast } from "./toast/toast.tsx";
+export type {
+  ToastActionProps,
+  ToastCloseProps,
+  ToastContentProps,
+  ToastDescriptionProps,
+  ToastManager,
+  ToastObject,
+  ToastOptions,
+  ToastPromiseOptions,
+  ToastProviderProps,
+  ToastRootProps,
+  ToastTitleProps,
+  ToastViewportProps,
+} from "./toast/toast.tsx";
+export { Button } from "./button/button.tsx";
+export type { ButtonProps } from "./button/button.tsx";
+export { Toggle } from "./toggle/toggle.tsx";
+export type { ToggleProps } from "./toggle/toggle.tsx";
+export { ToggleGroup } from "./toggle-group/toggle-group.tsx";
+export type { ToggleGroupProps } from "./toggle-group/toggle-group.tsx";
+export { Progress } from "./progress/progress.tsx";
+export type {
+  ProgressLabelProps,
+  ProgressRootProps,
+  ProgressTrackProps,
+  ProgressValueProps,
+} from "./progress/progress.tsx";
+export { Meter } from "./meter/meter.tsx";
+export type {
+  MeterLabelProps,
+  MeterRootProps,
+  MeterTrackProps,
+  MeterValueProps,
+} from "./meter/meter.tsx";
+export { Slider } from "./slider/slider.tsx";
+export type {
+  SliderControlProps,
+  SliderIndicatorProps,
+  SliderLabelProps,
+  SliderRootProps,
+  SliderThumbProps,
+  SliderTrackProps,
+  SliderValue,
+  SliderValueProps,
+} from "./slider/slider.tsx";
+export { ContextMenu } from "./context-menu/context-menu.tsx";
+export type {
+  ContextMenuPopupProps,
+  ContextMenuRootProps,
+  ContextMenuTriggerProps,
+} from "./context-menu/context-menu.tsx";
+export { Drawer } from "./drawer/drawer.tsx";
+export type {
+  DrawerCloseProps,
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerPopupProps,
+  DrawerRootProps,
+  DrawerSwipeDirection,
+  DrawerTitleProps,
+  DrawerTriggerProps,
+} from "./drawer/drawer.tsx";
+export { NumberField } from "./number-field/number-field.tsx";
+export type {
+  NumberFieldDecrementProps,
+  NumberFieldGroupProps,
+  NumberFieldIncrementProps,
+  NumberFieldInputProps,
+  NumberFieldRootProps,
+  NumberFieldScrubAreaProps,
+} from "./number-field/number-field.tsx";
+export { Autocomplete } from "./autocomplete/autocomplete.tsx";
+export type {
+  AutocompleteClearProps,
+  AutocompleteEmptyProps,
+  AutocompleteGroupLabelProps,
+  AutocompleteGroupProps,
+  AutocompleteInputProps,
+  AutocompleteItemProps,
+  AutocompleteLabelProps,
+  AutocompleteListProps,
+  AutocompleteMode,
+  AutocompletePopupProps,
+  AutocompleteRootProps,
+  AutocompleteStatusProps,
+  AutocompleteTriggerProps,
+} from "./autocomplete/autocomplete.tsx";
+export { Separator } from "./separator/separator.tsx";
+export type { SeparatorOrientation, SeparatorProps } from "./separator/separator.tsx";
+export { Avatar } from "./avatar/avatar.tsx";
+export type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarLoadingStatus,
+  AvatarRootProps,
+} from "./avatar/avatar.tsx";
+export { OTPField } from "./otp-field/otp-field.tsx";
+export type {
+  OTPFieldInputProps,
+  OTPFieldRootProps,
+  OTPFieldSeparatorProps,
+  OTPFieldSlotProps,
+  OTPFieldValidationType,
+} from "./otp-field/otp-field.tsx";
+export { PreviewCard } from "./preview-card/preview-card.tsx";
+export type {
+  PreviewCardPopupProps,
+  PreviewCardRootProps,
+  PreviewCardTriggerProps,
+} from "./preview-card/preview-card.tsx";
+export { Toolbar } from "./toolbar/toolbar.tsx";
+export type {
+  ToolbarButtonProps,
+  ToolbarGroupProps,
+  ToolbarInputProps,
+  ToolbarLinkProps,
+  ToolbarRootProps,
+  ToolbarSeparatorProps,
+} from "./toolbar/toolbar.tsx";
+export { ScrollArea } from "./scroll-area/scroll-area.tsx";
+export type {
+  ScrollAreaContentProps,
+  ScrollAreaCornerProps,
+  ScrollAreaRootProps,
+  ScrollAreaScrollbarProps,
+  ScrollAreaThumbProps,
+  ScrollAreaViewportProps,
+} from "./scroll-area/scroll-area.tsx";
+export { Menubar } from "./menubar/menubar.tsx";
+export type { MenubarOrientation, MenubarProps } from "./menubar/menubar.tsx";
+export { NavigationMenu } from "./navigation-menu/navigation-menu.tsx";
+export type {
+  NavigationMenuContentProps,
+  NavigationMenuIconProps,
+  NavigationMenuItemProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuOrientation,
+  NavigationMenuRootProps,
+  NavigationMenuTriggerProps,
+} from "./navigation-menu/navigation-menu.tsx";

package/dist/input/input.tsx

@@ -0,0 +1,67 @@
+// Input (decision-62, TASK-365): a native `<input>` that takes its id, name, disabled state and ARIA
+// references from the Field around it, after Base UI's Input (Field.Control). Everything else is
+// the platform's: types, constraints, autofill, forms.
+import { ref, untrack } from "lumiose";
+import { fieldProps, useField, useFormValues } from "../field/context.ts";
+import { onFormReset } from "../form/reset.ts";
+
+/**
+ * An element's props without the brand of intrinsic elements' props, so that the component's
+ * `value` and `onValueChange` offer `bind:value`.
+ */
+type BindableProps<Tag extends keyof JSX.IntrinsicElements, Omitted extends string = never> = Omit<
+  JSX.IntrinsicElements[Tag],
+  symbol | Omitted
+>;
+
+/**
+ * An `<input>`, with every native prop (`type`, `required`, `pattern`, `placeholder`, …). Inside a
+ * `Field.Root` it takes the field's id, name and ARIA references. `bind:value={signal}` stands in
+ * for `value` and `onValueChange`.
+ */
+export type InputProps = BindableProps<"input", "value" | "bind:value"> & {
+  /** Sets the value when it changes. Pair it with `onValueChange` to keep a signal in sync. */
+  value?: string;
+  /** The value at first, when `value` is left out; a form reset goes back to it. */
+  defaultValue?: string;
+  /** Called with the new value on every edit. */
+  onValueChange?: (value: string) => void;
+};
+
+/**
+ * A native text input, part of a `Field` when it is inside one.
+ *
+ * @example
+ * <Input name="q" type="search" aria-label="Search" bind:value={query} />
+ */
+/**
+ * Types a Form's `values` never fill: secrets, files, buttons, and toggles, which have `checked`.
+ * HTML matches `type` in any case, so `PASSWORD` is a password too (TASK-472).
+ */
+const UNFILLED = /^\s*(password|file|hidden|submit|reset|button|image|checkbox|radio)\s*$/i;
+
+export function Input({ value, defaultValue, onValueChange, ...rest }: InputProps) {
+  const field = useField();
+  // The value a failed submission sent back (a Form's `values`) replaces the default (TASK-430).
+  const sent = UNFILLED.test(String(untrack(() => rest.type) ?? ""))
+    ? undefined
+    : useFormValues(
+        untrack(() => rest.name ?? field?.name()),
+        untrack(() => rest.disabled),
+      );
+  // A form reset fires no `input`: the reset value goes to `onValueChange` (TASK-435).
+  const input = ref<HTMLInputElement>();
+  if (onValueChange) onFormReset(input, () => input()!.value, onValueChange);
+  return (
+    <input
+      {...rest}
+      {...fieldProps(field, rest)}
+      ref={(element: HTMLInputElement) => {
+        input(element);
+        rest.ref?.(element);
+      }}
+      value={value !== undefined ? value : untrack(() => sent?.[0] ?? defaultValue)}
+      on:input={(event: Event) => onValueChange?.((event.currentTarget as HTMLInputElement).value)}
+    />
+  );
+}

package/dist/layer/layer.ts

@@ -0,0 +1,191 @@
+// The dismissal model of the anchored layers that @lumiose/ui's client scripts open: Menu, Popover
+// and Combobox (doc-9 section 1, TASK-396). A layer is a manual popover (`popover="manual"`) that
+// its script shows and that this module closes, in one way for all of them:
+//
+// - On an outside press: a press of the main button by the primary pointer whose press and release
+//   both land outside the layer, as in Base UI and Zag. A press on a scrollbar, on a node the press
+//   removed, inside the popup's box (a password manager's overlay) or in a toast is not outside.
+//   Native light dismiss would also close on a right-click or a second finger, and cannot be
+//   cancelled: that is why the scripts make their popups manual instead of leaving dismissal to
+//   `popover="auto"`.
+// - On a close request: an Escape that no handler took (`preventDefault`) and that no input method
+//   composition owns (Safari's, with `keyCode` 229, TASK-438 M21), or the Android back gesture. One request closes the topmost layer only. Escape is handled on `keydown` in every
+//   browser (and cancelled, so no native close request follows): a `CloseWatcher` created without
+//   user activation joins the previous one's group, and one close request would close the whole
+//   group, a hover-opened popover and the dialog it is in, say (TASK-427). A layer opened with user
+//   activation also gets a `CloseWatcher`, for the Android back gesture.
+// - When another layer opens outside it, as the auto popover stack does: opening a layer closes the
+//   open layers it is not inside of. Layers nest through the DOM (a submenu inside its menu's
+//   popup, a combobox inside a popover).
+// - With it: a layer that closes, whatever closed it (a bound `open` set to false), closes the
+//   popovers and dialogs open inside it, innermost first (TASK-436 M1).
+//
+// Server HTML keeps `popover="auto"` where a popup should open without JavaScript (Menu, Popover):
+// native light dismiss and Escape work there until a script takes the popup over.
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+export interface Layer {
+  /** The popup, open while the layer is. */
+  popup: HTMLElement;
+  /** Whether `node` is part of the layer: its popup, and what opens it (its trigger, its input). */
+  contains(node: Node): boolean;
+  /** Closes the layer, after an outside press (`press` is where it landed) or a close request. */
+  dismiss(press?: Element): void;
+}
+
+/** Chrome 126 and Firefox 149; not in TypeScript's DOM types yet. */
+declare const CloseWatcher: (new () => EventTarget & { destroy(): void }) | undefined;
+
+interface Entry {
+  layer: Layer;
+  watcher?: { destroy(): void };
+}
+
+/** The open layers, outermost first. */
+const stack: Entry[] = [];
+/** The last press while a layer was open, and whether it counts for an outside press. */
+let press: { target: Element; main: boolean; x: number; y: number } | undefined;
+
+/** Whether a press at `x`, `y` on `node` is outside `layer`. */
+function outside({ layer }: Entry, node: Element, x: number, y: number): boolean {
+  if (!node.isConnected || layer.contains(node)) return false;
+  // Toasts persist: a press in one leaves the open layers alone (TASK-371).
+  if (node.closest("lu-toast-viewport")) return false;
+  const box = layer.popup.getBoundingClientRect();
+  const empty = box.width === 0 && box.height === 0;
+  return empty || !(x >= box.left && x <= box.right && y >= box.top && y <= box.bottom);
+}
+
+/** Whether a press is on a scrollbar of `target`: past its client box. */
+function onScrollbar(target: Element, event: PointerEvent): boolean {
+  const { clientWidth: width, clientHeight: height } = target;
+  return width > 0 && height > 0 && (event.offsetX > width || event.offsetY > height);
+}
+
+/**
+ * Forgets the layers whose popup left the page while open: removing a popover hides it without
+ * events, so its script never released it.
+ */
+function prune() {
+  for (const entry of stack.toReversed()) {
+    if (!entry.layer.popup.isConnected) {
+      stack.splice(stack.indexOf(entry), 1);
+      entry.watcher?.destroy();
+    }
+  }
+}
+
+function onPointerDown(event: PointerEvent) {
+  prune();
+  if (stack.length === 0) return;
+  const target = event.target as Element;
+  press = {
+    target,
+    main: event.button === 0 && event.isPrimary && !onScrollbar(target, event),
+    x: event.clientX,
+    y: event.clientY,
+  };
+}
+
+function onPointerUp(event: PointerEvent) {
+  const pressed = press;
+  press = undefined;
+  if (!pressed?.main) return;
+  const target = event.target as Element;
+  // Innermost first: closing a layer may close the layers inside it.
+  for (const entry of stack.toReversed()) {
+    if (
+      stack.includes(entry) &&
+      outside(entry, pressed.target, pressed.x, pressed.y) &&
+      outside(entry, target, event.clientX, event.clientY)
+    ) {
+      entry.layer.dismiss(target);
+    }
+  }
+}
+
+/**
+ * Whether a key belongs to an input method's composition: Safari sends the key that commits or
+ * cancels one (after `compositionend`) with `keyCode` 229 and `isComposing` false (TASK-438 M21).
+ */
+export const composing = (event: KeyboardEvent) => event.isComposing || event.keyCode === 229;
+
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key !== "Escape" || event.defaultPrevented || composing(event)) return;
+  const top = stack.at(-1);
+  if (!top) return;
+  // Handled: a parent dialog keeps its own close request for the next Escape.
+  event.preventDefault();
+  top.layer.dismiss();
+}
+
+if (typeof document !== "undefined") {
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("pointerup", onPointerUp, true);
+  // Before the close request an Escape makes, so a removed layer's watcher does not take it.
+  document.addEventListener("keydown", prune, true);
+  // In the bubble phase, after a layer's own handlers (Menu's, Tooltip's), which cancel the key.
+  document.addEventListener("keydown", onKeyDown);
+}
+
+/** Whether the page has transient user activation (a click, a key) to give a CloseWatcher. */
+const activated = () =>
+  (navigator as Navigator & { userActivation?: { isActive: boolean } }).userActivation?.isActive ===
+  true;
+
+/**
+ * Starts dismissing `layer`, whose popup opens, and closes the open layers it is not inside of.
+ * Call the returned function when it closes, whatever closed it.
+ */
+export function openLayer(layer: Layer): () => void {
+  prune();
+  for (const entry of stack.toReversed()) {
+    if (stack.includes(entry) && !entry.layer.contains(layer.popup)) entry.layer.dismiss();
+  }
+  const entry: Entry = { layer };
+  // Without activation, a watcher would join the group of the one before (see above).
+  if (typeof CloseWatcher === "function" && activated()) {
+    const watcher = new CloseWatcher();
+    watcher.addEventListener("close", () => layer.dismiss());
+    entry.watcher = watcher;
+  }
+  stack.push(entry);
+  return () => {
+    const index = stack.indexOf(entry);
+    if (index === -1) return;
+    stack.splice(index, 1);
+    // Now, not a task later: the next close request belongs to the layer below.
+    entry.watcher?.destroy();
+    closeInside(layer.popup);
+  };
+}
+
+/**
+ * Closes the popovers and dialogs open inside `popup`, innermost first: they must not outlive it
+ * (a modal dialog left open in a hidden popover has no box, and takes every click). Toasts, whose
+ * region may sit in a dialog, stay.
+ */
+export function closeInside(popup: HTMLElement): void {
+  const open = [...popup.querySelectorAll<HTMLElement>(":popover-open, dialog[open]")];
+  for (const each of open.toReversed()) {
+    if (each.localName === "lu-toast-viewport" || each.closest("lu-toast-viewport")) continue;
+    if (each instanceof HTMLDialogElement) each.close();
+    else if (each.matches(":popover-open")) each.hidePopover();
+  }
+}
+
+// Pointer moves that are not movements (doc-9 section 1, TASK-361): when the keyboard scrolls a
+// layer's list under a resting pointer, WebKit fires moves at the same position (with zero deltas),
+// and the list must not highlight what passes under it. The position tells, not the deltas: some
+// engines send none (Playwright's WebKit reports `movementX` and `movementY` as 0 for every move).
+
+/** The last position seen per element. */
+const last = new WeakMap<object, { x: number; y: number }>();
+
+/** Whether `event` moved the pointer since the last move `owner` saw (touch never counts). */
+export function moved(owner: object, event: PointerEvent): boolean {
+  if (event.pointerType === "touch") return false;
+  const before = last.get(owner);
+  last.set(owner, { x: event.clientX, y: event.clientY });
+  return before === undefined || before.x !== event.clientX || before.y !== event.clientY;
+}

package/dist/locale/digits.ts

@@ -0,0 +1,21 @@
+// Decimal digits of any script as ASCII (TASK-440, M34): full-width `１`, Arabic-Indic `٤`,
+// Devanagari `४`… A phone's keyboard or an IME may type them into a number. Number Field's
+// `parseNumber` uses it; OTP Field's script keeps a copy (a shared module would be a chunk of its
+// own).
+
+const DIGIT = /\p{Nd}/u;
+
+/**
+ * The value of a decimal digit (`\p{Nd}`), else `undefined`. Unicode encodes each script's digits
+ * as runs of ten, 0 to 9, in order: the count of digits before it in its run, modulo ten.
+ */
+export function digitValue(char: string): number | undefined {
+  if (!DIGIT.test(char)) return undefined;
+  let code = char.codePointAt(0)!;
+  let index = 0;
+  while (DIGIT.test(String.fromCodePoint(code - 1))) {
+    code--;
+    index++;
+  }
+  return index % 10;
+}

package/dist/menu/menu.css

@@ -0,0 +1,22 @@
+/*
+ * The CSS Menu needs to work, and nothing else (decision-62): `lu-menu` adds no box and the items
+ * stack. The popups are placed next to their triggers by the shared placement rules (their
+ * `data-side` and `data-align`, `--lu-side-offset` and `--lu-align-offset`, with flips), which
+ * Popover and Tooltip use too; where CSS anchor positioning is missing, the client script places
+ * them. It sits in the `lu.core` layer, so any app CSS wins.
+ */
+@layer lu.core, lu.theme;
+@import "../placement/placement.css";
+
+@layer lu.core {
+  lu-menu {
+    display: contents;
+  }
+  lu-menu :is([role="menu"]:popover-open, [role="menu"] [role="group"]) {
+    display: grid;
+  }
+  lu-menu [role^="menuitem"] {
+    display: flex;
+    align-items: center;
+  }
+}