@crewlethq/ui 0.63.0 → 0.64.1

package/dist/{TagGroup-NAXTJHDS.css → TagGroup-VGL7ZFBK.css}

@@ -8,6 +8,10 @@
  */
 
 .crewlet-tag-group {
+  /* The tag's own 9px inside each round end, for the two members drawn here
+     rather than by a Tag: the count and the overflow control. */
+  --crewlet-tag-group-pad: calc(var(--spacing-2) + var(--spacing-1) / 4);
+
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -26,27 +30,51 @@
 }
 
 /* ONE LINE (overflow="fit"): what wraps is measured and left out, so the
-   line is clipped only for the instant before the count replaces it. */
+   line is clipped only for the instant before the count replaces it.
+   The clip is the TALLEST tag's height, the md step's small control (which
+   is never under the 24px floor a tag that acts takes): at the floor alone it
+   cut 2px off the foot of every md tag at the normal density. */
 .crewlet-tag-group--fit {
   flex-wrap: wrap;
   overflow: hidden;
-  max-height: max(24px, calc(24px * var(--density, 1)));
+  max-height: var(--size-control-sm);
+}
+
+/*
+ * The count stands at the end of the line of tags, so it takes the tag's own
+ * pill: its round ends, the 9px inside each end and the caption type, at the
+ * HEIGHT OF THE LINE it ends (its item stretches to the line, and the chip to
+ * its item), so it is the height of the tags beside it at every step and
+ * every density. It was a fixed 20px square-cornered badge at the step below:
+ * a different kind of mark ending a row of pills, 2px short of the default
+ * pill and 2px over a sheet cell's 18px one.
+ */
+.crewlet-tag-group__item[data-count] {
+  align-self: stretch;
 }
 
 .crewlet-tag-group__count {
   display: inline-flex;
   align-items: center;
-  height: max(20px, calc(20px * var(--density, 1)));
-  padding: 0 var(--spacing-1);
-  border-radius: var(--radius-xs);
+  box-sizing: border-box;
+  padding: 0 var(--crewlet-tag-group-pad);
+  border-radius: var(--radius-pill);
   background: var(--color-surface-subtle);
   color: var(--color-text-secondary);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
+  line-height: 1;
   white-space: nowrap;
 }
 
+/* Ending a row of the 18px count pills (a sheet cell), it takes that step's
+   micro type and its tighter ends, as the pills beside it do. */
+.crewlet-tag-group:has(.crewlet-tag--xs) .crewlet-tag-group__count {
+  padding: 0 calc(var(--spacing-1) * 1.5);
+  font-size: var(--font-size-2xs);
+}
+
 .crewlet-tag-group__item {
   display: inline-flex;
   min-width: 0;
@@ -54,22 +82,25 @@
 }
 
 /*
- * It wears the tag's own face: the badge radius, the badge type and the badge
- * weight, so the row reads as one set with a dashed member rather than as six
- * tags and a control. The height is the 24px target floor rather than the
- * badge's 20px step, for the same reason a tag that acts takes it.
+ * It wears the tag's own face: the pill's round ends, the 9px inside each
+ * end, the caption type and the medium weight, so the row reads as one set
+ * with a dashed member rather than as six tags and a control. The height is
+ * the 24px target floor rather than the pill's 22px step, for the same reason
+ * a tag that acts takes it. It kept the badge's 4px corners and the step
+ * below when the tag became the design's pill, and ended a row of pills on a
+ * square-cornered box.
  */
 .crewlet-tag-group__more {
   display: inline-flex;
   align-items: center;
   height: max(24px, calc(24px * var(--density, 1)));
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-tag-group-pad);
   border: 1px dashed var(--color-border-hover);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-pill);
   background: transparent;
   color: var(--color-text-secondary);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   line-height: 1;
   white-space: nowrap;

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-VSTD65SL.js';
+export { TagsInput } from '../chunk-HEIOLITO.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.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/{TagsInput-CLFHP6I2.css → TagsInput-MZXEHKJD.css}

@@ -31,6 +31,19 @@
   gap: var(--spacing-1);
 }
 
