@crewlethq/ui 0.69.0 → 0.71.0

package/dist/{DataGrid-NHIN2I42.css → DataGrid-Q26F2V5Q.css}

@@ -120,6 +120,18 @@
   --crewlet-data-grid-cell-start: var(--spacing-3);
 }
 
+/*
+ * AND AN ICON COLUMN, whose track (`DATA_GRID_ICON_TRACK`) is the target size
+ * and the cells' own step either side. At the grid's edge (a card's 16px) the
+ * edge inset left 20px for a 24px mark; the column keeps the cells' step on
+ * both sides wherever it stands, as the selection column does.
+ */
+.crewlet-data-grid__th.crewlet-data-grid__th--icon,
+.crewlet-data-grid__cell.crewlet-data-grid__cell--icon {
+  --crewlet-data-grid-cell-start: var(--spacing-3);
+  --crewlet-data-grid-cell-end: 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
@@ -127,6 +139,7 @@
  */
 .crewlet-data-grid__th {
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: var(--spacing-1);
   padding-block: var(--spacing-2);
@@ -173,22 +186,91 @@
   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);
+  /* THE HEAD'S WHOLE HEIGHT, so a press anywhere in the cell sorts. */
+  align-self: stretch;
   cursor: pointer;
 }
 
+/*
+ * ONE EDGE PER COLUMN, shared by its head and its values. `align` gives the
+ * head and every cell the same modifier, and both take the same inline inset
+ * (`--crewlet-data-grid-cell-start` and `-end`), so the word in the head and
+ * the values under it start (or end, or centre) on one line. A head that
+ * sorts is a button filling its head, and takes the same edge.
+ */
 .crewlet-data-grid__th--right .crewlet-data-grid__sort {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center .crewlet-data-grid__sort {
+  justify-content: center;
+}
+
 .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
 .crewlet-data-grid__th--sorted {
   color: var(--color-text-primary);
 }
 
+/*
+ * A SORTABLE HEAD SAYS SO UNDER THE POINTER: the row's own hover overlay over
+ * the whole cell, the way a row says it opens, so the target is the head and
+ * not the word in it.
+ */
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE SORT ARROW. Its box is always laid out, so a head never changes width
+ * when the arrow appears and the fit measured at rest still holds under the
+ * pointer. The two-way arrow of a head that is not the sort shows only on
+ * hover and focus, in the head's own ink; the sorted head's arrow is always
+ * shown, at full ink, and names the direction.
+ */
+.crewlet-data-grid__sort-mark {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--spacing-3);
+  color: inherit;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--sorted) .crewlet-data-grid__sort-mark {
+  opacity: 0;
+}
+
+/* BEFORE THE WORD IN A RIGHT-ALIGNED COLUMN, so the word stays on the column's
+   right edge over its figures, arrow or not. */
+.crewlet-data-grid__th--right .crewlet-data-grid__sort-mark {
+  order: -1;
+}
+
+/*
+ * AND MIRRORED IN A CENTRED COLUMN: a box the arrow's size before the word, a
+ * gap away, so the word stands on the column's middle over its values rather
+ * than half an arrow off it. ONLY BEFORE A WORD: a head with none (a sortable
+ * mark column) draws its arrow alone, already on the middle, and the reserve
+ * would push it off.
+ */
+.crewlet-data-grid__th--center .crewlet-data-grid__sort:has(> .crewlet-data-grid__truncate)::before {
+  content: '';
+  flex: none;
+  inline-size: var(--spacing-3);
+}
+
+.crewlet-data-grid__th:hover .crewlet-data-grid__sort-mark,
+.crewlet-data-grid__sort:focus-visible .crewlet-data-grid__sort-mark {
+  opacity: 1;
+}
+
 .crewlet-data-grid__th--right {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center {
+  justify-content: center;
+}
+
 .crewlet-data-grid__sort:focus-visible,
 .crewlet-data-grid__cols-reset:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -295,23 +377,30 @@ button.crewlet-data-grid__row-link {
  * 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.
+ * ONE MECHANISM, Button's `flush`: a flush control anywhere in a cell takes
+ * its padding and edge back, and a ghost control written straight into a cell
+ * (or as a menu's trigger there) is drawn flush without being asked, by the
+ * same declaration. The word sits on the line and only the hover's ground
+ * reaches past it, into the step between two columns.
+ *
+ * THE EXEMPTIONS ARE ONE VARIABLE, `--crewlet-btn-flush-outdent: 0`, which
+ * the flush declaration reads:
  *
- * 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.
+ * - 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 control's focus ring ran past the grid's clip and the
+ *   hover ground stood 3px from the frame.
+ * - A RIGHT OR A CENTRED COLUMN, which lines its values up by their end or
+ *   their middle, where a control taken back at its start would stand off
+ *   both.
  */
-.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)));
+.crewlet-data-grid__cell > .crewlet-btn--ghost.crewlet-btn--small:first-child,
+.crewlet-data-grid__cell > .crewlet-menu-anchor:first-child > .crewlet-btn--ghost.crewlet-btn--small {
+  margin-inline-start: var(--crewlet-btn-flush-outdent, calc(-1 * (var(--crewlet-btn-inset) + 1px)));
+}
+
+.crewlet-data-grid__cell:is(:first-child, .crewlet-data-grid__cell--right, .crewlet-data-grid__cell--center) {
+  --crewlet-btn-flush-outdent: 0px;
 }
 
 /*
@@ -325,10 +414,18 @@ button.crewlet-data-grid__row-link {
   overflow: clip;
 }
 
+/* A RIGHT-ALIGNED COLUMN holds figures, times and dates: tabular digits, so
+   "53s ago" and "12h ago" end on one edge and their digits stand in columns. */
 .crewlet-data-grid__cell--right {
   justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
 }
 
