@crewlethq/ui 0.64.0 → 0.65.0

package/dist/{CalendarGrid-V6TQ5QKS.css → CalendarGrid-TT624SDR.css}

@@ -9,8 +9,12 @@
  */
 
 .crewlet-calendar {
+  /* The hairline of ground between two days, named because a range's band
+     paints over it (see THE BAND'S JOINS). */
+  --crewlet-calendar-gap: 1px;
+
   display: grid;
-  gap: 1px;
+  gap: var(--crewlet-calendar-gap);
   user-select: none;
 }
 
@@ -18,7 +22,7 @@
 .crewlet-calendar__week {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 1px;
+  gap: var(--crewlet-calendar-gap);
 }
 
 .crewlet-calendar__weekday {
@@ -39,7 +43,14 @@
   justify-content: center;
   /* Never under the 24px target floor, at any density. */
   min-width: var(--size-control-sm);
-  height: var(--size-control-sm);
+  /*
+   * A day is a SQUARE whatever its column's width. The columns share the
+   * grid's width, so a fixed height drew a square only at the grid's natural
+   * width and a wide rounded bar in any wider host (a 288px picker panel drew
+   * a 37 x 26 chip). The height follows the width instead, so the cell, its
+   * hover and its chosen chip stay square and the band still fills the column.
+   */
+  aspect-ratio: 1;
   /* The corner every small row in the package wears: a menu item, a
      completion, a day. */
   border-radius: var(--radius-xs);
@@ -78,37 +89,63 @@
 }
 
 /*
- * A RANGE IS ONE BAND. The cells sit 1px apart, so a tint on each of them
- * alone reads as a row of separate squares with the ground showing between.
- * An OUTLINE in the band's own colour closes that gap on every side, which is
- * what joins the weeks a multi-week range runs through as well as the days.
- *
- * An outline rather than a box-shadow because today's ring is a box-shadow: a
- * second one on the same element replaces it, and a day that is both today and
- * inside the chosen range would lose the ring that says which day it is. The
- * focus ring is an outline too and is declared after this, so it still wins on
- * the day the keyboard is on.
+ * A RANGE IS ONE BAND. The cells sit a hairline apart, so a tint on each of
+ * them alone reads as a row of separate squares with the ground showing
+ * between. The band's joins (below) paint that hairline between two of its
+ * days, across the weeks a range runs through as well as along them.
  */
 .crewlet-calendar__day.is-in-range {
   background: var(--color-brand-accent-soft);
   color: var(--color-brand-accent-ink);
   border-radius: 0;
-  outline: 1px solid var(--color-brand-accent-soft);
 }
 
+/*
+ * The ends of the band: the chosen day keeps its own fill and its own corner,
+ * and the join to the run beside it is the band's colour, so the chip reads as
+ * joined to it rather than floating one gap away from it.
+ */
 .crewlet-calendar__day.is-selected {
   background: var(--color-brand-accent);
   color: var(--color-text-on-accent);
 }
 
 /*
- * The ends of the band: the chosen day keeps its own fill and its own corner,
- * and carries the band's colour around it so the chip reads as joined to the
- * run beside it rather than floating one gap away from it.
+ * THE BAND'S JOINS, each hairline painted ONCE: by the day before it on the
+ * row, or the day above it, and the crossing where four of the band's days
+ * meet by the first of them (CalendarGrid.tsx says which neighbours are the
+ * band's). The tint is translucent, so the outline every day of the band used
+ * to draw around itself laid it twice wherever two of them met: a darker seam
+ * between every two days and every two weeks, the grid of squares the band is
+ * there to replace. A join's edges are its two days' own edges, so it meets
+ * their grounds with no seam at any width a column rounds to.
  */
