@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/types/product/recordpage/recordpage.d.ts

@@ -5,12 +5,76 @@ export type RecordPageProps = {
     columns: Column[];
     /** Breadcrumb label + back button target (e.g. "Companies"). */
     collection?: string;
+    /** Partial override of the chrome strings; see `recordPageLabels`. */
+    labels?: RecordPageLabelsInput;
     onBack?: () => void;
     /** When provided, shows a maximise/minimise button in the top bar. */
     onToggleFull?: () => void;
     full?: boolean;
     className?: string;
 };
+/**
+ * Every chrome string RecordPage renders. Supplied as a PARTIAL map, so
+ * translating one control does not mean restating the other fifty; anything
+ * omitted keeps its English default from `recordPageLabels`.
+ *
+ * The record's own field labels and values are NOT here — those arrive through
+ * `record` and `columns`, and are the consumer's data. What this covers is the
+ * surface crisp draws around them: the tab strip, the Highlights stats (a fixed
+ * set measured from Attio, not consumer data), the action bar and the feed.
+ */
+export type RecordPageLabels = {
+    breadcrumb: string;
+    editRecord: string;
+    recordActions: string;
+    addToFavourites: string;
+    removeFromFavourites: string;
+    copyRecordLink: string;
+    deleteRecord: string;
+    linkRecords: string;
+    logANote: string;
+    createATask: string;
+    fullScreen: string;
+    exitFullScreen: string;
+    resizeDetails: string;
+    composeEmail: string;
+    askAttio: string;
+    addToList: string;
+    highlights: string;
+    recordDetails: string;
+    searchFields: string;
+    closeSearch: string;
+    searchPlaceholder: string;
+    viewAllValues: string;
+    setAValue: string;
+    viewAll: string;
+    showLess: string;
+    viewLess: string;
+    newNote: string;
+    newTask: string;
+    cancel: string;
+    noNotesYet: string;
+    noTasksYet: string;
+    nothingHereYet: string;
+    you: string;
+    justNow: string;
+    /** Tab names, keyed by tab. */
+    tabs: Record<"overview" | "activity" | "emails" | "calls" | "team" | "lists" | "notes" | "tasks" | "files", string>;
+    /** Highlight stat names and their empty states, keyed by stat. */
+    highlightLabels: Record<"connectionStrength" | "nextInteraction" | "team" | "estimatedArr" | "fundingRaised" | "employeeRange" | "associatedDeals", string>;
+    highlightEmpty: Record<"connectionStrength" | "nextInteraction" | "team" | "estimatedArr" | "fundingRaised" | "employeeRange" | "associatedDeals", string>;
+    /** Activity line for a changed domain, given the new value. */
+    domainSetTo: (value: React.ReactNode) => React.ReactNode;
+    /** Activity line for added categories, given how many. */
+    taggedCategories: (count: number) => React.ReactNode;
+};
+export declare const recordPageLabels: RecordPageLabels;
+/** Partial override of any chrome string; the keyed maps nest. */
+export type RecordPageLabelsInput = Partial<Omit<RecordPageLabels, "tabs" | "highlightLabels" | "highlightEmpty">> & {
+    tabs?: Partial<RecordPageLabels["tabs"]>;
+    highlightLabels?: Partial<RecordPageLabels["highlightLabels"]>;
+    highlightEmpty?: Partial<RecordPageLabels["highlightEmpty"]>;
+};
 /**
  * The full-page company record view — the page Attio opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
@@ -19,7 +83,7 @@ export type RecordPageProps = {
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export declare function RecordPage({ record, columns, collection, onBack, onToggleFull, full, className, }: RecordPageProps): React.JSX.Element;
+export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

package/dist/types/product/recordpanel/recordpanel.d.ts

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { type Column, type Row } from "../recordstable";
-export type RecordPanelProps = {
+export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title"> & {
     /** The record to show; render nothing when null. */
+    /** Label for the close control. */
+    closeLabel?: string;
+    /** Heading above the field list. */
+    detailsLabel?: React.ReactNode;
+    /** Shown in place of a field that has no value. */
+    emptyLabel?: React.ReactNode;
     record: Row | null;
     columns: Column[];
     onClose: () => void;
@@ -13,7 +19,7 @@ export type RecordPanelProps = {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, columns, onClose, className, closeLabel, detailsLabel, emptyLabel, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }

package/dist/types/product/recordstable/recordstable.d.ts

