@crewlethq/ui 0.64.0 → 0.64.1

package/dist/{ArtifactCard-F7IVRL3A.css → ArtifactCard-B2QE5CVL.css}

@@ -51,8 +51,12 @@
   padding: var(--spacing-3);
 }
 
+/* THE TILE CENTRES ON THE TITLE'S LINE. The tile is a control step tall and
+   the title one line, so with both at the row's top the tile's middle stood
+   3px under the title's. The body is lowered by half of what the tile is
+   taller than a line, and the tile keeps its corner inset. */
 .crewlet-artifact-card--compact .crewlet-artifact-card__body {
-  padding: 0;
+  padding: max(0px, calc((var(--size-control-md) - 1lh) / 2)) 0 0;
 }
 
 .crewlet-artifact-card__title-row {
@@ -80,24 +84,50 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
+  /* Clips the strip each line lays its first dot in (below). Horizontal
+     only, so nothing above or below a line is cut. */
+  overflow-x: clip;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }
 
+/*
+ * THE FACTS OF ONE LINE ARE A RUN, "Sheet · OPS · v12", each opened by a
+ * quiet dot, so two short words never read as one phrase.
+ *
+ * A LINE NEVER OPENS ON A DOT, as a folder tile's never does (FolderTile.css).
+ * A dot typed before every fact but the first opened each line the run broke
+ * onto with one: "· 14 changes since you looked" under "2 here now". Every
+ * fact carries its dot in the separator's width before it instead, and the run
+ * is drawn that width to the left of the facts' own edge, which clips the
+ * overhang, so the first fact of every line lays its dot in the clipped strip.
+ * The separator is a step of air each side of the dot, the gap and margin the
+ * typed dot stood between.
+ */
 .crewlet-artifact-card__line {
+  --crewlet-artifact-card-separator: var(--spacing-5);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-1) var(--spacing-2);
+  row-gap: var(--spacing-1);
   min-width: 0;
+  margin-inline-start: calc(-1 * var(--crewlet-artifact-card-separator));
 }
 
-/* THE FACTS OF ONE LINE ARE A RUN, "Sheet · OPS · v12", each after the first
-   opened by a quiet dot, so two short words never read as one phrase. */
-.crewlet-artifact-card__line > * + *::before {
+/* Words for assistive technology alone are not facts on the line. */
+.crewlet-artifact-card__line > :not(.crewlet-visually-hidden) {
+  position: relative;
+  padding-inline-start: var(--crewlet-artifact-card-separator);
+}
+
+.crewlet-artifact-card__line > :not(.crewlet-visually-hidden)::before {
   content: '·';
-  margin-inline-end: var(--spacing-2);
+  content: '·' / '';
+  position: absolute;
+  inset-inline-start: 0;
+  width: var(--crewlet-artifact-card-separator);
   color: var(--color-text-tertiary);
+  text-align: center;
 }
 
 .crewlet-artifact-card__owner,
@@ -108,6 +138,13 @@
   min-width: 0;
 }
 