-.crewlet-calendar__day.is-range-start,
-.crewlet-calendar__day.is-range-end {
-  outline: 1px solid var(--color-brand-accent-soft);
+.crewlet-calendar__day:is(.is-joined-after, .is-joined-below) {
+  position: relative;
+}
+
+.crewlet-calendar__day.is-joined-after::before,
+.crewlet-calendar__day.is-joined-below::after {
+  content: '';
+  position: absolute;
+  background: var(--color-brand-accent-soft);
+  pointer-events: none;
+}
+
+.crewlet-calendar__day.is-joined-after::before {
+  inset-block: 0;
+  inset-inline-start: 100%;
+  width: var(--crewlet-calendar-gap);
+}
+
+.crewlet-calendar__day.is-joined-below::after {
+  inset-inline: 0;
+  top: 100%;
+  height: var(--crewlet-calendar-gap);
+}
+
+.crewlet-calendar__day.is-joined-corner::after {
+  inset-inline-end: calc(-1 * var(--crewlet-calendar-gap));
 }
 
 /*

package/dist/Canvas/index.js

@@ -1,12 +1,12 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-3Q6N6FJL.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-F32FFE6I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-ACRRRPWT.js';
+import '../chunk-ANTAQAR4.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/CanvasBoard/index.js

@@ -1,16 +1,16 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-UTBCDOGP.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-JEA5OX54.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-KWTRRS7E.js';
+import '../chunk-WDNURPXU.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-3Q6N6FJL.js';
+import '../chunk-F32FFE6I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-ACRRRPWT.js';
+import '../chunk-ANTAQAR4.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/{CanvasBoard-JMYNIAHK.css → CanvasBoard-U6LR5F6H.css}

@@ -323,7 +323,12 @@
   height: var(--spacing-2);
   box-sizing: border-box;
   border: 1px solid var(--color-brand-accent);
-  border-radius: var(--radius-xs);
+  /*
+   * A SQUARE, as the rule above says. The extra small corner is half of this
+   * 8px side, which drew every corner as a dot; half of that step keeps the
+   * quarter round the 16px square it was drawn from had.
+   */
+  border-radius: calc(var(--radius-xs) / 2);
   background: var(--color-surface-elevated);
 }
 

package/dist/CanvasToolbar/index.js

@@ -1,14 +1,14 @@
-export { CanvasToolbar, toolForKey } from '../chunk-KWTRRS7E.js';
+export { CanvasToolbar, toolForKey } from '../chunk-WDNURPXU.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-3Q6N6FJL.js';
+import '../chunk-F32FFE6I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-ACRRRPWT.js';
+import '../chunk-ANTAQAR4.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/Card/Card.d.ts

@@ -150,9 +150,9 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     /**
      * A title with nowhere left to go ENDS in an ellipsis rather than being cut.
      *
-     * The head is one line and the name block clips, so a title longer than the
-     * row is stopped at the header's edge — mid-word, with nothing to say a word
-     * was lost. `text-overflow` is the answer to that and it applies to a BLOCK
+     * The head is one line and the title clips, so a title longer than the row
+     * is cut at its own edge, mid-word, with nothing to say a word was lost.
+     * `text-overflow` is the answer to that and it applies to a BLOCK
      * container only, never to a flex one, and the title is flex: the text
      * inside it is an anonymous flex item that no rule in this stylesheet can
      * reach. So the ellipsis is a change of the title's own display, which is a
@@ -164,8 +164,8 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
      * gap-separated flex items, so a caller who put a glyph or a tag inside the
      * title gets it on the text baseline with no gap. `Card.Header`'s own `icon`
      * slot is where a glyph belongs, and it is outside the title and unaffected.
-     * A title of plain text — which is every title in this package and every one
-     * in the engine dashboard — reads identically either way, and is exactly the
+     * A title of plain text, which is every title in this package and every one
+     * in the engine dashboard, reads identically either way, and is exactly the
      * case that was being cut.
      */
     truncate?: boolean | undefined;

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-MKKX6N7C.js';
+export { Card } from '../chunk-7XKDPTZ5.js';
 export { useCardHeaderSlot } from '../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/{Card-JR2UPQH7.css → Card-O35OMBQ5.css}

@@ -228,29 +228,36 @@
  * A state down the leading edge. Drawn as a pseudo element rather than a
  * border or an inset shadow, so it composes with the elevated shadow and a
  * chosen card's edge instead of replacing whichever one was declared last.
