@lumiose/ui 0.0.0-stage → 0.1.0

package/dist/preview-card/preview-card.script.ts

@@ -0,0 +1,136 @@
+// Preview Card's client script (decision-62, decision-63): it opens and closes every Preview Card
+// on the page. A trigger is a link with `data-preview-card` naming its popup, a manual popover
+// placed next to it by CSS anchor positioning (placement.css). Without the script the link is
+// just a link: the card is an enhancement, as Base UI says its content should be.
+//
+// - Hover, with Popover's timing (../popover/hover.ts): a mouse or a pen resting on the link opens
+//   the card after `data-delay` (600 ms); it stays while the pointer is on the link or the card,
+//   and closes `data-close-delay` (300 ms) after it left both (WCAG 1.4.13: hoverable,
+//   persistent). Never on touch: a tap follows the link.
+// - Keyboard focus (`:focus-visible`) on the link opens it after the same delay, without moving
+//   focus; it closes when focus leaves the link and the card. The open card follows its link in
+//   the focus order (the link is its invoker), so Tab reaches the card's links. A card that closes
+//   with focus inside (Escape) gives focus back to its link.
+// - Dismissal by the shared layer model (../layer/layer.ts): Escape, without moving the pointer
+//   (1.4.13: dismissible), and a press outside.
+// - Placement where CSS anchor positioning is missing (../placement/place.ts).
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+import { openLayer } from "../layer/layer.ts";
+import { anchoring, place } from "../placement/place.ts";
+import { hoverIntent } from "../popover/hover.ts";
+
+const TRIGGER = "a[data-preview-card]";
+
+/** Stops dismissing each open card (layer/layer.ts). */
+const layers = new Map<HTMLElement, () => void>();
+/** The cards that held focus as they started to close: focus goes back to their link. */
+const holding = new WeakSet<HTMLElement>();
+/** A link focus returns to: that focus does not open its card again. */
+let returning: HTMLElement | undefined;
+
+const popupOf = (trigger: HTMLElement) => {
+  const popup = document.getElementById(trigger.dataset.previewCard ?? "");
+  return popup?.hasAttribute("popover") ? popup : undefined;
+};
+
+/** Whether focus is on `trigger` from the keyboard, or inside `popup`: it keeps the card open. */
+const focusKeeps = (popup: HTMLElement, trigger: HTMLElement) =>
+  trigger.matches(":focus-visible") || popup.contains(document.activeElement);
+
+function release(popup: HTMLElement) {
+  layers.get(popup)?.();
+  layers.delete(popup);
+}
+
+const hover = hoverIntent({
+  triggerAt: (node) => node.closest?.<HTMLElement>(TRIGGER) ?? undefined,
+  popupOf,
+  show: (trigger, popup) => {
+    (popup.showPopover as (options?: { source?: HTMLElement }) => void)({ source: trigger });
+    if (!anchoring) place(popup, trigger);
+  },
+  hide: (popup, trigger) => {
+    if (!focusKeeps(popup, trigger)) popup.hidePopover();
+  },
+  delay: 600,
+  closeDelay: 300,
+});
+
+const on = <K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+) => document.addEventListener(type, listener, true);
+
+on("focusin", (event) => {
+  const target = event.target as Element;
+  const trigger = target.closest?.<HTMLElement>(TRIGGER);
+  if (trigger && trigger === returning) returning = undefined;
+  else if (trigger && target.matches(":focus-visible")) hover.open(trigger);
+  // Into an open card: it stays.
+  for (const [popup] of hover.hovered) if (popup.contains(target)) hover.stay(popup);
+});
+
+on("focusout", (event) => {
+  const from = event.target as Node;
+  const to = event.relatedTarget as Node | null;
+  for (const [popup, trigger] of hover.hovered) {
+    const inside = (node: Node | null) =>
+      !!node && (popup.contains(node) || trigger.contains(node));
+    if (inside(from) && !inside(to)) {
+      // Focus left: close, unless the pointer is still on the link or the card.
+      if (trigger.matches(":hover") || popup.matches(":hover")) continue;
+      popup.hidePopover();
+    }
+  }
+  if (from instanceof Element && from.closest?.(TRIGGER)) hover.cancel();
+});
+
+on("beforetoggle", (event) => {
+  const popup = event.target;
+  if (!(popup instanceof HTMLElement) || !popup.matches("[popover][data-preview-card-popup]")) {
+    return;
+  }
+  release(popup);
+  if (event.newState !== "open") {
+    if (popup.contains(document.activeElement)) holding.add(popup);
+    return;
+  }
+  const trigger = document.querySelector<HTMLElement>(
+    `${TRIGGER}[data-preview-card="${CSS.escape(popup.id)}"]`,
+  );
+  layers.set(
+    popup,
+    openLayer({
+      popup,
+      contains: (node) => popup.contains(node) || !!trigger?.contains(node),
+      dismiss: () => popup.hidePopover(),
+    }),
+  );
+  // Opened by the `open` prop: it is hover-opened from then on, so leaving it closes it.
+  if (trigger && !hover.hovered.has(popup)) hover.hovered.set(popup, trigger);
+  if (!anchoring && trigger) requestAnimationFrame(() => place(popup, trigger));
+});
+
+on("toggle", (event) => {
+  const popup = event.target;
+  if (!(popup instanceof HTMLElement) || !popup.matches("[popover][data-preview-card-popup]")) {
+    return;
+  }
+  if (event.newState === "closed") hover.forget(popup);
+  const trigger = document.querySelector<HTMLElement>(
+    `${TRIGGER}[data-preview-card="${CSS.escape(popup.id)}"]`,
+  );
+  trigger?.toggleAttribute("data-popup-open", event.newState === "open");
+  // Closed with focus inside (Escape, the `open` prop): the browser drops it to the page; back to
+  // the link instead (TASK-434). Focus that moved on elsewhere stays there.
+  if (event.newState === "closed" && holding.has(popup)) {
+    holding.delete(popup);
+    const active = document.activeElement;
+    if (trigger && (!active || active === document.body || popup.contains(active))) {
+      returning = trigger;
+      trigger.focus({ preventScroll: true });
+      returning = undefined;
+    }
+  }
+});