+/*
+ * AN ORDERED CHAIN SPACES ITS CHIPS TWICE THE LIST'S GAP APART, so each Move
+ * pair reads as its own tag's. The pair's chevrons stand well inside their
+ * targets, so at the list's gap a pair's glyph boxes sat 11px from their own
+ * tag and 15px from the tag before it, and belonged to neither. The space is
+ * added BETWEEN chips rather than taken out of one: the step inside a chip is
+ * what keeps a focused Move control's ring and a hovered one's fill clear of
+ * the tag beside it, which paints over anything that reaches into it.
+ */
+.crewlet-tags-input__chips:has([data-move]) {
+  column-gap: var(--spacing-4);
+}
+
 .crewlet-tags-input__field {
   position: relative;
   width: 100%;

package/dist/ThemeGallery/index.js

@@ -1,7 +1,7 @@
-export { ThemeGallery } from '../chunk-ESUZ27TS.js';
-import '../chunk-MNFU2RNT.js';
+export { ThemeGallery } from '../chunk-LWFOX3PB.js';
+import '../chunk-3XQUEF5C.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/ThemeSwatch/index.js

@@ -1,2 +1,2 @@
-export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
+export { ThemeSwatch } from '../chunk-3XQUEF5C.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ThemeSwatch-4DL457ZB.css → ThemeSwatch-KAA2AEUM.css}

@@ -11,6 +11,11 @@
  */
 
 .crewlet-theme-swatch {
+  /* The sheet's one inset at the card size: its margin off the half and its
+     padding round the card, named so the card's corner can be the sheet's
+     less it. */
+  --crewlet-theme-swatch-inset: 3px;
+
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: minmax(0, 1fr);
@@ -88,12 +93,19 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  margin: 3px 3px 3px 0;
-  padding: 3px;
+  margin: var(--crewlet-theme-swatch-inset) var(--crewlet-theme-swatch-inset) var(--crewlet-theme-swatch-inset) 0;
+  padding: var(--crewlet-theme-swatch-inset);
   border-radius: var(--radius-xs);
   background: var(--crewlet-swatch-sheet);
 }
 
+/*
+ * CONCENTRIC WITH THE SHEET: the sheet's corner less the inset between them.
+ * At the sheet's own corner the card stood three pixels in on the sides and
+ * over four on the diagonal, so its corner read as a second, looser curve.
+ * The pane's sheet pads its card by more than its own corner, so the pane
+ * keeps the card's step below.
+ */
 .crewlet-theme-swatch__card {
   display: flex;
   flex: 1;
@@ -102,7 +114,7 @@
   min-width: 0;
   padding: 4px;
   border: 1px solid var(--crewlet-swatch-hairline);
-  border-radius: var(--radius-xs);
+  border-radius: calc(var(--radius-xs) - var(--crewlet-theme-swatch-inset));
   background: var(--crewlet-swatch-card);
 }
 
@@ -117,21 +129,32 @@
 /*
  * THE ACTION GIVES WAY BEFORE IT DISAPPEARS. A narrow thumbnail has less room
  * than the action and the four states take, so the action narrows to a floor
- * and the row clips its last states, rather than the action, which is what a
+ * and the row drops its last states, rather than the action, which is what a
  * theme is chosen for, shrinking to nothing.
+ *
+ * A STATE IS DROPPED WHOLE, never drawn in half. The row wraps, and is one
+ * line tall (the action's height), so a state that does not fit beside the
+ * action at its floor moves to a second line the row hides. Clipped instead,
+ * the last state was cut through the middle at a gallery card's width, and
+ * the two halves of one thumbnail cut it at different places. The action
+ * starts at its floor and grows into the room left over, up to its full
+ * width, so it still gives way first.
  */
 .crewlet-theme-swatch__row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 2px;
+  height: 6px;
   overflow: hidden;
 }
 
 /* The primary action: the accent's fill. */
 .crewlet-theme-swatch__action {
   display: block;
-  flex: 0 1 14px;
+  flex: 1 0 6px;
   min-width: 6px;
+  max-width: 14px;
   height: 6px;
   margin-right: auto;
   border-radius: var(--radius-pill);
@@ -194,6 +217,7 @@
   gap: 7px;
   justify-content: flex-start;
   padding: 8px;
+  border-radius: var(--radius-xs);
 }
 
 .crewlet-theme-swatch__item {
@@ -232,6 +256,7 @@
   flex: none;
   place-items: center;
   width: 40%;
+  max-width: none;
   height: 16px;
   margin-right: 0;
   border-radius: var(--radius-xs);

package/dist/ThemeSwitcher/index.js

@@ -1,19 +1,19 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-6IGIYOTV.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-7EOUVWGQ.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-OOC7Q67K.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-25AZQ3GZ.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-5KRRJNQO.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-MLDTLZAO.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeToggle/index.js

@@ -1,6 +1,6 @@
-export { ThemeToggle } from '../chunk-RLFPBRN4.js';
+export { ThemeToggle } from '../chunk-IPMJGK2Q.js';
 import '../chunk-Z24ZUSTX.js';
 import '../chunk-ZXXDZJQN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeRangePicker/index.js

@@ -1,23 +1,23 @@
-export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-S2VMOITT.js';
-import '../chunk-KVWZDCTQ.js';
+export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-PQWNK3N7.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-OOC7Q67K.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-25AZQ3GZ.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-LODRX4FU.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/TimeWindowPicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-SG2375ZY.js';
-import '../chunk-XQZ6EWOE.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-WXLQJUGO.js';
+import '../chunk-VK45YJLH.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-GXQ3B46I.js';
+import '../chunk-EE3DJMSQ.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
@@ -12,7 +12,7 @@ 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/{TimeWindowPicker-I3HXC74I.css → TimeWindowPicker-YZPKNZZI.css}

@@ -30,7 +30,8 @@
 
 .crewlet-time-window--sm {
   min-height: var(--size-control-sm);
-  padding: 0 var(--spacing-2);
+  /* The chevron one step inside the leading inset: see DateTimePicker's. */
+  padding: 0 var(--spacing-1) 0 var(--spacing-2);
   font-size: var(--font-size-xs);
 }
 
@@ -252,13 +253,25 @@ svg.crewlet-time-window__tick {
   min-width: 0;
 }
 
+/*
+ * THE MONTH IS CENTRED OVER ITS GRID. One end of each head holds the step
+ * button and the other an empty slot, and spread along a flex row the title
+ * was centred in the room the button left: 13px off the grid's middle, away
+ * from the button. Two equal outer columns put it on the grid's own centre
+ * line whatever the button measures.
+ */
 .crewlet-time-window__calendar-head {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-1);
 }
 
