@crewlethq/ui 0.63.0 → 0.64.1

package/dist/PrincipalPicker/index.js

@@ -1,16 +1,16 @@
-export { PrincipalPicker } from '../chunk-IOZFPFQS.js';
-import '../chunk-PK2P2QH6.js';
+export { PrincipalPicker } from '../chunk-MFQPGMJT.js';
+import '../chunk-ZUBFVK6B.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.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/{PrincipalPicker-7NNZTGUP.css → PrincipalPicker-P6UYHDJR.css}

@@ -15,8 +15,11 @@
   border-top: 1px solid var(--color-border-default);
 }
 
+/* Inset by the option's own inline padding (`Listbox.css`), so a group's
+   heading starts on the edge its rows' badges start on rather than 4px out
+   of it. */
 .crewlet-principal-picker__heading {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-3);
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
@@ -39,3 +42,17 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/*
+ * THE SECOND LINE STARTS UNDER THE NAME. A listbox hint ends its row
+ * (`margin-left: auto`, for a shortcut or a path beside the label); here it
+ * is the line under the name, in a column as wide as the longer of the two,
+ * so under a longer name it was pushed to that name's end: "Platform" sat
+ * 35px right of "Jane Founder" and "Product" 59px right of "Product
+ * Manager". It truncates as the name does, rather than running out of the row.
+ */
+.crewlet-principal-picker__text > .crewlet-listbox__hint {
+  margin-left: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/PropertyList/index.js

@@ -1,6 +1,6 @@
-export { PropertyList } from '../chunk-VBYRA3W6.js';
-import '../chunk-4MC2EEGO.js';
-import '../chunk-HOP3J622.js';
+export { PropertyList } from '../chunk-HIWPPWNY.js';
+import '../chunk-S7WG53JB.js';
+import '../chunk-QF5UNP4T.js';
 import '../chunk-MFS6F2P7.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{PropertyList-SCYM66LL.css → PropertyList-42MEVUXV.css}

@@ -18,7 +18,10 @@
 .crewlet-property-list {
   display: grid;
   grid-template-columns: var(--crewlet-description-list-term, minmax(92px, max-content)) minmax(0, 1fr);
-  gap: var(--spacing-2) var(--spacing-3);
+  /* The description list's own gutter as well as its term track: with the
+     track shared and a 12px gutter here against its 16px, a page that set
+     one measure still started these values 4px left of every card's. */
+  gap: var(--spacing-2) var(--spacing-4);
   align-items: baseline;
   min-width: 0;
   font-size: var(--font-size-compact);

package/dist/ProposalCard/index.js

@@ -1,15 +1,15 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-PFXUEEHT.js';
-import '../chunk-NLI7OVO2.js';
-import '../chunk-WW4E5EUS.js';
-import '../chunk-ZH5F2PXC.js';
-import '../chunk-RO2MZZ66.js';
-import '../chunk-KYIAFNU7.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-4WKOLL7C.js';
+import '../chunk-M25IV5MH.js';
+import '../chunk-G4234OIG.js';
+import '../chunk-WQRSZMN4.js';
+import '../chunk-LR4IWUWQ.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-MKKX6N7C.js';
+import '../chunk-7XKDPTZ5.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-P4YORMRZ.js';
-import '../chunk-ZYO2QFU6.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-222VILSP.js';
+import '../chunk-IVTQWOXV.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/{ProposalCard-YDGECRES.css → ProposalCard-VTTCDXYK.css}

@@ -28,6 +28,14 @@
   text-align: end;
 }
 
+/* THE STRIP'S OWN LINES END THERE TOO. The strip is a wrapping row of its
+   own, the sentence and the hint, and a refusal too long for one line
+   filled the slot and set both lines at its start: the end alignment above
+   moved the box and none of the words in it. */
+.crewlet-proposal-card__refusal > .crewlet-refusal-strip {
+  justify-content: flex-end;
+}
+
 /* WHERE FOCUS LANDS WHEN THE CARD SETTLES (the strip, or the card when it
    has none): the token ring for a reader on the keyboard, inset so the
    card's corner does not clip it, and nothing for a pointer (transparent

package/dist/ReceiptStrip/index.js

@@ -1,4 +1,4 @@
-export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-NLI7OVO2.js';
+export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-M25IV5MH.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{ReceiptStrip-IIRKRTBG.css → ReceiptStrip-V7ASVZVV.css}

@@ -67,6 +67,15 @@
   color: inherit;
 }
 
+/*
+ * A GHOST AT THE END is pulled out by its padding and edge, as a card foot's
+ * ghost is (StatusCard.css), so its label ends on the strip's text edge, the
+ * inset the mark starts on, rather than 9px inside it.
+ */
+.crewlet-receipt-strip__actions > .crewlet-btn--ghost.crewlet-btn--small:last-child {
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
 /*
  * THE INLINE REFUSAL, under the control that caused it: the sentence in the
  * danger ink, the hint in the secondary ink, the actions beside them, wrapping

package/dist/RefusalCard/index.js

@@ -1,10 +1,10 @@
-export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-JE4FCRVL.js';
-import '../chunk-WW4E5EUS.js';
-import '../chunk-KYIAFNU7.js';
+export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-YBKZJBKM.js';
+import '../chunk-G4234OIG.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-MKKX6N7C.js';
+import '../chunk-7XKDPTZ5.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RelatedRow/index.js

@@ -1,9 +1,9 @@
-export { RelatedRow } from '../chunk-MYJZCSMA.js';
+export { RelatedRow } from '../chunk-OGRMOWMO.js';
 import '../chunk-QP2P6GDQ.js';
 import '../chunk-ZAC7SKUN.js';
-import '../chunk-MKKX6N7C.js';
+import '../chunk-7XKDPTZ5.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RelatedRow-IZ22XCLP.css

@@ -0,0 +1,19 @@
+/* RelatedRow: the glyphs in the quiet ink; everything else is the kit's card. */
+.crewlet-related-row__glyph {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE PLACE'S GLYPH STANDS ON ITS TITLE'S LINE, as a card head's glyph stands
+ * on its title. Centred on the row it sat between the title and the sentence,
+ * 10px under the name it marks. Its box is one line of the title (the cell
+ * step at its leading), the glyph centred in it; the chevron stays centred on
+ * the row the whole of which is the link.
+ */
+.crewlet-related-row__glyph:first-child {
+  align-self: flex-start;
+  align-items: center;
+  height: calc(var(--font-size-compact) * var(--font-line-height-snug));
+}

package/dist/ResultTableCard/index.js

@@ -1,14 +1,14 @@
-export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-OIMWGV2N.js';
+export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-RPX3WICJ.js';
 import '../chunk-5DJMFRSZ.js';
 import '../chunk-NSCYGUDG.js';
 import '../chunk-YNRKVY7X.js';
-import '../chunk-WW4E5EUS.js';
+import '../chunk-G4234OIG.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-MKKX6N7C.js';
+import '../chunk-7XKDPTZ5.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/ReviewList/index.js

@@ -1,6 +1,6 @@
-export { ReviewList } from '../chunk-OJ2QULVH.js';
+export { ReviewList } from '../chunk-DO4J4TBZ.js';
 import '../chunk-3LI4TRUR.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ReviewList-TIN6C2JN.css → ReviewList-2IZA67EX.css}

@@ -66,6 +66,15 @@
   grid-area: action;
 }
 
+/*
+ * A small ghost at the end is pulled out by its padding and edge, as a card
+ * foot's is (StatusCard.css), so "Edit" ends on the row's text edge, the
+ * inset the glyph's tile starts on, rather than 9px inside it.
+ */
+.crewlet-review-list__action > .crewlet-btn--ghost.crewlet-btn--small:last-child {
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
 .crewlet-review-list__body {
   grid-area: body;
   min-width: 0;
@@ -87,9 +96,12 @@
   line-height: var(--font-line-height-normal);
 }
 
+/* The glyph's box is the line's height and its drawing is centred in it (the
+   frame keeps its square), as LogoSlot's error glyph is: a fixed 1px nudge
+   left the 14px glyph a pixel above the 18px line. */
 .crewlet-review-list__error > svg {
   flex: none;
-  margin-top: 1px;
+  height: 1lh;
 }
 
 /* WITHOUT A GLYPH the part starts at the row's start, with no empty column before it. */

package/dist/RichEditor/index.js

@@ -1,8 +1,8 @@
-export { RichEditor, preloadRichEditor } from '../chunk-PHQPQZUX.js';
+export { RichEditor, preloadRichEditor } from '../chunk-BVNFNFA6.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-QBI5ETKY.js';
+import '../chunk-BRLZXYPA.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{RichEditor-NPD2KAPS.css → RichEditor-5CF3QV3J.css}

@@ -259,6 +259,21 @@
   box-shadow: var(--shadow-lg);
 }
 
+/*
+ * THE BAR IS THE FRAME. Every bar wraps a `Toolbar`, whose own row padding
+ * (a step over and under) and gap were added to the bar's: the selection
+ * toolbar stood 52px tall round 26px controls, 13px over and under them and
+ * 5px at their sides, and a group's hairline had 12px before it and 4px
+ * after. Inside a bar the toolbar keeps neither, so the bar's padding is the
+ * one inset all round, and the groups part on the step MarkdownEditor's bar
+ * parts them on, the hairline halfway between.
+ */
+.crewlet-rich-editor__bar .crewlet-toolbar,
+.crewlet-rich-editor__bubble .crewlet-toolbar {
+  gap: var(--spacing-1);
+  padding: 0;
+}
+
 .crewlet-rich-editor__group {
   display: inline-flex;
   align-items: center;
@@ -266,7 +281,6 @@
 }
 
 .crewlet-rich-editor__group + .crewlet-rich-editor__group {
-  margin-left: var(--spacing-1);
   padding-left: var(--spacing-1);
   border-left: 1px solid var(--color-border-default);
 }
@@ -289,12 +303,15 @@
   text-transform: uppercase;
 }
 
+/* An option takes a menu row's corner (Menu.css), the surface's own less the
+   step it is inset by, so the active fill nests in the panel's corner; at
+   the small step it was rounder than the corner around it. */
 .crewlet-rich-editor__option {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
   padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-xs);
   color: var(--color-text-primary);
   cursor: pointer;
 }

