@crisp-ui-kit/crisp 0.53.5 → 0.54.1

package/dist/esm/product/richtext/richtext.js

@@ -147,6 +147,14 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     // (documented React behaviour), so a plain onFocus/onBlur pair on this
     // same wrapper sees the portal's contents correctly.
     const mentionPickerHasFocusRef = React.useRef(false);
+    // A caret position `insertMention` just established, to be re-asserted
+    // the next time `body` regains focus (#514 fixed the picker stealing
+    // focus on OPEN; this is the same "caret resets to offset 0" mechanism
+    // on SELECT — see insertMention's own comment for why one synchronous
+    // `sel.addRange` isn't enough). One-shot: consumed and cleared by the
+    // very next focus or input, whichever comes first, so a stale pointer
+    // can never later hijack an unrelated focus.
+    const pendingCaretRef = React.useRef(null);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -458,6 +466,20 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
         after.collapse(true);
         sel.removeAllRanges();
         sel.addRange(after);
+        // `select`ing a mention is usually the LAST thing the consumer's
+        // picker does before it unmounts (ActorPicker-shaped consumers call
+        // `close` right after `select`, same as this file's own doc example).
+        // A picker built on a dialog primitive (crisp's own `Command`
+        // included) commonly restores focus to whatever had it before the
+        // dialog opened as part of ITS OWN unmount cleanup — a plain
+        // `.focus()` with no Range of its own, which collapses a
+        // contentEditable's caret to offset 0. That cleanup runs after this
+        // function returns (the picker only unmounts once `closeMention`
+        // below flips `mention` to null and React commits it), so the
+        // Selection set two lines up can already be correct here and still
+        // get clobbered a tick later. Re-assert it the next time `body`
+        // actually regains focus, whenever that turns out to be.
+        pendingCaretRef.current = { node: space, offset: 1 };
         closeMention();
         syncEmpty(bodyRef.current);
         emit();
