@lostgradient/cinder 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.11.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",
@@ -6508,13 +6508,33 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.6",
     "@modelcontextprotocol/sdk": "^1.29.0",
+    "@shikijs/engine-oniguruma": "^3.21.0",
+    "@shikijs/langs": "^3.21.0",
+    "@shikijs/types": "^3.21.0",
     "@tanstack/virtual-core": "^3.17.1",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
+    "@types/unist": "^3.0.0",
     "ajv": "^8",
+    "comlink": "^4.4.2",
     "conversationalist": "^0.2.1",
     "diff-match-patch": "^1.0.5",
     "esm-env": "^1.2.0",
+    "hast-util-sanitize": "^5.0.0",
+    "js-yaml": "^4.1.0",
     "libphonenumber-js": "^1.13.3",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "rehype-katex": "^7.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "remark-stringify": "^11.0.0",
+    "shiki": "^3.21.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@changesets/parse": "0.4.3",
@@ -6527,7 +6547,6 @@
     "chalk": "^5.6.2",
     "change-case": "^5.4.4",
     "happy-dom": "^15.11.7",
-    "js-yaml": "^4.1.0",
     "lucide-svelte": "^0.503.0",
     "oxlint": "^1.56.0",
     "oxlint-tsgolint": "^0.17.0",
@@ -6548,35 +6567,12 @@
     "@milkdown/ctx": "^7.17.3",
     "@milkdown/kit": "^7.17.3",
     "@milkdown/prose": "^7.17.3",
-    "@shikijs/engine-oniguruma": "^3.21.0",
-    "@shikijs/langs": "^3.21.0",
-    "@shikijs/rehype": "^3.21.0",
-    "@shikijs/types": "^3.21.0",
-    "@types/hast": "^3.0.4",
-    "@types/mdast": "^4.0.4",
-    "@types/unist": "^3.0.0",
-    "comlink": "^4.4.2",
-    "hast-util-sanitize": "^5.0.0",
-    "js-yaml": "^4.1.0",
     "lucide-svelte": ">=0.400.0 <1",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-model": "^1.25.4",
     "prosemirror-state": "^1.4.4",
     "prosemirror-view": "^1.41.3",
-    "rehype-katex": "^7.0.1",
-    "rehype-sanitize": "^6.0.0",
-    "rehype-stringify": "^10.0.1",
-    "remark-gfm": "^4.0.1",
-    "remark-html": "^16.0.1",
-    "remark-math": "^6.0.0",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
-    "remark-stringify": "^11.0.0",
-    "shiki": "^3.21.0",
     "svelte": ">=5.56.0 <6",
-    "unified": "^11.0.5",
-    "unist-util-remove": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
     "zod": "4.4.1"
   },
   "peerDependenciesMeta": {
@@ -6589,36 +6585,6 @@
     "@milkdown/prose": {
       "optional": true
     },
-    "@shikijs/engine-oniguruma": {
-      "optional": true
-    },
-    "@shikijs/langs": {
-      "optional": true
-    },
-    "@shikijs/rehype": {
-      "optional": true
-    },
-    "@shikijs/types": {
-      "optional": true
-    },
-    "@types/hast": {
-      "optional": true
-    },
-    "@types/mdast": {
-      "optional": true
-    },
-    "@types/unist": {
-      "optional": true
-    },
-    "comlink": {
-      "optional": true
-    },
-    "hast-util-sanitize": {
-      "optional": true
-    },
-    "js-yaml": {
-      "optional": true
-    },
     "prosemirror-inputrules": {
       "optional": true
     },
@@ -6630,45 +6596,6 @@
     },
     "prosemirror-view": {
       "optional": true
-    },
-    "rehype-katex": {
-      "optional": true
-    },
-    "rehype-sanitize": {
-      "optional": true
-    },
-    "rehype-stringify": {
-      "optional": true
-    },
-    "remark-gfm": {
-      "optional": true
-    },
-    "remark-html": {
-      "optional": true
-    },
-    "remark-math": {
-      "optional": true
-    },
-    "remark-parse": {
-      "optional": true
-    },
-    "remark-rehype": {
-      "optional": true
-    },
-    "remark-stringify": {
-      "optional": true
-    },
-    "shiki": {
-      "optional": true
-    },
-    "unified": {
-      "optional": true
-    },
-    "unist-util-remove": {
-      "optional": true
-    },
-    "unist-util-visit": {
-      "optional": true
     }
   },
   "engines": {

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: {

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/code-block/code-block.css

@@ -9,12 +9,17 @@
  * ======================================== */
 
   .cinder-code-block {
+    --cinder-code-block-background: var(--_cinder-code-block-code-surface);
+    --cinder-code-block-font-size: var(--cinder-text-sm);
+    --cinder-code-block-height: auto;
+    --cinder-code-block-line-height: var(--cinder-leading-relaxed);
+    --cinder-code-block-padding: var(--cinder-space-4);
     --_cinder-code-block-code-surface: light-dark(
       var(--cinder-surface-raised),
       var(--cinder-surface-inset)
     );
 
-    background: var(--cinder-surface-inset);
+    background: var(--cinder-code-block-background);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md);
     overflow: hidden;
@@ -44,33 +49,34 @@
    * inner pre elements can stay metrically identical. */
   .cinder-code-block__viewport {
     display: block;
-    overflow-x: auto;
-    background: var(--_cinder-code-block-code-surface);
+    block-size: var(--cinder-code-block-height);
+    overflow: auto;
+    background: var(--cinder-code-block-background);
   }
 
   .cinder-code-block__pre,
   .cinder-code-block :where(pre.shiki) {
     margin: 0;
-    padding: var(--cinder-space-4);
+    padding: var(--cinder-code-block-padding);
     width: max-content;
     min-width: 100%;
     overflow-x: clip;
     font-family: var(--cinder-font-mono);
-    font-size: var(--cinder-text-sm);
-    line-height: var(--cinder-leading-relaxed);
+    font-size: var(--cinder-code-block-font-size);
+    line-height: var(--cinder-code-block-line-height);
     color: var(--cinder-text);
     /* Use near-white in light mode so github-light token colors (e.g. #d73a49
      * keyword red) clear 4.5:1 WCAG AA. In dark mode keep the deep inset so
      * github-dark tokens maintain contrast on a very dark surface. */
-    background: var(--_cinder-code-block-code-surface);
+    background: var(--cinder-code-block-background);
   }
 
   /* Shiki writes inline background styles on its generated <pre>; keep the
    * highlighted state visually and metrically identical to the plain fallback. */
   .cinder-code-block :where(pre.shiki) {
     margin: 0 !important;
-    padding: var(--cinder-space-4) !important;
-    background: var(--_cinder-code-block-code-surface) !important;
+    padding: var(--cinder-code-block-padding) !important;
+    background: var(--cinder-code-block-background) !important;
   }
 
   .cinder-code-block__code,

package/src/components/code-block/code-block.variables.json

@@ -1 +1,7 @@
-[]
+[
+  "--cinder-code-block-background",
+  "--cinder-code-block-font-size",
+  "--cinder-code-block-height",
+  "--cinder-code-block-line-height",
+  "--cinder-code-block-padding"
+]

package/src/components/code-block/code-block.variables.ts

@@ -1,3 +1,9 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-code-block-background',
+  '--cinder-code-block-font-size',
+  '--cinder-code-block-height',
+  '--cinder-code-block-line-height',
+  '--cinder-code-block-padding',
+];
 
 export default variables;