@crewlethq/ui 0.64.0 → 0.65.0

package/dist/{Skeleton-V735HRGM.css → Skeleton-7ZA5ETJM.css}

@@ -106,11 +106,18 @@
 }
 
 /* ── card / grid / list containers ──────────────────────────────── */
-.crewlet-skeleton--card {
+/*
+ * THE CARD'S OWN INSET, Card's default `md` step, so the lines start where
+ * the card's words will and nothing moves sideways when it arrives. The
+ * placeholder card was 24px in and a grid's 20px, two insets for one card and
+ * neither of them the 16px a Card draws at by default.
+ */
+.crewlet-skeleton--card,
+.crewlet-skeleton__card {
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
+  padding: var(--spacing-4);
 }
 
 /*
@@ -130,13 +137,6 @@
   width: 100%;
 }
 
-.crewlet-skeleton__card {
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-5);
-}
-
 .crewlet-skeleton--list {
   display: flex;
   flex-direction: column;
@@ -182,8 +182,17 @@
 .crewlet-skeleton__table tbody { display: table-row-group; }
 .crewlet-skeleton__table tr { display: table-row; }
 
+/*
+ * THE REAL TABLE'S ROWS (Table.css, DataTable.css), so nothing jumps when the
+ * table arrives: every cell at its 8px over 12px inset, the header one
+ * micro-label line tall at the document's leading, and a body row at the row
+ * token. The header's block used to stand on a line of text nudged up 4px,
+ * which left it 1px under the row's top and 13px over its rule, and a body
+ * row stood 33px tall, 3px short of the row token.
+ */
 .crewlet-skeleton__th {
-  padding: 2px var(--spacing-4);
+  height: calc(var(--spacing-2) * 2 + var(--font-size-2xs) * var(--font-line-height-body));
+  padding: var(--spacing-2) var(--spacing-3);
   text-align: left;
   position: relative;
   display: table-cell;
@@ -195,8 +204,6 @@
   height: 14px;
   width: 60%;
   margin: 0;
-  display: inline-block;
-  transform: translateY(-4px);
 }
 
 .crewlet-skeleton__th:first-child .crewlet-skeleton__line { width: 70%; }
@@ -209,7 +216,8 @@
 }
 
 .crewlet-skeleton__td {
-  padding: var(--spacing-3) var(--spacing-4);
+  height: var(--size-row-md);
+  padding: var(--spacing-2) var(--spacing-3);
   display: table-cell;
   text-align: left;
   vertical-align: middle;
@@ -387,9 +395,6 @@
 
   .crewlet-skeleton__info-item::before { display: none; }
   .crewlet-skeleton__info-item:where(:nth-child(n + 2))::before { display: block; }
-
-  .crewlet-skeleton--card,
-  .crewlet-skeleton__card { padding: var(--spacing-4); }
 }
 
 /*

package/dist/SlideCompare/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-W2Q5DZJB.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-2SU735S3.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';

package/dist/{SlideCompare-HTCMPQFY.css → SlideCompare-R4GVZXAM.css}

@@ -86,13 +86,16 @@
   align-self: flex-start;
 }
 
+/* The dashed edge is an OUTLINE, as a framed slide's edge is, so the empty
+   side's edge lines up with the slide beside it and the slides above and below
+   it: as a border it was drawn inside the box, one pixel in on every side. */
 .crewlet-slide-compare__missing {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 16 / 9;
   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/SlideFilmstrip/index.js

@@ -1,14 +1,14 @@
-export { SlideFilmstrip } from '../chunk-XLJPLCK6.js';
+export { SlideFilmstrip } from '../chunk-U7J52N67.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-ACRRRPWT.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-T73DMDU4.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/{SlideFilmstrip-PAT7P4OG.css → SlideFilmstrip-BLGBCLEU.css}

@@ -102,15 +102,21 @@
   color: var(--color-text-secondary);
 }
 
-/* A CONTROL'S CORNER: the handle is a 24px control like any toolbar button,
+/* A CONTROL'S CORNER: the handle is a small control like any toolbar button,
    so it takes --radius-md; the thumbnail beside it is a slide, and keeps the
-   slide's own smaller corner. */
+   slide's own smaller corner.
+
+   AND THE SMALL CONTROL'S SIZE, square in both orientations: the small step,
+   which floors itself at the pointer target, with the glyph that step draws.
+   It was the 24px target floor with a 14px glyph, so the actions menu under
+   it (a small IconButton, 26px with a 12px glyph) was a larger square in the
+   same column, and in a row the handle was 24 by 26. */
 .crewlet-slide-filmstrip__handle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--size-target-min);
