@fungi.computer/caps 0.3.1 → 0.5.0

package/dist/styles.css

@@ -4304,6 +4304,9 @@
   .end {
     inset-inline-end: var(--spacing);
   }
+  .top-\(--resize-pane\) {
+    top: var(--resize-pane);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -4319,6 +4322,9 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .left-\(--resize-pane\) {
+    left: var(--resize-pane);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -6166,9 +6172,6 @@
       margin-block-end: calc(var(--spacing-sm) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .self-stretch {
-    align-self: stretch;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -6180,9 +6183,6 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-visible {
-    overflow: visible;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -6225,10 +6225,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .badge-outline {
     @layer daisyui.l1.l2 {
       color: var(--badge-color);
@@ -6370,9 +6366,6 @@
   .p-2xl {
     padding: var(--spacing-2xl);
   }
-  .p-2xs {
-    padding: var(--spacing-2xs);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -8740,6 +8733,20 @@
       white-space: nowrap;
     }
   }
+  .caps-app-status-bar .badge {
+    height: auto;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--stipe-fg-muted);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+  .caps-app-status-bar .badge-warning {
+    color: var(--color-warning);
+  }
   .caps-status-bar-picker-list {
     min-width: min(18rem, calc(100vw - 1.5rem));
   }
@@ -10990,17 +10997,61 @@
     color: var(--color-base-content);
     font-size: 0.875rem;
   }
-  .caps-composer > .join {
-    border: var(--border) solid var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border: var(--border) solid color-mix(in oklab, var(--color-base-content) 12%, var(--color-base-300));
-    }
-    border-radius: var(--radius-box);
-    background: var(--color-base-200);
-    box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) var(--color-base-content), 0 calc(var(--depth) * 1px) 0 var(--color-base-100) );
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 12%), transparent ), 0 calc(var(--depth) * 1px) 0 color-mix( in oklab, var(--color-base-100) calc(var(--depth) * 60%), transparent ) );
-    }
+  .caps-composer {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-input {
+    position: relative;
+    min-width: 0;
+  }
+  .caps-composer-input :is(textarea, input), .caps-composer-input :is(textarea, input):focus, .caps-composer-input :is(textarea, input):focus-visible {
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+    padding-inline: 0;
+  }
+  .caps-composer-bar {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar > .caps-status-tray {
+    flex: 1;
+    min-width: 0;
+    --caps-status-tray-row-wrap: wrap;
+    --caps-status-tray-chips-display: contents;
+    --caps-status-tray-key-height: calc(var(--size-field) * 8);
+    --caps-status-tray-chip-height: var(--caps-status-tray-key-height);
+    --caps-status-tray-width: 28rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-row :is(.caps-keycap-button, .caps-status-tray-chip, .caps-select) {
+    height: var(--caps-status-tray-key-height);
+    min-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-label {
+    display: flex;
+    align-items: center;
   }
   .caps-alert[data-tone="error"] h3 {
     color: var(--color-error);
@@ -11448,29 +11499,23 @@
   }
   .caps-resize-handle {
     display: grid;
-    width: 64px;
-    height: 22px;
+    width: 44px;
+    height: 24px;
+    grid-template-columns: minmax(0, 1fr);
     place-items: center;
-    border: var(--border) solid var(--stipe-linework);
+    border: 0;
     border-radius: var(--radius-field);
-    background: var(--color-base-200);
+    background: transparent;
     cursor: row-resize;
     touch-action: none;
     user-select: none;
   }
   .caps-resize-handle[aria-orientation="vertical"] {
-    width: 22px;
-    height: 64px;
+    width: 24px;
+    height: 44px;
     cursor: col-resize;
   }
-  .caps-resize-handle[data-resize-variant="notch"] {
-    border-radius: var(--radius-box) var(--radius-box) var(--radius-field) var(--radius-field);
-    box-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.55)), 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.55)), 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 12%), transparent );
-    }
-  }
-  .caps-resize-handle:is(:hover, :focus-visible) {
+  .caps-resize-handle:focus-visible {
     outline: 2px solid var(--color-info);
     outline-offset: 2px;
   }
@@ -11479,29 +11524,45 @@
   }
   .caps-resize-grip {
     position: relative;
-    width: 38px;
-    height: 8px;
+    width: 28px;
+    height: 6px;
     border-radius: var(--radius-button);
-    background-color: var(--color-neutral);
-    background-image: linear-gradient( to bottom, oklch(100% 0 0 / calc(var(--depth) * 0.08)), transparent 50%, oklch(0% 0 0 / calc(var(--depth) * 0.015)) );
-    box-shadow: var( --stipe-shadow-raised, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.6)), inset 0 -2px 0 var(--color-neutral), inset 0 0 0 1px var(--color-neutral) );
+    background-color: var(--color-base-200);
+    box-shadow: 0 0 0 1px var(--stipe-linework), inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)), 0 1px 0 var(--color-base-200);
     @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --stipe-shadow-raised, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.6)), inset 0 -2px 0 color-mix(in oklab, var(--color-neutral) 75%, black), inset 0 0 0 1px color-mix( in oklab, var(--color-neutral), black calc(var(--depth) * 14%) ) );
