@lostgradient/cinder 0.12.0 → 0.12.1

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

package/dist/index.js

@@ -5938,15 +5938,16 @@ function strictStableContext(key, missingMessage) {
 var [getAccordionContext, setAccordionContext] = strictStableContext("@lostgradient/cinder/accordion/context", "AccordionItem must be rendered inside an Accordion");
 
 // src/components/accordion-item/accordion-item.svelte
-var root4 = $53.from_html(`<div class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner"><!></div></div>`);
-var root_12 = $53.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__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> <!></div>`);
+var root4 = $53.from_html(`<div class="cinder-accordion-item__panel-inner"><!></div>`);
+var root_12 = $53.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__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> <div class="cinder-accordion-item__panel"><!></div></div>`);
 function Accordion_item($$anchor, $$props) {
+  const instanceId = $53.props_id();
   $53.push($$props, true);
   let disabled = $53.prop($$props, "disabled", 3, false);
   const context = getAccordionContext();
   const isExpanded = $53.derived(() => context.expandedIds.includes($$props.id));
-  const headerId = $53.derived(() => `${$$props.id}-header`);
-  const panelId = $53.derived(() => `${$$props.id}-panel`);
+  const headerId = $53.derived(() => `${instanceId}-header`);
+  const panelId = $53.derived(() => `${instanceId}-panel`);
   function handleClick() {
     if (disabled())
       return;
@@ -5961,26 +5962,26 @@ function Accordion_item($$anchor, $$props) {
   $53.next(2);
   $53.reset(button);
   $53.reset(h3);
-  var node = $53.sibling(h3, 2);
+  var div_1 = $53.sibling(h3, 2);
+  var node = $53.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root4();
-      var div_2 = $53.child(div_1);
+      var div_2 = root4();
       var node_1 = $53.child(div_2);
       $53.snippet(node_1, () => $$props.children);
       $53.reset(div_2);
-      $53.reset(div_1);
-      $53.template_effect(() => $53.set_attribute(div_1, "id", $53.get(panelId)));
-      $53.append($$anchor2, div_1);
+      $53.append($$anchor2, div_2);
     };
     $53.if(node, ($$render) => {
       if ($53.get(isExpanded))
         $$render(consequent);
     });
   }
+  $53.reset(div_1);
   $53.reset(div);
   $53.template_effect(($0) => {
     $53.set_class(div, 1, $0);
+    $53.set_style(div, $$props.style);
     $53.set_attribute(div, "data-cinder-expanded", $53.get(isExpanded) ? "" : undefined);
     $53.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
     $53.set_attribute(button, "id", $53.get(headerId));
@@ -5988,6 +5989,8 @@ function Accordion_item($$anchor, $$props) {
     $53.set_attribute(button, "aria-controls", $53.get(panelId));
     button.disabled = disabled();
     $53.set_text(text, $$props.title);
+    $53.set_attribute(div_1, "id", $53.get(panelId));
+    $53.set_attribute(div_1, "hidden", !$53.get(isExpanded));
   }, [
     () => $53.clsx(classNames("cinder-accordion-item", $$props.class))
   ]);
@@ -73030,4 +73033,4 @@ export {
   AccessGateExport as AccessGate
 };
 
-//# debugId=88236082BE2EAC6564756E2164756E21
+//# debugId=85F50876735F032E64756E2164756E21

package/dist/server/components/accordion/index.js

@@ -1,9 +1,9 @@
 import {
   Accordion,
   accordion_default
-} from "../../index.server-y83kqayt.js";
+} from "../../index.server-h3nzp8g8.js";
 import"../../index.server-p3aw22qv.js";
-import"../../index.server-hfx487zj.js";
+import"../../index.server-jwvxxjvc.js";
 import"../../index.server-bn02606y.js";
 import"../../index.server-z7nvkz8v.js";
 import"../../index.server-0v6na3yp.js";

package/dist/server/components/accordion-item/index.js

@@ -1,9 +1,9 @@
 import {
   accordion_item_default
-} from "../../index.server-cf6pxeyg.js";
+} from "../../index.server-0rzd71e0.js";
 import {
   Accordion_item
-} from "../../index.server-hfx487zj.js";
+} from "../../index.server-jwvxxjvc.js";
 import"../../index.server-bn02606y.js";
 import"../../index.server-z7nvkz8v.js";
 import"../../index.server-0v6na3yp.js";