-  min-height: var(--size-target-min);
+  min-width: var(--size-control-sm);
+  min-height: var(--size-control-sm);
   padding: 0;
   border: 0;
   border-radius: var(--radius-md);
@@ -119,6 +125,11 @@
   cursor: grab;
 }
 
+.crewlet-slide-filmstrip__handle .crewlet-glyph {
+  width: var(--font-size-xs);
+  height: var(--font-size-xs);
+}
+
 .crewlet-slide-filmstrip__handle:hover {
   background: var(--color-surface-hover);
 }
@@ -175,7 +186,6 @@
 
 .crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__handle {
   grid-area: handle;
-  min-height: var(--size-control-sm);
   cursor: grab;
 }
 

package/dist/SlideGrid/index.js

@@ -1,4 +1,4 @@
-export { SlideGrid } from '../chunk-3V5T5K5H.js';
+export { SlideGrid } from '../chunk-7MGXHCVK.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/{SlideGrid-FJA33DV4.css → SlideGrid-J4LAOUSJ.css}

@@ -25,12 +25,15 @@
 }
 
 .crewlet-slide-grid__card {
+  /* The slide's own corner, so the focus ring round the card (below) follows
+     the slide's edge at the top rather than squaring off round it. */
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
   width: 100%;
   padding: 0;
   border: 0;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: inherit;
   font: inherit;
@@ -56,11 +59,25 @@
   font-weight: var(--font-weight-semibold);
 }
 
-/* ONE RING, round the whole card (its slide and its caption), on the inset
-   offset so it does not stand off the slide's own edge as a second line. */
+/* ONE RING, round the whole card (its slide and its caption), over the slide's
+   own edge rather than standing off it as a second line.
+
+   FLUSH OUTSIDE THE CARD, NOT ON THE INSET OFFSET. Inset, the ring was drawn
+   inside the slide's box, and the stage is positioned, so it painted over
+   every pixel of the ring it overlapped: what showed was a three-sided
+   bracket round the caption, cutting 2px into the caption's number. Flush
+   outside (offset 0) the ring lies on the slide's own 1px edge, which is
+   drawn just outside the stage's box, and the stage's edge takes the focus
+   colour while the card has focus, so the pixel it paints over the ring is
+   the ring's own colour (a host recolours the stage's outline rather than
+   adding a second line, as SlideStage.css asks). */
 .crewlet-slide-grid__card:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline-offset: 0;
+}
+
+.crewlet-slide-grid__card:focus-visible .crewlet-slide-stage {
+  outline-color: var(--color-focus);
 }
 
 .crewlet-slide-grid__card[data-hidden='true'] .crewlet-slide-stage {

package/dist/SlideNav/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-DEAFAK3U.js';
-import '../chunk-2XWFWNDT.js';
+export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-5AJR6X75.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideNav-BLFJF6AH.css → SlideNav-ODTNGTMT.css}

@@ -27,14 +27,25 @@
 }
 
 /* OVER A PROJECTED SLIDE: a pill in the projection's own fixed colours, so it
-   reads over black bars and over a slide of any colour, in every theme. */
+   reads over black bars and over a slide of any colour, in every theme.
+
+   CONCENTRIC WITH ITS ENDS: one inset all round, and round controls, so the
+   first and last controls sit centred in the pill's caps and what they draw
+   under the pointer and on focus is a circle the same distance from the edge
+   all the way round. Inset 8px across and 4px down, the end controls sat 4px
+   off the caps' centres, and their 8px-cornered squares pressed into the
+   curve at the corners. */
 .crewlet-slide-nav--projection {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: var(--spacing-1);
   border-radius: var(--radius-pill);
   background: var(--color-projection-ground);
   color: var(--color-projection-ink);
 }
 
+.crewlet-slide-nav--projection .crewlet-icon-btn {
+  border-radius: var(--radius-pill);
+}
+
 .crewlet-slide-nav--projection .crewlet-slide-nav__position {
   color: inherit;
 }

package/dist/SourceEditor/index.js

@@ -1,4 +1,4 @@
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-CVDK3LDB.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-4TMBAOXK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SourceEditor-OKPWPFXK.css → SourceEditor-SMQ44O76.css}