package/dist/RunChip/index.js

@@ -1,9 +1,9 @@
-export { RUN_STATES, RunChip } from '../chunk-75QASA62.js';
-import '../chunk-Z4EKUMZW.js';
+export { RUN_STATES, RunChip } from '../chunk-PIAGTZY3.js';
+import '../chunk-HJBHP66O.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-P4YORMRZ.js';
-import '../chunk-ZYO2QFU6.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-222VILSP.js';
+import '../chunk-IVTQWOXV.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{RunChip-D3JYPTTO.css → RunChip-K5DGHXHO.css}

@@ -48,3 +48,19 @@
   align-self: stretch;
   min-width: 0;
 }
+
+/*
+ * ONE COLUMN FOR THE MARKS AND ONE FOR THE WORDS, the chip's and its steps'.
+ * The steps' well starts on the text edge, where the chevron stands, so its
+ * leading inset is the chevron's 14px slot and the gap after it: at the
+ * well's own 12px the steps' marks stood 6px to the left of the chip's mark
+ * they share a column with. And the chip's mark keeps the steps' 8px from
+ * its words, so the title stands over the labels rather than 4px short.
+ */
+.crewlet-run-chip__panel > .crewlet-step-list {
+  padding-inline-start: calc(var(--font-size-sm) + var(--spacing-1));
+}
+
+.crewlet-run-chip__trigger .crewlet-disclosure__icon {
+  margin-inline-end: var(--spacing-1);
+}

