@crewlethq/ui 0.63.0 → 0.64.1

package/dist/{Charts-TZ744HT6.css → Charts-UJKADWXE.css}

@@ -287,9 +287,12 @@
   grid-column: 2;
 }
 
+/* The second line's two parts stand on its top, so a key that wraps grows
+   down from the sub's line instead of carrying the sub to its middle. */
 .crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__sub {
   grid-row: 2;
   grid-column: 1;
+  align-self: start;
 }
 
 .crewlet-bar-list--beside .crewlet-bar-list__label {
@@ -361,6 +364,13 @@
  * stands on the row's second line, under the bar it keys (see the item's
  * grid above), so each name stands under its part rather than under the
  * row's own name.
+ *
+ * ITS FIRST LINE IS THE SUB'S LINE. Both stand on the second line's top, at
+ * the words' leading, so the two are one line however many lines the key
+ * wraps to. Centred on the line instead, a key that wrapped to two lines
+ * carried the sub down between them, 10px further from its name than any
+ * other row's sub, and at the legend's own leading a keyed row stood 3px
+ * taller than a row with a sub alone.
  */
 .crewlet-bar-list__key {
   margin-top: var(--spacing-1);
@@ -370,8 +380,9 @@
 .crewlet-bar-list--beside .crewlet-bar-list__key {
   grid-row: 2;
   grid-column: 2;
-  align-self: center;
+  align-self: start;
   margin-top: 0;
+  line-height: var(--font-line-height-tight);
   pointer-events: none;
 }
 
@@ -609,9 +620,12 @@
   margin-inline-start: auto;
 }
 
+/* A step clear of the dates with the figure's own row gap, so it stands as
+   far under them as a time series' legend stands under its scale: the step
+   on top of that gap put it 12px down where the time series' is 8px. */
 .crewlet-stacked-columns__legend--below {
   grid-column: 1 / -1;
-  margin-top: var(--spacing-2);
+  margin-top: var(--spacing-1);
 }
 
 /* The middle label stands on the column it names (a style property). On a
@@ -992,14 +1006,20 @@
   direction: ltr;
 }
 
-/* The plot's bottom border is the axis line the ticks hang under. */
+/*
+ * The plot's bottom border is the axis line the ticks hang under, and THE
+ * BARS STAND ON IT, as a column chart's stand on its baseline. The room a
+ * focused bar's ring takes (its 2px offset and 2px width) is kept over the
+ * tallest bar here and under the axis by the dates' own margin; padded at
+ * the foot as well, every bar floated 4px over the line it is read against.
+ */
 .crewlet-histogram__plot {
   display: flex;
   align-items: flex-end;
   gap: 1px;
   width: 100%;
   height: var(--crewlet-histogram-height, 96px);
-  padding: var(--spacing-1) 0;
+  padding: var(--spacing-1) 0 0;
   border-bottom: 1px solid var(--color-border-hover);
 }
 
