@fairgarden/design 0.1.0-0.canary.0

package/forms/search/Search.d.ts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../foundations/icon';
+export declare const search: (props?: ({
+    kind?: "ruled" | "boxed" | "docked" | null | undefined;
+    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 SearchVariants = VariantProps<typeof search>;
+/** One suggestion row. */
+export type SearchSuggestion = {
+    /** The text the suggestion fills in (and submits). */
+    value: string;
+    /** The row's words. Default: `value`. */
+    label?: string;
+    /** An italic secondary name in --role-muted (a Latin name, a place). */
+    secondaryName?: string;
+    /** An optional type icon (inline tier). */
+    icon?: IconName;
+    /** Makes the row a link to this page. */
+    href?: string;
+    disabled?: boolean;
+};
+/** A titled group of suggestions; each group after the first sits under a rule. */
+export type SearchSuggestionGroup = {
+    /** The group head, in `type-label` caps. */
+    label: string;
+    items: readonly SearchSuggestion[];
+};
+type SearchItems = readonly SearchSuggestion[] | readonly SearchSuggestionGroup[];
+interface SearchFieldProps {
+    /**
+     * The field's label and the landmark's name ("Search the guide"). A
+     * placeholder never replaces it.
+     */
+    label: string;
+    /** Shows `label` above the field. Default `false`: it names the input for assistive technology. */
+    labelVisible?: boolean;
+    /** Default "Search…", ending in the ellipsis character. */
+    placeholder?: string;
+    /** The query, controlled. */
+    value?: string;
+    /** The initial query. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the query on submit (Enter, or the submit cell); the page does not reload. */
+    onSubmit?: (query: string, event: React.FormEvent<HTMLFormElement>) => void;
+    /** A native form action, used when `onSubmit` is not given. */
+    action?: string;
+    /** The query's name in a native submission. Default `q`. */
+    name?: string;
+    /** The suggestions, or titled groups. Pass `filter={null}` when the server filters them. */
+    items?: SearchItems;
+    /** Base UI's filter; `null` when the server already filtered the items. */
+    filter?: BaseAutocomplete.Root.Props<SearchSuggestion>['filter'];
+    /** Status text: "12 results". Announced politely. */
+    status?: React.ReactNode;
+    /** Shows "Searching…" in the status row while suggestions load. */
+    loading?: boolean;
+    /** The empty status. Default "No results for '[query]'"; add a next step where you can. */
+    emptyText?: (query: string) => React.ReactNode;
+    /** The "See all results" row's destination for a query. */
+    seeAllHref?: (query: string) => string;
+    /** The "See all" row's words. Default "See all results for '[query]'". */
+    seeAllText?: (query: string) => React.ReactNode;
+    /** The submit cell's accessible name (and label from `--md-n-above` when `submitLabelled`). Default "Search". */
+    submitLabel?: string;
+    /** Shows the submit's label from `--md-n-above`. Default `false`: the icon-only cell. */
+    submitLabelled?: boolean;
+    /** Hides the butted submit (boxed and docked); Enter still submits. */
+    hideSubmit?: boolean;
+    /** Submits the chosen suggestion when a row is pressed. */
+    submitOnItemClick?: boolean;
+    disabled?: boolean;
+    /** Class names for the landmark, added after the module's own. */
+    className?: string;
+    /** Primary Radix scale: field, rules, rows and focus ring. Never defaulted [D133]. */
+    primary?: SearchVariants['primary'];
+    /** Secondary Radix scale: accepted; the submit takes the scope's action scale. */
+    secondary?: SearchVariants['secondary'];
+}
+interface SearchTriggerProps {
+    /** The trigger's accessible name ("Search"). */
+    label: string;
+    /** Opens the app's search sheet (a Dialog below `--lg-n-above`) or docked bar. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Base UI `render`, to compose the trigger with a Dialog trigger. */
+    render?: React.ReactElement;
+    /** Class names for the Button, added after its own. */
+    className?: string;
+    /** Primary Radix scale for the Button. Never defaulted [D133]. */
+    primary?: SearchVariants['primary'];
+    /** Secondary Radix scale for the Button. */
+    secondary?: SearchVariants['secondary'];
+}
+/**
+ * Props for Search. `kind="trigger"` takes only the trigger props; the
+ * other kinds take the field props.
+ */
+export type SearchProps = ({
+    /**
+     * `boxed` (default): the field box with the butted submit. `ruled`:
+     * the field between two --border-size-2 rules. `docked`: the boxed
+     * field in the full-width top bar. `trigger`: the header's icon-only
+     * Button that opens the search sheet or bar.
+     */
+    kind?: 'boxed' | 'ruled' | 'docked';
+} & SearchFieldProps) | ({
+    kind: 'trigger';
+} & SearchTriggerProps);
+/**
+ * Search in a `search` landmark. Matches are marked by weight, never
+ * color; an empty result is a plain-word status, never a red error (P10).
+ * Show one docked bar at a time.
+ */
+export declare function Search(props: SearchProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Search.d.ts.map

package/forms/search/Search.d.ts.map

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

package/forms/search/Search.js

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { Field, FieldLabel } from '../field';
+import { Icon } from '../../foundations/icon';
+import { input, inputParts } from '../input';
+import { Link } from '../../actions/link';
+import { highlightMatch } from '../../utils/highlightMatch';
+import { OverlayScope, overlayAttributes, overlayScaleClassName } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './search.module.css';
+/*
+ * Search (§9.10): where typing beats browsing. Site and collection search
+ * on Base UI's Autocomplete, in a `search` landmark.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: search.module.css; CVA function `search`. The module styles
+ *   only Search's own parts: the field is the Input's box (§10.1, through
+ *   `input` and `inputParts`), the submit a `solid` Button butted to it,
+ *   and the clear and header trigger icon-only Buttons.
+ * - Axes: `kind` → boxed, ruled, trigger, docked; `primary`, `secondary`
+ *   → scales module classes. `trigger` is the header's icon-only Button,
+ *   which carries only the Button's own classes.
+ * - Compound variants: none.
+ * - Defaults: kind boxed; color axes none.
+ * - Color fallback: Search's parts inherit the scope. The submit falls back
+ *   to the scope's action scale through the Button's `solid` class.
+ * - States: `data-focused` on the input → the ring on any focus [D90]
+ *   (around field and submit together when butted); `data-popup-open` →
+ *   `aria-expanded`, popup shown; `data-highlighted` on `item` → --primary4
+ *   plus the start bar [D145]; `data-disabled` → per §10.1; popup
+ *   `data-starting-style` / `data-ending-style` → the clip reveal.
+ * - Parts: base (the landmark), magnifier, rules, popup, group,
+ *   groupLabel, item, itemIcon, match, secondaryName, seeAll, status, bar.
+ * - Scope: the popup renders in its Base UI Portal and declares a `white`
+ *   page scope; edge --border-size-2 --primary12 [D148, D156].
+ * - Container: none; the docked bar is page frame, and the butted submit
+ *   follows the Input's row (§5.10.2).
+ */
+export const search = cva(styles.base, {
+    variants: {
+        kind: {
+            boxed: styles.boxed,
+            ruled: styles.ruled,
+            docked: styles.docked,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'boxed',
+    },
+});
+function isGroups(items) {
+    return items.length > 0 && 'items' in items[0];
+}
+/**
+ * Search in a `search` landmark. Matches are marked by weight, never
+ * color; an empty result is a plain-word status, never a red error (P10).
+ * Show one docked bar at a time.
+ */
+export function Search(props) {
+    if (props.kind === 'trigger') {
+        const { label, onClick, render, className, primary, secondary } = props;
+        return (React.createElement(Button, { iconOnly: true, size: "lg", icon: "search", onClick: onClick, render: render, className: className, primary: primary, secondary: secondary }, label));
+    }
+    return React.createElement(SearchField, { ...props });
+}
+function SearchField(props) {
+    const { kind, label, labelVisible = false, placeholder = 'Search…', value, defaultValue, onValueChange, onSubmit, action, name = 'q', items, filter, status, loading = false, emptyText = (query) => `No results for '${query}'`, seeAllHref, seeAllText = (query) => `See all results for '${query}'`, submitLabel = 'Search', submitLabelled = false, hideSubmit = false, submitOnItemClick, disabled, className, primary, secondary, } = props;
+    const scope = useScopeAttributes();
+    const ruled = kind === 'ruled';
+    const showSubmit = !ruled && !hideSubmit;
+    const [innerQuery, setInnerQuery] = React.useState(defaultValue ?? '');
+    const query = value !== undefined ? value : innerQuery;
+    const trimmed = query.trim();
+    const handleSubmit = (event) => {
+        if (!onSubmit)
+            return;
+        event.preventDefault();
+        onSubmit(query, event);
+    };
+    const boxClassName = ruled ? styles.rules : input({ butted: showSubmit ? 'end' : undefined });
+    const renderRow = (suggestion) => (React.createElement(BaseAutocomplete.Item, { key: suggestion.value, value: suggestion, disabled: suggestion.disabled, className: styles.item, render: suggestion.href ? React.createElement("a", { href: suggestion.href }) : undefined },
+        suggestion.icon ? React.createElement(Icon, { name: suggestion.icon, className: styles.itemIcon }) : null,
+        React.createElement("span", { className: styles.itemText },
+            React.createElement("span", null, highlightMatch(suggestion.label ?? suggestion.value, query, styles.match)),
+            suggestion.secondaryName ? (React.createElement("span", { className: styles.secondaryName }, suggestion.secondaryName)) : null)));
+    const field = (React.createElement(Field, { disabled: disabled },
+        labelVisible ? React.createElement(FieldLabel, null, label) : null,
+        React.createElement(BaseAutocomplete.Root, { items: items, filter: filter, value: value, defaultValue: defaultValue, onValueChange: (next) => {
+                setInnerQuery(next);
+                onValueChange?.(next);
+            }, itemToStringValue: (suggestion) => suggestion.value, submitOnItemClick: submitOnItemClick, disabled: disabled, name: name },
+            React.createElement(BaseAutocomplete.InputGroup, { ...scope, className: boxClassName },
+                ruled ? (React.createElement("svg", { className: styles.rulesEdge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("line", { className: styles.rulesEdgeLine, x1: "0", y1: "0.5", x2: "100%", y2: "0.5" }),
+                    React.createElement("line", { className: styles.rulesEdgeLine, x1: "0", y1: "100%", x2: "100%", y2: "100%", transform: "translate(0 -0.5)" }))) : null,
+                React.createElement(Icon, { name: "search", className: styles.magnifier }),
+                React.createElement(BaseAutocomplete.Input, { className: inputParts.control, placeholder: placeholder, "aria-label": labelVisible ? undefined : label }),
+                React.createElement(BaseAutocomplete.Clear, { render: React.createElement(Button, { iconOnly: true, size: "sm", icon: "close" }, "Clear search") }),
+                showSubmit ? (React.createElement("span", { className: inputParts.actionSlot },
+                    React.createElement(Button, { type: "submit", variant: "solid", butted: "start", iconOnly: true, icon: "arrow_forward", disabled: disabled, className: inputParts.actionIcon }, submitLabel),
+                    submitLabelled ? (React.createElement(Button, { type: "submit", variant: "solid", butted: "start", size: "lg", disabled: disabled, className: inputParts.actionText }, submitLabel)) : null)) : null,
+                ruled ? null : (React.createElement("svg", { className: inputParts.edge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("rect", { className: inputParts.edgeLine, width: "100%", height: "100%" })))),
+            React.createElement(BaseAutocomplete.Portal, null,
+                React.createElement(BaseAutocomplete.Positioner, { className: styles.positioner, sideOffset: 8, align: "start", collisionPadding: 16 },
+                    React.createElement(BaseAutocomplete.Popup, { ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
+                        React.createElement(OverlayScope, null,
+                            React.createElement(BaseAutocomplete.Status, { className: styles.status }, loading ? 'Searching…' : status),
+                            React.createElement(BaseAutocomplete.Empty, { className: styles.status }, loading || trimmed === '' ? null : emptyText(trimmed)),
+                            React.createElement(BaseAutocomplete.List, { className: styles.list }, items && isGroups(items)
+                                ? items.map((group) => (React.createElement(BaseAutocomplete.Group, { key: group.label, items: group.items, className: styles.group },
+                                    React.createElement(BaseAutocomplete.GroupLabel, { className: styles.groupLabel }, group.label),
+                                    React.createElement(BaseAutocomplete.Collection, null, (suggestion) => renderRow(suggestion)))))
+                                : (suggestion) => renderRow(suggestion)),
+                            seeAllHref && trimmed !== '' ? (React.createElement("div", { className: styles.seeAll },
+                                React.createElement(Link, { kind: "standalone", href: seeAllHref(trimmed) }, seeAllText(trimmed)))) : null)))))));
+    const form = (React.createElement("form", { className: styles.form, action: action, onSubmit: handleSubmit }, field));
+    return (React.createElement("search", { ...scope, "aria-label": label, className: search({ kind, primary, secondary, className }) }, kind === 'docked' ? React.createElement("div", { className: styles.bar }, form) : form));
+}
+//# sourceMappingURL=Search.js.map

package/forms/search/Search.js.map

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

package/forms/search/index.d.ts

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

package/forms/search/index.d.ts.map

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

package/forms/search/index.js

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

package/forms/search/index.js.map

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

package/forms/search/search.module.css

@@ -0,0 +1,326 @@
+/*
+ * Search (§9.10). CVA function `search`. The module styles only Search's
+ * own parts: `base` (the search landmark), `magnifier`, `rules` (the
+ * rule-bounded field, with `rulesEdge` / `rulesEdgeLine` for its dotted
+ * disabled rules), `popup`, `list`, `group`, `groupLabel`, `item`,
+ * `itemIcon`, `itemText`, `match`, `secondaryName`, `seeAll`, `status`,
+ * `bar` (docked); `positioner` places the popup on --layer-3. The boxed
+ * field is the Input's box (§10.1), the submit a `solid` Button butted to
+ * it, and the clear and header trigger icon-only Buttons: their parts are
+ * left to their own modules (§1.11.1). Colors are role variables 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. */
+.item {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.secondaryName {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.status {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.rulesEdgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The landmark: in-page filters run full width at base and --size-sm from --md-n-above. */
+  .base {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .form {
+    display: block;
+    margin: 0;
+  }
+
+  /* The magnifier: Material Symbols Rounded `search`, inline tier, decorative, --primary12 [D166]. */
+  .magnifier {
+    flex: none;
+    color: inherit;
+  }
+
+  /*
+   * Rule-bounded: no box; the field sits between two --border-size-2
+   * --primary12 rules the width of the container.
+   */
+  .rules {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: var(--size-px-8);
+    padding-inline: var(--size-px-2-5);
+    border-block: var(--border-size-2) solid var(--primary12);
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  .rulesEdge {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .rulesEdgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  .positioner {
+    z-index: var(--layer-3);
+    outline: 0;
+  }
+
+  /* The §9.1 panel at field width: the white scope's face, the --border-size-2 --primary12 frame. */
+  .popup {
+    /* The clip reveal starts from the trigger side. */
+    --search-reveal-from: inset(0 0 100% 0);
+
+    box-sizing: border-box;
+    inline-size: var(--anchor-width);
+    max-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(0);
+    outline: 0;
+  }
+
+  /* 8 rows visible, then it scrolls. */
+  .list {
+    box-sizing: border-box;
+    max-block-size: min(
+      var(--available-height, 100vh),
+      calc(8 * var(--fgd-size-hit) + 2 * var(--size-px-1))
+    );
+    padding: var(--size-px-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  /* Groups: a type-label head, and a --border-size-1 --role-rule rule above every group but the first. */
+  .group {
+    display: block;
+  }
+
+  .group + .group {
+    margin-block-start: var(--size-px-1);
+    padding-block-start: var(--size-px-1);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .groupLabel {
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  /* Suggestion rows: --fgd-size-hit, type-body-ui; an optional type icon; highlight radius 8 − 4 [D40]. */
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-3);
+    border-radius: calc(var(--radius-2-25) - var(--size-px-1));
+    color: var(--primary12);
+    text-decoration-line: none;
+    cursor: default;
+    outline: 0;
+    user-select: none;
+  }
+
+  .item::before {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+  }
+
+  .itemIcon {
+    flex: none;
+    color: var(--primary12);
+  }
+
+  .itemText {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  /* Matches are marked by weight, not color, which survives every ground and B/W. */
+  .match {
+    background: none;
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The secondary name: italic type-caption in --role-muted. */
+  .secondaryName {
+    font-style: italic;
+  }
+
+  /* "See all": a standalone link row (§9.3), set off by the group rule. */
+  .seeAll {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Status: "12 results", or a plain-word "No results" with a next step; never a red error (P10). */
+  .status {
+    color: var(--primary12);
+  }
+
+  .status:not(:empty) {
+    padding: var(--size-px-2) var(--size-px-3);
+  }
+
+  /* Docked: a full-width opaque bar at least --fgd-size-hit tall, a --border-size-1 rule on its content side. */
+  .bar {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--fgd-space-margin);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+    background-color: var(--role-ground);
+  }
+
+  .bar > * {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .rulesEdgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    /* The clip reveal (the edge wipes open), never a fade [D91]. */
+    .popup {
+      transition: clip-path var(--fgd-duration-disclosure) var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Boxed (default): the Input's field box with the butted submit. */
+  .boxed {
+    display: block;
+  }
+
+  .ruled {
+    display: block;
+  }
+
+  /* In-page filters: --size-sm from --md-n-above. */
+  @media (min-width: 768px) {
+    .boxed,
+    .ruled {
+      max-inline-size: var(--size-sm);
+    }
+  }
+
+  /* Docked: the top edge's one bar while open, on --layer-2, never stacked under another [D89]. */
+  .docked {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+  }
+}
+
+@layer states {
+  /* Focus: the ring on any focus of the input, outside the rules [D90]. */
+  .rules[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Disabled: the rules become `line-dotted-fine` in --role-rule; inks --role-muted [D16]. */
+  .rules[data-disabled] {
+    border-block-style: none;
+    padding-block: var(--border-size-2);
+    color: var(--role-muted);
+  }
+
+  .rules[data-disabled] .rulesEdge {
+    display: block;
+  }
+
+  /* Highlighted: --primary4 plus a --border-size-2-25 start bar, as Menu [D145]. */
+  .item[data-highlighted] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before {
+    display: block;
+  }
+
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  /* Placement: a popup above the field reveals from its bottom edge. */
+  .popup[data-side='top'] {
+    --search-reveal-from: inset(100% 0 0 0);
+  }
+
+  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
+  .popup[data-starting-style],
+  .popup[data-ending-style] {
+    clip-path: var(--search-reveal-from);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Fields, triggers and popups are interaction only; a results page prints its heading and hits. */
+    .base,
+    .positioner {
+      display: none;
+    }
+  }
+}