@zyncat/ui 0.8.0

package/src/components/composites/date-picker/time-core.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import './date-picker.css';
+import { useEffect, useRef, useState, type ClipboardEvent, type KeyboardEvent, type RefObject } from 'react';
+import { cx } from '../../internal/utils/cx';
+import { pad } from './date-utils';
+
+type Meridiem = 'AM' | 'PM';
+type Segment = 'h' | 'm';
+interface Pending {
+  seg: Segment;
+  d: number;
+}
+
+export interface TimeSegmentsProps {
+  value?: string | null;
+  onCommit?: (value: string) => void;
+  format?: '24h' | '12h';
+  minuteStep?: number;
+  min?: string | null;
+  max?: string | null;
+  disabled?: boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export const disp12 = (h24: number): number => ((h24 + 11) % 12) + 1;
+const tsgToH24 = (d12: number, mer: Meridiem): number => (d12 % 12) + (mer === 'PM' ? 12 : 0);
+
+function tsgFeed(pend: number | null, d: number, hi: number): { val: number; done: boolean } {
+  if (pend != null) {
+    const n = pend * 10 + d;
+    if (n <= hi) return { val: n, done: true };
+  }
+  return { val: d, done: d * 10 > hi };
+}
+
+export function TimeSegments({
+  value = null,
+  onCommit,
+  format = '24h',
+  minuteStep = 5,
+  min = null,
+  max = null,
+  disabled = false,
+  ariaLabel = 'Time',
+  className = '',
+}: TimeSegmentsProps) {
+  const is12 = format === '12h';
+  const seed = value ? value.split(':').map(Number) : [null, null];
+
+  const [h, setHState] = useState<number | null>(seed[0]);
+  const [m, setMState] = useState<number | null>(seed[1]);
+  const [mer, setMer] = useState<Meridiem>(seed[0] != null && seed[0] >= 12 ? 'PM' : 'AM');
+  const [pend, setPendState] = useState<Pending | null>(null);
+
+  const hLive = useRef<number | null>(seed[0]);
+  const mLive = useRef<number | null>(seed[1]);
+  const pendLive = useRef<Pending | null>(null);
+  const setH = (v: number | null) => {
+    hLive.current = v;
+    setHState(v);
+  };
+  const setM = (v: number | null) => {
+    mLive.current = v;
+    setMState(v);
+  };
+  const setPend = (v: Pending | null) => {
+    pendLive.current = v;
+    setPendState(v);
+  };
+
+  const hRef = useRef<HTMLSpanElement>(null);
+  const mRef = useRef<HTMLSpanElement>(null);
+  const merRef = useRef<HTMLSpanElement>(null);
+  const lastRef = useRef<string | null>(value || null);
+
+  useEffect(() => {
+    if ((value || null) === lastRef.current) return;
+    lastRef.current = value || null;
+    const p = value ? value.split(':').map(Number) : [null, null];
+    setH(p[0]);
+    setM(p[1]);
+    if (p[0] != null) setMer(p[0] >= 12 ? 'PM' : 'AM');
+    setPend(null);
+  }, [value]);
+
+  function tryCommit(nh: number | null, nm: number | null) {
+    if (nh == null || nm == null) return;
+    let t = pad(nh) + ':' + pad(nm);
+    if (min && t < min) t = min;
+    if (max && t > max) t = max;
+    const p = t.split(':').map(Number);
+    if (p[0] !== nh) {
+      setH(p[0]);
+      setMer(p[0] >= 12 ? 'PM' : 'AM');
+      setPend(null);
+    }
+    if (p[1] !== nm) setM(p[1]);
+    if (t === lastRef.current) return;
+    lastRef.current = t;
+    if (onCommit) onCommit(t);
+  }
+
+  const focusSeg = (r: RefObject<HTMLSpanElement | null>) => {
+    if (r.current) r.current.focus();
+  };
+
+  function onHKey(e: KeyboardEvent<HTMLSpanElement>) {
+    const k = e.key;
+    if (/^[0-9]$/.test(k)) {
+      const pd = pend && pend.seg === 'h' ? pend.d : null;
+      const r = tsgFeed(pd, +k, is12 ? 12 : 23);
+      const nh = is12 ? tsgToH24(r.val === 0 ? 12 : r.val, mer) : r.val;
+      setH(nh);
+      if (!is12) setMer(nh >= 12 ? 'PM' : 'AM');
+      setPend(r.done ? null : { seg: 'h', d: r.val });
+      if (r.done) {
+        focusSeg(mRef);
+        tryCommit(nh, mLive.current);
+      }
+    } else if (k === 'ArrowUp' || k === 'ArrowDown') {
+      const dir = k === 'ArrowUp' ? 1 : -1;
+      const nh = h == null ? new Date().getHours() : (h + dir + 24) % 24;
+      setH(nh);
+      setMer(nh >= 12 ? 'PM' : 'AM');
+      setPend(null);
+      tryCommit(nh, mLive.current);
+    } else if (k === 'Backspace' || k === 'Delete') {
+      setH(null);
+      setPend(null);
+    } else if (k === 'ArrowRight' || k === ':' || k === ';') {
+      focusSeg(mRef);
+    } else if (k === 'Tab') {
+      return;
+    } else if (k.length === 1 && !e.metaKey && !e.ctrlKey) {
+    } else return;
+    e.preventDefault();
+  }
+
+  function onMKey(e: KeyboardEvent<HTMLSpanElement>) {
+    const k = e.key;
+    if (/^[0-9]$/.test(k)) {
+      const pd = pend && pend.seg === 'm' ? pend.d : null;
+      const r = tsgFeed(pd, +k, 59);
+      setM(r.val);
+      setPend(r.done ? null : { seg: 'm', d: r.val });
+      if (r.done) {
+        if (is12) focusSeg(merRef);
+        tryCommit(hLive.current, r.val);
+      }
+    } else if (k === 'ArrowUp' || k === 'ArrowDown') {
+      const dir = k === 'ArrowUp' ? 1 : -1;
+      let nm;
+      if (m == null) {
+        nm = (Math.round(new Date().getMinutes() / minuteStep) * minuteStep) % 60;
+      } else {
+        const next =
+          dir > 0 ? (Math.floor(m / minuteStep) + 1) * minuteStep : (Math.ceil(m / minuteStep) - 1) * minuteStep;
+        nm = ((next % 60) + 60) % 60;
+      }
+      setM(nm);
+      setPend(null);
+      tryCommit(hLive.current, nm);
+    } else if (k === 'Backspace' || k === 'Delete') {
+      if (m == null && !(pend && pend.seg === 'm')) {
+        focusSeg(hRef);
+      } else {
+        setM(null);
+        setPend(null);
+      }
+    } else if (k === 'ArrowLeft') {
+      focusSeg(hRef);
+    } else if (k === 'ArrowRight' && is12) {
+      focusSeg(merRef);
+    } else if (k === 'Tab') {
+      return;
+    } else if (k.length === 1 && !e.metaKey && !e.ctrlKey) {
+    } else return;
+    e.preventDefault();
+  }
+
+  function setMeridiem(next: Meridiem) {
+    setMer(next);
+    if (h != null) {
+      const nh = tsgToH24(disp12(h), next);
+      setH(nh);
+      tryCommit(nh, mLive.current);
+    }
+  }
+  function onMerKey(e: KeyboardEvent<HTMLSpanElement>) {
+    const k = e.key;
+    if (k === 'a' || k === 'A') setMeridiem('AM');
+    else if (k === 'p' || k === 'P') setMeridiem('PM');
+    else if (k === 'ArrowUp' || k === 'ArrowDown') setMeridiem(mer === 'AM' ? 'PM' : 'AM');
+    else if (k === 'ArrowLeft') focusSeg(mRef);
+    else if (k === 'Tab') {
+      return;
+    } else if (k.length === 1 && !e.metaKey && !e.ctrlKey) {
+    } else return;
+    e.preventDefault();
+  }
+
+  function onPaste(e: ClipboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    const txt = (e.clipboardData.getData('text') || '').trim();
+    const mt = txt.match(/^(\d{1,2})[:h.\s]?(\d{2})?\s*([ap])\.?m?\.?$/i) || txt.match(/^(\d{1,2})[:h.\s]?(\d{2})?$/);
+    if (!mt) return;
+    e.preventDefault();
+    let hh = +mt[1];
+    const mm = mt[2] != null ? +mt[2] : 0;
+    if (mt[3]) hh = tsgToH24(hh, /^p/i.test(mt[3]) ? 'PM' : 'AM');
+    if (hh > 23 || mm > 59) return;
+    setH(hh);
+    setM(mm);
+    setMer(hh >= 12 ? 'PM' : 'AM');
+    setPend(null);
+    tryCommit(hh, mm);
+  }
+
+  const onSegBlur = (seg: Segment) => () => {
+    if (pendLive.current && pendLive.current.seg === seg) {
+      setPend(null);
+      tryCommit(hLive.current, mLive.current);
+    }
+  };
+
+  const hText = pend && pend.seg === 'h' ? pad(pend.d) : h == null ? '--' : pad(is12 ? disp12(h) : h);
+  const mText = pend && pend.seg === 'm' ? pad(pend.d) : m == null ? '--' : pad(m);
+
+  const segCls = (empty: boolean): string => 'tsg__seg' + (empty ? ' is-empty' : '');
+  const tab = disabled ? -1 : 0;
+
+  return (
+    <div
+      className={cx('tsg', disabled && 'is-disabled', className)}
+      role="group"
+      aria-label={ariaLabel}
+      aria-disabled={disabled || undefined}
+      onPaste={onPaste}
+    >
+      <span
+        ref={hRef}
+        className={segCls(h == null && !(pend && pend.seg === 'h'))}
+        role="spinbutton"
+        tabIndex={tab}
+        aria-label="Hours"
+        aria-valuemin={is12 ? 1 : 0}
+        aria-valuemax={is12 ? 12 : 23}
+        aria-valuenow={h == null ? undefined : is12 ? disp12(h) : h}
+        aria-valuetext={h == null ? 'Empty' : hText}
+        onKeyDown={disabled ? undefined : onHKey}
+        onBlur={onSegBlur('h')}
+      >
+        {hText}
+      </span>
+      <span className="tsg__sep" aria-hidden="true">
+        :
+      </span>
+      <span
+        ref={mRef}
+        className={segCls(m == null && !(pend && pend.seg === 'm'))}
+        role="spinbutton"
+        tabIndex={tab}
+        aria-label="Minutes"
+        aria-valuemin={0}
+        aria-valuemax={59}
+        aria-valuenow={m == null ? undefined : m}
+        aria-valuetext={m == null ? 'Empty' : mText}
+        onKeyDown={disabled ? undefined : onMKey}
+        onBlur={onSegBlur('m')}
+      >
+        {mText}
+      </span>
+      {is12 ? (
+        <span
+          ref={merRef}
+          className="tsg__seg tsg__seg--mer"
+          role="spinbutton"
+          tabIndex={tab}
+          aria-label="AM or PM"
+          aria-valuetext={mer}
+          onKeyDown={disabled ? undefined : onMerKey}
+        >
+          {mer}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/composites/date-picker/use-day-focus.ts

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useRef, type RefObject } from 'react';
+
+export function useDayFocus(
+  daysRef: RefObject<HTMLDivElement | null>,
+  focusKey: string,
+  viewDep?: number,
+  seedSelector?: string,
+): () => void {
+  const pending = useRef(false);
+
+  useEffect(() => {
+    const el = daysRef.current;
+    if (!el) return;
+    const btn =
+      (seedSelector && el.querySelector(seedSelector)) ||
+      el.querySelector('[data-key="' + focusKey + '"]:not(:disabled)') ||
+      el.querySelector('.dtp__day:not(:disabled)');
+    if (btn) (btn as HTMLElement).focus({ preventScroll: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!pending.current || !daysRef.current) return;
+    pending.current = false;
+    const btn = daysRef.current.querySelector('[data-key="' + focusKey + '"]');
+    if (btn) (btn as HTMLElement).focus({ preventScroll: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusKey, viewDep]);
+
+  return () => {
+    pending.current = true;
+  };
+}

package/src/components/composites/dialog/Dialog.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import './dialog.css';
+import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { Presence } from '../../../motion/presence';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';
+import { ModalShell } from '../../internal/overlay/modal';
+import { Icon } from '../../internal/icon/Icon';
+import { IconSlot } from '../../internal/icon/IconSlot';
+import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const DIALOG_TIMING = {
+  open: { duration: 'slow', ease: 'entrance' },
+  close: { duration: 'base', ease: 'standard' },
+} as const;
+
+export interface DialogProps {
+  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */
+  open?: boolean;
+  /** Initial open state when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+  onOpenChange?: (open: boolean) => void;
+  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */
+  trigger?: ReactElement | null;
+  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */
+  title?: ReactNode;
+  /** Subtext under the title - wired to `aria-describedby`. @default null */
+  description?: ReactNode;
+  /** Panel width. @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */
+  tone?: 'default' | 'danger';
+  /** Your own icon node for the header badge (alert dialogs). */
+  icon?: ReactNode;
+  /** Close button + backdrop/Esc dismissal. Default true. */
+  dismissible?: boolean;
+  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */
+  footer?: ReactNode | ((close: () => void) => ReactNode);
+  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */
+  children?: ReactNode;
+  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.
+   *  Auto-generated when omitted. */
+  id?: string;
+  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */
+  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;
+  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
+  animation?: DisableableAnimation;
+}
+
+interface DialogSurfaceProps {
+  panelId: string;
+  size: 'sm' | 'md' | 'lg';
+  tone: 'default' | 'danger';
+  icon: ReactNode;
+  title: ReactNode;
+  description: ReactNode;
+  dismissible: boolean;
+  footerContent: ReactNode;
+  requestClose: () => void;
+  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;
+  children?: ReactNode;
+}
+
+function DialogSurface({
+  panelId,
+  size,
+  tone,
+  icon,
+  title,
+  description,
+  dismissible,
+  footerContent,
+  requestClose,
+  htmlProps,
+  children,
+}: DialogSurfaceProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const titleId = panelId + '-title';
+  const descId = panelId + '-desc';
+
+  useScrollEdges(bodyRef, (edges, el) => {
+    el.toggleAttribute('data-scroll-top', edges.top);
+    el.toggleAttribute('data-scroll-bottom', edges.bottom);
+  });
+
+  return (
+    <section
+      {...htmlProps}
+      className={cx('dialog', htmlProps?.className)}
+      role="dialog"
+      aria-modal="true"
+      data-size={size === 'md' ? undefined : size}
+      data-tone={tone === 'default' ? undefined : tone}
+      aria-labelledby={title ? titleId : undefined}
+      aria-describedby={description ? descId : undefined}
+    >
+      <header className="dialog__header">
+        {icon && (
+          <span className="dialog__icon">
+            <IconSlot size="md">{icon}</IconSlot>
+          </span>
+        )}
+        <div className="dialog__heading">
+          {title && (
+            <h2 className="dialog__title" id={titleId}>
+              {title}
+            </h2>
+          )}
+          {description && (
+            <p className="dialog__desc" id={descId}>
+              {description}
+            </p>
+          )}
+        </div>
+        {dismissible && (
+          <button type="button" className="dialog__close" aria-label="Close dialog" onClick={requestClose}>
+            <Icon name="x" size="sm" weight="bold" />
+          </button>
+        )}
+      </header>
+
+      <div className="dialog__body" ref={bodyRef}>
+        {children}
+      </div>
+
+      {footerContent && <footer className="dialog__footer">{footerContent}</footer>}
+    </section>
+  );
+}
+
+export function Dialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  title,
+  description = null,
+  size = 'md',
+  tone = 'default',
+  icon = null,
+  dismissible = true,
+  footer = null,
+  children,
+  id,
+  htmlProps,
+  animation,
+}: DialogProps) {
+  const autoId = useId();
+  const panelId = id || 'dialog-' + autoId;
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef<HTMLElement>(null);
+  const close = () => setOpen(false);
+
+  const timings = resolveMotionTiming(animation, DIALOG_TIMING);
+
+  return (
+    <Fragment>
+      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}
+      <OverlayPortal>
+        <Presence>
+          {open && (
+            <ModalShell
+              key="dialog"
+              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}
+              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}
+              layerClass="overlay-layer--dialog"
+              panelClass="overlay-panel--dialog"
+              panelId={panelId}
+              dismissible={dismissible}
+              requestClose={close}
+            >
+              <DialogSurface
+                panelId={panelId}
+                size={size}
+                tone={tone}
+                icon={icon}
+                title={title}
+                description={description}
+                dismissible={dismissible}
+                footerContent={typeof footer === 'function' ? footer(close) : footer}
+                requestClose={close}
+                htmlProps={htmlProps}
+              >
+                {children}
+              </DialogSurface>
+            </ModalShell>
+          )}
+        </Presence>
+      </OverlayPortal>
+    </Fragment>
+  );
+}

package/src/components/composites/dialog/dialog.css

@@ -0,0 +1,180 @@
+/* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
+
+/* Modal placement - the shell layer centers the panel with breathing room. */
+.overlay-layer--dialog {
+  place-items: center;
+  padding: var(--space-6);
+}
+.overlay-panel--dialog {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
+.dialog {
+  --dialog-w: 32rem;
+  position: relative;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: var(--dialog-w);
+  max-width: 100%;
+  max-height: min(85dvh, 44rem);
+  padding: 0;
+  overflow: hidden;
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  color: var(--text-body);
+  font-family: var(--font-sans);
+}
+
+.dialog[data-size='sm'] {
+  --dialog-w: 25rem;
+}
+.dialog[data-size='lg'] {
+  --dialog-w: 40rem;
+}
+
+/* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
+.dialog__header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-5) var(--space-4);
+  transition:
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+  border-bottom: var(--border-hairline) solid transparent;
+}
+/* divider + faint lift appears only once the body is scrolled under it */
+.dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
+  border-bottom-color: var(--border-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+.dialog__icon {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--radius-md);
+  background: var(--accent-subtle);
+  color: var(--text-accent);
+  font-size: var(--icon-md);
+}
+.dialog[data-tone='danger'] .dialog__icon {
+  background: var(--danger-subtle);
+  color: var(--danger-text);
+}
+
+.dialog__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  /* nudge text to optical-center against the 36px icon badge when present */
+  padding-top: var(--space-px);
+}
+.dialog__title {
+  margin: 0;
+  color: var(--text-strong);
+  font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: pretty;
+}
+.dialog__desc {
+  margin: 0;
+  color: var(--text-muted);
+  font: var(--type-body);
+  text-wrap: pretty;
+}
+
+/* close - a quiet ghost icon button; the hit box is bigger than the glyph */
+.dialog__close {
+  flex: 0 0 auto;
+  appearance: none;
+  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-size: var(--icon-sm);
+  transition: var(--transition-control);
+}
+.dialog__close:hover {
+  background: var(--neutral-wash);
+  color: var(--text-strong);
+}
+.dialog__close:active {
+  background: var(--bg-muted);
+}
+.dialog__close:focus-visible {
+  outline: none;
+  color: var(--text-strong);
+  box-shadow: var(--ring-accent);
+}
+
+/* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
+.dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 var(--space-5) var(--space-5);
+  color: var(--text-body);
+  font: var(--type-body);
+}
+.dialog:has(.dialog__icon) .dialog__body {
+  padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
+}
+.dialog:has(.dialog__footer) .dialog__body {
+  padding-bottom: var(--space-4);
+}
+.dialog__body > :first-child {
+  margin-top: 0;
+}
+.dialog__body > :last-child {
+  margin-bottom: 0;
+}
+
+.dialog__body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.dialog__body::-webkit-scrollbar {
+  width: 10px;
+}
+.dialog__body::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  border: 3px solid var(--bg-surface);
+  background-clip: padding-box;
+}
+
+/* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
+.dialog__footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  padding: var(--space-4) var(--space-5) var(--space-5);
+  border-top: var(--border-hairline) solid transparent;
+  transition: border-color var(--duration-base) var(--ease-standard);
+}
+.dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
+  border-top-color: var(--border-subtle);
+}