@@ -1031,6 +1051,10 @@ button.crewlet-histogram__bar {
  * bar the reader is pointing at, the selection a click is about to make. The
  * fill stacks from its foot, so the failed share sits at its bottom. Floors in
  * pixels: an empty bucket at two, the smallest real count at three.
+ *
+ * Its value end is rounded at the smallest step and its foot is square, as
+ * every bar and column in the kit is; at the step above it, a histogram on a
+ * page beside a column chart drew rounder bars than the columns next to it.
  */
 .crewlet-histogram__fill {
   display: flex;
@@ -1043,7 +1067,7 @@ button.crewlet-histogram__bar {
   height: var(--crewlet-histogram-fill, 0%);
   min-height: 3px;
   background: var(--color-data-1);
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
@@ -1074,12 +1098,14 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 /*
  * The dates under the bars. Absolutely placed, so a tick sits over the bucket
  * it names; the row states its own height because absolutely placed children
- * contribute none.
+ * contribute none. They stand a step under the axis, as a column chart's
+ * dates stand under its baseline, which is also the room a focused bar's
+ * ring reaches below the axis.
  */
 .crewlet-histogram__axis {
   position: relative;
   height: calc(var(--font-size-2xs) * var(--font-line-height-normal));
-  margin-top: 2px;
+  margin-top: var(--spacing-1);
 }
 
 .crewlet-histogram__tick {

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-KIPAFCVS.js';
-import '../chunk-TLIJG4TP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Checkbox-MB22OW6P.css → Checkbox-GAMV2XD7.css}

@@ -21,7 +21,18 @@
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-2);
-  min-height: var(--size-row-sm);
+  /*
+   * ITS FIRST LINE IS CENTRED IN THE ROW. The floor was a minimum height with
+   * the label at its top, so wherever a one-line box was centred with other
+   * controls (a toolbar, a settings row, a table's column list) the box and
+   * its label stood 4.2px above the line every other control's text was on.
+   * The floor is made of equal padding round the first line instead: one line
+   * comes out exactly the row's height with the text on its middle, and a
+   * longer label or a description grows the row downwards with the box still
+   * on its first line. `em` is the row's own size, so the compact step below
+   * recomputes it without restating it.
+   */
+  padding-block: calc((var(--size-row-sm) - var(--font-line-height-snug) * 1em) / 2);
   font-size: var(--font-size-sm);
   cursor: pointer;
 }
@@ -108,17 +119,7 @@
 .crewlet-checkbox--sm {
   --crewlet-checkbox-size: 14px;
 
-  /*
-   * ITS LINE IS CENTRED IN THE ROW. The row's floor was a minimum height with
-   * the label at its top, so in a form row of small inputs (whose text sits
-   * on their middle) the box and its label stood 5px above the line every
-   * other control's text was on. The floor is made of equal padding round
-   * the first line instead: one line comes out exactly the row's height with
-   * the text on its middle, and a longer label grows the row downwards with
-   * the box still on its first line.
-   */
-  min-height: 0;
-  padding-block: calc((var(--size-row-sm) - var(--font-line-height-snug) * 1em) / 2);
+  /* The row's padding is in `em`, so it centres this smaller line too. */
   font-size: var(--font-size-compact);
 }
 
@@ -127,15 +128,17 @@
 }
 
 /*
- * THE BARE BOX (`hideLabel`): no words beside it, so the row's floor and its
- * gap go, and the box is centred on a square the pointer floor allows. The
- * label is still its name, said rather than printed.
+ * THE BARE BOX (`hideLabel`): no words beside it, so the row's floor (its
+ * padding round a line) and its gap go, and the box is centred on a square
+ * the pointer floor allows. The label is still its name, said rather than
+ * printed.
  */
 .crewlet-checkbox--bare {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0;
+  padding-block: 0;
   min-width: var(--size-target-min);
   min-height: var(--size-target-min);
 }
@@ -147,6 +150,15 @@
 .crewlet-checkbox.is-disabled,
 .crewlet-checkbox.is-disabled .crewlet-checkbox__control {
   cursor: not-allowed;
+}
+
+/*
+ * THE ROW IS DIMMED ONCE. The box shared the rule above and took the opacity
+ * a second time inside the dimmed row, so it stood at 0.36 beside a label at
+ * 0.6: a box ticked and locked (a group whose Admin covers every app) all but
+ * vanished in the light theme.
+ */
+.crewlet-checkbox.is-disabled {
   opacity: 0.6;
 }
 

package/dist/ChoiceButtons/index.js

@@ -1,3 +1,3 @@
-export { ChoiceButtons } from '../chunk-MMZZGJHX.js';
+export { ChoiceButtons } from '../chunk-7SYEOJLP.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-HWXEF2H3.css → ChoiceButtons-Q2ET3I2N.css}

@@ -14,6 +14,10 @@
 }
 
 .crewlet-choice-buttons__option {
+  /* The option's leading, read by its line height and by the picture that
+     sits on its first line, so the two cannot drift apart. */
+  --crewlet-choice-buttons-leading: var(--font-line-height-snug);
+
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -28,7 +32,7 @@
   font: inherit;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-snug);
