@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,2 @@
+export { TaskList, } from "./tasklist.js";
+export { tasklistRecipe } from "./tasklist.recipe.js";

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasklistRecipe } from "./tasklist.recipe.js";
+function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
+    return (_jsxs("div", { className: "tasklist-row", "data-done": task.done ? "" : undefined, children: [_jsx("input", { type: "checkbox", className: "tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), _jsx("span", { className: "tasklist-title", children: task.title }), (task.due != null || task.meta != null) && (_jsxs("span", { className: "tasklist-meta", children: [task.due != null && (_jsx("span", { className: "tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
+}
+/**
+ * A task list — measured from Attio's Tasks page. Optional group headers with a
+ * 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", }) {
+    const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
+    const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
+    return (_jsx("div", { className: tasklistRecipe({ className }), children: total === 0 ? (_jsx("div", { className: "tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => (_jsxs("div", { children: [g.label != null && (_jsxs("div", { className: "tasklist-group", children: [g.label, _jsx("span", { className: "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/product/tasklist/tasklist.recipe.js

@@ -0,0 +1,35 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A task list — measured from Attio's Tasks page: optional group headers, then
+// rows of a round complete-checkbox + title + trailing meta (due date, record,
+// assignee). Completed rows strike through; overdue due-dates go red.
+const config = defineRecipe({
+    name: "tasklist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tasklist-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+
+    & .tasklist-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; padding: 0 ${c.space["2"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .tasklist-row:first-child { border-top: none; }
+
+    & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+    & .tasklist-check:checked { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .tasklist-check:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .tasklist-row[data-done] .tasklist-title { color: ${c.fgMuted}; text-decoration: line-through; }
+
+    & .tasklist-meta { display: inline-flex; align-items: center; gap: ${c.space["3"]}; flex-shrink: 0; }
+    & .tasklist-due { font-size: ${c.text.lg}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .tasklist-due[data-overdue] { color: ${c.bgDanger}; }
+
+    & .tasklist-empty { padding: ${c.space["4"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const tasklistRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/trialbanner/index.js

@@ -0,0 +1,2 @@
+export { TrialBanner } from "./trialbanner.js";
+export { trialbannerRecipe } from "./trialbanner.recipe.js";

package/dist/esm/product/trialbanner/trialbanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { trialbannerRecipe } from "./trialbanner.recipe.js";
+/**
+ * A compact trial / upgrade banner — measured from Attio's sidebar footer.
+ * Icon + message + an optional small action pill (soft-glow outlined button).
+ */
+export function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
+    return (_jsxs("div", { className: trialbannerRecipe({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "trialbanner-icon", children: icon }), _jsx("span", { className: "trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+}
+TrialBanner.displayName = "TrialBanner";

package/dist/esm/product/trialbanner/trialbanner.recipe.js

@@ -0,0 +1,29 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A compact trial / upgrade banner — measured from Attio's sidebar footer: an
+// icon + a message on the left and a small action pill on the right, in a 28px
+// row. The action uses Attio's soft-glow outlined-button shadow.
+const config = defineRecipe({
+    name: "trialbanner",
+    base: `display: flex; align-items: center; gap: ${c.space["1.5"]}; box-sizing: border-box; min-height: 28px;
+    padding: 0 ${c.space["1"]}; border-radius: ${c.radius.lg}; font-family: ${c.font.sans};
+    font-size: ${c.text.lg}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
+    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .trialbanner-action { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 20px; flex-shrink: 0;
+      padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface};
+      box-shadow: ${e.fieldNoRing};
+      font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+      white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .trialbanner-action:hover { background: ${c.bgRaised}; }
+
+    &[data-tone="warning"] .trialbanner-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] .trialbanner-icon { color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const trialbannerRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/viewtoggle/index.js

@@ -0,0 +1,2 @@
+export { ViewToggle, } from "./viewtoggle.js";
+export { viewtoggleRecipe } from "./viewtoggle.recipe.js";

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
+/**
+ * A compact icon toggle — measured from Attio's list/grid switch. A padded track
+ * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
+ * grid) or any small mutually-exclusive icon choice.
+ */
+export function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const value = valueProp ?? internalValue ?? options[0]?.value;
+    const pick = (next) => {
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
+}
+ViewToggle.displayName = "ViewToggle";

package/dist/esm/product/viewtoggle/viewtoggle.recipe.js

@@ -0,0 +1,24 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A compact icon toggle — measured from Attio's list/grid switch: a 28px track
+// (radius 10, ~5% ink) padded 2px, holding 24px icon tiles (radius 8). The
+// selected tile gets a raised surface with a soft shadow.
+const config = defineRecipe({
+    name: "viewtoggle",
+    base: `display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
+    border-radius: ${c.radius.lg}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent);
+    font-family: ${c.font.sans};
+
+    & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+      padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted};
+      font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+    & .viewtoggle-tile:hover { color: ${c.fgPrimary}; }
+    & .viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
+      box-shadow: 0 1px 2px -1px ${c.shadowTileActive}; }
+    & .viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const viewtoggleRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/contract.js

@@ -0,0 +1,18 @@
+import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
+import { semantic } from "./semantic.js";
+const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+const toVar = (key) => `var(--${kebab(key)})`;
+// dots aren't valid in a CSS custom-property name → "2.5" becomes "2-5"
+const scaleVar = (prefix, key) => `var(--${prefix}-${key.replace(/\./g, "-")})`;
+const mapScale = (prefix, scale) => Object.fromEntries(Object.keys(scale).map((k) => [k, scaleVar(prefix, k)]));
+const colors = Object.fromEntries(Object.keys(semantic).map((k) => [k, toVar(k)]));
+// contract = color tokens (theme-flipping) + the dimensional scale
+// (theme-invariant). Recipes read everything through this one import.
+export const contract = Object.assign(colors, {
+    space: mapScale("space", spaceScale),
+    radius: mapScale("radius", radiusScale),
+    size: mapScale("size", sizeScale),
+    font: mapScale("font", fontScale),
+    text: mapScale("text", textScale),
+    weight: mapScale("weight", weightScale),
+});

package/dist/esm/tokens/elevation.js

@@ -0,0 +1,44 @@
+import { contract as c } from "./contract.js";
+/**
+ * Attio's measured elevation recipes, written **once**.
+ *
+ * The whole product runs on two elevation tiers plus one control shadow
+ * (measured live — see `docs/study/attio-panels.md` §4). Before this module each
+ * surface carried its own copy of the string: the tier-1 stack appeared in 9
+ * places, the control shadow in 12. Copies drift, and every drift was a real
+ * bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
+ * copy used raw literals and so never darkened in dark mode (AUTHORING.md
+ * Lesson 30). Reference the constant; never re-type the value.
+ */
+export const elevation = {
+    /**
+     * Tier 1 — anything floating and *attached*: menus, popovers, dropdowns,
+     * hover-preview cards, the floating sidebar, the record peek, drawers, the
+     * bulk bar. Pairs with a 10–12px radius and, for panels, an 8px gutter.
+     */
+    floating: `inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}`,
+    /**
+     * Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
+     * `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
+     * card at radius 12. Attio dims nothing behind it; the blur does the work.
+     */
+    modal: `0 8px 28px -6px ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.shadowOverlay3}`,
+    /**
+     * The neutral/outlined control shadow — buttons, inputs, textareas, the
+     * sidebar search, record-page actions.
+     *
+     * The two raw values **are** the measured Attio value (Lessons 22 and 29) and
+     * must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
+     * coincidence, not by meaning; tokenizing it would delete a measured layer in
+     * dark mode. Only the ring is theme-aware, via `ringNeutral`.
+     */
+    field: `inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+    /**
+     * The same control shadow **without** the theme-aware ring. Lesson 29 added
+     * the ring to the neutral-button family but deliberately left `trialbanner`
+     * and `viewtoggle` alone pending their own re-measurement — this constant
+     * exists so those surfaces share the value without silently acquiring a ring
+     * nobody measured for them.
+     */
+    fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+};

package/dist/esm/tokens/index.js

@@ -0,0 +1,5 @@
+export { contract } from "./contract.js";
+export { elevation } from "./elevation.js";
+export { palette } from "./palette.js";
+export { font, radius, size, space, text, weight, } from "./scale.js";
+export { semantic } from "./semantic.js";

package/dist/esm/tokens/palette.js

@@ -0,0 +1,60 @@
+export const palette = {
+    gray00: { light: "#ffffff", dark: "#0a0a0a" },
+    white: { light: "#ffffff", dark: "#ffffff" },
+    // the counterpart to `white`: ink that does NOT flip with the theme, for text
+    // on a bright tone fill. Same value as gray900's light side (Attio's measured
+    // near-black), named separately because its job is not "primary foreground".
+    ink: { light: "#101112", dark: "#101112" },
+    gray50: { light: "#f4f4f5", dark: "#101112" },
+    gray900: { light: "#101112", dark: "#f5f5f5" },
+    line200: { light: "#e4e4e7", dark: "#212224" },
+    line100: { light: "#eeeff1", dark: "#1c1d1f" },
+    ringNeutral: { light: "transparent", dark: "#212224" },
+    tileActive: { light: "#ffffff", dark: "#101112" },
+    tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
+    overlayFrost: { light: "#ffffff", dark: "#1c1d1f" },
+    shadowOverlay1: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.48)" },
+    shadowOverlay2: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0.64)" },
+    shadowOverlay3: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0)" },
+    popoverBg: { light: "#ffffff", dark: "#17181a" },
+    ringPopover: { light: "rgba(0,0,0,0)", dark: "#212224" },
+    shadowPopover1: { light: "rgba(28,40,64,0.04)", dark: "rgba(0,0,0,0.16)" },
+    shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
+    shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
+    gray400: { light: "#71717a", dark: "#9a9aa2" },
+    brand600: { light: "#266df0", dark: "#266df0" },
+    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
+    red600: { light: "#e5484d", dark: "#ff5a5f" },
+    // A red dark enough to carry white text. red600 cannot: white on it is
+    // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
+    // (filter: brightness), so dark ink fails there instead (4.49 at hover).
+    // Measured from Attio's own stylesheet, which ships this red alongside the
+    // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
+    // destructive control needs the same white-bearing fill in both themes.
+    red700: { light: "#ba2525", dark: "#ba2525" },
+    // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
+    // measured from @seed-design/css. A high-contrast neutral rather than a brand
+    // hue: the ring reads as "this field has focus", not as a state colour.
+    fieldFocus: { light: "#1a1c20", dark: "#f3f4f5" },
+    // seed-design's wheel picker, measured from @seed-design/css: unselected
+    // items sit at fg-disabled (gray-500) and the selection band at
+    // bg-neutral-weak (gray-200). The focus ring is their blue-600.
+    // seed's fg-disabled (gray-500): unselected wheel rows, unavailable dates
+    disabledFg: { light: "#d1d3d8", dark: "#5b606a" },
+    // seed's bg-neutral-weak (gray-200): the wheel's selection band, the
+    // calendar's today pill, and the bridge under a complete date range
+    neutralWeak: { light: "#f3f4f5", dark: "#1d2025" },
+    // seed's calendar greys: the selected day's fill and its text, the weekday
+    // header row, and the date numerals
+    neutralInverted: { light: "#2a3038", dark: "#f3f4f5" },
+    onNeutralInverted: { light: "#ffffff", dark: "#16171b" },
+    neutralSubtle: { light: "#868b94", dark: "#b0b3ba" },
+    neutralMuted: { light: "#555d6d", dark: "#dcdee3" },
+    focusRing: { light: "#1e82eb", dark: "#5e98fe" },
+    green600: { light: "#1f9d57", dark: "#2ea968" },
+    amber600: { light: "#b5730f", dark: "#e0982a" },
+    orange600: { light: "#f97514", dark: "#f97514" },
+    cyan600: { light: "#00b9eb", dark: "#00b9eb" },
+    purple600: { light: "#9b69ff", dark: "#9b69ff" },
+    graySidebar: { light: "#fbfbfb", dark: "#0e0f10" },
+};

package/dist/esm/tokens/scale.js

@@ -0,0 +1,67 @@
+// Dimensional scale — the single source of raw px for spacing, radius, and
+// component sizing. Theme-invariant (identical in light/dark), so it is emitted
+// once into :root, unlike the color tokens which flip per theme.
+//
+// Derived by measuring the live Attio app (not taste): its spacing is a
+// 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
+// nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
+// Recipes MUST reference these through the contract (`c.space[...]`), never a
+// literal px — this file is the only exception.
+// Spacing: gaps, padding, margins. Keys follow the Tailwind step convention
+// (0.5 = half a 4px step = 2px) so the numbers stay legible to consumers.
+export const space = {
+    px: "1px", // hairline — the 1px gap between rows in a dense nav list
+    "0.5": "2px",
+    "1": "4px",
+    "1.5": "6px",
+    "2": "8px",
+    "2.5": "10px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px", // overlay / empty-state padding
+};
+// Corner radius. sm/md/lg are the three Attio uses on stacked surfaces
+// (inputs, rows, tiles); full is the pill.
+export const radius = {
+    chip: "7px", // tag / chip corner — the single most used radius in Attio
+    sm: "6px", // chips, badges
+    md: "8px", // inputs, search box
+    lg: "9px", // rows, tiles, list items
+    xl: "12px", // overlay items (command rows)
+    "2xl": "16px", // overlay panels (command surface)
+    full: "999px", // pills
+};
+// Component sizing — recurring measured dimensions that are neither spacing nor
+// radius (row height, header height, the nav icon box).
+export const size = {
+    icon: "16px", // nav / control glyph box
+    chip: "22px", // tag / chip height — Attio's most repeated small control
+    row: "28px", // nav item · search · control height
+    menuRow: "32px", // overlay row: menu item, select option, bulk-bar button
+    tableRow: "36px", // data-grid row height
+    tableHeader: "40px", // data-grid header row height
+    header: "48px", // workspace-switcher header height
+    calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
+    calendarPill: "42px", // round day highlight inside a calendar cell
+};
+// Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
+// collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
+// weights are 400/500/600 with 500 the UI default.
+export const font = {
+    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+};
+export const text = {
+    xs: "11px",
+    sm: "12px",
+    md: "13px",
+    lg: "14px", // default body / nav-label size
+    xl: "16px",
+};
+export const weight = {
+    regular: "400",
+    medium: "500", // default UI weight
+    semibold: "600",
+    bold: "700", // seed-design's font-weight-bold, for the seed-styled calendar
+};

package/dist/esm/tokens/semantic.js

@@ -0,0 +1,54 @@
+export const semantic = {
+    bgBrandSolid: "brand600",
+    bgBrandSolidPressed: "brand700",
+    fgOnBrand: "white",
+    // text on a solid success/warning/danger fill. Those tone tokens BRIGHTEN in
+    // dark (they are tuned for tinted backgrounds and coloured text), so white on
+    // them drops to 2.42:1 -- dark ink clears AA on every tone in both themes.
+    fgOnTone: "ink",
+    bgSurface: "gray00",
+    bgRaised: "gray50",
+    borderDefault: "line200",
+    borderSubtle: "line100",
+    ringNeutral: "ringNeutral",
+    bgTileActive: "tileActive",
+    shadowTileActive: "tileActiveShadow",
+    bgOverlayFrost: "overlayFrost",
+    shadowOverlay1: "shadowOverlay1",
+    shadowOverlay2: "shadowOverlay2",
+    shadowOverlay3: "shadowOverlay3",
+    bgPopover: "popoverBg",
+    ringPopover: "ringPopover",
+    shadowPopover1: "shadowPopover1",
+    shadowPopover2: "shadowPopover2",
+    shadowPopover3: "shadowPopover3",
+    fgPrimary: "gray900",
+    fgMuted: "gray400",
+    bgDanger: "red600",
+    /** Fill for a SOLID destructive control that carries white text. */
+    bgDangerSolid: "red700",
+    /** The 2px ring a text field shows while focused. */
+    strokeFieldFocus: "fieldFocus",
+    /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */
+    fgDisabled: "disabledFg",
+    /** Weak neutral fill: the wheel's band, the calendar's today pill and range bridge. */
+    bgNeutralWeak: "neutralWeak",
+    /** The selected calendar day's fill, and the text on it. */
+    bgNeutralInverted: "neutralInverted",
+    fgOnNeutralInverted: "onNeutralInverted",
+    /** Weekday header row. */
+    fgNeutralSubtle: "neutralSubtle",
+    /** Date numerals. */
+    fgNeutralMuted: "neutralMuted",
+    /** Keyboard focus ring, for controls that show one inside themselves. */
+    strokeFocusRing: "focusRing",
+    bgSuccess: "green600",
+    bgWarning: "amber600",
+    bgOrange: "orange600",
+    bgCyan: "cyan600",
+    bgPurple: "purple600",
+    bgSidebar: "graySidebar",
+    // #fbfbfb — Attio's subtle raised fill; the active tab pill uses the same
+    // value as the sidebar, so it shares the palette entry under a neutral name.
+    bgSubtle: "graySidebar",
+};

package/dist/inbox.css

@@ -14,7 +14,7 @@
     & .inbox-tab[data-active] .inbox-tab-count { color: var(--bg-brand-solid); }
 
     & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1); display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-2) var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .inbox-row { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-2) var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .inbox-row:hover { background: var(--bg-raised); }
     & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
     & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -29,3 +29,11 @@
     & .inbox-empty-sub { font-size: var(--text-md); line-height: 18px; color: var(--fg-muted); max-width: 260px; }
     & .inbox-empty-action { margin-top: var(--space-2); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .inbox, .inbox * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/input.css

@@ -1,15 +1,43 @@
 .input {
-  box-sizing: border-box; display: inline-flex; width: 100%; font-family: var(--font-sans); font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary); background: var(--bg-surface); border: none; outline: none; box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow .15s; &::placeholder { color: var(--fg-muted); } &:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); } &:disabled { opacity: 0.5; cursor: not-allowed; }
+  
+    position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
+    width: 100%; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+    font-family: var(--font-sans); font-size: var(--text-lg); line-height: 20px;
+
+    &::after {
+      content: ""; position: absolute; inset: 0; border-radius: inherit;
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    &:focus-within::after { border-color: var(--stroke-field-focus); }
+
+    & .input-value {
+      box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
+      align-self: stretch; margin: 0; border: none; background: none; outline: none;
+      font: inherit; color: var(--fg-primary);
+    }
+    & .input-value::placeholder { color: var(--fg-muted); }
+    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.input-value:disabled) { opacity: 1; }
+  
 }
 .input--size_medium {
-  height: 32px; padding-inline: var(--space-2-5); border-radius: var(--radius-md);
+  height: 32px; border-radius: var(--radius-md); & .input-value { padding-inline: var(--space-2-5); }
 }
 .input--size_large {
-  height: 36px; padding-inline: var(--space-3); border-radius: 10px;
+  height: 36px; border-radius: 10px; & .input-value { padding-inline: var(--space-3); }
 }
 .input--invalid_true {
-  box-shadow: inset 0 0 0 1px var(--bg-danger); &:focus { box-shadow: inset 0 0 0 1px var(--bg-danger); }
+  &::after { border-color: var(--bg-danger); } &:focus-within::after { border-color: var(--bg-danger); }
 }
 .input--invalid_false {
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .input, .input * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/linechart.css

@@ -1,15 +1,15 @@
 .linechart {
-  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans);
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans); --linechart-yaxis-width: 34px;
     & .linechart-body { display: flex; flex: 1; min-height: 0; }
-    & .linechart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
-    & .linechart-ytick { position: absolute; right: var(--space-2); transform: translateY(50%); font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; }
+    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
+    & .linechart-ytick { position: absolute; inset-inline-end: var(--space-2); transform: translateY(50%); font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; }
     & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid var(--border-default); }
     & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-subtle); pointer-events: none; }
     & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
     & .linechart-area { fill: color-mix(in srgb, var(--bg-brand-solid) 12%, transparent); stroke: none; }
     & .linechart-line { fill: none; stroke: var(--bg-brand-solid); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
     & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--bg-surface); border: 2px solid var(--bg-brand-solid); transform: translate(-50%, 50%); pointer-events: auto; }
-    & .linechart-xaxis { display: flex; margin-top: var(--space-1-5); padding-left: 34px; }
+    & .linechart-xaxis { display: flex; margin-top: var(--space-1-5); padding-inline-start: var(--linechart-yaxis-width); }
     & .linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--fg-muted); }
-    & .linechart-axis-title { margin-top: var(--space-1); padding-left: 34px; text-align: center; font-size: var(--text-sm); color: var(--fg-muted); }
+    & .linechart-axis-title { margin-top: var(--space-1); padding-inline-start: var(--linechart-yaxis-width); text-align: center; font-size: var(--text-sm); color: var(--fg-muted); }
 }

package/dist/listpage.css

@@ -4,9 +4,9 @@
 
     & .listpage-toolbar { display: flex; align-items: center; gap: var(--space-2); height: 52px; flex-shrink: 0; padding: 0 var(--space-3); }
     & .listpage-toolbar-lead { display: flex; align-items: center; gap: var(--space-2); }
-    & .listpage-count { margin-left: auto; font-size: var(--text-md); color: var(--fg-muted); white-space: nowrap; }
+    & .listpage-count { margin-inline-start: auto; font-size: var(--text-md); color: var(--fg-muted); white-space: nowrap; }
     & .listpage-toolbar-trail { display: flex; align-items: center; gap: var(--space-2); }
-    & .listpage-count + .listpage-toolbar-trail { margin-left: var(--space-3); }
+    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: var(--space-3); }
 
     & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-3) var(--space-3); }
 
@@ -22,10 +22,18 @@
     & .listpage-group { display: flex; align-items: center; gap: var(--space-1-5); height: 36px; padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
     & .listpage-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); color: var(--fg-muted); }
 
-    & .listpage-row { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; height: 52px; padding: 0 var(--space-2); margin: 0; border: none; border-top: 1px solid var(--border-subtle); background: none; font-family: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .listpage-row { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; height: 52px; padding: 0 var(--space-2); margin: 0; border: none; border-top: 1px solid var(--border-subtle); background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .listpage-row:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: -2px; }
     & .listpage-row:hover { background: color-mix(in srgb, var(--fg-primary) 3%, transparent); }
     & .listpage-row-title { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
 
     & .listpage-empty { padding: var(--space-8) var(--space-4); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .listpage, .listpage * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/menu.css

@@ -6,8 +6,8 @@
     & .menu-content {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-px);
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--space-1);
-      border-radius: var(--radius-xl); background: var(--bg-surface);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+      border-radius: var(--radius-xl); background: var(--bg-popover);
+      box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .menu-content[data-align="end"] { transform-origin: top right; }
@@ -16,9 +16,9 @@
     & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
     & .menu-item {
-      box-sizing: border-box; display: flex; align-items: center; gap: var(--space-1-5); width: 100%; height: 32px; flex-shrink: 0;
+      box-sizing: border-box; display: flex; align-items: center; gap: var(--space-1-5); width: 100%; height: var(--size-menuRow); flex-shrink: 0;
       margin: 0; padding: 0 var(--space-2); border: none; background: none; border-radius: var(--radius-md);
-      font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: left; cursor: pointer; white-space: nowrap;
+      font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: start; cursor: pointer; white-space: nowrap;
     }
     & .menu-item svg { flex-shrink: 0; color: var(--fg-muted); }
     & .menu-item:focus { outline: none; }
@@ -28,7 +28,7 @@
     & .menu-item--danger svg { color: var(--bg-danger); }
     & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
     & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .menu-item-shortcut { flex-shrink: 0; margin-left: var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); letter-spacing: 0.02em; }
+    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); letter-spacing: 0.02em; }
     & .menu-item-check { flex-shrink: 0; color: var(--bg-brand-solid); }
     & .menu-item-check--placeholder { width: 15px; }
 
@@ -36,3 +36,11 @@
     & .menu-label { padding: var(--space-1-5) var(--space-2) var(--space-0-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .menu, .menu * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}