@godxjp/ui 13.17.3 → 14.0.0

package/dist/props/components/layout.prop.d.ts

@@ -103,37 +103,20 @@ export type SidebarProp = {
     renderItem?: (item: SidebarItemData) => ReactNode;
     footer?: ReactNode;
 };
-/** @see Topbar */
-export type TopbarProductProp = {
-    name: string;
-    color?: string;
-};
-/** @see Topbar */
-export type TopbarProjectProp = {
-    name: string;
-};
-/** @see Topbar */
-export type TopbarProp = {
-    product: TopbarProductProp;
-    project?: TopbarProjectProp | null;
-    /** Dropdown content for the product chip — renders a `DropdownMenuContent`. Turns the chip
-     *  into a switcher (e.g. an active-entity picker) instead of firing `onProductOpen`. */
-    productMenu?: ReactNode;
-    /** Dropdown content for the project chip. When neither `project` nor `projectMenu` is set the
-     *  project chip is hidden (no dead "Pick project" placeholder). */
-    projectMenu?: ReactNode;
-    onProductOpen?: () => void;
-    onProjectOpen?: () => void;
-    onSearchOpen?: () => void;
-    onTweaksOpen?: () => void;
-    collapsed?: boolean;
-    onToggleCollapsed?: () => void;
-    rightSlot?: ReactNode;
-    unread?: boolean;
-    /** Accessible placeholder when project is intentionally unset but a project chip is rendered. */
-    projectPlaceholder?: string;
-    /** Search-bar placeholder text — defaults to the i18n `layout.topbar.searchPlaceholder`. */
-    searchPlaceholder?: string;
-    onNotificationsOpen?: () => void;
-    user?: ReactNode;
+/**
+ * @see Topbar — a PURE SLOT bar (no baked chrome). The library only positions three clusters; the
+ * CONSUMER decides what goes in each (brand `Logo`, sidebar toggle, nav, a search trigger, settings
+ * pickers like `AppSettingPicker`, a notification button, a user menu). The shell never forces a
+ * product switcher, a search box, or a language picker — those are the consumer's components,
+ * configured via THEIR own props and dropped into a slot.
+ */
+export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Inline-start cluster — typically the sidebar toggle + brand `Logo` + primary nav. */
+    start?: ReactNode;
+    /** Center cluster — optional (e.g. a search trigger or a page/entity switcher). */
+    center?: ReactNode;
+    /** Inline-end cluster — settings pickers, notifications, the user menu. */
+    end?: ReactNode;
+    /** Escape hatch — render fully custom bar content instead of the three slots. */
+    children?: ReactNode;
 };

package/dist/props/registry.d.ts

@@ -453,20 +453,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["IdProp", "OnValueChangeProp", "ChildrenProp"];
     };
-    readonly TopbarProductProp: {
-        readonly group: "layout";
-        readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["LabelProp"];
-    };
-    readonly TopbarProjectProp: {
-        readonly group: "layout";
-        readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["LabelProp"];
-    };
     readonly TopbarProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp", "OnOpenChangeProp", "OnValueChangeProp"];
+        readonly vocabulary: readonly ["ChildrenProp"];
     };
     readonly ButtonProp: {
         readonly group: "general";
@@ -690,6 +680,175 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"];
     };