package/dist/preview-card/preview-card.tsx

@@ -0,0 +1,128 @@
+// Preview Card (decision-62, TASK-381): a card that previews a link's destination on hover and on
+// keyboard focus, after Base UI's PreviewCard. The trigger is the link itself; the popup is a
+// manual popover placed next to it with CSS anchor positioning (Popover's placement.css), which
+// preview-card.script.ts opens and closes with Popover's hover timing (../popover/hover.ts).
+// Without JavaScript the link is just a link. The popup's `toggle` event is the single source of
+// `onOpenChange`; the `open` prop drives it in the browser.
+import { createContext, effect, ref, useContext, useId } from "lumiose";
+import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
+import previewCardScript from "./preview-card.script.ts?client";
+
+/**
+ * `PreviewCard.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
+ * stands in for `open` and `onOpenChange`.
+ */
+export interface PreviewCardRootProps {
+  /** Opens (`true`) or closes (`false`) the card when it changes, in the browser. */
+  open?: boolean;
+  /** Called after the card opens or closes, whatever opened or closed it. */
+  onOpenChange?: (open: boolean) => void;
+  /** The other parts: the `Trigger` and the `Popup`, anywhere inside. */
+  children?: JSX.Element;
+}
+
+/** The link: an `<a href>` whose hover and keyboard focus open the card. */
+export type PreviewCardTriggerProps = JSX.IntrinsicElements["a"] & {
+  /** How long the pointer or focus rests on the link before the card opens, in ms. Default `600`. */
+  delay?: number;
+  /** How long the card stays after the pointer leaves the link and the card, in ms. Default `300`. */
+  closeDelay?: number;
+};
+
+/** The card: a `<div popover="manual">` placed next to the link. */
+export type PreviewCardPopupProps = JSX.IntrinsicElements["div"] & PlacementProps;
+
+interface PreviewCardContextValue {
+  id: string;
+  popupId: string;
+  popup: JSX.Ref<HTMLDivElement>;
+  onToggle: (open: boolean) => void;
+}
+
+const PreviewCardContext = createContext<PreviewCardContextValue>();
+
+function usePreviewCard(part: string): PreviewCardContextValue {
+  const context = useContext(PreviewCardContext);
+  if (!context) throw new Error(`PreviewCard.${part} must be inside <PreviewCard.Root>.`);
+  return context;
+}
+
+function Root(props: PreviewCardRootProps) {
+  // Hover, focus, dismissal and fallback placement; the page loads it once (decision-63).
+  previewCardScript();
+  const id = useId();
+  const popup = ref<HTMLDivElement>();
+  // The `open` prop drives the popover; its `toggle` event reports back.
+  effect(() => {
+    const element = popup();
+    const wanted = props.open;
+    if (!element?.isConnected || wanted === undefined) return;
+    const shown = element.matches(":popover-open");
+    if (wanted && !shown) element.showPopover();
+    else if (!wanted && shown) element.hidePopover();
+  });
+  const context: PreviewCardContextValue = {
+    id,
+    popupId: `${id}-popup`,
+    popup,
+    onToggle: (next) => props.onOpenChange?.(next),
+  };
+  return <PreviewCardContext value={context}>{props.children}</PreviewCardContext>;
+}
+
+function Trigger({ children, delay, closeDelay, style, ...rest }: PreviewCardTriggerProps) {
+  const card = usePreviewCard("Trigger");
+  return (
+    <a
+      {...rest}
+      style={withStyle(style, { "anchor-name": anchorName(card.id) })}
+      data-preview-card={card.popupId}
+      data-delay={delay}
+      data-close-delay={closeDelay}
+    >
+      {children}
+    </a>
+  );
+}
+
+function Popup({
+  children,
+  ref: forwarded,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  ...rest
+}: PreviewCardPopupProps) {
+  const card = usePreviewCard("Popup");
+  return (
+    <div
+      {...rest}
+      {...placement({ side, align, sideOffset, alignOffset, style: rest.style }, card.id, "bottom")}
+      ref={(element: HTMLDivElement) => {
+        card.popup(element);
+        forwarded?.(element);
+      }}
+      id={card.popupId}
+      popover="manual"
+      data-preview-card-popup=""
+      on:toggle={(event: ToggleEvent) => card.onToggle(event.newState === "open")}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * A preview of a link's destination, shown while the pointer or keyboard focus rests on the link,
+ * after Base UI's PreviewCard. A visual enhancement: the link works without it (and without
+ * JavaScript), so the card should not hold anything the linked page lacks. Unstyled: style the
+ * parts through `class`, `:popover-open`, `[data-side]` and the link's `[data-popup-open]`.
+ *
+ * @example
+ * <PreviewCard.Root>
+ *   <PreviewCard.Trigger href="/docs/signals">signals</PreviewCard.Trigger>
+ *   <PreviewCard.Popup sideOffset={8}>Values that update what reads them.</PreviewCard.Popup>
+ * </PreviewCard.Root>
+ */
+export const PreviewCard = { Root, Trigger, Popup };

package/dist/progress/progress.tsx

@@ -0,0 +1,155 @@
+// Progress (decision-62, TASK-373): a native `<progress>`, after Base UI's Progress. The element
+// is the progress bar for assistive technology (`role="progressbar"`, its value and maximum, and
+// `aria-valuetext` with the formatted value), indeterminate when it has no value (`:indeterminate`);
+// the Root around it holds the label and the value text, and sets `--lu-value`. No script: a
+// progress only changes when the component renders it again.
+import { createContext, useContext, useId } from "lumiose";
+import { withStyle } from "../placement/placement.ts";
+import { formatValue, percent } from "./value.ts";
+
+interface ProgressContextValue {
+  id: string;
+  value: () => number | null;
+  min: () => number;
+  max: () => number;
+  text: () => string | undefined;
+  /** What assistive technology reads: `getAriaValueText`'s, else the formatted value. */
+  valueText: () => string | undefined;
+}
+
+const ProgressContext = createContext<ProgressContextValue>();
+
+/** `Progress.Root` renders a `<div>` around the parts, with `--lu-value` (0% to 100%). */
+export type ProgressRootProps = JSX.HTMLProps<HTMLElement> & {
+  /** The progress so far, from `min` to `max`; `null` while it is unknown (indeterminate). */
+  value: number | null;
+  /** The value at the start. Default `0`. */
+  min?: number;
+  /** The value when done. Default `100`. */
+  max?: number;
+  /** How the value is written: `Intl.NumberFormat` options. Default: a percentage of the range. */
+  format?: Intl.NumberFormatOptions;
+  /** The locale of the formatted value. Default: the browser's (the server's in server HTML). */
+  locale?: Intl.LocalesArgument;
+  /** The text assistive technology reads for the value. Default: the formatted value. */
+  getAriaValueText?: (formattedValue: string, value: number | null) => string;
+};
+
+/** The `<label>` of the progress bar. */
+export type ProgressLabelProps = JSX.IntrinsicElements["label"];
+
+/**
+ * The progress bar: a native `<progress>`, styled with `appearance: none` and its
+ * `::-webkit-progress-value` and `::-moz-progress-bar` pseudo-elements, or `--lu-value`.
+ */
+export type ProgressTrackProps = Omit<JSX.IntrinsicElements["progress"], "value" | "max">;
+
+/** A `<span>` with the formatted value. */
+export type ProgressValueProps = Omit<JSX.IntrinsicElements["span"], "children"> & {
+  /** Renders the value your way, from the formatted value and the number. */
+  children?: (formattedValue: string, value: number | null) => JSX.Element;
+};
+
+function useProgress(part: string): ProgressContextValue {
+  const context = useContext(ProgressContext);
+  if (!context) throw new Error(`Progress.${part} must be inside <Progress.Root>.`);
+  return context;
+}
+
+function Root({
+  value,
+  min,
+  max,
+  format,
+  locale,
+  getAriaValueText,
+  children,
+  style,
+  ...rest
+}: ProgressRootProps) {
+  const id = useId();
+  const low = () => min ?? 0;
+  const high = () => max ?? 100;
+  const text = () => {
+    const current = value;
+    if (current === null) return undefined;
+    return formatValue(current, low(), high(), format, locale);
+  };
+  const valueText = () => {
+    const formatted = text();
+    if (!getAriaValueText) return formatted;
+    return value === null ? undefined : getAriaValueText(formatted ?? "", value);
+  };
+  const context: ProgressContextValue = {
+    id,
+    value: () => value,
+    min: low,
+    max: high,
+    text,
+    valueText,
+  };
+  return (
+    <ProgressContext value={context}>
+      <div
+        {...rest}
+        style={withStyle(style, {
+          "--lu-value": value === null ? undefined : `${percent(value, low(), high())}%`,
+        })}
+      >
+        {children}
+      </div>
+    </ProgressContext>
+  );
+}
+
+function Label({ children, ...rest }: ProgressLabelProps) {
+  const progress = useProgress("Label");
+  return (
+    // Nothing points at the label: a caller's `id` names it (TASK-441 M39).
+    <label {...rest} id={rest.id ?? `${progress.id}-label`} for={`${progress.id}-track`}>
+      {children}
+    </label>
+  );
+}
+
+function Track(props: ProgressTrackProps) {
+  const progress = useProgress("Track");
+  // The native element counts from 0: the value's distance from `min`.
+  const position = () => {
+    const value = progress.value();
+    return value === null ? undefined : value - progress.min();
+  };
+  // Without a value (`undefined`), the runtime removes the attribute: the bar is indeterminate.
+  return (
+    <progress
+      {...props}
+      value={position()}
+      id={`${progress.id}-track`}
+      max={progress.max() - progress.min()}
+      aria-valuetext={progress.valueText()}
+    />
+  );
+}
+
+function Value({ children, ...rest }: ProgressValueProps) {
+  const progress = useProgress("Value");
+  return (
+    <span {...rest}>
+      {children ? children(progress.text() ?? "", progress.value()) : progress.text()}
+    </span>
+  );
+}
+
+/**
+ * A progress bar: a task's progress, or an indeterminate one while it is unknown. Native
+ * `<progress>`, with a label and the value as text. Unstyled: style it through `class`,
+ * `:indeterminate` and `--lu-value`.
+ *
+ * @example
+ * <Progress.Root value={uploaded()}>
+ *   <Progress.Label>Uploading</Progress.Label>
+ *   <Progress.Value />
+ *   <Progress.Track />
+ * </Progress.Root>
+ */
+export const Progress = { Root, Label, Track, Value };

package/dist/progress/value.ts

@@ -0,0 +1,23 @@
+// What Progress, Meter and Slider show for a value: Base UI's formatting (a percentage of the range
+// by default, or `Intl.NumberFormat` options), and the `--lu-value` custom property (the value's
+// place in the range, as a percentage) that styles a bar or an indicator.
+
+/** The value's place between `min` and `max`, from 0 to 100. */
+export function percent(value: number, min: number, max: number): number {
+  if (max <= min) return 0;
+  return Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+}
+
+/** The value as text: a percentage of the range, or formatted with `format` when given. */
+export function formatValue(
+  value: number,
+  min: number,
+  max: number,
+  format: Intl.NumberFormatOptions | undefined,
+  locale: Intl.LocalesArgument,
+): string {
+  if (format) return new Intl.NumberFormat(locale, format).format(value);
+  return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }).format(
+    percent(value, min, max) / 100,
+  );
+}

