@cere/cere-design-system 0.0.44 → 0.0.45

package/dist/index.d.mts

@@ -363,7 +363,12 @@ declare const webSurfaceTokens: {
     readonly bgSuccess: "#eef5f0";
     readonly bgWarning: "#fef8e8";
     readonly bgDanger: "#f9dedc";
-    readonly bgDangerStrong: "#8c1d18";
+    /**
+     * Foreground text/icon color for content sitting ON a `bgDanger` surface.
+     * NOT a surface color itself — do not use as backgroundColor. Pair with
+     * `bgDanger` for the canonical danger alert look.
+     */
+    readonly textOnDanger: "#8c1d18";
     readonly textPrimary: "#1d1b20";
     readonly textSecondary: "#5f5c64";
     readonly textMuted: "#938f99";
@@ -498,8 +503,10 @@ interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
      */
     variant?: ButtonVariant;
     /**
-     * Tone overlay. `onGradient` re-skins the button as a white pill on a dark
-     * gradient surface (banner CTA pattern). Orthogonal to `variant`.
+     * Tone overlay. When set, **replaces** the per-variant styling — `variant`
+     * is ignored. Today the only non-default tone is `onGradient`, which paints
+     * the button as a white pill on a dark gradient surface (banner CTA
+     * pattern). Use the default tone if you want `variant` to drive the look.
      * @default 'default'
      */
     tone?: ButtonTone;
@@ -2103,6 +2110,16 @@ interface CardProps extends Omit<CardProps$1, 'variant'> {
     /** Visual treatment. @default 'standard' */
     variant?: CardVariant;
     hoverable?: boolean;
+    /**
+     * Opt the card into being a real interactive element. When combined with
+     * `onClick`, the root renders via MUI ButtonBase — focusable button,
+     * Enter/Space activation, `:focus-visible` ring. When `clickable` is set
+     * without `onClick`, only the pointer cursor changes (back-compat).
+     *
+     * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just
+     * forwards the click handler, so consumers using onClick for analytics or
+     * non-clickable side effects are not silently turned into buttons.
+     */
     clickable?: boolean;
 }
 declare const Card: React__default.FC<CardProps>;

package/dist/index.d.ts

@@ -363,7 +363,12 @@ declare const webSurfaceTokens: {
     readonly bgSuccess: "#eef5f0";
     readonly bgWarning: "#fef8e8";
     readonly bgDanger: "#f9dedc";
-    readonly bgDangerStrong: "#8c1d18";
+    /**
+     * Foreground text/icon color for content sitting ON a `bgDanger` surface.
+     * NOT a surface color itself — do not use as backgroundColor. Pair with
+     * `bgDanger` for the canonical danger alert look.
+     */
+    readonly textOnDanger: "#8c1d18";
     readonly textPrimary: "#1d1b20";
     readonly textSecondary: "#5f5c64";
     readonly textMuted: "#938f99";
@@ -498,8 +503,10 @@ interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
      */
     variant?: ButtonVariant;
     /**
-     * Tone overlay. `onGradient` re-skins the button as a white pill on a dark
-     * gradient surface (banner CTA pattern). Orthogonal to `variant`.
+     * Tone overlay. When set, **replaces** the per-variant styling — `variant`
+     * is ignored. Today the only non-default tone is `onGradient`, which paints
+     * the button as a white pill on a dark gradient surface (banner CTA
+     * pattern). Use the default tone if you want `variant` to drive the look.
      * @default 'default'
      */
     tone?: ButtonTone;
@@ -2103,6 +2110,16 @@ interface CardProps extends Omit<CardProps$1, 'variant'> {
     /** Visual treatment. @default 'standard' */
     variant?: CardVariant;
     hoverable?: boolean;
+    /**
+     * Opt the card into being a real interactive element. When combined with
+     * `onClick`, the root renders via MUI ButtonBase — focusable button,
+     * Enter/Space activation, `:focus-visible` ring. When `clickable` is set
+     * without `onClick`, only the pointer cursor changes (back-compat).
+     *
+     * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just
+     * forwards the click handler, so consumers using onClick for analytics or
+     * non-clickable side effects are not silently turned into buttons.
+     */
     clickable?: boolean;
 }
 declare const Card: React__default.FC<CardProps>;

package/dist/index.js

@@ -465,7 +465,12 @@ var webSurfaceTokens = {
   bgSuccess: "#eef5f0",
   bgWarning: "#fef8e8",
   bgDanger: "#f9dedc",
-  bgDangerStrong: "#8c1d18",
+  /**
+   * Foreground text/icon color for content sitting ON a `bgDanger` surface.
+   * NOT a surface color itself — do not use as backgroundColor. Pair with
+   * `bgDanger` for the canonical danger alert look.
+   */
+  textOnDanger: "#8c1d18",
   // Text
   textPrimary: "#1d1b20",
   textSecondary: "#5f5c64",
@@ -2593,7 +2598,7 @@ var Card = ({
   children,
   ...props
 }) => {
-  const asButton = typeof onClick === "function";
+  const asButton = clickable && typeof onClick === "function";
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     StyledCard,
     {
@@ -2696,7 +2701,7 @@ var CopyableField = ({
     }
   }, [value, onCopy, flashDurationMs]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Card, { variant: "tinted", sx: { p: 1.75 }, children: [
-    (label || copied) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_Box.default,
       {
         sx: {
@@ -2704,11 +2709,12 @@ var CopyableField = ({
           alignItems: "center",
           justifyContent: "space-between",
           gap: 1,
-          mb: "6px"
+          mb: label || copied ? "6px" : 0,
+          minHeight: label || copied ? void 0 : 0
         },
         children: [
           label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Typography, { variant: "overline", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {}),
-          copied && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlashLabel, { children: flashLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlashLabel, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: copied ? flashLabel : "" })
         ]
       }
     ),
@@ -6572,10 +6578,9 @@ function Carousel({
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
-    bgcolor: "transparent",
-    color: "common.white",
-    boxShadow: "none",
-    "&:hover": { bgcolor: "rgba(255,255,255,0.12)" }
+    bgcolor: "background.paper",
+    boxShadow: 1,
+    "&:hover": { bgcolor: "background.paper" }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     import_Box8.default,
@@ -6602,7 +6607,7 @@ function Carousel({
             {
               "aria-label": "Previous slide",
               onClick: () => emblaApi?.scrollPrev(),
-              sx: [arrowBaseSx, { left: 0 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              sx: [arrowBaseSx, { left: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
               children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_ChevronLeft3.default, {})
             }
           ),
@@ -6611,7 +6616,7 @@ function Carousel({
             {
               "aria-label": "Next slide",
               onClick: () => emblaApi?.scrollNext(),
-              sx: [arrowBaseSx, { right: 0 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              sx: [arrowBaseSx, { right: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
               children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_ChevronRight3.default, {})
             }
           )