@fungi.computer/caps 0.3.1 → 0.5.0

package/src/styles.css

@@ -2422,26 +2422,73 @@
     color: var(--color-base-content);
     font-size: 0.875rem;
   }
-  .caps-composer > .join {
-    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)
-        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
-        )
-    );
+  /* The composer is a surface, not a box inside a panel: the host region is
+     the field, and the text sits directly on the host's face. A slim row along
+     the bottom edge carries the toolbar and, at its end, the action key. */
+  .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);
+  }
+  /* A StatusTray seated as the composer's toolbar: one wrapping row of keys,
+     selects and chips on the theme's field-size grid, the same in every App. */
+  .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);
+  }
+  /* A chip label is a flex row, so an inline label box adds no text strut
+     and chip text shares the keys' baseline. */
+  .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);
@@ -2933,34 +2980,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)
-        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;
   }
@@ -2969,49 +3005,46 @@
   }
   .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 color-mix(in oklab, var(--color-neutral) 75%, black),
-      inset 0 0 0 1px
+    background-color: var(--color-base-200);
+    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-neutral),
-          black calc(var(--depth) * 14%)
-        )
-    );
+          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%
-    );
+    transform: translate(-50%, -50%);
+    border-radius: var(--radius-selector);
+    background: color-mix(in oklab, var(--color-base-content) 45%, transparent);
     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));
+      -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 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 {
@@ -3019,6 +3052,10 @@
     }
   }
   @media (forced-colors: active) {
+    .caps-resize-grip {
+      border: 1px solid ButtonText;
+      box-shadow: none;
+    }
     .caps-scroll-track {
       background: Canvas;
       box-shadow: none;
@@ -4221,6 +4258,14 @@
     text-align: center;
   }
   /* SendAction: the arrow and the working glyph share one cell. */
+  /* The send key: one square keycap whose glyph changes, never a second key. */
+  .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;
@@ -4610,6 +4655,232 @@
     padding-bottom: var(--spacing-sm);
   }
 
+  /* The label gutter belongs to an opted-in form. No default Field or Form
+     changes geometry, including the signed-off permissions panel. */
+  :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;
+  }
+  /* Grid controls fill the value column; a switch or checkbox is a fixed-size
+     key, never a stretched track spanning the next settings row. */
+  :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);
+  }
+  /* A short add form can share its one field row with the actions. */
+  @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;
+    }
+  }
+  /* Decide once per form: the 30rem example still has space for a 9rem label
+     and its control, while genuinely narrow phone forms stack every field. */
+  @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;
+    }
+  }
+
   /* Choice cards: a RadioGroup option with room for a description and a
      trailing readout. Selection is ink, not accent. */
   .caps-choice-card {
@@ -5333,8 +5604,8 @@
     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(
@@ -5345,11 +5616,11 @@
   .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)
+      var(--caps-keycap-hover-face, var(--caps-key-face))
     );
     color: var(
       --caps-button-outline-hover-ink,
-      var(--caps-button-outline-ink, revert-layer)
+      var(--caps-button-outline-ink, var(--color-base-content))
     );
   }
   /* A cut outline uses an inset face; an ordinary outline needs no extra face. */
@@ -5365,24 +5636,48 @@
     background: var(--color-base-content);
   }
 
-  /* An outline button is a hairline frame with a medium label: no drop in
-     any state, unless a theme's finish asks for one. */
+  /* The Caps key material: a flat face on a 1px lip shaded toward the ink,
+     a faint top edge, and a press that settles the face onto its lip. Every
+     Button reads it; KeycapButton reads its face and lip and raises its own
+     finish on them. Everything scales with --depth, so flat themes keep a
+     flat linework key, and a theme's --caps-button-drop/-press still win. */
+  .caps-keycap-button,
+  .caps-button-filled,
   .caps-button.btn-outline {
-    --btn-border: color-mix(
-      in oklab,
-      var(--color-base-content) 24%,
-      transparent
-    );
+    --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
+        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;
+  }
+
+  /* An outline button is the neutral key: a base-200 face on linework. */
+  .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));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     box-shadow: var(
       --caps-button-outline-drop,
-      var(--caps-button-drop-active, none)
+      var(--caps-button-drop-active, var(--caps-key-pressed-shadow))
     );
   }
 
