@crisp-ui-kit/crisp 0.32.0 → 0.33.0

package/dist/cjs/components/badge/badge.recipe.js

@@ -1,60 +1,119 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeRecipe = void 0;
+exports.spec = exports.badgeRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-const config = (0, core_1.defineRecipe)({
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const spec = (0, core_1.defineSpec)({
     name: "badge",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.1px; white-space: nowrap;
-    & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: currentColor; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens_1.contract.space["1"],
+        fontFamily: tokens_1.contract.font.sans,
+        fontWeight: tokens_1.contract.weight.medium,
+        letterSpacing: "-0.1px",
+        whiteSpace: "nowrap",
+    },
+    parts: [
+        {
+            slot: "dot",
+            selector: "& .crisp-badge-dot",
+            decls: {
+                width: "6px",
+                height: "6px",
+                flexShrink: 0,
+                borderRadius: tokens_1.contract.radius.full,
+                background: "currentColor",
+            },
+        },
+    ],
     variants: {
         tone: {
-            neutral: `background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};`,
-            brand: `background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: ${tokens_1.contract.bgBrandSolid}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent);`,
-            success: `background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 14%, transparent); color: ${tokens_1.contract.bgSuccess}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgSuccess} 30%, transparent);`,
-            warning: `background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 16%, transparent); color: ${tokens_1.contract.bgWarning}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgWarning} 32%, transparent);`,
-            danger: `background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 14%, transparent); color: ${tokens_1.contract.bgDanger}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent);`,
+            neutral: {
+                background: tokens_1.contract.bgRaised,
+                color: tokens_1.contract.fgMuted,
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
+            },
+            brand: {
+                background: soft(tokens_1.contract.bgBrandSolid, 14),
+                color: tokens_1.contract.bgBrandSolid,
+                boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(tokens_1.contract.bgSuccess, 14),
+                color: tokens_1.contract.bgSuccess,
+                boxShadow: ring(tokens_1.contract.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(tokens_1.contract.bgWarning, 16),
+                color: tokens_1.contract.bgWarning,
+                boxShadow: ring(tokens_1.contract.bgWarning, 32),
+            },
+            danger: {
+                background: soft(tokens_1.contract.bgDanger, 14),
+                color: tokens_1.contract.bgDanger,
+                boxShadow: ring(tokens_1.contract.bgDanger, 30),
+            },
         },
         size: {
-            small: `height: 16px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.xs}; border-radius: ${tokens_1.contract.radius.sm};`,
-            medium: `height: 20px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; border-radius: ${tokens_1.contract.radius.sm};`,
-            large: `height: ${tokens_1.contract.size.chip}; padding-inline: 9px; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.chip};`,
-        },
-        variant: {
-            soft: ``,
-            solid: ``,
+            small: {
+                height: "16px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: tokens_1.contract.text.xs,
+                borderRadius: tokens_1.contract.radius.sm,
+            },
+            medium: {
+                height: "20px",
+                paddingInline: tokens_1.contract.space["2"],
+                fontSize: tokens_1.contract.text.sm,
+                borderRadius: tokens_1.contract.radius.sm,
+            },
+            large: {
+                height: tokens_1.contract.size.chip,
+                paddingInline: "9px",
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: tokens_1.contract.radius.chip,
+            },
         },
+        variant: { soft: {}, solid: {} },
     },
     defaultVariants: { tone: "neutral", size: "medium", variant: "soft" },
     compoundVariants: [
         {
             variant: "solid",
             tone: "brand",
-            css: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: none;`,
+            decls: {
+                background: tokens_1.contract.bgBrandSolid,
+                color: tokens_1.contract.fgOnBrand,
+                boxShadow: "none",
+            },
         },
         {
             variant: "solid",
             tone: "success",
-            css: `background: ${tokens_1.contract.bgSuccess}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgSuccess, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "warning",
-            css: `background: ${tokens_1.contract.bgWarning}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgWarning, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "danger",
-            css: `background: ${tokens_1.contract.bgDanger}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgDanger, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "neutral",
-            css: `background: ${tokens_1.contract.fgMuted}; color: ${tokens_1.contract.bgSurface}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.fgMuted, color: tokens_1.contract.bgSurface, boxShadow: "none" },
         },
     ],
 });
-exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
-});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/cjs/components/datatable/datatable.js

@@ -402,21 +402,29 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
+    // `insetInlineStart`, never `left`: the offset pins the column to the
+    // LEADING edge, which is the right one under `dir="rtl"`. A physical `left`
+    // pins to the trailing edge instead, and the column scrolls out of view the
+    // moment sticky would have engaged (#285). RecordsTable does the same job in
+    // CSS and has used the logical property since #91 -- this offset is computed
+    // here rather than in a recipe, which is why that sweep could not reach it.
     const stickyCol = (index) => {
         if (!stickyFirst)
             return {};
         if (showGrip && index === -2)
-            return { "data-sticky": "", style: { left: 0 } };
+            return { "data-sticky": "", style: { insetInlineStart: 0 } };
         if (selectable && index === -1)
             return {
                 "data-sticky": "",
-                style: { left: showGrip ? GRIP_W : 0 },
+                style: { insetInlineStart: showGrip ? GRIP_W : 0 },
             };
         if (index === 0)
             return {
                 "data-sticky": "",
                 "data-sticky-edge": "",
-                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+                style: {
+                    insetInlineStart: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0),
+                },
             };
         return {};
     };

package/dist/cjs/components/divider/divider.recipe.js

@@ -1,17 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dividerRecipe = void 0;
+exports.spec = exports.dividerRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A hairline separator — horizontal (default) or vertical.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "divider",
-    base: `flex-shrink: 0; border: none; margin: 0; background: ${tokens_1.contract.borderSubtle};
-    &[data-orientation="horizontal"] { width: 100%; height: 1px; }
-    &[data-orientation="vertical"] { width: 1px; align-self: stretch; min-height: 1em; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        flexShrink: 0,
+        border: "none",
+        margin: 0,
+        background: tokens_1.contract.borderSubtle,
+    },
+    parts: [
+        {
+            selector: '&[data-orientation="horizontal"]',
+            decls: { width: "100%", height: "1px" },
+        },
+        {
+            selector: '&[data-orientation="vertical"]',
+            decls: { width: "1px", alignSelf: "stretch", minHeight: "1em" },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.dividerRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/components/progress/progress.recipe.js

@@ -1,20 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.progressRecipe = void 0;
+exports.spec = exports.progressRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A progress indicator — a continuous brand-filled track, or a segmented row of
 // pills (a "Getting started 3/6" bar).
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "progress",
-    base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden;
-    & .crisp-progress-fill { display: block; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; transition: width 0.25s ease; }
-    &[data-segmented] { display: flex; gap: ${tokens_1.contract.space["1"]}; background: transparent; overflow: visible; }
-    &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); transition: background 0.2s; }
-    &[data-segmented] .crisp-progress-seg[data-filled] { background: ${tokens_1.contract.bgBrandSolid}; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        display: "block",
+        boxSizing: "border-box",
+        height: "6px",
+        borderRadius: tokens_1.contract.radius.full,
+        background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent)`,
+        overflow: "hidden",
+    },
+    parts: [
+        {
+            slot: "fill",
+            selector: "& .crisp-progress-fill",
+            decls: {
+                display: "block",
+                height: "100%",
+                borderRadius: tokens_1.contract.radius.full,
+                background: tokens_1.contract.bgBrandSolid,
+                transition: "width 0.25s ease",
+            },
+        },
+        {
+            selector: "&[data-segmented]",
+            decls: {
+                display: "flex",
+                gap: tokens_1.contract.space["1"],
+                background: "transparent",
+                overflow: "visible",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg",
+            decls: {
+                flex: 1,
+                height: "100%",
+                borderRadius: tokens_1.contract.radius.full,
+                background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent)`,
+                transition: "background 0.2s",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg[data-filled]",
+            decls: { background: tokens_1.contract.bgBrandSolid },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.progressRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/components/spinner/spinner.recipe.js

@@ -1,16 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spinnerRecipe = void 0;
+exports.spec = exports.spinnerRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A spinning ring loading indicator.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "spinner",
-    globalCss: `@keyframes crisp-spin { to { transform: rotate(360deg); } }`,
-    base: `display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; border: 2px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 15%, transparent); border-top-color: ${tokens_1.contract.fgMuted}; animation: crisp-spin 0.6s linear infinite;`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    globalCss: "@keyframes crisp-spin { to { transform: rotate(360deg); } }",
+    base: {
+        display: "inline-block",
+        boxSizing: "border-box",
+        width: "16px",
+        height: "16px",
+        borderRadius: tokens_1.contract.radius.full,
+        border: `2px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 15%, transparent)`,
+        borderTopColor: tokens_1.contract.fgMuted,
+        animation: "crisp-spin 0.6s linear infinite",
+    },
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.spinnerRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -32,6 +32,9 @@ Object.defineProperty(exports, "Primitive", { enumerable: true, get: function ()
 var resolve_1 = require("./resolve");
 Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: function () { return resolve_1.resolveRecipe; } });
 __exportStar(require("./rtl"), exports);
+var spec_1 = require("./spec");
+Object.defineProperty(exports, "defineSpec", { enumerable: true, get: function () { return spec_1.defineSpec; } });
+Object.defineProperty(exports, "specToRecipe", { enumerable: true, get: function () { return spec_1.specToRecipe; } });
 var use_focus_after_removal_1 = require("./use-focus-after-removal");
 Object.defineProperty(exports, "useFocusAfterRemoval", { enumerable: true, get: function () { return use_focus_after_removal_1.useFocusAfterRemoval; } });
 var use_form_reset_1 = require("./use-form-reset");

package/dist/cjs/core/spec.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.declsToCss = declsToCss;
+exports.defineSpec = defineSpec;
+exports.specToRecipe = specToRecipe;
+const kebab = (p) => p.startsWith("--") ? p : p.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+function declsToCss(decls) {
+    return Object.entries(decls)
+        .map(([prop, value]) => `${kebab(prop)}: ${value};`)
+        .join(" ");
+}
+/**
+ * `const` type parameter, not a plain `ComponentSpec` return: widening the
+ * variant keys here loses the literal union that `VariantProps<typeof recipe>`
+ * hands a component, and `BadgeProps["tone"]` silently degrades from
+ * `"neutral" | "brand" | …` to `string`. That is a public API regression that
+ * typechecks everywhere except at the call sites it was meant to protect.
+ */
+function defineSpec(spec) {
+    return spec;
+}
+/**
+ * Compile a spec into the RecipeConfig the existing pipeline already takes, so
+ * nothing downstream — the CSS generator, the d.ts generator, `resolveRecipe`,
+ * the spec guards — has to know a spec exists. That is what keeps the
+ * conversion provable: `dist/` must not move, and CI's
+ * `git diff --exit-code dist/` is the gate.
+ *
+ * The formatting here is not cosmetic freedom. It reproduces exactly what the
+ * hand-written template strings emit — root declarations space-joined, each
+ * nested rule on its own line indented four spaces — because any other choice
+ * rewrites every committed stylesheet and buries the conversion's real diff.
+ */
+function specToRecipe(spec) {
+    const root = declsToCss(spec.base);
+    const nested = (spec.parts ?? []).map((p) => `${p.selector} { ${declsToCss(p.decls)} }`);
+    const base = nested.length ? `${root}\n    ${nested.join("\n    ")}` : root;
+    // A variant value compiles the same way the root does: declarations first,
+    // then any nested rules it contributes, so a variant that restyles a part
+    // (Badge's solid dot) stays in the variant rather than leaking into base.
+    const compileValue = (v) => {
+        const decls = "decls" in v ? v.decls : v;
+        const nestedParts = "decls" in v ? (v.parts ?? []) : [];
+        const head = declsToCss(decls);
+        if (!nestedParts.length)
+            return head;
+        const tail = nestedParts
+            .map((p) => `${p.selector} { ${declsToCss(p.decls)} }`)
+            .join("\n    ");
+        return head ? `${head}\n    ${tail}` : tail;
+    };
+    const variants = {};
+    for (const [name, values] of Object.entries(spec.variants ?? {})) {
+        variants[name] = {};
+        for (const [value, v] of Object.entries(values)) {
+            variants[name][value] = compileValue(v);
+        }
+    }
+    return {
+        name: spec.name,
+        base,
+        variants: variants,
+        defaultVariants: (spec.defaultVariants ?? {}),
+        compoundVariants: (spec.compoundVariants ?? []).map(({ decls, ...sel }) => ({
+            ...sel,
+            css: declsToCss(decls),
+        })),
+        ...(spec.globalCss ? { globalCss: spec.globalCss } : {}),
+    };
+}

package/dist/esm/components/badge/badge.recipe.js

@@ -1,57 +1,116 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
-const config = defineRecipe({
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const spec = defineSpec({
     name: "badge",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; font-family: ${c.font.sans}; font-weight: ${c.weight.medium}; letter-spacing: -0.1px; white-space: nowrap;
-    & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${c.radius.full}; background: currentColor; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: c.space["1"],
+        fontFamily: c.font.sans,
+        fontWeight: c.weight.medium,
+        letterSpacing: "-0.1px",
+        whiteSpace: "nowrap",
+    },
+    parts: [
+        {
+            slot: "dot",
+            selector: "& .crisp-badge-dot",
+            decls: {
+                width: "6px",
+                height: "6px",
+                flexShrink: 0,
+                borderRadius: c.radius.full,
+                background: "currentColor",
+            },
+        },
+    ],
     variants: {
         tone: {
-            neutral: `background: ${c.bgRaised}; color: ${c.fgMuted}; box-shadow: inset 0 0 0 1px ${c.borderDefault};`,
-            brand: `background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: ${c.bgBrandSolid}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent);`,
-            success: `background: color-mix(in srgb, ${c.bgSuccess} 14%, transparent); color: ${c.bgSuccess}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgSuccess} 30%, transparent);`,
-            warning: `background: color-mix(in srgb, ${c.bgWarning} 16%, transparent); color: ${c.bgWarning}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgWarning} 32%, transparent);`,
-            danger: `background: color-mix(in srgb, ${c.bgDanger} 14%, transparent); color: ${c.bgDanger}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgDanger} 30%, transparent);`,
+            neutral: {
+                background: c.bgRaised,
+                color: c.fgMuted,
+                boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
+            },
+            brand: {
+                background: soft(c.bgBrandSolid, 14),
+                color: c.bgBrandSolid,
+                boxShadow: ring(c.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(c.bgSuccess, 14),
+                color: c.bgSuccess,
+                boxShadow: ring(c.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(c.bgWarning, 16),
+                color: c.bgWarning,
+                boxShadow: ring(c.bgWarning, 32),
+            },
+            danger: {
+                background: soft(c.bgDanger, 14),
+                color: c.bgDanger,
+                boxShadow: ring(c.bgDanger, 30),
+            },
         },
         size: {
-            small: `height: 16px; padding-inline: ${c.space["1.5"]}; font-size: ${c.text.xs}; border-radius: ${c.radius.sm};`,
-            medium: `height: 20px; padding-inline: ${c.space["2"]}; font-size: ${c.text.sm}; border-radius: ${c.radius.sm};`,
-            large: `height: ${c.size.chip}; padding-inline: 9px; font-size: ${c.text.lg}; border-radius: ${c.radius.chip};`,
-        },
-        variant: {
-            soft: ``,
-            solid: ``,
+            small: {
+                height: "16px",
+                paddingInline: c.space["1.5"],
+                fontSize: c.text.xs,
+                borderRadius: c.radius.sm,
+            },
+            medium: {
+                height: "20px",
+                paddingInline: c.space["2"],
+                fontSize: c.text.sm,
+                borderRadius: c.radius.sm,
+            },
+            large: {
+                height: c.size.chip,
+                paddingInline: "9px",
+                fontSize: c.text.lg,
+                borderRadius: c.radius.chip,
+            },
         },
+        variant: { soft: {}, solid: {} },
     },
     defaultVariants: { tone: "neutral", size: "medium", variant: "soft" },
     compoundVariants: [
         {
             variant: "solid",
             tone: "brand",
-            css: `background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; box-shadow: none;`,
+            decls: {
+                background: c.bgBrandSolid,
+                color: c.fgOnBrand,
+                boxShadow: "none",
+            },
         },
         {
             variant: "solid",
             tone: "success",
-            css: `background: ${c.bgSuccess}; color: ${c.fgOnTone}; box-shadow: none;`,
+            decls: { background: c.bgSuccess, color: c.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "warning",
-            css: `background: ${c.bgWarning}; color: ${c.fgOnTone}; box-shadow: none;`,
+            decls: { background: c.bgWarning, color: c.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "danger",
-            css: `background: ${c.bgDanger}; color: ${c.fgOnTone}; box-shadow: none;`,
+            decls: { background: c.bgDanger, color: c.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "neutral",
-            css: `background: ${c.fgMuted}; color: ${c.bgSurface}; box-shadow: none;`,
+            decls: { background: c.fgMuted, color: c.bgSurface, boxShadow: "none" },
         },
     ],
 });
-export const badgeRecipe = Object.assign(resolveRecipe(config), {
-    config,
-});
+const config = specToRecipe(spec);
+export const badgeRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
 export default config;

package/dist/esm/components/datatable/datatable.js

@@ -366,21 +366,29 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
+    // `insetInlineStart`, never `left`: the offset pins the column to the
+    // LEADING edge, which is the right one under `dir="rtl"`. A physical `left`
+    // pins to the trailing edge instead, and the column scrolls out of view the
+    // moment sticky would have engaged (#285). RecordsTable does the same job in
+    // CSS and has used the logical property since #91 -- this offset is computed
+    // here rather than in a recipe, which is why that sweep could not reach it.
     const stickyCol = (index) => {
         if (!stickyFirst)
             return {};
         if (showGrip && index === -2)
-            return { "data-sticky": "", style: { left: 0 } };
+            return { "data-sticky": "", style: { insetInlineStart: 0 } };
         if (selectable && index === -1)
             return {
                 "data-sticky": "",
-                style: { left: showGrip ? GRIP_W : 0 },
+                style: { insetInlineStart: showGrip ? GRIP_W : 0 },
             };
         if (index === 0)
             return {
                 "data-sticky": "",
                 "data-sticky-edge": "",
-                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+                style: {
+                    insetInlineStart: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0),
+                },
             };
         return {};
     };

package/dist/esm/components/divider/divider.recipe.js

@@ -1,14 +1,26 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A hairline separator — horizontal (default) or vertical.
-const config = defineRecipe({
+const spec = defineSpec({
     name: "divider",
-    base: `flex-shrink: 0; border: none; margin: 0; background: ${c.borderSubtle};
-    &[data-orientation="horizontal"] { width: 100%; height: 1px; }
-    &[data-orientation="vertical"] { width: 1px; align-self: stretch; min-height: 1em; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        flexShrink: 0,
+        border: "none",
+        margin: 0,
+        background: c.borderSubtle,
+    },
+    parts: [
+        {
+            selector: '&[data-orientation="horizontal"]',
+            decls: { width: "100%", height: "1px" },
+        },
+        {
+            selector: '&[data-orientation="vertical"]',
+            decls: { width: "1px", alignSelf: "stretch", minHeight: "1em" },
+        },
+    ],
 });
+const config = specToRecipe(spec);
 export const dividerRecipe = resolveRecipe(config);
+export { spec };
 export default config;