@lostgradient/cinder 0.12.0 → 0.13.0

package/dist/server/{index.server-xeqtpv61.js → index.server-mr68brd6.js}

@@ -1,7 +1,7 @@
 import {
   SegmentedControlController,
   setSegmentedControlContext
-} from "./index.server-sedjxt36.js";
+} from "./index.server-e89qfamd.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";
@@ -38,9 +38,11 @@ function Segmented_control($$renderer, $$props) {
     let resetSyncTimeout;
     const initialSingleValue = untrack(() => typeof value === "string" ? value : undefined);
     const initialMultipleValues = untrack(() => selectionMode === "multiple" && value instanceof SvelteSet ? Array.from(value) : undefined);
+    const effectiveVariant = $.derived(() => selectionMode === "multiple" && variant !== "radiogroup" ? "radiogroup" : variant);
+    const rendersNavigation = $.derived(() => effectiveVariant() === "navigation");
     const controller = new SegmentedControlController({
       selectionMode: () => selectionMode,
-      variant: () => variant,
+      variant: () => effectiveVariant(),
       orientation: () => orientation,
       controlDisabled: () => disabled,
       disallowEmptySelection: () => disallowEmptySelection,
@@ -55,7 +57,7 @@ function Segmented_control($$renderer, $$props) {
         return selectionMode;
       },
       get variant() {
-        return variant;
+        return effectiveVariant();
       },
       get controlDisabled() {
         return disabled;
@@ -66,7 +68,7 @@ function Segmented_control($$renderer, $$props) {
       toggle: (segmentValue) => controller.toggle(segmentValue)
     };
     setSegmentedControlContext(contextValue);
-    const groupRole = $.derived(() => selectionMode === "multiple" ? "group" : variant === "tablist" ? "tablist" : "radiogroup");
+    const groupRole = $.derived(() => selectionMode === "multiple" ? "group" : variant === "navigation" ? undefined : variant === "tablist" ? "tablist" : "radiogroup");
     const effectiveSize = $.derived(() => density === "toolbar" ? "sm" : size);
     const selectedValues = $.derived(() => selectionMode === "multiple" ? value instanceof SvelteSet ? Array.from(value) : [] : typeof value === "string" ? [value] : []);
     function resetToInitialValue(event) {
@@ -83,25 +85,48 @@ function Segmented_control($$renderer, $$props) {
         value = initialSingleValue;
       }, 0);
     }
-    $$renderer2.push(`<div class="cinder-segmented-control-container"><span${$.attr("id", `${id}-label`)}${$.attr_class($.clsx(classNames("cinder-segmented-control-label", hideLabel && "cinder-sr-only")))}>${$.escape(label)}</span> <div${$.attributes({
-      ...rest,
-      id,
-      role: groupRole(),
-      "aria-labelledby": `${id}-label`,
-      "aria-disabled": disabled ? "true" : undefined,
-      "aria-orientation": selectionMode === "single" ? orientation : undefined,
-      "data-cinder-orientation": orientation,
-      "data-cinder-size": effectiveSize(),
-      "data-cinder-density": density === "toolbar" ? "toolbar" : undefined,
-      "data-cinder-selection-mode": selectionMode,
-      "data-cinder-detached": detached ? "" : undefined,
-      "data-cinder-full-width": fullWidth ? "" : undefined,
-      "data-cinder-variant": variant,
-      class: $.clsx(classNames("cinder-segmented-control", customClassName))
-    })}>`);
-    children($$renderer2);
-    $$renderer2.push(`<!----></div> `);
-    if (name) {
+    $$renderer2.push(`<div class="cinder-segmented-control-container"><span${$.attr("id", `${id}-label`)}${$.attr_class($.clsx(classNames("cinder-segmented-control-label", hideLabel && "cinder-sr-only")))}>${$.escape(label)}</span> `);
+    if (rendersNavigation()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<nav${$.attributes({
+        ...rest,
+        id,
+        role: "navigation",
+        "aria-labelledby": `${id}-label`,
+        "data-cinder-orientation": orientation,
+        "data-cinder-size": effectiveSize(),
+        "data-cinder-density": density === "toolbar" ? "toolbar" : undefined,
+        "data-cinder-selection-mode": selectionMode,
+        "data-cinder-detached": detached ? "" : undefined,
+        "data-cinder-full-width": fullWidth ? "" : undefined,
+        "data-cinder-variant": effectiveVariant(),
+        class: $.clsx(classNames("cinder-segmented-control", customClassName))
+      })}>`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></nav>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${$.attributes({
+        ...rest,
+        id,
+        role: groupRole(),
+        "aria-labelledby": `${id}-label`,
+        "aria-disabled": disabled ? "true" : undefined,
+        "aria-orientation": selectionMode === "single" ? orientation : undefined,
+        "data-cinder-orientation": orientation,
+        "data-cinder-size": effectiveSize(),
+        "data-cinder-density": density === "toolbar" ? "toolbar" : undefined,
+        "data-cinder-selection-mode": selectionMode,
+        "data-cinder-detached": detached ? "" : undefined,
+        "data-cinder-full-width": fullWidth ? "" : undefined,
+        "data-cinder-variant": effectiveVariant(),
+        class: $.clsx(classNames("cinder-segmented-control", customClassName))
+      })}>`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (name && !rendersNavigation()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<input type="hidden" disabled=""/> <!--[-->`);
       const each_array = $.ensure_array_like(selectedValues());
@@ -120,4 +145,4 @@ function Segmented_control($$renderer, $$props) {
 
 export { Segmented_control };
 
-//# debugId=29124683D3F7021064756E2164756E21
+//# debugId=2670B4695EBCBA5F64756E2164756E21

package/dist/server/{index.server-qbkxz7r2.js → index.server-nx9c2ep1.js}

@@ -9,10 +9,10 @@ import {
 } from "./index.server-d146g8pr.js";
 import {
   Segmented_control
-} from "./index.server-xeqtpv61.js";
+} from "./index.server-mr68brd6.js";
 import {
   Segment
-} from "./index.server-sedjxt36.js";
+} from "./index.server-e89qfamd.js";
 import {
   Input
 } from "./index.server-8xvc73zh.js";

package/dist/server/{index.server-jj76374p.js → index.server-p071e531.js}

@@ -1,6 +1,6 @@
 import {
   Diff_viewer
-} from "./index.server-5gzyqv78.js";
+} from "./index.server-v3arexq8.js";
 
 // src/components/diff-viewer/index.ts
 var diff_viewer_default = Diff_viewer;

package/dist/server/{index.server-5gzyqv78.js → index.server-v3arexq8.js}

@@ -3,10 +3,10 @@ import {
 } from "./index.server-x1dha7bk.js";
 import {
   Segmented_control
-} from "./index.server-xeqtpv61.js";
+} from "./index.server-mr68brd6.js";
 import {
   Segment
-} from "./index.server-sedjxt36.js";
+} from "./index.server-e89qfamd.js";
 import {
   Kbd
 } from "./index.server-02tkmzvs.js";

package/dist/server/{index.server-85p4ydph.js → index.server-zzd5wpbw.js}

@@ -1,6 +1,6 @@
 import {
   Segmented_control
-} from "./index.server-xeqtpv61.js";
+} from "./index.server-mr68brd6.js";
 
 // src/components/segmented-control/index.ts
 var segmented_control_default = Segmented_control;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "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: {

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/segment/segment.schema.json

@@ -10,6 +10,22 @@
       "type": "boolean",
       "description": "Disable just this segment (independent of the control-level `disabled`)."
     },
+    "href": {
+      "type": "string",
+      "description": "Render this segment as a real link inside `SegmentedControl variant=\"navigation\"`."
+    },
+    "current": {
+      "type": "boolean",
+      "description": "Marks this linked segment as the current route/filter."
+    },
+    "currentToken": {
+      "enum": ["page", "step", "location", "date", "time", "true"],
+      "description": "`aria-current` token emitted while `current` is true. Defaults to `\"page\"`."
+    },
+    "value": {
+      "type": "string",
+      "description": "Value this segment represents. Required when `href` is not provided."
+    },
     "controls": {
       "type": "string",
       "description": "ID of the panel this segment controls — only meaningful when the parent\n`SegmentedControl` uses `variant=\"tablist\"`."
@@ -30,16 +46,27 @@
         "description": "Optional decorative content rendered before the label, inside `aria-hidden`."
       },
       {
-        "name": "trailing",
+        "name": "onclick",
         "reason": "function-or-snippet",
-        "description": "Optional decorative content rendered after the label, inside `aria-hidden`."
+        "description": "Optional click handler for the rendered link. Disabled navigation segments\nprevent default and do not call this handler."
       },
       {
-        "name": "value",
-        "reason": "unknown-shape",
-        "required": true,
-        "description": "Value this segment represents. Must be unique within the parent control."
+        "name": "trailing",
+        "reason": "function-or-snippet",
+        "description": "Optional decorative content rendered after the label, inside `aria-hidden`."
       }
     ]
-  }
+  },
+  "allOf": [
+    {
+      "if": {
+        "not": {
+          "required": ["href"]
+        }
+      },
+      "then": {
+        "required": ["value"]
+      }
+    }
+  ]
 }