package/dist/SandboxedFrame/index.js

@@ -1,8 +1,8 @@
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-WR7UDG7U.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-OJGI4XJH.js';
 import '../chunk-F6V2PTN6.js';
 import '../chunk-ZXXDZJQN.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-QBI5ETKY.js';
+import '../chunk-BRLZXYPA.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/SearchTrigger/index.js

@@ -1,2 +1,2 @@
-export { SearchTrigger } from '../chunk-YZR57QGE.js';
+export { SearchTrigger } from '../chunk-ERNT3UTB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SearchTrigger-UAKWW5HT.css → SearchTrigger-SE4GKNAY.css}

@@ -33,9 +33,14 @@
  * names the pad (`--crewlet-rail-field-pad`), so its inset and the field's
  * pad are one measure and the glyph lands on the nav's glyph column; outside
  * that slot the field keeps the trigger's own pad.
+ *
+ * Its glyph-to-word gap is a nav row's (SidebarNav.css), two steps and a
+ * half, so its words start on the rows' word column too: on the trigger's
+ * two-step gap the placeholder stood 2px left of every nav label.
  */
 .crewlet-search-trigger--rail {
   display: flex;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
   width: 100%;
   height: var(--size-control-sm);
   padding-inline: var(--crewlet-rail-field-pad, calc(var(--spacing-2) + var(--spacing-1) / 2));
@@ -100,8 +105,14 @@
    field collapses to its glyph where the rail becomes a drawer. The rail's
    own field does not, because the drawer is as wide as the rail was. */
 @media (width < 1024px) {
+  /* Folded, it is an icon-only control, and an icon-only control is a square
+     (IconButton's md step is the same 30px): on the box's own pad it stood
+     36px wide by 30px tall. */
   .crewlet-search-trigger--toolbar {
     min-width: 0;
+    width: var(--size-control-md);
+    padding-inline: 0;
+    justify-content: center;
   }
 
   .crewlet-search-trigger--toolbar .crewlet-search-trigger__label,

package/dist/Section/index.js

@@ -1,3 +1,3 @@
-export { Section } from '../chunk-JQ7IFSF6.js';
+export { Section } from '../chunk-WFCWPXJN.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Section-M7SG6NP2.css → Section-X2CTTPI3.css}

@@ -99,14 +99,33 @@
   max-width: var(--size-measure);
 }
 
+/* CENTRED ON THE TITLE'S LINE, as PageHeader's and ObjectHeader's actions
+   are. On the row's baseline the button's label sat on the title's, which put
+   the button's box 2.5px under the title's middle. */
 .crewlet-section__actions {
   display: flex;
   align-items: center;
+  align-self: center;
   gap: var(--spacing-2);
   flex: none;
   margin-inline-start: auto;
 }
 
+/*
+ * AND THE TITLE'S LINE IS AT LEAST A CONTROL TALL BESIDE THEM. Centring puts
+ * the actions on the row's middle, while the title, held on its sentence's
+ * baseline, stands at the row's top. Where the control is the taller of the
+ * two, the title's middle sat over the button's: by 2.5px in a side panel,
+ * which heads its sections at the small step (a 21px line beside a 26px
+ * button), and by 1.6px at comfortable density (a 27px line beside a 30px
+ * button). The line box takes the small control step instead, so the title is
+ * centred in it, the sentence keeps its baseline, and the header is no taller
+ * than the control already made it. Empty actions leave the title alone.
+ */
+.crewlet-section__header:has(> .crewlet-section__actions:not(:empty)) > .crewlet-section__title {
+  line-height: max(var(--font-line-height-normal) * 1em, var(--size-control-sm));
+}
+
 /* A titled band lays its header and its content out as a column. */
 .crewlet-section--titled {
   display: flex;

package/dist/SectionFrame/index.js

@@ -1,7 +1,7 @@
-export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-SHLP2BNA.js';
-import '../chunk-B53FUJ53.js';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-G4CGDUCP.js';
+import '../chunk-WCDPFTJZ.js';
 import '../chunk-TEV5REGB.js';
-import '../chunk-FYTIJM2T.js';
+import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,16 +1,16 @@
-import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-25AZQ3GZ.js';
+export { SegmentedControl } from '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-5KRRJNQO.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-MLDTLZAO.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 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/Select/index.js

@@ -1,4 +1,4 @@
-export { Select } from '../chunk-XQZ6EWOE.js';
+export { Select } from '../chunk-VK45YJLH.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';

package/dist/{Select-F526HLNR.css → Select-6BQPBOHH.css}

@@ -23,6 +23,14 @@
    */
   --crewlet-select-auto-min-width: 132px;
   --crewlet-select-auto-max-width: 220px;
+  /*
+   * WHERE THE CHEVRON STANDS, read by the chevron and by the room the trigger
+   * keeps for it, so the two cannot drift apart. The inset is a spacing step
+   * (one step inside the value's own, see below); the glyph is the `sm`
+   * glyph's 14px box, which density does not scale.
+   */
+  --crewlet-select-chevron-inset: var(--spacing-2);
+  --crewlet-select-chevron-size: 14px;
 
   position: relative;
   display: inline-flex;
@@ -38,7 +46,16 @@
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * THE CHEVRON STANDS ONE STEP INSIDE THE VALUE'S INSET, at every size: its
+ * glyph carries 3.5px of side bearing, so 8px against the default size's
+ * 12px puts its ink 12.5px from the edge, level with the value's 13px. The
+ * small size kept the 8px against its own 8px inset, and a quiet picker in a
+ * toolbar stood 9px from its word and 12.5px past its chevron.
+ */
 .crewlet-select--sm {
+  --crewlet-select-chevron-inset: var(--spacing-1);
+
   min-height: var(--size-control-sm);
 }
 
@@ -174,16 +191,23 @@
   color: inherit;
   text-align: left;
   padding: 0 var(--spacing-3);
-  /* Room for the chevron, which sits over the control rather than beside it:
-     its own inset twice over, plus the glyph. */
-  padding-right: var(--spacing-6);
+  /*
+   * Room for the chevron, which sits over the control rather than beside it:
+   * its inset, its glyph and half a step to the words. The glyph is added as
+   * a length rather than folded into a spacing step, because a step scales
+   * with density and the glyph does not: as one step (24px), compact density
+   * left the words 2.6px from the chevron's ink, against 5.5px at the default.
+   */
+  padding-right: calc(
+    var(--crewlet-select-chevron-inset) + var(--crewlet-select-chevron-size) + var(--spacing-1) / 2
+  );
 }
 
+/* The leading inset only: the trailing one is the chevron's room, above. */
 .crewlet-select--sm .crewlet-select__native,
 .crewlet-select--sm .crewlet-select__trigger {
   font-size: var(--font-size-xs);
-  padding: 0 var(--spacing-2);
-  padding-right: var(--spacing-6);
+  padding-left: var(--spacing-2);
 }
 
 .crewlet-select__native:disabled,
@@ -223,7 +247,7 @@
  */
 svg.crewlet-select__chevron {
   position: absolute;
-  right: var(--spacing-2);
+  right: var(--crewlet-select-chevron-inset);
   pointer-events: none;
   color: var(--color-text-muted);
 }
@@ -447,11 +471,17 @@ svg.crewlet-select__chevron {
   outline-color: var(--color-border-selected);
 }
 
+/*
+ * INSET AS THE ROWS UNDER IT ARE: the list's own padding plus a row's, so the
+ * glyph stands in the column the ticks and group headings start on and the
+ * query starts where the option labels do. At a row's inset alone both stood
+ * 4px left of the list they filter.
+ */
 .crewlet-select__search {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) calc(var(--spacing-1) + var(--spacing-3));
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-tertiary);
   flex: none;

