@viniaraujo68/plinth 0.0.0-stage → 0.2.0

package/dist/components/DateRangePicker.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+  import {
+    anchorSelection,
+    buildRange,
+    createReAnchor,
+    CUSTOM_PRESET_ID,
+    DEFAULT_PRESETS,
+    isoToLocalInput,
+    isValidRange,
+    localInputToIso,
+    type DateRange,
+    type DateRangePreset,
+  } from "./date-range.js";
+
+  interface Props {
+    class?: ClassValue;
+    /**
+     * The selected window, as UTC ISO instants. Bindable, and also reported through
+     * {@link Props.onchange} — a consumer needs one or the other, never both.
+     *
+     * It is an output, not an input: a relative preset overwrites it on every anchor. Passing one
+     * in only seeds the picker, and only alongside `preset="custom"`.
+     */
+    value?: DateRange;
+    /** The buttons offered. `id` may not be `"custom"`, which the picker reserves. */
+    presets?: readonly DateRangePreset[];
+    /**
+     * Which button starts selected — a preset id, or `"custom"`. Defaults to the first preset, or
+     * to custom when `value` was seeded without naming a preset.
+     */
+    preset?: string;
+    /**
+     * How often a relative range slides forward, in milliseconds. `0` turns re-anchoring off.
+     *
+     * A dashboard left open overnight should still be showing the last 24 hours in the morning,
+     * which is the whole reason this is on by default.
+     */
+    reAnchorMs?: number;
+    /** Names the preset group for assistive technology. */
+    label?: string;
+    /**
+     * Label of the button that switches to the typed pair. The id behind it stays
+     * {@link CUSTOM_PRESET_ID} whatever this says, so `preset="custom"` keeps working.
+     */
+    customLabel?: string;
+    /** Label of the start field. */
+    fromLabel?: string;
+    /** Label of the end field. */
+    toLabel?: string;
+    /** Shown, as an alert, while the typed pair is out of order. */
+    invalidRangeLabel?: string;
+    onchange?: (value: DateRange) => void;
+  }
+
+  let {
+    class: cls,
+    value = $bindable(),
+    presets = DEFAULT_PRESETS,
+    preset,
+    reAnchorMs = 60_000,
+    label = "Date range",
+    customLabel = "Custom",
+    fromLabel = "From",
+    toLabel = "To",
+    invalidRangeLabel = "The start must not be after the end.",
+    onchange,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const fromId = `plinth-range-from-${uid}`;
+  const toId = `plinth-range-to-${uid}`;
+  const errorId = `plinth-range-error-${uid}`;
+
+  // The selection is the picker's own state rather than a bound prop: the pair is the entire
+  // output, and a second bound value would be a second thing for a consumer to keep in step.
+  let selection = $state(
+    untrack(() => preset ?? (value ? CUSTOM_PRESET_ID : (presets[0]?.id ?? CUSTOM_PRESET_ID))),
+  );
+
+  // Wall-clock text for the two fields. Empty until custom mode is entered, because reading the
+  // local zone is a client-only measurement -- seeding these at init would make a prerendered
+  // page paint the build machine's offset and then correct itself on hydration.
+  let customFrom = $state("");
+  let customTo = $state("");
+
+  const isCustom = $derived(selection === CUSTOM_PRESET_ID);
+
+  const emit = (next: DateRange) => {
+    if (value?.from === next.from && value?.to === next.to) return;
+
+    value = next;
+    onchange?.(next);
+  };
+
+  const anchor = () => {
+    const next = anchorSelection(selection, presets, Date.now());
+    if (next) emit(next);
+  };
+
+  const seedCustomFields = (range: DateRange | undefined) => {
+    customFrom = isoToLocalInput(range?.from) ?? "";
+    customTo = isoToLocalInput(range?.to) ?? "";
+  };
+
+  const enterCustom = () => {
+    const current = value ?? (presets[0] ? buildRange(presets[0]) : undefined);
+
+    seedCustomFields(current);
+    selection = CUSTOM_PRESET_ID;
+
+    // The fields only hold whole minutes, so the range they now show is not quite the one that
+    // was emitted. Re-emitting the truncated pair is what keeps the value and the two fields the
+    // user is about to edit from disagreeing by up to a minute.
+    commitCustom();
+  };
+
+  const commitCustom = () => {
+    const from = localInputToIso(customFrom);
+    const to = localInputToIso(customTo);
+
+    if (from === null || to === null || !isValidRange(from, to)) return;
+
+    emit({ from, to });
+  };
+
+  const rangeError = $derived.by(() => {
+    if (!isCustom) return null;
+
+    const from = localInputToIso(customFrom);
+    const to = localInputToIso(customTo);
+
+    // A half-typed field is not yet wrong, so it says nothing rather than flashing an error at
+    // someone who is still filling the form in.
+    if (from === null || to === null) return null;
+
+    return isValidRange(from, to) ? null : invalidRangeLabel;
+  });
+
+  $effect(() => {
+    const intervalMs = reAnchorMs;
+    if (selection === CUSTOM_PRESET_ID) return;
+
+    // `presets` is read inside the anchor, untracked: a consumer who passes an array literal
+    // hands over a new identity on every render, and tracking it would turn each emit into
+    // another render into another anchor.
+    untrack(anchor);
+    if (intervalMs <= 0) return;
+
+    const clock = createReAnchor({ intervalMs, onAnchor: () => untrack(anchor) });
+    const onVisibilityChange = () => clock.setHidden(document.hidden);
+
+    clock.setHidden(document.hidden);
+    clock.start();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      clock.stop();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  });
+
+  $effect(() => {
+    if (selection !== CUSTOM_PRESET_ID) return;
+
+    // Covers the one path into custom mode that is not a click: a picker mounted with
+    // `preset="custom"`. Seeding without emitting, because a value the consumer supplied is
+    // theirs to keep -- the click path is the one that re-emits.
+    untrack(() => {
+      if (!customFrom && !customTo) seedCustomFields(value);
+    });
+  });
+</script>
+
+<!--
+@component
+A from/to picker built as a plain form control: relative presets, a custom pair of local
+date-times, and `{ from, to }` as UTC ISO strings on the way out. It fetches nothing, knows no
+query parameter, and reads no URL — what the pair means is the consumer's business.
+
+A relative preset re-anchors on a timer (`reAnchorMs`, 60s by default, `0` to disable), so a
+dashboard left open keeps sliding forward. The timer suspends while the tab is hidden and fires
+once on return. A custom range is never touched by it.
+
+The two custom fields are `<input type="datetime-local">`, which means they are wall-clock time in
+the viewer's own zone with no offset attached, while the emitted pair stays in UTC. The conversion
+runs to whole minutes in both directions; see `isoToLocalInput` / `localInputToIso`.
+
+Every word it renders is a prop with an English default — `label`, `customLabel`, `fromLabel`,
+`toLabel` and `invalidRangeLabel` — because the library ships no translations. Only the wording
+moves: the custom button keeps the reserved `"custom"` id whatever `customLabel` says. The preset
+buttons are labelled by the list itself, through `DateRangePreset.label`.
+
+```svelte
+<DateRangePicker bind:value={range} preset="24h" onchange={(r) => load(r)} />
+```
+-->
+
+<div class={["flex flex-wrap items-end gap-x-4 gap-y-3", cls]}>
+  <div class="join" role="group" aria-label={label}>
+    {#each presets as option (option.id)}
+      <button
+        type="button"
+        class="btn join-item min-h-11"
+        class:btn-primary={selection === option.id}
+        aria-pressed={selection === option.id}
+        onclick={() => (selection = option.id)}
+      >
+        {option.label}
+      </button>
+    {/each}
+
+    <button
+      type="button"
+      class="btn join-item min-h-11"
+      class:btn-primary={isCustom}
+      aria-pressed={isCustom}
+      onclick={enterCustom}
+    >
+      {customLabel}
+    </button>
+  </div>
+
+  {#if isCustom}
+    <div class="flex flex-wrap items-end gap-x-4 gap-y-3">
+      <div class="flex flex-col gap-1">
+        <label class="label text-xs" for={fromId}>{fromLabel}</label>
+        <input
+          id={fromId}
+          class="input min-h-11"
+          class:input-error={rangeError !== null}
+          type="datetime-local"
+          value={customFrom}
+          aria-invalid={rangeError !== null}
+          aria-describedby={rangeError === null ? undefined : errorId}
+          oninput={({ currentTarget }) => {
+            customFrom = currentTarget.value;
+            commitCustom();
+          }}
+        />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <label class="label text-xs" for={toId}>{toLabel}</label>
+        <input
+          id={toId}
+          class="input min-h-11"
+          class:input-error={rangeError !== null}
+          type="datetime-local"
+          value={customTo}
+          aria-invalid={rangeError !== null}
+          aria-describedby={rangeError === null ? undefined : errorId}
+          oninput={({ currentTarget }) => {
+            customTo = currentTarget.value;
+            commitCustom();
+          }}
+        />
+      </div>
+    </div>
+  {/if}
+
+  {#if rangeError !== null}
+    <p id={errorId} class="basis-full text-sm text-error" role="alert">{rangeError}</p>
+  {/if}
+</div>

package/dist/components/DateRangePicker.svelte.d.ts

@@ -0,0 +1,66 @@
+import type { ClassValue } from "svelte/elements";
+import { type DateRange, type DateRangePreset } from "./date-range.js";
+interface Props {
+    class?: ClassValue;
+    /**
+     * The selected window, as UTC ISO instants. Bindable, and also reported through
+     * {@link Props.onchange} — a consumer needs one or the other, never both.
+     *
+     * It is an output, not an input: a relative preset overwrites it on every anchor. Passing one
+     * in only seeds the picker, and only alongside `preset="custom"`.
+     */
+    value?: DateRange;
+    /** The buttons offered. `id` may not be `"custom"`, which the picker reserves. */
+    presets?: readonly DateRangePreset[];
+    /**
+     * Which button starts selected — a preset id, or `"custom"`. Defaults to the first preset, or
+     * to custom when `value` was seeded without naming a preset.
+     */
+    preset?: string;
+    /**
+     * How often a relative range slides forward, in milliseconds. `0` turns re-anchoring off.
+     *
+     * A dashboard left open overnight should still be showing the last 24 hours in the morning,
+     * which is the whole reason this is on by default.
+     */
+    reAnchorMs?: number;
+    /** Names the preset group for assistive technology. */
+    label?: string;
+    /**
+     * Label of the button that switches to the typed pair. The id behind it stays
+     * {@link CUSTOM_PRESET_ID} whatever this says, so `preset="custom"` keeps working.
+     */
+    customLabel?: string;
+    /** Label of the start field. */
+    fromLabel?: string;
+    /** Label of the end field. */
+    toLabel?: string;
+    /** Shown, as an alert, while the typed pair is out of order. */
+    invalidRangeLabel?: string;
+    onchange?: (value: DateRange) => void;
+}
+/**
+ * A from/to picker built as a plain form control: relative presets, a custom pair of local
+ * date-times, and `{ from, to }` as UTC ISO strings on the way out. It fetches nothing, knows no
+ * query parameter, and reads no URL — what the pair means is the consumer's business.
+ *
+ * A relative preset re-anchors on a timer (`reAnchorMs`, 60s by default, `0` to disable), so a
+ * dashboard left open keeps sliding forward. The timer suspends while the tab is hidden and fires
+ * once on return. A custom range is never touched by it.
+ *
+ * The two custom fields are `<input type="datetime-local">`, which means they are wall-clock time in
+ * the viewer's own zone with no offset attached, while the emitted pair stays in UTC. The conversion
+ * runs to whole minutes in both directions; see `isoToLocalInput` / `localInputToIso`.
+ *
+ * Every word it renders is a prop with an English default — `label`, `customLabel`, `fromLabel`,
+ * `toLabel` and `invalidRangeLabel` — because the library ships no translations. Only the wording
+ * moves: the custom button keeps the reserved `"custom"` id whatever `customLabel` says. The preset
+ * buttons are labelled by the list itself, through `DateRangePreset.label`.
+ *
+ * ```svelte
+ * <DateRangePicker bind:value={range} preset="24h" onchange={(r) => load(r)} />
+ * ```
+ */
+declare const DateRangePicker: import("svelte").Component<Props, {}, "value">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/Dialog.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { flushSync, type Snippet } from "svelte";
+  import type { Attachment } from "svelte/attachments";
+  import type { HTMLDialogAttributes } from "svelte/elements";
+
+  interface Props extends HTMLDialogAttributes {
+    /** Rendered only while the dialog is on screen. */
+    children: Snippet;
+  }
+
+  let { children, ...rest }: Props = $props();
+
+  let mounted = $state(false);
+  let element = $state<HTMLDialogElement>();
+
+  /**
+   * Mount the content and raise the dialog into the top layer as a modal.
+   *
+   * Safe to call on an already open dialog, which `showModal()` itself is not.
+   */
+  export function show() {
+    mounted = true;
+    // The element does not exist until the block below has been applied to the DOM. Flushing here
+    // is what keeps `show()` a plain synchronous call: without it the caller would have to await a
+    // tick before the dialog it just asked for exists.
+    flushSync();
+    if (element && !element.open) element.showModal();
+  }
+
+  /** Close the dialog. The content stays mounted until the element has finished disappearing. */
+  export function close(returnValue?: string) {
+    element?.close(returnValue);
+  }
+
+  const unmountWhenHidden: Attachment<HTMLDialogElement> = (dialog) => {
+    const listener = (event: Event) => {
+      // Opening transitions too, and the `toggle` that announces the open state arrives while the
+      // element is still being raised. Only an end state that is actually invisible may unmount.
+      if (event instanceof ToggleEvent && event.newState === "open") return;
+
+      // Being closed and being gone are not the same thing. A stylesheet that keeps the element
+      // displayed while fading it out -- daisyUI's `.modal` is `display: grid` at all times and
+      // animates `visibility` -- would otherwise have the content ripped out mid-animation, so the
+      // question asked here is "has it finished disappearing", not "is the open attribute gone".
+      if (mounted && !dialog.checkVisibility({ opacityProperty: true, visibilityProperty: true }))
+        mounted = false;
+    };
+
+    // `toggle` covers an instant hide (no transition, or reduced motion); the two transition events
+    // cover a fade, including one cut short by a reopen.
+    dialog.addEventListener("toggle", listener);
+    dialog.addEventListener("transitionend", listener);
+    dialog.addEventListener("transitioncancel", listener);
+
+    return () => {
+      dialog.removeEventListener("toggle", listener);
+      dialog.removeEventListener("transitionend", listener);
+      dialog.removeEventListener("transitioncancel", listener);
+    };
+  };
+
+  // The element's own `open` attribute is the other way in, and it shows the dialog NON-modally:
+  // no top layer, no inert background, no Escape. Seeding the mount from it keeps that path from
+  // rendering an empty shell.
+  $effect(() => {
+    if (rest.open) mounted = true;
+  });
+</script>
+
+<!--
+@component
+A native `<dialog>` that only exists while it is on screen.
+
+The point of the wrapper is what it does NOT do. Modality, the focus trap, Escape, returning focus
+to whatever opened it and stacking above the rest of the page without a z-index fight are all the
+browser's, delivered by `showModal()` and correct in a way a hand-rolled overlay rarely is. This
+component adds one thing on top: the content is mounted on `show()` and unmounted once the element
+has finished disappearing, so a page can declare a dozen dialogs -- each with its own form, fetch
+or chart inside -- and pay for none of them until one is opened.
+
+There is no chrome here: no title, no close button, no padding. Use `Modal` for that, or style the
+element yourself through `class` and any other `<dialog>` attribute, which are forwarded.
+
+```svelte
+<script lang="ts">
+  let confirmation = $state<Dialog>();
+</script>
+
+<button onclick={() => confirmation?.show()}>Delete</button>
+
+<Dialog bind:this={confirmation} class="rounded-box bg-base-100 p-6">
+  <p>This cannot be undone.</p>
+  <button onclick={() => confirmation?.close()}>Cancel</button>
+</Dialog>
+```
+-->
+
+{#if mounted}
+  <dialog bind:this={element} {@attach unmountWhenHidden} {...rest}>
+    {@render children()}
+  </dialog>
+{/if}

package/dist/components/Dialog.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type Snippet } from "svelte";
+import type { HTMLDialogAttributes } from "svelte/elements";
+interface Props extends HTMLDialogAttributes {
+    /** Rendered only while the dialog is on screen. */
+    children: Snippet;
+}
+/**
+ * A native `<dialog>` that only exists while it is on screen.
+ *
+ * The point of the wrapper is what it does NOT do. Modality, the focus trap, Escape, returning focus
+ * to whatever opened it and stacking above the rest of the page without a z-index fight are all the
+ * browser's, delivered by `showModal()` and correct in a way a hand-rolled overlay rarely is. This
+ * component adds one thing on top: the content is mounted on `show()` and unmounted once the element
+ * has finished disappearing, so a page can declare a dozen dialogs -- each with its own form, fetch
+ * or chart inside -- and pay for none of them until one is opened.
+ *
+ * There is no chrome here: no title, no close button, no padding. Use `Modal` for that, or style the
+ * element yourself through `class` and any other `<dialog>` attribute, which are forwarded.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * let confirmation = $state<Dialog>();
+ * </script>
+ *
+ * <button onclick={() => confirmation?.show()}>Delete</button>
+ *
+ * <Dialog bind:this={confirmation} class="rounded-box bg-base-100 p-6">
+ * <p>This cannot be undone.</p>
+ * <button onclick={() => confirmation?.close()}>Cancel</button>
+ * </Dialog>
+ * ```
+ */
+declare const Dialog: import("svelte").Component<Props, {
+    show: () => void;
+    close: (returnValue?: string) => void;
+}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { flushSync, onDestroy, type Snippet } from "svelte";
+  import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
+  import { positionUnder, supportsAnchorPositioning } from "../anchoring.js";
+
+  type Props = HTMLButtonAttributes & {
+    children: Snippet;
+    content: Snippet;
+    /** Classes for the panel — the only part of this component the trigger's `class` cannot
+        reach, since the trigger is the root. */
+    panelClass?: ClassValue | null;
+    /** Whether the panel is open, however it got there. Bind to read it; the popover decides it. */
+    expanded?: boolean;
+    /** Hangs the panel just under the trigger at the trigger's width, as a field's list does. */
+    matchWidth?: boolean;
+  };
+
+  let {
+    children,
+    content,
+    panelClass,
+    expanded = $bindable(false),
+    matchWidth = false,
+    type,
+    ...rest
+  }: Props = $props();
+
+  // `popovertarget` needs a document-unique id, and `$props.id()` is the only source of one that
+  // is stable across server render and hydration.
+  const uid = $props.id();
+  const panelId = `plinth-dropdown-${uid}`;
+  const anchorName = `--${panelId}`;
+
+  const FIELD_GAP = 4;
+
+  let isMounted = $state(false);
+  let trigger = $state<HTMLButtonElement>();
+  let panel = $state<HTMLElement>();
+
+  let stopPositioning: (() => void) | undefined;
+
+  /* Without anchor positioning the placement rules at the bottom of this file are dropped and
+     the UA popover ones -- `position: fixed; inset: 0; margin: auto` -- are all that is left,
+     which floats the panel in the middle of the screen with no relation to the trigger. Script
+     places it instead, to the geometry `position-area: bottom` gives: centred on the trigger,
+     right under it, and above it when there is no room below. */
+  const reposition = () => {
+    stopPositioning?.();
+    stopPositioning = undefined;
+    if (!panel || !trigger || supportsAnchorPositioning()) return;
+
+    // The edge margin the stylesheet gives the panel, read before the script takes the margins
+    // over, so both paths keep the same distance from the side of the screen.
+    const edge = parseFloat(getComputedStyle(panel).marginLeft) || 0;
+    stopPositioning = positionUnder(
+      panel,
+      trigger,
+      matchWidth ? { gap: FIELD_GAP, matchWidth } : { inset: edge },
+    );
+  };
+
+  const releasePositioning = () => {
+    stopPositioning?.();
+    stopPositioning = undefined;
+  };
+
+  // A panel left open when the dropdown is destroyed would otherwise leave the reposition
+  // listeners on the window, holding a detached element.
+  onDestroy(releasePositioning);
+
+  /**
+   * Opens the panel, or, when it is already open, moves focus back to its `autofocus` element, so a
+   * caller can send the keyboard back into the panel after Shift+Tab took it out.
+   */
+  export function open() {
+    if (!panel) return;
+    if (panel.matches(":popover-open")) {
+      panel.querySelector<HTMLElement>("[autofocus]")?.focus();
+      return;
+    }
+    panel.showPopover();
+    reposition();
+  }
+
+  /** Closes the panel — for dismissing it once an action inside `content` has finished. */
+  export function close() {
+    panel?.hidePopover();
+  }
+
+  /* A hidden popover stops rendering entirely, which freezes any exit transition mid-flight and
+     means its `transitionend` never arrives. Asking the element whether it is actually visible is
+     the only reading that holds for both an animated and an instant close. */
+  const unmountWhenHidden = () => {
+    if (!panel || panel.matches(":popover-open")) return;
+    if (!panel.checkVisibility({ opacityProperty: true, visibilityProperty: true }))
+      isMounted = false;
+  };
+  /* See OptionPanel: a descendant's transition must not be mistaken for the panel's exit. */
+  const onTransitionSettled = (event: TransitionEvent) => {
+    if (event.target === event.currentTarget) unmountWhenHidden();
+  };
+
+  const onBeforeToggle = (event: ToggleEvent) => {
+    if (event.newState === "open") flushSync(() => (isMounted = true));
+    else if (panel?.contains(document.activeElement)) trigger?.focus({ preventScroll: true });
+  };
+
+  const onToggle = (event: ToggleEvent) => {
+    expanded = event.newState === "open";
+    if (expanded) {
+      reposition();
+    } else {
+      releasePositioning();
+      unmountWhenHidden();
+    }
+  };
+</script>
+
+<!--
+@component
+A button that toggles a panel through the native popover API, so clicking the trigger again,
+clicking outside, and pressing Escape all dismiss it without a single listener of our own. The
+button is the root: class, handlers and aria go straight onto it, and `panelClass` styles the
+panel.
+
+The popover itself — not a local flag — is the source of truth for open/closed; `aria-expanded`
+and the bindable `expanded` are read back from its `toggle` event. Content mounts just before the
+panel shows, however it was opened, and unmounts once the panel is really hidden, so an expensive
+menu costs nothing until it is used. An element inside it marked `autofocus` takes the focus as the
+panel shows, and closing the panel with the focus inside it hands the focus back to the trigger.
+
+`open()` and `close()` are exposed for `bind:this`, which is what a form inside the panel needs to
+dismiss itself after submitting. `open()` on a panel that is already open moves the focus back to
+its `autofocus` element.
+
+A panel that would run off the side of the screen is pulled back onto it and keeps half a rem from
+the edge, in both the anchored and the scripted placement; `--dropdown-edge` changes the distance.
+`matchWidth` hangs it instead just under the trigger and exactly as wide, for a trigger that is a
+field, the way the `Select` panel hangs under its control.
+
+```svelte
+<Dropdown bind:this={menu} class="btn" panelClass="dropdown menu w-56 rounded-box bg-base-200 p-2">
+  Actions
+  {#snippet content()}
+    <li><button onclick={() => menu.close()}>Archive</button></li>
+  {/snippet}
+</Dropdown>
+```
+-->
+
+<button
+  {...rest}
+  bind:this={trigger}
+  type={type ?? "button"}
+  popovertarget={panelId}
+  aria-expanded={expanded}
+  style:anchor-name={anchorName}
+>
+  {@render children()}
+</button>
+<div
+  bind:this={panel}
+  class={[panelClass, matchWidth && "match-width"]}
+  popover
+  id={panelId}
+  style:position-anchor={anchorName}
+  onbeforetoggle={onBeforeToggle}
+  ontoggle={onToggle}
+  ontransitionend={onTransitionSettled}
+  ontransitioncancel={onTransitionSettled}
+>
+  {#if isMounted}
+    {@render content()}
+  {/if}
+</div>
+
+<style>
+  [popover] {
+    position-area: bottom;
+    position-try: top, left, right;
+    /* A panel wider than the room left beside its trigger is shifted back onto the screen, and the
+       shift stops at the margin box: with no inline margin a menu opened from a trigger at the edge
+       of a phone lands flush against the glass. The custom property is the way to change it, since
+       this rule outranks a utility class passed through `panelClass`. */
+    margin-inline: var(--dropdown-edge, 0.5rem);
+  }
+
+  [popover].match-width {
+    position-try: top;
+    box-sizing: border-box;
+    width: anchor-size(width);
+    margin-inline: 0;
+    margin-block: 0.25rem;
+  }
+
+  /* A closed popover is hidden by a rule in the UA stylesheet, which every author rule outranks --
+     including the `display: flex` that daisyUI's `menu` and friends carry. Passing one of those
+     through `panelClass` would otherwise pin the panel open with no error anywhere. Restating the
+     rule here puts it at a specificity a utility class cannot reach, while leaving an exit
+     transition possible for a caller who asks for one with `transition-behavior: allow-discrete`. */
+  [popover]:not(:popover-open) {
+    display: none;
+  }
+</style>