@fairmint/ui 0.2.32 → 0.2.33

package/dist/components/specific/EquityRibbonChart/EquityRibbonChart.d.ts

@@ -15,6 +15,11 @@ export interface EquityRibbonChartProps {
     hideLabels?: boolean;
     /** Canvas behind ribbons. @default 'transparent' */
     background?: RibbonBackground;
+    /**
+     * Color of the 2px seam between ribbons (SVG stroke).
+     * Defaults to the `background` surface; when `background` is `transparent`, defaults to `ribbonChartSurface.black`.
+     */
+    gapColor?: string;
     /** `hero` = wide marketing chart; `mark` = tight fill for square icon. @default 'hero' */
     layout?: RibbonLayout;
     /** Label text color (CSS color). @default ribbonChartLabelDefault */
@@ -23,8 +28,14 @@ export interface EquityRibbonChartProps {
     className?: string;
     /** Override chart height (CSS length). */
     height?: string;
+    /**
+     * Chart width in pixels (sets root `width`, same idea as `height`).
+     * Clamped up to the rendered height when needed; wider charts increase right-edge stagger between ribbons.
+     * Omit to fill the parent (`width: 100%`).
+     */
+    chartWidth?: number;
     /** Passed to root for layout wrappers. */
     style?: CSSProperties;
 }
-export declare function EquityRibbonChart({ labels, bandCount: bandCountProp, gradients, animated, hideLabels, background, layout, labelColor, className, height, style, }: EquityRibbonChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function EquityRibbonChart({ labels, bandCount: bandCountProp, gradients, animated, hideLabels, background, gapColor, layout, labelColor, className, height, chartWidth, style, }: EquityRibbonChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EquityRibbonChart.d.ts.map

package/dist/components/specific/EquityRibbonChart/EquityRibbonChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EquityRibbonChart.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/EquityRibbonChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAOnB,MAAM,OAAO,CAAC;AACf,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAQL,KAAK,YAAY,EAElB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EAGxB,MAAM,eAAe,CAAC;AAUvB,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0FAA0F;IAC1F,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8BD,wBAAgB,iBAAiB,CAAC,EAChC,MAA8B,EAC9B,SAAS,EAAE,aAAiB,EAC5B,SAAS,EACT,QAAe,EACf,UAAkB,EAClB,UAA0B,EAC1B,MAAe,EACf,UAAoC,EACpC,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,sBAAsB,2CAsQxB"}
+{"version":3,"file":"EquityRibbonChart.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/EquityRibbonChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAOnB,MAAM,OAAO,CAAC;AACf,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAWL,KAAK,YAAY,EAGlB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EAGxB,MAAM,eAAe,CAAC;AAUvB,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8BD,wBAAgB,iBAAiB,CAAC,EAChC,MAA8B,EAC9B,SAAS,EAAE,aAAiB,EAC5B,SAAS,EACT,QAAe,EACf,UAAkB,EAClB,UAA0B,EAC1B,QAAQ,EACR,MAAe,EACf,UAAoC,EACpC,SAAS,EACT,MAAM,EACN,UAAU,EACV,KAAK,GACN,EAAE,sBAAsB,2CA0RxB"}

package/dist/components/specific/EquityRibbonChart/FairmintRibbonMark.d.ts

@@ -10,6 +10,8 @@ export interface FairmintRibbonMarkProps {
     gradients?: EquityRibbonChartProps["gradients"];
     /** Canvas behind ribbons. @default 'black' */
     background?: RibbonBackground;
+    /** Seam color between ribbons; use `transparent` to hide strokes on transparent backgrounds. */
+    gapColor?: EquityRibbonChartProps["gapColor"];
     /** Label text color when labels are shown. @default ribbonChartLabelDefault */
     labelColor?: EquityRibbonChartProps["labelColor"];
     /** Additional class name. */
@@ -19,5 +21,5 @@ export interface FairmintRibbonMarkProps {
 /**
  * Square brand mark — stacked ribbons without labels (favicon / app icon source).
  */
-export declare function FairmintRibbonMark({ size, bandCount, gradients, background, labelColor, className, style, }: FairmintRibbonMarkProps): import("react/jsx-runtime").JSX.Element;
+export declare function FairmintRibbonMark({ size, bandCount, gradients, background, gapColor, labelColor, className, style, }: FairmintRibbonMarkProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FairmintRibbonMark.d.ts.map

package/dist/components/specific/EquityRibbonChart/FairmintRibbonMark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintRibbonMark.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/FairmintRibbonMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,sCAAsC;IACtC,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,8CAA8C;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAClD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAS,EACT,SAAa,EACb,SAAS,EACT,UAAoB,EACpB,UAAU,EACV,SAAS,EACT,KAAK,GACN,EAAE,uBAAuB,2CAiBzB"}
+{"version":3,"file":"FairmintRibbonMark.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/FairmintRibbonMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,sCAAsC;IACtC,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,8CAA8C;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAC9C,+EAA+E;IAC/E,UAAU,CAAC,EAAE,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAClD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAS,EACT,SAAa,EACb,SAAS,EACT,UAAoB,EACpB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,GACN,EAAE,uBAAuB,2CAkBzB"}

package/dist/components/specific/EquityRibbonChart/ribbonGeometry.d.ts

@@ -17,8 +17,13 @@ export interface RibbonGeometryConfig {
     samples: number;
 }
 export declare const DEFAULT_RIBBON_CONFIG: RibbonGeometryConfig;
-/** Right edge for mark: all ribbons clip here (vertical line on the right). */
+/** Right edge for mark / square charts: all ribbons align on this vertical line. */
 export declare const MARK_RIBBON_RIGHT_EDGE = 0.936;
+/**
+ * Stagger scale: `int_px = (chartWidth - height) * RIBBON_END_STAGGER_X` when chartWidth > height.
+ * Calibrated at W=1000, H=500: int_px = 0.009 × 1000 ⇒ X = 9 / 500 = 0.018.
+ */
+export declare const RIBBON_END_STAGGER_X: number;
 /**
  * Horizontal scale factor for mark fit (mark layout only).
  * < 1 compresses width so the stack reads square in a 1:1 viewport.
@@ -46,6 +51,19 @@ export interface RibbonGeometryResult {
     bandCount: number;
 }
 export declare function clampBandCount(count: number, max?: number): number;
+/**
+ * Geometry width for paths/viewBox.
+ * With `chartWidth`: at least rendered height, then respect a narrower measured width (e.g. `max-width: 100%`).
+ * Without `chartWidth`: use measured container width only.
+ */
+export declare function resolveChartGeometryWidth(containerWidth: number, containerHeight: number, chartWidth?: number): number;
+/** CSS cap for explicit `chartWidth` (never below rendered height). */
+export declare function nominalChartWidthPx(chartWidth: number, renderedHeightPx: number): number;
+/** Normalized gap between adjacent ribbon right edges (0 when square). */
+export declare function ribbonEndStaggerNorm(chartWidth: number, height: number): number;
+/** Per-band clip right edge (bottom band leftmost, top band at `rightAnchor`). */
+export declare function buildStaggeredEndDraw(bandCount: number, chartWidth: number, height: number): readonly number[];
+export declare function configWithChartDimensions(base: RibbonGeometryConfig, chartWidth: number, height: number): RibbonGeometryConfig;
 export declare function buildRibbonGeometry(width: number, height: number, labels: readonly string[], config?: RibbonGeometryConfig, bandCount?: number, layout?: RibbonLayout): RibbonGeometryResult | null;
 /** Quadratic ease-in-out (GSAP `power2.inOut` equivalent) for reveal motion. */
 export declare function easePower1InOut(t: number): number;

package/dist/components/specific/EquityRibbonChart/ribbonGeometry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ribbonGeometry.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/ribbonGeometry.ts"],"names":[],"mappings":"AAAA,yFAAyF;AAEzF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACrB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,aAAa,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,qBAAqB,EAAE,oBAsBnC,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD,wDAAwD;AACxD,eAAO,MAAM,kBAAkB,EAAE,oBAahC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;AAwB3C,sFAAsF;AACtF,wBAAgB,cAAc,CAC5B,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,MAAM,CAMR;AA2BD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,oBAAoB,CAAC;CACjC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAqFD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAI,GAAG,MAAM,CAG7D;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,MAAM,GAAE,oBAA4C,EACpD,SAAS,GAAE,MAA6B,EACxC,MAAM,GAAE,YAAqB,GAC5B,oBAAoB,GAAG,IAAI,CAoD7B;AAED,gFAAgF;AAChF,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAGjD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,gFAAgF;AAChF,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,oBAA4C,GACnD,MAAM,CAER"}
+{"version":3,"file":"ribbonGeometry.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/EquityRibbonChart/ribbonGeometry.ts"],"names":[],"mappings":"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"}

package/dist/fairmint-ui.cjs

@@ -45040,6 +45040,8 @@ const DEFAULT_RIBBON_CONFIG = {
   samples: 72
 };
 const MARK_RIBBON_RIGHT_EDGE = 0.936;
+const HERO_WIDE_TOP_END = DEFAULT_RIBBON_CONFIG.xEndDraw[DEFAULT_RIBBON_CONFIG.xEndDraw.length - 1];
+const RIBBON_END_STAGGER_X = DEFAULT_RIBBON_CONFIG.xEndStagger * 1e3 / (1e3 - 500);
 const MARK_FIT_HORIZONTAL_COMPRESS = 0.78;
 const MARK_RIBBON_CONFIG = {
   ...DEFAULT_RIBBON_CONFIG,
@@ -45158,6 +45160,45 @@ function clampBandCount(count2, max2 = 5) {
   if (!Number.isFinite(count2)) return max2;
   return Math.min(max2, Math.max(1, Math.round(count2)));
 }
+function resolveChartGeometryWidth(containerWidth, containerHeight, chartWidth) {
+  const layoutWidth = Number.isFinite(containerWidth) && containerWidth > 0 ? containerWidth : 0;
+  const layoutHeight = Number.isFinite(containerHeight) && containerHeight > 0 ? containerHeight : 0;
+  if (chartWidth != null && Number.isFinite(chartWidth) && chartWidth > 0) {
+    const nominal = Math.max(chartWidth, layoutHeight);
+    if (layoutWidth > 0) {
+      return Math.min(nominal, layoutWidth);
+    }
+    return nominal;
+  }
+  if (layoutWidth > 0) {
+    return layoutWidth;
+  }
+  return layoutHeight;
+}
+function nominalChartWidthPx(chartWidth, renderedHeightPx) {
+  const heightPx = Number.isFinite(renderedHeightPx) && renderedHeightPx > 0 ? renderedHeightPx : 0;
+  return Math.max(chartWidth, heightPx);
+}
+function ribbonEndStaggerNorm(chartWidth, height) {
+  const w = Math.max(chartWidth, height);
+  if (w <= height) return 0;
+  const intPx = (w - height) * RIBBON_END_STAGGER_X;
+  return intPx / w;
+}
+function buildStaggeredEndDraw(bandCount, chartWidth, height) {
+  const validBandCount = clampBandCount(bandCount);
+  const intNorm = ribbonEndStaggerNorm(chartWidth, height);
+  const t = DEFAULT_RIBBON_CONFIG.xEndStagger > 0 ? Math.min(1, intNorm / DEFAULT_RIBBON_CONFIG.xEndStagger) : 0;
+  const rightAnchor = MARK_RIBBON_RIGHT_EDGE - t * (MARK_RIBBON_RIGHT_EDGE - HERO_WIDE_TOP_END);
+  const last = validBandCount - 1;
+  return Array.from({ length: validBandCount }, (_, i) => rightAnchor - (last - i) * intNorm);
+}
+function configWithChartDimensions(base, chartWidth, height) {
+  return {
+    ...base,
+    xEndDraw: buildStaggeredEndDraw(base.xStart.length, chartWidth, height)
+  };
+}
 function buildRibbonGeometry(width, height, labels, config2 = DEFAULT_RIBBON_CONFIG, bandCount = config2.xStart.length, layout = "hero") {
   const totalBands = config2.xStart.length;
   const visibleBands = clampBandCount(bandCount, totalBands);
@@ -45271,10 +45312,12 @@ function EquityRibbonChart({
   animated = true,
   hideLabels = false,
   background = "transparent",
+  gapColor,
   layout = "hero",
   labelColor = ribbonChartLabelDefault,
   className,
   height,
+  chartWidth,
   style
 }) {
   const bandCount = clampBandCount(bandCountProp);
@@ -45304,11 +45347,13 @@ function EquityRibbonChart({
     cancelRevealAnimation();
     const el = rootRef.current;
     if (!el) return;
-    const width = el.clientWidth;
+    const containerWidth = el.clientWidth;
     const heightPx = el.clientHeight;
-    const config2 = layout === "mark" ? MARK_RIBBON_CONFIG : void 0;
+    const geometryWidth = resolveChartGeometryWidth(containerWidth, heightPx, chartWidth);
+    const baseConfig = layout === "mark" ? MARK_RIBBON_CONFIG : DEFAULT_RIBBON_CONFIG;
+    const config2 = configWithChartDimensions(baseConfig, geometryWidth, heightPx);
     const built = buildRibbonGeometry(
-      width,
+      geometryWidth,
       heightPx,
       labelsRef.current,
       config2,
@@ -45325,7 +45370,7 @@ function EquityRibbonChart({
         }))
       );
     }
-  }, [animated, bandCount, cancelRevealAnimation, labelsKey, layout]);
+  }, [animated, bandCount, cancelRevealAnimation, chartWidth, labelsKey, layout]);
   React.useLayoutEffect(() => {
     playedRef.current = false;
     revealScheduleRef.current = 0;
@@ -45432,17 +45477,23 @@ function EquityRibbonChart({
   }, [geometry, runReveal]);
   const suppressLabels = hideLabels || layout === "mark";
   const activeGeometry = geometry && geometry.bandCount === bandCount ? geometry : null;
+  const hasExplicitWidth = chartWidth != null && Number.isFinite(chartWidth) && chartWidth > 0;
   const rootClass = [
     "fairmint-equity-ribbon",
     RIBBON_BACKGROUND_CLASS[background],
     layout === "mark" ? "fairmint-equity-ribbon--layout-mark" : "",
+    hasExplicitWidth ? "fairmint-equity-ribbon--has-chart-width" : "",
     suppressLabels ? "fairmint-equity-ribbon--hidden-labels" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
+  const resolvedGapColor = gapColor ?? (background === "white" ? ribbonChartSurface.white : background === "black" ? ribbonChartSurface.black : ribbonChartSurface.black);
+  const nominalWidthPx = hasExplicitWidth && chartWidth ? nominalChartWidthPx(chartWidth, activeGeometry?.height ?? 0) : null;
   const rootStyle = {
     ...RIBBON_SURFACE_CSS_VARS,
+    "--fairmint-ribbon-gap-color": resolvedGapColor,
     ...style,
-    ...height ? { height } : {}
+    ...height ? { height } : {},
+    ...nominalWidthPx != null ? { "--fairmint-ribbon-nominal-width": `${nominalWidthPx}px` } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: rootClass, style: rootStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -45515,6 +45566,7 @@ function FairmintRibbonMark({
   bandCount = 5,
   gradients,
   background = "black",
+  gapColor,
   labelColor,
   className,
   style
@@ -45526,6 +45578,7 @@ function FairmintRibbonMark({
       bandCount,
       gradients,
       background,
+      gapColor,
       labelColor,
       layout: "mark",
       animated: false,