@@ -522,10 +544,31 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
                     } })), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
                     ? undefined
                     : () => {
+                        // A real keystroke landing here means `body` already has
+                        // focus on its own terms — any caret a prior mention
+                        // selection was waiting to reassert (see insertMention) is
+                        // moot now and must not later jump the caret backward on
+                        // some unrelated future focus.
+                        pendingCaretRef.current = null;
                         syncEmpty(bodyRef.current);
                         updateSlashTrigger();
                         updateMention();
                         emit();
+                    }, onFocus: readOnly
+                    ? undefined
+                    : () => {
+                        const pending = pendingCaretRef.current;
+                        pendingCaretRef.current = null;
+                        if (!pending?.node.isConnected)
+                            return;
+                        const sel = window.getSelection();
+                        if (!sel)
+                            return;
+                        const range = document.createRange();
+                        range.setStart(pending.node, pending.offset);
+                        range.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(range);
                     }, onMouseUp: readOnly
                     ? undefined
                     : () => {

package/dist/esm/product/tasklist/tasklist.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { tasklistRecipe } from "./tasklist.recipe.js";
 function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
     return (_jsxs("div", { className: "crisp-tasklist-row", "data-done": task.done ? "" : undefined, children: [_jsx("input", { type: "checkbox", className: "crisp-tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), _jsx("span", { className: "crisp-tasklist-title", children: task.title }), (task.due != null || task.meta != null) && (_jsxs("span", { className: "crisp-tasklist-meta", children: [task.due != null && (_jsx("span", { className: "crisp-tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
@@ -8,9 +9,15 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */
-export function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", ...rest }) {
+export function TaskList({ tasks, groups, onToggle, emptyLabel: emptyLabelProp, className, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, ...rest }) {
     const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
     const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only.
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = useCrispMessage(completeLabelProp, "Mark complete");
+    const incompleteLabel = useCrispMessage(incompleteLabelProp, "Mark incomplete");
     return (_jsx("div", { className: tasklistRecipe({ className }), ...rest, children: total === 0 ? (_jsx("div", { className: "crisp-tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => (_jsxs("div", { children: [g.label != null && (_jsxs("div", { className: "crisp-tasklist-group", children: [g.label, _jsx("span", { className: "crisp-tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => (_jsx(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
 }
 TaskList.displayName = "TaskList";

package/dist/esm/tokens/palette.js

@@ -97,4 +97,18 @@ export const palette = {
     // as-is per build/spec-check.mjs's own note), this token exists only for
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
     softNeutralText: { light: "#686870", dark: "#9a9aa2" },
+    // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
+    // own role pill ("Admin", app.attio.com/<ws>/settings/workspace/members):
+    // background rgb(245,240,255), text rgb(98,56,181). The ring re-uses a
+    // second, independent measurement from the same session (a company's
+    // Categories tag pill sharing the identical background, "Broadcasting",
+    // app.attio.com/<ws>/companies) at rgb(232,221,254) -- same hue family,
+    // cross-validated rather than guessed. Dark mode was NOT measured (no
+    // live Attio session was reachable when this tone was added) -- these
+    // three light values are reused as-is for dark rather than an invented
+    // "brightened" guess (Lesson: don't add unmeasured "robustness"). Needs a
+    // real dark-mode measurement before this note can be removed.
+    purpleTint: { light: "#f5f0ff", dark: "#f5f0ff" },
+    softPurpleText: { light: "#6238b5", dark: "#6238b5" },
+    purpleRing: { light: "#e8ddfe", dark: "#e8ddfe" },
 };

package/dist/esm/tokens/semantic.js

@@ -60,4 +60,9 @@ export const semantic = {
     fgWarningSoft: "softWarningText",
     fgDangerSoft: "softDangerText",
     fgNeutralSoft: "softNeutralText",
+    /** Badge's purple/role-pill tone (crisp#506) — see palette.ts's comment
+     * on `purpleTint`/`softPurpleText`/`purpleRing` for the measurement. */
+    bgPurpleSoft: "purpleTint",
+    fgPurpleSoft: "softPurpleText",
+    ringPurpleSoft: "purpleRing",
 };

package/dist/headerbar.css

@@ -0,0 +1,7 @@
+.crisp-headerbar {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+}

package/dist/headerbar.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface HeaderbarVariants {
+
+}
+
+export declare const headerbarRecipe: RecipeFn<{  }>;

package/dist/headerbar.layered.css

@@ -0,0 +1,9 @@
+@layer crisp-components {
+.crisp-headerbar {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+}
+}

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;

package/dist/native/tokens.js

@@ -49,7 +49,10 @@ export const tokens = {
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870"
+      "fgNeutralSoft": "#686870",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -97,7 +100,10 @@ export const tokens = {
       "fgSuccessSoft": "#2ea968",
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
-      "fgNeutralSoft": "#9a9aa2"
+      "fgNeutralSoft": "#9a9aa2",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     }
   },
   "palette": {
@@ -146,7 +152,10 @@ export const tokens = {
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870"
+      "softNeutralText": "#686870",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -193,7 +202,10 @@ export const tokens = {
       "softSuccessText": "#2ea968",
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
-      "softNeutralText": "#9a9aa2"
+      "softNeutralText": "#9a9aa2",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     }
   },
   "space": {

package/dist/recordpage.css

@@ -47,6 +47,10 @@
     & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--crisp-size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* A caller-supplied `sections` grouping (#528) is not an Attio-measured
+       shape (its own Details column is flat) -- this heading reuses
+       .crisp-recordpage-section-title's own type treatment verbatim, just spaced from the group above it. */
+    & .crisp-recordpage-fieldsection-title { margin-top: var(--crisp-space-3); }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
     & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: var(--crisp-space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-regular); cursor: pointer; text-align: start; }
@@ -61,31 +65,25 @@
     & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable),
-       reset back to plain inline text and made a flex-wrap container of its
-       own -- FieldValue can render several chips (tags), which still need
-       to wrap the way they did before this had a button around them at
-       all. It wraps only FieldValue, never the error slot beside it (see
-       the component's own comment) -- NOT `display: contents`, which drops a button's accessible semantics in some engines. */
+    /* the click-to-edit trigger is a real <button> (keyboard-operable), reset back to plain inline text and made a flex-wrap container of its own -- FieldValue can render several chips (tags), which still need to wrap the way they did before this had a button around them at all. It wraps only FieldValue, never the error slot beside it (see the component's own comment) -- NOT `display: contents`, which
+       drops a button's accessible semantics in some engines. */
     & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpage-empty { color: var(--crisp-fg-muted); }
-
-    /* #431: measured live on app.attio.com's record page Details column -- clicking a field's value opens a plain, borderless field exactly
-       filling the value's own box (no border, no background, no box-shadow), same font as the value it replaces (hence `font: inherit`, not a restated size/weight). A field row's own hover tint
-       above already carries the "this is interactive" affordance; the
-       pending/error treatment isn't Attio-measured -- it reuses the same tokens DataTable's identical states already use (opacity 0.5,
-       `bgDanger`), per #385/#430. */
+    /* #431: measured live on app.attio.com's record page Details column --
+       clicking a field's value opens a plain, borderless field exactly filling the value's own box (no border, no background, no
+       box-shadow), same font as the value it replaces (hence `font:
+       inherit`, not a restated size/weight). A field row's own hover tint above already carries the "this is interactive" affordance; the pending/error treatment isn't Attio-measured -- it reuses the same
+       tokens DataTable's identical states already use (opacity 0.5, `bgDanger`), per #385/#430. */
     & .crisp-recordpage-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret
-       only) -- kept for real keyboard users, the same brand ring every
-       other crisp field already shows on focus (DataTable's identical .crisp-datatable-edit:focus, e.g.). */
+    /* not Attio-measured (its own field shows no focus ring either, caret only) -- kept for real keyboard users, the same brand ring every other crisp field already shows on focus (DataTable's identical
+       .crisp-datatable-edit:focus, e.g.). */
     & .crisp-recordpage-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
-       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
-       classnames verbatim here would resolve to nothing. */
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as RecordsTable's own `.crisp-recordstable-status[-dot]` (already
+       measured against Attio there), but its own classes: that pair is
+       scoped under `.crisp-recordstable`'s own recipe root, so reusing the classnames verbatim here would resolve to nothing. */
     & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
     & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
@@ -93,23 +91,18 @@
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
-
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
-       column count, so the grid stays responsive (auto-fit) without per-cell
-       nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
-
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -118,7 +111,6 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
-
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -126,7 +118,6 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
-
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -136,23 +127,18 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
-
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
-
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/recordpage.layered.css

@@ -48,6 +48,10 @@
     & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--crisp-size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* A caller-supplied `sections` grouping (#528) is not an Attio-measured
+       shape (its own Details column is flat) -- this heading reuses
+       .crisp-recordpage-section-title's own type treatment verbatim, just spaced from the group above it. */
+    & .crisp-recordpage-fieldsection-title { margin-top: var(--crisp-space-3); }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
     & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: var(--crisp-space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-regular); cursor: pointer; text-align: start; }
@@ -62,31 +66,25 @@
     & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable),
-       reset back to plain inline text and made a flex-wrap container of its
-       own -- FieldValue can render several chips (tags), which still need
-       to wrap the way they did before this had a button around them at
-       all. It wraps only FieldValue, never the error slot beside it (see
-       the component's own comment) -- NOT `display: contents`, which drops a button's accessible semantics in some engines. */
+    /* the click-to-edit trigger is a real <button> (keyboard-operable), reset back to plain inline text and made a flex-wrap container of its own -- FieldValue can render several chips (tags), which still need to wrap the way they did before this had a button around them at all. It wraps only FieldValue, never the error slot beside it (see the component's own comment) -- NOT `display: contents`, which
+       drops a button's accessible semantics in some engines. */
     & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpage-empty { color: var(--crisp-fg-muted); }
-
-    /* #431: measured live on app.attio.com's record page Details column -- clicking a field's value opens a plain, borderless field exactly
-       filling the value's own box (no border, no background, no box-shadow), same font as the value it replaces (hence `font: inherit`, not a restated size/weight). A field row's own hover tint
-       above already carries the "this is interactive" affordance; the
-       pending/error treatment isn't Attio-measured -- it reuses the same tokens DataTable's identical states already use (opacity 0.5,
-       `bgDanger`), per #385/#430. */
+    /* #431: measured live on app.attio.com's record page Details column --
+       clicking a field's value opens a plain, borderless field exactly filling the value's own box (no border, no background, no
+       box-shadow), same font as the value it replaces (hence `font:
+       inherit`, not a restated size/weight). A field row's own hover tint above already carries the "this is interactive" affordance; the pending/error treatment isn't Attio-measured -- it reuses the same
+       tokens DataTable's identical states already use (opacity 0.5, `bgDanger`), per #385/#430. */
     & .crisp-recordpage-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret
-       only) -- kept for real keyboard users, the same brand ring every
-       other crisp field already shows on focus (DataTable's identical .crisp-datatable-edit:focus, e.g.). */
+    /* not Attio-measured (its own field shows no focus ring either, caret only) -- kept for real keyboard users, the same brand ring every other crisp field already shows on focus (DataTable's identical
+       .crisp-datatable-edit:focus, e.g.). */
     & .crisp-recordpage-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
-       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
-       classnames verbatim here would resolve to nothing. */
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as RecordsTable's own `.crisp-recordstable-status[-dot]` (already
+       measured against Attio there), but its own classes: that pair is
+       scoped under `.crisp-recordstable`'s own recipe root, so reusing the classnames verbatim here would resolve to nothing. */
     & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
     & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
@@ -94,23 +92,18 @@
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
-
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
-       column count, so the grid stays responsive (auto-fit) without per-cell
-       nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
-
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -119,7 +112,6 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
-
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -127,7 +119,6 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
-
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -137,23 +128,18 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
-
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
-
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/skiplink.css

@@ -0,0 +1,5 @@
+.crisp-skiplink {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+    &:focus { position: fixed; top: var(--crisp-space-3); inset-inline-start: var(--crisp-space-3); z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: var(--crisp-space-2) var(--crisp-space-3); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+}

package/dist/skiplink.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface SkiplinkVariants {
+
+}
+
+export declare const skiplinkRecipe: RecipeFn<{  }>;

package/dist/skiplink.layered.css

@@ -0,0 +1,7 @@
+@layer crisp-components {
+.crisp-skiplink {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+    &:focus { position: fixed; top: var(--crisp-space-3); inset-inline-start: var(--crisp-space-3); z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: var(--crisp-space-2) var(--crisp-space-3); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+}
+}