@crewlethq/ui 0.13.0 → 0.14.0

package/README.md

@@ -198,6 +198,22 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.14.0
+
+0.14.0 draws toasts as the first release did and quiets the pickers.
+
+**Toasts are the first release's strip again**: a dark strip on `--color-surface-background` with the large shadow and the rim light, a 12px corner, a 20px mark, a slide in from the right, and the countdown as a wash behind the words that drains from the right. A variant spends its hue on its mark (the feedback ink step) and its wash (the feedback soft step) only, so a failure is a rose mark on a faint rose wash with a rose action, never red words on a red edge. Reduced motion keeps the strip still and draws no wash.
+
+**A picker's boundary is a button's.** `Select`, `DateTimePicker` and `TimeWindowPicker` draw their trigger on `--color-border-strong`, as the secondary button does, and step to `--color-border-strong-hover` under the pointer. Text boxes, checkboxes and switches keep `--color-border-control` at 3:1, as do the typed boxes inside the pickers' panels.
+
+**A `Select` list that leads with marks ends its rows with the tick**, so a swatch, an avatar or a glyph starts at the panel's edge. A list of words keeps the tick's column first.
+
+**`--crewlet-select-menu-max-height` is the list's height.** The shared listbox cap of min(360px, 60vh) no longer overrides a taller panel; the panel keeps the 60vh cap on the window.
+
+`@crewlethq/tokens`: Origin's dark `--color-border-default` is #2e2e30, and the comfortable density is 1.16 (it was 1.14), a shade larger at every gap, pad, row and control.
+
+What to change: a test that reads a failure toast's red edge or red words, or a picker's control boundary, reads the new ones. Everything else is unchanged.
+
 ## Changes in 0.13.0
 
 0.13.0 adds the parts the engine console's themes, project switcher, inbox and knowledge base are built with, and calls the light and dark choice Mode.

package/dist/AvatarPicker/index.js

@@ -9,6 +9,6 @@ import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-HI6Q2UXQ.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,5 +1,5 @@
-export { CommandPalette } from '../chunk-HKGS67VG.js';
-import '../chunk-CF6DTETT.js';
+export { CommandPalette } from '../chunk-WYQOHFML.js';
+import '../chunk-TFMJH2E6.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';

package/dist/DataTable/index.js

@@ -1,9 +1,9 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WY2NLRZN.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-3VVKJ7AZ.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-YCTMKKRA.js';
+import '../chunk-TFMJH2E6.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-CF6DTETT.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';

package/dist/DataView/index.js

@@ -1,17 +1,17 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-UZPHPW3Z.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-5IXMLWGW.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-WY2NLRZN.js';
+import '../chunk-3VVKJ7AZ.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-JDPAA2JU.js';
+import '../chunk-AXNQCAFC.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-5VNUYO76.js';
-import '../chunk-CF6DTETT.js';
+import '../chunk-TFMJH2E6.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JDPAA2JU.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-AXNQCAFC.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{DateTimePicker-4AZBTODT.css → DateTimePicker-NJ6XH2TE.css}

@@ -1,7 +1,8 @@
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
- * The trigger borrows the Select's geometry so a date box and a picker line
+ * The trigger borrows the Select's geometry and its button boundary
+ * (--color-border-strong; see Select.css) so a date box and a picker line
  * up in the same toolbar; the panel holds the shared CalendarGrid, so the
  * month looks and behaves the same here as in every other picker.
  */
@@ -17,7 +18,7 @@
      height. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -34,7 +35,7 @@
 }
 
 .crewlet-datetime:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*

package/dist/ListInput/index.js

@@ -1,9 +1,9 @@
-export { ListInput } from '../chunk-LZP7FGT7.js';
+export { ListInput } from '../chunk-GARACZAH.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Modal/index.js

@@ -1,4 +1,4 @@
-export { ConfirmModal, Modal } from '../chunk-CF6DTETT.js';
+export { ConfirmModal, Modal } from '../chunk-TFMJH2E6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Modal-3YJ2GG2T.css → Modal-RQAYGG4L.css}

@@ -289,7 +289,7 @@
  * padding is only the least it keeps when a title wraps. It was the 16px step
  * while the bar was 64px, which a full control step filled exactly; at 52px
  * the same padding stood the head 12px past the bar behind it. At the 4px step
- * the head is the bar's height with the control step at every density, 36.48px
+ * the head is the bar's height with the control step at every density, 37.12px
  * at comfortable included, and with a subtitle under the title.
  *
  * It used to be the tighter band, 49px with a close control alone, and the