+ *
+ * THE RAIL FOLLOWS THE CORNER. It was a 3px strip given the card's 12px
+ * corner, which a box 3px wide cannot draw: the radius scaled down to 3px and
+ * the strip's ends stood square inside the curve, past the card's own rounded
+ * outline at the top and the bottom. It is the leading border of a box the
+ * size of the card's inside instead, at the card's own corner as the elevated
+ * rim is, so the colour runs on into the curve and thins out along it. The
+ * box covers the card, so it takes no pointer.
  */
 .crewlet-card--rail-info::before,
 .crewlet-card--rail-warning::before,
 .crewlet-card--rail-danger::before {
   content: '';
   position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  width: 3px;
-  border-start-start-radius: var(--radius-lg);
-  border-end-start-radius: var(--radius-lg);
+  inset: 0;
+  border-inline-start: 3px solid;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
 .crewlet-card--rail-info::before {
-  background: var(--color-feedback-info);
+  border-inline-start-color: var(--color-feedback-info);
 }
 
 .crewlet-card--rail-warning::before {
-  background: var(--color-feedback-warning);
+  border-inline-start-color: var(--color-feedback-warning);
 }
 
 .crewlet-card--rail-danger::before {
-  background: var(--color-feedback-danger);
+  border-inline-start-color: var(--color-feedback-danger);
 }
 
 /* ---- Slots ------------------------------------------------------------- */
@@ -258,9 +265,9 @@
 /*
  * The panel head: ONE LINE, at the card's own inset, with the rule under it
  * reaching both edges. `--size-row-lg` is the floor, so a row of nothing but a
- * title stands as tall as the rows on every other card; a control taller than
- * what is left of it after the inset raises the row, which is what a head with
- * a button in it draws.
+ * title stands as tall as the rows on every other card. A head's own small
+ * control stands inside that floor (see the action slots below); a control
+ * taller than the small step raises the row by what it adds past it.
  */
 .crewlet-card__header {
   display: flex;
@@ -279,6 +286,21 @@
   border-bottom: none;
 }
 
+/*
+ * THE BODY UNDER IT STARTS WHERE THE HEAD'S INSET ENDS. With the rule gone,
+ * the head's bottom inset and the body's top inset stood one over the other:
+ * 29.5px between a title and the sentence that finishes it, twice the 13.5px
+ * over the title, so the title floated free of what it names. The head's
+ * inset is the one gap left, which is what the engine dashboard's own blocks
+ * under a plain head already draw (no top inset of their own).
+ *
+ * The one rule that outweighs a step on purpose: two classes, so it wins on
+ * weight rather than on where the bundle puts it.
+ */
+.crewlet-card__header--plain + .crewlet-card__body {
+  padding-block-start: 0;
+}
+
 /*
  * The name block. It CLIPS, because the head is one line: a title with nowhere
  * left to go is cut at the row's end rather than allowed to spill across the
@@ -333,6 +355,57 @@
   display: none;
 }
 
+/*
+ * A SMALL CONTROL REACHES INTO THE INSET rather than raising the row. The
+ * small step (26px) is taller than what the floor leaves after the inset and
+ * the rule (23px), so a head with an Edit button or a pager in it stood at
+ * 51px and the same head without one at 48px: cards side by side carried
+ * heads 3px apart, and an edit-in-place card moved its whole body when the
+ * button left the row. The slots give back exactly that excess as a negative
+ * margin, split over both sides so the control stays centred, which is the
+ * difference between the small step and the room inside the floor. The rule
+ * is counted on every head, so a plain head (no rule) keeps a pixel spare and
+ * still stands at the floor. A taller control still raises the row by what it
+ * adds past the small step. `min()` keeps the pull at zero in any density
+ * where the small step already fits.
+ */
+.crewlet-card__header-actions,
+.crewlet-card__header-chrome {
+  margin-block: min(
+    0px,
+    calc((var(--size-row-lg) - 2 * var(--spacing-3) - 1px - var(--size-control-sm)) / 2)
+  );
+}
+
+/*
+ * A GHOST SQUARE THAT ENDS THE HEAD ENDS IT ON THE CARD'S TEXT EDGE. By its
+ * box, a small kebab drew its glyph 7px inside the line the rows, the foot and
+ * the title's own start keep, while a dialog's close, a side panel's controls
+ * and a card foot's ghost all stand on that line. It is pulled out by the
+ * glyph's own inset in its square, which IconButton.css publishes per step,
+ * the pull Modal.css gives its close. Only a ghost, which draws no edge, and
+ * only the last control on the row: a panel's pager and cog after it (the
+ * chrome, when filled) keep the row's gap.
+ */
+.crewlet-card__header-actions:is(:last-child, :has(+ .crewlet-card__header-chrome:empty))
+  > :is(.crewlet-icon-btn--ghost, .crewlet-icon-btn--ghost-danger):last-child,
+.crewlet-card__header-actions:is(:last-child, :has(+ .crewlet-card__header-chrome:empty))
+  > .crewlet-menu-anchor:last-child
+  > :is(.crewlet-icon-btn--ghost, .crewlet-icon-btn--ghost-danger) {
+  margin-inline-end: calc(-1 * var(--crewlet-icon-btn-glyph-inset, 0px));
+}
+
+/* A small ghost button with words (an edit-in-place card's Edit) ends the
+   head on that line too, pulled out by its padding and edge, as a card foot's
+   ghost is (StatusCard.css). By its box its word stood 9px inside. */
+.crewlet-card__header-actions:is(:last-child, :has(+ .crewlet-card__header-chrome:empty))
+  > .crewlet-btn--ghost.crewlet-btn--small:last-child,
+.crewlet-card__header-actions:is(:last-child, :has(+ .crewlet-card__header-chrome:empty))
+  > .crewlet-menu-anchor:last-child
+  > .crewlet-btn--ghost.crewlet-btn--small {
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
 /*
  * The card's own actions take the end of the row and the panel's controls
  * close onto them, so the cog stays the last thing on the line. Without this
@@ -403,6 +476,13 @@
    * to give up. Which is what the subtitle does first; see below.
    */
   white-space: nowrap;
+  /*
+   * CUT AT ITS OWN EDGE, not the name block's. A title shrunk below its words
+   * still painted them past its box, and a count beside it was drawn over the
+   * overflow: "Developer" and "12" printed on top of each other. Clipped here,
+   * the words stop where the title's box does and the count keeps its gap.
+   */
+  overflow: hidden;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-normal);
@@ -413,9 +493,9 @@
 /*
  * A TITLE THAT ENDS RATHER THAN STOPS, where a caller has asked for it.
  *
- * The name block clips, which is what keeps the head one line, so a title
- * wider than the row is cut at the header's edge — mid-word, with nothing to
- * say a word was lost. `text-overflow` is the rule that says it, and it
+ * The title clips, which is what keeps the head one line, so a title wider
+ * than the row is cut at its own edge, mid-word, with nothing to say a word
+ * was lost. `text-overflow` is the rule that says it, and it
  * applies to a BLOCK container only: on the flex title above it does nothing
  * at all, and the text it would act on is an anonymous flex item that no
  * selector here can reach. So the modifier makes the title a block. Its
@@ -423,12 +503,12 @@
  * with a gap between them, which is the whole of what a caller opts into, and
  * why this is a modifier rather than the base rule.
  *
- * `white-space: nowrap` is already the title's own, and `min-width: 0` is what
- * lets the block shrink below its content inside the name block; both stand.
+ * `white-space: nowrap` and `overflow: hidden` are already the title's own, and
+ * `min-width: 0` is what lets the block shrink below its content inside the
+ * name block; all three stand.
  */
 .crewlet-card__title--truncate {
   display: block;
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 

package/dist/CatalogTile/index.js

@@ -1,3 +1,3 @@
-export { CatalogTile } from '../chunk-TGSIVB6H.js';
+export { CatalogTile } from '../chunk-QE4OIE3Q.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-26XN7L2A.css → CatalogTile-6VF36JWA.css}

@@ -50,13 +50,21 @@
    LINE ACROSS A ROW whether or not a tile has a state: centred on the mark, a
    name with a pill under it rose 13px above its stateless neighbour's, so the
    names of one row stood at two heights. It starts one step below the mark's
-   top edge in every tile instead. */
+   top edge in every tile instead.
+
+   AND GIVES THE STEP BACK UNDER ITSELF, so the head stands at the mark's
+   height whether or not a tile has a state. Without it a name and its pill
+   stood 1.6px past the mark's foot (4.8px at compact density), and the
+   sentence under a tile with a state started that much lower than its
+   stateless neighbour's in the same row. At compact density the name's own
+   line, which does not scale, still leaves 1.5px. */
 .crewlet-catalog-tile__title {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   padding-top: var(--spacing-1);
+  margin-bottom: calc(var(--spacing-1) * -1);
   gap: var(--spacing-1);
   min-width: 0;
 }
@@ -71,8 +79,12 @@
   overflow-wrap: anywhere;
 }
 
+/* A state in words (a StatusDot's label) at a Tag's caption step, so a row
+   reads the same whichever one a tile carries. It inherited the page's size,
+   and on a 16px page "Connected" stood taller than the name before it. */
 .crewlet-catalog-tile__status {
   display: inline-flex;
+  font-size: var(--font-size-xs);
 }
 
 .crewlet-catalog-tile__description {
@@ -170,6 +182,7 @@
   align-items: center;
   gap: 0 var(--spacing-2);
   padding-top: 0;
+  margin-bottom: 0;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__name {

package/dist/ChangeList/index.js

@@ -1,10 +1,10 @@
-export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-NOSHT6FL.js';
-import '../chunk-RO2MZZ66.js';
-import '../chunk-KYIAFNU7.js';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-WQRSZMN4.js';
+import '../chunk-LR4IWUWQ.js';
+import '../chunk-I5OIKDX2.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-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChangeList-KQVD46IC.css → ChangeList-MDFH5NPH.css}

@@ -171,6 +171,23 @@
   text-decoration-thickness: 1px;
 }
 
+/*
+ * TWO CHANGED RUNS THAT TOUCH stand a word space apart. A removed run has no
+ * tint of its own here, so its strike ran straight into the added run's tint
+ * ("one hour" into "30 minutes") and the two read as one struck phrase.
+ *
+ * The space is the REMOVED run's, on whichever side the other run touches.
+ * An added run's tint is cloned onto every line it wraps onto, margins and
+ * all, so a space at its start indented each line it continued on by 4px.
+ */
+.crewlet-change-list__deleted:has(+ :is(.crewlet-change-list__deleted, .crewlet-change-list__inserted)) {
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-change-list__inserted + .crewlet-change-list__deleted {
+  margin-inline-start: var(--spacing-1);
+}
+
 /* The disclosure's padding hangs into the gutter, so its chevron sits on the text edge. */
 .crewlet-change-list__whole {
   margin-inline-start: calc(var(--spacing-2) * -1);

package/dist/ChangeMark/index.js

@@ -1,4 +1,4 @@
-export { ChangeMark } from '../chunk-66X5WDKE.js';
+export { ChangeMark } from '../chunk-Z2MZTI3H.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/{ChangeMark-3VMTW7MT.css → ChangeMark-KFDGBF6G.css}

@@ -12,6 +12,11 @@
   height: 0;
   border-top: var(--spacing-2) solid var(--color-change-mark);
   border-inline-start: var(--spacing-2) solid transparent;
+  /* THE HOST'S OWN CORNER. On a rounded element the notch's square tip stood
+     past the curve and was painted over the element's border; taking the
+     corner's radius keeps it inside. A sheet cell's corner is square, so the
+     notch there is unchanged. */
+  border-start-end-radius: inherit;
   pointer-events: auto;
 }
 

package/dist/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Histogram, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, histogramTicks, niceScale, useChartHover } from '../chunk-D2BYJNEH.js';
+export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Histogram, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, histogramTicks, niceScale, useChartHover } from '../chunk-YWVT7B6N.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-TZ744HT6.css → Charts-UJKADWXE.css}

@@ -287,9 +287,12 @@
   grid-column: 2;
 }
 