+  line-height: var(--crewlet-choice-buttons-leading);
   text-align: left;
   cursor: pointer;
   transition:
@@ -41,9 +45,14 @@
  * of columns), the options in one row stretch to the tallest, and centred
  * text put a one-line detail's label lower than its neighbour's two-line
  * one. A column of options is unchanged: each is as tall as its own text.
+ *
+ * At the top by the FIRST BASELINE rather than by the top edge: the words
+ * still start at the top, and the recommended mark sits on the label's own
+ * line. Aligned by their top edges, the mark's shorter line set it 3px above
+ * the label's baseline.
  */
 .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
-  align-items: flex-start;
+  align-items: baseline;
 }
 
 .crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
@@ -149,6 +158,17 @@
   align-self: center;
 }
 
+/*
+ * With a detail under it the label's line is the FIRST line, not the
+ * option's middle, so the picture stands on a box one line tall at the top.
+ * Centred on the label and its detail together, a suggestion's swatch sat
+ * 7px under the value it shows.
+ */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__media {
+  align-self: flex-start;
+  min-height: calc(var(--crewlet-choice-buttons-leading) * 1em);
+}
+
 /* Before the words, not at the far end with the recommended mark. */
 .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
   justify-content: flex-start;
@@ -171,11 +191,12 @@
 }
 
 .crewlet-choice-buttons--sm .crewlet-choice-buttons__option {
+  --crewlet-choice-buttons-leading: var(--font-line-height-tight);
+
   gap: var(--spacing-2);
   min-height: var(--size-control-sm);
   padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-1) / 2);
   font-size: var(--font-size-xs);
-  line-height: var(--font-line-height-tight);
 }
 
 .crewlet-choice-buttons--sm .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {

package/dist/ChoiceList/index.js

@@ -1,3 +1,3 @@
-export { ChoiceList } from '../chunk-EAQLI2SO.js';
+export { ChoiceList } from '../chunk-NQABJAUY.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceList-KFYFAECP.css → ChoiceList-Q772QLFX.css}

@@ -10,6 +10,14 @@
   --crewlet-choice-list-radio-size: 13px;
   /* The step between two answers. Every row's pointer target reaches half of it. */
   --crewlet-choice-list-gap: var(--spacing-1);
+  /*
+   * A row's corner, and the corner its open panel ends on. A row stands 5px
+   * inside the box's 8px corner (the hairline and the padding), where a
+   * concentric corner is 3px, so it takes the extra-small step, as a Select's
+   * options and a Combobox's completions do in the same box. At the small
+   * step (6px) a chosen row's fill was rounder than the corner around it.
+   */
+  --crewlet-choice-list-row-radius: var(--radius-xs);
   display: grid;
   gap: var(--crewlet-choice-list-gap);
   padding: var(--spacing-1);
@@ -47,7 +55,7 @@
   align-items: start;
   gap: var(--spacing-3);
   padding: var(--spacing-2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--crewlet-choice-list-row-radius);
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
@@ -182,8 +190,8 @@
 
 .crewlet-choice-list__panel {
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
-  border-end-start-radius: var(--radius-sm);
-  border-end-end-radius: var(--radius-sm);
+  border-end-start-radius: var(--crewlet-choice-list-row-radius);
+  border-end-end-radius: var(--crewlet-choice-list-row-radius);
   background: var(--color-surface-selected);
 }
 

package/dist/CodeBlock/index.js

@@ -1,9 +1,9 @@
-export { CodeBlock } from '../chunk-SPCSFJNY.js';
-import '../chunk-IOTN23FZ.js';
+export { CodeBlock } from '../chunk-DMK2A4IK.js';
+import '../chunk-IYG4ETAQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CodeBlock-N5ETJF24.css → CodeBlock-T47UA5GM.css}

@@ -160,9 +160,14 @@
   display: block;
 }
 
