@lostgradient/cinder 0.11.0 → 0.12.1

package/dist/components/faceted-filter-bar/faceted-filter-bar.schema.js

@@ -64,6 +64,10 @@ var schema = {
       type: "string",
       description: "Current text search query. When provided, the search field is controlled."
     },
+    showSearch: {
+      type: "boolean",
+      description: "Whether to render the leading search field. Defaults to `true`."
+    },
     searchPlaceholder: {
       type: "string",
       description: "Placeholder text shown in the leading search field."
@@ -124,4 +128,4 @@ export {
   faceted_filter_bar_schema_default as default
 };
 
-//# debugId=3999D147AB9F861F64756E2164756E21
+//# debugId=5E8BF6E34E58E39164756E2164756E21

package/dist/components/faceted-filter-bar/faceted-filter-bar.types.d.ts

@@ -66,6 +66,8 @@ export type FacetedFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'
     'aria-label'?: string;
     /** Current text search query. When provided, the search field is controlled. */
     searchQuery?: string;
+    /** Whether to render the leading search field. Defaults to `true`. */
+    showSearch?: boolean;
     /** Placeholder text shown in the leading search field. */
     searchPlaceholder?: string;
     /** Accessible label for the search input. Defaults to 'Search'. */

package/dist/components/faceted-filter-bar/index.js

@@ -862,6 +862,7 @@ var rest_excludes4 = new Set([
   "$$legacy",
   "aria-label",
   "searchQuery",
+  "showSearch",
   "searchPlaceholder",
   "searchAriaLabel",
   "facets",
@@ -881,7 +882,7 @@ var root_42 = $8.from_html(`<div><div class="cinder-faceted-filter-bar__controls
 function Faceted_filter_bar($$anchor, $$props) {
   const generatedId = $8.props_id();
   $8.push($$props, true);
-  let ariaLabel = $8.prop($$props, "aria-label", 3, "Filters"), searchPlaceholder = $8.prop($$props, "searchPlaceholder", 3, "Search…"), searchAriaLabel = $8.prop($$props, "searchAriaLabel", 3, "Search"), facets = $8.prop($$props, "facets", 19, () => []), appliedFilters = $8.prop($$props, "appliedFilters", 19, () => []), disabled = $8.prop($$props, "disabled", 3, false), rest = $8.rest_props($$props, rest_excludes4);
+  let ariaLabel = $8.prop($$props, "aria-label", 3, "Filters"), showSearch = $8.prop($$props, "showSearch", 3, true), searchPlaceholder = $8.prop($$props, "searchPlaceholder", 3, "Search…"), searchAriaLabel = $8.prop($$props, "searchAriaLabel", 3, "Search"), facets = $8.prop($$props, "facets", 19, () => []), appliedFilters = $8.prop($$props, "appliedFilters", 19, () => []), disabled = $8.prop($$props, "disabled", 3, false), rest = $8.rest_props($$props, rest_excludes4);
   const searchId = $8.derived(() => `${generatedId}-search`);
   let rootElement = $8.state(undefined);
   let internalSearchQuery = $8.state("");
@@ -896,7 +897,7 @@ function Faceted_filter_bar($$anchor, $$props) {
       return value;
     return facet.options.find((option) => option.value === value)?.label ?? value;
   }
-  const hasAppliedFilters = $8.derived(() => appliedFilters().length > 0 || $8.get(currentSearchQuery).length > 0);
+  const hasAppliedFilters = $8.derived(() => appliedFilters().length > 0 || showSearch() && $8.get(currentSearchQuery).length > 0);
   const totalActiveCount = $8.derived(() => appliedFilters().length);
   const summaryMessage = $8.derived(() => {
     if ($8.get(totalActiveCount) === 0)
@@ -940,31 +941,39 @@ function Faceted_filter_bar($$anchor, $$props) {
   }), [() => classNames("cinder-faceted-filter-bar", $$props.class)]);
   var div_1 = $8.child(div);
   var node = $8.child(div_1);
-  Search_field(node, {
-    get id() {
-      return $8.get(searchId);
-    },
-    class: "cinder-faceted-filter-bar__search",
-    get value() {
-      return $8.get(currentSearchQuery);
-    },
-    get placeholder() {
-      return searchPlaceholder();
-    },
-    get "aria-label"() {
-      return searchAriaLabel();
-    },
-    get disabled() {
-      return disabled();
-    },
-    oninput: handleSearchInput
-  });
+  {
+    var consequent = ($$anchor2) => {
+      Search_field($$anchor2, {
+        get id() {
+          return $8.get(searchId);
+        },
+        class: "cinder-faceted-filter-bar__search",
+        get value() {
+          return $8.get(currentSearchQuery);
+        },
+        get placeholder() {
+          return searchPlaceholder();
+        },
+        get "aria-label"() {
+          return searchAriaLabel();
+        },
+        get disabled() {
+          return disabled();
+        },
+        oninput: handleSearchInput
+      });
+    };
+    $8.if(node, ($$render) => {
+      if (showSearch())
+        $$render(consequent);
+    });
+  }
   var node_1 = $8.sibling(node, 2);
   $8.each(node_1, 17, facets, (facet) => facet.key, ($$anchor2, facet) => {
-    var fragment = $8.comment();
-    var node_2 = $8.first_child(fragment);
+    var fragment_1 = $8.comment();
+    var node_2 = $8.first_child(fragment_1);
     {
-      var consequent = ($$anchor3) => {
+      var consequent_1 = ($$anchor3) => {
         const selectFacet = $8.derived(() => $8.get(facet));
         var div_2 = root_14();
         var label = $8.child(div_2);
@@ -1012,7 +1021,7 @@ function Faceted_filter_bar($$anchor, $$props) {
         });
         $8.append($$anchor3, div_2);
       };
-      var consequent_1 = ($$anchor3) => {
+      var consequent_2 = ($$anchor3) => {
         var div_3 = root_23();
         var node_4 = $8.child(div_3);
         {
@@ -1029,17 +1038,17 @@ function Faceted_filter_bar($$anchor, $$props) {
       };
       $8.if(node_2, ($$render) => {
         if ($8.get(facet).type === "select")
-          $$render(consequent);
+          $$render(consequent_1);
         else if ($8.get(facet).type === "custom")
-          $$render(consequent_1, 1);
+          $$render(consequent_2, 1);
       });
     }
-    $8.append($$anchor2, fragment);
+    $8.append($$anchor2, fragment_1);
   });
   $8.reset(div_1);
   var node_5 = $8.sibling(div_1, 2);
   {
-    var consequent_2 = ($$anchor2) => {
+    var consequent_3 = ($$anchor2) => {
       var div_4 = root_33();
       var node_6 = $8.child(div_4);
       $8.each(node_6, 17, appliedFilters, (filter) => filter.key, ($$anchor3, filter) => {
@@ -1084,7 +1093,7 @@ function Faceted_filter_bar($$anchor, $$props) {
     };
     $8.if(node_5, ($$render) => {
       if ($8.get(hasAppliedFilters))
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
   var node_8 = $8.sibling(node_5, 2);
@@ -1108,4 +1117,4 @@ export {
   Faceted_filter_bar as FacetedFilterBar
 };
 
-//# debugId=56374F25339661AB64756E2164756E21
+//# debugId=87F490947F95C08764756E2164756E21

package/dist/components/navigation-bar/index.js

@@ -275,14 +275,11 @@ function Navigation_bar($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var div = root();
       var node_1 = $.child(div);
-      {
-        let $0 = $.derived(() => ({
-          "aria-expanded": mobileMenuOpen() ? "true" : "false",
-          "aria-controls": regionId,
-          ...true_default ? { onclick: handleToggle } : {}
-        }));
-        $.snippet(node_1, () => $$props.menuToggle, () => $.get($0));
-      }
+      $.snippet(node_1, () => $$props.menuToggle, () => ({
+        "aria-expanded": mobileMenuOpen() ? "true" : "false",
+        "aria-controls": regionId,
+        onclick: handleToggle
+      }));
       $.reset(div);
       $.append($$anchor2, div);
     };
@@ -310,14 +307,11 @@ function Navigation_bar($$anchor, $$props) {
     var consequent_2 = ($$anchor2) => {
       var div_2 = root();
       var node_5 = $.child(div_2);
-      {
-        let $0 = $.derived(() => ({
-          "aria-expanded": mobileMenuOpen() ? "true" : "false",
-          "aria-controls": regionId,
-          ...true_default ? { onclick: handleToggle } : {}
-        }));
-        $.snippet(node_5, () => $$props.menuToggle, () => $.get($0));
-      }
+      $.snippet(node_5, () => $$props.menuToggle, () => ({
+        "aria-expanded": mobileMenuOpen() ? "true" : "false",
+        "aria-controls": regionId,
+        onclick: handleToggle
+      }));
       $.reset(div_2);
       $.append($$anchor2, div_2);
     };
@@ -367,4 +361,4 @@ export {
   Navigation_bar as NavigationBar
 };
 
-//# debugId=D071FB931C6D395164756E2164756E21
+//# debugId=1BB3A9EE76EE8C6964756E2164756E21

package/dist/components/run-step-timeline/index.js

@@ -670,6 +670,65 @@ function Status_dot($$anchor, $$props) {
 }
 
 // src/components/run-step-timeline/run-step-timeline.utilities.ts
+function relocateCompensationSteps(steps) {
+  return relocateSiblingItems(steps, (step) => step);
+}
+function relocateSiblingItems(items, getStep) {
+  if (!items.some((item) => getStep(item)?.compensates !== undefined))
+    return items;
+  const stepById = new Map;
+  for (const item of items) {
+    const step = getStep(item);
+    if (step !== undefined) {
+      stepById.set(step.id, step);
+    }
+  }
+  const canRelocate = (step) => {
+    const visited = new Set([step.id]);
+    let targetId = step.compensates;
+    while (targetId !== undefined) {
+      const target = stepById.get(targetId);
+      if (target === undefined || visited.has(targetId))
+        return false;
+      visited.add(targetId);
+      targetId = target.compensates;
+    }
+    return true;
+  };
+  const relocatable = new Set;
+  const compensationsByTarget = new Map;
+  for (const item of items) {
+    const step = getStep(item);
+    if (step === undefined || step.compensates === undefined || !canRelocate(step))
+      continue;
+    relocatable.add(step);
+    const compensations = compensationsByTarget.get(step.compensates) ?? [];
+    compensations.push(item);
+    compensationsByTarget.set(step.compensates, compensations);
+  }
+  const result = [];
+  const appendWithCompensations = (item) => {
+    result.push(item);
+    const step = getStep(item);
+    if (step === undefined)
+      return;
+    for (const compensation of compensationsByTarget.get(step.id) ?? []) {
+      appendWithCompensations(compensation);
+    }
+  };
+  for (const item of items) {
+    const step = getStep(item);
+    if (step === undefined || !relocatable.has(step))
+      appendWithCompensations(item);
+  }
+  return result;
+}
+function relocateCompensationEntries(entries) {
+  return relocateSiblingItems(entries, (entry) => isBranchGroup(entry) ? undefined : entry);
+}
+function isBranchGroup(entry) {
+  return "kind" in entry && entry.kind === "branch";
+}
 function statusDotStatus(status) {
   switch (status) {
     case "succeeded":
@@ -1254,8 +1313,8 @@ function Run_step_timeline($$anchor, $$props) {
   const MAX_NESTED_STEP_DEPTH = 3;
   let rest = $8.rest_props($$props, rest_excludes5);
   const resolvedAriaLabel = $8.derived(() => $$props["aria-labelledby"] === undefined && $$props["aria-label"] === undefined ? $$props.label : $$props["aria-label"]);
-  const renderedEntries = $8.derived(() => flattenEntries($$props.steps));
-  function isBranchGroup(entry) {
+  const renderedEntries = $8.derived(() => flattenEntries(relocateCompensationEntries($$props.steps)));
+  function isBranchGroup2(entry) {
     return "kind" in entry && entry.kind === "branch";
   }
   function flattenEntries(entries) {
@@ -1268,7 +1327,7 @@ function Run_step_timeline($$anchor, $$props) {
       stepRun = [];
     };
     for (const entry of entries) {
-      if (isBranchGroup(entry)) {
+      if (isBranchGroup2(entry)) {
         flushRun();
         result.push({
           kind: "branch",
@@ -1330,7 +1389,7 @@ function Run_step_timeline($$anchor, $$props) {
   }
   function flattenSteps(list, pathPrefix) {
     const rows = [];
-    appendRunStepRows(rows, list, 0, pathPrefix);
+    appendRunStepRows(rows, relocateCompensationSteps(list), 0, pathPrefix);
     const currentRowIndex = deepestCurrentStepIndex(rows);
     const labelByPathKey = new Map;
     for (const row of rows) {
@@ -1368,7 +1427,7 @@ function Run_step_timeline($$anchor, $$props) {
       rows.push({ kind: "step", step, depth, pathKey });
       if (step.children && step.children.length > 0) {
         if (depth < MAX_NESTED_STEP_DEPTH) {
-          appendRunStepRows(rows, step.children, depth + 1, pathKey);
+          appendRunStepRows(rows, relocateCompensationSteps(step.children), depth + 1, pathKey);
         } else {
           const hiddenSummary = summarizeNestedRunSteps(step.children);
           rows.push({
@@ -1611,4 +1670,4 @@ export {
   Run_step_timeline as RunStepTimeline
 };
 
-//# debugId=9EFCA6AA2F9089A264756E2164756E21
+//# debugId=77801BC78A33372764756E2164756E21

package/dist/components/run-step-timeline/run-step-timeline.utilities.d.ts

@@ -1,5 +1,13 @@
 import type { StatusDotStatus } from '../status-dot/status-dot.types.ts';
-import type { RunStep, RunStepBranchGroup, RunStepBranchLane, RunStepBranchLaneOutcome, RunStepStatus } from './run-step-timeline.types.ts';
+import type { RunStep, RunStepBranchGroup, RunStepBranchLane, RunStepBranchLaneOutcome, RunStepStatus, RunStepTimelineEntry } from './run-step-timeline.types.ts';
+/**
+ * Relocate resolved compensation steps immediately after the subtree of the
+ * sibling they reverse. Unresolved, self-referential, and cyclic links retain
+ * consumer order. Multiple compensations retain their relative input order.
+ */
+export declare function relocateCompensationSteps(steps: RunStep[]): RunStep[];
+/** Relocate top-level compensations while preserving branch rows as rail entries. */
+export declare function relocateCompensationEntries(entries: RunStepTimelineEntry[]): RunStepTimelineEntry[];
 /** Badge variants used for the per-step status chip. */
 export type RunStepBadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
 /** Map a generic {@link RunStepStatus} onto a StatusDot status token. */

package/dist/components/side-navigation/side-navigation.css

@@ -13,6 +13,7 @@
  * ======================================== */
 
   .cinder-side-navigation {
+    --cinder-side-navigation-list-gap: var(--cinder-space-1);
     display: block;
   }
 
@@ -22,7 +23,7 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-1);
+    gap: var(--cinder-side-navigation-list-gap, var(--cinder-space-1));
   }
 
   /* ----------------------------------------

package/dist/components/side-navigation/side-navigation.schema.js

@@ -59,6 +59,14 @@ var schema = {
     ariaLabel: {
       type: "string",
       description: "Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS class merged with `.cinder-side-navigation`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-side-navigation` root."
     }
   },
   additionalProperties: false,
@@ -70,11 +78,6 @@ var schema = {
         reason: "function-or-snippet",
         required: true,
         description: "Must be <li> elements containing NavigationItem and/or SideNavigationGroup."
-      },
-      {
-        name: "class",
-        reason: "unknown-shape",
-        description: "Additional CSS class merged with `.cinder-side-navigation`."
       }
     ]
   }
