@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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/index.d.ts

@@ -1,2 +1,2 @@
-export { Sidebar, type SidebarProps } from "./sidebar";
+export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
 export { sidebarRecipe } from "./sidebar.recipe";

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

@@ -1,11 +1,104 @@
 import * as React from "react";
+import type { AvatarProps } from "../../components/avatar";
+type IconProps = {
+    className?: string;
+};
+/** A row in the main nav, or in a section's item list (Chats, etc). */
+export type SidebarNavItem = {
+    label: string;
+    /** 16px icon component, rendered `<Icon />`. */
+    icon: React.ComponentType<IconProps>;
+    active?: boolean;
+    trailing?: React.ReactNode;
+};
+/** A row in the Records section — rendered as a tinted 20px glyph avatar. */
+export type SidebarRecordItem = {
+    label: string;
+    tone: NonNullable<AvatarProps["tone"]>;
+    /** 12px glyph, rendered `<Glyph />` inside the tone avatar. */
+    glyph: React.ComponentType;
+};
+/** The workspace switcher at the top of the sidebar. */
+export type SidebarWorkspace = {
+    name: string;
+    /** Avatar initial/letter. */
+    avatarLabel: string;
+    avatarTone?: NonNullable<AvatarProps["tone"]>;
+};
+/** A collapsible section built from nav-item rows (main nav shape is used, less the divider). */
+export type SidebarSection = {
+    label: string;
+    items: SidebarNavItem[];
+};
+/** The Records section — same shape as SidebarSection but with glyph-avatar rows. */
+export type SidebarRecordsSection = {
+    label: string;
+    items: SidebarRecordItem[];
+};
+/** The Lists section — has no item list of its own, just the "+ New list" affordance. */
+export type SidebarListsSection = {
+    label: string;
+    newListLabel: string;
+};
+/** Footer copy: the onboarding pill, the invite row, and the trial banner. */
+export type SidebarFooter = {
+    gettingStartedLabel: string;
+    inviteLabel: string;
+    trialText: string;
+    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;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 };
+/** The measured Attio workspace switcher — the default `workspace` prop. */
+export declare const ATTIO_SIDEBAR_WORKSPACE: SidebarWorkspace;
+/** The measured Attio main nav — the default `items` prop. */
+export declare const ATTIO_SIDEBAR_ITEMS: SidebarNavItem[];
+/** The measured Attio Records section — the default `recordsSection` prop. */
+export declare const ATTIO_SIDEBAR_RECORDS_SECTION: SidebarRecordsSection;
+/** The measured Attio Lists section — the default `listsSection` prop. */
+export declare const ATTIO_SIDEBAR_LISTS_SECTION: SidebarListsSection;
+/** The measured Attio Chats section — the default `chatsSection` prop. */
+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;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 } & React.RefAttributes<HTMLDivElement>>;
+export {};

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,24 +4,47 @@ export declare const contract: MapLeafNodes<{
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
     fgOnBrand: "white";
+    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";
+    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";
@@ -23,6 +27,54 @@ export declare const palette: {
         readonly light: "#eeeff1";
         readonly dark: "#1c1d1f";
     };
+    readonly ringNeutral: {
+        readonly light: "transparent";
+        readonly dark: "#212224";
+    };
+    readonly tileActive: {
+        readonly light: "#ffffff";
+        readonly dark: "#101112";
+    };
+    readonly tileActiveShadow: {
+        readonly light: "rgba(0,0,0,0.04)";
+        readonly dark: "rgba(0,0,0,0)";
+    };
+    readonly overlayFrost: {
+        readonly light: "#ffffff";
+        readonly dark: "#1c1d1f";
+    };
+    readonly shadowOverlay1: {
+        readonly light: "rgba(28,40,64,0.12)";
+        readonly dark: "rgba(0,0,0,0.48)";
+    };
+    readonly shadowOverlay2: {
+        readonly light: "rgba(28,40,64,0.16)";
+        readonly dark: "rgba(0,0,0,0.64)";
+    };
+    readonly shadowOverlay3: {
+        readonly light: "rgba(28,40,64,0.16)";
+        readonly dark: "rgba(0,0,0,0)";
+    };
+    readonly popoverBg: {
+        readonly light: "#ffffff";
+        readonly dark: "#17181a";
+    };
+    readonly ringPopover: {
+        readonly light: "rgba(0,0,0,0)";
+        readonly dark: "#212224";
+    };
+    readonly shadowPopover1: {
+        readonly light: "rgba(28,40,64,0.04)";
+        readonly dark: "rgba(0,0,0,0.16)";
+    };
+    readonly shadowPopover2: {
+        readonly light: "rgba(28,40,64,0.12)";
+        readonly dark: "rgba(0,0,0,0.24)";
+    };
+    readonly shadowPopover3: {
+        readonly light: "rgba(24,41,75,0.16)";
+        readonly dark: "rgba(0,0,0,0.32)";
+    };
     readonly gray400: {
         readonly light: "#71717a";
         readonly dark: "#9a9aa2";
@@ -39,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,18 +2,49 @@ export declare const semantic: {
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
     fgOnBrand: "white";
+    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";
+    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-surface); color: var(--fg-primary);
-      box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); }
+    & .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;
+  }
+}