+    readonly ChartSeriesProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", {
+            readonly field: "dataKey";
+            readonly local: true;
+            readonly reason: "Accessor key into each datum for this series.";
+        }, {
+            readonly field: "color";
+            readonly local: true;
+            readonly reason: "Per-series colour override (defaults to --chart-N).";
+        }];
+    };
+    readonly LineChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Chart row data (category + value per series).";
+        }, {
+            readonly field: "series";
+            readonly local: true;
+            readonly reason: "Plotted series descriptors.";
+        }, {
+            readonly field: "categoryKey";
+            readonly local: true;
+            readonly reason: "Accessor key for the x-axis category.";
+        }, {
+            readonly field: "height";
+            readonly local: true;
+            readonly reason: "Explicit canvas height px (overrides size tier).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "showGrid";
+            readonly local: true;
+            readonly reason: "Chart-specific grid toggle.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "curved";
+            readonly local: true;
+            readonly reason: "Smooth (monotone) line rendering.";
+        }];
+    };
+    readonly BarChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Chart row data (category + value per series).";
+        }, {
+            readonly field: "series";
+            readonly local: true;
+            readonly reason: "Plotted series descriptors.";
+        }, {
+            readonly field: "categoryKey";
+            readonly local: true;
+            readonly reason: "Accessor key for the category axis.";
+        }, {
+            readonly field: "height";
+            readonly local: true;
+            readonly reason: "Explicit canvas height px (overrides size tier).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "showGrid";
+            readonly local: true;
+            readonly reason: "Chart-specific grid toggle.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "stacked";
+            readonly local: true;
+            readonly reason: "Stack series into one bar.";
+        }, {
+            readonly field: "horizontal";
+            readonly local: true;
+            readonly reason: "Category axis on the left.";
+        }];
+    };
+    readonly AreaChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Chart row data (category + value per series).";
+        }, {
+            readonly field: "series";
+            readonly local: true;
+            readonly reason: "Plotted series descriptors.";
+        }, {
+            readonly field: "categoryKey";
+            readonly local: true;
+            readonly reason: "Accessor key for the x-axis category.";
+        }, {
+            readonly field: "height";
+            readonly local: true;
+            readonly reason: "Explicit canvas height px (overrides size tier).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "showGrid";
+            readonly local: true;
+            readonly reason: "Chart-specific grid toggle.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "stacked";
+            readonly local: true;
+            readonly reason: "Stack series areas.";
+        }, {
+            readonly field: "curved";
+            readonly local: true;
+            readonly reason: "Smooth (monotone) area rendering.";
+        }];
+    };
+    readonly PieChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Chart row data (one slice per row).";
+        }, {
+            readonly field: "dataKey";
+            readonly local: true;
+            readonly reason: "Accessor key for the slice value.";
+        }, {
+            readonly field: "nameKey";
+            readonly local: true;
+            readonly reason: "Accessor key for the slice category label.";
+        }, {
+            readonly field: "colors";
+            readonly local: true;
+            readonly reason: "Per-slice colour overrides (defaults to --chart-N).";
+        }, {
+            readonly field: "height";
+            readonly local: true;
+            readonly reason: "Explicit canvas height px (overrides size tier).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for tooltips.";
+        }, {
+            readonly field: "donut";
+            readonly local: true;
+            readonly reason: "Hollow-centre donut rendering.";
+        }];
+    };
     readonly AlertDialogProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";

package/dist/props/registry.js

@@ -431,20 +431,10 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["IdProp", "OnValueChangeProp", "ChildrenProp"]
   },
-  TopbarProductProp: {
-    group: "layout",
-    file: "components/layout.prop.ts",
-    vocabulary: ["LabelProp"]
-  },
-  TopbarProjectProp: {
-    group: "layout",
-    file: "components/layout.prop.ts",
-    vocabulary: ["LabelProp"]
-  },
   TopbarProp: {
     group: "layout",
     file: "components/layout.prop.ts",
-    vocabulary: ["ChildrenProp", "OnOpenChangeProp", "OnValueChangeProp"]
+    vocabulary: ["ChildrenProp"]
   },
   ButtonProp: {
     group: "general",
@@ -732,6 +722,117 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"]
   },
+  ChartSeriesProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      { field: "dataKey", local: true, reason: "Accessor key into each datum for this series." },
+      {
+        field: "color",
+        local: true,
+        reason: "Per-series colour override (defaults to --chart-N)."
+      }
+    ]
+  },
+  LineChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Chart row data (category + value per series)." },
+      { field: "series", local: true, reason: "Plotted series descriptors." },
+      { field: "categoryKey", local: true, reason: "Accessor key for the x-axis category." },
+      { field: "height", local: true, reason: "Explicit canvas height px (overrides size tier)." },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "showGrid", local: true, reason: "Chart-specific grid toggle." },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for ticks/tooltips."
+      },
+      { field: "curved", local: true, reason: "Smooth (monotone) line rendering." }
+    ]
+  },
+  BarChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Chart row data (category + value per series)." },
+      { field: "series", local: true, reason: "Plotted series descriptors." },
+      { field: "categoryKey", local: true, reason: "Accessor key for the category axis." },
+      { field: "height", local: true, reason: "Explicit canvas height px (overrides size tier)." },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "showGrid", local: true, reason: "Chart-specific grid toggle." },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for ticks/tooltips."
+      },
+      { field: "stacked", local: true, reason: "Stack series into one bar." },
+      { field: "horizontal", local: true, reason: "Category axis on the left." }
+    ]
+  },
+  AreaChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Chart row data (category + value per series)." },
+      { field: "series", local: true, reason: "Plotted series descriptors." },
+      { field: "categoryKey", local: true, reason: "Accessor key for the x-axis category." },
+      { field: "height", local: true, reason: "Explicit canvas height px (overrides size tier)." },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "showGrid", local: true, reason: "Chart-specific grid toggle." },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for ticks/tooltips."
+      },
+      { field: "stacked", local: true, reason: "Stack series areas." },
+      { field: "curved", local: true, reason: "Smooth (monotone) area rendering." }
+    ]
+  },
+  PieChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Chart row data (one slice per row)." },
+      { field: "dataKey", local: true, reason: "Accessor key for the slice value." },
+      { field: "nameKey", local: true, reason: "Accessor key for the slice category label." },
+      {
+        field: "colors",
+        local: true,
+        reason: "Per-slice colour overrides (defaults to --chart-N)."
+      },
+      { field: "height", local: true, reason: "Explicit canvas height px (overrides size tier)." },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "numberFormat", local: true, reason: "Intl.NumberFormat options for tooltips." },
+      { field: "donut", local: true, reason: "Hollow-centre donut rendering." }
+    ]
+  },
   AlertDialogProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",