@@ -61,8 +61,10 @@
 }
 
 .crewlet-source-editor__number {
-  /* Wide enough for the longest number, so the text never shifts as lines are added. */
-  min-width: calc(var(--crewlet-source-digits, 2) * 1ch + var(--spacing-2) * 2);
+  /* Wide enough for the longest number, so the text never shifts as lines are
+     added, and never narrower than two digits: at one, a new file's text moved
+     1ch to the right the moment its tenth line was typed. */
+  min-width: calc(max(2, var(--crewlet-source-digits, 2)) * 1ch + var(--spacing-2) * 2);
   padding: 0 var(--spacing-2);
   text-align: right;
   font-variant-numeric: tabular-nums;

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-VO2PDDRE.js';
+export { StatCard } from '../chunk-G5IZGAWS.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-HAA3F5GX.css → StatCard-TPKGB2GB.css}

@@ -115,6 +115,10 @@
   flex: 1 0 auto;
   min-width: 0;
   max-width: 100%;
+  /* One line of the number even while it is on its way: the placeholder alone
+     stood 8px shorter than the digits, so every tile jumped when its value
+     arrived. The line is 1em, since its leading is 1. */
+  min-height: 1em;
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
@@ -175,6 +179,9 @@
  */
 .crewlet-statcard__placeholder {
   display: inline-block;
+  /* Centred on the line, where the digits' own ink stands: a leading of 1
+     leaves the same air over the figures as under them. */
+  align-self: center;
   width: 3ch;
   height: 0.7em;
   border-radius: var(--radius-xs);

package/dist/StatusCard/index.js

@@ -1,9 +1,9 @@
-export { StatusCard } from '../chunk-WW4E5EUS.js';
-import '../chunk-KYIAFNU7.js';
+export { StatusCard } from '../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/{StatusCard-AMOI6GBK.css → StatusCard-FCJN7SXJ.css}

@@ -72,6 +72,17 @@
   row-gap: var(--spacing-1);
 }
 
+/*
+ * Card lets a head's small control reach into the inset so the row stands at
+ * its floor. Here the toggle already stands taller than the control, so the
+ * pull bought nothing on one line, and once the utilities wrap they are the
+ * whole of their own line: the pull took their inset and their gap under the
+ * title, and the last line sat closer to the edge than the first did.
+ */
+.crewlet-status-card--folded > .crewlet-card__header > .crewlet-card__header-actions {
+  margin-block: 0;
+}
+
 /* `hidden` has to win over the body's own `display: flex`. */
 .crewlet-status-card__body[hidden] {
   display: none;
@@ -81,6 +92,25 @@
   min-width: 0;
 }
 
+/*
+ * THE PULL HAS ROOM TO LAND IN. The toggle reaches its padding past the name
+ * block's leading edge (below), and the name block clips, which is what keeps
+ * the head one line: the clip cut the toggle's hover fill square on that side
+ * and dropped the leading edge of its focus ring. The block takes the pull
+ * back as padding, so it clips where the toggle starts rather than where the
+ * chevron does, and the title, whose toggle already ends its own line, does
+ * not clip it a second time. Two classes or more on each, so they outweigh
+ * Card's own rules wherever the bundle puts this sheet.
+ */
+.crewlet-status-card--collapsible > .crewlet-card__header > .crewlet-card__header-main {
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  padding-inline-start: var(--spacing-2);
+}
+
+.crewlet-card__title.crewlet-status-card__fold-title {
+  overflow: visible;
+}
+
 /*
  * The button keeps the title's type and pulls its padding into the gutter, so
  * the chevron sits on the card's text edge. NEUTRAL on hover, as every
@@ -155,12 +185,17 @@
   margin-inline-end: var(--spacing-1);
 }
 
-/* A folded card's utilities, at the end of its head, one small gap apart. */
+/*
+ * A folded card's utilities, at the end of its head. THE FOOT'S OWN GAP: they
+ * are the same buttons the open card draws in its foot, and at half its gap
+ * the row tightened by 4px the moment the card folded. One gap, so folding a
+ * card moves its utilities without respacing them.
+ */
 .crewlet-status-card__head-actions {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-1);
+  gap: var(--spacing-2);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/Stepper/index.js

@@ -1,4 +1,4 @@
-export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-Z4EKUMZW.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-HJBHP66O.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{Stepper-QEJI5RGX.css → Stepper-32INSYF7.css}

@@ -17,21 +17,30 @@
  */
 
 .crewlet-stepper {
+  /* The design's 6px either side of the rule between two pills (a step and
+     a half), named because the gap and the rule both measure by it (see THE
+     RULE BETWEEN TWO STEPS). */
+  --crewlet-stepper-rule-clearance: calc(var(--spacing-1) * 1.5);
+
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  /* The design's 6px between a pill and the rule beside it: a step and a half. */
-  gap: calc(var(--spacing-1) * 1.5);
+  /* The 10px rule stands in the gap with its clearance on both sides; two
+     lines of a row that wraps stand that same 6px apart. */
+  row-gap: var(--crewlet-stepper-rule-clearance);
+  column-gap: calc(var(--crewlet-stepper-rule-clearance) * 2 + 10px);
   min-width: 0;
   margin: 0;
   padding: 0;
   list-style: none;
+  /* See the rule below: one that would lead a wrapped line is cut here. */
+  overflow-x: clip;
 }
 
 .crewlet-stepper__step {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--spacing-1) * 1.5);
   min-width: 0;
 }
 
