@lostgradient/cinder 0.12.0 → 0.12.1

package/src/components/action-row/action-row.types.ts

@@ -48,3 +48,47 @@ export type ActionRowProps = Omit<
   /** Additional classes merged with `.cinder-action-row`. */
   class?: string;
 };
+
+/** Schema generator surface for ActionRow — excludes native button attributes except supported styling hooks. */
+export interface ActionRowSchemaProps {
+  /**
+   * Density token surfaced as `data-cinder-density`.
+   * @default "comfortable"
+   */
+  density?: ActionRowDensity;
+  /**
+   * Whether the row is currently selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Accessible state mapping for selected rows.
+   * Use `pressed` for in-page selectable rows and `current` for navigation/current-item rows.
+   * @default "pressed"
+   */
+  selectedState?: ActionRowSelectedState;
+  /**
+   * `aria-current` value used when `selectedState="current"` and `selected` is true.
+   * @default "true"
+   */
+  currentValue?: ActionRowCurrentValue;
+  /**
+   * Native button type.
+   * @default "button"
+   */
+  type?: 'button' | 'submit' | 'reset';
+  /** Leading visual such as an icon, avatar, marker, or status dot. */
+  leading?: Snippet;
+  /** Primary row label. Required so the row has visible text and an accessible name. */
+  title: Snippet;
+  /** Secondary description below the title. */
+  description?: Snippet;
+  /** Tertiary metadata such as timestamp, status text, or a compact badge. */
+  meta?: Snippet;
+  /** Trailing region such as a timestamp, count, badge, chevron, or shortcut hint. */
+  trailing?: Snippet;
+  /** Additional classes merged with `.cinder-action-row`. */
+  class?: string;
+  /** Inline style string applied to the `.cinder-action-row` root. */
+  style?: string;
+}

package/src/components/action-row/action-row.variables.json

@@ -1 +1,11 @@
-[]
+[
+  "--cinder-action-row-body-gap",
+  "--cinder-action-row-description-font-size",
+  "--cinder-action-row-layout-column-gap",
+  "--cinder-action-row-layout-row-gap",
+  "--cinder-action-row-meta-font-size",
+  "--cinder-action-row-padding-block",
+  "--cinder-action-row-padding-inline",
+  "--cinder-action-row-title-font-size",
+  "--cinder-action-row-trailing-gap"
+]

package/src/components/action-row/action-row.variables.ts

@@ -1,3 +1,13 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-action-row-body-gap',
+  '--cinder-action-row-description-font-size',
+  '--cinder-action-row-layout-column-gap',
+  '--cinder-action-row-layout-row-gap',
+  '--cinder-action-row-meta-font-size',
+  '--cinder-action-row-padding-block',
+  '--cinder-action-row-padding-inline',
+  '--cinder-action-row-title-font-size',
+  '--cinder-action-row-trailing-gap',
+];
 
 export default variables;

package/src/components/chat/chat.examples.json

@@ -15,6 +15,12 @@
       "description": "Compare comfortable vs compact density and bubble vs flat visual variant on the same conversationalist-shaped transcript.",
       "code": "<script lang=\"ts\">\n  import {\n    Chat,\n    appendAssistantMessage,\n    appendUserMessage,\n    createConversation,\n  } from '@lostgradient/cinder/chat';\n  import { Select } from '@lostgradient/cinder/select';\n\n  // Build a shared Conversationalist transcript.\n  const baseConversation = appendAssistantMessage(\n    appendUserMessage(\n      appendAssistantMessage(\n        appendUserMessage(\n          createConversation({ id: 'density-variant-chat' }),\n          'What are the density and variant props for?',\n        ),\n        'The `density` prop controls spacing — `comfortable` uses standard padding and gap, `compact` tightens them for data-dense contexts like embedded side panels.\\n\\nThe `variant` prop controls visual treatment — `bubble` uses colored backgrounds to differentiate roles; `flat` removes backgrounds and relies on alignment and the role label instead.',\n      ),\n      'Does compact affect the action buttons?',\n    ),\n    'No — action buttons keep `min-height: var(--cinder-touch-target-min)` regardless of density. Only padding and gap change.',\n  );\n\n  type Density = 'comfortable' | 'compact';\n  type Variant = 'bubble' | 'flat';\n\n  const densityOptions = [\n    { value: 'comfortable', label: 'comfortable' },\n    { value: 'compact', label: 'compact' },\n  ] satisfies { value: Density; label: string }[];\n\n  const variantOptions = [\n    { value: 'bubble', label: 'bubble' },\n    { value: 'flat', label: 'flat' },\n  ] satisfies { value: Variant; label: string }[];\n\n  let density = $state<Density>('comfortable');\n  let variant = $state<Variant>('bubble');\n</script>\n\n<div style=\"display: grid; gap: 1rem;\">\n  <div style=\"display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;\">\n    <Select id=\"density-select\" bind:value={density} options={densityOptions} label=\"Density\" />\n    <Select id=\"variant-select\" bind:value={variant} options={variantOptions} label=\"Variant\" />\n  </div>\n\n  <div style=\"height: 28rem;\">\n    <Chat\n      id=\"density-variant\"\n      conversation={baseConversation}\n      {density}\n      {variant}\n      capabilities={{ attachments: false }}\n    />\n  </div>\n</div>\n"
     },