+/* The second line's two parts stand on its top, so a key that wraps grows
+   down from the sub's line instead of carrying the sub to its middle. */
 .crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__sub {
   grid-row: 2;
   grid-column: 1;
+  align-self: start;
 }
 
 .crewlet-bar-list--beside .crewlet-bar-list__label {
@@ -361,6 +364,13 @@
  * stands on the row's second line, under the bar it keys (see the item's
  * grid above), so each name stands under its part rather than under the
  * row's own name.
+ *
+ * ITS FIRST LINE IS THE SUB'S LINE. Both stand on the second line's top, at
+ * the words' leading, so the two are one line however many lines the key
+ * wraps to. Centred on the line instead, a key that wrapped to two lines
+ * carried the sub down between them, 10px further from its name than any
+ * other row's sub, and at the legend's own leading a keyed row stood 3px
+ * taller than a row with a sub alone.
  */
 .crewlet-bar-list__key {
   margin-top: var(--spacing-1);
@@ -370,8 +380,9 @@
 .crewlet-bar-list--beside .crewlet-bar-list__key {
   grid-row: 2;
   grid-column: 2;
-  align-self: center;
+  align-self: start;
   margin-top: 0;
+  line-height: var(--font-line-height-tight);
   pointer-events: none;
 }
 
@@ -609,9 +620,12 @@
   margin-inline-start: auto;
 }
 