@@ -41,10 +50,17 @@
  * furniture: it carries nothing a reader has to be told, and the list already
  * says the steps are in order. 10px by a hairline, the measure of this one
  * mark, and fixed at every density as a hairline is.
+ *
+ * IT STANDS IN THE GAP, outside its step's box, so a row that wraps never
+ * starts with one: the step that opens the next line has its rule past the
+ * list's start edge, where the list clips it. Drawn inside the step, it went
+ * down with it and stood alone at the head of the line, before "Voice".
  */
 .crewlet-stepper__step + .crewlet-stepper__step::before {
   content: '';
-  flex: none;
+  position: absolute;
+  top: calc(50% - 0.5px);
+  inset-inline-end: calc(100% + var(--crewlet-stepper-rule-clearance));
   width: 10px;
   height: 1px;
   background: var(--color-border-strong);
@@ -225,6 +241,8 @@
   flex-wrap: nowrap;
   align-items: stretch;
   gap: 0;
+  /* A column does not wrap, so it has no leading rule to cut. */
+  overflow-x: visible;
 }
 
 .crewlet-stepper--vertical .crewlet-stepper__step {

package/dist/SuggestionRow/index.js

@@ -1,3 +1,3 @@
-export { SuggestionList, SuggestionRow } from '../chunk-YBI7M2JH.js';
+export { SuggestionList, SuggestionRow } from '../chunk-Y7PVLEZJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SuggestionRow-OKBGNHSS.css → SuggestionRow-WSU34POM.css}

@@ -23,9 +23,23 @@
   border-top: 1px solid var(--color-border-default);
 }
 
+/*
+ * THE GLYPH STANDS ON THE FIRST LINE, the count and chevron on the row. A
+ * flex row centred all three on the words' block, which put the glyph between
+ * a question and its second line, or between a title and its fact, 9 to 12px
+ * under the line it names. One grid row instead: the glyph and the words at
+ * its top, the trail centred on it, and the track itself centred in the row's
+ * height, so a row of one line still stands in the middle of the row. The
+ * trail goes in a column of its own only when there is one, so a row without
+ * it keeps the whole width for its words.
+ */
 .crewlet-suggestion-row {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-columns: auto;
+  grid-auto-flow: column;
+  align-items: start;
+  align-content: center;
   gap: var(--spacing-3);
   width: 100%;
   min-width: 0;
@@ -63,9 +77,12 @@
   background: none;
 }
 
+/* One line of the words tall, the glyph centred in it. */
 .crewlet-suggestion-row__icon {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  height: 1lh;
   color: var(--color-text-tertiary);
 }
 
@@ -86,11 +103,18 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * Centred on the row, in a box one line tall: a count taller than the line
+ * overflows it evenly into the row's padding rather than heightening the
+ * track, which would lift a one-line row's words off the count's middle.
+ */
 .crewlet-suggestion-row__trail {
   display: inline-flex;
   flex: none;
   align-items: center;
+  align-self: center;
   gap: var(--spacing-2);
+  height: 1lh;
   margin-inline-start: auto;
   color: var(--color-text-tertiary);
 }

package/dist/Switch/index.js

@@ -1,2 +1,2 @@
-export { Switch } from '../chunk-A722MUNR.js';
+export { Switch } from '../chunk-3XDT5ZWL.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Switch-66RAQCRE.css → Switch-AUYLQLTN.css}

@@ -16,12 +16,27 @@
   --crewlet-switch-width: 36px;
   --crewlet-switch-height: 20px;
   --crewlet-switch-thumb: 14px;