package/dist/server/index.js

@@ -707,12 +707,12 @@ import"./index.server-rqe5bqgm.js";
 import"./index.server-yq9evnp4.js";
 import {
   accordion_default
-} from "./index.server-y83kqayt.js";
+} from "./index.server-h3nzp8g8.js";
 import"./index.server-p3aw22qv.js";
 import {
   accordion_item_default
-} from "./index.server-cf6pxeyg.js";
-import"./index.server-hfx487zj.js";
+} from "./index.server-0rzd71e0.js";
+import"./index.server-jwvxxjvc.js";
 import"./index.server-bn02606y.js";
 import {
   action_row_default

package/dist/server/{index.server-cf6pxeyg.js → index.server-0rzd71e0.js}

@@ -1,6 +1,6 @@
 import {
   Accordion_item
-} from "./index.server-hfx487zj.js";
+} from "./index.server-jwvxxjvc.js";
 
 // src/components/accordion-item/index.ts
 var accordion_item_default = Accordion_item;

package/dist/server/{index.server-y83kqayt.js → index.server-h3nzp8g8.js}

@@ -4,7 +4,7 @@ import {
 import {
   Accordion_item,
   setAccordionContext
-} from "./index.server-hfx487zj.js";
+} from "./index.server-jwvxxjvc.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";

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

@@ -0,0 +1,50 @@
+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) => {
+    const instanceId = $.props_id($$renderer2);
+    let {
+      id,
+      title,
+      disabled = false,
+      class: className,
+      style,
+      children
+    } = $$props;
+    const context = getAccordionContext();
+    const isExpanded = $.derived(() => context.expandedIds.includes(id));
+    const headerId = $.derived(() => `${instanceId}-header`);
+    const panelId = $.derived(() => `${instanceId}-panel`);
+    function handleClick() {
+      if (disabled)
+        return;
+      context.toggle(id);
+    }
+    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-accordion-item", className)))}${$.attr_style(style)}${$.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> <div${$.attr("id", panelId())} class="cinder-accordion-item__panel"${$.attr("hidden", !isExpanded())}>`);
+    if (isExpanded()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-accordion-item__panel-inner">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></div>`);
+  }, Accordion_item);
+}
+
+export { setAccordionContext, Accordion_item };
+
+//# debugId=D9BC38A69C5EE29564756E2164756E21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "A Svelte 5 component library and design system focused on accessibility, theming, and per-component tree-shaking.",
   "keywords": [
     "svelte",

package/src/components/accordion/accordion.examples.json

@@ -10,6 +10,12 @@
       "featured": true,
       "code": "<script lang=\"ts\">\n  import { Accordion } from '@lostgradient/cinder/accordion';\n\n  let expandedIds = $state<string[]>([]);\n</script>\n\n<Accordion bind:expandedIds>\n  <Accordion.Item id=\"item-1\" title=\"What is Cinder?\">\n    Cinder is a Svelte 5 design system built for composability and accessibility.\n  </Accordion.Item>\n  <Accordion.Item id=\"item-2\" title=\"How do I install it?\">\n    Run <code>bun add @lostgradient/cinder</code> and import components from\n    <code>@lostgradient/cinder</code> or via subpath imports.\n  </Accordion.Item>\n  <Accordion.Item id=\"item-3\" title=\"Does it support SSR?\">\n    Yes — every component is SSR-safe and renders meaningful HTML before hydration.\n  </Accordion.Item>\n</Accordion>\n"
     },