+    {
+      "id": "full-height-layout",
+      "title": "Full-height layout",
+      "description": "Place Chat in a definite-height flex or grid cell with min-height: 0 so the transcript owns the scroll region.",
+      "code": "<script lang=\"ts\">\n  import {\n    Chat,\n    appendAssistantMessage,\n    appendUserMessage,\n    createConversation,\n  } from '@lostgradient/cinder/chat';\n\n  const conversation = appendAssistantMessage(\n    appendUserMessage(\n      createConversation({ id: 'full-height-layout-chat' }),\n      'Why does the wrapper need min-height: 0?',\n    ),\n    'Chat fills its parent. In a flex or grid app shell, the cell that contains Chat needs a definite height and min-height: 0 so the transcript can scroll internally instead of forcing the page taller.',\n  );\n</script>\n\n<div\n  style=\"display: flex; flex-direction: column; height: 100dvh; max-height: 36rem; border: 1px solid var(--cinder-border-muted);\"\n>\n  <header style=\"padding: 0.75rem; border-block-end: 1px solid var(--cinder-border-muted);\">\n    Support thread\n  </header>\n  <div style=\"flex: 1; min-height: 0;\">\n    <Chat\n      id=\"playground-full-height-layout-chat\"\n      {conversation}\n      capabilities={{ attachments: false }}\n    />\n  </div>\n</div>\n"
+    },
     {
       "id": "interactive-harness",
       "title": "Interactive harness",

package/src/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/src/components/side-navigation/side-navigation.examples.json

@@ -9,6 +9,12 @@
       "description": "A grouped sidebar nav. Uses the SideNavigation namespace API: SideNavigation.Group wraps a collapsible section and SideNavigation.Item renders each link.",
       "code": "<script lang=\"ts\">\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n</script>\n\n<SideNavigation ariaLabel=\"Workspace\">\n  <SideNavigation.Item href=\"/dashboard\">Dashboard</SideNavigation.Item>\n  <SideNavigation.Group label=\"Projects\">\n    <SideNavigation.Item href=\"/projects/phoenix\" active>Phoenix</SideNavigation.Item>\n    <SideNavigation.Item href=\"/projects/atlas\">Atlas</SideNavigation.Item>\n    <SideNavigation.Item href=\"/projects/beacon\">Beacon</SideNavigation.Item>\n  </SideNavigation.Group>\n  <SideNavigation.Group label=\"Settings\">\n    <SideNavigation.Item href=\"/settings/team\">Team</SideNavigation.Item>\n    <SideNavigation.Item href=\"/settings/billing\">Billing</SideNavigation.Item>\n  </SideNavigation.Group>\n</SideNavigation>\n"
     },
+    {
+      "id": "compact-sidebar",
+      "title": "Compact sidebar spacing",
+      "description": "Dense sidebars can tune the SideNavigation list gap through a public CSS variable.",
+      "code": "<script lang=\"ts\">\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n</script>\n\n<div style=\"max-inline-size: 18rem;\">\n  <SideNavigation ariaLabel=\"Inspector sections\" style=\"--cinder-side-navigation-list-gap: 0;\">\n    <SideNavigation.Item href=\"#overview\" active>Overview</SideNavigation.Item>\n    <SideNavigation.Item href=\"#timeline\">Timeline</SideNavigation.Item>\n    <SideNavigation.Item href=\"#payload\">Payload</SideNavigation.Item>\n    <SideNavigation.Group label=\"Artifacts\">\n      <SideNavigation.Item href=\"#source\">Source</SideNavigation.Item>\n      <SideNavigation.Item href=\"#snapshot\">Snapshot</SideNavigation.Item>\n    </SideNavigation.Group>\n  </SideNavigation>\n</div>\n"
+    },
     {
       "id": "docs-sidebar",
       "title": "Docs sidebar",

package/src/components/side-navigation/side-navigation.schema.json

@@ -5,6 +5,14 @@
     "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,
@@ -16,11 +24,6 @@
         "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`."
       }
     ]
   }

package/src/components/side-navigation/side-navigation.schema.ts