@@ -84,4 +87,4 @@ export {
   side_navigation_schema_default as default
 };
 
-//# debugId=F505A75B9F06310E64756E2164756E21
+//# debugId=8436A7F5FC75585064756E2164756E21

package/dist/components/side-navigation/side-navigation.types.d.ts

@@ -9,3 +9,14 @@ export type SideNavigationProps = Omit<HTMLAttributes<HTMLElement>, 'aria-label'
     /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
     children: Snippet;
 };
+/** Schema generator surface for SideNavigation — excludes native attributes except supported styling hooks. */
+export interface SideNavigationSchemaProps {
+    /** Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page. */
+    ariaLabel: string;
+    /** Additional CSS class merged with `.cinder-side-navigation`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-side-navigation` root. */
+    style?: string;
+    /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
+    children: Snippet;
+}

package/dist/components/side-navigation/side-navigation.variables.js

@@ -52,10 +52,10 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/side-navigation/side-navigation.variables.ts
-var variables = [];
+var variables = ["--cinder-side-navigation-list-gap"];
 var side_navigation_variables_default = variables;
 export {
   side_navigation_variables_default as default
 };
 
-//# debugId=641D501BF9DA807764756E2164756E21
+//# debugId=E3DF58EF8E02E02F64756E2164756E21

package/dist/components/stat/stat.css

