@lumiose/ui 0.0.0-stage → 0.1.0

package/dist/scroll-area/scroll-area.script.ts

@@ -0,0 +1,281 @@
+// Scroll Area's client script (decision-62, decision-63): it defines `<lu-scroll-area>`, the
+// light-DOM element ScrollArea.Root renders, after Base UI's ScrollArea. Scrolling stays native:
+// the `[data-viewport]` scrolls with the wheel, touch, the keyboard (it is focusable while it
+// overflows) and find-in-page, and nothing traps focus. CSS alone can only recolour and thin the
+// native scrollbar (`scrollbar-color`, `scrollbar-width`, `scrollbar-gutter`), not shape it, lay it
+// over the content or show it on hover; so the element hides the native scrollbar once it runs
+// (scroll-area.css) and draws its own, which are pointer conveniences (`aria-hidden`). Without
+// JavaScript the native scrollbars show.
+//
+// - On every scroll and resize: `data-has-overflow-x` and `-y`, `data-overflow-{x,y}-{start,end}`
+//   (more than `overflow-edge-threshold` px of content past that edge) on the element and the
+//   viewport; the distances as `--lu-scroll-area-overflow-{x,y}-{start,end}` on the viewport; each
+//   `[data-scrollbar]` hidden while its axis does not overflow (unless `data-keep-mounted`), its
+//   `[data-thumb]` sized (`--lu-scroll-area-thumb-height` or `-width`) and moved with `transform`;
+//   the `[data-corner]` shown when both overflow, its size as `--lu-scroll-area-corner-width` and
+//   `-height` on the element.
+// - `data-scrolling` while scrolling (and 500 ms after), `data-hovering` on the scrollbars while
+//   the pointer is over the area.
+// - Dragging a thumb scrolls with it; a press on a scrollbar's track scrolls there. The wheel over
+//   a scrollbar scrolls the viewport (which the scrollbar is not inside), and the page only once
+//   the viewport cannot scroll that way (TASK-437 M18); a pinch zoom (Ctrl) is the page's.
+// - Right to left, a horizontal thumb runs from the right.
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+/** The smallest thumb, in px, so it stays easy to grab. */
+const MIN_THUMB = 16;
+/** How long `data-scrolling` stays after the last scroll. */
+const SCROLLING = 500;
+
+type Axis = "x" | "y";
+
+export class ScrollAreaElement extends HTMLElement {
+  #resize: ResizeObserver | undefined;
+  #observed: Element[] = [];
+  #scrolling: ReturnType<typeof setTimeout> | undefined;
+  #frame = 0;
+  /** The scrollbars that listen to the wheel. */
+  #wheeled = new WeakSet<HTMLElement>();
+
+  /** The scrolling element. */
+  get viewport(): HTMLElement | null {
+    return this.#own<HTMLElement>("[data-viewport]")[0] ?? null;
+  }
+
+  #own<T extends Element>(selector: string): T[] {
+    return [...this.querySelectorAll<T>(selector)].filter(
+      (node) => node.closest("lu-scroll-area") === this,
+    );
+  }
+
+  #scrollbar(axis: Axis): HTMLElement | undefined {
+    const orientation = axis === "y" ? "vertical" : "horizontal";
+    return this.#own<HTMLElement>(`[data-scrollbar][data-orientation="${orientation}"]`)[0];
+  }
+
+  connectedCallback(): void {
+    this.addEventListener("scroll", this.#onScroll, true);
+    this.addEventListener("pointerdown", this.#onPress);
+    this.addEventListener("pointerenter", this.#onHover);
+    this.addEventListener("pointerleave", this.#onHover);
+    this.#resize ??= new ResizeObserver(() => this.#schedule());
+    const settle = () => {
+      this.#observe();
+      this.#update();
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", settle, { once: true });
+    } else queueMicrotask(settle);
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("scroll", this.#onScroll, true);
+    this.removeEventListener("pointerdown", this.#onPress);
+    this.removeEventListener("pointerenter", this.#onHover);
+    this.removeEventListener("pointerleave", this.#onHover);
+    this.#resize?.disconnect();
+    this.#observed = [];
+    cancelAnimationFrame(this.#frame);
+  }
+
+  /** Watches the viewport and its content for size changes. */
+  #observe(): void {
+    const viewport = this.viewport;
+    if (!viewport) return;
+    const targets = [viewport, ...viewport.children];
+    if (
+      targets.length === this.#observed.length &&
+      targets.every((t, i) => t === this.#observed[i])
+    ) {
+      return;
+    }
+    this.#resize?.disconnect();
+    for (const target of targets) this.#resize?.observe(target);
+    this.#observed = targets;
+  }
+
+  #schedule(): void {
+    cancelAnimationFrame(this.#frame);
+    this.#frame = requestAnimationFrame(() => {
+      this.#observe();
+      this.#update();
+    });
+  }
+
+  /** Whether a horizontal scroll position counts from the right (right to left). */
+  #rtl(viewport: HTMLElement): boolean {
+    return getComputedStyle(viewport).direction === "rtl";
+  }
+
+  /** Writes the overflow state, the thumbs and the corner from the viewport's scroll position. */
+  #update(): void {
+    const viewport = this.viewport;
+    if (!viewport) return;
+    const threshold = Number(this.getAttribute("overflow-edge-threshold")) || 0;
+    const { scrollWidth, scrollHeight, clientWidth, clientHeight } = viewport;
+    const left = Math.abs(viewport.scrollLeft);
+    const top = viewport.scrollTop;
+    const distances = {
+      "x-start": left,
+      "x-end": Math.max(0, scrollWidth - clientWidth - left),
+      "y-start": top,
+      "y-end": Math.max(0, scrollHeight - clientHeight - top),
+    };
+    const has = { x: scrollWidth > clientWidth + 1, y: scrollHeight > clientHeight + 1 };
+    for (const target of [this, viewport]) {
+      target.toggleAttribute("data-has-overflow-x", has.x);
+      target.toggleAttribute("data-has-overflow-y", has.y);
+      for (const [edge, distance] of Object.entries(distances)) {
+        target.toggleAttribute(`data-overflow-${edge}`, distance > threshold);
+      }
+    }
+    for (const [edge, distance] of Object.entries(distances)) {
+      viewport.style.setProperty(`--lu-scroll-area-overflow-${edge}`, `${Math.round(distance)}px`);
+    }
+    // Focusable while there is something to scroll with the keyboard.
+    const scrollable = has.x || has.y;
+    if (viewport.tabIndex !== (scrollable ? 0 : -1)) viewport.tabIndex = scrollable ? 0 : -1;
+    for (const axis of ["x", "y"] as const) this.#thumb(axis, viewport, has[axis]);
+    const vertical = this.#scrollbar("y");
+    const horizontal = this.#scrollbar("x");
+    for (const corner of this.#own<HTMLElement>("[data-corner]")) corner.hidden = !(has.x && has.y);
+    this.style.setProperty(
+      "--lu-scroll-area-corner-width",
+      `${has.x && has.y && vertical ? vertical.offsetWidth : 0}px`,
+    );
+    this.style.setProperty(
+      "--lu-scroll-area-corner-height",
+      `${has.x && has.y && horizontal ? horizontal.offsetHeight : 0}px`,
+    );
+  }
+
+  /** Sizes and moves `axis`'s thumb, and shows its scrollbar while that axis overflows. */
+  #thumb(axis: Axis, viewport: HTMLElement, overflows: boolean): void {
+    const scrollbar = this.#scrollbar(axis);
+    if (!scrollbar) return;
+    if (!this.#wheeled.has(scrollbar)) {
+      // Not passive: a wheel the viewport takes must not scroll the page too.
+      scrollbar.addEventListener("wheel", this.#onWheel, { passive: false });
+      this.#wheeled.add(scrollbar);
+    }
+    scrollbar.hidden = !overflows && !scrollbar.hasAttribute("data-keep-mounted");
+    const thumb = scrollbar.querySelector<HTMLElement>("[data-thumb]");
+    if (!thumb || scrollbar.hidden) return;
+    const vertical = axis === "y";
+    const track = vertical ? scrollbar.clientHeight : scrollbar.clientWidth;
+    const view = vertical ? viewport.clientHeight : viewport.clientWidth;
+    const content = vertical ? viewport.scrollHeight : viewport.scrollWidth;
+    const position = vertical ? viewport.scrollTop : Math.abs(viewport.scrollLeft);
+    const size = content > 0 ? Math.max(MIN_THUMB, Math.min(track, (view / content) * track)) : 0;
+    const room = Math.max(0, content - view);
+    const offset = room > 0 ? (position / room) * (track - size) : 0;
+    const name = vertical ? "--lu-scroll-area-thumb-height" : "--lu-scroll-area-thumb-width";
+    scrollbar.style.setProperty(name, `${size}px`);
+    thumb.style.setProperty(name, `${size}px`);
+    const rtl = !vertical && this.#rtl(viewport);
+    thumb.style.transform = vertical
+      ? `translate3d(0, ${offset}px, 0)`
+      : `translate3d(${rtl ? -offset : offset}px, 0, 0)`;
+  }
+
+  #onScroll = (event: Event) => {
+    const viewport = this.viewport;
+    if (event.target !== viewport || !viewport) return;
+    this.#update();
+    this.toggleAttribute("data-scrolling", true);
+    for (const scrollbar of this.#own<HTMLElement>("[data-scrollbar]")) {
+      scrollbar.toggleAttribute("data-scrolling", true);
+    }
+    clearTimeout(this.#scrolling);
+    this.#scrolling = setTimeout(() => {
+      this.removeAttribute("data-scrolling");
+      for (const scrollbar of this.#own<HTMLElement>("[data-scrollbar]")) {
+        scrollbar.removeAttribute("data-scrolling");
+      }
+    }, SCROLLING);
+  };
+
+  /** The wheel over a scrollbar scrolls the viewport, in pixels, lines or pages. */
+  #onWheel = (event: WheelEvent) => {
+    const viewport = this.viewport;
+    if (!viewport || event.ctrlKey) return;
+    const line = Number.parseFloat(getComputedStyle(viewport).lineHeight) || 16;
+    const [x, y] =
+      event.deltaMode === WheelEvent.DOM_DELTA_LINE
+        ? [line, line]
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+          ? [viewport.clientWidth, viewport.clientHeight]
+          : [1, 1];
+    const { scrollLeft, scrollTop } = viewport;
+    // Instant even under `scroll-behavior: smooth`, so the new position can be read back.
+    viewport.scrollBy({ left: event.deltaX * x, top: event.deltaY * y, behavior: "instant" });
+    if (viewport.scrollLeft !== scrollLeft || viewport.scrollTop !== scrollTop) {
+      event.preventDefault();
+    }
+  };
+
+  #onHover = (event: PointerEvent) => {
+    const over = event.type === "pointerenter";
+    for (const scrollbar of this.#own<HTMLElement>("[data-scrollbar]")) {
+      scrollbar.toggleAttribute("data-hovering", over);
+    }
+  };
+
+  /** Dragging a thumb scrolls with it; a press on a track scrolls to put the thumb there. */
+  #onPress = (event: PointerEvent) => {
+    const viewport = this.viewport;
+    const target = event.target as Element;
+    const scrollbar = target.closest?.<HTMLElement>("[data-scrollbar]");
+    if (!viewport || !scrollbar || !this.contains(scrollbar) || event.button !== 0) return;
+    const thumb = scrollbar.querySelector<HTMLElement>("[data-thumb]");
+    if (!thumb) return;
+    event.preventDefault();
+    const vertical = scrollbar.dataset.orientation === "vertical";
+    const rtl = !vertical && this.#rtl(viewport);
+    const sign = rtl ? -1 : 1;
+    const track = vertical ? scrollbar.clientHeight : scrollbar.clientWidth;
+    const size = vertical ? thumb.offsetHeight : thumb.offsetWidth;
+    const room = vertical
+      ? viewport.scrollHeight - viewport.clientHeight
+      : viewport.scrollWidth - viewport.clientWidth;
+    const ratio = track > size ? room / (track - size) : 0;
+    const coordinate = (e: PointerEvent) => (vertical ? e.clientY : e.clientX);
+    const scrollTo = (position: number) => {
+      const clamped = Math.max(0, Math.min(room, position));
+      if (vertical) viewport.scrollTop = clamped;
+      else viewport.scrollLeft = clamped * sign;
+    };
+    if (!thumb.contains(target)) {
+      // A press on the track: the thumb's middle goes under the pointer.
+      const box = scrollbar.getBoundingClientRect();
+      const from = vertical ? box.top : rtl ? box.right : box.left;
+      const along = (coordinate(event) - from) * sign;
+      scrollTo((along - size / 2) * ratio);
+      return;
+    }
+    const start = coordinate(event);
+    const origin = vertical ? viewport.scrollTop : Math.abs(viewport.scrollLeft);
+    thumb.setPointerCapture?.(event.pointerId);
+    thumb.toggleAttribute("data-scrolling", true);
+    const move = (next: PointerEvent) => {
+      if (next.pointerId === event.pointerId) {
+        scrollTo(origin + (coordinate(next) - start) * sign * ratio);
+      }
+    };
+    const end = (next: PointerEvent) => {
+      if (next.pointerId !== event.pointerId) return;
+      thumb.removeEventListener("pointermove", move);
+      thumb.removeEventListener("pointerup", end);
+      thumb.removeEventListener("pointercancel", end);
+      thumb.removeAttribute("data-scrolling");
+    };
+    thumb.addEventListener("pointermove", move);
+    thumb.addEventListener("pointerup", end);
+    thumb.addEventListener("pointercancel", end);
+  };
+}
+
+if (!customElements.get("lu-scroll-area")) {
+  customElements.define("lu-scroll-area", ScrollAreaElement);
+}