+      box-shadow: 0 0 0 1px color-mix(in oklab, var(--stipe-linework) 80%, var(--color-base-200)), inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)), 0 1px 0 color-mix( in oklab, var(--color-base-200), var(--color-base-content) 14% );
     }
   }
+  .caps-resize-handle:hover .caps-resize-grip {
+    background-color: var(--color-base-300);
+  }
   .caps-resize-grip::after {
     content: "";
     position: absolute;
-    inset-inline: 7px;
+    left: 50%;
     top: 50%;
+    width: 2px;
     height: 2px;
-    transform: translateY(-50%);
-    border-radius: var(--radius-button);
-    background: linear-gradient( to bottom, oklch(100% 0 0 / calc(var(--depth) * 0.45)) 50%, oklch(0% 0 0 / calc(var(--depth) * 0.28)) 50% );
-    box-shadow: 0 -3px 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.45)), 0 -2px 0 -0.5px oklch(0% 0 0 / calc(var(--depth) * 0.28)), 0 3px 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.45)), 0 4px 0 -0.5px oklch(0% 0 0 / calc(var(--depth) * 0.28));
+    transform: translate(-50%, -50%);
+    border-radius: var(--radius-selector);
+    background: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
+    box-shadow: -5px 0 0 var(--color-base-content), 5px 0 0 var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: -5px 0 0 color-mix(in oklab, var(--color-base-content) 45%, transparent), 5px 0 0 color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
   }
   .caps-resize-handle[aria-orientation="vertical"] .caps-resize-grip {
-    transform: rotate(90deg);
+    width: 6px;
+    height: 28px;
+  }
+  .caps-resize-handle[aria-orientation="vertical"] .caps-resize-grip::after {
+    box-shadow: 0 -5px 0 var(--color-base-content), 0 5px 0 var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -5px 0 color-mix(in oklab, var(--color-base-content) 45%, transparent), 0 5px 0 color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
   }
   @media (prefers-reduced-motion: reduce) {
     .caps-scroll-thumb-surface {
@@ -11509,6 +11570,10 @@
     }
   }
   @media (forced-colors: active) {
+    .caps-resize-grip {
+      border: 1px solid ButtonText;
+      box-shadow: none;
+    }
     .caps-scroll-track {
       background: Canvas;
       box-shadow: none;
@@ -12643,6 +12708,13 @@
     padding: var(--spacing-md);
     text-align: center;
   }
+  .caps-send-action {
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-padding: 0;
+    --caps-keycap-min-width: var(--caps-keycap-height, 2.5rem);
+    flex: none;
+  }
   .caps-send-glyph {
     display: inline-grid;
     place-items: center;
@@ -12983,6 +13055,136 @@
   .caps-form-footer .caps-field-error {
     padding-bottom: var(--spacing-sm);
   }
+  :is(.caps-form, .caps-form-section, .caps-fieldset)[data-layout="columns"] {
+    --caps-form-label-col: 9rem;
+  }
+  .caps-form[data-layout="columns"] :is(.caps-form-body, .caps-form-section-fields) {
+    gap: var(--spacing-sm);
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) {
+    display: grid;
+    grid-template-columns: var(--caps-form-label-col) minmax(0, 1fr);
+    column-gap: var(--spacing-md);
+    row-gap: var(--spacing-2xs);
+    align-items: center;
+    justify-content: stretch;
+    --caps-field-control-width: 100%;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > label {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > .caps-field-description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > :not(.caps-field-copy, .caps-field-lead, .caps-field-error-reveal) {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    max-width: 30rem;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-switch {
+    width: 40px;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-checkbox {
+    width: 24px;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-lead {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-error-reveal {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-row > .caps-field-lead {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-error-reveal {
+    padding-inline-start: calc(var(--caps-form-label-col) + var(--spacing-md));
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field:has(> .caps-field-error-reveal[data-open="true"]) .caps-field-description, .caps-fieldset[data-layout="columns"]:has( > .caps-field-error-reveal[data-open="true"] ) > .caps-fieldset-description {
+    display: none;
+  }
+  .caps-fieldset[data-layout="columns"] {
+    display: grid;
+    grid-template-columns: var(--caps-form-label-col) minmax(0, 1fr);
+    column-gap: var(--spacing-md);
+    row-gap: var(--spacing-2xs);
+    align-items: start;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
+    grid-column: 2;
+    grid-row: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
+  }
+  .caps-fieldset[data-layout="columns"] > :is(.caps-fieldset-description, .caps-field-error-reveal) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  .caps-form[data-layout="columns"] .caps-form-footer {
+    padding-inline-start: calc(var(--caps-form-label-col) + var(--spacing-md));
+    max-width: calc(var(--caps-form-label-col) + var(--spacing-md) + 30rem);
+  }
+  @container (min-width: 36rem) {
+    .caps-form[data-layout="columns"] .caps-form-body:has(> .caps-field:first-child:nth-last-child(2)) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+    }
+    .caps-form[data-layout="columns"] .caps-form-body:has(> .caps-field:first-child:nth-last-child(2)) > .caps-form-footer {
+      padding-inline-start: 0;
+      max-width: none;
+    }
+  }
+  @container (max-width: 20rem) {
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ), .caps-fieldset[data-layout="columns"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > :not(.caps-field-copy, .caps-field-lead, .caps-field-error-reveal), .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
+      grid-column: 1;
+      grid-row: 2;
+      max-width: none;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > .caps-field-description, :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-error-reveal, .caps-fieldset[data-layout="columns"] > :is(.caps-fieldset-description, .caps-field-error-reveal) {
+      grid-column: 1;
+      grid-row: 3;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > label, .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+      overflow: visible;
+      text-overflow: clip;
+      white-space: normal;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-error-reveal, .caps-form[data-layout="columns"] .caps-form-footer {
+      padding-inline-start: 0;
+      max-width: none;
+    }
+  }
   .caps-choice-card {
     display: flex;
     flex: 1 1 var(--caps-choice-card-basis, 14rem);
@@ -13587,15 +13789,15 @@
     isolation: var(--caps-button-outline-isolation, auto);
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--caps-button-outline-face, revert-layer);
-    color: var(--caps-button-outline-ink, revert-layer);
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
   }
   .caps-button.btn-outline:is(:disabled, [aria-disabled="true"]) {
     background-color: var( --caps-button-outline-disabled-face, var(--color-base-200) );
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):hover {
-    background-color: var( --caps-button-outline-hover-face, var(--caps-button-outline-face, revert-layer) );
-    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, revert-layer) );
+    background-color: var( --caps-button-outline-hover-face, var(--caps-keycap-hover-face, var(--caps-key-face)) );
+    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, var(--color-base-content)) );
   }
   .caps-button.btn-outline::before {
     content: var(--caps-button-outline-inset-content, none);
@@ -13608,21 +13810,36 @@
   .caps-button.btn-outline:hover::before {
     background: var(--color-base-content);
   }
-  .caps-button.btn-outline {
-    --btn-border: var(--color-base-content);
+  .caps-keycap-button, .caps-button-filled, .caps-button.btn-outline {
+    --caps-key-lip: calc(var(--depth) * 1px);
+    --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face);
     @supports (color: color-mix(in lab, red, red)) {
-      --btn-border: color-mix(
-      in oklab,
-      var(--color-base-content) 24%,
-      transparent
-    );
+      --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        color-mix(
+          in oklab,
+          var(--caps-key-face),
+          var(--caps-key-lip-ink, var(--color-base-content)) 14%
+        );
     }
+    --caps-key-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent;
+  }
+  .caps-button.btn-outline {
+    --btn-border: var(--stipe-linework);
+    --caps-key-face: var(--caps-button-outline-face, var(--color-base-200));
     font-weight: var(--caps-button-weight, 500);
-    box-shadow: var(--caps-button-outline-drop, var(--caps-button-drop, none));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop, var(--caps-key-rest-shadow)) );
+    transition-property: background-color, border-color, box-shadow, translate;
+    transition-duration: var(--stipe-motion-fast);
+    transition-timing-function: ease-out;
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):active {
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
-    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, none) );
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, var(--caps-key-pressed-shadow)) );
   }
   .caps-button.btn-ghost {
     font-weight: 500;
@@ -13632,6 +13849,9 @@
   }
   .caps-button-filled {
     --btn-bg: var(--btn-color);
+    --caps-key-face: var(--btn-color);
+    --caps-key-lip-ink: black;
+    --caps-key-top-edge: 0.06;
     --caps-button-filled-edge: var(
       --caps-button-border-color,
       var(--btn-bg)
@@ -13641,7 +13861,7 @@
       --caps-button-border-color,
       color-mix(
         in oklab,
-        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 8%)),
+        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 6%)),
         var(--stipe-linework)
           calc((1 - var(--depth)) * var(--caps-button-linework, 100%))
       )
