@crewlethq/ui 0.64.0 → 0.65.0

package/dist/{Input-GMOWHZRG.css → Input-GEFFMKBS.css}

@@ -373,8 +373,14 @@
  * The multiline field: prose a person writes, such as a goal or a mission, so
  * it wears the page's own face. It was the code face when this rule was
  * written for a raw JSON editor that no longer exists.
+ *
+ * A BLOCK, not the browser's inline-block. Inline, the box sat on the text
+ * baseline of whatever held it, and a block parent (the shell below, a panel
+ * footer) grew a line's descent under it: the list's new-item box stood 37px
+ * for a 30px field, 7px of empty space before the list it adds to.
  */
 .crewlet-textarea {
+  display: block;
   width: 100%;
   padding: var(--spacing-2) var(--spacing-3);
   font-family: var(--font-family-sans);
@@ -494,11 +500,22 @@
   letter-spacing: normal;
 }
 
+/*
+ * A LABEL WITH AN ACTION IS STILL ONE LABEL LINE. The row took the height of
+ * the button in it, so the words sat in the middle of 26px and the control
+ * started 4.75px further from them than under every other label, and 9.5px
+ * lower than the field beside it in a row. The action now hangs on the
+ * label's line (see .crewlet-label__action) and overhangs it evenly; the row
+ * keeps only the part of a small control that would reach the box under it
+ * (under a pixel at the normal density), so a hovered action never paints
+ * over the field's edge.
+ */
 .crewlet-label--with-action {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-2);
+  padding-block-end: max(0px, calc((var(--size-control-sm) - 1lh) / 2 - var(--spacing-1)));
 }
 
 .crewlet-label__text {
@@ -528,9 +545,14 @@
   font-weight: var(--font-weight-regular);
 }
 
+/* Raised over the field it overhangs, so the ring a focused action draws two
+   pixels out from its edge is not painted over by the box under it. */
 .crewlet-label__action {
+  position: relative;
+  z-index: var(--z-index-raised);
   display: inline-flex;
   align-items: center;
+  block-size: 1lh;
 }
 
 /* ── FormField ───────────────────────────────────────────────────────── */
@@ -548,11 +570,21 @@
   padding: 0;
 }
 
-/* A fieldset's legend wears the field label's register, so a list of values
-   reads as one field among the others. */
+/*
+ * A fieldset's legend wears the field label's register, so a list of values
+ * reads as one field among the others.
+ *
+ * AND THE LABEL'S LINE, not the page's. The legend is a block whose own line
+ * box took the body's size, so it stood 24px tall round a 16.5px label, the
+ * words sat 5px down on its baseline, and the group's first control started
+ * 7.5px lower than a labelled field's beside it in the same row. At the
+ * label's size its line is the label's line, and the two kinds of field share
+ * one top and one control edge.
+ */
 .crewlet-form-field__legend {
   padding: 0;
   margin-bottom: var(--spacing-1);
+  font-size: var(--font-size-2xs);
 }
 
 .crewlet-form-field__helper {
@@ -700,7 +732,15 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * ON THE LINE A FIELD'S VALUE SITS ON. The value is the text a field would
+ * hold, so it takes the band a field's box gives that text: one line centred
+ * in the control step. Set straight under its label, it stood 5.25px above
+ * the value of the input beside it in a form row, and its reason 10.5px above
+ * that input's help.
+ */
 .crewlet-readonly-field__value {
+  padding-block: max(0px, calc((var(--size-control-md) - var(--font-size-compact) * var(--font-line-height-normal)) / 2));
   font-size: var(--font-size-compact);
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);

package/dist/Kbd/index.js

@@ -1,3 +1,3 @@
-export { Kbd, isApplePlatform, keyGlyph } from '../chunk-ACRRRPWT.js';
+export { Kbd, isApplePlatform, keyGlyph } from '../chunk-ANTAQAR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Kbd-MCWJTRTT.css → Kbd-YO5U2PSZ.css}

@@ -29,8 +29,14 @@
      and not beside it: a hint at the end of a search field, a key named in a
      sentence, a shortcut in a menu row. Tightened it stood a pixel under the
      line it sits in and the row it was in wobbled by that pixel wherever a
-     cap appeared and wherever one did not. */
-  line-height: var(--font-line-height-body);
+     cap appeared and wherever one did not.
+
+     ROUNDED TO A WHOLE PIXEL. Chromium floors the share of the leading above
+     the text to a whole pixel, so the 15.95px line round the face's 14px text
+     box put no leading above it and 1.95px below, and every key stood a pixel
+     high in its cap. At 16px the leading splits evenly in every engine and
+     the capitals sit on the cap's middle. */
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
   color: var(--color-text-tertiary);
   white-space: nowrap;
   vertical-align: middle;

package/dist/KeyChip/index.js

@@ -1,2 +1,2 @@
-export { KeyChip } from '../chunk-FYTIJM2T.js';
+export { KeyChip } from '../chunk-HBDA76EZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{KeyChip-4XJU4BBE.css → KeyChip-QC7TPU65.css}

@@ -19,7 +19,10 @@
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--font-letter-spacing-normal);
-  line-height: var(--font-line-height-body);
+  /* The document's leading rounded to a whole pixel, as the keycap takes it
+     (see Kbd.css): unrounded, Chromium floored the leading above the text to
+     nothing and the key stood a pixel high in its chip. */
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
   white-space: nowrap;
 }
 