@@ -5394,25 +5689,28 @@
     --radius-field: var(--radius-button);
   }
 
-  /* A filled button is a flat key: one solid fill, a hairline edge a step
-     darker than the fill, and at most a faint 1px top highlight. Flat themes
-     edge it in linework instead; a theme sets --caps-button-linework: 0% to
-     edge it in its own fill. Press feel comes from the theme's
-     --stipe-press-depth and --stipe-press-scale. */
+  /* A filled button is the same key in its role colour: one solid fill with
+     no lighter ring, an edge a hair darker than the fill, a quiet lip shaded
+     darker still, and only a very faint top edge. Flat themes edge it in
+     linework instead; a theme sets --caps-button-linework: 0% to edge it in
+     its own fill. */
   .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,
       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%))
       )
     );
     --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);
@@ -5470,12 +5768,9 @@
     ) {
     --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);
   }
 
@@ -6686,8 +6981,9 @@
     scale: none;
   }
 
+  /* The press is a state, not motion: a key still settles onto its lip. */
   .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,
@@ -7990,7 +8286,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .caps-keycap,
-  .caps-keycap-button {
+  .caps-keycap-button,
+  .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -8071,11 +8368,23 @@
   .caps-game-meter .progress {
     height: 0.625rem;
   }
-  /* A key: a flat face on a 1px lip, with a faint top highlight. The lip and
-     press travel scale with --depth, so flat themes keep a flat linework key.
-     A host or theme picks the face through --caps-keycap-face/-ink/-edge. */
+  /* A key: today's flat key on a 1px lip, a touch richer. The face carries a
+     faint ±3% grade, the top edge is 0.18, a small soft drop sits under the
+     lip, and the linework edge is softened 20% toward the face. It reads its
+     face and lip from the Caps key material; everything scales with --depth,
+     so flat themes keep a flat linework key. A host or theme picks the face
+     through --caps-keycap-face/-ink/-edge. */
   .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
+        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);
@@ -8086,7 +8395,11 @@
     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))
+      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(
@@ -8099,20 +8412,26 @@
       var(--caps-keycap-face, var(--color-base-200))
     );
     background-color: var(--caps-keycap-painted-face);
-    --caps-keycap-default-image: none;
+    --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,
-      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%
-        )
+      var(--caps-keycap-rest-shadow)
     );
     color: var(--caps-keycap-ink, var(--color-base-content));
     text-align: left;
@@ -8123,11 +8442,10 @@
     transition-timing-function: ease-out;
   }
   .caps-keycap-button:active {
-    translate: 0 var(--caps-keycap-context-travel, var(--caps-keycap-lip));
+    translate: 0 var(--caps-keycap-context-travel, var(--caps-key-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
+      var(--caps-keycap-pressed-shadow)
     );
   }
   .caps-keycap-button:focus-visible {
@@ -8164,6 +8482,25 @@
     --caps-keycap-ink: var(--color-neutral-content);
     --caps-keycap-edge: var(--color-neutral);
   }
+  /* The send key is a filled key in its role colour, like a filled Button:
+     a solid face and a hairline edge one step darker, no light rim. With
+     nothing to send it rests as a calm neutral key. */
+  .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: color-mix(in oklab, var(--color-primary) 82%, black);
+    --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);
+  }
   /* Destructive keys stay quiet until the pointer or focus is on them. */
   .caps-keycap-button[data-tone="destructive"]:is(:hover, :focus-visible) {
     --caps-keycap-ink: var(--color-error);