@lostgradient/cinder 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lostgradient/cinder
 
+## 0.12.1
+
+### Patch Changes
+
+- [#737](https://github.com/stevekinney/cinder/pull/737) [`3600db8`](https://github.com/stevekinney/cinder/commit/3600db878c53ae5d7048487207b08a60d5421b22) Thanks [@stevekinney](https://github.com/stevekinney)! - Publish the post-0.12 downstream fixes for Chat full-height layout metadata and dense inspector styling hooks.
+
+## 0.12.0
+
+### Minor Changes
+
+- [#721](https://github.com/stevekinney/cinder/pull/721) [`a6ee978`](https://github.com/stevekinney/cinder/commit/a6ee9784198ff450c1a9493e3c52a2f2c0965b62) Thanks [@stevekinney](https://github.com/stevekinney)! - Add public source-excerpt styling variables to CodeBlock, typed confirmation to ConfirmDialog, and a facet-only mode to FacetedFilterBar.
+
+### Patch Changes
+
+- [#725](https://github.com/stevekinney/cinder/pull/725) [`a2a3254`](https://github.com/stevekinney/cinder/commit/a2a3254df455b37f74abf4f73e8e8030017af309) Thanks [@stevekinney](https://github.com/stevekinney)! - Render compensation steps directly beneath the forward-step subtree they reverse.
+
 ## 0.11.0
 
 ### Minor Changes

package/components.json

@@ -3,7 +3,7 @@
   "manifestVersion": 1,
   "package": {
     "name": "@lostgradient/cinder",
-    "version": "0.11.0",
+    "version": "0.12.1",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",
@@ -924,7 +924,8 @@
       "tags": ["chat", "conversation", "domain-suite"],
       "useWhen": [
         "Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.",
-        "Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages."
+        "Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.",
+        "Embedding Chat in a definite-height flex or grid region where its internal transcript should own scrolling."
       ],
       "avoidWhen": [
         {

package/dist/components/accordion/index.js

@@ -83,15 +83,16 @@ function classNames(...parts) {
 }
 
 // src/components/accordion-item/accordion-item.svelte
-var root = $.from_html(`<div class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner"><!></div></div>`);
-var root_1 = $.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 root = $.from_html(`<div class="cinder-accordion-item__panel-inner"><!></div>`);
+var root_1 = $.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 = $.props_id();
   $.push($$props, true);
   let disabled = $.prop($$props, "disabled", 3, false);
   const context = getAccordionContext();
   const isExpanded = $.derived(() => context.expandedIds.includes($$props.id));
-  const headerId = $.derived(() => `${$$props.id}-header`);
-  const panelId = $.derived(() => `${$$props.id}-panel`);
+  const headerId = $.derived(() => `${instanceId}-header`);
+  const panelId = $.derived(() => `${instanceId}-panel`);
   function handleClick() {
     if (disabled())
       return;
@@ -106,26 +107,26 @@ function Accordion_item($$anchor, $$props) {
   $.next(2);
   $.reset(button);
   $.reset(h3);
-  var node = $.sibling(h3, 2);
+  var div_1 = $.sibling(h3, 2);
+  var node = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root();
-      var div_2 = $.child(div_1);
+      var div_2 = root();
       var node_1 = $.child(div_2);
       $.snippet(node_1, () => $$props.children);
       $.reset(div_2);
-      $.reset(div_1);
-      $.template_effect(() => $.set_attribute(div_1, "id", $.get(panelId)));
-      $.append($$anchor2, div_1);
+      $.append($$anchor2, div_2);
     };
     $.if(node, ($$render) => {
       if ($.get(isExpanded))
         $$render(consequent);
     });
   }
+  $.reset(div_1);
   $.reset(div);
   $.template_effect(($0) => {
     $.set_class(div, 1, $0);
+    $.set_style(div, $$props.style);
     $.set_attribute(div, "data-cinder-expanded", $.get(isExpanded) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
     $.set_attribute(button, "id", $.get(headerId));
@@ -133,6 +134,8 @@ function Accordion_item($$anchor, $$props) {
     $.set_attribute(button, "aria-controls", $.get(panelId));
     button.disabled = disabled();
     $.set_text(text, $$props.title);
+    $.set_attribute(div_1, "id", $.get(panelId));
+    $.set_attribute(div_1, "hidden", !$.get(isExpanded));
   }, [
     () => $.clsx(classNames("cinder-accordion-item", $$props.class))
   ]);
@@ -223,4 +226,4 @@ export {
   Accordion2 as Accordion
 };
 
-//# debugId=1DCB10602C8FB38664756E2164756E21
+//# debugId=86A20AE2C42C2B0D64756E2164756E21

package/dist/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/dist/components/accordion-item/accordion-item.schema.js

@@ -72,6 +72,10 @@ var schema = {
     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,
@@ -92,4 +96,4 @@ export {
   accordion_item_schema_default as default
 };
 
-//# debugId=CED71061F07864C964756E2164756E21
+//# debugId=D45061C2BEE6BE8464756E2164756E21

package/dist/components/accordion-item/accordion-item.types.d.ts

@@ -12,6 +12,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;
 };
@@ -28,4 +30,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/dist/components/accordion-item/accordion-item.variables.js

@@ -52,10 +52,21 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/accordion-item/accordion-item.variables.ts
-var variables = [];
+var variables = [
+  "--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"
+];
 var accordion_item_variables_default = variables;
 export {
   accordion_item_variables_default as default
 };
 
-//# debugId=24BF9D6EF0FBB68164756E2164756E21
+//# debugId=FE56BCDDC2ED5DB364756E2164756E21

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

@@ -83,15 +83,16 @@ function classNames(...parts) {
 }
 
 // src/components/accordion-item/accordion-item.svelte
-var root = $.from_html(`<div class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner"><!></div></div>`);
-var root_1 = $.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 root = $.from_html(`<div class="cinder-accordion-item__panel-inner"><!></div>`);
+var root_1 = $.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 = $.props_id();
   $.push($$props, true);
   let disabled = $.prop($$props, "disabled", 3, false);
   const context = getAccordionContext();
   const isExpanded = $.derived(() => context.expandedIds.includes($$props.id));
-  const headerId = $.derived(() => `${$$props.id}-header`);
-  const panelId = $.derived(() => `${$$props.id}-panel`);
+  const headerId = $.derived(() => `${instanceId}-header`);
+  const panelId = $.derived(() => `${instanceId}-panel`);
   function handleClick() {
     if (disabled())
       return;
@@ -106,26 +107,26 @@ function Accordion_item($$anchor, $$props) {
   $.next(2);
   $.reset(button);
   $.reset(h3);
-  var node = $.sibling(h3, 2);
+  var div_1 = $.sibling(h3, 2);
+  var node = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root();
-      var div_2 = $.child(div_1);
+      var div_2 = root();
       var node_1 = $.child(div_2);
       $.snippet(node_1, () => $$props.children);
       $.reset(div_2);
-      $.reset(div_1);
-      $.template_effect(() => $.set_attribute(div_1, "id", $.get(panelId)));
-      $.append($$anchor2, div_1);
+      $.append($$anchor2, div_2);
     };
     $.if(node, ($$render) => {
       if ($.get(isExpanded))
         $$render(consequent);
     });
   }
+  $.reset(div_1);
   $.reset(div);
   $.template_effect(($0) => {
     $.set_class(div, 1, $0);
+    $.set_style(div, $$props.style);
     $.set_attribute(div, "data-cinder-expanded", $.get(isExpanded) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
     $.set_attribute(button, "id", $.get(headerId));
@@ -133,6 +134,8 @@ function Accordion_item($$anchor, $$props) {
     $.set_attribute(button, "aria-controls", $.get(panelId));
     button.disabled = disabled();
     $.set_text(text, $$props.title);
+    $.set_attribute(div_1, "id", $.get(panelId));
+    $.set_attribute(div_1, "hidden", !$.get(isExpanded));
   }, [
     () => $.clsx(classNames("cinder-accordion-item", $$props.class))
   ]);
@@ -149,4 +152,4 @@ export {
   Accordion_item as AccordionItem
 };
 
-//# debugId=327E97542BFF12B664756E2164756E21
+//# debugId=7FB287FC6F3C44AF64756E2164756E21

package/dist/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/dist/components/action-row/action-row.schema.js

@@ -84,6 +84,10 @@ var schema = {
     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,
@@ -123,4 +127,4 @@ export {
   action_row_schema_default as default
 };
 
-//# debugId=CAD2E7A8D028F6E564756E2164756E21
+//# debugId=FB7AA1AE4716503064756E2164756E21

package/dist/components/action-row/action-row.types.d.ts

@@ -43,3 +43,46 @@ export type ActionRowProps = Omit<HTMLButtonAttributes, 'aria-current' | 'aria-p
     /** 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/dist/components/action-row/action-row.variables.js

@@ -52,10 +52,20 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/action-row/action-row.variables.ts
-var variables = [];
+var variables = [
+  "--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"
+];
 var action_row_variables_default = variables;
 export {
   action_row_variables_default as default
 };
 
-//# debugId=760088280D320BC064756E2164756E21
+//# debugId=4A0646B62FFB1E4364756E2164756E21

package/dist/components/chat/chat.svelte.d.ts

@@ -8,6 +8,7 @@
  * @tag domain-suite
  * @useWhen Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.
  * @useWhen Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.
+ * @useWhen Embedding Chat in a definite-height flex or grid region where its internal transcript should own scrolling.
  * @avoidWhen Rendering a one-off message list — compose lighter primitives directly instead of pulling the full suite.
  * @avoidWhen The transcript is read-only and needs no composer — a simple list of message bubbles is a better fit.
  * @related markdown-editor

package/dist/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/dist/components/code-block/code-block.variables.js

@@ -52,10 +52,16 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/code-block/code-block.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-code-block-background",
+  "--cinder-code-block-font-size",
+  "--cinder-code-block-height",
+  "--cinder-code-block-line-height",
+  "--cinder-code-block-padding"
+];
 var code_block_variables_default = variables;
 export {
   code_block_variables_default as default
 };
 
-//# debugId=28C5BF47C17214D064756E2164756E21
+//# debugId=78150DCF4A1748A164756E2164756E21

package/dist/components/confirm-dialog/confirm-dialog.css

@@ -1,4 +1,6 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../input/input.css';
+
 @layer cinder.components {
   .cinder-confirm-dialog__description {
     margin: 0;

package/dist/components/confirm-dialog/confirm-dialog.schema.js

@@ -87,6 +87,15 @@ Never use "OK" or "Confirm" in production — they don't describe the action.`
       description: `When true, the confirm button uses variant="danger". The cancel button still
 receives default focus regardless — color is never the sole destructive signal.`
     },
+    typeToConfirm: {
+      type: "string",
+      description: `When set, renders a labelled text input and disables the confirm button until the
+trimmed input matches this value case-insensitively.`
+    },
+    typeToConfirmLabel: {
+      type: "string",
+      description: 'Visible label for the typed-confirmation input. Defaults to `Type "<value>" to confirm`.'
+    },
     class: {
       type: "string",
       description: "Optional extra class on the underlying <Modal>. Destructured as `class: className` per repo convention."
@@ -123,4 +132,4 @@ export {
   confirm_dialog_schema_default as default
 };
 
-//# debugId=A7F3FC6EA5DCEDE864756E2164756E21
+//# debugId=9E452C902BC5550F64756E2164756E21

package/dist/components/confirm-dialog/confirm-dialog.types.d.ts

@@ -36,6 +36,13 @@ export type ConfirmDialogProps = {
      * receives default focus regardless — color is never the sole destructive signal.
      */
     destructive?: boolean;
+    /**
+     * When set, renders a labelled text input and disables the confirm button until the
+     * trimmed input matches this value case-insensitively.
+     */
+    typeToConfirm?: string;
+    /** Visible label for the typed-confirmation input. Defaults to `Type "<value>" to confirm`. */
+    typeToConfirmLabel?: string;
     /** Fired when the user activates the confirm button. Required. Component closes itself after. */
     onconfirm: () => void;
     /**