+/* The next-month button, in the last column, stands at the grid's far edge. */
+.crewlet-time-window__calendar-head > :last-child {
+  justify-self: end;
+}
+
 .crewlet-time-window__calendar-title {
   font-size: var(--font-size-compact);
   font-weight: var(--font-weight-semibold);
@@ -302,7 +315,12 @@ svg.crewlet-time-window__tick {
 .crewlet-time-window__masked {
   display: inline-flex;
   align-items: center;
-  flex: 1;
+  /*
+   * FROM ITS OWN WIDTH, then an equal share of what is left. An equal share
+   * of the whole row (`flex: 1`) gave the date and the time one width, and
+   * the date is two characters longer: it lost its last digit to the clip.
+   */
+  flex: 1 1 auto;
   min-width: 0;
   min-height: var(--size-control-sm);
   padding: 0 var(--spacing-2);

package/dist/Timeline/index.js

@@ -1,3 +1,3 @@
-export { Timeline, TimelineItem } from '../chunk-Z6X3F4H6.js';
+export { Timeline, TimelineItem } from '../chunk-4MJN2KN6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Timeline-27SYKOFX.css → Timeline-PGIZIODK.css}

@@ -11,6 +11,10 @@
   /* The node's diameter, which the rail's offset and its left edge both read
      off, so moving the node is one edit rather than three. */
   --crewlet-timeline-node-size: 18px;
+  /* How far the node stands below the top of its step, which centres it on a
+     first line of body prose. A step whose first line stands lower, or is
+     taller, sets this one value, and the node and its rail move together. */
+  --crewlet-timeline-node-offset: 2px;
   --crewlet-timeline-pulse-period: 1.8s;
   display: flex;
   flex-direction: column;
@@ -42,10 +46,26 @@
   background: var(--color-surface-inset);
 }
 
+/*
+ * A TINTED STEP INSETS ITS NODE as it already insets its end: with no start
+ * pad the node was drawn against the tint's edge. Every step of the ledger
+ * takes it, tinted or not, so the nodes still stand in one column; a ledger
+ * with no tint keeps its nodes on its own edge.
+ */
+.crewlet-timeline--alternating .crewlet-timeline__item {
+  padding-inline-start: var(--spacing-2);
+}
+
+/*
+ * The rail's own padding stands the node down rather than a margin on the
+ * node, so the offset is resolved in the step's own type (the node sets a
+ * smaller one): an offset written in `lh` reads the line beside it.
+ */
 .crewlet-timeline__rail {
   position: relative;
   display: flex;
   justify-content: center;
+  padding-top: var(--crewlet-timeline-node-offset);
 }
 
 .crewlet-timeline__node {
@@ -56,7 +76,6 @@
   position: relative;
   width: var(--crewlet-timeline-node-size);
   height: var(--crewlet-timeline-node-size);
-  margin-top: 2px;
   border-radius: var(--radius-pill);
   background: var(--color-surface-inset);
   border: 1px solid var(--color-border-default);
@@ -72,11 +91,21 @@
  * on a step only one row tall.
  */
 .crewlet-timeline__rail::after {
+  --crewlet-timeline-rail-start: calc(var(--crewlet-timeline-node-offset) + var(--crewlet-timeline-node-size) + 2px);
   content: '';
   position: absolute;
   left: calc(50% - 1px);
-  top: calc(var(--crewlet-timeline-node-size) + 4px);
+  top: var(--crewlet-timeline-rail-start);
   bottom: 0;
+  /*
+   * In WHOLE PIXELS, rounded down. A step whose content is one line ends a
+   * fraction of a pixel under the node (prose's 22.1px line against the
+   * node's 22px), and that fraction was drawn as a grey speck under the
+   * number; rounded down it is no rail at all, and every longer rail ends
+   * within a pixel of where it did. Where round() is not known the height is
+   * dropped and the rail runs to `bottom` as before.
+   */
+  height: round(down, calc(100% - var(--crewlet-timeline-rail-start)), 1px);
   width: 2px;
   border-radius: var(--radius-pill);
   /* The default border step, not the subtle one: this line is the thing that

package/dist/Toaster/index.js

@@ -1,4 +1,4 @@
-export { ToastProvider, Toaster, toasterInsetStyle, useToast } from '../chunk-XQBLBJN4.js';
+export { ToastProvider, Toaster, toasterInsetStyle, useToast } from '../chunk-SZFKGH2W.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';

package/dist/{Toaster-MX7TBMC3.css → Toaster-OCW7W3FJ.css}

@@ -61,6 +61,13 @@
   --crewlet-toast-wash: var(--color-surface-pressed);
   /* 14px at the normal density, and the corner the dismiss sits in beside it. */
   --crewlet-toast-inset: calc(var(--spacing-3) + var(--spacing-1) / 2);
+  /*
+   * ONE LINE OF THE STRIP'S TEXT, the line its mark and its dismiss are both
+   * centred on: the title's when there is one, else the message's first. It is
+   * spelled from the same two steps as the font and the leading below, so the
+   * three cannot drift apart.
+   */
+  --crewlet-toast-line: calc(var(--font-size-compact) * var(--font-line-height-body));
 
   pointer-events: auto;
   position: relative;
@@ -103,10 +110,17 @@
   z-index: var(--z-index-raised);
 }
 
+/*
+ * The mark stands in a box ONE LINE TALL with its glyph centred in it, so a
+ * 20px mark beside an 18.85px line overflows the box evenly instead of
+ * hanging from its top. A 1px drop from the line's top edge used to put its
+ * centre 1.6px under the words it marks, and 5px under the dismiss.
+ */
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
-  margin-top: 1px;
+  align-items: center;
+  height: var(--crewlet-toast-line);
   color: var(--crewlet-toast-mark);
 }
 
@@ -214,13 +228,17 @@
 /* The dismiss sits absolute in the corner so a multi-line message flows
    under it rather than around it, and after the body in the document, so it
    is drawn over the words at the same raised step. 24px square: the smallest
-   target WCAG 2.2 accepts. */
+   target WCAG 2.2 accepts.
+
+   ITS CENTRE IS ON THE FIRST LINE, the one the mark is centred on, rather than
+   a fixed step from the corner: at the 8px step it stood 3.4px above the title
+   it closes, and the mark, the words and the dismiss read as three heights. */
 .crewlet-toast__dismiss {
   position: absolute;
-  top: var(--spacing-2);
+  top: calc(var(--crewlet-toast-inset) + (var(--crewlet-toast-line) - var(--size-target-min)) / 2);
   right: var(--spacing-2);
-  width: 24px;
-  height: 24px;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/TreeCanvas/index.js

@@ -1,14 +1,14 @@
-export { TreeCanvas } from '../chunk-5NJ4BIUA.js';
+export { TreeCanvas } from '../chunk-KIJJD4YD.js';
 import '../chunk-MY374UUD.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/{TreeCanvas-QA3PDFTK.css → TreeCanvas-5FPK4CII.css}

@@ -267,22 +267,38 @@
   position: relative;
 }
 
+/*
+ * CLEAR OF THE RING ITS HOLDER DRAWS. The strip is raised and opaque, and
+ * drawn flush in the corner it covered the corner of the very rings that say
+ * where the reader is: a selected row's accent ring and a focused row's ring
+ * were cut away for the strip's whole width along the top and its whole height
+ * down the side. So it stands in by the inset ring's depth (the same offset
+ * that draws the ring inside the edge), on a corner concentric with the row's,
+ * and both rings run unbroken round it. A card's own strip is inside the
+ * card's 1px border, which the ring already covers, so it stands in one pixel
+ * less (below).
+ */
 .crewlet-tree-canvas__actions {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: calc(-1 * var(--size-focus-ring-inset-offset));
+  right: calc(-1 * var(--size-focus-ring-inset-offset));
   z-index: var(--z-index-raised);
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   padding: var(--spacing-1);
-  border-radius: var(--radius-lg);
+  border-radius: calc(var(--radius-lg) + var(--size-focus-ring-inset-offset));
   background: var(--color-surface-subtle);
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+.crewlet-tree-canvas__card > .crewlet-tree-canvas__actions {
+  top: calc(-1 * var(--size-focus-ring-inset-offset) - 1px);
+  right: calc(-1 * var(--size-focus-ring-inset-offset) - 1px);
+}
+
 .crewlet-tree-canvas__card:hover > .crewlet-tree-canvas__actions,
 .crewlet-tree-canvas__card:focus-within > .crewlet-tree-canvas__actions,
 .crewlet-tree-canvas__card:has([aria-selected='true']) > .crewlet-tree-canvas__actions,

package/dist/TreeGrid/TreeGrid.d.ts

@@ -39,7 +39,15 @@ export interface TreeGridColumn {
      * of it and is still the only thing a screen reader has (an actions column).
      */
     headerHidden?: boolean | undefined;
-    /** This column's grid track. One flexible column by default. */
+    /**
+     * This column's grid track. One flexible column by default.
+     *
+     * A LENGTH OR A FRACTION, NEVER A SIZE THE CONTENT DECIDES. Every row is a
+     * grid of its own on this template, so `auto`, `max-content` or
+     * `fit-content()` is sized row by row, and each row then starts its columns
+     * somewhere else. A column of one control is the control and the cell's
+     * padding on either side: `calc(var(--size-control-sm) + var(--spacing-2) * 2)`.
+     */
     width?: string | undefined;
 }
 /** A row that holds only controls, such as an inline Add row. */

package/dist/TreeGrid/index.js

@@ -1,9 +1,9 @@
-export { TreeGrid } from '../chunk-Q4DNAO3O.js';
+export { TreeGrid } from '../chunk-IL3XLDW7.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-OMV5W53A.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';