package/dist/wheelpicker.css

@@ -0,0 +1,68 @@
+.wheelpicker {
+  
+    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
+    background: var(--bg-surface); font-family: var(--font-sans);
+
+    /* the band the selected row sits in; behind the items, never hit-tested */
+    & .wheelpicker-indicator {
+      position: absolute; z-index: 0; inset-inline: var(--space-4); top: 50%;
+      transform: translateY(-50%); border-radius: var(--radius-md);
+      background: var(--bg-neutral-weak); pointer-events: none;
+    }
+
+    /* fades the rows furthest from the centre, so the column reads as a wheel
+       rather than a list. 40% of the viewport, capped, top and bottom. */
+    & .wheelpicker-fog {
+      position: relative; z-index: 1; height: 100%; overflow: hidden;
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--wheelpicker-fog),
+        #000 calc(100% - var(--wheelpicker-fog)),
+        transparent 100%
+      );
+    }
+    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+
+    & .wheelpicker-column {
+      box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
+      overflow-x: hidden; overflow-y: auto;
+      overscroll-behavior-y: contain; overscroll-behavior-x: none;
+      scroll-snap-type: y mandatory; touch-action: pan-y;
+      scrollbar-width: none; -ms-overflow-style: none; outline: none;
+      padding-block: var(--wheelpicker-offset);
+    }
+    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+
+    & .wheelpicker-item {
+      display: flex; align-items: center; justify-content: center;
+      scroll-snap-align: center; user-select: none; white-space: nowrap;
+      padding-inline: var(--space-4); color: var(--fg-disabled);
+      background: none; border: none; font: inherit; cursor: pointer;
+    }
+    & .wheelpicker-item[data-selected] { color: var(--fg-primary); }
+
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
+       a pointer user has just tapped the row they meant and does not need it */
+    & .wheelpicker-column:focus-visible .wheelpicker-item[data-selected] {
+      outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
+      border-radius: var(--radius-md);
+    }
+  
+}
+.wheelpicker--size_small {
+  
+        height: 180px; --wheelpicker-offset: 72px;
+        --wheelpicker-fog: min(40%, 108px);
+        & .wheelpicker-indicator { height: 36px; }
+        & .wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
+      
+}
+.wheelpicker--size_medium {
+  
+        height: 220px; --wheelpicker-offset: 88px;
+        --wheelpicker-fog: min(40%, 132px);
+        & .wheelpicker-indicator { height: 44px; }
+        & .wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
+      
+}

package/dist/wheelpicker.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface WheelpickerVariants {
+  size?: "small" | "medium";
+}
+
+export declare const wheelpickerRecipe: RecipeFn<{ size: { small: string; medium: string } }>;