+/* The numbers' track is as wide as the longest number (CodeBlock.tsx states
+   its figures) and never under two, as SourceEditor's gutter is. At a fixed
+   2ch a hundredth line's third figure hung out of the track's start, 7px
+   into the block's own padding, so the inset there was no longer the inset
+   at the other edges. */
 .crewlet-codeblock--numbered .crewlet-codeblock__line {
   display: grid;
-  grid-template-columns: 2ch 1fr;
+  grid-template-columns: calc(max(2, var(--crewlet-codeblock-digits, 2)) * 1ch) 1fr;
   gap: var(--spacing-3);
   align-items: baseline;
 }
@@ -194,8 +199,18 @@
   overflow-wrap: normal;
 }
 
-/* The copy control sits in the header in the sans face, not the block's. */
+/*
+ * The copy control sits in the header in the sans face, not the block's. It
+ * is a small ghost at the header's end, and it stands as far from that end as
+ * the header's block padding holds it from the top and the bottom, so its
+ * hover fill sits evenly in the corner (8px on both sides) rather than 12px
+ * in from the end and 8px down. It is pulled out by the difference only, not
+ * by its whole padding as a card foot's ghost is (StatusCard.css): that would
+ * leave 3px for a focus ring drawn 4px out, and the block's clip would cut
+ * the ring's outer pixel.
+ */
 .crewlet-codeblock__copy {
   flex: none;
+  margin-inline-end: calc(var(--spacing-2) - var(--spacing-3));
   font-family: var(--font-family-sans);
 }

package/dist/ColorField/index.js

@@ -1,11 +1,11 @@
-export { ColorField } from '../chunk-5YIL4WJP.js';
+export { ColorField } from '../chunk-7LSSYHOT.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ColorSwatch/index.js

@@ -1,10 +1,10 @@
-export { ColorSwatch } from '../chunk-KA2GAB3N.js';
-import '../chunk-IOTN23FZ.js';
+export { ColorSwatch } from '../chunk-2A6DL3K5.js';
+import '../chunk-IYG4ETAQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ColorSwatch-DNMUFHNS.css → ColorSwatch-V4DA4TK5.css}

@@ -56,10 +56,33 @@
   font-size: var(--font-size-xs);
 }
 
+/*
+ * THE VALUE IS ONE LINE OF ITS OWN TEXT, copyable or not, so the hex stands
+ * where a plain value or "Not set" does. The copy control is a small icon
+ * button (26px), taller than that line: left to set the row's height, it
+ * stood a copyable value four pixels lower than a plain one and made its
+ * swatch eight pixels taller. It is centred on the line instead (`1lh`, in
+ * the value's own size) and overflows it evenly, unseen until the row is
+ * reached.
+ */
+.crewlet-color-swatch__value {
+  height: 1lh;
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * ITS RING IS DRAWN INSIDE IT, as a bordered icon button's is. The control
+ * stands about four pixels over the line above its own, so the outset ring
+ * crossed the foot of the description's letters (the name's, in the small
+ * swatch). On the inset offset the ring keeps to the control's box.
+ */
+.crewlet-color-swatch__value .crewlet-copyable__button:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-color-swatch__value--plain {
   color: var(--color-text-secondary);
   font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
 }
 
 .crewlet-color-swatch__empty {

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-PK2P2QH6.js';
+export { Combobox } from '../chunk-ZUBFVK6B.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,10 +1,10 @@
-export { CommandPalette } from '../chunk-I74C4TM6.js';
-import '../chunk-KVWZDCTQ.js';
+export { CommandPalette } from '../chunk-PZAOUZFZ.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-ACRRRPWT.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ANTAQAR4.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';
@@ -12,7 +12,7 @@ import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,22 +1,22 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-YSHQQNB6.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-DKJJ434E.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-L6NG7CUA.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-PWG3VHRQ.js';
-import '../chunk-5CY6BW4Y.js';
-import '../chunk-ACRRRPWT.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-BXCL6P5Z.js';
+import '../chunk-5OFRDX66.js';
+import '../chunk-ANTAQAR4.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CommentThread-7VXOFTZO.css → CommentThread-FRXTDNV6.css}

@@ -56,9 +56,13 @@
   min-width: 0;
 }
 