@@ -18,6 +18,9 @@ export type Column = {
     key: string;
     label: string;
     type?: ColumnType;
+    /** Mark the column's values as AI-enriched — tints the cells the way Attio
+     *  washes enriched values (#9b69ff at 4%). */
+    enriched?: boolean;
     icon?: IconType;
     width?: number;
     /** Currency symbol for `currency` columns (default "$"). */
@@ -71,6 +74,8 @@ export type Row = {
     id: string;
 } & Record<string, any>;
 export type RecordsTableProps = {
+    /** Partial override of the chrome strings; see `recordsTableLabels`. */
+    labels?: RecordsTableLabelsInput;
     columns?: Column[];
     rows?: Row[];
     /** Controlled selection — omit for self-managed selection state. */
@@ -92,6 +97,90 @@ export type RecordsTableProps = {
     className?: string;
 };
 export declare function tagTone(t: string): string;
+type Agg = "none" | "count" | "filled" | "sum" | "avg" | "min" | "max";
+/**
+ * Every chrome string RecordsTable renders. Supplied as a PARTIAL map, so
+ * translating one menu item does not mean restating the other fifty; anything
+ * omitted keeps its English default from `recordsTableLabels`.
+ *
+ * The interpolated ones are formatters rather than templates because word
+ * order does not survive translation — "Sorted by Name +2" has no stable
+ * arrangement of its parts across languages (the same reason TableToolbar's
+ * triggers take formatters, #77).
+ */
+export type RecordsTableLabels = {
+    selectAll: string;
+    sort: string;
+    sortField: string;
+    sortDirection: string;
+    removeSort: string;
+    reorderSort: string;
+    addSort: string;
+    ascending: string;
+    descending: string;
+    noSorts: string;
+    learnSorting: string;
+    filter: string;
+    addFilter: string;
+    filterByField: string;
+    filterByPlaceholder: string;
+    filterValuePlaceholder: string;
+    selectCondition: string;
+    clearFilter: string;
+    addColumn: string;
+    columnLabel: string;
+    editColumnLabel: string;
+    hideFromView: string;
+    moveLeft: string;
+    moveRight: string;
+    sortAscending: string;
+    sortDescending: string;
+    newRecord: string;
+    createRecord: string;
+    createMore: string;
+    newButton: string;
+    more: string;
+    moreActions: string;
+    recordActions: string;
+    copy: string;
+    duplicate: string;
+    addToList: string;
+    inAList: string;
+    delete: string;
+    sendEmail: string;
+    exportCsv: string;
+    runWorkflow: string;
+    calculate: string;
+    emptyPlaceholder: string;
+    setRecordPlaceholder: string;
+    noRecords: string;
+    untitled: string;
+    /** Aggregation names, keyed by the aggregation. */
+    agg: Record<Agg, string>;
+    /** Filter operator names, keyed by the operator. */
+    op: Record<FilterOp, string>;
+    /** Title of the create dialog, given the entity column's label. */
+    newRecordTitle: (entity: string) => string;
+    /** Placeholder for a create-dialog field, given the field's label. */
+    setFieldPlaceholder: (field: string) => string;
+    /** Label for a newly added column, given how many columns exist. */
+    newColumnLabel: (index: number) => string;
+    /** The sort trigger, given the first sorted column and how many more. */
+    sortedBy: (first: string, extra: number) => string;
+    /** The filter trigger, given how many filters are active. */
+    filterCount: (active: number) => string;
+    /** The row count under the table. */
+    recordCount: (n: number) => string;
+    /** Heading above a filter chip's condition editor. */
+    conditionTitle: (field: string) => string;
+};
+export declare const recordsTableLabels: RecordsTableLabels;
+/** Partial override of any chrome string; the two keyed maps nest. */
+export type RecordsTableLabelsInput = Partial<Omit<RecordsTableLabels, "agg" | "op">> & {
+    agg?: Partial<Record<Agg, string>>;
+    op?: Partial<Record<FilterOp, string>>;
+};
+type FilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
 /**
  * Attio-style record grid — fully featured. Toolbar (search / sort status /
  * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
@@ -100,7 +189,7 @@ export declare function tagTone(t: string): string;
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-export declare function RecordsTable({ columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, className, }: RecordsTableProps): React.JSX.Element;
+export declare function RecordsTable({ labels, columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, className, }: RecordsTableProps): React.JSX.Element;
 export declare const defaultColumns: Column[];
 export declare const defaultRows: Row[];
 export {};

package/dist/types/product/recordstable/recordstable.tag.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The record tag/chip, measured from Attio: 22px tall, `padding: 0 4px`,
+ * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
+ * tone's colour.
+ *
+ * Shared because RecordsTable and RecordPanel render the *same* chip. It used
+ * to be pasted into both recipes, and the two copies had already started to
+ * drift — adding the measured inset ring meant patching the same rules twice.
+ */
+export declare const recordTagCss: string;

package/dist/types/product/richtext/richtext.d.ts

@@ -4,6 +4,10 @@ export type RichTextValue = {
     html: string;
 };
 export type RichTextEditorProps = {
+    /** Accessible name for the title field. */
+    titleLabel?: string;
+    /** Accessible name for the body editor. */
+    bodyLabel?: string;
     defaultTitle?: string;
     /** Initial body HTML. */
     defaultHtml?: string;
@@ -18,7 +22,7 @@ export type RichTextEditorProps = {
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, }: RichTextEditorProps): React.JSX.Element;
 export declare namespace RichTextEditor {
     var displayName: string;
 }

package/dist/types/product/settingssection/settingssection.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export type SettingsSectionProps = {
+export type SettingsSectionProps = Omit<React.ComponentPropsWithoutRef<"section">, "title"> & {
     title: React.ReactNode;
     description?: React.ReactNode;
     /** Trailing action on the title row (e.g. a Button). */
@@ -12,7 +12,7 @@ export type SettingsSectionProps = {
  * subtitle and trailing action, then a gapped stack of rows (pair with
  * FormField). Compose several inside a settings content pane.
  */
-export declare function SettingsSection({ title, description, action, children, className, }: SettingsSectionProps): React.JSX.Element;
+export declare function SettingsSection({ title, description, action, children, className, ...rest }: SettingsSectionProps): React.JSX.Element;
 export declare namespace SettingsSection {
     var displayName: string;
 }

package/dist/types/product/settingsshell/settingsshell.d.ts

@@ -9,8 +9,12 @@ export type SettingsNavGroup = {
     label?: React.ReactNode;
     items: SettingsNavItem[];
 };
-export type SettingsShellProps = {
+export type SettingsShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "onSelect"> & {
     /** Back-header title (default "Settings"). */
+    /** Accessible name for the settings nav. */
+    navLabel?: string;
+    /** Shown when the search matches nothing. */
+    emptyLabel?: React.ReactNode;
     title?: React.ReactNode;
     onBack?: () => void;
     groups: SettingsNavGroup[];
@@ -28,7 +32,7 @@ export type SettingsShellProps = {
  * search, grouped items) beside a scrolling content pane. The search filters the
  * nav by label. Fills the height its container gives it.
  */
-export declare function SettingsShell({ title, onBack, groups, activeItem, onSelect, searchable, searchPlaceholder, children, className, }: SettingsShellProps): React.JSX.Element;
+export declare function SettingsShell({ title, onBack, groups, activeItem, onSelect, searchable, searchPlaceholder, children, className, navLabel, emptyLabel, ...rest }: SettingsShellProps): React.JSX.Element;
 export declare namespace SettingsShell {
     var displayName: string;
 }

package/dist/types/product/sidebar/sidebar.d.ts

@@ -48,6 +48,10 @@ export type SidebarFooter = {
     trialActionLabel: string;
 };
 export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
+    /** Label for the collapse control. */
+    collapseLabel?: string;
+    /** Label for the inbox quick-action. */
+    inboxLabel?: string;
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;
@@ -77,6 +81,10 @@ export declare const ATTIO_SIDEBAR_CHATS_SECTION: SidebarSection;
 /** The measured Attio footer copy — the default `footer` prop. */
 export declare const ATTIO_SIDEBAR_FOOTER: SidebarFooter;
 export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    /** Label for the collapse control. */
+    collapseLabel?: string;
+    /** Label for the inbox quick-action. */
+    inboxLabel?: string;
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;

package/dist/types/product/tasklist/tasklist.d.ts

@@ -15,6 +15,10 @@ export type TaskGroup = {
     tasks: Task[];
 };
 export type TaskListProps = {
+    /** Label for a task's checkbox while the task is open. */
+    completeLabel?: string;
+    /** Label for a task's checkbox once it is done. */
+    incompleteLabel?: string;
     /** Flat list of tasks (use `groups` for grouped sections). */
     tasks?: Task[];
     /** Grouped sections, each with a header + count. */
@@ -30,7 +34,7 @@ export type TaskListProps = {
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */
-export declare function TaskList({ tasks, groups, onToggle, emptyLabel, className, }: TaskListProps): React.JSX.Element;
+export declare function TaskList({ tasks, groups, onToggle, emptyLabel, className, completeLabel, incompleteLabel, }: TaskListProps): React.JSX.Element;
 export declare namespace TaskList {
     var displayName: string;
 }

package/dist/types/product/trialbanner/trialbanner.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export type TrialBannerProps = {
+export type TrialBannerProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title"> & {
     /** Leading icon. */
     icon?: React.ReactNode;
     /** The message (children). */
@@ -15,7 +15,7 @@ export type TrialBannerProps = {
  * A compact trial / upgrade banner — measured from Attio's sidebar footer.
  * Icon + message + an optional small action pill (soft-glow outlined button).
  */
-export declare function TrialBanner({ icon, children, action, onAction, tone, className, }: TrialBannerProps): React.JSX.Element;
+export declare function TrialBanner({ icon, children, action, onAction, tone, className, ...rest }: TrialBannerProps): React.JSX.Element;
 export declare namespace TrialBanner {
     var displayName: string;
 }

package/dist/types/product/viewtoggle/viewtoggle.d.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 export type ViewToggleOption<T extends string = string> = {
     value: T;
     /** Icon shown in the tile. */
@@ -6,10 +6,16 @@ export type ViewToggleOption<T extends string = string> = {
     /** Accessible label. */
     label: string;
 };
-export type ViewToggleProps<T extends string = string> = {
+export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> & {
     options: ViewToggleOption<T>[];
-    value: T;
-    onChange: (value: T) => void;
+    /** Controlled value. Omit to let ViewToggle manage it (see defaultValue). */
+    value?: T;
+    /** Initially selected value, when uncontrolled. Defaults to the first option. */
+    defaultValue?: T;
+    /** Fires with the next value on every pick, controlled or not.
+     * Named `onChange` rather than the house `onValueChange` for historical
+     * reasons; renaming it would break consumers. */
+    onChange?: (value: T) => void;
     "aria-label"?: string;
     className?: string;
 };
@@ -18,7 +24,7 @@ export type ViewToggleProps<T extends string = string> = {
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export declare function ViewToggle<T extends string = string>({ options, value, onChange, "aria-label": ariaLabel, className, }: ViewToggleProps<T>): React.JSX.Element;
+export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
 export declare namespace ViewToggle {
     var displayName: string;
 }

package/dist/types/tokens/contract.d.ts

@@ -4,6 +4,7 @@ export declare const contract: MapLeafNodes<{
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
     fgOnBrand: "white";
+    fgOnTone: "ink";
     bgSurface: "gray00";
     bgRaised: "gray50";
     borderDefault: "line200";
@@ -23,17 +24,27 @@ export declare const contract: MapLeafNodes<{
     fgPrimary: "gray900";
     fgMuted: "gray400";
     bgDanger: "red600";
+    bgDangerSolid: "red700";
+    strokeFieldFocus: "fieldFocus";
+    fgDisabled: "disabledFg";
+    bgNeutralWeak: "neutralWeak";
+    bgNeutralInverted: "neutralInverted";
+    fgOnNeutralInverted: "onNeutralInverted";
+    fgNeutralSubtle: "neutralSubtle";
+    fgNeutralMuted: "neutralMuted";
+    strokeFocusRing: "focusRing";
     bgSuccess: "green600";
     bgWarning: "amber600";
     bgOrange: "orange600";
     bgCyan: "cyan600";
     bgPurple: "purple600";
     bgSidebar: "graySidebar";
+    bgSubtle: "graySidebar";
 }, `var(--${string})`> & {
     space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
-    radius: Record<"2xl" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;
-    size: Record<"header" | "icon" | "row" | "tableRow", `var(--${string})`>;
+    radius: Record<"2xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;
+    size: Record<"calendarCell" | "calendarPill" | "chip" | "header" | "icon" | "menuRow" | "row" | "tableHeader" | "tableRow", `var(--${string})`>;
     font: Record<"sans", `var(--${string})`>;
     text: Record<"lg" | "md" | "sm" | "xl" | "xs", `var(--${string})`>;
-    weight: Record<"medium" | "regular" | "semibold", `var(--${string})`>;
+    weight: Record<"bold" | "medium" | "regular" | "semibold", `var(--${string})`>;
 };

package/dist/types/tokens/elevation.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 declare 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.
+     */
+    readonly floating: `inset 0 0 0 1px var(--${string}), 0 0 0 1px var(--${string}), 0 4px 8px -4px var(--${string}), 0 4px 12px -2px var(--${string})`;
+    /**
+     * 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.
+     */
+    readonly modal: `0 8px 28px -6px var(--${string}), 0 18px 88px -4px var(--${string}), 0 0 1px var(--${string})`;
+    /**
+     * 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`.
+     */
+    readonly field: `inset 0 0 0 1px var(--${string}), 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.
+     */
+    readonly fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+};
+export type ElevationKey = keyof typeof elevation;

package/dist/types/tokens/index.d.ts

@@ -1,4 +1,5 @@
 export { contract, type Theme } from "./contract";
+export { type ElevationKey, elevation } from "./elevation";
 export { palette } from "./palette";
 export { type FontKey, font, type RadiusKey, radius, type SizeKey, type SpaceKey, size, space, type TextKey, text, type WeightKey, weight, } from "./scale";
 export type { Tokens } from "./semantic";

package/dist/types/tokens/palette.d.ts

@@ -7,6 +7,10 @@ export declare const palette: {
         readonly light: "#ffffff";
         readonly dark: "#ffffff";
     };
+    readonly ink: {
+        readonly light: "#101112";
+        readonly dark: "#101112";
+    };
     readonly gray50: {
         readonly light: "#f4f4f5";
         readonly dark: "#101112";
@@ -87,6 +91,42 @@ export declare const palette: {
         readonly light: "#e5484d";
         readonly dark: "#ff5a5f";
     };
+    readonly red700: {
+        readonly light: "#ba2525";
+        readonly dark: "#ba2525";
+    };
+    readonly fieldFocus: {
+        readonly light: "#1a1c20";
+        readonly dark: "#f3f4f5";
+    };
+    readonly disabledFg: {
+        readonly light: "#d1d3d8";
+        readonly dark: "#5b606a";
+    };
+    readonly neutralWeak: {
+        readonly light: "#f3f4f5";
+        readonly dark: "#1d2025";
+    };
+    readonly neutralInverted: {
+        readonly light: "#2a3038";
+        readonly dark: "#f3f4f5";
+    };
+    readonly onNeutralInverted: {
+        readonly light: "#ffffff";
+        readonly dark: "#16171b";
+    };
+    readonly neutralSubtle: {
+        readonly light: "#868b94";
+        readonly dark: "#b0b3ba";
+    };
+    readonly neutralMuted: {
+        readonly light: "#555d6d";
+        readonly dark: "#dcdee3";
+    };
+    readonly focusRing: {
+        readonly light: "#1e82eb";
+        readonly dark: "#5e98fe";
+    };
     readonly green600: {
         readonly light: "#1f9d57";
         readonly dark: "#2ea968";

package/dist/types/tokens/scale.d.ts

@@ -12,6 +12,7 @@ export declare const space: {
     readonly "8": "32px";
 };
 export declare const radius: {
+    readonly chip: "7px";
     readonly sm: "6px";
     readonly md: "8px";
     readonly lg: "9px";
@@ -21,9 +22,14 @@ export declare const radius: {
 };
 export declare const size: {
     readonly icon: "16px";
+    readonly chip: "22px";
     readonly row: "28px";
+    readonly menuRow: "32px";
     readonly tableRow: "36px";
+    readonly tableHeader: "40px";
     readonly header: "48px";
+    readonly calendarCell: "48px";
+    readonly calendarPill: "42px";
 };
 export declare const font: {
     readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
@@ -39,6 +45,7 @@ export declare const weight: {
     readonly regular: "400";
     readonly medium: "500";
     readonly semibold: "600";
+    readonly bold: "700";
 };
 export type SpaceKey = keyof typeof space;
 export type RadiusKey = keyof typeof radius;

package/dist/types/tokens/semantic.d.ts

@@ -2,6 +2,7 @@ export declare const semantic: {
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
     fgOnBrand: "white";
+    fgOnTone: "ink";
     bgSurface: "gray00";
     bgRaised: "gray50";
     borderDefault: "line200";
@@ -21,11 +22,29 @@ export declare const semantic: {
     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";
+    bgSubtle: "graySidebar";
 };
 export type Tokens = typeof semantic;

package/dist/viewtoggle.css

@@ -5,9 +5,17 @@
 
     & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
       padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted);
-      cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+      font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
     & .viewtoggle-tile:hover { color: var(--fg-primary); }
     & .viewtoggle-tile[data-active] { background: var(--bg-tile-active); color: var(--fg-primary);
       box-shadow: 0 1px 2px -1px var(--shadow-tile-active); }
     & .viewtoggle-tile:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .viewtoggle, .viewtoggle * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}