package/dist/scroll-area/scroll-area.tsx

@@ -0,0 +1,118 @@
+// Scroll Area (decision-62, TASK-384): native scrolling with custom scrollbars laid over it, after
+// Base UI's ScrollArea. Root renders `<lu-scroll-area>`, whose script (scroll-area.script.ts) hides
+// the native scrollbar and sizes, moves and drags the custom ones, and writes the overflow state as
+// data attributes and CSS variables. The Viewport scrolls natively, is focusable while it
+// overflows (keyboard scrolling) and traps nothing; without JavaScript its native scrollbars show.
+import scrollAreaScript from "./scroll-area.script.ts?client";
+import type { ScrollAreaElement } from "./scroll-area.script.ts";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Scroll Area's element. Attribute `overflow-edge-threshold`; the overflow data attributes
+       * and `--lu-scroll-area-corner-width` and `-height` from its script.
+       */
+      "lu-scroll-area": JSX.HTMLProps<ScrollAreaElement> & { "overflow-edge-threshold"?: number };
+    }
+  }
+}
+
+/**
+ * `ScrollArea.Root` renders `<lu-scroll-area>`, around the Viewport and the scrollbars. Give it a
+ * size (a height, a max height): the Viewport fills it.
+ */
+export type ScrollAreaRootProps = JSX.HTMLProps<ScrollAreaElement> & {
+  /**
+   * How many px of content past an edge before `data-overflow-*-start` or `-end` applies.
+   * Default `0`.
+   */
+  overflowEdgeThreshold?: number;
+};
+
+/**
+ * The `<div data-viewport>` that scrolls, natively: focusable (`tabindex="0"`) while it overflows,
+ * so the keyboard scrolls it. Give it an `aria-label` (and `role="region"`) when it holds a
+ * landmark-worthy section.
+ */
+export type ScrollAreaViewportProps = JSX.IntrinsicElements["div"];
+
+/** A `<div>` around the content, sized to it. */
+export type ScrollAreaContentProps = JSX.IntrinsicElements["div"];
+
+/** A custom scrollbar, `<div data-scrollbar aria-hidden="true">` over an edge of the viewport. */
+export type ScrollAreaScrollbarProps = JSX.IntrinsicElements["div"] & {
+  /** The edge and axis: `"vertical"` (default, the inline end) or `"horizontal"` (the bottom). */
+  orientation?: "vertical" | "horizontal";
+  /** Keeps the scrollbar shown while its axis does not overflow. */
+  keepMounted?: boolean;
+};
+
+/** The scrollbar's `<div data-thumb>`, sized and moved by the script; drag it to scroll. */
+export type ScrollAreaThumbProps = JSX.IntrinsicElements["div"];
+
+/** A `<div data-corner>` where the two scrollbars meet, shown while both axes overflow. */
+export type ScrollAreaCornerProps = JSX.IntrinsicElements["div"];
+
+function Root({ overflowEdgeThreshold, children, ...rest }: ScrollAreaRootProps) {
+  // The custom scrollbars and the overflow state (decision-63).
+  scrollAreaScript();
+  return (
+    <lu-scroll-area {...rest} overflow-edge-threshold={overflowEdgeThreshold}>
+      {children}
+    </lu-scroll-area>
+  );
+}
+
+function Viewport({ children, ...rest }: ScrollAreaViewportProps) {
+  return (
+    <div tabindex={0} {...rest} data-viewport="">
+      {children}
+    </div>
+  );
+}
+
+function Content({ children, ...rest }: ScrollAreaContentProps) {
+  return <div {...rest}>{children}</div>;
+}
+
+function Scrollbar({ orientation, keepMounted, children, ...rest }: ScrollAreaScrollbarProps) {
+  return (
+    <div
+      {...rest}
+      aria-hidden="true"
+      data-scrollbar=""
+      data-orientation={orientation ?? "vertical"}
+      data-keep-mounted={keepMounted ? "" : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Thumb(props: ScrollAreaThumbProps) {
+  return <div {...props} data-thumb="" />;
+}
+
+function Corner(props: ScrollAreaCornerProps) {
+  return <div {...props} data-corner="" hidden />;
+}
+
+/**
+ * A scrolling region with custom scrollbars over native scrolling, after Base UI's ScrollArea: the
+ * wheel, touch, the keyboard and find-in-page scroll it as any scroller, and the scrollbars show
+ * where it is. Unstyled: style the parts through `class`, `[data-orientation]`, `[data-hovering]`,
+ * `[data-scrolling]`, `[data-has-overflow-y]`, `[data-overflow-y-end]` and the
+ * `--lu-scroll-area-*` custom properties.
+ *
+ * @example
+ * <ScrollArea.Root style={{ height: "12rem" }}>
+ *   <ScrollArea.Viewport aria-label="Release notes" role="region">
+ *     <ScrollArea.Content>…</ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar>
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ * </ScrollArea.Root>
+ */
+export const ScrollArea = { Root, Viewport, Content, Scrollbar, Thumb, Corner };

package/dist/select/select.css

@@ -0,0 +1,25 @@
+/*
+ * The CSS Select needs to work, and nothing else (decision-62). Select is a native `<select>`: a
+ * select whose first child is a `Select.Trigger` is a customizable select (`appearance:
+ * base-select`), since only that renders the trigger, `Select.Value` and options with more than
+ * text. Browsers without customizable select ignore it and keep their own control. A select with
+ * no Trigger keeps the native look unless your CSS or the theme opts in. It sits in the `lu.core`
+ * layer, so any app CSS wins.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  select:has(> button:first-child),
+  select:has(> button:first-child)::picker(select) {
+    appearance: base-select;
+  }
+  /*
+   * Without customizable select the trigger is not drawn, but Firefox keeps it in the select:
+   * hidden, it is no nameless button for assistive technology and checkers (TASK-419).
+   */
+  @supports not (appearance: base-select) {
+    select > button {
+      display: none !important;
+    }
+  }
+}

package/dist/select/select.tsx

@@ -0,0 +1,171 @@
+// Select (decision-62, TASK-358): a native `<select>`, the customizable select where the browser has
+// it (`appearance: base-select`, Chrome 135, Safari 27) and the classic one elsewhere. The platform
+// already does everything Base UI's Select does around the value: the combobox role, the keyboard
+// and typeahead (on the closed control too), the top-layer picker anchored to the control, forms
+// (`name`, `required`, autofill, reset, a disabled fieldset) and the mobile pickers. So Select
+// ships no script: it works in server HTML, with no JavaScript, and in islands, where `value` drives
+// the control when it changes and its `change` event reports back through `onValueChange`. Where
+// customizable select is supported, `Select.Trigger` and `Select.Value` style the button and show
+// the selected option's content, and options may hold more than text. TASK-358 records why it is
+// native rather than the listbox pattern.
+import { createContext, effect, ref, untrack, useContext } from "lumiose";
+import { fieldProps, useField, useFormValues } from "../field/context.ts";
+import { onFormReset } from "../form/reset.ts";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /** Customizable select's copy of the selected option's content, inside its `<button>`. */
+      selectedcontent: JSX.HTMLProps<HTMLElement>;
+    }
+  }
+}
+
+/**
+ * The `<select>` props Root passes through, without the brand of intrinsic elements' props, so that
+ * `bind:value` applies to Root.
+ */
+type ElementProps = {
+  [
+    K in keyof JSX.IntrinsicElements["select"] as K extends string ? K : never
+  ]: JSX.IntrinsicElements["select"][K];
+};
+
+/**
+ * `Select.Root` renders the `<select>`, with the props it is given (`name`, `required`,
+ * `disabled`, `autocomplete`, `form`, `class`, `aria-*`, events). `bind:value={signal}` stands in
+ * for `value` and `onValueChange`. Label it with a `<label for>` and an `id`, or `aria-label`.
+ */
+export interface SelectRootProps extends Omit<
+  ElementProps,
+  "value" | "bind:value" | "multiple" | "size"
+> {
+  /**
+   * Selects the option with this value when it changes. Pair it with `onValueChange` to keep a
+   * signal in sync; leave both out and the select keeps its own state.
+   */
+  value?: string;
+  /** The option selected at first, when `value` is left out. Default: the first option. */
+  defaultValue?: string;
+  /** Called after the user selects another option, with its value. */
+  onValueChange?: (value: string) => void;
+  /** `Trigger` (first, optional), then the `Item`s, `Group`s and `Separator`s. */
+  children?: JSX.Element;
+}
+
+/**
+ * The `<button>` customizable select renders as the control, holding `Select.Value` and anything
+ * else (an icon). It must be the select's first child. Browsers without customizable select show
+ * their own control instead.
+ */
+export type SelectTriggerProps = Omit<JSX.IntrinsicElements["button"], "type">;
+
+/** `<selectedcontent>`: a copy of the selected option's content, inside the `Trigger`. */
+export type SelectValueProps = Omit<JSX.IntrinsicElements["selectedcontent"], "children">;
+
+/** An `<option>`. */
+export type SelectItemProps = Omit<JSX.IntrinsicElements["option"], "value" | "selected"> & {
+  /** The value the select takes, and submits, when the option is selected. */
+  value: string;
+  /** The option cannot be selected. */
+  disabled?: boolean;
+};
+
+/** An `<optgroup>` of options. */
+export type SelectGroupProps = JSX.IntrinsicElements["optgroup"] & {
+  /** The group's name, shown above its options. */
+  label: string;
+};
+
+/** An `<hr>` between options or groups. */
+export type SelectSeparatorProps = JSX.IntrinsicElements["hr"];
+
+const SelectContext = createContext<{ initial: string | undefined }>();
+
+function Root({ value, defaultValue, onValueChange, children, ...rest }: SelectRootProps) {
+  const select = ref<HTMLSelectElement>();
+  // A failed submission's values (a Form's `values`) replace the default (TASK-430).
+  const sent = useFormValues(
+    untrack(() => rest.name ?? useField()?.name()),
+    untrack(() => rest.disabled),
+  );
+  const context = { initial: untrack(() => value ?? sent?.[0] ?? defaultValue) };
+  // The prop drives the control when it changes, once its options are in; `change` reports back,
+  // so a signal written by `onValueChange` sees the same value again and nothing loops.
+  effect(() => {
+    const element = select();
+    const wanted = value;
+    if (element?.isConnected && wanted !== undefined && element.value !== wanted) {
+      element.value = wanted;
+    }
+  });
+  // A form reset fires no `change`: the reset value goes to `onValueChange` (TASK-435).
+  if (onValueChange) onFormReset(select, () => select()!.value, onValueChange);
+  // Inside a Field: the field's id, name and ARIA references (TASK-365).
+  const field = useField();
+  return (
+    <SelectContext value={context}>
+      <select
+        {...rest}
+        {...fieldProps(field, rest)}
+        ref={(element: HTMLSelectElement) => {
+          select(element);
+          rest.ref?.(element);
+        }}
+        on:change={(event: Event) =>
+          onValueChange?.((event.currentTarget as HTMLSelectElement).value)
+        }
+      >
+        {children}
+      </select>
+    </SelectContext>
+  );
+}
+
+function Trigger({ children, ...rest }: SelectTriggerProps) {
+  return (
+    <button {...rest} type="button">
+      {children}
+    </button>
+  );
+}
+
+function Value(props: SelectValueProps) {
+  return <selectedcontent {...props} />;
+}
+
+function Item({ children, value, ...rest }: SelectItemProps) {
+  const select = useContext(SelectContext);
+  if (!select) throw new Error("Select parts must be inside <Select.Root>.");
+  return (
+    <option {...rest} value={value} selected={select.initial === value || undefined}>
+      {children}
+    </option>
+  );
+}
+
+function Group({ children, ...rest }: SelectGroupProps) {
+  return <optgroup {...rest}>{children}</optgroup>;
+}
+
+function Separator(props: SelectSeparatorProps) {
+  return <hr {...props} />;
+}
+
+/**
+ * A native select: pick one value from a list. It works with no JavaScript and submits with its
+ * form. Where the browser has customizable select (`appearance: base-select`), `Trigger` and
+ * `Value` shape the button and options may hold more than text. Unstyled: style it through `class`,
+ * `:open`, `::picker(select)`, `option:checked` and `option::checkmark`.
+ *
+ * @example
+ * <label for="fruit">Fruit</label>
+ * <Select.Root id="fruit" name="fruit" bind:value={fruit}>
+ *   <Select.Trigger>
+ *     <Select.Value />
+ *   </Select.Trigger>
+ *   <Select.Item value="apple">Apple</Select.Item>
+ *   <Select.Item value="pear">Pear</Select.Item>
+ * </Select.Root>
+ */
+export const Select = { Root, Trigger, Value, Item, Group, Separator };