+/* THE NAME AT THE REMARK'S OWN SIZE, a weight over it. Left to inherit, it
+   took whatever its host's body was: 16px on a 16px page, a step over the
+   section's own heading and three over the words it signs. */
 .crewlet-comment-thread__name {
   overflow: hidden;
   color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
   font-weight: var(--font-weight-semibold);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -69,9 +73,12 @@
   font-size: var(--font-size-xs);
 }
 
-/* Reply sits at the row's far end, wherever the head wraps. */
+/* Reply sits at the row's far end, wherever the head wraps, its padding and
+   edge pulled out as a card foot's ghost is (StatusCard.css), so the word ends
+   on the line the hairline under the remark ends on rather than 9px inside. */
 .crewlet-comment-thread__reply {
   margin-inline-start: auto;
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
 }
 
 .crewlet-comment-thread__compose {

package/dist/Composer/index.js

@@ -1,12 +1,12 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-5CY6BW4Y.js';
-import '../chunk-ACRRRPWT.js';
-import '../chunk-TLIJG4TP.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-5OFRDX66.js';
+import '../chunk-ANTAQAR4.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Composer-JSGTOW3F.css → Composer-HQIMTMRC.css}

@@ -17,6 +17,9 @@
   /* The edge's width, named because the nested send button's corner is
      derived from it (see .crewlet-composer__trailing). */
   --crewlet-composer-edge: 1px;
+  /* The corner of a control nested in the box's corner: the box's, less the
+     one-step inset and the edge, so the two curves run parallel. */
+  --crewlet-composer-nested-radius: calc(var(--radius-md) - var(--spacing-1) - var(--crewlet-composer-edge));
 
   display: grid;
   overflow: hidden;
@@ -109,20 +112,27 @@
 }
 
 .crewlet-composer__trailing .crewlet-icon-btn {
-  border-radius: calc(var(--radius-md) - var(--spacing-1) - var(--crewlet-composer-edge));
+  border-radius: var(--crewlet-composer-nested-radius);
 }
 
 /*
  * WHAT TRAVELS WITH THE MESSAGE, above the field inside the box's edge: a row
  * of tags that wraps, on the field's own inset so a tag starts where the text
  * does.
+ *
+ * AT LEAST A SMALL CONTROL TALL, so the row keeps one height whatever stands
+ * in it: a removed page's tag (24px) gives way to a small button ("Add this
+ * page", 26px), and sized by its content the box grew 2px under the pointer
+ * that removed it, and the field with it.
  */
 .crewlet-composer__attachments {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-1);
+  box-sizing: border-box;
   min-width: 0;
+  min-height: calc(var(--spacing-2) + var(--size-control-sm));
   padding: var(--spacing-2) var(--spacing-3) 0;
 }
 
@@ -148,6 +158,11 @@
   overflow-y: auto;
 }
 
+/*
+ * THE FOOTER'S END IS THE BOX'S CORNER, on the send button's own one-step
+ * inset, while its start is the field's text inset so the hint stands under
+ * the words.
+ */
 .crewlet-composer__footer {
   display: flex;
   flex-wrap: wrap;
@@ -158,6 +173,13 @@
   background: var(--color-surface-subtle);
 }
 
+/* So the last action nests there as the send button does: at a button's own
+   8px inside the box's 8px, the gap between the curves opened from 5px along
+   the edges to 7px across the corner. A pill keeps its own shape. */
+.crewlet-composer__footer > :is(.crewlet-btn--square, .crewlet-icon-btn):not(:has(~ :is(.crewlet-btn, .crewlet-icon-btn))) {
+  border-radius: var(--crewlet-composer-nested-radius);
+}
+
 .crewlet-composer__hint {
   display: inline-flex;
   align-items: center;

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-DMI4QJDY.js';
-import '../chunk-5CLW2CXT.js';
-import '../chunk-TLIJG4TP.js';
+export { ConfirmField, confirmMatches } from '../chunk-JVII5264.js';
+import '../chunk-PLL7ZJHY.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConflictNote/index.js

@@ -1,4 +1,4 @@
-export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-5FTJNKNX.js';
+export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-SUJO3AHN.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';