+    {
+      "id": "dense-inspector",
+      "title": "Dense inspector accordion",
+      "description": "Inspector panels can compact trigger and panel spacing with public Accordion.Item CSS variables.",
+      "code": "<script lang=\"ts\">\n  import { Accordion } from '@lostgradient/cinder/accordion';\n\n  let expandedIds = $state<string[]>(['selection', 'metadata']);\n</script>\n\n<div style=\"max-inline-size: 32rem;\">\n  <Accordion multiple bind:expandedIds>\n    <Accordion.Item\n      id=\"selection\"\n      title=\"Selection\"\n      style=\"--cinder-accordion-item-trigger-padding-block: var(--cinder-space-2); --cinder-accordion-item-trigger-padding-inline: var(--cinder-space-3); --cinder-accordion-item-trigger-gap: var(--cinder-space-2); --cinder-accordion-item-trigger-font-size: var(--cinder-text-sm); --cinder-accordion-item-panel-inner-padding-block-start: var(--cinder-space-2); --cinder-accordion-item-panel-inner-padding-block-end: var(--cinder-space-3); --cinder-accordion-item-panel-inner-padding-inline: var(--cinder-space-3); --cinder-accordion-item-panel-font-size: var(--cinder-text-sm);\"\n    >\n      Current workflow edge, matched transition, and queued activity identifiers.\n    </Accordion.Item>\n    <Accordion.Item\n      id=\"metadata\"\n      title=\"Metadata\"\n      style=\"--cinder-accordion-item-trigger-padding-block: var(--cinder-space-2); --cinder-accordion-item-trigger-padding-inline: var(--cinder-space-3); --cinder-accordion-item-trigger-gap: var(--cinder-space-2); --cinder-accordion-item-trigger-font-size: var(--cinder-text-sm); --cinder-accordion-item-panel-inner-padding-block-start: var(--cinder-space-2); --cinder-accordion-item-panel-inner-padding-block-end: var(--cinder-space-3); --cinder-accordion-item-panel-inner-padding-inline: var(--cinder-space-3); --cinder-accordion-item-panel-font-size: var(--cinder-text-sm);\"\n    >\n      Retry policy, namespace, task queue, and worker lease timing.\n    </Accordion.Item>\n    <Accordion.Item\n      id=\"payload\"\n      title=\"Payload\"\n      style=\"--cinder-accordion-item-trigger-padding-block: var(--cinder-space-2); --cinder-accordion-item-trigger-padding-inline: var(--cinder-space-3); --cinder-accordion-item-trigger-gap: var(--cinder-space-2); --cinder-accordion-item-trigger-font-size: var(--cinder-text-sm); --cinder-accordion-item-panel-inner-padding-block-start: var(--cinder-space-2); --cinder-accordion-item-panel-inner-padding-block-end: var(--cinder-space-3); --cinder-accordion-item-panel-inner-padding-inline: var(--cinder-space-3); --cinder-accordion-item-panel-font-size: var(--cinder-text-sm);\"\n    >\n      Normalized event fields and source artifact references.\n    </Accordion.Item>\n  </Accordion>\n</div>\n"
+    },
     {
       "id": "disabled",
       "title": "Disabled item",

package/src/components/accordion-item/accordion-item.css

@@ -5,6 +5,16 @@
  * ======================================== */
 
   .cinder-accordion-item {
+    --cinder-accordion-item-trigger-gap: var(--cinder-space-4);
+    --cinder-accordion-item-trigger-padding-block: var(--cinder-space-4);
+    --cinder-accordion-item-trigger-padding-inline: var(--cinder-space-5);
+    --cinder-accordion-item-trigger-font-size: var(--cinder-text-base);
+    --cinder-accordion-item-trigger-font-weight: var(--cinder-font-medium);
+    --cinder-accordion-item-panel-inner-padding-block-start: var(--cinder-space-4);
+    --cinder-accordion-item-panel-inner-padding-block-end: var(--cinder-space-5);
+    --cinder-accordion-item-panel-inner-padding-inline: var(--cinder-space-5);
+    --cinder-accordion-item-panel-font-size: var(--cinder-text-base);
+    --cinder-accordion-item-panel-line-height: var(--cinder-leading-normal);
     border-block-end: 1px solid var(--cinder-border);
   }
 
@@ -31,12 +41,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--cinder-space-4);
+    gap: var(--cinder-accordion-item-trigger-gap, var(--cinder-space-4));
     width: 100%;
-    padding: var(--cinder-space-4) var(--cinder-space-5);
+    padding: var(--cinder-accordion-item-trigger-padding-block, var(--cinder-space-4))
+      var(--cinder-accordion-item-trigger-padding-inline, var(--cinder-space-5));
 