+/* THE STACK'S CUT-OUT IN THE CARD'S OWN GROUND, which both sizes paint. Left
+   at the sheet's colour (the stack's default), every badge wore a band of a
+   darker grey on the card. */
+.crewlet-artifact-card__presence > .crewlet-avatar-stack {
+  --crewlet-avatar-stack-ground: var(--color-surface-subtle);
+}
+
 .crewlet-artifact-card__changes {
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
@@ -127,6 +164,9 @@
  * the preview inside it never moves.
  */
 .crewlet-artifact-card--card {
+  /* THE BADGE'S SQUARE, which the selection box opposite it is drawn in too,
+     and half of which both stand over the preview's foot by. */
+  --crewlet-artifact-card-badge: 32px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -160,6 +200,10 @@
 }
 
 .crewlet-artifact-card__preview {
+  /* How far the badge and the box stand up into the preview from its foot,
+     for a cover whose content runs to its foot (DashboardCover.css) to keep
+     clear of. */
+  --crewlet-artifact-cover-foot: calc(var(--crewlet-artifact-card-badge) / 2);
   position: relative;
   display: flex;
   aspect-ratio: 16 / 9;
@@ -187,7 +231,9 @@
 /*
  * THE KIND'S BADGE STANDS ON THE PREVIEW'S FOOT, half over the picture and
  * half over the card, the glyph in the kind's ink: what the artifact is, read
- * before its title, in the one place every card has it.
+ * before its title, in the one place every card has it. Exactly half, as the
+ * selection box opposite it stands: risen 2px past half, the badge stood 2px
+ * higher than its twin on the same seam.
  */
 .crewlet-artifact-card__badge {
   position: relative;
@@ -196,9 +242,9 @@
   align-items: center;
   justify-content: center;
   align-self: flex-start;
-  width: 32px;
-  height: 32px;
-  margin-top: -18px;
+  width: var(--crewlet-artifact-card-badge);
+  height: var(--crewlet-artifact-card-badge);
+  margin-top: calc(var(--crewlet-artifact-card-badge) / -2);
   margin-bottom: var(--spacing-2);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
@@ -312,8 +358,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--crewlet-artifact-card-badge);
+  height: var(--crewlet-artifact-card-badge);
   box-sizing: border-box;
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-P3QWT5VR.js';
-import '../chunk-PWG3VHRQ.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-R45VM5EX.js';
+import '../chunk-BXCL6P5Z.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-QZLNKLYD.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-NHLNHH4J.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactKindIllustration-KLFL7KBG.css → ArtifactKindIllustration-D2J3HJMJ.css}

@@ -125,6 +125,12 @@
   display: block;
   box-sizing: border-box;
   aspect-ratio: 4 / 3;
+  /* THE RATIO HOLDS whatever the face draws. A box with a ratio grows to its
+     content by default, and the kind's drawing, sized by the tile's width,
+     stood the frame 4.5px past 4:3, so starting points with a schematic face
+     and one with the drawing stood at two heights in one row. The drawing
+     fits the ground instead (`max-height: 100%` above). */
+  min-height: 0;
   padding: 5px;
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-2xl);

package/dist/ArtifactPanel/index.js

@@ -1,11 +1,11 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-3OV26XP4.js';
-import '../chunk-PUJUWLCX.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-FFGEJUAP.js';
+import '../chunk-CLJGFOTV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.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/{ArtifactPanel-TN4FFK2F.css → ArtifactPanel-MR5Z5AVN.css}

@@ -26,7 +26,21 @@
   --crewlet-artifact-panel-width: 36rem;
 }
 
-/* The heading rings when the keyboard reaches it, as it always has here. */
+/*
+ * THE HEADING RINGS WHEN THE KEYBOARD REACHES IT, as it always has here,
+ * inside its own box and round the words alone. The box had no inset of its
+ * own, so the ring crossed the title's first letter and its descenders, and it
+ * grew to the actions, so a one-word title was ringed across the whole head.
+ * It takes a step of inset now, given back by an equal margin so the words
+ * stand where they did, and the width of its words: the actions keep the end
+ * (`margin-left: auto`), and a long title still shrinks and is cut.
+ */
+.crewlet-side-panel__title.crewlet-artifact-panel__title {
+  flex: 0 1 auto;
+  margin: calc(-1 * var(--spacing-1));
+  padding: var(--spacing-1);
+}
+
 .crewlet-side-panel__title.crewlet-artifact-panel__title:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);

package/dist/AsideLayout/index.js

@@ -1,2 +1,2 @@
-export { AsideLayout } from '../chunk-KY65C4XS.js';
+export { AsideLayout } from '../chunk-QOXLP5PE.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AsideLayout-TH5SQZNK.css → AsideLayout-AA3DEJKN.css}

@@ -9,10 +9,12 @@
 }
 
 .crewlet-aside-layout__columns {
+  --crewlet-aside-layout-gap: var(--spacing-7);
+
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
-  gap: var(--spacing-7);
+  gap: var(--crewlet-aside-layout-gap);
 }
 
 /* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
@@ -26,9 +28,11 @@
 }
 
 /* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
-   facts read as about the page rather than as more of it. */
+   facts read as about the page rather than as more of it. The hairline sits
+   midway: the aside takes the gap's own step under it, where the stack's
+   smaller step left it 32px under the main column and 24px over the aside. */
 .crewlet-aside-layout__aside {
-  padding-top: var(--spacing-6);
+  padding-top: var(--crewlet-aside-layout-gap);
   border-top: 1px solid var(--color-border-default);
 }
 

package/dist/AttachmentChip/index.js