package/dist/radio-group/radio-group.tsx

@@ -0,0 +1,156 @@
+// RadioGroup and Radio (decision-62, TASK-367): native radios in a `<fieldset role="radiogroup">`,
+// after Base UI's RadioGroup and Radio. The platform gives the group one tab stop (the checked
+// radio, or the first), arrow keys that move and select (skipping disabled radios, following the
+// direction), `required`, submission and reset, in server HTML and without JavaScript; the legend
+// names the group. checkbox.script.ts adds read-only.
+import { createContext, effect, ref, signal, untrack, useContext, useId } from "lumiose";
+import checkboxScript from "../checkbox/checkbox.script.ts?client";
+import { describedBy, labelledBy, useField, useFormValues } from "../field/context.ts";
+import { onFormReset } from "../form/reset.ts";
+
+interface RadioGroupContextValue {
+  name: () => string;
+  value: () => string | undefined;
+  required: () => boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue>();
+
+/** The fieldset props RadioGroup passes through, without the brand of intrinsic elements' props. */
+type FieldsetProps = Omit<JSX.IntrinsicElements["fieldset"], symbol>;
+
+/**
+ * `RadioGroup` renders a `<fieldset role="radiogroup">`; name it with a `Fieldset.Legend` inside.
+ * `bind:value={signal}` stands in for `value` and `onValueChange`.
+ */
+export type RadioGroupProps = FieldsetProps & {
+  /** Checks the radio with this value when it changes. Pair it with `onValueChange`. */
+  value?: string;
+  /** The radio checked at first, when `value` is left out. */
+  defaultValue?: string;
+  /** Called with the value of the radio the user checks. */
+  onValueChange?: (value: string) => void;
+  /** The name the radios share and submit under. Default: a generated one. */
+  name?: string;
+  /** A radio must be checked to submit the form. */
+  required?: boolean;
+  /** The radios cannot be checked, but stay focusable and are submitted (`aria-readonly`). */
+  readOnly?: boolean;
+};
+
+/** `Radio.Root` renders an `<input type="radio">` of its group. */
+export type RadioRootProps = Omit<
+  JSX.IntrinsicElements["input"],
+  symbol | "type" | "checked" | "value" | "name" | "bind:checked" | "bind:value"
+> & {
+  /** Required: the value the group takes, and submits, when this radio is checked. */
+  value: string;
+};
+
+/**
+ * A group of radios with one value. Native radios inside a fieldset: arrow keys, one tab stop,
+ * forms and reset are the browser's.
+ *
+ * @example
+ * <RadioGroup name="plan" defaultValue="pro">
+ *   <Fieldset.Legend>Plan</Fieldset.Legend>
+ *   <label><Radio.Root value="free" /> Free</label>
+ *   <label><Radio.Root value="pro" /> Pro</label>
+ * </RadioGroup>
+ */
+export function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  required,
+  readOnly,
+  children,
+  ...rest
+}: RadioGroupProps) {
+  checkboxScript();
+  const field = useField();
+  const id = useId();
+  // A failed submission's values (a Form's `values`) replace the default (TASK-430).
+  const sent = useFormValues(
+    untrack(() => name ?? field?.name()),
+    untrack(() => rest.disabled),
+  );
+  const selected = signal<string | undefined>(
+    untrack(() => value ?? (sent ? sent[0] : defaultValue)),
+  );
+  // The `value` prop drives the radios when it changes.
+  effect(() => {
+    const next = value;
+    if (next !== undefined) selected.set(next);
+  });
+  const context: RadioGroupContextValue = {
+    name: () => name ?? field?.name() ?? id,
+    value: selected,
+    required: () => required === true,
+  };
+  // A form reset checks the default radio without a `change`: the group follows it, and
+  // `onValueChange` gets it ("" for none) (TASK-435).
+  const group = ref<HTMLFieldSetElement>();
+  onFormReset(
+    group,
+    () =>
+      [...group()!.querySelectorAll<HTMLInputElement>("input[type=radio]")].find(
+        (radio) => radio.checked && radio.closest("fieldset") === group(),
+      )?.value ?? "",
+    (next) => {
+      selected.set(next || undefined);
+      onValueChange?.(next);
+    },
+  );
+  return (
+    <RadioGroupContext value={context}>
+      <fieldset
+        {...rest}
+        ref={(element: HTMLFieldSetElement) => {
+          group(element);
+          rest.ref?.(element);
+        }}
+        disabled={rest.disabled || field?.disabled() || undefined}
+        // In a field the Label names the group: its `for` has no single radio to point at.
+        aria-labelledby={
+          rest["aria-labelledby"] ?? (rest["aria-label"] ? undefined : labelledBy(field))
+        }
+        aria-describedby={rest["aria-describedby"] ?? (field ? describedBy(field) : undefined)}
+        aria-invalid={rest["aria-invalid"] ?? (field?.invalid() ? "true" : undefined)}
+        role="radiogroup"
+        aria-required={required ? "true" : undefined}
+        aria-readonly={readOnly ? "true" : undefined}
+        on:change={(event: Event) => {
+          const radio = event.target as HTMLInputElement;
+          if (radio.type !== "radio" || !radio.checked) return;
+          selected.set(radio.value);
+          onValueChange?.(radio.value);
+        }}
+      >
+        {children}
+      </fieldset>
+    </RadioGroupContext>
+  );
+}
+
+function Root({ value, ...rest }: RadioRootProps) {
+  const group = useContext(RadioGroupContext);
+  if (!group) throw new Error("Radio.Root must be inside <RadioGroup>.");
+  return (
+    <input
+      required={group.required() || undefined}
+      {...rest}
+      type="radio"
+      name={group.name()}
+      value={value}
+      checked={group.value() === value}
+    />
+  );
+}
+
+/**
+ * A radio of a `RadioGroup`. Unstyled: style it through `class` and `:checked`, `:disabled` and
+ * `:focus-visible` (with `appearance: none` to draw your own).
+ */
+export const Radio = { Root };