-    font-size: var(--cinder-text-base);
-    font-weight: var(--cinder-font-medium);
+    font-size: var(--cinder-accordion-item-trigger-font-size, var(--cinder-text-base));
+    font-weight: var(--cinder-accordion-item-trigger-font-weight, var(--cinder-font-medium));
     line-height: var(--cinder-leading-snug);
     color: var(--cinder-text);
     text-align: start;
@@ -146,9 +157,11 @@
   }
 
   .cinder-accordion-item__panel-inner {
-    padding: var(--cinder-space-4) var(--cinder-space-5) var(--cinder-space-5);
-    font-size: var(--cinder-text-base);
-    line-height: var(--cinder-leading-normal);
+    padding: var(--cinder-accordion-item-panel-inner-padding-block-start, var(--cinder-space-4))
+      var(--cinder-accordion-item-panel-inner-padding-inline, var(--cinder-space-5))
+      var(--cinder-accordion-item-panel-inner-padding-block-end, var(--cinder-space-5));
+    font-size: var(--cinder-accordion-item-panel-font-size, var(--cinder-text-base));
+    line-height: var(--cinder-accordion-item-panel-line-height, var(--cinder-leading-normal));
     color: var(--cinder-text-muted);
   }
 

package/src/components/accordion-item/accordion-item.schema.json

@@ -18,6 +18,10 @@
     "class": {
       "type": "string",
       "description": "Additional CSS class merged with `.cinder-accordion-item`."
+    },
+    "style": {
+      "type": "string",
+      "description": "Inline style string applied to the `.cinder-accordion-item` root."
     }
   },
   "additionalProperties": false,

package/src/components/accordion-item/accordion-item.schema.ts

@@ -21,6 +21,10 @@ const schema = {
       type: 'string',
       description: 'Additional CSS class merged with `.cinder-accordion-item`.',
     },
+    style: {
+      type: 'string',
+      description: 'Inline style string applied to the `.cinder-accordion-item` root.',
+    },
   },
   additionalProperties: false,
   required: ['id', 'title'],

package/src/components/accordion-item/accordion-item.svelte

@@ -5,11 +5,12 @@ export {};
 <script lang="ts">
 import { getAccordionContext } from '../accordion/accordion.context.ts';
 import { classNames } from '../../utilities/class-names.ts';
-let { id, title, disabled = false, class: className, children } = $props();
+let { id, title, disabled = false, class: className, style, children, } = $props();
 const context = getAccordionContext();
+const instanceId = $props.id();
 const isExpanded = $derived(context.expandedIds.includes(id));