@@ -1,5 +1,5 @@
-export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-KYTOEWJD.js';
-import '../chunk-KYIAFNU7.js';
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-3N36CYTU.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/AttachmentChip-RZ6ZCB43.css

@@ -0,0 +1,33 @@
+/*
+ * A file attached to a message: a Tag whose leading mark is the file's
+ * thumbnail, at the glyph's own box so the pill keeps its height, with the
+ * name cut short rather than widening the composer's row.
+ */
+.crewlet-attachment-chip {
+  /* The md glyph's 16px at the normal density, and SCALED WITH THE DENSITY
+     as the pill's own height is. Held at 16px, it filled the 18px pill of a
+     sent chip at the compact density edge to edge, the picture touching the
+     border at the top and the bottom. */
+  --crewlet-attachment-chip-mark: var(--spacing-4);
+  max-width: 14rem;
+}
+
+/*
+ * EVERY STATE'S MARK STANDS IN THE THUMBNAIL'S BOX. The spinner, the alert
+ * and the fallback image glyph are 12px and the thumbnail 16px, so the name
+ * moved 4px to the right, and the chip grew by as much, at the moment an
+ * upload finished and the spinner gave way to the picture. A smaller mark is
+ * centred in the same box instead.
+ */
+.crewlet-attachment-chip .crewlet-tag__icon {
+  justify-content: center;
+  width: var(--crewlet-attachment-chip-mark);
+}
+
+.crewlet-attachment-chip__thumb {
+  display: block;
+  width: var(--crewlet-attachment-chip-mark);
+  height: var(--crewlet-attachment-chip-mark);
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+}

package/dist/AuthLayout/index.js

@@ -1,8 +1,8 @@
-export { AuthLayout } from '../chunk-VTUAQYOC.js';
+export { AuthLayout } from '../chunk-JAFWGVX2.js';
 import '../chunk-7KBNFFM3.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/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-5AQBPHZD.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-BKP6XCAJ.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Avatar-3C2H2WA4.css → Avatar-FDQSCB7A.css}

@@ -41,11 +41,25 @@
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-wide);
-  /* The document's own leading rather than a tight step of the badge's own.
-     The box is a fixed square that centres whatever line it holds, so the ink
-     lands in the same place either way; what the tight step bought was one
-     more number in a component that already sets four. */
-  line-height: var(--font-line-height-body);
+  /* The tracking the last letter carries after it, given back before the
+     first, so the initials centre on their ink rather than on a run with
+     extra room at its end: without it they stood up to 0.75px left of the
+     middle. Text alone takes it; a glyph or a character face is untouched. */
+  text-indent: var(--font-letter-spacing-wide);
+  /*
+   * THE FONT'S OWN LINE, the `normal` keyword (not the `--font-line-height-
+   * normal` token, which is 1.5): a line box exactly as tall as the face's
+   * ascent and descent, with no leading to share out.
+   *
+   * ANY LEADING LANDED THE INITIALS HIGH. The box centres the line, but the
+   * browser gives the leading above the text a whole pixel less than the
+   * leading below it whenever it does not split evenly, so under the body's
+   * 1.45 (and the tight 1.2 before it) the caps were drawn 0.9px over the
+   * middle at 20 and 26px, 1.25px at 32 and 1.1px at 64, measured on the ink.
+   * Geist's ascent and descent straddle its cap height, so with no leading
+   * the caps are centred to within a quarter of a pixel at every step.
+   */
+  line-height: normal;
   text-transform: uppercase;
   user-select: none;
   box-sizing: border-box;
@@ -58,9 +72,17 @@
  * the scale can answer for an arbitrary box; everything else it takes from the
  * rules below exactly as a step does.
  */
