@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -1,6 +1,7 @@
 import { toolbarChromeBody, toolbarChromeHead, } from "../../components/tabletoolbar/tabletoolbar.chrome.js";
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
+import { recordTagCss } from "./recordstable.tag.js";
 // Attio's record grid, measured: 36px rows, 1px borderSubtle (#eeeff1) grid
 // lines on BOTH axes, sticky checkbox + entity (first) columns, entity = 16px
 // avatar + 14px/500 name, 28px toolbar controls, a floating bulk-action bar.
@@ -30,13 +31,13 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, ${c.fgPrimary} 34%, transparent); background-clip: padding-box; }
     & .recordstable-scroll::-webkit-scrollbar-corner { background: transparent; }
     & .recordstable-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
-    & .recordstable-th, & .recordstable-td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-right: 1px solid ${c.borderSubtle}; text-align: left; white-space: nowrap; overflow: hidden; }
-    & .recordstable-th { position: sticky; top: 0; z-index: 2; height: 40px; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgPrimary}; user-select: none; }
-    & .recordstable-scroll[data-scrolled-y] .recordstable-th { box-shadow: 0 1px 0 ${c.borderDefault}, 0 6px 12px -8px rgba(28,40,64,0.18); }
-    & .recordstable-th-inner { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
+    & .recordstable-th, & .recordstable-td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; white-space: nowrap; overflow: hidden; }
+    & .recordstable-th { position: sticky; top: 0; z-index: 2; padding: 0; height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+    & .recordstable-th-inner { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; }
     & .recordstable-th-inner svg { flex-shrink: 0; color: color-mix(in srgb, ${c.fgPrimary} 45%, transparent); }
     & .recordstable-th-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
     & .recordstable-th-rename { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; outline: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
+    & .recordstable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .recordstable-sort { flex-shrink: 0; opacity: 0.4; transition: opacity .12s; color: color-mix(in srgb, ${c.fgPrimary} 45%, transparent); }
     & .recordstable-th:hover .recordstable-sort, & .recordstable-th[data-sorted] .recordstable-sort { opacity: 1; }
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
@@ -72,21 +73,14 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-cell { display: flex; align-items: center; gap: ${c.space["2"]}; height: 100%; min-width: 0; }
     & .recordstable-cell--num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
     & .recordstable-cell--tags { gap: ${c.space["1"]}; }
-    & .recordstable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    ${recordTagCss}
     & .recordstable-muted { color: ${c.fgMuted}; }
     & .recordstable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; text-decoration: none; }
     & .recordstable-entity:hover .recordstable-entity-name { text-decoration: underline; }
     & .recordstable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & button.recordstable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; max-width: 100%; }
+    & button.recordstable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .recordstable-fav { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
-    & .recordstable-open { position: absolute; right: ${c.space["1"]}; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgMuted}; cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; z-index: 3; }
+    & .recordstable-open { position: absolute; inset-inline-end: ${c.space["1"]}; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; z-index: 3; }
     & .recordstable-open:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & tbody tr:hover .recordstable-open { opacity: 1; }
     & .recordstable-link { color: ${c.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
@@ -94,20 +88,26 @@ ${toolbarChromeBody("recordstable")}
 
     /* inline edit input */
     & .recordstable-edit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; z-index: 5; }
-    & .recordstable-edit--num { text-align: right; font-variant-numeric: tabular-nums; }
+    & .recordstable-edit--num { text-align: end; font-variant-numeric: tabular-nums; }
 
     /* selection / hover / sticky */
     & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
     & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
     & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: ${c.bgSurface}; }
     & .recordstable-col-check { left: 0; }
-    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -24px 0 0); transition: box-shadow .18s ease; }
+    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
     & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