package/dist/scroll-area/scroll-area.css

@@ -0,0 +1,72 @@
+/*
+ * The CSS Scroll Area needs to work, and nothing else (decision-62). The Viewport fills the Root
+ * and scrolls natively. Once the script runs (`:defined`), the native scrollbar is hidden and the
+ * custom scrollbars lie over the viewport's edges, their thumbs sized by `--lu-scroll-area-thumb-*`
+ * and leaving room for the corner; until then (or without JavaScript) the native scrollbars show
+ * and the custom ones stay hidden. It sits in the `lu.core` layer, so any app CSS wins.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  lu-scroll-area {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+  lu-scroll-area [data-viewport] {
+    box-sizing: border-box;
+    block-size: 100%;
+    max-block-size: inherit;
+    inline-size: 100%;
+    overflow: auto;
+  }
+  /* The Content grows with what it holds, so wide content scrolls sideways instead of spilling. */
+  lu-scroll-area [data-viewport] > * {
+    min-inline-size: fit-content;
+  }
+  lu-scroll-area:defined [data-viewport] {
+    scrollbar-width: none;
+  }
+  lu-scroll-area:defined [data-viewport]::-webkit-scrollbar {
+    display: none;
+  }
+  /* Important: a theme's display for the scrollbars must not show them without the script. */
+  lu-scroll-area:not(:defined) [data-scrollbar],
+  lu-scroll-area:not(:defined) [data-corner] {
+    display: none !important;
+  }
+  lu-scroll-area [data-scrollbar] {
+    display: flex;
+    position: absolute;
+    box-sizing: border-box;
+    touch-action: none;
+    user-select: none;
+  }
+  lu-scroll-area [data-scrollbar][hidden],
+  lu-scroll-area [data-corner][hidden] {
+    display: none;
+  }
+  lu-scroll-area [data-scrollbar][data-orientation="vertical"] {
+    inset-block: 0 var(--lu-scroll-area-corner-height, 0px);
+    inset-inline-end: 0;
+  }
+  lu-scroll-area [data-scrollbar][data-orientation="horizontal"] {
+    inset-inline: 0 var(--lu-scroll-area-corner-width, 0px);
+    inset-block-end: 0;
+  }
+  lu-scroll-area [data-scrollbar][data-orientation="vertical"] [data-thumb] {
+    inline-size: 100%;
+    block-size: var(--lu-scroll-area-thumb-height);
+  }
+  lu-scroll-area [data-scrollbar][data-orientation="horizontal"] [data-thumb] {
+    block-size: 100%;
+    inline-size: var(--lu-scroll-area-thumb-width);
+  }
+  lu-scroll-area [data-corner] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: var(--lu-scroll-area-corner-width);
+    block-size: var(--lu-scroll-area-corner-height);
+  }
+}