@@ -13649,7 +13869,7 @@
     }
     --caps-button-filled-drop: var(
       --caps-button-drop,
-      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18))
+      var(--caps-key-rest-shadow)
     );
     background-color: var(--btn-bg);
     color: var(--btn-fg);
@@ -13692,9 +13912,9 @@
     @supports (color: color-mix(in lab, red, red)) {
       --btn-bg: color-mix(in oklab, var(--btn-color) 92%, black);
     }
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     scale: var(--stipe-press-scale);
-    box-shadow: var( --caps-button-drop-active, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)) );
+    box-shadow: var(--caps-button-drop-active, var(--caps-key-pressed-shadow));
     transition-duration: var(--stipe-motion-squish);
   }
   .caps-button.caps-button-menubar {
@@ -14675,7 +14895,7 @@
     scale: none;
   }
   .caps-button-filled:not(:disabled):not([aria-disabled="true"]):active {
-    translate: var(--caps-button-press-reduced, none);
+    translate: var(--caps-button-press-reduced, 0 var(--caps-key-lip));
   }
   .caps-gooey-motion, .caps-gooey-motion::before, .caps-switch, .caps-radio, .caps-checkbox, .caps-checkbox-track, .caps-input, .caps-status-bead {
     animation: none !important;
@@ -15860,7 +16080,7 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .caps-keycap, .caps-keycap-button {
+  .caps-keycap, .caps-keycap-button, .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -15931,7 +16151,21 @@
     height: 0.625rem;
   }
   .caps-keycap-button {
-    --caps-keycap-lip: calc(var(--depth) * 1px);
+    --caps-key-face: var(--caps-keycap-face, var(--color-base-200));
+    --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        color-mix(in oklab, var(--caps-key-face), var(--color-base-content) 14%),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    }
+    --caps-keycap-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)),
+      0 0 0 transparent, 0 0 0 transparent;
     display: flex;
     width: var(--caps-keycap-width, 100%);
     min-width: var(--caps-keycap-min-width, 0);