+/*
+ * THE SMALLEST STEP IS UNDER THE TYPE RAMP. The ramp's smallest step (11px)
+ * set two wide capitals ("MO", "WM") about 18px wide, the whole of the 20px
+ * circle's content box, so they ran into its outline. 0.45 of the box is 9px,
+ * the face a numeric `size={20}` already computes (0.36 of the box, floored at
+ * 9px, in the component), so the step and its numeric twin draw one badge and
+ * two initials clear the ring by a pixel or more.
+ */
 .crewlet-avatar--xs {
   --crewlet-avatar-size: 20px;
-  font-size: var(--font-size-2xs);
+  font-size: calc(var(--crewlet-avatar-size) * 0.45);
 }
 
 .crewlet-avatar--sm {
@@ -195,39 +217,48 @@
 }
 
 /* The plate an agent's hue is drawn on: the hue's fill, its line round the
-   badge and the hue itself as the character's ink. */
+   badge and the hue itself as the character's ink. The fill is published as
+   `--crewlet-avatar-plate` and painted from it, because it is a TINT (12% of
+   the hue over whatever the badge stands on), and a stack has to lay it over
+   its own ground rather than over the badge behind it (AvatarStack.css). */
 .crewlet-avatar--hue-purple {
-  background: var(--color-node-purple-fill);
+  --crewlet-avatar-plate: var(--color-node-purple-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-purple-line);
   color: var(--color-node-purple);
 }
 
 .crewlet-avatar--hue-cyan {
-  background: var(--color-node-cyan-fill);
+  --crewlet-avatar-plate: var(--color-node-cyan-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-cyan-line);
   color: var(--color-node-cyan);
 }
 
 .crewlet-avatar--hue-green {
-  background: var(--color-node-green-fill);
+  --crewlet-avatar-plate: var(--color-node-green-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-green-line);
   color: var(--color-node-green);
 }
 
 .crewlet-avatar--hue-amber {
-  background: var(--color-node-amber-fill);
+  --crewlet-avatar-plate: var(--color-node-amber-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-amber-line);
   color: var(--color-node-amber);
 }
 
 .crewlet-avatar--hue-rose {
-  background: var(--color-node-rose-fill);
+  --crewlet-avatar-plate: var(--color-node-rose-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-rose-line);
   color: var(--color-node-rose);
 }
 
 .crewlet-avatar--hue-blue {
-  background: var(--color-node-blue-fill);
+  --crewlet-avatar-plate: var(--color-node-blue-fill);
+  background: var(--crewlet-avatar-plate);
   border-color: var(--color-node-blue-line);
   color: var(--color-node-blue);
 }

package/dist/AvatarPicker/index.js

@@ -1,21 +1,21 @@
-export { AvatarPicker } from '../chunk-DHIO6Q75.js';
-import '../chunk-QCVAVAF6.js';
+export { AvatarPicker } from '../chunk-5OVTWY3I.js';
+import '../chunk-2EA2GSA2.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-PZKHBB7D.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/{AvatarPicker-PREY36MG.css → AvatarPicker-POOJUOKC.css}

@@ -37,6 +37,20 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
   color: var(--color-text-primary);
 }
 
+/*
+ * THE PANEL HOLDS THE WHOLE PICKER. The popover's own caps, 380 by 360, are
+ * sized for a panel of words; this one is six tiles and six hue chips across
+ * and five rows of tiles down, and inside those caps the sixth hue wrapped
+ * onto a line of its own and the panel scrolled 25px to reach it. It takes the
+ * room its content asks for, held inside the viewport, and only a viewport
+ * smaller than the picker wraps or scrolls it. Two classes, so it outweighs
+ * the popover's one-class rule whichever order the stylesheets bundle in.
+ */
+.crewlet-popover.crewlet-avatar-picker__panel {
+  max-width: calc(100vw - var(--spacing-4) * 2);
+  max-height: calc(100dvh - var(--spacing-4) * 2);
+}
+
 .crewlet-avatar-picker__body {
   display: grid;
   gap: var(--spacing-2);

package/dist/{AvatarStack-GEJBNV7E.css → AvatarStack-7I3P7LCK.css}

@@ -36,6 +36,26 @@
   box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
 }
 