package/dist/OrgTable/index.js

@@ -8,6 +8,6 @@ import '../chunk-4FQT6ZAY.js';
 import '../chunk-6NIZCQUM.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-HI6Q2UXQ.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-export { Select } from '../chunk-XFE5W2I4.js';
+export { Select } from '../chunk-IXUU5DLZ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Select-XMZ44RWY.css → Select-2P7AWUE4.css}

@@ -7,9 +7,12 @@
  * into the nearest layer host and drawn with the shared listbox register, so
  * a list of options looks the same wherever it is offered from.
  *
- * The boundary is --color-border-control, like every other control: the
- * hairline measured 1.27:1 in light, which is a box a reader has to know is
- * there already.
+ * THE BOUNDARY IS A BUTTON'S, --color-border-strong, the secondary button's
+ * and the date and time-window pickers'. A picker shows its value and its
+ * chevron, and those are what a reader knows it by. --color-border-control,
+ * at 3:1, is for the controls whose outline IS the control (a text box, a
+ * checkbox, a switch; see Input.css): on a picker it drew the one bright box
+ * in a row of buttons and switchers, brighter at rest than under the pointer.
  */
 
 .crewlet-select {
@@ -27,7 +30,7 @@
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -48,7 +51,7 @@
 }
 
 .crewlet-select:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -197,7 +200,7 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-height: var(--crewlet-select-menu-max-height);
+  max-height: min(var(--crewlet-select-menu-max-height), 60vh);
   /*
    * THE PANEL IS THE PRODUCT'S SURFACE, on the panel hairline, at the panel
    * corner. A list offered from a field is another panel over the one the
@@ -224,11 +227,25 @@ svg.crewlet-select__chevron {
   position: absolute;
 }
 
+/*
+ * THE PANEL'S HEIGHT IS THE LIST'S. The shared listbox register caps a list
+ * at min(360px, 60vh) on its own, which inside this panel made
+ * `--crewlet-select-menu-max-height` a promise it could not keep past 360px:
+ * a taller panel drew the same short list and scrolled it. Here the list
+ * fills what the panel allows, and the panel keeps the register's cap on the
+ * window (see `.crewlet-select__menu`).
+ */
 .crewlet-select__list {
   flex: 1;
   min-height: 0;
 }
 
