@crewlethq/ui 0.81.2 → 0.83.0

package/dist/CompactNav-CU2AQXBC.css

@@ -0,0 +1,322 @@
+/*
+ * The compact rail: each place its glyph's tile over its name, in one column.
+ *
+ * A PLACE IS 48PX TALL: a 26px tile, its name under it and a breath. Fourteen
+ * places, two rules, and the rail's head and foot stand in a 900px window, so
+ * the column a reader folded the rail to see more of the page never scrolls
+ * on a laptop.
+ *
+ * Tokens only. The tile's sizes are component variables, so a surface that
+ * draws the compact rail at another width changes them in one place.
+ */
+
+.crewlet-compact-nav {
+  --crewlet-compact-nav-tile-width: 36px;
+  --crewlet-compact-nav-tile-height: var(--size-control-sm);
+  --crewlet-compact-nav-glyph: 17px;
+  width: 100%;
+  min-width: 0;
+}
+
+.crewlet-compact-nav__list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-compact-nav__entry {
+  display: flex;
+  min-width: 0;
+}
+
+/* A place is a link or a button, and a folded group is a button: one look for
+   all three. The entry itself draws nothing; the tile is what lifts. */
+.crewlet-compact-nav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) 0 var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The ring is drawn on the tile (below), not round the whole entry. The
+   entry's own outline is transparent rather than none, so forced colours,
+   which paint a transparent outline in the system's ink, still draw one. */
+.crewlet-compact-nav__item:focus {
+  outline: 2px solid transparent;
+}
+
+.crewlet-compact-nav__tile {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-compact-nav-tile-width);
+  height: var(--crewlet-compact-nav-tile-height);
+  border-radius: var(--radius-md);
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A step larger than the full rail's 14px glyph: in the compact rail the
+   glyph is the place's name at a glance, and the word under it is the
+   caption. */
+.crewlet-compact-nav__tile > .crewlet-glyph {
+  width: var(--crewlet-compact-nav-glyph);
+  height: var(--crewlet-compact-nav-glyph);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__tile,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__tile {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__label,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+}
+
+/*
+ * WHERE THE READER IS: the full rail's own current row, drawn on the tile.
+ * Raised, the plain hairline as an OUTLINE (forced colours keep outlines and
+ * drop backgrounds), and the primary ink. After :hover, so the current tile
+ * shows its lift rather than the overlay. A folded group's tile is current
+ * (`aria-current="true"`) while one of its places is.
+ */
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__tile {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* The ring is the tile's, after the current rule that draws its hairline on
+   the same property, so a focused current tile draws the ring. */
+.crewlet-compact-nav__item:focus-visible .crewlet-compact-nav__tile {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-compact-nav__label {
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--spacing-1) / 2);
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A place the reader holds no access to keeps its name and its key, in the
+   quiet ink, as a locked group's rows do in the full rail. */
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__label,
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__tile {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE FIGURE RIDES THE TILE'S TOP END CORNER, cut out of the rail by a ring of
+ * the rail's own ground, so it reads apart from the glyph under it. It is the
+ * one count badge size the whole chrome draws (`--size-badge`), the accent
+ * fill where it is waiting on the reader and the raised ground where it is
+ * only a tally.
+ */
+.crewlet-compact-nav__figure {
+  position: absolute;
+  top: calc(var(--spacing-1) * -1 - 1px);
+  right: calc(var(--spacing-2) * -1 + 1px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border: 2px solid var(--color-surface-frame);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/* A short rule between two runs of tiles, centred in the column. */
+.crewlet-compact-nav__separator {
+  display: flex;
+  justify-content: center;
+  padding: calc(var(--spacing-1) + var(--spacing-1) / 2) 0;
+}
+
+.crewlet-compact-nav__rule {
+  width: var(--spacing-6);
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+/*
+ * THE FLYOUT: a folded group's places beside the rail, on the popover's rung.
+ * Its rows are the full rail's rows at the menu's step: the glyph, the name,
+ * and the figure at the end, so the places read as they do unfolded.
+ */
+.crewlet-compact-nav__flyout {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 208px;
+  max-width: min(320px, calc(100vw - var(--spacing-4)));
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family-sans);
+  animation: crewlet-compact-nav-flyout-in var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* Inside a LayerHost the coordinates are the host's own, so the flyout is
+   absolute within it rather than fixed against the window. */
+.crewlet-compact-nav__flyout--in-host {
+  position: absolute;
+}
+
+@keyframes crewlet-compact-nav-flyout-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--spacing-1) * -1));
+  }
+}
+
+.crewlet-compact-nav__flyout-head {
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+/* A router's link is drawn by the caller; its wrapper stays out of the box tree. */
+.crewlet-compact-nav__link-slot {
+  display: contents;
+}
+
+.crewlet-compact-nav__link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  height: var(--size-control-md);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-compact-nav__link:hover,
+.crewlet-compact-nav__link:focus-visible {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The place the reader is on: the selected fill, the primary ink, a step
+   heavier. Declared after the hover so the selected fill holds under it. */
+.crewlet-compact-nav__link[aria-current='page'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-compact-nav__link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-compact-nav__link--locked:not([aria-current]):not(:hover):not(:focus-visible) {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-compact-nav__link-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-compact-nav__link-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-compact-nav__link-figure {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__link-figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-compact-nav__tile,
+  .crewlet-compact-nav__link {
+    transition: none;
+  }
+
+  .crewlet-compact-nav__flyout {
+    animation: none;
+  }
+}

package/dist/Composer/Composer.d.ts

@@ -8,6 +8,8 @@ export declare const COMPOSER_COUNTER_AT = 0.8;
  * every chat surface sends it: Enter sends and Shift+Enter writes a line.
  */
 export type ComposerSubmitKey = 'mod-enter' | 'enter';
+/** The box's look: `default`, a form's field, or `chat`, a conversation's message box. */
+export type ComposerAppearance = 'default' | 'chat';
 export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onSubmit' | 'children'> {
     value: string;
     onChange: (value: string) => void;
@@ -20,8 +22,29 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     submitOn?: ComposerSubmitKey | undefined;
     /** Names the field for a screen reader, since it carries no visible label. */
     label: string;
+    /**
+     * `chat` is a conversation's message box, on the transcript's own type and
+     * ground (the `--crewlet-chat-*` scale): the large corner, the transcript's
+     * ground with the row wash and a small shadow, the words at the chat step, a
+     * footer with no rule of its own, a tool whose menu is open drawn pressed,
+     * and the formatting row's glyphs quiet until the box is in use.
+     */
+    appearance?: ComposerAppearance | undefined;
     /** The footer's controls, at its end: Cancel and Submit. */
     actions?: ReactNode;
+    /**
+     * Tools at the footer's START, before the actions: what a chat composer
+     * offers beside sending (attach, emoji, a mention, drafting with the
+     * assistant). They stand where the eye starts, under the words, and the
+     * send control keeps the corner.
+     */
+    tools?: ReactNode;
+    /**
+     * A row along the box's top, inside its edge and before everything else: a
+     * formatting `Toolbar` (bold, italic, a list) that acts on the words below.
+     * Pass a `Toolbar` with its own name; the row is laid out, not labelled.
+     */
+    toolbar?: ReactNode;
     /**
      * A control on the field's own row, at its end: the send button of a chat
      * composer (`SendButton`). With one, the field starts at one line and grows
@@ -49,8 +72,9 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
 }
 /**
  * A message written in place: a borderless field that grows with its text,
- * and a footer strip holding the send shortcut, a counter and the actions, in
- * one box that takes the focus ring as a whole.
+ * and a footer strip holding the tools, the send shortcut, a counter and the
+ * actions, in one box that takes the focus ring as a whole. A formatting row
+ * (`toolbar`) may stand along the box's top, above the words it acts on.
  *
  * THE FOOTER IS DRAWN ONLY WITH SOMETHING IN IT. With no shortcut, counter or
  * actions there is no strip at all, and one holding only the shortcut's hint

package/dist/Composer/index.d.ts

@@ -1,3 +1,4 @@
+import '../ChatMessage/ChatScale.css';
 import './Composer.css';
 export { COMPOSER_COUNTER_AT, Composer } from './Composer.js';
-export type { ComposerProps } from './Composer.js';
+export type { ComposerAppearance, ComposerProps } from './Composer.js';

package/dist/Composer/index.js

@@ -1,12 +1,12 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-E35HYQMK.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-EBVZHVPD.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Composer-HQIMTMRC.css → Composer-ZEGHEAFE.css}

@@ -136,6 +136,32 @@
   padding: var(--spacing-2) var(--spacing-3) 0;
 }
 
+/*
+ * THE FORMATTING ROW, along the box's top on the field's own inset less the
+ * small tool's own room round its glyph, so the first glyph starts on the
+ * words' line. It belongs to the field rather than to a strip of its own: no
+ * rule under it.
+ */
+.crewlet-composer__toolbar {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: var(--spacing-1) var(--spacing-1) 0 calc(var(--spacing-3) - (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
+/*
+ * THE TOOLS AT THE FOOTER'S START, a tight row whose first glyph starts on
+ * the words' line, as the formatting row's does. The spacer after them puts
+ * the actions at the end.
+ */
+.crewlet-composer__tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  margin-inline-start: calc(-1 * (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
 /*
  * DISABLED, AS A FIELD IS: the whole box at the disabled field's 0.6 and the
  * not-allowed cursor, so it no longer reads as somewhere to type. Faded once:
@@ -212,3 +238,48 @@
     transition: none;
   }
 }
+
+/*
+ * A CONVERSATION'S MESSAGE BOX (`appearance="chat"`), on the transcript's own
+ * scale (ChatMessage/ChatScale.css): the large corner on the transcript's
+ * ground with the row wash laid over it, a step lighter than the list, and a
+ * small shadow, so the box sits just above the messages, inside the edge
+ * scale's strong step, the edge a field draws. The words are set at the
+ * transcript's size on one line to start. The footer belongs to the field
+ * rather than standing as a strip under it: no rule and no ground of its own.
+ */
+.crewlet-composer--chat {
+  border-color: var(--color-edge-strong);
+  background:
+    linear-gradient(var(--color-fill-row), var(--color-fill-row)),
+    var(--crewlet-chat-ground);
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-composer--chat .crewlet-composer__field {
+  min-height: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--crewlet-chat-text);
+  line-height: var(--crewlet-chat-line);
+}
+
+.crewlet-composer--chat .crewlet-composer__footer {
+  gap: 2px;
+  padding: var(--spacing-1);
+  padding-inline-start: var(--spacing-3);
+  border-top: 0;
+  background: transparent;
+}
+
+/* A tool whose menu or picker is open reads as held down. */
+.crewlet-composer--chat .crewlet-composer__tools [aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+/* The formatting row's glyphs rest in the tertiary ink while the box is not
+   in use, so the row reads as part of the field rather than as a toolbar
+   competing with the conversation, and take their own ink once it is. */
+.crewlet-composer--chat:not(:focus-within) .crewlet-composer__toolbar :is(button, [role='button']):not(:hover) {
+  color: var(--color-text-tertiary);
+}

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-TPIMOGOZ.js';
+export { ConfirmField, confirmMatches } from '../chunk-PEBQMX5X.js';
 import '../chunk-PLL7ZJHY.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-7PJFUQMY.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-2ZSCHQOA.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-VERJCAJ4.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,12 +1,13 @@
-export { ContrastHelp } from '../chunk-HQOEAUDJ.js';
-import '../chunk-7PJFUQMY.js';
-import '../chunk-KHJIEPZV.js';
+export { ContrastHelp } from '../chunk-WMO722J2.js';
+import '../chunk-2ZSCHQOA.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-EC6EUIAD.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-VERJCAJ4.js';
 import '../chunk-CYQBDZ6M.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Count/Count.d.ts

@@ -1,3 +1,13 @@
+/**
+ * What a count says by its colour: nothing, or that it waits on the reader.
+ *
+ * `quiet` is the default and every count of how many things a panel, a tab or
+ * a heading is about. `attention` is a count of what WAITS ON THE READER (a
+ * mention, a direct message, a new reply to them): the accent's own meaning,
+ * the same 16px pill a navigation row's badge draws, so a menu button, a
+ * switcher and a row in a list agree on what the reader has not seen.
+ */
+export type CountTone = 'quiet' | 'attention';
 export interface CountProps {
     /** How many. Rendered as it is given, so a caller decides its own formatting. */
     value: number | string;
@@ -7,18 +17,26 @@ export interface CountProps {
      * already says what it counts.
      */
     label?: string | undefined;
+    /** `quiet` (the default) or `attention`, for a count that waits on the reader. */
+    tone?: CountTone | undefined;
     className?: string | undefined;
 }
 /**
  * How many of something a panel, a tab or a heading is about.
  *
- * IT IS NEVER TINTED, and that is the whole rule. A count coloured by severity
- * is a claim the number cannot support: three of something is not a warning,
- * and a red 3 beside "Failures" says the same thing twice while a red 3 beside
- * "Retries" says something nobody meant. It sits on the inset surface in the
- * tertiary ink, in every context.
+ * IT IS NEVER TINTED BY SEVERITY, and that is the whole rule. A count coloured
+ * by severity is a claim the number cannot support: three of something is not
+ * a warning, and a red 3 beside "Failures" says the same thing twice while a
+ * red 3 beside "Retries" says something nobody meant. A quiet count sits on
+ * the inset surface in the tertiary ink, in every context.
+ *
+ * THE ONE COLOUR IT TAKES IS THE ACCENT, and only for `tone="attention"`: a
+ * count of what waits on the reader, which is what the accent means. It is the
+ * badge pill (`--size-badge`, its figure at `--font-size-badge`), so it never
+ * reads louder than the name beside it. It is never the only carrier: its
+ * label, or the row it sits in, says what is waiting.
  *
  * Tabular figures, so a count that ticks up does not shift the heading beside
  * it, and a minimum width so 1 and 10 draw the same pill.
  */
-export declare function Count({ value, label, className }: CountProps): import("react").JSX.Element;
+export declare function Count({ value, label, tone, className }: CountProps): import("react").JSX.Element;

package/dist/Count/index.d.ts

@@ -1,3 +1,3 @@
 import './Count.css';
 export { Count } from './Count.js';
-export type { CountProps } from './Count.js';
+export type { CountProps, CountTone } from './Count.js';

package/dist/Count/index.js

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

package/dist/{Count-ZJ6ID4ZU.css → Count-2HXBBYPO.css}

@@ -23,3 +23,22 @@
      and the pill lands on 18px with its figures on its middle. */
   line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
 }
+
+/*
+ * WHAT WAITS ON THE READER (`tone="attention"`): the accent pill every count
+ * of that kind is drawn as, wherever it stands, at the badge's own size: 16px
+ * tall and at least as wide, its figure at the badge step in the semibold
+ * weight. At 18px with an 11px figure such a badge read louder than the name
+ * beside it.
+ */
+.crewlet-count--attention {
+  box-sizing: border-box;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  padding: 0 var(--size-badge-pad);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}

package/dist/DataGrid/index.js

@@ -1,15 +1,15 @@
-export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-LCZULGMB.js';
-import '../chunk-LMQG3VPG.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-ABRWL5FJ.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-RTPQDNW3.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,20 +1,21 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CZQ7UITX.js';
-import '../chunk-C667GCU7.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WANKINXG.js';
+import '../chunk-ZXXZESCD.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-OQG4P5KU.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';