@crewlethq/ui 0.63.0 → 0.64.1

package/dist/ConflictNote-OP64JJ6T.css

@@ -0,0 +1,56 @@
+/* ConflictNote: a refused write's sentence in the danger ink, with its glyph
+   so the colour is never the only carrier, and its controls beside it. */
+.crewlet-conflict-note {
+  display: flex;
+  /*
+   * THE GLYPH SITS ON THE SENTENCE'S FIRST LINE, the answer a Callout gives
+   * its icon. Centred on the whole row, a sentence that wrapped to two lines
+   * left the glyph floating between them, ten pixels under the line it marks.
+   */
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  max-width: 40rem;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+/*
+ * WITH CONTROLS, ONE LINE OF TEXT CENTRES ON THEM, as it does in a Callout:
+ * the sentence and its glyph are padded by half of what a small control is
+ * taller than a line, so a one-line note still reads as one row.
+ */
+.crewlet-conflict-note:has(.crewlet-conflict-note__actions) {
+  --crewlet-conflict-note-lead: max(0px, calc((var(--size-control-sm) - 1lh) / 2));
+}
+
+/* One line tall, so the drawing centres on the first line at any leading. */
+.crewlet-conflict-note__glyph {
+  flex: none;
+  block-size: 1lh;
+  margin-block-start: var(--crewlet-conflict-note-lead, 0px);
+}
+
+/* The sentence and its controls: one row while there is room, and the
+   controls under the words, at the start of their column, when there is not. */
+.crewlet-conflict-note__body {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-conflict-note__text {
+  flex: 1 1 16rem;
+  min-width: 0;
+  padding-block: var(--crewlet-conflict-note-lead, 0px);
+}
+
+.crewlet-conflict-note__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-self: center;
+  gap: var(--spacing-1);
+}

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-BSAQE7PO.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-KWLH45YC.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,12 +1,12 @@
-export { ContrastHelp } from '../chunk-WSV3MBOE.js';
-import '../chunk-BSAQE7PO.js';
+export { ContrastHelp } from '../chunk-IO374IX6.js';
+import '../chunk-KWLH45YC.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.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/Copyable/index.js

@@ -1,8 +1,8 @@
-export { CopyButton, Copyable } from '../chunk-IOTN23FZ.js';
+export { CopyButton, Copyable } from '../chunk-IYG4ETAQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Copyable-5PNRFOLS.css → Copyable-IS3MHMPL.css}

@@ -60,8 +60,17 @@
 
 /* ---- chip -------------------------------------------------------------- */
 
+/*
+ * The chip states its own line, the document's leading rounded to a whole
+ * pixel as the keycap and the key chip take it (see Kbd.css). Inherited, it
+ * was whatever the text around it said: 17.95px on the document's own line
+ * and 17.4px inside a tighter sentence, where Chromium floored the leading
+ * above the figures to nothing and they stood nearly a pixel high in their
+ * chip.
+ */
 .crewlet-copyable--chip .crewlet-copyable__value {
   font-size: var(--font-size-2xs);
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
   background: var(--color-surface-inset);
   padding: 1px var(--spacing-1);
   border-radius: var(--radius-xs);

package/dist/Count/index.js

@@ -1,3 +1,3 @@
-export { Count } from '../chunk-5KRRJNQO.js';
+export { Count } from '../chunk-MLDTLZAO.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Count-ZVCJ6VPD.css → Count-ZJ6ID4ZU.css}

@@ -16,5 +16,10 @@
   font-weight: var(--font-weight-medium);
   /* A count that ticks up must not shift the heading beside it. */
   font-variant-numeric: tabular-nums;
-  line-height: var(--font-line-height-normal);
+  /* The body leading rounded to a whole pixel, the line Kbd, KeyChip and the
+     Copyable chip take. The 1.5 leading drew an 18.5px pill beside those 18px
+     pills, and Chromium floors the share of a fractional leading above the
+     text, so the figures stood high in it. A whole 16px line splits evenly
+     and the pill lands on 18px with its figures on its middle. */
+  line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
 }

package/dist/CursorFlag/index.js

@@ -1,3 +1,3 @@
-export { CursorFlag } from '../chunk-3BYIWOTV.js';
-import '../chunk-I6POAB4V.js';
+export { CursorFlag } from '../chunk-MMCYH5LB.js';
+import '../chunk-EFX2YC5T.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DashboardCover-KYGYMRKW.css → DashboardCover-PWXH4GNW.css}

@@ -5,9 +5,16 @@
  * the shared .crewlet-artifact-cover in ArtifactCover.css.
  */
 
+/*
+ * ONE STEP OF AIR ROUND THE FIGURES AND BETWEEN THEM, which also keeps a
+ * figure's corner concentric with the card's: the preview's 16px corner less
+ * this inset is the 8px corner a figure takes. At a 12px inset the figures'
+ * corners stood 2px wide of the card's curve.
+ */
 .crewlet-dashboard-cover {
+  --crewlet-dashboard-cover-inset: var(--spacing-2);
   height: 100%;
-  padding: var(--spacing-3);
+  padding: var(--crewlet-dashboard-cover-inset);
   color: var(--color-text-tertiary);
 }
 
@@ -55,29 +62,6 @@
 .crewlet-dashboard-cover__value {
   flex: none;
   max-width: 50%;
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-lg);
-  font-variant-numeric: tabular-nums;
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-line-height-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-dashboard-cover__source {
-  overflow: hidden;
-  font-size: var(--font-size-xs);
-  line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-dashboard-cover__label {
-  color: var(--color-text-secondary);
-}
-
-.crewlet-dashboard-cover__value {
   overflow: hidden;
   color: var(--color-text-primary);
   font-size: var(--font-size-xl);
@@ -101,6 +85,19 @@
   gap: var(--spacing-2);
 }
 
+/*
+ * CLEAR OF THE CARD'S BADGE. In a gallery card the kind's badge, and the
+ * selection box opposite it, stand up into the preview from its foot
+ * (`--crewlet-artifact-cover-foot`, set by ArtifactCard), and the figures and
+ * the schematic fill the cover down to its foot, so the badge was drawn over
+ * the corner of the last row. Their bottom inset is measured from the badge's
+ * top edge instead; on its own the cover keeps one inset all round.
+ */
+.crewlet-dashboard-cover--stats,
+.crewlet-dashboard-cover--layout {
+  padding-bottom: calc(var(--crewlet-dashboard-cover-inset) + var(--crewlet-artifact-cover-foot, 0px));
+}
+
 .crewlet-dashboard-cover__block {
   box-sizing: border-box;
   display: flex;

package/dist/DataGrid/index.js

@@ -1,7 +1,7 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-TXA3HMWP.js';
-import '../chunk-KIPAFCVS.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-4W7F3JEK.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
@@ -9,7 +9,7 @@ import '../chunk-RTPQDNW3.js';
 import '../chunk-7QTPJDRF.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/{DataGrid-VNGQESJA.css → DataGrid-QYORTTHI.css}

@@ -17,6 +17,11 @@
  */
 
 .crewlet-data-grid {
+  /* The inset at the grid's two outer edges: its first and last column's, and
+     that of every band that spans it (a band's head and foot, the foot). The
+     cells' own step on a grid standing alone; the card's own in a card. */
+  --crewlet-data-grid-edge: var(--spacing-3);
+
   display: grid;
   min-width: 0;
   border: 1px solid var(--color-border-hover);
@@ -30,10 +35,16 @@
  * or not): the card is the frame, so the grid draws none of its own and one
  * rule parts it from the card's head. Under the card's header, the header's
  * own rule is that one.
+ *
+ * AND ITS OUTER CELLS TAKE THE CARD'S INSET, as Table's do: a card has one
+ * left edge and its header sets it (Card.css). At the cells' own step every
+ * row stood 4px outside the card's title.
  */
 .crewlet-data-grid[data-flush],
 .crewlet-card > .crewlet-data-grid,
 .crewlet-card__body > .crewlet-data-grid {
+  --crewlet-data-grid-edge: var(--spacing-4);
+
   border: 0;
   border-top: 1px solid var(--color-border-default);
   border-radius: var(--radius-none);
@@ -78,6 +89,37 @@
   z-index: var(--z-index-sticky);
 }
 
+/*
+ * A cell's inline inset: the cells' own step between two columns, and the
+ * grid's edge (above) on the outer side of its first and last column.
+ */
+.crewlet-data-grid__th,
+.crewlet-data-grid__cell {
+  --crewlet-data-grid-cell-start: var(--spacing-3);
+  --crewlet-data-grid-cell-end: var(--spacing-3);
+}
+
+.crewlet-data-grid__th:first-child,
+.crewlet-data-grid__cell:first-child {
+  --crewlet-data-grid-cell-start: var(--crewlet-data-grid-edge);
+}
+
+.crewlet-data-grid__th:last-child,
+.crewlet-data-grid__cell:last-child {
+  --crewlet-data-grid-cell-end: var(--crewlet-data-grid-edge);
+}
+
+/*
+ * EXCEPT THE SELECTION BOX, which keeps the cells' own step: its 16px box sits
+ * 4px inside its 24px target, so at 12px the box itself already stands on a
+ * card's 16px line. The edge would have put it 4px past the card's title, and
+ * past the 48px track its column is drawn in.
+ */
+.crewlet-data-grid__th:first-child:has(.crewlet-checkbox),
+.crewlet-data-grid__cell:first-child:has(> .crewlet-data-grid__select) {
+  --crewlet-data-grid-cell-start: var(--spacing-3);
+}
+
 /*
  * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
  * uppercase. A sortable head is a button with its chrome reset; the reset
@@ -87,7 +129,8 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding-block: var(--spacing-2);
+  padding-inline: var(--crewlet-data-grid-cell-start) var(--crewlet-data-grid-cell-end);
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-medium);
   text-transform: uppercase;
@@ -102,6 +145,21 @@
   cursor: default;
 }
 
+/*
+ * THE SELECTION COLUMN'S HEAD holds a 24px box rather than a label, and at
+ * the head's own step it stood the head 41.5px tall over 36px rows. It takes
+ * the cells' step, so the head keeps the row floor with or without the box;
+ * and the box sits on the top of its line rather than on its baseline, which
+ * added half a pixel under it.
+ */
+.crewlet-data-grid__th:has(.crewlet-checkbox) {
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-data-grid__th .crewlet-checkbox {
+  vertical-align: top;
+}
+
 /* A sortable head's control fills the head: the whole cell is the target. */
 .crewlet-data-grid__sort {
   all: unset;
@@ -110,8 +168,11 @@
   gap: var(--spacing-1);
   flex: 1 1 auto;
   min-width: 0;
-  margin: calc(-1 * var(--spacing-2)) calc(-1 * var(--spacing-3));
-  padding: var(--spacing-2) var(--spacing-3);
+  /* Its head's own padding, taken back and given again, edge included. */
+  margin-block: calc(-1 * var(--spacing-2));
+  margin-inline: calc(-1 * var(--crewlet-data-grid-cell-start)) calc(-1 * var(--crewlet-data-grid-cell-end));
+  padding-block: var(--spacing-2);
+  padding-inline: var(--crewlet-data-grid-cell-start) var(--crewlet-data-grid-cell-end);
   cursor: pointer;
 }
 
@@ -221,7 +282,8 @@ button.crewlet-data-grid__row-link {
 }
 
 .crewlet-data-grid__cell {
-  padding: var(--spacing-1) var(--spacing-3);
+  padding-block: var(--spacing-1);
+  padding-inline: var(--crewlet-data-grid-cell-start) var(--crewlet-data-grid-cell-end);
   font-size: var(--font-size-compact);
   min-width: 0;
   display: flex;
@@ -229,6 +291,29 @@ button.crewlet-data-grid__row-link {
   gap: var(--spacing-2);
 }
 
+/*
+ * A GHOST CONTROL STARTS ON THE COLUMN'S TEXT EDGE. A small ghost button that
+ * opens a cell ("Open ENG-12", a choice made in place through a menu) drew its
+ * word one padding and one edge (9px) inside the line its column starts on.
+ * Its padding and edge are taken back, as a card's foot does (StatusCard.css):
+ * the word sits on the line and only the hover's ground reaches past it, into
+ * the step between two columns. A column of figures ends its controls on the
+ * far edge, so it is left alone.
+ *
+ * NEVER AT THE GRID'S OWN EDGE: its first column, and every line of a phone's
+ * card (below). A grid standing alone has only its 12px edge there, and with
+ * the 9px taken back, the 4px the control's focus ring stands off it ran past
+ * the grid's clip: the ring lost a pixel and the hover ground stood 3px from
+ * the frame.
+ */
+.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
+  > .crewlet-btn--ghost.crewlet-btn--small:first-child,
+.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
+  > .crewlet-menu-anchor:first-child
+  > .crewlet-btn--ghost.crewlet-btn--small {
+  margin-inline-start: var(--crewlet-data-grid-control-outdent, calc(-1 * (var(--spacing-2) + 1px)));
+}
+
 /*
  * A SHRINK COLUMN does not wrap inside its capped track, and does not paint
  * outside it: a nowrap cell narrower than its content would spill over the
@@ -269,7 +354,7 @@ button.crewlet-data-grid__row-link {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
   background: var(--color-surface-elevated);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
@@ -284,7 +369,7 @@ button.crewlet-data-grid__row-link {
 /* A SECOND AXIS IS A BAND INSIDE A BAND, inset and quieter, so it does not
    read as its parent's sibling; and it draws no rule above itself. */
 .crewlet-data-grid__band .crewlet-data-grid__band > .crewlet-data-grid__band-head {
-  padding-left: calc(var(--spacing-3) + var(--spacing-4));
+  padding-left: calc(var(--crewlet-data-grid-edge) + var(--spacing-4));
   background: var(--color-surface-subtle);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-tertiary);
@@ -302,7 +387,7 @@ button.crewlet-data-grid__row-link {
 }
 
 .crewlet-data-grid__band-foot {
-  padding: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-1) var(--crewlet-data-grid-edge);
   font-size: var(--font-size-2xs);
   color: var(--color-text-tertiary);
   background: var(--color-surface-elevated);
@@ -320,7 +405,7 @@ button.crewlet-data-grid__row-link {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
   border-top: 1px solid var(--color-border-hover);
   background: var(--color-surface-elevated);
   font-size: var(--font-size-xs);
@@ -339,7 +424,7 @@ button.crewlet-data-grid__row-link {
   all: unset;
   /* After the reset, which takes `grid-column` too. */
   grid-column: 1 / -1;
-  padding: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-1) var(--crewlet-data-grid-edge);
   font-size: var(--font-size-2xs);
   color: var(--color-brand-accent-ink);
   cursor: pointer;
@@ -394,6 +479,11 @@ button.crewlet-data-grid__row-link {
    sorted. */
 @media (width < 640px) {
   .crewlet-data-grid {
+    /* No ghost control is pulled out here (see above): every line of a card
+       starts at the grid's edge, and a compact row's marks run on one line,
+       where the hover ground swallowed the gap before it. */
+    --crewlet-data-grid-control-outdent: 0px;
+
     display: block;
   }
 
@@ -408,7 +498,7 @@ button.crewlet-data-grid__row-link {
 
   .crewlet-data-grid__row {
     display: block;
-    padding: var(--spacing-2) var(--spacing-3);
+    padding: var(--spacing-2) var(--crewlet-data-grid-edge);
     min-height: 0;
   }
 

package/dist/DataTable/index.js

@@ -1,20 +1,20 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WDPREXOL.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CFY257ND.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-KVWZDCTQ.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-KIPAFCVS.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.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-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';