-const headerId = $derived(`${id}-header`);
-const panelId = $derived(`${id}-panel`);
+const headerId = $derived(`${instanceId}-header`);
+const panelId = $derived(`${instanceId}-panel`);
 function handleClick() {
     if (disabled)
         return;
@@ -19,6 +20,7 @@ function handleClick() {
 
 <div
   class={classNames('cinder-accordion-item', className)}
+  {style}
   data-cinder-expanded={isExpanded ? '' : undefined}
   data-cinder-disabled={disabled ? '' : undefined}
 >
@@ -50,11 +52,11 @@ function handleClick() {
     </button>
   </h3>
 
-  {#if isExpanded}
-    <div id={panelId} class="cinder-accordion-item__panel">
+  <div id={panelId} class="cinder-accordion-item__panel" hidden={!isExpanded}>
+    {#if isExpanded}
       <div class="cinder-accordion-item__panel-inner">
         {@render children()}
       </div>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </div>

package/src/components/accordion-item/accordion-item.types.ts

@@ -13,6 +13,8 @@ export type AccordionItemProps = {
   disabled?: boolean;
   /** Additional CSS class merged with `.cinder-accordion-item`. */
   class?: string;
+  /** Inline style string applied to the `.cinder-accordion-item` root. */
+  style?: string;
   /** Panel content rendered when the item is expanded. */
   children: Snippet;
 };
@@ -30,4 +32,6 @@ export interface AccordionItemSchemaProps {
   disabled?: boolean;
   /** Additional CSS class merged with `.cinder-accordion-item`. */
   class?: string;
+  /** Inline style string applied to the `.cinder-accordion-item` root. */
+  style?: string;
 }

package/src/components/accordion-item/accordion-item.variables.json

@@ -1 +1,12 @@
-[]
+[
+  "--cinder-accordion-item-panel-font-size",
+  "--cinder-accordion-item-panel-inner-padding-block-end",
+  "--cinder-accordion-item-panel-inner-padding-block-start",
+  "--cinder-accordion-item-panel-inner-padding-inline",
+  "--cinder-accordion-item-panel-line-height",
+  "--cinder-accordion-item-trigger-font-size",
+  "--cinder-accordion-item-trigger-font-weight",
+  "--cinder-accordion-item-trigger-gap",
+  "--cinder-accordion-item-trigger-padding-block",
+  "--cinder-accordion-item-trigger-padding-inline"
+]

package/src/components/accordion-item/accordion-item.variables.ts

@@ -1,3 +1,14 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-accordion-item-panel-font-size',
+  '--cinder-accordion-item-panel-inner-padding-block-end',
+  '--cinder-accordion-item-panel-inner-padding-block-start',
+  '--cinder-accordion-item-panel-inner-padding-inline',
+  '--cinder-accordion-item-panel-line-height',
+  '--cinder-accordion-item-trigger-font-size',
+  '--cinder-accordion-item-trigger-font-weight',
+  '--cinder-accordion-item-trigger-gap',
+  '--cinder-accordion-item-trigger-padding-block',
+  '--cinder-accordion-item-trigger-padding-inline',
+];
 
 export default variables;

package/src/components/action-row/action-row.css

@@ -1,9 +1,19 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-action-row {
+    --cinder-action-row-padding-block: var(--cinder-space-3);
+    --cinder-action-row-padding-inline: var(--cinder-space-4);
+    --cinder-action-row-layout-column-gap: var(--cinder-space-3);
+    --cinder-action-row-layout-row-gap: var(--cinder-space-2);
+    --cinder-action-row-body-gap: var(--cinder-space-1);
+    --cinder-action-row-title-font-size: var(--cinder-text-sm);
+    --cinder-action-row-description-font-size: var(--cinder-text-sm);
+    --cinder-action-row-meta-font-size: var(--cinder-text-xs);
+    --cinder-action-row-trailing-gap: var(--cinder-space-2);
     display: block;
     inline-size: 100%;
-    padding: var(--cinder-space-3) var(--cinder-space-4);
+    padding: var(--cinder-action-row-padding-block, var(--cinder-space-3))
+      var(--cinder-action-row-padding-inline, var(--cinder-space-4));
     border: 0;
     border-radius: var(--cinder-radius-md);
     background: transparent;
@@ -14,7 +24,8 @@
   }
 
   .cinder-action-row[data-cinder-density='condensed'] {
-    padding: var(--cinder-space-2) var(--cinder-space-3);
+    --cinder-action-row-padding-block: var(--cinder-space-2);
+    --cinder-action-row-padding-inline: var(--cinder-space-3);
   }
 
   @media (hover: hover) {
@@ -67,8 +78,8 @@
   .cinder-action-row__layout {
     display: grid;
     align-items: center;
-    column-gap: var(--cinder-space-3);
-    row-gap: var(--cinder-space-2);
+    column-gap: var(--cinder-action-row-layout-column-gap, var(--cinder-space-3));
+    row-gap: var(--cinder-action-row-layout-row-gap, var(--cinder-space-2));
     grid-template-columns: 1fr;
     grid-template-areas: 'body';
   }
@@ -99,34 +110,34 @@
     display: flex;
     min-inline-size: 0;
     flex-direction: column;
-    gap: var(--cinder-space-1);
+    gap: var(--cinder-action-row-body-gap, var(--cinder-space-1));
   }
 
   .cinder-action-row__trailing {
     grid-area: trailing;
     display: inline-flex;
     align-items: center;
-    gap: var(--cinder-space-2);
+    gap: var(--cinder-action-row-trailing-gap, var(--cinder-space-2));
     color: var(--cinder-text-muted);
   }
 
   .cinder-action-row__title {
     color: inherit;
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-action-row-title-font-size, var(--cinder-text-sm));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }
 
   .cinder-action-row__description {
     color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-action-row-description-font-size, var(--cinder-text-sm));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }
 
   .cinder-action-row__meta {
     color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
+    font-size: var(--cinder-action-row-meta-font-size, var(--cinder-text-xs));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }

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

@@ -9,6 +9,12 @@
       "description": "Rows with button semantics for master-detail lists and timeline selections.",
       "code": "<script lang=\"ts\">\n  import ActionRow from '@lostgradient/cinder/action-row';\n\n  let selectedRun = $state('run-2');\n\n  const runs = [\n    { id: 'run-1', title: 'Morning sync', status: 'Queued', time: '09:00' },\n    { id: 'run-2', title: 'Webhook replay', status: 'Running', time: '09:12' },\n    { id: 'run-3', title: 'Cleanup sweep', status: 'Finished', time: '09:18' },\n  ];\n</script>\n\n<div style=\"display: grid; gap: var(--cinder-space-1); max-inline-size: 28rem;\">\n  {#each runs as run (run.id)}\n    <ActionRow\n      selected={selectedRun === run.id}\n      onclick={() => {\n        selectedRun = run.id;\n      }}\n    >\n      {#snippet title()}{run.title}{/snippet}\n      {#snippet description()}{run.status}{/snippet}\n      {#snippet meta()}Run {run.id}{/snippet}\n      {#snippet trailing()}{run.time}{/snippet}\n    </ActionRow>\n  {/each}\n</div>\n"
     },
+    {
+      "id": "dense-timeline",
+      "title": "Dense timeline rows",
+      "description": "Timeline rows can tune row padding, layout gap, and description/meta type through public CSS variables.",
+      "code": "<script lang=\"ts\">\n  import ActionRow from '@lostgradient/cinder/action-row';\n\n  let selectedEvent = $state('event-2');\n\n  const events = [\n    {\n      id: 'event-1',\n      title: 'Webhook received',\n      description: 'Payload validated against the trigger schema',\n      meta: 'Queued',\n      time: '09:14:02',\n    },\n    {\n      id: 'event-2',\n      title: 'Workflow matched',\n      description: 'Selected branch accepted the event filters',\n      meta: 'Current',\n      time: '09:14:04',\n    },\n    {\n      id: 'event-3',\n      title: 'Activity scheduled',\n      description: 'Worker lease created for the next attempt',\n      meta: 'Pending',\n      time: '09:14:05',\n    },\n  ];\n</script>\n\n<div style=\"display: grid; gap: var(--cinder-space-1); max-inline-size: 32rem;\">\n  {#each events as event (event.id)}\n    <ActionRow\n      density=\"condensed\"\n      style=\"--cinder-action-row-padding-block: var(--cinder-space-1); --cinder-action-row-padding-inline: var(--cinder-space-2); --cinder-action-row-layout-column-gap: var(--cinder-space-2); --cinder-action-row-body-gap: 0; --cinder-action-row-description-font-size: var(--cinder-text-xs); --cinder-action-row-meta-font-size: var(--cinder-text-xs);\"\n      selected={selectedEvent === event.id}\n      selectedState=\"current\"\n      currentValue=\"step\"\n      onclick={() => {\n        selectedEvent = event.id;\n      }}\n    >\n      {#snippet title()}{event.title}{/snippet}\n      {#snippet description()}{event.description}{/snippet}\n      {#snippet meta()}{event.meta}{/snippet}\n      {#snippet trailing()}{event.time}{/snippet}\n    </ActionRow>\n  {/each}\n</div>\n"
+    },
     {
       "id": "timeline-edge",
       "title": "Timeline edge rows",

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

@@ -30,6 +30,10 @@
     "class": {
       "type": "string",
       "description": "Additional classes merged with `.cinder-action-row`."
+    },
+    "style": {
+      "type": "string",
+      "description": "Inline style string applied to the `.cinder-action-row` root."
     }
   },
   "additionalProperties": false,

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

@@ -35,6 +35,10 @@ const schema = {
       type: 'string',
       description: 'Additional classes merged with `.cinder-action-row`.',
     },
+    style: {
+      type: 'string',
+      description: 'Inline style string applied to the `.cinder-action-row` root.',
+    },
   },
   additionalProperties: false,
   metadata: {