@@ -15940,7 +16174,10 @@
     justify-content: var(--caps-keycap-justify, space-between);
     gap: var(--spacing-sm);
     padding: var(--caps-keycap-padding, var(--spacing-xs) var(--spacing-sm));
-    border: var( --caps-keycap-context-border, var(--border) solid var(--caps-keycap-edge, var(--stipe-linework)) );
+    border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, var(--stipe-linework) ) );
+    @supports (color: color-mix(in lab, red, red)) {
+      border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, color-mix(in oklab, var(--stipe-linework) 80%, var(--caps-key-face)) ) );
+    }
     font-size: var(--caps-keycap-font-size, inherit);
     font-weight: var( --caps-keycap-context-weight, var(--caps-keycap-font-weight, inherit) );
     border-radius: var(--radius-field);
@@ -15949,12 +16186,28 @@
       var(--caps-keycap-face, var(--color-base-200))
     );
     background-color: var(--caps-keycap-painted-face);
-    --caps-keycap-default-image: none;
-    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
-    box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 var(--caps-keycap-face, var(--color-base-200)) );
+    --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      var(--caps-keycap-painted-face),
+      var(--caps-keycap-painted-face)
+    );
     @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 color-mix( in oklab, var(--caps-keycap-face, var(--color-base-200)), var(--color-base-content) 14% ) );
