@lostgradient/cinder 0.8.0 → 0.9.0

package/dist/components/approval-card/approval-card.css

@@ -5,21 +5,17 @@
  * between `src/` and generated `dist/`. */
 @import '../badge/badge.css';
 @import '../button/button.css';
-@import '../button-group/button-group.css';
 @import '../card/card.css';
 @import '../code-block/code-block.css';
+@import '../collapsible/collapsible.css';
 @import '../copy-button/copy-button.css';
-@import '../description-list/description-list.css';
 @import '../json-viewer/json-viewer.css';
 @import '../payload-inspector/payload-inspector.css';
-@import '../secret-value-field/secret-value-field.css';
 @import '../status-dot/status-dot.css';
-@import '../tabs/tabs.css';
+@import '../tooltip/tooltip.css';
 
 @layer cinder.components {
   .cinder-approval-card {
-    container-type: inline-size;
-    container-name: cinder-approval-card;
     display: block;
   }
 
@@ -27,35 +23,37 @@
     overflow: hidden;
   }
 
+  /* ----------------------------------------
+   * Header
+   * ---------------------------------------- */
+
   .cinder-approval-card__header {
     display: flex;
+    flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--cinder-space-4);
+    gap: var(--cinder-space-2) var(--cinder-space-4);
     padding: var(--cinder-space-4);
-    border-block-end: 1px solid var(--cinder-border-muted);
     background: var(--cinder-surface-inset);
   }
 
+  .cinder-approval-card[data-cinder-risk='high'] .cinder-approval-card__header {
+    background: var(--cinder-color-danger-bg);
+  }
+
+  /* Title and badges stay on one row whenever they both fit — `flex-wrap`
+     reacts to the actual rendered width of this title (which varies with the
+     tool name) instead of guessing a fixed container breakpoint. Below
+     `min-inline-size`, the title wraps its own text first; badges only drop
+     to their own row once nothing more can give. On that solo-item row,
+     `justify-content: space-between` on the header collapses to flex-start,
+     so no separate narrow-container override is needed. */
   .cinder-approval-card__title-group {
     display: flex;
     flex-direction: column;
+    flex: 1 1 14rem;
     gap: var(--cinder-space-1);
-    min-inline-size: 0;
-  }
-
-  .cinder-approval-card__eyebrow,
-  .cinder-approval-card__description,
-  .cinder-approval-card__muted {
-    margin: 0;
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-sm);
-  }
-
-  .cinder-approval-card__eyebrow {
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-semibold);
-    text-transform: uppercase;
+    min-inline-size: 10rem;
   }
 
   .cinder-approval-card__title {
@@ -66,23 +64,63 @@
     line-height: var(--cinder-leading-tight);
   }
 
-  .cinder-approval-card__badges,
-  .cinder-approval-card__section-heading,
-  .cinder-approval-card__editor-actions {
+  .cinder-approval-card__title-tool {
+    font-family: var(--cinder-font-mono);
+  }
+
+  .cinder-approval-card__badges {
     display: flex;
+    flex: 0 1 auto;
     align-items: center;
     flex-wrap: wrap;
+    justify-content: flex-end;
     gap: var(--cinder-space-2);
   }
 
-  .cinder-approval-card__badges {
-    justify-content: flex-end;
+  /* StatusDot and Badge each define their own type scale per size step, and
+     those scales don't line up 1:1 (StatusDot's "sm" label text is larger
+     than Badge's "sm" text). Force every status/risk/expiry indicator in this
+     row to the same font-size so the row reads as one cohesive unit. */
+  .cinder-approval-card__badges .cinder-status-dot[data-cinder-size='sm'],
+  .cinder-approval-card__badges .cinder-badge[data-cinder-size='sm'] {
+    font-size: var(--cinder-text-xs);
   }
 
+  .cinder-approval-card__risk-icon {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--cinder-radius-sm);
+  }
+
+  .cinder-approval-card__risk-icon[data-cinder-risk='low'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-approval-card__risk-icon[data-cinder-risk='medium'] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-approval-card__risk-icon[data-cinder-risk='high'] {
+    color: var(--cinder-danger);
+  }
+
+  .cinder-approval-card__risk-icon:focus-visible {
+    /* cinder-focus-ring-owner: parent — the trigger self-owns its box-shadow
+       ring; the outline is intentionally suppressed. */
+    outline: none;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset, 1px) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset, 1px) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  /* ----------------------------------------
+   * Body sections
+   * ---------------------------------------- */
+
   .cinder-approval-card__body {
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-4);
+    gap: var(--cinder-space-3);
     padding: var(--cinder-space-4);
   }
 