-    & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 10px 0 16px -10px rgba(28,40,64,0.16), 2px 0 3px -2px rgba(28,40,64,0.10); }
-    & tbody tr:hover .recordstable-td { background: color-mix(in srgb, ${c.fgPrimary} 3%, ${c.bgSurface}); }
-    & tbody tr[data-selected] .recordstable-td { background: color-mix(in srgb, ${c.bgBrandSolid} 6%, ${c.bgSurface}); }
-    & .recordstable-th:last-child, & .recordstable-td:last-child { border-right: none; }
+    & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* AI-enriched values carry a purple wash. Measured from Attio:
+       a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
+       whatever row-state background the cell already has, which is why it
+       is an ::after and not a background. */
+    & .recordstable-td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${c.bgPurple} 4%, transparent); }
+    & tbody tr:hover .recordstable-td { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
+    & tbody tr[data-selected] .recordstable-td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
+    & tbody tr[data-selected]:hover .recordstable-td { background: color-mix(in srgb, ${c.fgPrimary} 4%, color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface})); }
+    & .recordstable-th:last-child, & .recordstable-td:last-child { border-inline-end: none; }
 
     /* add-row footer */
     & .recordstable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; }
@@ -116,15 +116,15 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${c.space["8"]} ${c.space["4"]}; }
 
     /* summary footer — per-column aggregation, sticky to the bottom */
-    & .recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-right: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
+    & .recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
     & tfoot .recordstable-col-check, & tfoot .recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