+/* A step clear of the dates with the figure's own row gap, so it stands as
+   far under them as a time series' legend stands under its scale: the step
+   on top of that gap put it 12px down where the time series' is 8px. */
 .crewlet-stacked-columns__legend--below {
   grid-column: 1 / -1;
-  margin-top: var(--spacing-2);
+  margin-top: var(--spacing-1);
 }
 
 /* The middle label stands on the column it names (a style property). On a
@@ -992,14 +1006,20 @@
   direction: ltr;
 }
 
-/* The plot's bottom border is the axis line the ticks hang under. */
+/*
+ * The plot's bottom border is the axis line the ticks hang under, and THE
+ * BARS STAND ON IT, as a column chart's stand on its baseline. The room a
+ * focused bar's ring takes (its 2px offset and 2px width) is kept over the
+ * tallest bar here and under the axis by the dates' own margin; padded at
+ * the foot as well, every bar floated 4px over the line it is read against.
+ */
 .crewlet-histogram__plot {
   display: flex;
   align-items: flex-end;
   gap: 1px;
   width: 100%;
   height: var(--crewlet-histogram-height, 96px);
-  padding: var(--spacing-1) 0;
+  padding: var(--spacing-1) 0 0;
   border-bottom: 1px solid var(--color-border-hover);
 }
 