+/* Scoped to the panel for the weight, as the option rules below are: the
+   register's cap is one class, and the bundle orders equal weights by hash. */
+.crewlet-select__menu .crewlet-select__list {
+  max-height: none;
+}
+
 .crewlet-select__group {
   display: flex;
   flex-direction: column;
@@ -290,6 +307,15 @@ svg.crewlet-select__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * AT THE ROW'S END in a list whose rows lead with a mark (see `tickAtEnd`),
+ * so the mark starts at the panel's edge. After a hint it follows the hint,
+ * which already takes the free space; without one it takes it itself.
+ */
+.crewlet-select__option-body + .crewlet-select__option-tick--end {
+  margin-left: auto;
+}
+
 .crewlet-select__option-body {
   display: flex;
   flex-direction: column;

package/dist/Switcher/index.js

@@ -1,14 +1,14 @@
-export { Switcher } from '../chunk-S3IENQ3E.js';
+export { Switcher } from '../chunk-Y6NR7QJ3.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-CF6DTETT.js';
+import '../chunk-TFMJH2E6.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/TagsInput/index.js

@@ -1,9 +1,9 @@
-export { TagsInput } from '../chunk-GG2QEZO2.js';
+export { TagsInput } from '../chunk-JCO3SIST.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,5 +1,5 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-B2CITO6R.js';
-import '../chunk-XFE5W2I4.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-IFM63LAG.js';
+import '../chunk-IXUU5DLZ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';

package/dist/{TimeWindowPicker-GBF4JDFI.css → TimeWindowPicker-BZ5HHATU.css}

@@ -1,8 +1,9 @@
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
- * The trigger takes the same geometry as a Select and a DateTimePicker, so the
- * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * The trigger takes the same geometry and button boundary as a Select and a
+ * DateTimePicker (--color-border-strong; see Select.css), so the three line
+ * up in a filter bar. The panel is a RAIL of named windows beside
  * the calendars, rather than two tabs with one of them hidden: the windows a
  * reader picks by name are the road, and the absolute range is the turning off
  * it, so both are on screen at once and each shows what the other chose.
@@ -17,7 +18,7 @@
   /* The side inset only: see DateTimePicker's own trigger. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -34,7 +35,7 @@
 }
 
 .crewlet-time-window:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*

package/dist/Toaster/index.js

@@ -1,4 +1,4 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-LELD5KPA.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-CBZSSKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Toaster-KZ7YE2HA.css → Toaster-VZKISP2S.css}

@@ -1,98 +1,98 @@
 /*
- * The toast stack.
+ * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
+ * on the page's deepest ground with the large shadow and the rim light, a
+ * 12px corner, the variant said by its mark alone, never a flood of its hue,
+ * and the countdown as a wash behind the words that drains from the right.
  *
- * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
- * black, which is a dark strip whatever palette is painting: on a light page
- * the toast's own text measured 1.56:1 against it.
+ * IN TOKENS RATHER THAN ITS LITERALS, so it follows every theme. The strip is
+ * --color-surface-background: the first release mixed the panel with black,
+ * which read as a dark bar on a light page, where its words measured 1.56:1.
+ * The marks are the feedback INK steps, the soft moss, amber and rose it drew,
+ * measured as text on every theme. The washes are the feedback SOFT steps.
  *
- * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
- * layer under the message is a composite nothing measured, and it moves while
- * the message is being read; a 2px bar at the edge says the same thing and
- * touches no text at all. It is decoration either way: the dismissal is a
- * timer now, so a reader who asks for reduced motion still gets the toast
- * taken away.
+ * The wash is decoration: the dismissal is a timer, so a reader who asks for
+ * reduced motion gets no wash and still gets the toast taken away.
  */
-
 .crewlet-toaster {
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
-  /* The engine's 420px, held under the viewport at the width a phone has.
-     The strip is one or two lines of 13px text and an action; at 380 the
-     commonest failure message wrapped onto a third. */
-  width: min(420px, calc(100vw - var(--spacing-9)));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-4);
-  right: var(--spacing-4);
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-4);
-  right: var(--spacing-4);
+  top: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-4);
-  left: var(--spacing-4);
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-4);
-  left: var(--spacing-4);
+  top: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toast {
+  /* The mark and the wash are the two places a variant spends its hue. */
   --crewlet-toast-mark: var(--color-text-secondary);
-  /*
-   * The boundary and the two inks are variables so a tone can spend them. Only
-   * one does: a failure, which is the engine's one toned strip.
-   */
-  --crewlet-toast-line: var(--color-border-default);
-  --crewlet-toast-ink: var(--color-text-primary);
-  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+  --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);
 
   pointer-events: auto;
   position: relative;
   display: flex;
   align-items: flex-start;
-  /* The panel's own gap and padding, and the panel's own surface: the engine
-     draws a toast as a small panel that happens to float, so it sits on the
-     same ground, the same hairline and the same corner as everything the
-     screen behind it is made of. */
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--crewlet-toast-line);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  color: var(--crewlet-toast-ink);
+  gap: var(--spacing-3);
+  padding: var(--crewlet-toast-inset) calc(var(--spacing-7) + var(--spacing-1) * 1.5) var(--crewlet-toast-inset)
+    var(--crewlet-toast-inset);
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  /* The large shadow and the rim light, both from tokens that are a shadow in
+     every palette: --shadow-hairline is `none` in light, and a `none` inside a
+     list drops the whole declaration. */
+  box-shadow: var(--shadow-xl), var(--shadow-rim-lit);
+  color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   letter-spacing: var(--font-letter-spacing-snug);
   overflow: hidden;
-  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+  animation: crewlet-toast-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
 @keyframes crewlet-toast-in {
   from {
     opacity: 0;
-    transform: translateY(6px);
+    transform: translateX(var(--spacing-4));
   }
-
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
+/* The words sit over the wash: every child is raised, and the dismiss and the
+   wash below take their own places back. */
+.crewlet-toast > * {
+  position: relative;
+  z-index: var(--z-index-raised);
+}
+
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
@@ -100,34 +100,26 @@
   color: var(--crewlet-toast-mark);
 }
 
-/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
-   words beside it stay in the primary ink: a coloured sentence on a coloured
-   strip is the pair that has to be measured, and this one does not exist. */
+/*
+ * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
+ * and the edge stays the hairline, so a failure is a rose mark on a faint rose
+ * wash rather than a red strip: the outcome is said by the glyph and the title,
+ * and the sentence beside them is read in the ink every sentence is read in.
+ * Information is the neutral mark on the neutral wash.
+ */
 .crewlet-toast--success {
-  --crewlet-toast-mark: var(--color-feedback-success);
+  --crewlet-toast-mark: var(--color-feedback-success-ink);
+  --crewlet-toast-wash: var(--color-feedback-success-soft);
 }
 
 .crewlet-toast--warning {
-  --crewlet-toast-mark: var(--color-feedback-warning);
+  --crewlet-toast-mark: var(--color-feedback-warning-ink);
+  --crewlet-toast-wash: var(--color-feedback-warning-soft);
 }
 