package/dist/styles/card-layout.css

@@ -55,9 +55,9 @@
     --card-space-body-y: var(--space-5);
   }
 
-  /* ── Accent edge — 3px semantic left stripe, content kept on the shell ─ */
+  /* ── Accent edge — semantic left stripe (token width), content on shell ─ */
   [data-slot="card"][data-accent] {
-    border-inline-start-width: 3px;
+    border-inline-start-width: var(--card-accent-rail-width);
   }
 
   [data-slot="card"][data-accent="primary"] {
@@ -87,7 +87,9 @@
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
-    padding-inline-start: calc(var(--card-space-inset) - 3px);
+    padding-inline-start: calc(
+      var(--card-space-inset) - var(--card-accent-rail-width)
+    );
   }
 
   /* ── Header ──────────────────────────────────────────────────────────── */

package/dist/styles/chart-layout.css

@@ -0,0 +1,37 @@
+/* Chart layout — the accessible figure chrome for `@godxjp/ui/charts`.
+ * Colours come from the foundation `--chart-1..6` + semantic tokens; recharts
+ * draws the SVG itself. Logical properties only (RTL-safe). */
+
+.ui-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-stack-sm);
+  margin: 0;
+  inline-size: 100%;
+}
+
+.ui-chart-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--foreground));
+}
+
+.ui-chart-canvas {
+  inline-size: 100%;
+}
+
+/* recharts legend/axis text inherits the design typography + muted tone. */
+.ui-chart .recharts-text,
+.ui-chart .recharts-legend-item-text {
+  font-size: var(--font-size-xs);
+  fill: hsl(var(--muted-foreground));
+  color: hsl(var(--muted-foreground));
+}
+
+.ui-chart .recharts-default-tooltip {
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border)) !important;
+  background: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground));
+  font-size: var(--font-size-xs);
+}

package/dist/styles/data-display-layout.css

@@ -426,3 +426,41 @@
 .ui-carousel[data-orientation="vertical"] .ui-carousel-next {
   bottom: var(--space-2);
 }
+
+@layer components {
+  /* ListRow — single-line entity row (leading · title/description · trailing) for short lists
+   * inside a flush CardContent. Rows separate with a quiet divider; the last row leaves the
+   * Card border to close the list. Logical properties throughout (RTL-safe). */
+  [data-slot="list-row"] {
+    display: flex;
+    align-items: center;
+    gap: var(--list-row-gap);
+    padding: var(--list-row-padding-y) var(--list-row-padding-x);
+  }
+  [data-slot="list-row"][data-align="start"] {
+    align-items: flex-start;
+  }
+  [data-slot="list-row"]:not(:last-child) {
+    border-block-end: var(--list-row-border);
+  }
+  [data-slot="list-row-leading"] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--muted-foreground));
+  }
+  [data-slot="list-row-body"] {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+  [data-slot="list-row-trailing"] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+  }
+}

package/dist/styles/index.css

@@ -44,6 +44,7 @@
 @import "./data-entry-layout.css";
 @import "./form-layout.css";
 @import "./navigation-layout.css";
+@import "./chart-layout.css";
 
 @theme {
   --color-background: hsl(var(--background));

package/dist/styles/shell-layout.css

@@ -151,6 +151,13 @@
     background: hsl(var(--accent));
   }
 
