@lostgradient/cinder 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lostgradient/cinder
 
+## 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.0",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",

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;
     /**