@@ -1,17 +1,25 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat {
+    --cinder-stat-row-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-column-gap: var(--cinder-space-3, 0.75rem);
+    --cinder-stat-label-font-size: var(--cinder-text-sm);
+    --cinder-stat-value-font-size: var(--cinder-text-4xl);
+    --cinder-stat-value-font-weight: var(--cinder-font-semibold);
+    --cinder-stat-value-line-height: 1.1;
+    --cinder-stat-change-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-change-font-size: var(--cinder-text-sm);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
-    row-gap: var(--cinder-space-1, 0.25rem);
+    row-gap: var(--cinder-stat-row-gap, var(--cinder-space-1, 0.25rem));
     align-items: start;
     color: var(--cinder-text);
   }
 
   .cinder-stat[data-cinder-has-icon] {
     grid-template-columns: auto 1fr;
-    column-gap: var(--cinder-space-3, 0.75rem);
+    column-gap: var(--cinder-stat-column-gap, var(--cinder-space-3, 0.75rem));
   }
 
   .cinder-stat__icon {
@@ -25,7 +33,7 @@
   }
 
   .cinder-stat__label {
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-stat-label-font-size, var(--cinder-text-sm));
     color: var(--cinder-text-muted);
   }
 
@@ -34,10 +42,10 @@
   }
 
   .cinder-stat__value {
-    font-size: var(--cinder-text-4xl);
-    font-weight: var(--cinder-font-semibold);
+    font-size: var(--cinder-stat-value-font-size, var(--cinder-text-4xl));
+    font-weight: var(--cinder-stat-value-font-weight, var(--cinder-font-semibold));
     font-variant-numeric: tabular-nums;
-    line-height: 1.1;
+    line-height: var(--cinder-stat-value-line-height, 1.1);
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__value {
@@ -47,8 +55,8 @@
   .cinder-stat__change {
     display: inline-flex;
     align-items: center;
-    gap: var(--cinder-space-1, 0.25rem);
-    font-size: var(--cinder-text-sm);
+    gap: var(--cinder-stat-change-gap, var(--cinder-space-1, 0.25rem));
+    font-size: var(--cinder-stat-change-font-size, var(--cinder-text-sm));
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__change {

package/dist/components/stat/stat.schema.js

@@ -78,6 +78,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-stat`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-stat` root."
     }
   },
   additionalProperties: false,
@@ -107,4 +111,4 @@ export {
   stat_schema_default as default
 };
 
-//# debugId=C0F5E1E3C641FA3864756E2164756E21
+//# debugId=429D4BA8E0F6656864756E2164756E21

package/dist/components/stat/stat.types.d.ts

@@ -33,3 +33,22 @@ export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Additional class names merged with `.cinder-stat`. */
     class?: string;
 };
+/** Schema generator surface for Stat — excludes native attributes except supported styling hooks. */
+export interface StatSchemaProps {
+    /** Short label describing the metric, e.g. "Monthly Revenue". */
+    label: string;
+    /** The statistic. Strings rendered verbatim; numbers formatted via formatNumber. */
+    value: string | number;
+    /** Optional change indicator with direction and accessible wording. */
+    change?: StatChange;
+    /** Optional leading icon snippet (decorative — wrapper is aria-hidden). */
+    icon?: Snippet;
+    /** Intl.NumberFormat options applied only when `value` is a number. */
+    valueFormatOptions?: Intl.NumberFormatOptions;
+    /** Locale forwarded to formatNumber. Defaults to the nearest LocaleProvider locale, then en-US. */
+    valueLocale?: string;
+    /** Additional class names merged with `.cinder-stat`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-stat` root. */
+    style?: string;
+}

package/dist/components/stat/stat.variables.js

@@ -52,10 +52,19 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/stat/stat.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-stat-change-font-size",
+  "--cinder-stat-change-gap",
+  "--cinder-stat-column-gap",
+  "--cinder-stat-label-font-size",
+  "--cinder-stat-row-gap",
+  "--cinder-stat-value-font-size",
+  "--cinder-stat-value-font-weight",
+  "--cinder-stat-value-line-height"
+];
 var stat_variables_default = variables;
 export {
   stat_variables_default as default
 };
 