+  /* Non-interactive brand header — no click target, so no pointer/hover affordance and no caret. */
+  .sb-product-static,
+  .sb-product-static:hover {
+    cursor: default;
+    background: transparent;
+  }
+
   .sb-logo-mark {
     display: grid;
     width: 1.75rem;
@@ -491,6 +498,30 @@
     gap: 2px;
   }
 
+  /* Topbar — a pure slot bar. start (inline-start) · center (grows, centered) · end (inline-end).
+   * The library owns ONLY this positioning; every control inside is the consumer's to compose. */
+  .ui-topbar {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .ui-topbar-start,
+  .ui-topbar-center,
+  .ui-topbar-end {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .ui-topbar-center {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+  .ui-topbar-end {
+    margin-inline-start: auto;
+  }
+
   .tb-chip {
     display: inline-flex;
     max-width: 15rem;
@@ -520,6 +551,14 @@
     color: hsl(var(--muted-foreground));
   }
 
+  /* Non-interactive brand chip — no menu/handler, so no pointer/hover affordance and no caret. */
+  .tb-chip-static,
+  .tb-chip-static:hover {
+    border-color: transparent;
+    background: transparent;
+    cursor: default;
+  }
+
   .tb-chip-icon {
     display: grid;
     width: 1.125rem;

package/dist/styles/text-layout.css

@@ -98,6 +98,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    /* min-width:0 lets a truncating Text shrink inside a flex row WITHOUT the consumer
+     * having to add `min-w-0` — the documented flex-truncate idiom (issue #114). */
+    min-width: 0;
   }
   [data-slot="text"][data-tabular] {
     font-variant-numeric: tabular-nums;

package/dist/tokens/base.css

@@ -14,5 +14,7 @@
 @import "./components/badge.css";
 @import "./components/navigation.css";
 @import "./components/data-display.css";
+@import "./components/list-row.css";
+@import "./components/logo.css";
 @import "./components/data-entry.css";
 @import "./components/shell.css";

package/dist/tokens/components/card.css

@@ -20,6 +20,11 @@
    * --card-header-background-alpha: 0 for a quiet borderless-band header. */
   --card-header-border-bottom: 1px solid hsl(var(--card-border));
   --card-radius: var(--radius);
+  /* Accent edge — width of the semantic leading-edge stripe (data-accent).
+   * Tokenised (rule #44) so a service theme can re-tune it without forking CSS.
+   * The slot padding compensation in card-layout.css subtracts the same token,
+   * so content stays aligned on the shell whatever the rail width. */
+  --card-accent-rail-width: 6px;
   --stat-card-label-font-size: var(--font-size-xs);
   --stat-card-label-font-weight: var(--font-weight-medium);
   --stat-card-label-letter-spacing: 0.04em;

package/dist/tokens/components/list-row.css

@@ -0,0 +1,9 @@
+/* ListRow component tokens — a single-line entity row for short lists inside a Card
+ * (sessions / API tokens / linked accounts / passkeys …). Sits in a flush CardContent;
+ * rows separate with a quiet divider (#44 — chrome defaults to the calm semantic border). */
+:root {
+  --list-row-padding-y: var(--space-3);
+  --list-row-padding-x: var(--space-4);
+  --list-row-gap: var(--space-3);
+  --list-row-border: 1px solid hsl(var(--border));
+}

package/dist/tokens/components/logo.css

@@ -0,0 +1,11 @@
+/* Logo (brand mark) component tokens. Box size and corner radius are knobs (#45) so a service can
+ * match its own grid without forking the mark; brand fill follows --primary. The `size` prop picks
+ * the step; a service retunes the steps globally here. (Not a --control-height tier — the mark is
+ * decorative, not a density-aware interactive control.) */
+:root {
+  --logo-size: 2rem; /* md */
+  --logo-size-xs: 1.5rem;
+  --logo-size-sm: 1.75rem;
+  --logo-size-lg: 2.5rem;
+  --logo-radius: var(--radius);
+}

package/dist/tokens/foundation.css

@@ -234,6 +234,19 @@
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);
   --field-label-gap: var(--space-2);
+
+  /* Motion — the primitive tier for animation, so enter/transition timing reads a token
+   * instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2).
+   * dxs-kintai keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
+   * Consumers honour prefers-reduced-motion at the call site. */
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-slow: 500ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --reveal-distance: 10px;
 }
 
 .dark,