+/*
+ * A BADGE IN FRONT HIDES THE ONE BEHIND IT. A hue's plate is a tint, 12% of
+ * the hue over whatever the badge stands on, and in a stack that is partly
+ * the badge before it: its outline, its ring and its face showed through
+ * every overlap. So a stacked plate is laid over the stack's own ground, the
+ * colour it reads on beside the stack, and the cut-out holds under the badge
+ * as well as round it.
+ *
+ * Only a plate that publishes `--crewlet-avatar-plate` (a hue's, Avatar.css)
+ * is repainted: without one this declaration is invalid where it is computed,
+ * and the badge keeps the opaque ground its own rule gave it. A member, or the
+ * badge a member wraps (`PresenceStack` wraps each one in its button).
+ */
+.crewlet-avatar-stack > .crewlet-avatar-stack__member,
+.crewlet-avatar-stack > .crewlet-avatar-stack__member > .crewlet-avatar {
+  background-image:
+    linear-gradient(var(--crewlet-avatar-plate), var(--crewlet-avatar-plate)),
+    linear-gradient(var(--crewlet-avatar-stack-ground), var(--crewlet-avatar-stack-ground));
+}
+
 /* The design's 6px, a little under a third of its 22px badge: enough that the
    stack is one mark, little enough that every monogram stays readable. */
 .crewlet-avatar-stack > .crewlet-avatar-stack__member + .crewlet-avatar-stack__member {
@@ -66,7 +86,9 @@
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
-  line-height: var(--font-line-height-tight);
+  /* The face's own line, as the badge beside it sets it (Avatar.css): any
+     leading split unevenly and drew the count 0.9px over the middle. */
+  line-height: normal;
   white-space: nowrap;
   user-select: none;
 }

package/dist/BrandChip/index.js

@@ -1,2 +1,2 @@
-export { BrandChip } from '../chunk-ZH77BXMA.js';
+export { BrandChip } from '../chunk-UH44L7OJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{BrandChip-SQWBC2WU.css → BrandChip-7PBEYDTG.css}

@@ -18,6 +18,10 @@
   color: var(--color-text-secondary);
   font-size: var(--font-size-compact);
   font-weight: var(--font-weight-medium);
+  /* Its own leading, so the control step sets the height. Inheriting the
+     page's 1.5, the name's 19.5px line held the chip at 25.5px against the
+     compact density's 24px step, and the plate no longer sat in its round end. */
+  line-height: var(--font-line-height-tight);
   text-decoration: none;
   transition:
     border-color var(--motion-duration-fast) var(--motion-easing-out),

package/dist/Breadcrumb/index.js

@@ -1,3 +1,3 @@
-export { Breadcrumb } from '../chunk-KW6KCVM7.js';
-import '../chunk-FYTIJM2T.js';
+export { Breadcrumb } from '../chunk-M52HLPOG.js';
+import '../chunk-HBDA76EZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Breadcrumb-YMWVM3SV.css → Breadcrumb-55VBXIN4.css}

@@ -17,13 +17,24 @@
  * Past the whole bar the trail SCROLLS rather than clipping as a box: the
  * ancestors never shrink, so once they alone are wider than the bar there is
  * nothing left to ellipsise, and a clip lands wherever the pixels ran out.
+ *
+ * ROOM FOR A LINK'S RING (`--crewlet-breadcrumb-ring-room`). A scrollport
+ * clips whatever is drawn outside it, so a crumb draws its ring inside its
+ * own box; with no padding there, the ring covered the outer 2px of the
+ * crumb's glyph and of its last letter. A link takes the room as padding
+ * inside a negative margin of the same length, and the trail takes it at its
+ * start the same way, so the ring stands clear of the words and nothing
+ * moves: every word and glyph keeps its place.
  */
 .crewlet-breadcrumb {
+  --crewlet-breadcrumb-ring-room: var(--spacing-1);
   display: flex;
   align-items: center;
   gap: 2px;
   flex: 1 100 0;
   min-width: min(100%, max(20ch, var(--crewlet-breadcrumb-floor, 0px)));
+  margin-inline-start: calc(var(--crewlet-breadcrumb-ring-room) * -1);
+  padding-inline-start: var(--crewlet-breadcrumb-ring-room);
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -88,6 +99,13 @@ svg.crewlet-breadcrumb__separator {
   transition: color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* The ring's room (see `.crewlet-breadcrumb`): a link's box reaches into the
+   space around it, and its words stay where they were. */
+a.crewlet-breadcrumb__crumb {
+  margin-inline: calc(var(--crewlet-breadcrumb-ring-room) * -1);
+  padding-inline: var(--crewlet-breadcrumb-ring-room);
+}
+
 a.crewlet-breadcrumb__crumb:hover {
   color: var(--color-text-primary);
   text-decoration: none;

package/dist/CalendarGrid/index.js

@@ -1,2 +1,2 @@
-export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-EE3DJMSQ.js';
 import '../chunk-ODEQTPFM.js';