+      --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        white calc(var(--depth) * 3%)
+      ),
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        black calc(var(--depth) * 3%)
+      )
+    );
     }
+    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
+    box-shadow: var( --caps-keycap-context-shadow, var(--caps-keycap-rest-shadow) );
     color: var(--caps-keycap-ink, var(--color-base-content));
     text-align: left;
     cursor: pointer;
@@ -15963,8 +16216,8 @@
     transition-timing-function: ease-out;
   }
   .caps-keycap-button:active {
-    translate: 0 var(--caps-keycap-context-travel, var(--caps-keycap-lip));
-    box-shadow: var( --caps-keycap-active-shadow, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent );
+    translate: 0 var(--caps-keycap-context-travel, var(--caps-key-lip));
+    box-shadow: var( --caps-keycap-active-shadow, var(--caps-keycap-pressed-shadow) );
   }
   .caps-keycap-button:focus-visible {
     outline: 2px solid var(--caps-keycap-focus-ink, var(--color-base-content));
@@ -16011,6 +16264,28 @@
     --caps-keycap-ink: var(--color-neutral-content);
     --caps-keycap-edge: var(--color-neutral);
   }
+  .caps-keycap-button.caps-send-action[data-tone="primary"] {
+    --caps-keycap-face: var(--color-primary);
+    --caps-keycap-ink: var(--color-primary-content);
+    --caps-keycap-edge: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-edge: color-mix(in oklab, var(--color-primary) 82%, black);
+    }
+    --caps-keycap-hover-face: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-hover-face: color-mix(
+      in oklab,
+      var(--color-primary) 92%,
+      black
+    );
+    }
+  }
+  .caps-keycap-button.caps-send-action[data-send-state="empty"] {
+    --caps-keycap-face: var(--color-base-200);
+    --caps-keycap-ink: var(--color-base-content);
+    --caps-keycap-edge: var(--stipe-linework);
+    --caps-keycap-hover-face: var(--color-base-200);
+  }
   .caps-keycap-button[data-tone="destructive"]:is(:hover, :focus-visible) {
     --caps-keycap-ink: var(--color-error);
     --caps-keycap-edge: var(--color-error);

package/docs/api/blocks/composer.md

@@ -20,12 +20,12 @@ Props accepted by Composer.
 
 #### Type Declaration
 
-| Name            | Type        | Description                                                                                   |
-| --------------- | ----------- | --------------------------------------------------------------------------------------------- |
-| `input`         | `ReactNode` | The caller-owned primary input control.                                                       |
-| `action?`       | `ReactNode` | The caller-owned action control. Its disabled state and accessible name stay on that control. |
-| `leading?`      | `ReactNode` | Optional caller-owned leading slot, such as an avatar.                                        |
-| `rowClassName?` | `string`    | Classes for the joined row; useful when the host exposes a busy state.                        |
+| Name           | Type        | Description                                                                  |
+| -------------- | ----------- | ---------------------------------------------------------------------------- |
+| `input`        | `ReactNode` | The caller-owned field, typed into directly: the surface is the field.       |
+| `action?`      | `ReactNode` | The caller-owned key at the end of the bottom row, such as a SendAction.     |
+| `toolbar?`     | `ReactNode` | Caller-owned controls and readouts along the bottom edge, before the action. |
+| `attachments?` | `ReactNode` | Caller-owned items riding with the draft, shown above the text.              |
 
 ## Variables
 
@@ -37,4 +37,7 @@ const Composer: ForwardRefExoticComponent<
 >;
 ```
 
-Layout and slots only. It never assigns action-control semantics.
+One composer surface: attachments, then the text, then a slim row along the
+bottom edge holding the toolbar and, at its end, the action. It draws no box of
+its own: the host region is the field. Layout and slots only; it never assigns
+action-control semantics.