@@ -9,6 +9,14 @@ const schema = {
       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,
   required: ['ariaLabel'],
@@ -20,11 +28,6 @@ const schema = {
         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`.',
-      },
     ],
   },
 } satisfies ComponentSchema;

package/src/components/side-navigation/side-navigation.types.ts

@@ -12,3 +12,15 @@ export type SideNavigationProps = Omit<
   /** 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/src/components/side-navigation/side-navigation.variables.json

@@ -1 +1 @@
-[]
+["--cinder-side-navigation-list-gap"]

package/src/components/side-navigation/side-navigation.variables.ts

@@ -1,3 +1,3 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = ['--cinder-side-navigation-list-gap'];
 
 export default variables;

package/src/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/src/components/stat/stat.schema.json

@@ -24,6 +24,10 @@
     "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,

package/src/components/stat/stat.schema.ts

@@ -28,6 +28,10 @@ const schema = {
       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,
   required: ['label', 'value'],

package/src/components/stat/stat.types.ts

@@ -33,3 +33,23 @@ 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/src/components/stat/stat.variables.json

@@ -1 +1,10 @@
-[]
+[
+  "--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"
+]

package/src/components/stat/stat.variables.ts

@@ -1,3 +1,12 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--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',
+];
 
 export default variables;

package/src/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/src/components/stat-group/stat-group.examples.json

@@ -21,6 +21,12 @@
       "description": "The `cards` variant renders each metric as a discrete bordered card, separating the tiles instead of laying them out edge-to-edge in a shared grid.",
       "code": "<script lang=\"ts\">\n  import { StatGroup } from '@lostgradient/cinder/stat-group';\n</script>\n\n<StatGroup label=\"This quarter\" columns={3} variant=\"cards\">\n  <StatGroup.Stat label=\"Projects\" value={42} />\n  <StatGroup.Stat label=\"Members\" value={18} />\n  <StatGroup.Stat label=\"Storage\" value=\"64 GB\" />\n</StatGroup>\n"
     },
+    {
+      "id": "compact-summary",
+      "title": "Compact summary strip",
+      "description": "Dense summaries can tune StatGroup spacing and Stat typography through public CSS variables.",
+      "code": "<script lang=\"ts\">\n  import { StatGroup } from '@lostgradient/cinder/stat-group';\n</script>\n\n<StatGroup\n  label=\"Workflow summary\"\n  columns={4}\n  variant=\"shared-borders\"\n  style=\"--cinder-stat-group-gap: 1px; --cinder-stat-group-shared-cell-padding: var(--cinder-space-2);\"\n>\n  <StatGroup.Stat\n    label=\"Events\"\n    value={128}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Matched\"\n    value={42}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Retries\"\n    value={3}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Latency\"\n    value=\"184 ms\"\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n</StatGroup>\n"
+    },
     {
       "id": "shared-borders-variant",
       "title": "Shared-borders variant",

package/src/components/stat-group/stat-group.schema.json

@@ -19,6 +19,10 @@
     "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,

package/src/components/stat-group/stat-group.schema.ts

@@ -24,6 +24,10 @@ const schema = {
       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,
   metadata: {

package/src/components/stat-group/stat-group.types.ts

@@ -28,3 +28,31 @@ 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/src/components/stat-group/stat-group.variables.json

@@ -1 +1,5 @@
-[]
+[
+  "--cinder-stat-group-card-padding",
+  "--cinder-stat-group-gap",
+  "--cinder-stat-group-shared-cell-padding"
+]

package/src/components/stat-group/stat-group.variables.ts

@@ -1,3 +1,7 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-stat-group-card-padding',
+  '--cinder-stat-group-gap',
+  '--cinder-stat-group-shared-cell-padding',
+];
 
 export default variables;

package/dist/server/index.server-hfx487zj.js

@@ -1,42 +0,0 @@
-import {
-  strictStableContext
-} from "./index.server-bn02606y.js";
-import {
-  classNames
-} from "./index.server-z7nvkz8v.js";
-
-// src/components/accordion-item/accordion-item.svelte
-import * as $ from "svelte/internal/server";
-
-// src/components/accordion/accordion.context.ts
-var [getAccordionContext, setAccordionContext] = strictStableContext("@lostgradient/cinder/accordion/context", "AccordionItem must be rendered inside an Accordion");
-
-// src/components/accordion-item/accordion-item.svelte
-function Accordion_item($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let { id, title, disabled = false, class: className, children } = $$props;
-    const context = getAccordionContext();
-    const isExpanded = $.derived(() => context.expandedIds.includes(id));
-    const headerId = $.derived(() => `${id}-header`);
-    const panelId = $.derived(() => `${id}-panel`);
-    function handleClick() {
-      if (disabled)
-        return;
-      context.toggle(id);
-    }
-    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-accordion-item", className)))}${$.attr("data-cinder-expanded", isExpanded() ? "" : undefined)}${$.attr("data-cinder-disabled", disabled ? "" : undefined)}><h3 class="cinder-accordion-item__heading"><button type="button"${$.attr("id", headerId())} class="cinder-accordion-item__trigger"${$.attr("aria-expanded", isExpanded())}${$.attr("aria-controls", panelId())}${$.attr("disabled", disabled, true)}><span class="cinder-accordion-item__title">${$.escape(title)}</span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> `);
-    if (isExpanded()) {
-      $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div${$.attr("id", panelId())} class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner">`);
-      children($$renderer2);
-      $$renderer2.push(`<!----></div></div>`);
-    } else {
-      $$renderer2.push("<!--[-1-->");
-    }
-    $$renderer2.push(`<!--]--></div>`);
-  }, Accordion_item);
-}
-
-export { setAccordionContext, Accordion_item };
-
-//# debugId=A611BC101408464764756E2164756E21