@fairgarden/design 0.1.0-0.canary.0

package/overlays/popover/popover.module.css

@@ -0,0 +1,194 @@
+/*
+ * Popover (§10.15). CVA function `popover` in Popover.tsx.
+ * Parts: positioner (the layer), base (the popup), arrow (the tail's box)
+ * and tail (its drawing), title, term (the title in the definition kind),
+ * description, source, close.
+ *
+ * The anchored overlay surface (§10.1): the `white` scope's --primary1 face,
+ * a --border-size-2 --primary12 frame in both modes, never --role-rule
+ * [D92, D156], --radius-2-25, --size-px-2 from the trigger. No shadow, no
+ * backdrop. Motion is instant or a clip reveal from the trigger side, never
+ * a fade [D91]. Colors are role variables only; local custom properties
+ * carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.term {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.source {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .positioner {
+    z-index: var(--layer-3);
+  }
+
+  /*
+   * Base: anchored, the viewport less its margins wide. The clip bleeds past
+   * the frame by the tail's depth, so the tail shows at rest and leads the
+   * reveal.
+   */
+  .base {
+    --popover-tail-inline: var(--size-px-2-5);
+    --popover-tail-block: calc(var(--size-px-2-5) / 2 + var(--border-size-2));
+    --popover-bleed: calc(-1 * var(--popover-tail-block));
+    --popover-clip-from: inset(var(--popover-bleed));
+
+    position: relative;
+    box-sizing: border-box;
+    inline-size: calc(100vw - 2 * var(--fgd-space-margin));
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(var(--popover-bleed));
+  }
+
+  /* Content width, 240–360 px, when it fits. */
+  @media (min-width: 768px) {
+    .base {
+      inline-size: max-content;
+      min-inline-size: min(var(--size-px-13), calc(100vw - 2 * var(--fgd-space-margin)));
+      max-inline-size: min(var(--fgd-size-overlay-max), calc(100vw - 2 * var(--fgd-space-margin)));
+    }
+  }
+
+  .title,
+  .term,
+  .description {
+    color: var(--primary12);
+  }
+
+  .source {
+    color: var(--role-muted);
+  }
+
+  /* The tail's box: 12 × 8, of which the last 2 px overlap the frame. */
+  .arrow {
+    display: flex;
+    inline-size: var(--popover-tail-inline);
+    block-size: var(--popover-tail-block);
+  }
+
+  .tail {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: var(--primary1);
+    stroke: var(--primary12);
+    stroke-width: var(--border-size-2);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: clip-path;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * The close X (an icon-only Button) floats to the top end, so the title
+   * wraps beside its hit area. In this layer, above the Button's base
+   * margin reset, so the placement never depends on load order.
+   */
+  .close {
+    float: inline-end;
+    margin-block-start: calc(-1 * var(--size-px-2));
+    margin-inline: var(--size-px-2) calc(-1 * var(--size-px-2));
+  }
+
+  /* Panel: overlay surface with --size-px-3 padding. */
+  .panel {
+    padding: var(--size-px-3);
+  }
+
+  /* Definition: term, definition and source, stacked at tight gaps. */
+  .definition {
+    display: grid;
+    row-gap: var(--size-px-2);
+    padding: var(--size-px-3);
+  }
+}
+
+@layer states {
+  /* The reveal starts at the trigger edge (data-side names where the panel sits). */
+  .base[data-side='bottom'] {
+    --popover-clip-from: inset(var(--popover-bleed) var(--popover-bleed) 100% var(--popover-bleed));
+  }
+
+  .base[data-side='top'] {
+    --popover-clip-from: inset(100% var(--popover-bleed) var(--popover-bleed) var(--popover-bleed));
+  }
+
+  .base[data-side='left'],
+  .base[data-side='inline-start'] {
+    --popover-clip-from: inset(var(--popover-bleed) var(--popover-bleed) var(--popover-bleed) 100%);
+  }
+
+  .base[data-side='right'],
+  .base[data-side='inline-end'] {
+    --popover-clip-from: inset(var(--popover-bleed) 100% var(--popover-bleed) var(--popover-bleed));
+  }
+
+  .base[data-starting-style],
+  .base[data-ending-style] {
+    clip-path: var(--popover-clip-from);
+  }
+
+  .base[data-instant] {
+    transition: none;
+  }
+
+  /* The tail sits on the edge facing the trigger and points at it. */
+  .arrow[data-side='bottom'] {
+    inset-block-start: calc(-1 * var(--popover-tail-block));
+  }
+
+  .arrow[data-side='top'] {
+    inset-block-end: calc(-1 * var(--popover-tail-block));
+    rotate: 180deg;
+  }
+
+  .arrow[data-side='left'],
+  .arrow[data-side='inline-start'] {
+    inset-inline-end: calc(-1 * (var(--popover-tail-inline) + var(--popover-tail-block)) / 2);
+    rotate: 90deg;
+  }
+
+  .arrow[data-side='right'],
+  .arrow[data-side='inline-end'] {
+    inset-inline-start: calc(-1 * (var(--popover-tail-inline) + var(--popover-tail-block)) / 2);
+    rotate: -90deg;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden; a definition's text prints as a footnote to its term (§8). */
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}

package/overlays/preview-card/PreviewCard.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from '../../actions/link';
+export declare const previewCard: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type PreviewCardVariants = VariantProps<typeof previewCard>;
+/** Props for PreviewCard: Base UI PreviewCard.Root props (`open`, `onOpenChange` …). */
+export type PreviewCardProps<Payload = unknown> = BasePreviewCard.Root.Props<Payload>;
+/** Groups the parts of a preview card (Base UI PreviewCard.Root). */
+export declare function PreviewCard<Payload = unknown>(props: PreviewCardProps<Payload>): React.JSX.Element;
+/** Props for PreviewCardTrigger: Link props plus the hover delays and Base UI's trigger options. */
+export type PreviewCardTriggerProps = LinkProps & {
+    /** Hover time before the card opens, in ms. Default 600. */
+    delay?: number;
+    /** Time after the pointer leaves before the card closes, in ms. Default 300. */
+    closeDelay?: number;
+    /** Associates a detached trigger with a PreviewCard created by `PreviewCard.createHandle`. */
+    handle?: BasePreviewCard.Trigger.Props['handle'];
+    /** A payload handed to the PreviewCard's children function when this trigger opens it. */
+    payload?: unknown;
+};
+/**
+ * The link that opens the card on hover. Renders a Link (§9.3), `inline`
+ * by default, so it navigates and prints like any link [D79]. The card is
+ * never the only route to its information.
+ */
+export declare function PreviewCardTrigger(props: PreviewCardTriggerProps): React.JSX.Element;
+type PositionerProps = BasePreviewCard.Positioner.Props;
+/** Props for PreviewCardPopup: Base UI PreviewCard.Popup props plus placement, color axes and portal options. */
+export type PreviewCardPopupProps = BasePreviewCard.Popup.Props & {
+    /** Primary Radix scale inside the popup's `white` scope. Omitted, the white preset's default [D133]. */
+    primary?: PreviewCardVariants['primary'];
+    /** Secondary Radix scale inside the popup: accents only. */
+    secondary?: PreviewCardVariants['secondary'];
+    /** Which side of the link the card sits on. Default `bottom`; it flips when there is no room. */
+    side?: PositionerProps['side'];
+    /** Alignment to the link. Default `start`. */
+    align?: PositionerProps['align'];
+    /** Distance from the link in px. Default 8 (`--size-px-2`). */
+    sideOffset?: PositionerProps['sideOffset'];
+    /** Clearance from the viewport edge in px. Default 16. */
+    collisionPadding?: PositionerProps['collisionPadding'];
+    /** The element the portal renders into. Default: `document.body`. */
+    container?: BasePreviewCard.Portal.Props['container'];
+};
+/**
+ * The preview panel, rendered in its Base UI Portal as a nested `white`
+ * scope: --primary1 face, --border-size-2 --primary12 frame, --radius-2-25,
+ * 240–360 px wide. Compose `PreviewCardThumb`, `PreviewCardTitle`,
+ * `PreviewCardDescription` and `PreviewCardDomain` inside it, and
+ * `PreviewCardArrow` for the tail. It holds at most one link.
+ */
+export declare function PreviewCardPopup(props: PreviewCardPopupProps): React.JSX.Element;
+/** Props for PreviewCardArrow: Base UI PreviewCard.Arrow props. */
+export type PreviewCardArrowProps = BasePreviewCard.Arrow.Props;
+/** The tail: a --size-px-2-5 × 6 px triangle whose --border-size-2 edge continues the frame. */
+export declare function PreviewCardArrow(props: PreviewCardArrowProps): React.JSX.Element;
+/** Props for PreviewCardThumb: `img` props and `render`. */
+export type PreviewCardThumbProps = useRender.ComponentProps<'img'>;
+/**
+ * The page's thumbnail: a --ratio-widescreen photograph with the nested
+ * radius (--radius-2-25 − --size-px-3, floored at --radius-1) [D40].
+ * Give it `alt` (empty when the title already names it).
+ */
+export declare function PreviewCardThumb(props: PreviewCardThumbProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PreviewCardTitle: `p` props and `render`. */
+export type PreviewCardTitleProps = useRender.ComponentProps<'p'>;
+/** The linked page's title, in `type-itemhead` --primary12. */
+export declare function PreviewCardTitle(props: PreviewCardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PreviewCardDescription: `p` props and `render`. */
+export type PreviewCardDescriptionProps = useRender.ComponentProps<'p'>;
+/** A one-line description, in `type-body-ui` --primary12. */
+export declare function PreviewCardDescription(props: PreviewCardDescriptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PreviewCardDomain: `p` props and `render`. */
+export type PreviewCardDomainProps = useRender.ComponentProps<'p'>;
+/** The page's domain, in `type-data` --role-muted (mono measures). */
+export declare function PreviewCardDomain(props: PreviewCardDomainProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=PreviewCard.d.ts.map

package/overlays/preview-card/PreviewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.d.ts","sourceRoot":"","sources":["../../src/overlays/preview-card/PreviewCard.tsx"],"names":[],"mappings":"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"}

package/overlays/preview-card/PreviewCard.js

@@ -0,0 +1,123 @@
+'use client';
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Link } from '../../actions/link';
+import { cx, resolveClassName } from '../../utils/className';
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, OverlayScope, OverlayTail, overlayActionClassName, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import styles from './preview-card.module.css';
+/*
+ * Preview Card (§10.15): a hover preview of a linked page, for pointer
+ * users only. No case shows one; derived from P2, P7, [D79] and [D92].
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: preview-card.module.css; CVA function `previewCard`.
+ * - Axes: `primary`, `secondary` → scales module classes, applied inside
+ *   the popup's scope.
+ * - Compound variants: none. Defaults: none; color axes: none.
+ * - Color fallback: the popup takes the `white` preset's defaults.
+ * - States: Popup data-starting-style / data-ending-style → the clip reveal
+ *   from the trigger side (data-side), instant under --motionNotOK and on
+ *   data-instant [D91]; Arrow data-side → the tail's edge. Opens after
+ *   600 ms of hover and closes 300 ms after leave.
+ * - Parts: positioner, base (the popup), arrow and tail, thumb, title,
+ *   description, domain.
+ * - Scope: the popup renders in its Base UI Portal as a nested `white`
+ *   scope (`page` scheme, no data-theme) with the --border-size-2
+ *   --primary12 frame [D92, D139, D156].
+ * - Container: none; inherits its context. Shown only with hover and a
+ *   fine pointer; on touch the link simply navigates.
+ */
+export const previewCard = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; PreviewCardPopup computes the overlay preset's defaults.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** Groups the parts of a preview card (Base UI PreviewCard.Root). */
+export function PreviewCard(props) {
+    return React.createElement(BasePreviewCard.Root, { ...props });
+}
+/**
+ * The link that opens the card on hover. Renders a Link (§9.3), `inline`
+ * by default, so it navigates and prints like any link [D79]. The card is
+ * never the only route to its information.
+ */
+export function PreviewCardTrigger(props) {
+    const { delay = 600, closeDelay = 300, handle, payload, ...linkProps } = props;
+    return (React.createElement(BasePreviewCard.Trigger, { delay: delay, closeDelay: closeDelay, handle: handle, payload: payload, render: React.createElement(Link, { ...linkProps }) }));
+}
+/**
+ * The preview panel, rendered in its Base UI Portal as a nested `white`
+ * scope: --primary1 face, --border-size-2 --primary12 frame, --radius-2-25,
+ * 240–360 px wide. Compose `PreviewCardThumb`, `PreviewCardTitle`,
+ * `PreviewCardDescription` and `PreviewCardDomain` inside it, and
+ * `PreviewCardArrow` for the tail. It holds at most one link.
+ */
+export function PreviewCardPopup(props) {
+    const { primary, secondary, side, align = 'start', sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, container, className, children, ...rest } = props;
+    const scales = overlayScales(primary, secondary);
+    return (React.createElement(BasePreviewCard.Portal, { container: container },
+        React.createElement(BasePreviewCard.Positioner, { className: styles.positioner, side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding },
+            React.createElement(BasePreviewCard.Popup, { ...rest, ...overlayAttributes, className: resolveClassName(className, (extra) => previewCard({
+                    primary: scales.primary,
+                    secondary: scales.secondary,
+                    className: cx(overlayActionClassName, extra),
+                })) },
+                React.createElement(OverlayScope, null, children)))));
+}
+/** The tail: a --size-px-2-5 × 6 px triangle whose --border-size-2 edge continues the frame. */
+export function PreviewCardArrow(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BasePreviewCard.Arrow, { ...rest, className: resolveClassName(className, (extra) => cx(styles.arrow, extra)) },
+        React.createElement(OverlayTail, { className: styles.tail })));
+}
+/**
+ * The page's thumbnail: a --ratio-widescreen photograph with the nested
+ * radius (--radius-2-25 − --size-px-3, floored at --radius-1) [D40].
+ * Give it `alt` (empty when the title already names it).
+ */
+export function PreviewCardThumb(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'img',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.thumb, className) }, rest),
+    });
+}
+/** The linked page's title, in `type-itemhead` --primary12. */
+export function PreviewCardTitle(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.title, className) }, rest),
+    });
+}
+/** A one-line description, in `type-body-ui` --primary12. */
+export function PreviewCardDescription(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.description, className) }, rest),
+    });
+}
+/** The page's domain, in `type-data` --role-muted (mono measures). */
+export function PreviewCardDomain(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.domain, className) }, rest),
+    });
+}
+//# sourceMappingURL=PreviewCard.js.map