-/*
- * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
- * confirmation and the one that does not take itself away, so the engine gives
- * it the hue twice: the fill step on the edge, where 3:1 is the floor a
- * boundary has to clear, and the INK step on every word, which is the measured
- * text pair on this surface. Never the fill behind a word: that is the swap
- * the whole soft-and-ink split exists to stop.
- */
 .crewlet-toast--danger {
-  --crewlet-toast-mark: var(--color-feedback-danger);
-  --crewlet-toast-line: var(--color-feedback-danger);
-  --crewlet-toast-ink: var(--color-feedback-danger-ink);
-  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
-}
-
-.crewlet-toast--info {
-  --crewlet-toast-mark: var(--color-feedback-info);
+  --crewlet-toast-mark: var(--color-feedback-danger-ink);
+  --crewlet-toast-wash: var(--color-feedback-danger-soft);
 }
 
 /* A usage limit notice is the application's own variant: it paints the glyph
@@ -149,12 +141,12 @@
 }
 
 .crewlet-toast__message {
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
 }
 
 .crewlet-toast__actions {
-  margin-top: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
   display: flex;
   gap: var(--spacing-2);
 }
@@ -186,6 +178,7 @@
   border-color: var(--color-brand-accent-hover);
 }
 
+/* A failure's one filled thing is the way out of it. */
 .crewlet-toast--danger .crewlet-toast__action-btn,
 .crewlet-toast--danger .crewlet-toast__action-link {
   background: var(--color-feedback-danger);
@@ -207,8 +200,9 @@
 }
 
 /* The dismiss sits absolute in the corner so a multi-line message flows
-   under it rather than around it. 24px square: the smallest target
-   WCAG 2.2 accepts. */
+   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. */
 .crewlet-toast__dismiss {
   position: absolute;
   top: var(--spacing-2);
@@ -222,10 +216,7 @@
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  /* The strip's own quiet ink rather than the neutral tertiary step, so the
-     close on a failure is part of the failure rather than the one grey thing
-     inside it. */
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-tertiary);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -233,25 +224,28 @@
 }
 
 .crewlet-toast__dismiss:hover {
-  background: var(--color-surface-hover);
-  color: var(--crewlet-toast-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
 }
 
+/*
+ * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
+ * whole strip, draining from the right as the time runs out. It sits under
+ * every raised child, and it is the timer's picture, not the timer.
+ */
 .crewlet-toast__progress {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
+  inset: 0;
+  z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-mark);
+  background: var(--crewlet-toast-wash);
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-/* Paused by the class rather than by :hover, so the bar and the timer that
+/* Paused by the class rather than by :hover, so the wash and the timer that
    actually dismisses are stopped by the same event. */
 .crewlet-toast__progress.is-paused {
   animation-play-state: paused;
@@ -261,7 +255,6 @@
   from {
     transform: scaleX(1);
   }
-
   to {
     transform: scaleX(0);
   }
@@ -287,8 +280,8 @@
 
 /*
  * The strip still arrives and still goes; it just does not slide, and the
- * countdown bar holds still. The timer is untouched: a reader who asked for
- * less motion did not ask to be left with a toast that never leaves.
+ * wash is not drawn. The timer is untouched: a reader who asked for less
+ * motion did not ask to be left with a toast that never leaves.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-toast {

package/dist/{chunk-WY2NLRZN.js → chunk-3VVKJ7AZ.js}

@@ -1,8 +1,8 @@
 import { Menu } from './chunk-TFH6SYWB.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Checkbox } from './chunk-YCTMKKRA.js';
+import { Modal } from './chunk-TFMJH2E6.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { Modal } from './chunk-CF6DTETT.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-UZPHPW3Z.js → chunk-5IXMLWGW.js}

@@ -1,9 +1,9 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-WY2NLRZN.js';
+import { DataTable } from './chunk-3VVKJ7AZ.js';
 import { Menu } from './chunk-TFH6SYWB.js';
-import { DateTimePicker } from './chunk-JDPAA2JU.js';
+import { DateTimePicker } from './chunk-AXNQCAFC.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';