@crewlethq/ui 0.67.0 → 0.68.0

package/dist/styles.css

@@ -19423,7 +19423,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* InboxList-OCL2M3ZF.css */
+/* InboxList-OFGSX5IH.css */
 /*
  * The inbox's column: groups of rows, each row a control with the task it is
  * about under it, and the quiet toggles at the end.
@@ -19459,6 +19459,63 @@ a.crewlet-icon-btn {
   line-height: var(--font-line-height-snug);
 }
 
+/* The count after a label, in the quiet ink and the label's own register. */
+.crewlet-inbox-list__count {
+  margin-inline-start: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * A collapsible group's label is a button the width of the column, so the
+ * whole line is the target, with the chevron turned a quarter while closed.
+ */
+.crewlet-inbox-list__disclosure {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-height: var(--size-target-min);
+  margin: calc(var(--spacing-1) * -1) 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-inbox-list__disclosure:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-inbox-list__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-list__disclosure[aria-expanded='true'] .crewlet-inbox-list__chevron {
+  transform: rotate(0deg);
+}
+
+.crewlet-inbox-list__disclosure:hover .crewlet-inbox-list__chevron {
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-list__disclosure .crewlet-inbox-list__count {
+  margin-inline-start: 0;
+}
+
+.crewlet-inbox-list__rows[hidden] {
+  display: none;
+}
+
 .crewlet-inbox-list__rows {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -19620,16 +19677,89 @@ a.crewlet-icon-btn {
 }
 
 /*
- * Settled. The strike is drawn in the strong hairline rather than the text's
- * own ink, so the words under it stay legible; the state is also read out,
- * because a line through a word says nothing to somebody listening.
+ * Settled. The name drops to the regular weight and the words to the
+ * secondary ink, which still reads at body contrast: a settled row is read
+ * again, to see what came of it. No strike, which says "cancelled" and cuts
+ * through the letters a reader is trying to read; the state is read out, and
+ * the outcome line and any status say it in words.
  */
+.crewlet-inbox-row__control--done .crewlet-inbox-row__title {
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-inbox-row__control--done .crewlet-inbox-row__text {
-  text-decoration: line-through;
-  text-decoration-color: var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-inbox-row__status {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* With a status, the time stays at the end and the status sits beside it. */
+.crewlet-inbox-row__status + .crewlet-inbox-row__meta {
+  margin-inline-start: 0;
+}
+
+.crewlet-inbox-row__head > .crewlet-inbox-row__status {
+  margin-inline-start: auto;
+}
+
+/*
+ * What came of the row: a glyph in the tone's ink, then words in the
+ * secondary ink, on one line that wraps rather than cuts.
+ */
+.crewlet-inbox-row__outcome {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding-top: 2px;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-inbox-row__outcome-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  height: 1lh;
   color: var(--color-text-tertiary);
 }
 
+.crewlet-inbox-row__outcome--success .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-inbox-row__outcome--info .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-inbox-row__outcome--warning .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-inbox-row__outcome--danger .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-inbox-row__outcome--brand .crewlet-inbox-row__outcome-icon {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-inbox-row__outcome-text {
+  min-width: 0;
+}
+
+.crewlet-inbox-row__outcome-text strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
 /*
  * The task, under the words and lined up with them: the control's start pad,
  * the leading slot and the gap after it.
@@ -19685,7 +19815,8 @@ a.crewlet-icon-btn {
     transition: none;
   }
 
-  .crewlet-inbox-list__toggle {
+  .crewlet-inbox-list__toggle,
+  .crewlet-inbox-list__chevron {
     transition: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.67.0",
-    "@crewlethq/tokens": "0.67.0",
+    "@crewlethq/icons": "0.68.0",
+    "@crewlethq/tokens": "0.68.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-T73DMDU4.js → chunk-2566PSQ3.js}

@@ -1,8 +1,8 @@
 import { Button } from './chunk-7QTPJDRF.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-OLUGHX56.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-PX54PALQ.js → chunk-7DD2GR7I.js}

@@ -1,8 +1,8 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-EE3DJMSQ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Button } from './chunk-7QTPJDRF.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-PM6TIRIX.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-HEIOLITO.js → chunk-BAHLBMCH.js}

@@ -2,8 +2,8 @@ import { useListbox } from './chunk-7KHM2FZH.js';
 import { Tag } from './chunk-I5OIKDX2.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-MZXEHKJD.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-ETSF7SU6.js → chunk-DCQ2VTBB.js}

@@ -2,8 +2,8 @@ import { characterCountState, CharacterCount } from './chunk-PGCLHYVP.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-GEFFMKBS.css';

package/dist/{chunk-F32FFE6I.js → chunk-NBOFBSVD.js}

@@ -3,8 +3,8 @@ import { Tooltip } from './chunk-I33UIUZD.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-4QJHVLJ4.css';