@@ -1031,6 +1051,10 @@ button.crewlet-histogram__bar {
  * bar the reader is pointing at, the selection a click is about to make. The
  * fill stacks from its foot, so the failed share sits at its bottom. Floors in
  * pixels: an empty bucket at two, the smallest real count at three.
+ *
+ * Its value end is rounded at the smallest step and its foot is square, as
+ * every bar and column in the kit is; at the step above it, a histogram on a
+ * page beside a column chart drew rounder bars than the columns next to it.
  */
 .crewlet-histogram__fill {
   display: flex;
@@ -1043,7 +1067,7 @@ button.crewlet-histogram__bar {
   height: var(--crewlet-histogram-fill, 0%);
   min-height: 3px;
   background: var(--color-data-1);
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
@@ -1074,12 +1098,14 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 /*
  * The dates under the bars. Absolutely placed, so a tick sits over the bucket
  * it names; the row states its own height because absolutely placed children
- * contribute none.
+ * contribute none. They stand a step under the axis, as a column chart's
+ * dates stand under its baseline, which is also the room a focused bar's
+ * ring reaches below the axis.
  */
 .crewlet-histogram__axis {
   position: relative;
   height: calc(var(--font-size-2xs) * var(--font-line-height-normal));
-  margin-top: 2px;
+  margin-top: var(--spacing-1);
 }
 
 .crewlet-histogram__tick {

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-KIPAFCVS.js';
-import '../chunk-TLIJG4TP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';