@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/placement/place.ts

@@ -0,0 +1,148 @@
+// Places an anchored popup next to its trigger where CSS anchor positioning is missing (Firefox
+// before 147, Safari before 26): the same sides, alignment, offsets and flips as placement.css,
+// from the popup's `data-side` and `data-align`. Client scripts call it while a popup is open. A
+// popup taller than the room on both sides takes the roomier one, and `--lu-available-height`
+// caps it there (placement.css lets it scroll, TASK-428).
+//
+// It also watches the trigger of every open anchored popover (not a modal one): scrolled out of
+// view, of the page or of a scroller around it, the popup gets `data-anchor-hidden`, which
+// placement.css hides until the trigger is back (TASK-453 L28). CSS alone (`position-visibility:
+// anchors-visible`) covers inner scrollers, and in Chromium only. The trigger is the element whose
+// `anchor-name` the popup's `position-anchor` names, or the one `place` was given: under a strict
+// CSP a browser without anchor positioning cannot read either name (TASK-475).
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+export const anchoring = typeof CSS !== "undefined" && CSS.supports("anchor-name: --a");
+
+const px = (style: CSSStyleDeclaration, name: string) =>
+  Number.parseFloat(style.getPropertyValue(name)) || 0;
+
+/**
+ * Sets the popup's position from its trigger's box, in viewport pixels. An open popover also
+ * starts watching the trigger, which its `anchor-name` may not name where the browser lacks
+ * anchor positioning and a strict CSP moved `style` into a stylesheet (TASK-475).
+ */
+export function place(popup: HTMLElement, trigger: Element) {
+  if (trigger instanceof Element && popup.matches("[popover][data-side]:popover-open")) {
+    watch(popup, trigger);
+  }
+  const style = getComputedStyle(popup);
+  const rtl = style.direction === "rtl";
+  const gap = px(style, "--lu-side-offset");
+  const shift = px(style, "--lu-align-offset");
+  const align = popup.dataset.align ?? "center";
+  let side = popup.dataset.side ?? "bottom";
+  if (side === "inline-start") side = rtl ? "right" : "left";
+  if (side === "inline-end") side = rtl ? "left" : "right";
+
+  const a = trigger.getBoundingClientRect();
+  // Measured at its full height: the room it is given below comes from where it goes.
+  popup.style.removeProperty("--lu-available-height");
+  const { offsetWidth: w } = popup;
+  let h = popup.offsetHeight;
+  const { innerWidth: vw, innerHeight: vh } = window;
+  const below = vh - a.bottom - gap;
+  const above = a.top - gap;
+  // Flip to the opposite side when the popup does not fit and fits there, or has more room.
+  if (side === "bottom" && h > below && (h <= above || above > below)) side = "top";
+  else if (side === "top" && h > above && (h <= below || below > above)) side = "bottom";
+  else if (side === "right" && a.right + gap + w > vw && a.left - gap - w >= 0) side = "left";
+  else if (side === "left" && a.left - gap - w < 0 && a.right + gap + w <= vw) side = "right";
+  // Beside the trigger on neither side: below it, or above it, centred.
+  let centred = align === "center";
+  if ((side === "left" || side === "right") && a.left - gap - w < 0 && a.right + gap + w > vw) {
+    side = a.bottom + gap + h <= vh || a.top - gap - h < 0 ? "bottom" : "top";
+    centred = true;
+  }
+
+  let x: number;
+  let y: number;
+  if (side === "top" || side === "bottom") {
+    const room = side === "bottom" ? below : above;
+    if (h > room) {
+      popup.style.setProperty("--lu-available-height", `${Math.max(room, 0)}px`);
+      h = popup.offsetHeight;
+    }
+    y = side === "bottom" ? a.bottom + gap : a.top - gap - h;
+    const start = rtl ? a.right - w - shift : a.left + shift;
+    const end = rtl ? a.left + shift : a.right - w - shift;
+    x = centred ? a.left + (a.width - w) / 2 + shift : align === "start" ? start : end;
+    x = Math.min(Math.max(x, 0), vw - w);
+  } else {
+    x = side === "right" ? a.right + gap : a.left - gap - w;
+    y =
+      align === "start"
+        ? a.top + shift
+        : align === "end"
+          ? a.bottom - h - shift
+          : a.top + (a.height - h) / 2 + shift;
+    if (h > vh) {
+      popup.style.setProperty("--lu-available-height", `${vh}px`);
+      h = popup.offsetHeight;
+    }
+    y = Math.min(Math.max(y, 0), vh - h);
+  }
+  Object.assign(popup.style, { inset: "auto", margin: "0", left: `${x}px`, top: `${y}px` });
+}
+
+/** The open popups that each watched trigger anchors. */
+const anchored = new Map<Element, Set<HTMLElement>>();
+let watcher: IntersectionObserver | undefined;
+
+/** The value of `property` in `element`'s style attribute, read raw: a browser may not know it. */
+const inline = (element: Element, property: string) =>
+  new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`)
+    .exec(element.getAttribute("style") ?? "")?.[1]
+    ?.trim();
+
+/**
+ * The value of `property` on `element`: from its style attribute, else computed. Under a strict
+ * CSP the server moves `style` into a stylesheet rule (`data-l-v`), which only a browser that
+ * knows the property keeps (TASK-475).
+ */
+const declared = (element: Element, property: string) =>
+  inline(element, property) || getComputedStyle(element).getPropertyValue(property).trim();
+
+/** The trigger whose `anchor-name` the popup's `position-anchor` names. */
+function anchorOf(popup: HTMLElement): Element | undefined {
+  const name = declared(popup, "position-anchor");
+  if (!name || name === "auto") return undefined;
+  return [...document.querySelectorAll("[style*='anchor-name'], [data-l-v]")].find(
+    (element) => element !== popup && declared(element, "anchor-name") === name,
+  );
+}
+
+/** Watches `anchor` while `popup` is open: off screen, it hides the popup. */
+function watch(popup: HTMLElement, anchor: Element): void {
+  if (typeof IntersectionObserver !== "function" || anchored.get(anchor)?.has(popup)) return;
+  watcher ??= new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      for (const each of anchored.get(entry.target) ?? []) {
+        each.toggleAttribute("data-anchor-hidden", !entry.isIntersecting);
+      }
+    }
+  });
+  const popups = anchored.get(anchor) ?? new Set();
+  popups.add(popup);
+  anchored.set(anchor, popups);
+  watcher.observe(anchor);
+}
+
+function onToggle(event: Event): void {
+  const popup = event.target;
+  if (!(popup instanceof HTMLElement) || !popup.matches("[popover][data-side]")) return;
+  if ((event as ToggleEvent).newState === "open") {
+    const anchor = anchorOf(popup);
+    if (anchor) watch(popup, anchor);
+    return;
+  }
+  popup.removeAttribute("data-anchor-hidden");
+  for (const [anchor, popups] of anchored) {
+    if (!popups.delete(popup) || popups.size > 0) continue;
+    anchored.delete(anchor);
+    watcher?.unobserve(anchor);
+  }
+}
+
+// `toggle` does not bubble: the capture phase sees every popup's.
+if (typeof document !== "undefined") document.addEventListener("toggle", onToggle, true);

package/dist/placement/placement.css

@@ -0,0 +1,155 @@
+/*
+ * Anchored popups (Popover, Tooltip): a `[popover]`, or a modal popover's `<dialog>`, with
+ * `data-side` and `data-align` is placed next to the trigger its inline `position-anchor` names,
+ * with CSS anchor positioning, from the server HTML on. It flips to the opposite side when it does
+ * not fit, and hides while its trigger is scrolled out of view (`data-anchor-hidden`, which the
+ * scripts' place.ts sets, as CSS covers inner scrollers in Chromium only); one beside the trigger that fits
+ * on neither side goes below or above it. A popup taller than the space on both sides takes the
+ * side with more room and shrinks to it, from its trigger to the viewport's edge, and scrolls
+ * (TASK-428). `--lu-side-offset` is the gap to the trigger and
+ * `--lu-align-offset` a shift along the side (the `sideOffset` and `alignOffset` props set them; a
+ * theme may too). Without anchor positioning the popup's client script places it instead
+ * (placement/place.ts), and writes the room it has as `--lu-available-height`.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  /* Too tall for the room beside its trigger, a popup scrolls. */
+  :is([popover], dialog)[data-side] {
+    max-block-size: var(--lu-available-height, none);
+    overflow: auto;
+  }
+  /* Its trigger scrolled out of view, a popover waits, hidden (place.ts sets it, TASK-453 L28). */
+  [popover][data-side][data-anchor-hidden] {
+    visibility: hidden;
+  }
+  @supports (anchor-name: --a) {
+    /*
+     * The fallbacks: the flips while the popup fits at its size, then the popup shrunk to the
+     * space below or above its trigger (one with at least 8rem, or 40% of the viewport, of room).
+     */
+    :is([popover], dialog)[data-side] {
+      inset: auto;
+      margin: 0;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline,
+        --lu-fit-below,
+        --lu-fit-above;
+      position-visibility: anchors-visible;
+    }
+    /*
+     * A popup beside the trigger that does not fit tries the other side, then the other block-axis
+     * alignment, then below the trigger, then above it, then shrunk beside it, below or above.
+     */
+    :is([popover], dialog)[data-side="left"],
+    :is([popover], dialog)[data-side="right"],
+    :is([popover], dialog)[data-side^="inline-"] {
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline,
+        --lu-below,
+        --lu-above,
+        --lu-fit-start,
+        --lu-fit-end,
+        --lu-fit-below,
+        --lu-fit-above;
+    }
+
+    /* The side. */
+    :is([popover], dialog)[data-side="bottom"] {
+      top: calc(anchor(bottom) + var(--lu-side-offset, 0px));
+    }
+    :is([popover], dialog)[data-side="top"] {
+      bottom: calc(anchor(top) + var(--lu-side-offset, 0px));
+    }
+    :is([popover], dialog)[data-side="right"] {
+      left: calc(anchor(right) + var(--lu-side-offset, 0px));
+    }
+    :is([popover], dialog)[data-side="left"] {
+      right: calc(anchor(left) + var(--lu-side-offset, 0px));
+    }
+    :is([popover], dialog)[data-side="inline-end"] {
+      inset-inline-start: calc(anchor(self-end) + var(--lu-side-offset, 0px));
+    }
+    :is([popover], dialog)[data-side="inline-start"] {
+      inset-inline-end: calc(anchor(self-start) + var(--lu-side-offset, 0px));
+    }
+
+    /* The alignment along a top or bottom side: the inline axis, which follows the direction. */
+    :is([popover], dialog):is([data-side="top"], [data-side="bottom"])[data-align="center"] {
+      justify-self: anchor-center;
+      translate: var(--lu-align-offset, 0px);
+    }
+    :is([popover], dialog):is([data-side="top"], [data-side="bottom"])[data-align="start"] {
+      inset-inline-start: calc(anchor(self-start) + var(--lu-align-offset, 0px));
+    }
+    :is([popover], dialog):is([data-side="top"], [data-side="bottom"])[data-align="end"] {
+      inset-inline-end: calc(anchor(self-end) + var(--lu-align-offset, 0px));
+    }
+
+    /* The alignment along a left, right or inline side: the block axis. */
+    :is([popover], dialog):not([data-side="top"], [data-side="bottom"])[data-align="center"] {
+      align-self: anchor-center;
+      translate: 0 var(--lu-align-offset, 0px);
+    }
+    :is([popover], dialog):not([data-side="top"], [data-side="bottom"])[data-align="start"] {
+      top: calc(anchor(top) + var(--lu-align-offset, 0px));
+    }
+    :is([popover], dialog):not([data-side="top"], [data-side="bottom"])[data-align="end"] {
+      bottom: calc(anchor(bottom) + var(--lu-align-offset, 0px));
+    }
+  }
+}
+
+@position-try --lu-below {
+  inset: auto;
+  top: calc(anchor(bottom) + var(--lu-side-offset, 0px));
+  justify-self: anchor-center;
+  align-self: auto;
+}
+@position-try --lu-above {
+  inset: auto;
+  bottom: calc(anchor(top) + var(--lu-side-offset, 0px));
+  justify-self: anchor-center;
+  align-self: auto;
+}
+/*
+ * Shrunk to the room from the trigger to the viewport's edge: stretched between the two insets (an
+ * auto block size, not the `fit-content` of the popover and dialog UA styles), the popup scrolls
+ * (TASK-428). Tried only after the popup fitted nowhere at its own size, and only where it keeps
+ * a usable size: a side with too little room fails, for the other one. (Not `position-try-order:
+ * most-block-size`: Chromium sorts the base position in with the fallbacks, and moves popups that
+ * fit.)
+ */
+@position-try --lu-fit-below {
+  top: calc(anchor(bottom) + var(--lu-side-offset, 0px));
+  bottom: 0;
+  align-self: normal;
+  block-size: auto;
+  min-block-size: min(8rem, 40dvh);
+}
+@position-try --lu-fit-above {
+  top: 0;
+  bottom: calc(anchor(top) + var(--lu-side-offset, 0px));
+  align-self: normal;
+  block-size: auto;
+  min-block-size: min(8rem, 40dvh);
+}
+/* Beside the trigger, from its top (or bottom) to the viewport's edge. */
+@position-try --lu-fit-start {
+  top: calc(anchor(top) + var(--lu-align-offset, 0px));
+  bottom: 0;
+  align-self: normal;
+  block-size: auto;
+  min-block-size: min(8rem, 40dvh);
+}
+@position-try --lu-fit-end {
+  top: 0;
+  bottom: calc(anchor(bottom) + var(--lu-align-offset, 0px));
+  align-self: normal;
+  block-size: auto;
+  min-block-size: min(8rem, 40dvh);
+}

package/dist/placement/placement.ts

@@ -0,0 +1,60 @@
+// Placement of the popups anchored to a trigger (Popover, Tooltip; decision-62: placement props on
+// `Popup`, no `Positioner`). The trigger gets an anchor name and the popup points at it, both in
+// inline styles, so CSS anchor positioning places the popup from the server HTML on; placement.css
+// reads the popup's `data-side` and `data-align` and the offsets' custom properties, in `lu.core`.
+// Browsers without anchor positioning get the same placement from ./place.ts.
+
+/** The trigger's side the popup goes on. `inline-start` and `inline-end` follow the direction. */
+export type Side = "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end";
+/** How the popup aligns with the trigger along that side. */
+export type Align = "start" | "center" | "end";
+
+/** Where an anchored popup goes next to its trigger: the placement props of a `Popup`. */
+export interface PlacementProps {
+  /** The trigger's side the popup goes on. It flips to the opposite side when it does not fit. */
+  side?: Side;
+  /** How the popup aligns with the trigger along that side. Default `"center"`. */
+  align?: Align;
+  /** The gap between the trigger and the popup, in CSS pixels. */
+  sideOffset?: number;
+  /** A shift along the side, away from the aligned edge, in CSS pixels. */
+  alignOffset?: number;
+}
+
+type Style = string | JSX.CSSProperties | undefined;
+
+/** The anchor name that ties a popup to its trigger, from the id the parts share. */
+export const anchorName = (id: string) => `--lu-${id}`;
+
+/** `style` with `extra` in front, so the caller's own declarations win. */
+export function withStyle(style: Style, extra: JSX.CSSProperties): string | JSX.CSSProperties {
+  if (typeof style === "string") {
+    const ours = Object.entries(extra)
+      .filter(([, value]) => value !== undefined)
+      .map(([name, value]) => `${name}: ${value}`)
+      .join("; ");
+    return `${ours}; ${style}`;
+  }
+  return { ...extra, ...style };
+}
+
+/**
+ * The anchored popup's attributes: its placement, and its anchor and offsets in `style`.
+ * `defaultSide` and `defaultAlign` apply when the props leave them out.
+ */
+export function placement(
+  props: PlacementProps & { style?: Style },
+  id: string,
+  defaultSide: Side,
+  defaultAlign: Align = "center",
+) {
+  return {
+    "data-side": props.side ?? defaultSide,
+    "data-align": props.align ?? defaultAlign,
+    style: withStyle(props.style, {
+      "position-anchor": anchorName(id),
+      "--lu-side-offset": props.sideOffset === undefined ? undefined : `${props.sideOffset}px`,
+      "--lu-align-offset": props.alignOffset === undefined ? undefined : `${props.alignOffset}px`,
+    }),
+  };
+}

package/dist/popover/hover.ts

@@ -0,0 +1,178 @@
+// Open-on-hover timing, shared by Popover's hover triggers (TASK-394) and Preview Card (TASK-381):
+// a mouse or a pen resting on a trigger opens its popup after the trigger's `data-delay`, never
+// touch; the popup stays open while the pointer is on the trigger or on it (WCAG 1.4.13:
+// hoverable), and closes `data-close-delay` after the pointer left both, with at least a short
+// grace to cross the gap between them. While the pointer moves from the trigger toward the popup,
+// inside the triangle from where it left the trigger to the popup's near side (Base UI's safe
+// polygon, TASK-410), the grace starts over at each move, so a slow or diagonal path gets there; a
+// stop or a move out of the triangle lets it run out. A press before the delay cancels the
+// opening. Each client script calls `hoverIntent` once with how its triggers and popups are found
+// and shown.
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+/** How long a hover-opened popup waits for the pointer to cross the gap from its trigger. */
+const GRACE = 100;
+
+/** A kind of hover trigger: how a script finds its triggers and popups and shows them. */
+export interface HoverSource {
+  /** The trigger at or around `node`, if it is one of this kind. */
+  triggerAt(node: Element): HTMLElement | undefined;
+  /** The popup `trigger` opens. */
+  popupOf(trigger: HTMLElement): HTMLElement | undefined;
+  /** Shows `popup` for `trigger`. */
+  show(trigger: HTMLElement, popup: HTMLElement): void;
+  /** Hides `popup`, unless something else (focus) keeps it open. */
+  hide(popup: HTMLElement, trigger: HTMLElement): void;
+  /** The delays when the trigger has no `data-delay` or `data-close-delay`, in ms. */
+  delay: number;
+  closeDelay: number;
+}
+
+export interface HoverIntent {
+  /** The open popups the hover (or `open`) opened, with their trigger, until `forget`. */
+  hovered: Map<HTMLElement, HTMLElement>;
+  /** Opens `trigger`'s popup after its delay (also used for keyboard focus). */
+  open(trigger: HTMLElement): void;
+  /** Closes `popup` after its trigger's close delay, unless the pointer comes back. */
+  close(popup: HTMLElement): void;
+  /** Cancels a pending close of `popup`. */
+  stay(popup: HTMLElement): void;
+  /** Cancels a pending opening. */
+  cancel(): void;
+  /** Stops treating `popup` as hover-opened: it no longer closes when the pointer leaves. */
+  forget(popup: HTMLElement): void;
+}
+
+const ms = (trigger: HTMLElement, name: string, fallback: number) => {
+  const value = Number(trigger.getAttribute(name) ?? Number.NaN);
+  return Number.isFinite(value) ? value : fallback;
+};
+
+/**
+ * Whether (px, py) is inside the triangle from (x, y) to the side of `box` that faces (x, y), or in
+ * the box.
+ */
+export function toward(box: DOMRect, x: number, y: number, px: number, py: number): boolean {
+  if (px >= box.left && px <= box.right && py >= box.top && py <= box.bottom) return true;
+  // The corners of the side that faces (x, y).
+  const [ax, ay, bx, by] =
+    y <= box.top
+      ? [box.left, box.top, box.right, box.top]
+      : y >= box.bottom
+        ? [box.left, box.bottom, box.right, box.bottom]
+        : x <= box.left
+          ? [box.left, box.top, box.left, box.bottom]
+          : [box.right, box.top, box.right, box.bottom];
+  const cross = (x1: number, y1: number, x2: number, y2: number) =>
+    (x2 - x1) * (py - y1) - (y2 - y1) * (px - x1);
+  const signs = [cross(x, y, ax, ay), cross(ax, ay, bx, by), cross(bx, by, x, y)];
+  return !(signs.some((d) => d < 0) && signs.some((d) => d > 0));
+}
+
+const on = <K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+) => document.addEventListener(type, listener, true);
+
+export function hoverIntent(source: HoverSource): HoverIntent {
+  const hovered = new Map<HTMLElement, HTMLElement>();
+  let opening: { trigger: HTMLElement; timer: ReturnType<typeof setTimeout> } | undefined;
+  const closing = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
+  /** Where the pointer left a hover-opened popup's trigger, while it heads for the popup. */
+  let corridor: { popup: HTMLElement; x: number; y: number } | undefined;
+
+  const stay = (popup: HTMLElement) => {
+    clearTimeout(closing.get(popup));
+    closing.delete(popup);
+  };
+  const cancel = () => {
+    clearTimeout(opening?.timer);
+    opening = undefined;
+  };
+  const open = (trigger: HTMLElement) => {
+    const popup = source.popupOf(trigger);
+    if (!popup) return;
+    if (popup.matches(":popover-open")) {
+      stay(popup);
+      return;
+    }
+    if (opening?.trigger === trigger) return;
+    cancel();
+    opening = {
+      trigger,
+      timer: setTimeout(
+        () => {
+          opening = undefined;
+          if (popup.matches(":popover-open")) return;
+          // Before it opens: the script's `toggle` handler may look it up.
+          hovered.set(popup, trigger);
+          source.show(trigger, popup);
+        },
+        ms(trigger, "data-delay", source.delay),
+      ),
+    };
+  };
+  const close = (popup: HTMLElement) => {
+    const trigger = hovered.get(popup);
+    if (!trigger) return;
+    stay(popup);
+    const delay = Math.max(ms(trigger, "data-close-delay", source.closeDelay), GRACE);
+    closing.set(
+      popup,
+      setTimeout(() => {
+        closing.delete(popup);
+        if (hovered.has(popup) && popup.matches(":popover-open")) source.hide(popup, trigger);
+      }, delay),
+    );
+  };
+
+  on("pointerover", (event) => {
+    if (event.pointerType === "touch") return;
+    const target = event.target as Element;
+    // Back on a hover-opened popup or its trigger: it stays open.
+    for (const [popup, trigger] of hovered) {
+      if (popup.contains(target) || trigger.contains(target)) stay(popup);
+    }
+    const trigger = source.triggerAt(target);
+    if (trigger && !(trigger as HTMLButtonElement).disabled) open(trigger);
+  });
+
+  on("pointerout", (event) => {
+    if (event.pointerType === "touch") return;
+    const from = event.target as Node;
+    const to = event.relatedTarget as Node | null;
+    if (opening?.trigger.contains(from) && !opening.trigger.contains(to)) cancel();
+    for (const [popup, trigger] of hovered) {
+      const inside = (node: Node | null) =>
+        !!node && (popup.contains(node) || trigger.contains(node));
+      if (!inside(from) || inside(to)) continue;
+      close(popup);
+      if (trigger.contains(from)) corridor = { popup, x: event.clientX, y: event.clientY };
+    }
+  });
+
+  // On the way to the popup: each move inside the triangle starts the grace over.
+  on("pointermove", (event) => {
+    if (!corridor || event.pointerType === "touch") return;
+    const { popup, x, y } = corridor;
+    // Arrived (the popup's `pointerover` cancelled the close), or closed already.
+    if (!closing.has(popup)) corridor = undefined;
+    else if (toward(popup.getBoundingClientRect(), x, y, event.clientX, event.clientY)) close(popup);
+    else corridor = undefined;
+  });
+
+  // A press before the delay cancels the opening (a click acts as it would without hover).
+  on("pointerdown", cancel);
+
+  return {
+    hovered,
+    open,
+    close,
+    stay,
+    cancel,
+    forget: (popup) => {
+      stay(popup);
+      hovered.delete(popup);
+    },
+  };
+}

package/dist/popover/popover.css

@@ -0,0 +1,20 @@
+/*
+ * Popover needs no CSS to open, close or stack: the native popover does it. What it needs is its
+ * placement next to the trigger, shared with Tooltip (placement.css). A modal popover is a modal
+ * <dialog>: the page behind it does not scroll, as behind a Dialog (without shifting the layout
+ * where the page had a classic scrollbar), and it blocks the page without dimming it, as Base UI's
+ * does (style its `::backdrop` to dim the page).
+ */
+@layer lu.core, lu.theme;
+
+@import "../placement/placement.css";
+
+@layer lu.core {
+  :root:has(dialog[data-side]:modal) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+  dialog[data-side]::backdrop {
+    background: none;
+  }
+}