@crewlethq/ui 0.64.0 → 0.64.1

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';

package/dist/ConflictNote-OP64JJ6T.css

@@ -0,0 +1,56 @@
+/* ConflictNote: a refused write's sentence in the danger ink, with its glyph
+   so the colour is never the only carrier, and its controls beside it. */
+.crewlet-conflict-note {
+  display: flex;
+  /*
+   * THE GLYPH SITS ON THE SENTENCE'S FIRST LINE, the answer a Callout gives
+   * its icon. Centred on the whole row, a sentence that wrapped to two lines
+   * left the glyph floating between them, ten pixels under the line it marks.
+   */
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  max-width: 40rem;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+/*
+ * WITH CONTROLS, ONE LINE OF TEXT CENTRES ON THEM, as it does in a Callout:
+ * the sentence and its glyph are padded by half of what a small control is
+ * taller than a line, so a one-line note still reads as one row.
+ */
+.crewlet-conflict-note:has(.crewlet-conflict-note__actions) {
+  --crewlet-conflict-note-lead: max(0px, calc((var(--size-control-sm) - 1lh) / 2));
+}
+
+/* One line tall, so the drawing centres on the first line at any leading. */
+.crewlet-conflict-note__glyph {
+  flex: none;
+  block-size: 1lh;
+  margin-block-start: var(--crewlet-conflict-note-lead, 0px);
+}
+
+/* The sentence and its controls: one row while there is room, and the
+   controls under the words, at the start of their column, when there is not. */
+.crewlet-conflict-note__body {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-conflict-note__text {
+  flex: 1 1 16rem;
+  min-width: 0;
+  padding-block: var(--crewlet-conflict-note-lead, 0px);
+}
+
+.crewlet-conflict-note__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-self: center;
+  gap: var(--spacing-1);
+}

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-BSAQE7PO.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-KWLH45YC.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,12 +1,12 @@
-export { ContrastHelp } from '../chunk-WSV3MBOE.js';
-import '../chunk-BSAQE7PO.js';
+export { ContrastHelp } from '../chunk-IO374IX6.js';
+import '../chunk-KWLH45YC.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.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/Copyable/index.js

@@ -1,8 +1,8 @@
-export { CopyButton, Copyable } from '../chunk-IOTN23FZ.js';
+export { CopyButton, Copyable } from '../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/{Copyable-5PNRFOLS.css → Copyable-IS3MHMPL.css}

@@ -60,8 +60,17 @@
 
 /* ---- chip -------------------------------------------------------------- */
 
+/*
+ * The chip states its own line, the document's leading rounded to a whole
+ * pixel as the keycap and the key chip take it (see Kbd.css). Inherited, it
+ * was whatever the text around it said: 17.95px on the document's own line
+ * and 17.4px inside a tighter sentence, where Chromium floored the leading
+ * above the figures to nothing and they stood nearly a pixel high in their
+ * chip.
+ */
 .crewlet-copyable--chip .crewlet-copyable__value {
   font-size: var(--font-size-2xs);
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
   background: var(--color-surface-inset);
   padding: 1px var(--spacing-1);
   border-radius: var(--radius-xs);

package/dist/Count/index.js

@@ -1,3 +1,3 @@
-export { Count } from '../chunk-5KRRJNQO.js';
+export { Count } from '../chunk-MLDTLZAO.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Count-ZVCJ6VPD.css → Count-ZJ6ID4ZU.css}

@@ -16,5 +16,10 @@
   font-weight: var(--font-weight-medium);
   /* A count that ticks up must not shift the heading beside it. */
   font-variant-numeric: tabular-nums;
-  line-height: var(--font-line-height-normal);
+  /* The body leading rounded to a whole pixel, the line Kbd, KeyChip and the
+     Copyable chip take. The 1.5 leading drew an 18.5px pill beside those 18px
+     pills, and Chromium floors the share of a fractional leading above the
+     text, so the figures stood high in it. A whole 16px line splits evenly
+     and the pill lands on 18px with its figures on its middle. */
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
 }

package/dist/CursorFlag/index.js

@@ -1,3 +1,3 @@
-export { CursorFlag } from '../chunk-3BYIWOTV.js';
-import '../chunk-I6POAB4V.js';
+export { CursorFlag } from '../chunk-MMCYH5LB.js';
+import '../chunk-EFX2YC5T.js';
 import '../chunk-ODEQTPFM.js';