package/dist/separator/separator.css

@@ -0,0 +1,12 @@
+/*
+ * A vertical Separator is an `<hr>` between the items of a row: without the browser's auto margins,
+ * which would push the row's items apart, and as tall as the row, even one that centres its items.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  hr[data-orientation="vertical"] {
+    margin: 0;
+    align-self: stretch;
+  }
+}

package/dist/separator/separator.tsx

@@ -0,0 +1,38 @@
+// Separator (decision-62, TASK-374): a native `<hr>`, after Base UI's Separator. Its implicit role
+// is `separator`, horizontal by default; a vertical one gets `aria-orientation="vertical"`. Both
+// carry `data-orientation`. No script. An `<hr>` is flow content: it cannot go inside a `<p>`, a
+// `<span>` or a `<button>`.
+
+/** Which way a separator runs. */
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+/** A native `<hr>`, with every native prop (`class`, `style`, `id`, `aria-*`, `data-*`, …). */
+export type SeparatorProps = Omit<JSX.IntrinsicElements["hr"], "children"> & {
+  /**
+   * Which way the separator runs: `"vertical"` between the items of a row, such as a toolbar's.
+   * Default `"horizontal"`.
+   */
+  orientation?: SeparatorOrientation;
+};
+
+/**
+ * A line between groups of content, announced as a separator. Unstyled: style it through `class`
+ * and `[data-orientation]`.
+ *
+ * @example
+ * <nav class="toolbar">
+ *   <a href="/docs">Docs</a>
+ *   <Separator orientation="vertical" />
+ *   <a href="/blog">Blog</a>
+ * </nav>
+ */
+export function Separator({ orientation, ...rest }: SeparatorProps) {
+  const vertical = () => orientation === "vertical";
+  return (
+    <hr
+      {...rest}
+      aria-orientation={vertical() ? "vertical" : undefined}
+      data-orientation={vertical() ? "vertical" : "horizontal"}
+    />
+  );
+}

package/dist/slider/format.ts

@@ -0,0 +1,33 @@
+// The slider's values as text, shared by the component (server HTML, islands) and its script.
+
+/** The values written with `format` (`Intl.NumberFormat` options as JSON) and `locale`. */
+export function formatValues(
+  values: readonly number[],
+  format: string | null,
+  locale: string | null,
+): string[] {
+  let options: Intl.NumberFormatOptions | undefined;
+  try {
+    options = format ? (JSON.parse(format) as Intl.NumberFormatOptions) : undefined;
+  } catch {
+    options = undefined;
+  }
+  const formatter = numberFormat(locale ?? undefined, options);
+  return values.map((value) => formatter.format(value));
+}
+
+/**
+ * Options the browser refuses (`{"style":"currency"}` without a currency) are left out, and then
+ * an invalid locale, so the slider still works (TASK-473, L12); the server falls back the same way.
+ */
+function numberFormat(locale: string | undefined, options: Intl.NumberFormatOptions | undefined) {
+  try {
+    return new Intl.NumberFormat(locale, options);
+  } catch {
+    try {
+      return new Intl.NumberFormat(locale);
+    } catch {
+      return new Intl.NumberFormat();
+    }
+  }
+}