package/overlays/preview-card/PreviewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.js","sourceRoot":"","sources":["../../src/overlays/preview-card/PreviewCard.tsx"],"names":[],"mappings":"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"}

package/overlays/preview-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PreviewCard';
+//# sourceMappingURL=index.d.ts.map

package/overlays/preview-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlays/preview-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/overlays/preview-card/index.js

@@ -0,0 +1,2 @@
+export * from './PreviewCard';
+//# sourceMappingURL=index.js.map

package/overlays/preview-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlays/preview-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/overlays/preview-card/preview-card.module.css

@@ -0,0 +1,177 @@
+/*
+ * Preview Card (§10.15). CVA function `previewCard` in PreviewCard.tsx.
+ * Parts: positioner (the layer), base (the popup), arrow (the tail's box)
+ * and tail (its drawing), thumb, title, description, domain.
+ *
+ * The anchored overlay surface (§10.1): the `white` scope's --primary1 face,
+ * a --border-size-2 --primary12 frame in both modes [D92, D156],
+ * --radius-2-25, 240–360 px wide, --size-px-3 padding. Motion is instant or
+ * a clip reveal from the trigger side, never a fade [D91]. Shown only with
+ * hover and a fine pointer. Colors are role variables only; local custom
+ * properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.domain {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+@layer base {
+  .positioner {
+    z-index: var(--layer-3);
+  }
+
+  .base {
+    --preview-card-tail-inline: var(--size-px-2-5);
+    --preview-card-tail-block: calc(var(--size-px-2-5) / 2 + var(--border-size-2));
+    --preview-card-bleed: calc(-1 * var(--preview-card-tail-block));
+    --preview-card-clip-from: inset(var(--preview-card-bleed));
+
+    position: relative;
+    display: grid;
+    row-gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(var(--size-px-13), calc(100vw - 2 * var(--fgd-space-margin)));
+    max-inline-size: min(var(--fgd-size-overlay-max), calc(100vw - 2 * var(--fgd-space-margin)));
+    padding: var(--size-px-3);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(var(--preview-card-bleed));
+  }
+
+  /* The thumbnail: 16:9, the nested radius floored at --radius-1 [D40]. */
+  .thumb {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    aspect-ratio: var(--ratio-widescreen);
+    object-fit: cover;
+    border-radius: max(var(--radius-1), calc(var(--radius-2-25) - var(--size-px-3)));
+  }
+
+  .title,
+  .description {
+    color: var(--primary12);
+  }
+
+  .domain {
+    color: var(--role-muted);
+  }
+
+  .arrow {
+    display: flex;
+    inline-size: var(--preview-card-tail-inline);
+    block-size: var(--preview-card-tail-block);
+  }
+
+  .tail {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: var(--primary1);
+    stroke: var(--primary12);
+    stroke-width: var(--border-size-2);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: clip-path;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* Hover and a fine pointer only: on touch, stylus and coarse pointers the link simply navigates. */
+  @media (hover: none) and (pointer: coarse),(hover: none) and (pointer: fine),(hover) and (pointer: coarse) {
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  .base[data-side='bottom'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) var(--preview-card-bleed) 100% var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-side='top'] {
+    --preview-card-clip-from: inset(
+      100% var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-side='left'],
+  .base[data-side='inline-start'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed) 100%
+    );
+  }
+
+  .base[data-side='right'],
+  .base[data-side='inline-end'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) 100% var(--preview-card-bleed) var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-starting-style],
+  .base[data-ending-style] {
+    clip-path: var(--preview-card-clip-from);
+  }
+
+  .base[data-instant] {
+    transition: none;
+  }
+
+  .arrow[data-side='bottom'] {
+    inset-block-start: calc(-1 * var(--preview-card-tail-block));
+  }
+
+  .arrow[data-side='top'] {
+    inset-block-end: calc(-1 * var(--preview-card-tail-block));
+    rotate: 180deg;
+  }
+
+  .arrow[data-side='left'],
+  .arrow[data-side='inline-start'] {
+    inset-inline-end: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: 90deg;
+  }
+
+  .arrow[data-side='right'],
+  .arrow[data-side='inline-end'] {
+    inset-inline-start: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: -90deg;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden; the link behind the card prints per [D79] (§7.6). */
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}