@@ -92,57 +130,33 @@
     gap: var(--cinder-space-2);
   }
 
-  .cinder-approval-card__section-title,
-  .cinder-approval-card__subsection-title {
+  .cinder-approval-card__section-heading {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__section-title {
     margin: 0;
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-semibold);
   }
 
-  .cinder-approval-card__subsection-title {
-    font-size: var(--cinder-text-xs);
-  }
-
-  .cinder-approval-card__metadata {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-    gap: var(--cinder-space-2);
+  .cinder-approval-card__muted {
     margin: 0;
-  }
-
-  .cinder-approval-card__metadata--compact {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-
-  .cinder-approval-card__metadata-item {
-    min-inline-size: 0;
-  }
-
-  .cinder-approval-card__metadata-item dt {
     color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-  }
-
-  .cinder-approval-card__metadata-item dd {
-    margin: 0;
-    overflow-wrap: anywhere;
-    color: var(--cinder-text);
-    font-family: var(--cinder-font-mono);
-    font-size: var(--cinder-text-xs);
+    font-size: var(--cinder-text-sm);
   }
 
-  .cinder-approval-card__files {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cinder-space-2);
-  }
+  /* ----------------------------------------
+   * Files touched
+   * ---------------------------------------- */
 
   .cinder-approval-card__file-list {
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-1);
     max-block-size: 14rem;
     overflow-y: auto;
     margin: 0;
@@ -150,49 +164,76 @@
     list-style: none;
   }
 
-  .cinder-approval-card__file-list li {
+  .cinder-approval-card__file {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__file-path {
     overflow-wrap: anywhere;
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: var(--cinder-radius-sm);
-    padding: var(--cinder-space-1) var(--cinder-space-2);
-    background: var(--cinder-surface-inset);
     color: var(--cinder-text);
     font-family: var(--cinder-font-mono);
     font-size: var(--cinder-text-xs);
   }
 
+  .cinder-approval-card__file .cinder-approval-card__file-copy {
+    flex: 0 0 auto;
+    padding: var(--cinder-space-1);
+    border: none;
+  }
+
+  /* ----------------------------------------
+   * Environment names
+   * ---------------------------------------- */
+
   .cinder-approval-card__environment-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: var(--cinder-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
-  .cinder-approval-card__actions-section {
-    gap: var(--cinder-space-3);
-  }
+  /* ----------------------------------------
+   * Resolution controls and actions
+   * ---------------------------------------- */
 
-  .cinder-approval-card__resolution-controls {
+  .cinder-approval-card__actions {
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-2);
+    gap: var(--cinder-space-3);
   }
 
-  .cinder-approval-card__editor {
+  .cinder-approval-card__resolution-controls {
     display: flex;
     flex-direction: column;
     gap: var(--cinder-space-2);
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: var(--cinder-radius-md);
-    padding: var(--cinder-space-3);
-    background: var(--cinder-surface-inset);
   }
 
-  .cinder-approval-card__editor-label {
+  .cinder-approval-card__control-label {
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-semibold);
   }
 
+  .cinder-approval-card__action-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-approval-card__action-buttons {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+    margin-inline-start: auto;
+  }
+
   .cinder-approval-card__textarea {
     min-block-size: 10rem;
     resize: vertical;
@@ -206,7 +247,7 @@
   }
 
   .cinder-approval-card__textarea--reason {
-    min-block-size: 5rem;
+    min-block-size: 3.5rem;
     font-family: var(--cinder-font-sans);
   }
 
@@ -233,12 +274,33 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  .cinder-approval-card__editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-approval-card__editor-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
   .cinder-approval-card__error {
     margin: 0;
     color: var(--cinder-danger);
     font-size: var(--cinder-text-sm);
   }
 
+  /* ----------------------------------------
+   * Read-only summary for terminal states
+   * ---------------------------------------- */
+
   .cinder-approval-card__readonly-summary {
     margin: 0;
     border: 1px solid var(--cinder-border-muted);
@@ -249,17 +311,132 @@
     font-size: var(--cinder-text-sm);
   }
 
-  @container cinder-approval-card (max-width: 40rem) {
-    .cinder-approval-card__header {
-      flex-direction: column;
-    }
+  .cinder-approval-card__readonly-summary[data-cinder-state='approved'],
+  .cinder-approval-card__readonly-summary[data-cinder-state='approved_with_edits'] {
+    border-color: var(--cinder-color-success-border);
+    background: var(--cinder-color-success-bg);
+    color: var(--cinder-color-success-fg);
+  }
 
-    .cinder-approval-card__badges {
-      justify-content: flex-start;
-    }
+  .cinder-approval-card__readonly-summary[data-cinder-state='denied'] {
+    border-color: var(--cinder-color-danger-border);
+    background: var(--cinder-color-danger-bg);
+    color: var(--cinder-color-danger-fg);
+  }
+
+  /* ----------------------------------------
+   * Details disclosure (sandbox, environment, request metadata)
+   * ---------------------------------------- */
+
+  .cinder-approval-card__details {
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background: var(--cinder-surface);
+    overflow: hidden;
+  }
+
+  .cinder-approval-card__details .cinder-collapsible__trigger {
+    border-radius: 0;
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    background: var(--cinder-surface-raised);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-approval-card__details[data-cinder-expanded] .cinder-collapsible__trigger {
+    border-block-end: 1px solid var(--cinder-border);
+  }
+
+  .cinder-approval-card__details .cinder-collapsible__panel-inner {
+    padding: var(--cinder-space-3);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-approval-card__details-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-approval-card__details-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
   }
 
+  .cinder-approval-card__details-label {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+    margin: 0;
+    color: var(--cinder-text);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .cinder-approval-card__details-label .cinder-approval-card__muted {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-normal);
+    text-transform: none;
+    letter-spacing: normal;
+  }
+
+  .cinder-approval-card__metadata {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--cinder-space-3);
+    margin: 0;
+  }
+
+  .cinder-approval-card__metadata--compact {
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__metadata-item {
+    min-inline-size: 0;
+  }
+
+  .cinder-approval-card__metadata-item dt {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .cinder-approval-card__metadata-item dd {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-approval-card__metadata-help {
+    color: var(--cinder-text-muted);
+    font-family: var(--cinder-font-sans);
+    font-size: var(--cinder-text-xs);
+  }
+
+  /* ----------------------------------------
+   * Forced colors
+   * ---------------------------------------- */
+
   @media (forced-colors: active) {
+    .cinder-approval-card__risk-icon {
+      color: CanvasText;
+    }
+
+    .cinder-approval-card__risk-icon:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
     .cinder-approval-card__textarea:focus-visible,
     .cinder-approval-card__remember-control input:focus-visible {
       outline: var(--cinder-ring-width) solid ButtonText;

package/dist/components/approval-card/approval-card.schema.js

@@ -110,7 +110,7 @@ var schema = {
               items: {
                 type: "string"
               },
-              description: "File paths that the operation may read or write."
+              description: "File paths that the operation may read or write. Duplicate paths are collapsed for display."
             },
             argsPreview: {
               description: "JSON-like argument preview shown to the approver."
@@ -131,7 +131,7 @@ var schema = {
               items: {
                 type: "string"
               },
-              description: "File paths that the operation may read or write. File-write approvals require at least one path.",
+              description: "File paths that the operation may read or write. File-write approvals require at least one path. Duplicate paths are collapsed for display.",
               minItems: 1
             },
             argsPreview: {
@@ -153,7 +153,7 @@ var schema = {
               items: {
                 type: "string"
               },
-              description: "File paths that the operation may read or write."
+              description: "File paths that the operation may read or write. Duplicate paths are collapsed for display."
             },
             argsPreview: {
               description: "JSON-like argument preview shown to the approver."
@@ -178,7 +178,7 @@ var schema = {
               items: {
                 type: "string"
               },
-              description: "File paths that the operation may read or write."
+              description: "File paths that the operation may read or write. Duplicate paths are collapsed for display."
             },
             argsPreview: {
               description: "JSON-like argument preview shown to the approver."
@@ -221,6 +221,10 @@ var schema = {
       type: "boolean",
       description: "Whether approving with edited JSON arguments is available. Default `false`."
     },
+    headingLevel: {
+      enum: [2, 3, 4, 5, 6],
+      description: "Heading level for the card title; section headings render one level deeper. Default `3`."
+    },
     class: {
       type: "string",
       description: "Additional CSS classes applied to the root element."
@@ -230,35 +234,10 @@ var schema = {
   required: ["idempotencyKey", "operation", "policyVersion", "state", "tool"],
   metadata: {
     unsupportedProps: [
-      {
-        name: "onapprove",
-        reason: "function-or-snippet",
-        description: "Called when the approver accepts the operation as presented."
-      },
-      {
-        name: "onapprovewithedits",
-        reason: "function-or-snippet",
-        description: "Called with parsed JSON arguments when the approver accepts edited arguments."
-      },
-      {
-        name: "oncancel",
-        reason: "function-or-snippet",
-        description: "Called when the approver cancels the approval prompt."
-      },
-      {
-        name: "ondeny",
-        reason: "function-or-snippet",
-        description: "Called when the approver denies the operation."
-      },
-      {
-        name: "onremember",
-        reason: "function-or-snippet",
-        description: "Called when the approver asks the host application to remember the decision."
-      },
       {
         name: "onresolve",
         reason: "function-or-snippet",
-        description: "Called for approve, approve-with-edits, deny, and cancel with the complete resolution payload."
+        description: "Called for approve, approve-with-edits, deny, and dismiss with the complete resolution payload."
       }
     ]
   }
@@ -268,4 +247,4 @@ export {
   approval_card_schema_default as default
 };
 
-//# debugId=DE9CF2D6E8C966C664756E2164756E21
+//# debugId=40434452BFE017FD64756E2164756E21

package/dist/components/approval-card/approval-card.svelte.d.ts

@@ -10,11 +10,11 @@
  * @useWhen Showing policy, sandbox, idempotency, environment-name, and argument context for an approval request.
  * @avoidWhen The action has already completed and only needs historical display — use event-stream-viewer or run-step-timeline instead.
  * @avoidWhen Collecting arbitrary form input for a workflow — compose form controls directly instead.
- * @related card, badge, status-dot, payload-inspector, secret-value-field, code-block
- * @a11yNote Uses a named region and native button controls so approval actions are discoverable by assistive technology.
+ * @related card, badge, status-dot, payload-inspector, code-block, collapsible
+ * @a11yNote Renders as an article with native button controls so approval actions are discoverable without polluting the landmark list.
  * @a11yNote Expiration changes update the visible state but do not fire approval callbacks automatically.
  */
-export type { ApprovalCardCallbacks, ApprovalCardProps, ApprovalCardSchemaProps, ApprovalOperation, ApprovalOperationKind, ApprovalResolution, ApprovalResolutionDecision, ApprovalSandbox, ApprovalState, ApprovalTool, ApprovalToolRisk, } from './approval-card.types.ts';
+export type { ApprovalCardCallbacks, ApprovalCardHeadingLevel, ApprovalCardProps, ApprovalCardSchemaProps, ApprovalOperation, ApprovalOperationKind, ApprovalResolution, ApprovalResolutionDecision, ApprovalSandbox, ApprovalState, ApprovalTool, ApprovalToolRisk, } from './approval-card.types.ts';
 import type { ApprovalCardProps } from './approval-card.types.ts';
 declare const ApprovalCard: import("svelte").Component<ApprovalCardProps, {}, "">;
 type ApprovalCard = ReturnType<typeof ApprovalCard>;