@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/collapsible/collapsible.tsx

@@ -0,0 +1,153 @@
+// Collapsible (decision-62, TASK-370): a native `<details>`, so its trigger (the `<summary>`)
+// opens and closes the panel in server HTML with no JavaScript, with the browser's own keyboard
+// handling and expanded state, and find-in-page opens it. The element is the only state: the
+// trigger, find-in-page and the `open` prop all end in its `toggle` event, the single source of
+// `onOpenChange`. The client script (./panel.ts) adds Base UI's animation hooks and the disabled
+// trigger. Ported from Timeless's approach (https://timeless.build).
+import { createContext, effect, ref, untrack, useContext, useId } from "lumiose";
+import collapsibleScript from "./collapsible.script.ts?client";
+
+/**
+ * The `<details>` props Root passes on (`class`, `style`, `name`, `data-*`, `aria-*`, events),
+ * without the brand of intrinsic elements' props, so that `bind:open` applies to Root.
+ */
+type DetailsProps = {
+  [
+    K in keyof JSX.IntrinsicElements["details"] as K extends string ? K : never
+  ]: JSX.IntrinsicElements["details"][K];
+};
+
+/**
+ * `Collapsible.Root` renders the `<details>`, with the element props it is given.
+ * `bind:open={signal}` stands in for `open` and `onOpenChange`.
+ */
+export interface CollapsibleRootProps extends Omit<DetailsProps, "open" | "children"> {
+  /**
+   * Opens (`true`) or closes (`false`) the panel when it changes. Pair it with `onOpenChange` to
+   * keep a signal in sync; leave both out and the element keeps its own state. Server HTML starts
+   * as it says.
+   */
+  open?: boolean;
+  /** Whether the panel starts open, when there is no `open`. Default `false`. */
+  defaultOpen?: boolean;
+  /** Called after the panel opens or closes, whatever opened or closed it. */
+  onOpenChange?: (open: boolean) => void;
+  /** The trigger takes no focus and does not toggle the panel. */
+  disabled?: boolean;
+  /** The other parts: the `Collapsible.Trigger` first, then the `Collapsible.Panel`. */
+  children?: JSX.Element;
+}
+
+/** The `<summary>` that opens and closes the panel: the first child of `Collapsible.Root`. */
+export type CollapsibleTriggerProps = JSX.IntrinsicElements["summary"];
+/** The `<div>` that the trigger shows and hides. */
+export type CollapsiblePanelProps = JSX.IntrinsicElements["div"];
+
+interface CollapsibleContextValue {
+  triggerId: string;
+  panelId: string;
+  disabled: () => boolean;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue>();
+
+function useCollapsible(): CollapsibleContextValue {
+  const context = useContext(CollapsibleContext);
+  if (!context) throw new Error("Collapsible parts must be inside <Collapsible.Root>.");
+  return context;
+}
+
+function Root({
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children,
+  ref: forwarded,
+  ...rest
+}: CollapsibleRootProps) {
+  // The panel's animation hooks and the disabled trigger; the page loads it once (decision-63).
+  collapsibleScript();
+  const id = useId();
+  const details = ref<HTMLDetailsElement>();
+  const context: CollapsibleContextValue = {
+    triggerId: `${id}-trigger`,
+    panelId: `${id}-panel`,
+    disabled: () => disabled === true,
+  };
+
+  /** The state last reported: a `<details>` created open fires `toggle` too (TASK-441 M40). */
+  let shown = untrack(() => open ?? defaultOpen) === true;
+
+  // The `open` prop drives the element; its `toggle` event reports back, so a signal written by
+  // `onOpenChange` sees the same value again and nothing loops.
+  effect(() => {
+    const element = details();
+    const wanted = open;
+    if (element && wanted !== undefined && element.open !== wanted) element.open = wanted;
+  });
+
+  return (
+    <CollapsibleContext value={context}>
+      <details
+        {...rest}
+        ref={(element: HTMLDetailsElement) => {
+          details(element);
+          forwarded?.(element);
+        }}
+        open={shown}
+        on:toggle={(event: ToggleEvent) => {
+          const now = event.newState === "open";
+          if (now === shown) return;
+          shown = now;
+          onOpenChange?.(now);
+        }}
+      >
+        {children}
+      </details>
+    </CollapsibleContext>
+  );
+}
+
+// The parts spread the caller's props first, so they override the defaults, and set the wiring
+// last, so the ids that connect them stay consistent.
+
+function Trigger({ children, ...rest }: CollapsibleTriggerProps) {
+  const collapsible = useCollapsible();
+  // A caller's `id` names it; the parts after it point at that (TASK-441 M39).
+  if (rest.id) collapsible.triggerId = rest.id;
+  return (
+    <summary
+      {...rest}
+      id={collapsible.triggerId}
+      aria-controls={collapsible.panelId}
+      aria-disabled={collapsible.disabled() ? "true" : undefined}
+      tabindex={collapsible.disabled() ? -1 : rest.tabindex}
+    >
+      {children}
+    </summary>
+  );
+}
+
+function Panel({ children, ...rest }: CollapsiblePanelProps) {
+  const collapsible = useCollapsible();
+  return (
+    <div {...rest} id={collapsible.panelId}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * A panel that its trigger shows and hides: a native `<details>`, so it works in server HTML with
+ * no JavaScript, and find-in-page opens it. Unstyled: style the parts through `class`, `[open]` on
+ * the root, and the panel's `--lu-collapsible-panel-height`, `[data-starting-style]` and
+ * `[data-ending-style]` for an animation.
+ *
+ * @example
+ * <Collapsible.Root>
+ *   <Collapsible.Trigger>Recovery keys</Collapsible.Trigger>
+ *   <Collapsible.Panel>…</Collapsible.Panel>
+ * </Collapsible.Root>
+ */
+export const Collapsible = { Root, Trigger, Panel };

package/dist/collapsible/panel.ts

@@ -0,0 +1,115 @@
+// The panels of Collapsible and Accordion, for their client scripts (doc-9 §9, TASK-370). A panel
+// is the content of a `<details>`: the browser opens and closes it, whatever asks (its summary,
+// find-in-page, an exclusive `name` group, the `open` prop), and this module only adds what the
+// element lacks next to Base UI:
+//
+// - The open and close animation's measurements, as Base UI exposes them: `--lu-collapsible-panel-
+//   height` and `-width` (`--lu-accordion-panel-…` in an accordion) on the panel, its content's size
+//   in pixels while it opens and closes and `auto` once open; `data-starting-style` on the panel
+//   for the frame an opening starts from, `data-ending-style` while it closes. A stylesheet then
+//   transitions the height between 0 and the variable (the default theme does). A panel rendered
+//   open does not animate: nothing changed. A change while one runs starts from where it is.
+// - Disabled triggers (`aria-disabled="true"` on the summary) do not toggle.
+//
+// It watches the `open` attribute of every `<details>` on the page, through one
+// MutationObserver: its callback runs before the next frame, so the opening transition starts from
+// the starting style. Closing keeps the content visible only as long as a stylesheet
+// transitions `::details-content`'s `content-visibility` (`allow-discrete`), as the theme does.
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+import { afterAnimations } from "../animation/animation.ts";
+
+/** The pending end of a panel's animation: a newer change replaces it. */
+const pending = new WeakMap<HTMLElement, symbol>();
+
+/** The panel of a Collapsible or an accordion item: the child its summary controls. */
+function panelOf(details: HTMLDetailsElement): HTMLElement | undefined {
+  const summary = details.querySelector(":scope > summary");
+  const id = summary?.getAttribute("aria-controls");
+  if (!id) return undefined;
+  for (const child of details.children) {
+    if (child.id === id && child instanceof HTMLElement) return child;
+  }
+  return undefined;
+}
+
+/** The variables' prefix: an accordion item is a `<details>` right inside `<lu-accordion>`. */
+const prefix = (details: HTMLDetailsElement) =>
+  details.parentElement?.localName === "lu-accordion" ? "--lu-accordion-panel" : "--lu-collapsible-panel";
+
+function measure(panel: HTMLElement, name: string) {
+  panel.style.setProperty(`${name}-height`, `${panel.scrollHeight}px`);
+  panel.style.setProperty(`${name}-width`, `${panel.scrollWidth}px`);
+}
+
+/** Runs `done` once the panel's animations finish, unless another change came first. */
+function settle(panel: HTMLElement, done: () => void) {
+  const token = Symbol();
+  pending.set(panel, token);
+  void afterAnimations(panel).then(() => {
+    if (pending.get(panel) === token) done();
+  });
+}
+
+function opened(details: HTMLDetailsElement, panel: HTMLElement) {
+  const name = prefix(details);
+  panel.removeAttribute("data-ending-style");
+  // From 0, or from where a closing got to, to the content's height: the starting style is
+  // computed first, so the transition has a value to start from.
+  const fresh = !panel.style.getPropertyValue(`${name}-height`).endsWith("px");
+  if (fresh) panel.setAttribute("data-starting-style", "");
+  measure(panel, name);
+  getComputedStyle(panel).getPropertyValue("block-size");
+  panel.removeAttribute("data-starting-style");
+  settle(panel, () => {
+    panel.style.setProperty(`${name}-height`, "auto");
+    panel.style.setProperty(`${name}-width`, "auto");
+  });
+}
+
+function closed(details: HTMLDetailsElement, panel: HTMLElement) {
+  const name = prefix(details);
+  panel.removeAttribute("data-starting-style");
+  // From the content's height (not `auto`, which does not transition) to 0.
+  measure(panel, name);
+  getComputedStyle(panel).getPropertyValue("block-size");
+  panel.setAttribute("data-ending-style", "");
+  settle(panel, () => {
+    panel.removeAttribute("data-ending-style");
+    // The next opening starts from 0 again.
+    panel.style.setProperty(`${name}-height`, "auto");
+    panel.style.setProperty(`${name}-width`, "auto");
+  });
+}
+
+let watching = false;
+
+/** Starts watching the page's panels, once. */
+export function watchPanels(): void {
+  if (watching) return;
+  watching = true;
+  new MutationObserver((records) => {
+    for (const record of records) {
+      const details = record.target;
+      if (!(details instanceof HTMLDetailsElement)) continue;
+      const panel = panelOf(details);
+      // The attribute was set again without a change.
+      if (!panel || (record.oldValue !== null) === details.open) continue;
+      if (details.open) opened(details, panel);
+      else closed(details, panel);
+    }
+  }).observe(document.documentElement, {
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["open"],
+    attributeOldValue: true,
+  });
+  // A disabled trigger: a click (Enter and Space click a summary too) does not toggle.
+  document.addEventListener(
+    "click",
+    (event) => {
+      const summary = (event.target as Element | null)?.closest?.("summary");
+      if (summary?.getAttribute("aria-disabled") === "true") event.preventDefault();
+    },
+    true,
+  );
+}

package/dist/combobox/combobox.css

@@ -0,0 +1,37 @@
+/*
+ * The CSS Combobox needs to work, and nothing else (decision-62): `lu-combobox` adds no box, the
+ * popup is placed next to the input by the shared placement rules (its `data-side` and
+ * `data-align`, `--lu-side-offset` and `--lu-align-offset`, with flips), and the options, groups
+ * and empty state the script hides stay hidden whatever `display` a theme gives them. Where CSS
+ * anchor positioning is missing, the client script places the popup. 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-combobox {
+    display: contents;
+  }
+  lu-combobox [hidden] {
+    display: none !important;
+  }
+  /*
+   * A popup around the list stacks its parts in a column, so when the popup shrinks to the room
+   * beside the input the list shrinks with it and scrolls, keeping the highlight in view
+   * (TASK-428).
+   */
+  lu-combobox [popover]:popover-open:has(> [role="listbox"]) {
+    display: flex;
+    flex-direction: column;
+  }
+  lu-combobox [popover] > [role="listbox"] {
+    flex: 0 1 auto;
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+  /* The Trigger and Clear buttons do nothing until the script runs (TASK-438, M24). */
+  lu-combobox:not(:defined) [command] {
+    visibility: hidden;
+  }
+}