-//# debugId=D0CE6D1B1C484C6664756E2164756E21
+//# debugId=7108937A7CEA419964756E2164756E21

package/dist/components/stat-group/stat-group.css

@@ -1,8 +1,11 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat-group {
+    --cinder-stat-group-gap: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-card-padding: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-shared-cell-padding: var(--cinder-space-4, 1rem);
     display: grid;
-    gap: var(--cinder-space-4, 1rem);
+    gap: var(--cinder-stat-group-gap, var(--cinder-space-4, 1rem));
     /* Query the group's own inline size so fixed column counts can collapse when
        the group is narrow — even inside a wide viewport (RESPONSIVE-POLICY.md). */
     container-type: inline-size;
@@ -50,7 +53,7 @@
 
   /* variant: cards — each stat gets a card-style border, background, and shadow */
   .cinder-stat-group[data-cinder-variant='cards'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-card-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
@@ -63,15 +66,15 @@
  * gap with the surface color, avoiding nth-child math for any column count.
  */
   .cinder-stat-group[data-cinder-variant='shared-borders'] {
+    --cinder-stat-group-gap: 1px;
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
     overflow: hidden;
     background: var(--cinder-border);
-    gap: 1px;
   }
 
   .cinder-stat-group[data-cinder-variant='shared-borders'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-shared-cell-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
   }
 }

package/dist/components/stat-group/stat-group.schema.js

@@ -73,6 +73,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-stat-group`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-stat-group` root."
     }
   },
   additionalProperties: false,