-    & .recordstable-sum:last-child { border-right: none; }
+    & .recordstable-sum:last-child { border-inline-end: none; }
     & .recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${c.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }
     & .recordstable-sum-btn:hover { background: ${c.bgRaised}; }
     & .recordstable-sum-label { color: color-mix(in srgb, ${c.fgPrimary} 45%, transparent); text-transform: capitalize; }
     & .recordstable-sum-value { color: ${c.fgPrimary}; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
     & .recordstable-sumgroup { width: 100%; height: 100%; }
-    & .recordstable-pin { flex-shrink: 0; margin-left: ${c.space["1"]}; color: ${c.bgWarning}; fill: color-mix(in srgb, ${c.bgWarning} 35%, transparent); }
+    & .recordstable-pin { flex-shrink: 0; margin-inline-start: ${c.space["1"]}; color: ${c.bgWarning}; fill: color-mix(in srgb, ${c.bgWarning} 35%, transparent); }
     & .recordstable-sum-btn[data-empty] { opacity: 0; justify-content: flex-start; }
     & .recordstable-sum-btn[data-empty]:hover { opacity: 1; }
 

package/dist/esm/product/recordstable/recordstable.tag.js

@@ -0,0 +1,18 @@
+import { contract as c } from "../../tokens/index.js";
+/**
+ * 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 const recordTagCss = `& .recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
+    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgSuccess} 30%, transparent); }
+    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgWarning} 30%, transparent); }
+    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgDanger} 30%, transparent); }
+    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgPurple} 30%, transparent); }
+    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgCyan} 30%, transparent); }
+    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgOrange} 30%, transparent); }`;

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

@@ -9,7 +9,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, }) {
+export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", }) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -100,10 +100,10 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
     const keepSel = (e) => e.preventDefault();
     const tool = (key, label, icon, onClick) => (_jsx("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": !!active[key], "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
-    return (_jsxs("div", { className: richtextRecipe({ className }), children: [_jsx("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": "Title", "data-placeholder": titlePlaceholder, onInput: () => {
+    return (_jsxs("div", { className: richtextRecipe({ className }), children: [_jsx("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
                     emit();
-                } }), _jsx("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": "Note body", "data-placeholder": placeholder, onInput: () => {
+                } }), _jsx("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
                 }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink), _jsx("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));

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

@@ -19,16 +19,16 @@ const config = defineRecipe({
     & .rte-body h1 { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; margin-top: ${c.space["4"]}; }
     & .rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.2px; margin-top: ${c.space["3"]}; }
     & .rte-body h3 { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.semibold}; margin-top: ${c.space["2.5"]}; }
-    & .rte-body ul, & .rte-body ol { padding-left: ${c.space["5"]}; }
+    & .rte-body ul, & .rte-body ol { padding-inline-start: ${c.space["5"]}; }
     & .rte-body li { margin-top: ${c.space["1"]}; }
-    & .rte-body blockquote { padding-left: ${c.space["3"]}; border-left: 2px solid ${c.borderDefault}; color: ${c.fgMuted}; }
+    & .rte-body blockquote { padding-inline-start: ${c.space["3"]}; border-inline-start: 2px solid ${c.borderDefault}; color: ${c.fgMuted}; }
     & .rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${c.text.md}; padding: 1px ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
     & .rte-body a { color: ${c.bgBrandSolid}; text-decoration: underline; text-underline-offset: 2px; }
     & .rte-body strong { font-weight: ${c.weight.semibold}; }
 
     & .rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: ${c.space["0.5"]}; border-radius: ${c.radius.md}; background: #20242c; box-shadow: 0 8px 28px -6px rgba(0,0,0,0.36), 0 2px 6px -2px rgba(0,0,0,0.24); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .rte-toolbar { @starting-style { opacity: 0; } }
-    & .rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: rgba(255,255,255,0.86); cursor: pointer; transition: background-color .1s; }
+    & .rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: rgba(255,255,255,0.86); font-family: inherit; cursor: pointer; transition: background-color .1s; }
     & .rte-tool:hover { background: rgba(255,255,255,0.12); color: #fff; }
     & .rte-tool[data-active] { color: ${c.bgBrandSolid}; }
     & .rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255,255,255,0.16); }`,

package/dist/esm/product/settingssection/settingssection.js

@@ -5,7 +5,7 @@ import { settingssectionRecipe } from "./settingssection.recipe.js";
  * subtitle and trailing action, then a gapped stack of rows (pair with
  * FormField). Compose several inside a settings content pane.
  */
-export function SettingsSection({ title, description, action, children, className, }) {
-    return (_jsxs("section", { className: settingssectionRecipe({ className }), children: [_jsxs("div", { className: "settingssection-head", children: [_jsxs("div", { className: "settingssection-heading", children: [_jsx("div", { className: "settingssection-title", children: title }), description != null && (_jsx("div", { className: "settingssection-sub", children: description }))] }), action != null && (_jsx("div", { className: "settingssection-action", children: action }))] }), children != null && (_jsx("div", { className: "settingssection-body", children: children }))] }));
+export function SettingsSection({ title, description, action, children, className, ...rest }) {
+    return (_jsxs("section", { className: settingssectionRecipe({ className }), ...rest, children: [_jsxs("div", { className: "settingssection-head", children: [_jsxs("div", { className: "settingssection-heading", children: [_jsx("div", { className: "settingssection-title", children: title }), description != null && (_jsx("div", { className: "settingssection-sub", children: description }))] }), action != null && (_jsx("div", { className: "settingssection-action", children: action }))] }), children != null && (_jsx("div", { className: "settingssection-body", children: children }))] }));
 }
 SettingsSection.displayName = "SettingsSection";

package/dist/esm/product/settingsshell/settingsshell.js

@@ -7,7 +7,7 @@ import { settingsshellRecipe } from "./settingsshell.recipe.js";
  * search, grouped items) beside a scrolling content pane. The search filters the
  * nav by label. Fills the height its container gives it.
  */
-export function SettingsShell({ title = "Settings", onBack, groups, activeItem, onSelect, searchable = true, searchPlaceholder = "Search settings…", children, className, }) {
+export function SettingsShell({ title = "Settings", onBack, groups, activeItem, onSelect, searchable = true, searchPlaceholder = "Search settings…", children, className, navLabel = "Settings", emptyLabel = "No settings found", ...rest }) {
     const [query, setQuery] = React.useState("");
     const q = query.trim().toLowerCase();
     const filtered = q
@@ -18,6 +18,6 @@ export function SettingsShell({ title = "Settings", onBack, groups, activeItem,
         }))
             .filter((g) => g.items.length > 0)
         : groups;
-    return (_jsxs("div", { className: settingsshellRecipe({ className }), children: [_jsxs("nav", { className: "settingsshell-nav", "aria-label": "Settings", children: [_jsxs("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [_jsx(ChevronLeft, { size: 16, strokeWidth: 2 }), title] }), searchable && (_jsxs("div", { className: "settingsshell-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), _jsx("div", { className: "settingsshell-groups", children: filtered.length === 0 ? (_jsx("div", { className: "settingsshell-empty", children: "No settings found" })) : (filtered.map((g, gi) => (_jsxs("div", { className: "settingsshell-group", children: [g.label != null && (_jsx("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => (_jsxs("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, _jsx("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), _jsx("div", { className: "settingsshell-content", children: children })] }));
+    return (_jsxs("div", { className: settingsshellRecipe({ className }), ...rest, children: [_jsxs("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [_jsxs("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [_jsx(ChevronLeft, { size: 16, strokeWidth: 2 }), title] }), searchable && (_jsxs("div", { className: "settingsshell-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), _jsx("div", { className: "settingsshell-groups", children: filtered.length === 0 ? (_jsx("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => (_jsxs("div", { className: "settingsshell-group", children: [g.label != null && (_jsx("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => (_jsxs("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, _jsx("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), _jsx("div", { className: "settingsshell-content", children: children })] }));
 }
 SettingsShell.displayName = "SettingsShell";

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

@@ -8,12 +8,17 @@ const config = defineRecipe({
     base: `display: flex; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .settingsshell-nav { display: flex; flex-direction: column; width: 256px; flex-shrink: 0; min-height: 0; padding: ${c.space["3"]}; border-right: 1px solid ${c.borderSubtle}; }
+    & .settingsshell-nav { display: flex; flex-direction: column; width: 256px; flex-shrink: 0; min-height: 0; padding: ${c.space["3"]}; border-inline-end: 1px solid ${c.borderSubtle}; }
     & .settingsshell-back { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["1"]}; margin: 0 0 ${c.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; cursor: pointer; border-radius: ${c.radius.md}; }
     & .settingsshell-back svg { color: ${c.fgMuted}; }
     & .settingsshell-back:hover svg { color: ${c.fgPrimary}; }
 
     & .settingsshell-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 32px; margin-bottom: ${c.space["2"]}; padding: 0 ${c.space["2.5"]}; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgMuted}; }
+    /* The field box owns the ring, so focus has to move it -- the inner
+       input kills its own outline. Measured on Attio: a focused field's
+       input carries box-shadow: none while its wrapper carries
+       inset 0 0 0 1px #266df0. */
+    & .settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .settingsshell-search svg { flex-shrink: 0; }
     & .settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     & .settingsshell-search input::placeholder { color: ${c.fgMuted}; }
@@ -21,7 +26,7 @@ const config = defineRecipe({
     & .settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["2.5"]}; }
     & .settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
     & .settingsshell-group-label { padding: ${c.space["1"]} ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .settingsshell-item { display: flex; align-items: center; gap: ${c.space["2"]}; height: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .settingsshell-item { display: flex; align-items: center; gap: ${c.space["2"]}; height: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .settingsshell-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .settingsshell-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .settingsshell-item:hover { background: ${c.bgRaised}; }

package/dist/esm/product/sidebar/sidebar.js

@@ -81,7 +81,7 @@ export const ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return (_jsxs("button", { type: "button", className: "sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }));
 }
-export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
     const [commandOpen, setCommandOpen] = React.useState(false);
     React.useEffect(() => {
@@ -107,6 +107,6 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
             return next;
         });
     }, []);
-    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": "Collapse sidebar", onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "sidebar-search-label", children: "Search" }), _jsx("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": "Inbox", children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "sidebar-divider" }), _jsx("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), _jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) }), _jsxs("div", { className: "sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "sidebar-divider" }), _jsxs("div", { className: "sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "sidebar-search-label", children: "Search" }), _jsx("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "sidebar-divider" }), _jsx("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), _jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) }), _jsxs("div", { className: "sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "sidebar-divider" }), _jsxs("div", { className: "sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
 });
 Sidebar.displayName = "Sidebar";

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

@@ -1,8 +1,33 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "sidebar",
-    base: `box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: ${c.bgSidebar}; border-right: 1px solid ${c.borderSubtle}; padding: ${c.space["2"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .sidebar-section { display: flex; flex-direction: column; gap: ${c.space.px}; margin-top: ${c.space["2"]}; } & .sidebar-section[data-collapsed] { display: none; } & .sidebar-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; } & .sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; } & .sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; } & .sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); } & .sidebar-ws { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; padding: 0 ${c.space["2"]}; border-radius: ${c.radius.lg}; cursor: pointer; transition: background-color 0.16s; } & .sidebar-ws:hover { background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); } & .sidebar-ws-name { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .sidebar-ws-collapse { margin-left: auto; } & .sidebar-searchrow { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-top: ${c.space["2.5"]}; padding-right: ${c.space["2"]}; } & .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: ${c.space["0.5"]}; } & .sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; padding: ${c.space["1.5"]} ${c.space["2"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; } & .sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]} 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: 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); color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; text-align: left; cursor: pointer; transition: background-color 0.14s; } & .sidebar-search:hover { background: ${c.bgRaised}; } & .sidebar-search-label { flex: 1; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; } & .sidebar-search-kbd { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); font-size: ${c.text.xs}; } & .sidebar-pill { border-radius: ${c.radius.full}; align-self: center; width: auto; height: 32px; padding-inline: ${c.space["4"]}; } & .sidebar-divider { height: 0; border: none; border-top: 1px solid ${c.borderSubtle}; margin: ${c.space["2"]} calc(-1 * ${c.space["2"]}) 0; } & .sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: ${c.size.row}; border-radius: ${c.radius.md}; border: 1px dashed ${c.borderDefault}; background: transparent; color: ${c.fgMuted}; font-family: ${c.font.sans}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; } & .sidebar-newlist:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }`,
+    base: `box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: ${c.bgSidebar}
+  ; border-inline-end: 1px solid ${c.borderSubtle}
+  ; padding: ${c.space["2"]}
+  ; font-family: ${c.font.sans}
+  ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .sidebar-section { display: flex; flex-direction: column; gap: ${c.space.px}; margin-top: ${c.space["2"]}; }
+  & .sidebar-section[data-collapsed] { display: none; }
+  & .sidebar-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; }
+  & .sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
+  & .sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
+  & .sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
+  & .sidebar-ws { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; padding: 0 ${c.space["2"]}; border-radius: ${c.radius.lg}; cursor: pointer; transition: background-color 0.16s; }
+  & .sidebar-ws:hover { background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); }
+  & .sidebar-ws-name { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .sidebar-ws-collapse { margin-inline-start: auto; }
+  & .sidebar-searchrow { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-top: ${c.space["2.5"]}; padding-inline-end: ${c.space["2"]}; }
+  & .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+  & .sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; padding: ${c.space["1.5"]} ${c.space["2"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+  & .sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]} 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; cursor: pointer; transition: background-color 0.14s; }
+  & .sidebar-search:hover { background: ${c.bgRaised}; }
+  & .sidebar-search-label { flex: 1; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
+  & .sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); font-size: ${c.text.xs}; }
+  & .sidebar-pill { border-radius: ${c.radius.full}; align-self: center; width: auto; height: 32px; padding-inline: ${c.space["4"]}; }
+  & .sidebar-divider { height: 0; border: none; border-top: 1px solid ${c.borderSubtle}; margin: ${c.space["2"]} calc(-1 * ${c.space["2"]}) 0; }
+  & .sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: ${c.size.row}; border-radius: ${c.radius.md}; border: 1px dashed ${c.borderDefault}; background: transparent; color: ${c.fgMuted}; font-family: ${c.font.sans}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+  & .sidebar-newlist:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tasklistRecipe } from "./tasklist.recipe.js";
-function Row({ task, onToggle, }) {
-    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 ? "Mark incomplete" : "Mark complete", 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] }))] }));
+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, }) {
+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 }, t.id)))] }, gi)))) }));
+    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/trialbanner/trialbanner.js

@@ -4,7 +4,7 @@ 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, }) {
-    return (_jsxs("div", { className: trialbannerRecipe({ className }), "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 }))] }));
+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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/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.
@@ -14,7 +14,7 @@ const config = defineRecipe({
     & .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: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      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}; }

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

@@ -1,11 +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, onChange, "aria-label": ariaLabel, className, }) {
-    return (_jsx("div", { className: viewtoggleRecipe({ className }), 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: () => onChange(o.value), children: o.icon }, o.value))) }));
+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

@@ -11,7 +11,7 @@ const config = defineRecipe({
 
     & .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};
-      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: ${c.fgPrimary}; }
     & .viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
       box-shadow: 0 1px 2px -1px ${c.shadowTileActive}; }

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

@@ -1,4 +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

@@ -1,6 +1,10 @@
 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" },
@@ -21,6 +25,32 @@ export const palette = {
     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" },

package/dist/esm/tokens/scale.js

@@ -25,6 +25,7 @@ export const space = {
 // 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
@@ -36,9 +37,14 @@ export const radius = {
 // 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);
@@ -57,4 +63,5 @@ 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

@@ -2,6 +2,10 @@ 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",
@@ -21,10 +25,30 @@ export 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",
+    // #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",
 };