package/dist/SelectionBar/index.js

@@ -1,4 +1,4 @@
-export { SelectionBar } from '../chunk-6Z4JZHRB.js';
+export { SelectionBar } from '../chunk-WU5JDEEY.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';

package/dist/{SelectionBar-XPWKUOSC.css → SelectionBar-SCAU6EBY.css}

@@ -13,6 +13,8 @@
   flex-wrap: nowrap;
   gap: var(--spacing-3);
   min-height: var(--size-row-lg);
+  /* The end inset is the start's less Clear's own padding (a small ghost's
+     8px), so Clear's word ends as far in as the count starts. */
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
@@ -55,7 +57,9 @@
     left: var(--spacing-3);
     z-index: var(--z-index-overlay);
     gap: var(--spacing-2);
-    padding-inline-start: var(--spacing-3);
+    /* The start steps in to 12px, and the end with it, as above: with the end
+       left at 8px, Clear's word ended 18px in against the count's 13px. */
+    padding-inline: var(--spacing-3) var(--spacing-1);
     box-shadow: var(--shadow-lg);
   }
 }

package/dist/SendButton/index.js

@@ -1,4 +1,4 @@
-export { SEND_BUTTON_LABELS, SendButton } from '../chunk-PBR5C5MX.js';
-import '../chunk-2XWFWNDT.js';
+export { SEND_BUTTON_LABELS, SendButton } from '../chunk-T2GC7UAP.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/index.js

@@ -1,10 +1,10 @@
-export { SetupWizard } from '../chunk-5DCY2QUY.js';
-import '../chunk-DKB73KZI.js';
-import '../chunk-Z4EKUMZW.js';
+export { SetupWizard } from '../chunk-R2YHKVWN.js';
+import '../chunk-FPDIHEM4.js';
+import '../chunk-HJBHP66O.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-P4YORMRZ.js';
-import '../chunk-ZYO2QFU6.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-222VILSP.js';
+import '../chunk-IVTQWOXV.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-XSPCITPN.js';