package/dist/LayersList/index.js

@@ -1,3 +1,3 @@
-export { LAYERS_LIST_LABELS, LayersList } from '../chunk-M6NQ4XGK.js';
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-VUYNNILP.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{LayersList-TBNF4XGL.css → LayersList-BQHKROBH.css}

@@ -35,8 +35,11 @@
 
 /*
  * The current entry's mark is held on every entry in the resting ink, as the
- * document outline's is, so nothing moves when the pick does. The radius is
- * the control step's on the end the mark does not take.
+ * document outline's is, so nothing moves when the pick does. The fill takes
+ * the control step's radius on every corner, as a directory line's does: the
+ * edge is drawn only in forced colours (below), so squaring its corners
+ * everywhere cut the selected and hover fills square on one side and round on
+ * the other, beside no mark at all.
  */
 .crewlet-layers-list__item {
   display: block;
@@ -47,10 +50,7 @@
   padding: var(--spacing-1) var(--spacing-2);
   border: none;
   border-inline-start: 2px solid transparent;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-start-end-radius: var(--radius-md);
-  border-end-end-radius: var(--radius-md);
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-text-secondary);
   font-family: var(--font-family-sans);
@@ -82,7 +82,17 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * Forced colours draw every entry's held edge in the system's text colour, so
+ * there the edge is a rail down the list and the corners it runs along are
+ * square, as a rail's are; rounded, each entry's edge curled into a bracket.
+ */
 @media (forced-colors: active) {
+  .crewlet-layers-list__item {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
   .crewlet-layers-list__item[aria-current='true'] {
     border-inline-start-color: Highlight;
   }

package/dist/Link/index.js

@@ -1,3 +1,3 @@
-export { Link } from '../chunk-HOP3J622.js';
+export { Link } from '../chunk-QF5UNP4T.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Link-WPMVLKLY.css → Link-CLURSR2O.css}

@@ -103,11 +103,25 @@
 }
 
 .crewlet-link__external {
-  /* Sits on the text baseline beside the last word rather than under it. */
+  /*
+   * Sits on the text baseline beside the last word rather than under it.
+   * INLINE, said here, because the document baseline sets every `svg` to
+   * `display: block`: as a block the mark broke the line inside the link and
+   * stood alone on a row of its own under the words, and the vertical-align
+   * below did nothing at all.
+   */
+  display: inline-block;
   vertical-align: -0.125em;
   margin-inline-start: var(--spacing-1);
 }
 
+/* The mark and the joiner that holds it to the last word (see Link.tsx): no
+   break between them, and nothing a reader copies with the link's words. */
+.crewlet-link__external-mark {
+  white-space: nowrap;
+  user-select: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-link {
     transition: none;

package/dist/LinkInterstitial/index.js

@@ -1,13 +1,13 @@
-export { LinkInterstitial, openExternal } from '../chunk-EQHJTGLY.js';
-import '../chunk-5CLW2CXT.js';
-import '../chunk-KVWZDCTQ.js';
+export { LinkInterstitial, openExternal } from '../chunk-KQGOVBGF.js';
+import '../chunk-PLL7ZJHY.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-PQADV6P6.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/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-34NMOVXO.js';
+export { List, ListItem } from '../chunk-PS5ZYIA6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-XY445TKY.css → List-JOELBLTU.css}

@@ -98,6 +98,19 @@
   border-radius: 0;
 }
 
+/*
+ * DIVIDED ROWS THAT REACH A CARD'S EDGES TAKE THE CARD'S INSET, as a table's
+ * outer cells do (DataGrid.css): a card has one left edge and its header sets
+ * it (Card.css). At the row's own step every row's words stood 4px left of
+ * the card head's glyph and the foot's sentence, and the trailing time 4px
+ * right of the head's actions. Only where nothing else insets the list, a
+ * card or body at `padding="none"`; a padded body already supplies the edge.
+ */
+.crewlet-card--p-none > .crewlet-list--divided > .crewlet-list__item > .crewlet-list__row,
+.crewlet-card__body--p-none > .crewlet-list--divided > .crewlet-list__item > .crewlet-list__row {
+  padding-inline: var(--spacing-4);
+}
+
 /*
  * Bullets and numbers are prose furniture, so those two framings drop the row
  * height and the horizontal pad: a paragraph's list should sit against the
@@ -208,6 +221,18 @@
   box-shadow: inset 2px 0 0 var(--color-brand-accent);
 }
 
+/*
+ * A ROW THAT CARRIES A RAIL squares the corners the rail runs along. An inset
+ * rail follows its row's radius, so on the plain framing's rounded row it
+ * curled at both ends into a bracket; the end the rail does not take keeps
+ * the radius, as LayersList's entries do where their rail is drawn.
+ */
+.crewlet-list__item--selected > .crewlet-list__row,
+.crewlet-list__item--danger > .crewlet-list__row {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
 /*
  * A selected row does NOT also take the hover overlay. Both are a background
  * on the same element, the selected tint wins, and a composite of the two is a
@@ -241,6 +266,19 @@
   color: var(--color-feedback-danger-ink);
 }
 
+/*
+ * In a templated row the mark stands at the start of the words' own cell (see
+ * List.tsx), so it is set INLINE, on the first line beside the words, as
+ * `Link` sets its mark: the document baseline makes every `svg` a block,
+ * which would put the words on a line of their own under it. The space the
+ * row puts after the hidden word makes up the rest of the gap.
+ */
+.crewlet-list__content > .crewlet-list__danger-mark {
+  display: inline-block;
+  vertical-align: -0.125em;
+  margin-inline-end: var(--spacing-1);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-list__row--interactive {
     transition: none;

package/dist/ListDetail/ListDetail.d.ts

@@ -6,8 +6,9 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     /** The chosen item's detail. */
     children: ReactNode;
     /**
-     * Which pane a phone shows, where the two are one column: the list until
-     * something is chosen, then the detail. Wider, both are always shown.
+     * Which pane shows where the two are one column (under 640px of the
+     * component's own width): the list until something is chosen, then the
+     * detail. Wider, both are always shown.
      */
     showing?: ListDetailPane | undefined;
 }
@@ -20,8 +21,12 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * column. The list column is `--crewlet-list-detail-list` wide (17rem by
  * default), with a hairline between the two.
  *
- * BELOW 640px IT IS ONE PANE, the one `showing` names, as tall as its content
- * on a page that scrolls as any other: a phone has no room for two columns,
- * and the application gives its detail a way back to the list.
+ * BELOW 640px OF ITS OWN WIDTH IT IS ONE PANE, the one `showing` names: the
+ * list and a reading detail do not both fit, whether the window is a phone or
+ * an aside beside the screen has taken the room. The application gives its
+ * detail a way back to the list, and asks the same question to decide when to
+ * draw it (`useScreenBelow(640)` for a ListDetail that spans the screen, or a
+ * container query on it). On a phone the page scrolls as any other, each pane
+ * as tall as its content.
  */
 export declare function ListDetail({ list, children, showing, className, ...rest }: ListDetailProps): import("react").JSX.Element;

package/dist/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-R5RCGD7N.js';
+export { ListDetail } from '../chunk-YBC2CYPD.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListDetail-N3L7PB46.css

@@ -0,0 +1,87 @@
+/*
+ * ListDetail: a list beside the detail of what is chosen in it, each scrolling
+ * on its own in the height it is given, one pane where it is narrow
+ * (ListDetail.tsx).
+ *
+ * IT FOLDS BY ITS OWN WIDTH, NOT THE WINDOW'S. The root is an inline-size
+ * container and the panes are its child, so the fold answers how wide THIS
+ * list and detail are: beside an aside the reader opened (the assistant) a
+ * 1375px window can leave the screen 443px, and a fold that asked the window
+ * drew the detail 130px wide beside a 17rem list. The phone rule below is the
+ * one decision that stays the window's: on a phone the page scrolls as a
+ * whole rather than each pane on its own.
+ */
+
+/* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
+   and the gap after it are one step. At 24px and 40px the line sat closer to
+   the list than to the detail it divides it from; the two still add to 64. */
+.crewlet-list-detail {
+  --crewlet-list-detail-gutter: var(--spacing-7);
+
+  container: crewlet-list-detail / inline-size;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__panes {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-list-detail-list, 17rem) minmax(0, 1fr);
+  gap: var(--crewlet-list-detail-gutter);
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding-right: var(--crewlet-list-detail-gutter);
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-list-detail__detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* ONE PANE UNDER 640px OF ITS OWN WIDTH: the list and a reading detail do not
+   both fit, so the pane `showing` names takes the whole width and keeps its
+   own scroller, which is what lets it sit in a screen that fills the window. */
+@container crewlet-list-detail (width < 640px) {
+  .crewlet-list-detail__panes {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-list-detail__list {
+    padding-right: 0;
+    border-right: 0;
+    overflow-y: auto;
+  }
+
+  .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
+  .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
+    display: none;
+  }
+}
+
+/* ON A PHONE THE PAGE SCROLLS AS A WHOLE, as tall as its content. */
+@media (width < 640px) {
+  .crewlet-list-detail {
+    height: auto;
+  }
+
+  .crewlet-list-detail__list,
+  .crewlet-list-detail__detail {
+    overflow: visible;
+  }
+}

package/dist/ListInput/index.js

@@ -1,7 +1,7 @@
-export { ListInput, withDraft } from '../chunk-3PJHUDXD.js';
+export { ListInput, withDraft } from '../chunk-MNTUIAQT.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-ACRRRPWT.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ANTAQAR4.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
@@ -9,7 +9,7 @@ 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/{ListInput-RLQND5QK.css → ListInput-4ISMGZDQ.css}

@@ -21,6 +21,15 @@
   min-width: 0;
 }
 
+/*
+ * THE LIST STANDS A STEP FURTHER FROM THE BOX than the field's one step
+ * between its lines: those are lines of text, these are two drawn boundaries,
+ * and at one step the box's edge and the card's read as one doubled rule.
+ */
+.crewlet-list-input__add + .crewlet-list-input__items {
+  margin-top: var(--spacing-1);
+}
+
 .crewlet-list-input__items {
   /* The rows lay themselves out by the list's own width (see NARROW below). */
   container: crewlet-list-input / inline-size;
@@ -50,6 +59,13 @@
    * content.
    */
   overflow: hidden;
+  /*
+   * The band ONE LINE of an item's control stands in: its two border pixels,
+   * its block inset (see the item's control below) and one line. The marks
+   * beside the words centre in it, and the row a removed item leaves stands
+   * on it.
+   */
+  --crewlet-list-input-line-band: calc(2px + var(--spacing-1) * 2 + var(--font-size-compact) * var(--font-line-height-normal));
 }
 
 /*
@@ -208,6 +224,29 @@
   flex: none;
 }
 
+/*
+ * THE ROW'S MARKS SIT ON ITS FIRST LINE, as its number does. Centred on the
+ * row, a wrapped item's grip and buttons stood half a line under the words
+ * they act on (10.5px below the first line's middle on a two-line policy),
+ * level with nothing. Each centres in the band one line of the control
+ * takes, which is where a one-line row centred them, so that row does not
+ * move.
+ */
+.crewlet-list-input__item > .crewlet-list-input__handle,
+.crewlet-list-input__item > .crewlet-list-input__actions {
+  align-self: flex-start;
+  min-block-size: var(--crewlet-list-input-line-band);
+}
+
+/*
+ * THE ROW A REMOVED ITEM LEAVES STANDS AT A ROW'S HEIGHT, as it says above:
+ * on its buttons alone it stood 35px against an item's 39, so removing an
+ * item and undoing it moved every row under it by four pixels each way.
+ */
+.crewlet-list-input__removed > .crewlet-list-input__actions {
+  min-block-size: var(--crewlet-list-input-line-band);
+}
+
 /*
  * MOVE UP AND MOVE DOWN ARE THE ROW'S SECOND THOUGHT. Three controls on every
  * row is what made this list a grid of buttons; the console draws one. They
@@ -310,7 +349,10 @@
     flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-3) * 2);
   }
 
+  /* On a line of their own the buttons have no first line to sit on, so they
+     stand at their own height. */
   .crewlet-list-input__item > .crewlet-list-input__actions {
     margin-inline-start: auto;
+    min-block-size: auto;
   }
 }

package/dist/LiveCursor/index.js

@@ -1,4 +1,4 @@
-export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-5XACKNYR.js';
-import '../chunk-3BYIWOTV.js';
-import '../chunk-I6POAB4V.js';
+export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-DPNVKWJX.js';
+import '../chunk-MMCYH5LB.js';
+import '../chunk-EFX2YC5T.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{LiveCursor-DZHGIYWE.css → LiveCursor-Z6DHHLWI.css}

@@ -11,6 +11,16 @@
   z-index: var(--z-index-presence);
   display: block;
   pointer-events: none;
+  /*
+   * THE TIP IS THE POINT. The pointer glyph draws its tip 3.5 units into its
+   * 24-unit frame (the tip's rounding and half its stroke), so a cursor at a
+   * point drew its tip 2.9px right of it and 2.9px below: off the cell edge or
+   * the word somebody was pointing at. The cursor is drawn back by that share
+   * of its own box, which is the pointer's (the flag is out of flow), so the
+   * flag keeps its place beside the tip at any glyph size. `translate` rather
+   * than `transform`, which places the cursor and is the property that glides.
+   */
+  translate: calc(-3.5 / 24 * 100%) calc(-3.5 / 24 * 100%);
 }
 
 .crewlet-live-cursor__pointer {

package/dist/LogoSlot/LogoSlot.d.ts

@@ -88,5 +88,11 @@ export interface LogoSlotProps {
  * (`FilePickButton`), and the slot itself is a `FileDrop` region for a pointer.
  * The engine checks every file; a refusal comes back as `error`, drawn under
  * the slot and announced, saying what to change.
+ *
+ * SIDE BY SIDE, SLOTS GO IN A `LogoSlotGroup`. A slot on its own knows
+ * nothing of its neighbours, so in a host's own row a name that wraps to a
+ * second line starts that slot's stage a line below the others. The group
+ * gives every slot one set of rows, so names, stages, notes and actions each
+ * start on one line across the row, however the copy wraps.
  */
 export declare function LogoSlot({ label, description, ground, groundColor, shape, size, src, alt, guide, uploading, error, editable, onFile, onRemove, accept, download, emptyNote, className, labels, }: LogoSlotProps): import("react").JSX.Element;

package/dist/LogoSlot/index.js

@@ -1,8 +1,8 @@
-export { LogoSlot, LogoSlotGroup } from '../chunk-JPVORBWC.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-2T32N2WD.js';
 import '../chunk-2JHGPXYG.js';
-import '../chunk-BSAQE7PO.js';
+import '../chunk-KWLH45YC.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/{LogoSlot-NAJE5XY3.css → LogoSlot-APCMGE6S.css}

@@ -11,6 +11,12 @@
   --crewlet-logo-slot-height: calc(var(--size-row-lg) * 3);
   --crewlet-logo-slot-padding: var(--spacing-5);
   --crewlet-logo-slot-clear: var(--spacing-3);
+  /* The name's size and its line, set rather than inherited, so the action
+     beside the name can be centred on it. The line is the document's own
+     leading, which is what the name took from the page before it was named
+     here. */
+  --crewlet-logo-slot-label-size: var(--font-size-sm);
+  --crewlet-logo-slot-label-line: calc(var(--crewlet-logo-slot-label-size) * var(--font-line-height-body));
 
   display: flex;
   flex-direction: column;
@@ -35,8 +41,9 @@
 
 .crewlet-logo-slot__label {
   color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--crewlet-logo-slot-label-size);
   font-weight: var(--font-weight-medium);
+  line-height: var(--crewlet-logo-slot-label-line);
 }
 
 .crewlet-logo-slot__description {
@@ -44,9 +51,18 @@
   font-size: var(--font-size-xs);
 }
 
+/*
+ * THE ACTION STANDS ON THE NAME'S LINE: a box the line's height, with the
+ * action centred in it and overflowing it evenly. Held to the top of the head
+ * instead, a small button (26px) beside the name's 20px line sat its label
+ * nearly three pixels under the name's. The name does not move, so a slot with
+ * a download and one without still start their names on one line.
+ */
 .crewlet-logo-slot__download {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  height: var(--crewlet-logo-slot-label-line);
 }
 
 /*
@@ -148,9 +164,12 @@
   line-height: var(--font-line-height-normal);
 }
 
+/* The glyph's box is the first line's height and its drawing is centred in
+   it (the frame keeps its square), so it sits on that line at any size. A
+   fixed 1px nudge left a 14px glyph a pixel above an 18px line. */
 .crewlet-logo-slot__error > svg {
   flex: none;
-  margin-top: 1px;
+  height: 1lh;
 }
 
 .crewlet-logo-slot__foot {
@@ -256,14 +275,13 @@
   --crewlet-logo-slot-height: calc(var(--size-row-lg) * 1.5);
   --crewlet-logo-slot-padding: var(--spacing-2);
   --crewlet-logo-slot-clear: var(--spacing-1);
+  /* On the slot itself, so the name's line (and the action centred on it)
+     is worked out from this size rather than the default one. */
+  --crewlet-logo-slot-label-size: var(--font-size-xs);
 
   gap: var(--spacing-1);
 }
 
-.crewlet-logo-slot--sm .crewlet-logo-slot__label {
-  font-size: var(--font-size-xs);
-}
-
 .crewlet-logo-slot--sm .crewlet-logo-slot__description,
 .crewlet-logo-slot--sm .crewlet-logo-slot__empty {
   font-size: var(--font-size-2xs);