@@ -92,4 +96,4 @@ export {
   stat_group_schema_default as default
 };
 
-//# debugId=A2F52548CE94E2A964756E2164756E21
+//# debugId=0D9871ECB97A1A0D64756E2164756E21

package/dist/components/stat-group/stat-group.types.d.ts

@@ -28,3 +28,30 @@ export type StatGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Additional class names merged with `.cinder-stat-group`. */
     class?: string;
 };
+/** Schema generator surface for StatGroup — excludes native attributes except supported styling hooks. */
+export interface StatGroupSchemaProps {
+    /**
+     * Optional accessible label for the whole stat set. When provided, the
+     * container becomes `role="group"` and uses this value as its accessible name.
+     */
+    label?: string;
+    /**
+     * Grid column count. `'auto'` uses auto-fit with minmax for responsive layout.
+     * @default 'auto'
+     */
+    columns?: StatGroupColumns;
+    /**
+     * Visual variant; surfaced as `data-cinder-variant` for CSS styling.
+     * - `'default'` — plain grid, no borders or backgrounds.
+     * - `'cards'` — each stat gets a card-style border and shadow.
+     * - `'shared-borders'` — single outer border with 1px gap dividers between stats.
+     * @default 'default'
+     */
+    variant?: StatGroupVariant;
+    /** Stat children, typically one or more `<Stat>` components. */
+    children: Snippet;
+    /** Additional class names merged with `.cinder-stat-group`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-stat-group` root. */
+    style?: string;
+}

package/dist/components/stat-group/stat-group.variables.js

@@ -52,10 +52,14 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/stat-group/stat-group.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-stat-group-card-padding",
+  "--cinder-stat-group-gap",
+  "--cinder-stat-group-shared-cell-padding"
+];
 var stat_group_variables_default = variables;
 export {
   stat_group_variables_default as default
 };
 
-//# debugId=D3FFE80178FC6D7064756E2164756E21
+//# debugId=1CF303317D7DF3EA64756E2164756E21