@crewlethq/ui 0.64.0 → 0.65.0

package/dist/PresenterView/index.js

@@ -1,12 +1,12 @@
-export { PresenterView, formatStopwatch } from '../chunk-P5S2SPTK.js';
-import '../chunk-DEAFAK3U.js';
+export { PresenterView, formatStopwatch } from '../chunk-KHHDCNYM.js';
+import '../chunk-5AJR6X75.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-RK4XPHVG.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/{PresenterView-T3EXIQ5S.css → PresenterView-RKYEK27N.css}

@@ -22,7 +22,10 @@
 /* THE SLIDE AS LARGE AS FITS, measured against the room under its caption
    (a size container), less the controls under it: the largest box of the
    slide's shape that fits both ways, so nothing is letterboxed and the
-   controls sit on the slide's foot wherever that is. */
+   controls sit on the slide's foot wherever that is. Its corner is the framed
+   stage's own, the one the next slide beside it draws: the 8px corner it used
+   to carry was the grey well's it sat in before it was drawn as the slide,
+   and it left the two slides on one screen with two different corners. */
 .crewlet-presenter__main {
   display: flex;
   flex-direction: column;
@@ -48,7 +51,6 @@
     100cqw,
     (100cqh - var(--size-control-sm) - var(--spacing-3)) * var(--crewlet-presenter-ratio, 1.7778)
   );
-  border-radius: var(--radius-md);
 }
 
 .crewlet-presenter__side {
@@ -72,14 +74,17 @@
 }
 
 /* THE END HOLDS THE NEXT SLIDE'S PLACE at its shape, so the timer and the
-   notes under it stay where they were on the last slide. */
+   notes under it stay where they were on the last slide. Its dashed edge is an
+   OUTLINE, as a framed slide's edge is, so it lands on the very pixels the
+   next slide's edge was drawn on: as a border it was drawn inside the box, one
+   pixel in from that edge on every side. */
 .crewlet-presenter__end {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: var(--crewlet-presenter-ratio, 1.7778);
   margin: 0;
-  border: 1px dashed var(--color-border-strong);
+  outline: 1px dashed var(--color-border-strong);
   border-radius: var(--radius-sm);
   color: var(--color-text-tertiary);
   font-size: var(--font-size-sm);

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-U3ILLCR2.js';
-import '../chunk-KYIAFNU7.js';
+export { PricingCard } from '../chunk-ZKIEOWR6.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PricingCard-HTAHG4ST.css → PricingCard-BXMLP7KD.css}

@@ -206,12 +206,21 @@
 /*
  * A short label under the price: "Save $X (10 percent off)" on a discounted
  * plan, or "Billed annually" and "Free forever" on a pricing page.
+ *
+ * THE LINE AND THE PILL ARE TWO BOXES. The line takes the whole row, which is
+ * what puts the note under the price; the pill on it is as wide as its words.
+ * Both on the pill, the 100% basis outranked its max-content width, and the
+ * pill ran 120px past "Save $5 (10% off)" to the card's edge.
  */
+.crewlet-pricing-card__price-note-line {
+  display: flex;
+  flex-basis: 100%;
+  min-width: 0;
+}
+
 .crewlet-pricing-card__price-note {
   /* Layout and arrival only. The pill, the tint and the ink are the Tag's. */
-  flex-basis: 100%;
   margin-top: 2px;
-  width: max-content;
   max-width: 100%;
   animation: crewlet-pricing-card-price-note-enter var(--motion-duration-slow) var(--motion-easing-spring);
 }

package/dist/Principal/index.js

@@ -1,4 +1,4 @@
 export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-CI3VPIJN.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

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-LAXXWJ2Z.js';
-import '../chunk-NLI7OVO2.js';
-import '../chunk-WW4E5EUS.js';
-import '../chunk-NOSHT6FL.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';