+.crewlet-data-grid__cell--center {
+  justify-content: center;
+}
+
+
 .crewlet-data-grid__truncate {
   min-width: 0;
   overflow: hidden;
@@ -401,14 +498,25 @@ button.crewlet-data-grid__row-link {
   color: var(--color-text-primary);
 }
 
+/*
+ * THE FOOT IS A CAPTION, NOT A ROW. At the row's height and on the head's
+ * raised ground it read as one more row, so a grid's head, rows and foot
+ * blurred into one stack. It takes the micro step of type, the tertiary ink,
+ * half the row's inset and the grid's own ground under the rows' hairline:
+ * quieter than either neighbour, and plainly the end of the list.
+ */
 .crewlet-data-grid__foot {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  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);
+  flex-wrap: wrap;
+  gap: var(--spacing-1) var(--spacing-3);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) var(--crewlet-data-grid-edge);
+  border-top: 1px solid var(--color-border-default);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
 }
 
 .crewlet-data-grid__foot-spacer {
@@ -416,7 +524,7 @@ button.crewlet-data-grid__row-link {
 }
 
 .crewlet-data-grid__note {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   color: var(--color-text-tertiary);
 }
 
@@ -460,9 +568,21 @@ button.crewlet-data-grid__row-link {
   cursor: pointer;
 }
 
+/*
+ * WHERE NOTHING HOVERS (a touch screen), a sortable head shows its arrow at
+ * rest: there is no pointer to bring it out, and a head that only says it
+ * sorts under a pointer says nothing there.
+ */
+@media (hover: none) {
+  .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain) .crewlet-data-grid__sort-mark {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-data-grid__th,
-  .crewlet-data-grid__row {
+  .crewlet-data-grid__row,
+  .crewlet-data-grid__sort-mark {
     transition: none;
   }
 }
@@ -486,7 +606,7 @@ button.crewlet-data-grid__row-link {
   /* 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;
+  --crewlet-btn-flush-outdent: 0px;
 
   display: block;
 }
@@ -532,7 +652,8 @@ button.crewlet-data-grid__row-link {
 
 /* `shrink` and `right` are column shapes, and there are no columns here. */
 :where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--shrink,
-:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right {
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--center {
   white-space: normal;
   justify-content: flex-start;
 }

package/dist/DataTable/index.js

@@ -1,5 +1,5 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-UYK3SGZI.js';
-import '../chunk-I24FI46B.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BWFJB5JD.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-RE3FBGQQ.js';
@@ -9,8 +9,8 @@ import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-T73DMDU4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/DataView/index.js

@@ -1,8 +1,9 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-RLBGU35B.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-J5WWMC35.js';
 import '../chunk-FPDIHEM4.js';
-import '../chunk-UYK3SGZI.js';
-import '../chunk-PX54PALQ.js';
-import '../chunk-I24FI46B.js';
+import '../chunk-K4LZXSKZ.js';
+import '../chunk-BWFJB5JD.js';
+import '../chunk-HPI5J6AR.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7KHM2FZH.js';
@@ -13,14 +14,14 @@ import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PBCNINMB.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-T73DMDU4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/{DataView-RH5UDA5F.css → DataView-L7HLNW7C.css}

@@ -220,118 +220,7 @@
 
 /* ── One chip ─────────────────────────────────────────────────────────── */
 
-/*
- * TWO CONTROLS IN ONE PILL: pressing the chip opens its editor, pressing the
- * cross takes the filter off. They are drawn as one object with a divider
- * because they are one filter, and they are two BUTTONS because they do two
- * different things, which is also why the cross carries its own name rather
- * than relying on the chip's.
- */
-.crewlet-filter-axis-chip {
-  display: inline-flex;
-  align-items: stretch;
-  height: var(--size-control-sm);
-  background: var(--color-brand-accent-soft);
-  border: 1px solid var(--color-brand-accent-soft-strong);
-  border-radius: var(--radius-pill);
-  overflow: hidden;
-  max-width: 100%;
-  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-/*
- * THE EDGE, NOT THE FILL. `--color-surface-hover` is the overlay a row at rest
- * carries, and the token says a surface shows it OR a selected tint, never
- * both: put on a chip it REPLACED the accent fill, so the one control on screen
- * that means "this filter is on" went pale under the pointer and read as the
- * filter being switched off.
- *
- * The fill stays where it is and the boundary takes the accent itself.
- * Deepening the fill to the next accent step instead measures 4.48:1 under the
- * chip's own ink on the light ground, and 4.18:1 on a card, which is why that
- * step is a BORDER value in the palette and is used as one here.
- */
-.crewlet-filter-axis-chip:hover {
-  border-color: var(--color-brand-accent);
-}
-
-.crewlet-filter-axis-chip__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-  padding: 0 var(--spacing-2) 0 var(--spacing-3);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-brand-accent-ink);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  line-height: 1;
-}
-
-.crewlet-filter-axis-chip__trigger:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-/*
- * THE AXIS NAME IS NOT DIMMED. It read at 0.85 opacity, which takes the chip's
- * own ink off the step the pairing was measured at, and the name of the axis
- * is exactly what a reader checks before the value: "status" and "stage" narrow
- * a list to very different things. The value's own weight is what separates
- * the halves, which is a difference a reader can see at any contrast.
- */
-.crewlet-filter-axis-chip__label {
-  white-space: nowrap;
-}
-
-.crewlet-filter-axis-chip__value {
-  font-weight: var(--font-weight-semibold);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
- * The chevron carries the chip's own ink rather than a fainter version of it,
- * for the reason every mark beside its words does: a grey glyph next to
- * coloured text reads as two things. At 0.7 it measured 3.00:1 on a card in
- * light, which is the 3:1 floor for a glyph to the second decimal place.
- */
-.crewlet-filter-axis-chip__chevron {
-  flex: none;
-}
-
-/*
- * The remove control keeps the chip's own ink rather than taking the critical
- * hue on hover: removing a filter destroys nothing, and a row of chips that
- * turns red under the pointer reads as a row of dangerous things.
- */
-.crewlet-filter-axis-chip__remove {
-  /* AS TALL AS THE PILL'S INSIDE, as the trigger beside it is. At the small
-     control's own height it stood 2px past the pill's inner edge, cut off at
-     the bottom, and its cross sat 1px under the chip's middle. */
-  height: auto;
-  border-radius: 0;
-  border-left: 1px solid var(--color-brand-accent-soft-strong);
-  color: var(--color-brand-accent-ink);
-}
-
-/*
- * Its ring is drawn INSIDE it, like the trigger's beside it. The pill clips to
- * its own radius, so the outset ring an icon button carries everywhere else is
- * cut off on every edge the control touches, which here is all of them.
- */
-.crewlet-filter-axis-chip__remove:focus-visible {
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-filter-axis-chip {
-    transition: none;
-  }
-}
+/* A chip is a [FilterPill] (FilterPill.css) whose words open its editor. */
 
 /* ── A chip's editor ──────────────────────────────────────────────────── */
 

package/dist/DatasetSource/index.js

@@ -1,8 +1,8 @@
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
 import '../chunk-I5OIKDX2.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,7 +1,7 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-PX54PALQ.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-HPI5J6AR.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/DeepWorkCard/index.js

@@ -1,17 +1,17 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-UWOYDHVW.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-P64MIA7C.js';
 import '../chunk-HJBHP66O.js';
+import '../chunk-ZWCK4N4L.js';
 import '../chunk-RQFRRPV6.js';
-import '../chunk-M25IV5MH.js';
 import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DocTabsEditor/index.js

@@ -1,11 +1,11 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-CX6QT4CH.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-W5AXJWOW.js';
 import '../chunk-MPVMB2DV.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-T73DMDU4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/DownloadButton/index.js

@@ -1,7 +1,7 @@
-export { DownloadButton } from '../chunk-NSCYGUDG.js';
+export { DownloadButton } from '../chunk-EHFQMY3B.js';
 import '../chunk-YNRKVY7X.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/EditingStatus/index.js

@@ -1,6 +1,6 @@
-export { EditingStatus } from '../chunk-AIMMHN5J.js';
+export { EditingStatus } from '../chunk-VLGGLLKH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Editor-NZRUKWB4.js → Editor-NNQEALNT.js}

@@ -1,13 +1,13 @@
-import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
+import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { FormField, Input } from './chunk-ETSF7SU6.js';
 import './chunk-PGCLHYVP.js';
 import './chunk-PQADV6P6.js';
 import './chunk-2G355KDJ.js';
-import { Menu } from './chunk-T73DMDU4.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Menu } from './chunk-OQG4P5KU.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
 import './chunk-XSPCITPN.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';

package/dist/EntityList/index.js

@@ -1,9 +1,9 @@
 export { EntityList } from '../chunk-7IW3P6FH.js';
 import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';

package/dist/ErrorBoundary/index.js

@@ -1,5 +1,5 @@
-export { ErrorBoundary } from '../chunk-ZEPUKRO7.js';
-import '../chunk-7QTPJDRF.js';
+export { ErrorBoundary } from '../chunk-IJ7KLXUZ.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FileDrop/index.js

@@ -1,5 +1,5 @@
-export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-2JHGPXYG.js';
-import '../chunk-7QTPJDRF.js';
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-KQWJWTED.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FilterPill/FilterPill.d.ts

@@ -0,0 +1,63 @@
+import { type ReactElement, type ReactNode } from 'react';
+/** The words a pill says, for an application that says them otherwise. */
+export interface FilterPillLabels {
+    /** The remove control's name, from the filter as a sentence: "Remove the Status is Done filter". */
+    remove: (sentence: string) => string;
+    /** Its name where the filter's parts are not words to build a sentence from. */
+    removeUnnamed: string;
+    /** What ends the field where no operator joins it to the value: "Role: Admin". */
+    fieldEnd: string;
+}
+export declare const FILTER_PILL_LABELS: FilterPillLabels;
+export interface FilterPillProps {
+    /** What the filter is on: "Status". */
+    field: ReactNode;
+    /**
+     * How the value is compared: "is", "contains", "is any of". Left out, the
+     * field and the value are joined by a colon ("Role: Admin").
+     */
+    operator?: ReactNode;
+    /**
+     * What the filter is set to: "In progress". Left out for a filter that is a
+     * switch with no value ("Blocked"), which the field alone names.
+     */
+    value?: ReactNode;
+    /** Takes the filter off. Left out, the pill has no remove control. */
+    onRemove?: (() => void) | undefined;
+    /**
+     * Names the remove control. Defaults to the whole filter as a sentence
+     * (`labels.remove`), "Remove the Status is In progress filter", where its
+     * parts are words: a row of pills each announcing "Remove" names nothing.
+     */
+    removeLabel?: string | undefined;
+    /**
+     * Draws the words as a control, for a pill whose words open the filter's
+     * editor (a popover's trigger). Called with the words and the class the
+     * control takes; it returns that control, a `<button>`.
+     */
+    renderWords?: ((words: ReactNode, className: string) => ReactElement) | undefined;
+    labels?: Partial<FilterPillLabels> | undefined;
+    className?: string | undefined;
+}
+/** The class the words take, as text or as the control `renderWords` returns. */
+export declare const FILTER_PILL_WORDS_CLASS = "crewlet-filter-pill__words";
+/** The parts as one sentence, where every part is a word: "Status is In progress". */
+export declare function filterPillSentence(field: ReactNode, operator?: ReactNode, value?: ReactNode): string | undefined;
+/**
+ * One filter in force on a list: the field, how it compares, the value, and
+ * the control that takes it off.
+ *
+ * THREE PARTS IN THREE REGISTERS, because a filter is a sentence and a pill
+ * set in one register reads as a label. The field and the relation are the
+ * secondary ink at the regular weight; the value, the answer a reader checks,
+ * is the accent ink at the semibold weight. The parts are drawn a step apart
+ * AND separated by real spaces, so the pill reads, copies and is announced as
+ * the sentence it is, never as "StatusisIn progress".
+ *
+ * THE ACCENT GROUND, because a filter in force is where the reader is in the
+ * data: the same soft fill and edge a pressed [FilterChip] and the selected row
+ * carry. The remove control is a second button beside the words, behind a
+ * hairline, named by the whole filter; it keeps the pill's ink rather than
+ * turning red, because taking a filter off destroys nothing.
+ */
+export declare function FilterPill({ field, operator, value, onRemove, removeLabel, renderWords, labels, className, }: FilterPillProps): import("react").JSX.Element;

package/dist/FilterPill/index.d.ts

@@ -0,0 +1,3 @@
+import './FilterPill.css';
+export { FILTER_PILL_LABELS, FILTER_PILL_WORDS_CLASS, FilterPill, filterPillSentence } from './FilterPill.js';
+export type { FilterPillLabels, FilterPillProps } from './FilterPill.js';

package/dist/FilterPill/index.js

@@ -0,0 +1,4 @@
+export { FILTER_PILL_LABELS, FILTER_PILL_WORDS_CLASS, FilterPill, filterPillSentence } from '../chunk-K4LZXSKZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';