-  --crewlet-switch-inset: 3px;
+  /*
+   * DERIVED, so the thumb is centred and concentric with the track's rounded
+   * ends: half of what the track's inner height leaves round the thumb, its
+   * 1px boundary taken off each side. A flat 3px suited the ends but not the
+   * height: an 18px inner height less a 14px thumb leaves 4px, so the thumb
+   * stood 3px under the top edge and 1px over the bottom one.
+   */
+  --crewlet-switch-inset: calc((var(--crewlet-switch-height) - var(--crewlet-switch-thumb)) / 2 - 1px);
 
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-2);
-  min-height: var(--size-row-sm);
+  /*
+   * ITS FIRST LINE IS CENTRED IN THE ROW, as a Checkbox's is and for the same
+   * reason: a minimum height with the label at its top stood a one-line
+   * switch 4.2px above the centre of any row it was centred in. Equal padding
+   * round the first line makes one line exactly the row's height with the
+   * track and the text on its middle, and a description grows the row
+   * downwards with the track still on the first line.
+   */
+  padding-block: calc((var(--size-row-sm) - var(--font-line-height-snug) * 1em) / 2);
   /*
    * The label's size, on the row, because the track below is placed against
    * the label's first LINE in `em` and `em` on the track is the size it
@@ -43,8 +58,12 @@
    * so a form holding both does not draw two rows whose controls sit at two
    * heights. The literal it replaces put a 20px track 2px below a 19.6px
    * line, which is a track hanging under its own sentence.
+   *
+   * BOTH ENDS, so the track takes exactly the line's height in the flow. On
+   * the top alone, the 20px track stood 0.2px under the 19.6px line and the
+   * one-line row came out 28.2px against a Checkbox's 28.
    */
-  margin-top: calc((var(--font-line-height-snug) * 1em - var(--crewlet-switch-height)) / 2);
+  margin-block: calc((var(--font-line-height-snug) * 1em - var(--crewlet-switch-height)) / 2);
   border-radius: var(--radius-pill);
   background: var(--color-surface-inset);
   /*
@@ -156,6 +175,14 @@
 .crewlet-switch.is-disabled,
 .crewlet-switch.is-disabled .crewlet-switch__control {
   cursor: not-allowed;
+}
+
+/*
+ * THE ROW IS DIMMED, AND ONLY THE ROW. The control shared the rule above and
+ * took the opacity with it, which replaced the zero opacity it is drawn at:
+ * a disabled switch showed the platform's own checkbox through its track.
+ */
+.crewlet-switch.is-disabled {
   opacity: 0.6;
 }
 

package/dist/Switcher/index.js

@@ -1,10 +1,10 @@
-export { Switcher } from '../chunk-ZRKUTFYE.js';
-import '../chunk-KVWZDCTQ.js';
+export { Switcher } from '../chunk-GDDVI4US.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-FYTIJM2T.js';
-import '../chunk-QBI5ETKY.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-HBDA76EZ.js';
+import '../chunk-BRLZXYPA.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
@@ -13,7 +13,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/{Switcher-K3EPA2RB.css → Switcher-VWQMZUTN.css}

@@ -138,9 +138,14 @@ svg.crewlet-switcher-trigger__chevron {
   background: var(--color-border-strong);
 }
 
+/*
+ * The head keeps the same inset at both ends. The close control is pulled out
+ * by its glyph inset (see Modal.css), so the X stands on the title's mirror
+ * line, and its square and focus ring stay clear of the sheet's clipped edge.
+ */
 .crewlet-switcher--sheet .crewlet-modal__header {
   min-height: var(--size-control-lg);
-  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  padding: 0 var(--spacing-4);
 }
 
 /* A dialog's body scrolls its whole content; here the list alone scrolls. */
@@ -164,11 +169,17 @@ svg.crewlet-switcher-trigger__chevron {
  * is the field. It is set at the trail's size rather than the palette's
  * headline size, because the panel is a list read at a glance, and at the
  * reading size on a phone, where a smaller field zooms the page when tapped.
+ *
+ * ITS GLYPH STANDS IN THE LEAD COLUMN. The band's inset and the field's own
+ * glyph slot (a step) add up to the list's inset and a row's pad, so the
+ * search glyph is drawn where every row's glyph and key start, at the rows'
+ * glyph step. It stood 4px in from them, a step smaller, which put the
+ * field's magnifier and a "Search tasks" row's magnifier off one axis.
  */
 .crewlet-input.crewlet-switcher__search {
   flex-shrink: 0;
   min-height: var(--size-control-lg);
-  padding-inline: var(--spacing-3) var(--spacing-2);
+  padding-inline: var(--spacing-2);
   border: none;
   border-bottom: 1px solid var(--color-border-default);
   border-radius: 0;

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-U4AXQI6U.js';
-import '../chunk-HOP3J622.js';
-import '../chunk-KYIAFNU7.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-NWTHGZBH.js';
+import '../chunk-QF5UNP4T.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-L6NG7CUA.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';