@rtzll/reflow 0.5.0 → 0.6.0

package/dist/avatar.css

@@ -0,0 +1,116 @@
+/* Avatar: initials on a soft tint of their colour, covered by an image
+   once it loads. Sizes follow --rf-avatar-size; the initials scale with it.
+   A ring in the surface colour separates overlapping avatars in a group. */
+.rf-avatar {
+  --rf-avatar-size: 32px;
+  --rf-avatar-ring: var(--rf-bg);
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: var(--rf-avatar-size);
+  block-size: var(--rf-avatar-size);
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--rf-avatar-color, var(--rf-fg)) 20%, var(--rf-bg));
+  color: color-mix(in oklab, var(--rf-avatar-color, var(--rf-fg)) 60%, var(--rf-fg));
+  font: 550 calc(var(--rf-avatar-size) * 0.4) / 1 var(--rf-font);
+  letter-spacing: 0.01em;
+  user-select: none;
+  vertical-align: middle;
+}
+.rf-avatar[data-shape='square'] {
+  border-radius: max(4px, calc(var(--rf-avatar-size) * 0.25));
+}
+.rf-avatar > * {
+  grid-area: 1 / 1;
+}
+.rf-avatar-image {
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+.rf-avatar[data-image='error'] .rf-avatar-image {
+  display: none;
+}
+
+/* The status dot sits on the corner, ringed in the surface colour. */
+.rf-avatar-status {
+  place-self: end;
+  inline-size: max(6px, calc(var(--rf-avatar-size) * 0.28));
+  block-size: max(6px, calc(var(--rf-avatar-size) * 0.28));
+  margin: -1px;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 2px var(--rf-avatar-ring);
+  background: var(--rf-muted);
+}
+.rf-avatar-status[data-status='online'] {
+  background: light-dark(#22c55e, var(--rf-success));
+}
+.rf-avatar-status[data-status='away'] {
+  background: light-dark(#f59e0b, var(--rf-warning));
+}
+.rf-avatar-status[data-status='busy'] {
+  background: light-dark(#ef4444, var(--rf-danger));
+}
+
+/* AvatarGroup: avatars overlap by a quarter of their size and spread apart
+   on the moderate spring while pointed at. */
+.rf-avatar-group {
+  --rf-avatar-overlap: calc(var(--rf-avatar-size) * -0.25);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rf-avatar-group > li {
+  position: relative;
+  display: flex;
+  transition: margin-inline-start var(--rf-spring-moderate);
+}
+.rf-avatar-group > li + li {
+  margin-inline-start: var(--rf-avatar-overlap);
+}
+@media (hover: hover) {
+  .rf-avatar-group:hover > li + li {
+    margin-inline-start: 2px;
+  }
+}
+.rf-avatar-slot {
+  display: inline-flex;
+  border-radius: 9999px;
+}
+.rf-avatar-group .rf-avatar {
+  box-shadow: 0 0 0 2px var(--rf-avatar-ring);
+}
+.rf-avatar-more {
+  --rf-avatar-color: var(--rf-muted);
+  background: var(--rf-neutral-fill);
+  color: var(--rf-fg);
+  font-size: calc(var(--rf-avatar-size) * 0.34);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-avatar-group > li {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .rf-avatar {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* The ring takes the colour of the surface the avatars sit on. */
+.rf-popover-surface .rf-avatar {
+  --rf-avatar-ring: var(--rf-surface-3, white);
+}
+.rf-dialog .rf-avatar {
+  --rf-avatar-ring: var(--rf-surface-5);
+}
+.rf-drawer .rf-avatar {
+  --rf-avatar-ring: var(--rf-drawer-bg);
+}

package/dist/avatar.d.ts

@@ -0,0 +1,42 @@
+import { type Handle } from 'remix/component';
+import type { BadgeColor } from './basic.tsx';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export interface AvatarProps {
+    /** Who or what it shows: the accessible name, and the source of the initials. */
+    name: string;
+    /** An image. Until it loads, or if it fails, the initials show. */
+    src?: string;
+    /** Width and height in pixels. Default 32. */
+    size?: number;
+    shape?: 'circle' | 'square';
+    /** The initials' colour. Defaults to one picked from the name, the same every time. */
+    color?: BadgeColor;
+    /** A dot in the corner, named with the avatar. */
+    status?: AvatarStatus;
+    /** Hides the avatar from assistive technology, for when the name is shown beside it. */
+    decorative?: boolean;
+    class?: string;
+}
+/**
+ * A picture or the initials of a person, team or agent. The initials sit
+ * on a colour picked from the name, so the same name always looks the same;
+ * an image covers them once it loads, and they show again if it fails. A
+ * status dot is named with the avatar. Mark it decorative when the name is
+ * already written beside it.
+ */
+export declare function Avatar(handle: Handle<AvatarProps>): () => import("remix/component").RemixElement;
+export interface AvatarGroupProps {
+    avatars: readonly Omit<AvatarProps, 'size' | 'shape' | 'decorative' | 'class'>[];
+    /** How many avatars show, the count of the rest included. Default 4. */
+    max?: number;
+    size?: number;
+    shape?: 'circle' | 'square';
+    /** Names the group. Defaults to the number of people. */
+    label?: string;
+}
+/**
+ * A row of overlapping avatars, such as the people on a document. Each
+ * names itself in a tooltip; past `max`, a count stands in for the rest and
+ * names them. Pointing at the row spreads it apart.
+ */
+export declare function AvatarGroup(handle: Handle<AvatarGroupProps>): () => import("remix/component").RemixElement;

package/dist/avatar.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { ref } from 'remix/component';
+import { badgeColors } from './colors.js';
+import { Tooltip } from './overlays.js';
+// Hues far enough apart to tell neighbours in a group apart, legible on
+// both themes.
+const autoColors = [
+    'red',
+    'orange',
+    'amber',
+    'green',
+    'teal',
+    'blue',
+    'violet',
+    'pink',
+];
+// FNV-1a, which spreads similar names evenly.
+function pickColor(name) {
+    let hash = 0x811c9dc5;
+    for (const char of name.trim().toLowerCase()) {
+        hash ^= char.codePointAt(0);
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return autoColors[hash % autoColors.length];
+}
+function initials(name) {
+    const words = name.trim().split(/\s+/);
+    const first = (word) => Array.from(word ?? '').find((char) => /[\p{L}\p{N}]/u.test(char)) ?? '';
+    const letters = first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : '');
+    return letters.toLocaleUpperCase();
+}
+/**
+ * A picture or the initials of a person, team or agent. The initials sit
+ * on a colour picked from the name, so the same name always looks the same;
+ * an image covers them once it loads, and they show again if it fails. A
+ * status dot is named with the avatar. Mark it decorative when the name is
+ * already written beside it.
+ */
+export function Avatar(handle) {
+    // A failed image hands back to the initials, even if it failed before hydration.
+    const image = ref((node, signal) => {
+        if (!(node instanceof HTMLImageElement))
+            return;
+        const root = node.closest('.rf-avatar');
+        const fail = () => root?.setAttribute('data-image', 'error');
+        node.addEventListener('error', fail, { signal });
+        node.addEventListener('load', () => root?.removeAttribute('data-image'), { signal });
+        if (node.complete && node.naturalWidth === 0 && node.getAttribute('src'))
+            fail();
+    });
+    return () => {
+        const { name, src, size = 32, shape = 'circle', status, decorative } = handle.props;
+        const color = handle.props.color ?? pickColor(name);
+        const label = status ? `${name} (${status})` : name;
+        return (_jsxs("span", { class: handle.props.class ? `rf-avatar ${handle.props.class}` : 'rf-avatar', role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, "data-shape": shape, "data-color": color, style: { '--rf-avatar-size': `${size}px`, '--rf-avatar-color': badgeColors[color] }, children: [_jsx("span", { class: "rf-avatar-initials", "aria-hidden": "true", children: initials(name) }), src && _jsx("img", { class: "rf-avatar-image", src: src, alt: "", mix: image }), status && _jsx("span", { class: "rf-avatar-status", "data-status": status, "aria-hidden": "true" })] }));
+    };
+}
+/**
+ * A row of overlapping avatars, such as the people on a document. Each
+ * names itself in a tooltip; past `max`, a count stands in for the rest and
+ * names them. Pointing at the row spreads it apart.
+ */
+export function AvatarGroup(handle) {
+    return () => {
+        const { avatars, size = 32, shape } = handle.props;
+        const max = Math.max(1, handle.props.max ?? 4);
+        const overflow = avatars.length > max;
+        const shown = overflow ? avatars.slice(0, max - 1) : avatars;
+        const rest = overflow ? avatars.slice(max - 1) : [];
+        const label = handle.props.label ?? `${avatars.length} ${avatars.length === 1 ? 'person' : 'people'}`;
+        const names = rest.map((avatar) => avatar.name).join(', ');
+        return (_jsxs("ul", { class: "rf-avatar-group", "aria-label": label, style: { '--rf-avatar-size': `${size}px` }, children: [shown.map((avatar, index) => (_jsx("li", { style: { zIndex: shown.length - index + 1 }, children: _jsx(Tooltip, { content: avatar.name, renderTrigger: (trigger) => (_jsx("span", { class: "rf-avatar-slot", ...trigger, children: _jsx(Avatar, { ...avatar, size: size, shape: shape }) })) }) }, `${avatar.name}-${index}`))), overflow && (_jsx("li", { children: _jsx(Tooltip, { content: names, renderTrigger: (trigger) => (_jsx("span", { class: "rf-avatar-slot", ...trigger, children: _jsxs("span", { class: "rf-avatar rf-avatar-more", role: "img", "aria-label": `${rest.length} more: ${names}`, "data-shape": shape ?? 'circle', style: { '--rf-avatar-size': `${size}px` }, children: ["+", rest.length] }) })) }) }))] }));
+    };
+}

package/dist/basic.d.ts

@@ -1,5 +1,6 @@
 import { type IconName } from './icon.tsx';
 import type { Handle, Props, RemixNode } from 'remix/component';
+import { badgeColors } from './colors.ts';
 export type ControlSize = 'default' | 'compact';
 export type ButtonSize = ControlSize | 'icon' | 'icon-compact';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
@@ -24,26 +25,6 @@ type StyledProps<Tag extends keyof JSX.IntrinsicElements> = Omit<Props<Tag>, 'cl
     class?: string;
     className?: string;
 };
-declare const badgeColors: {
-    readonly accent: 'var(--rf-accent)';
-    readonly gray: '#a3a3a3';
-    readonly red: '#ef4444';
-    readonly orange: '#f97316';
-    readonly amber: '#f59e0b';
-    readonly yellow: '#eab308';
-    readonly lime: '#84cc16';
-    readonly green: '#22c55e';
-    readonly emerald: '#10b981';
-    readonly teal: '#14b8a6';
-    readonly cyan: '#06b6d4';
-    readonly blue: '#3b82f6';
-    readonly indigo: '#6366f1';
-    readonly violet: '#8b5cf6';
-    readonly purple: '#a855f7';
-    readonly fuchsia: '#d946ef';
-    readonly pink: '#ec4899';
-    readonly rose: '#f43f5e';
-};
 export type BadgeColor = keyof typeof badgeColors;
 export type BadgeProps = Omit<StyledProps<'span'>, 'color' | 'style'> & {
     color?: BadgeColor;

package/dist/basic.js

@@ -5,6 +5,7 @@ import { jsx } from 'remix/component/jsx-runtime';
 import { fluidHover } from './interactive.js';
 import { Tooltip } from './overlays.js';
 import { statusIcon } from './status-icon.js';
+import { badgeColors } from './colors.js';
 export function Button(handle) {
     return () => {
         const props = handle.props;
@@ -36,26 +37,6 @@ export function Button(handle) {
 function classList(...classes) {
     return classes.filter(Boolean).join(' ');
 }
-const badgeColors = {
-    accent: 'var(--rf-accent)',
-    gray: '#a3a3a3',
-    red: '#ef4444',
-    orange: '#f97316',
-    amber: '#f59e0b',
-    yellow: '#eab308',
-    lime: '#84cc16',
-    green: '#22c55e',
-    emerald: '#10b981',
-    teal: '#14b8a6',
-    cyan: '#06b6d4',
-    blue: '#3b82f6',
-    indigo: '#6366f1',
-    violet: '#8b5cf6',
-    purple: '#a855f7',
-    fuchsia: '#d946ef',
-    pink: '#ec4899',
-    rose: '#f43f5e',
-};
 export function Badge(handle) {
     return () => {
         const { class: classProp, className, color = 'gray', size, variant = 'solid', style, children, ...props } = handle.props;

package/dist/chat-layout.css

@@ -0,0 +1,121 @@
+/* ChatLayout: header, transcript and composer stacked in a column of
+   readable width. The transcript takes the remaining height and scrolls;
+   its messages rest at the bottom while they are few, as in a chat. */
+.rf-chat-layout {
+  --rf-chat-width: 720px;
+  --rf-chat-gutter: 16px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+}
+.rf-chat-layout-header,
+.rf-chat-layout-composer {
+  box-sizing: border-box;
+  inline-size: min(100%, var(--rf-chat-width));
+  margin-inline: auto;
+  padding-inline: var(--rf-chat-gutter);
+}
+.rf-chat-layout-header {
+  grid-row: 1;
+  padding-block: 12px;
+}
+.rf-chat-layout-body {
+  position: relative;
+  grid-row: 2;
+  min-block-size: 0;
+}
+.rf-chat-layout-scroll {
+  block-size: 100%;
+}
+.rf-chat-layout-viewport > .rf-scroll-content {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+}
+.rf-chat-transcript {
+  display: grid;
+  align-content: end;
+  gap: 8px;
+  box-sizing: border-box;
+  flex: 1;
+  inline-size: min(100%, var(--rf-chat-width));
+  margin-inline: auto;
+  padding: 16px var(--rf-chat-gutter);
+}
+.rf-chat-layout[data-empty] .rf-chat-transcript {
+  flex: 0;
+  padding-block: 0;
+}
+.rf-chat-layout-empty {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  padding: 24px var(--rf-chat-gutter);
+  color: var(--rf-muted);
+  text-align: center;
+}
+.rf-chat-layout-composer {
+  grid-row: 3;
+  padding-block: 8px 16px;
+}
+
+/* Back to the newest message: a quiet pill resting on the transcript's edge. */
+.rf-chat-jump {
+  position: absolute;
+  inset-block-end: 12px;
+  inset-inline-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  block-size: 28px;
+  padding-inline: 10px 12px;
+  border: 0;
+  border-radius: 9999px;
+  outline: none;
+  background: var(--rf-surface-3, white);
+  box-shadow:
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 8%)),
+    0 4px 12px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+  color: var(--rf-fg);
+  font: var(--rf-text-caption) / 1 var(--rf-font);
+  cursor: pointer;
+  translate: -50% 0;
+  transition:
+    opacity var(--rf-spring-moderate),
+    translate var(--rf-spring-moderate),
+    display var(--rf-spring-moderate) allow-discrete;
+}
+.rf-chat-jump[hidden] {
+  display: none;
+  opacity: 0;
+  translate: -50% 6px;
+}
+@starting-style {
+  .rf-chat-jump:not([hidden]) {
+    opacity: 0;
+    translate: -50% 6px;
+  }
+}
+.rf-chat-jump:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--rf-accent),
+    0 4px 12px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+}
+@media (hover: hover) {
+  .rf-chat-jump:hover {
+    background: color-mix(in oklab, var(--rf-surface-3, white), var(--rf-fg) 5%);
+  }
+}
+.rf-chat-jump > svg {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-chat-jump {
+    transition: opacity var(--rf-spring-moderate);
+    translate: -50% 0;
+  }
+}

package/dist/chat-layout.d.ts

@@ -0,0 +1,24 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export interface ChatLayoutProps {
+    /** The messages, usually ChatMessage elements, oldest first. */
+    children?: RemixNode;
+    /** Docked below the transcript, usually an InputMessage. */
+    composer?: RemixNode;
+    /** Above the transcript, such as a title or the people in the chat. */
+    header?: RemixNode;
+    /** Shown in place of the transcript until the first message. */
+    empty?: RemixNode;
+    /** Names the transcript. Default "Conversation". */
+    label?: string;
+    class?: string;
+}
+/**
+ * The conversation screen: a transcript that fills the space, with the
+ * composer docked below it. The transcript opens at the newest message and
+ * stays there as messages arrive or a reply streams in, as long as the
+ * reader is there too; once they scroll back, it leaves them where they
+ * are and offers a button back to the newest message. Sending a message
+ * of their own, a ChatMessage with the user role, brings them back. The transcript is a
+ * labelled log in a ScrollArea, and the column keeps a readable width.
+ */
+export declare function ChatLayout(handle: Handle<ChatLayoutProps>): () => import("remix/component").RemixElement;

package/dist/chat-layout.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { prefersReducedMotion } from '@remix-run/ui/animation';
+import { Icon } from './icon.js';
+import { ScrollArea } from './scroll-area.js';
+// Within this many pixels of the end, the transcript counts as at the newest message.
+const pinSlack = 24;
+function isEmpty(node) {
+    if (node == null || node === false || node === '')
+        return true;
+    return Array.isArray(node) && node.every(isEmpty);
+}
+/**
+ * The conversation screen: a transcript that fills the space, with the
+ * composer docked below it. The transcript opens at the newest message and
+ * stays there as messages arrive or a reply streams in, as long as the
+ * reader is there too; once they scroll back, it leaves them where they
+ * are and offers a button back to the newest message. Sending a message
+ * of their own, a ChatMessage with the user role, brings them back. The transcript is a
+ * labelled log in a ScrollArea, and the column keeps a readable width.
+ */
+export function ChatLayout(handle) {
+    let viewport = null;
+    let pinned = true;
+    let unseen = false;
+    // While a jump scrolls smoothly, its own scroll events must not unpin it.
+    let jumping = false;
+    function setState(nextPinned, nextUnseen) {
+        if (nextPinned === pinned && nextUnseen === unseen)
+            return;
+        pinned = nextPinned;
+        unseen = nextUnseen;
+        void handle.update();
+    }
+    // The end, from layout alone. Messages gliding to new places are moved by
+    // transforms, which grow scrollHeight while they play; measured that way,
+    // the transcript would scroll past the end and snap back as glides finish.
+    function endTop() {
+        if (!viewport)
+            return 0;
+        const content = viewport.firstElementChild;
+        return Math.max(0, (content?.offsetHeight ?? viewport.scrollHeight) - viewport.clientHeight);
+    }
+    function atEnd() {
+        if (!viewport)
+            return true;
+        return endTop() - viewport.scrollTop <= pinSlack;
+    }
+    function scrollToEnd(smooth = false) {
+        viewport?.scrollTo({
+            top: endTop(),
+            behavior: smooth && !prefersReducedMotion() ? 'smooth' : 'instant',
+        });
+    }
+    const logMix = ref((node, signal) => {
+        if (!(node instanceof HTMLElement))
+            return;
+        viewport = node.closest('.rf-scroll-viewport');
+        if (!viewport)
+            return;
+        const scroller = viewport;
+        scrollToEnd();
+        let lastHeight = node.offsetHeight;
+        const observer = new ResizeObserver(() => {
+            const grew = node.offsetHeight > lastHeight;
+            lastHeight = node.offsetHeight;
+            if (pinned)
+                scrollToEnd();
+            else if (grew)
+                setState(false, true);
+        });
+        observer.observe(node);
+        observer.observe(scroller);
+        // The reader's own message always brings them to the newest one.
+        const added = new MutationObserver((records) => {
+            const sent = records.some((record) => Array.from(record.addedNodes).some((child) => child instanceof Element && child.matches('[data-role="user"]')));
+            if (!sent)
+                return;
+            setState(true, false);
+            scrollToEnd();
+        });
+        added.observe(node, { childList: true });
+        scroller.addEventListener('scroll', () => {
+            if (jumping) {
+                if (atEnd())
+                    jumping = false;
+                return;
+            }
+            const end = atEnd();
+            setState(end, end ? false : unseen);
+        }, { signal, passive: true });
+        signal.addEventListener('abort', () => {
+            observer.disconnect();
+            added.disconnect();
+            if (viewport === scroller)
+                viewport = null;
+        }, { once: true });
+    });
+    return () => {
+        const { children, composer, header, empty, label = 'Conversation' } = handle.props;
+        const blank = isEmpty(children);
+        return (_jsxs("div", { class: handle.props.class ? `rf-chat-layout ${handle.props.class}` : 'rf-chat-layout', "data-empty": blank || undefined, children: [header != null && _jsx("div", { class: "rf-chat-layout-header", children: header }), _jsxs("div", { class: "rf-chat-layout-body", children: [_jsxs(ScrollArea, { label: label, className: "rf-chat-layout-scroll", viewportClassName: "rf-chat-layout-viewport", children: [_jsx("div", { class: "rf-chat-transcript", role: "log", "aria-label": label, mix: logMix, children: children }), blank && empty != null && _jsx("div", { class: "rf-chat-layout-empty", children: empty })] }), _jsxs("button", { type: "button", class: "rf-chat-jump", hidden: pinned, mix: on('click', () => {
+                                jumping = true;
+                                setState(true, false);
+                                scrollToEnd(true);
+                            }), children: [_jsx(Icon, { name: "chevron-down", size: 14 }), unseen ? 'New messages' : 'Jump to latest'] })] }), composer != null && _jsx("div", { class: "rf-chat-layout-composer", children: composer })] }));
+    };
+}

package/dist/citation.css

@@ -0,0 +1,119 @@
+/* Citation: a small chip inline with the text it supports, on the gray
+   Badge's fill, sized to sit within the line without moving it. Its preview
+   is a HoverCard listing each source. */
+.rf-citation {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: 18px;
+  block-size: 18px;
+  margin-inline: 2px;
+  padding-inline: 5px;
+  border-radius: 6px;
+  outline: none;
+  background: var(--rf-neutral-fill);
+  color: var(--rf-muted);
+  font: 500 11px / 1 var(--rf-font);
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  vertical-align: 0.1em;
+  white-space: nowrap;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-citation[data-variant='site'] {
+  padding-inline: 7px;
+}
+.rf-citation[data-size='compact'] {
+  min-inline-size: 16px;
+  block-size: 16px;
+  padding-inline: 4px;
+  font-size: 10px;
+}
+@media (hover: hover) {
+  .rf-citation:hover {
+    background: color-mix(in oklab, var(--rf-neutral-fill), var(--rf-fg) 10%);
+    color: var(--rf-fg);
+  }
+}
+.rf-citation:focus-visible {
+  box-shadow: 0 0 0 2px var(--rf-accent);
+  color: var(--rf-fg);
+}
+
+.rf-citation-sources {
+  display: grid;
+  gap: 12px;
+  inline-size: min(300px, calc(100vw - 32px));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rf-citation-sources[data-density='compact'] {
+  gap: 10px;
+}
+.rf-citation-source {
+  display: grid;
+  gap: 2px;
+  min-inline-size: 0;
+}
+.rf-citation-source + .rf-citation-source {
+  padding-block-start: 12px;
+  border-block-start: 1px solid var(--rf-border);
+}
+.rf-citation-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--rf-muted);
+  font: var(--rf-text-caption) / var(--rf-leading-caption) var(--rf-font);
+}
+.rf-citation-icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 14px;
+  block-size: 14px;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.rf-citation-icon > :is(img, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+.rf-citation-site {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rf-citation-number {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+.rf-citation-title {
+  color: var(--rf-fg);
+  font-variation-settings: var(--rf-weight-strong);
+  text-decoration: none;
+}
+.rf-citation-title:hover,
+.rf-citation-title:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rf-citation-description {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--rf-muted);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+@media (forced-colors: active) {
+  .rf-citation {
+    border: 1px solid LinkText;
+  }
+}