@crewlethq/ui 0.37.1 → 0.38.0

package/dist/StatGroup-DOFHX5QJ.css

@@ -0,0 +1,168 @@
+/*
+ * A row of stat tiles.
+ *
+ * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
+ * tiles appeared and vanished moved every number on the page for a reason that
+ * had nothing to do with the numbers, which is exactly what a reader watching
+ * a live board is trying not to have happen.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's. The row used to drop to two
+ * columns under a 1024px viewport, but a row's width is whatever its column
+ * leaves it: beside the rail and a settings column at exactly 1024 a
+ * four-column row was 489px wide, its tiles about 120px each, and its figures
+ * were cut ("Not s…", "1.6 …"), while on a phone a three-column row folded to
+ * two and left its third tile alone on a row of its own. So the row is a size
+ * container, and the tiles take their place from the row's own width.
+ *
+ * TWELVE TRACKS, AND EACH TILE SPANS ITS SHARE. A container query styles what
+ * is inside the container, never the container itself, so the row cannot
+ * change its own column count by its own width. Its tiles can change how many
+ * of its twelve tracks they span, which is the same layout: twelve divides by
+ * every count a row takes (one, two, three and four a row).
+ *
+ * The row's width comes from where it stands, as a block's does: inline-size
+ * containment means its contents never widen it.
+ */
+
+.crewlet-stat-group {
+  container: crewlet-stat-group / inline-size;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  /* The flush-panel recipe: the card's surface, its hairline and its 12px
+     corner, flat as every card is, and `overflow: hidden`, which is what lets
+     the tiles inside sit against the corners without their own hairlines
+     escaping past them. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * Inside another card: the card's surface and edge are the row's.
+ *
+ * A ROW STANDING IN A CARD IS FLUSH WHETHER OR NOT ITS CALLER SAID SO. Six
+ * settings pages wrapped a row in a card without `flush`, and each drew the
+ * row's own edge and 12px corner one pixel inside the card's: a box inside a
+ * box, and inside a padded body a third frame. A row that is a card's content,
+ * or its body's, is that card's row; `flush` is for a host that is not a
+ * Card (a widget's frame, a panel of an application's own).
+ */
+.crewlet-stat-group--flush,
+.crewlet-card > .crewlet-stat-group,
+.crewlet-card__body > .crewlet-stat-group {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * A tile inside the row brings no surface of its own, whether or not its
+ * caller remembered `flush`. The group draws one card and the hairlines
+ * inside it, so a tile that kept its own border and radius is a card inside
+ * a card: a box inside a box, which is what the reader sees.
+ *
+ * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
+ * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
+ * which one painted was settled by whichever stylesheet the bundler put
+ * last. It put the tile's last, and every tile in every group drew its own
+ * border, its own 12px corner and its own surface inside the group's.
+ * Naming both classes settles it by weight, which no import order can undo.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * Each tile spans its share of the twelve tracks: the row's `columns`, set on
+ * it as `--crewlet-stat-group-cols`, a row.
+ */
+.crewlet-stat-group > * {
+  grid-column: span calc(12 / var(--crewlet-stat-group-cols, 4));
+}
+
+/*
+ * The hairlines between tiles: one before every tile that does not start a
+ * row, and one above every tile that is not on the first.
+ *
+ * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
+ * weighs two classes, so a one-class selector here loses to it and the row
+ * of numbers runs together with nothing between the columns. The first
+ * selector of each pair matches whatever a caller puts in the row; the second
+ * weighs at least as much as the rule it has to beat, and sits after it.
+ */
+.crewlet-stat-group > * + *,
+.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
+  border-left: 1px solid var(--color-border-default);
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(2n + 1),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(2n + 1),
+.crewlet-stat-group[data-columns='3'] > :nth-child(3n + 1),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(3n + 1),
+.crewlet-stat-group[data-columns='4'] > :nth-child(4n + 1),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(4n + 1) {
+  border-left: 0;
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(n + 3),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(n + 3),
+.crewlet-stat-group[data-columns='3'] > :nth-child(n + 4),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 4),
+.crewlet-stat-group[data-columns='4'] > :nth-child(n + 5),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 5) {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * FOUR A ROW FOLD TO TWO under 640px of row (the phone breakpoint's number):
+ * four tiles of 160px is the narrowest at which a six-character figure and a
+ * two-word label still stand on one line each. Two by two keeps every row
+ * full.
+ */
+@container crewlet-stat-group (width < 640px) {
+  .crewlet-stat-group[data-columns='4'] > *,
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard {
+    grid-column: span 6;
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(odd),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(even),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(even) {
+    border-left: 1px solid var(--color-border-default);
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(n + 3),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 3) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}
+
+/*
+ * THREE A ROW STACK under 480px of row (the small breakpoint's number), at the
+ * same 160px a tile. Folded to two, three tiles stood two and one, the last
+ * alone at double width and a different height, which read as a tile that had
+ * failed to load; one a row leaves no row short.
+ */
+@container crewlet-stat-group (width < 480px) {
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard {
+    grid-column: span 12;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard + .crewlet-statcard {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > :nth-child(n + 2),
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 2) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}

package/dist/TableCells/index.js

@@ -1,6 +1,6 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-K4VP6ZKE.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
-import '../chunk-GFV4LJHH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-GFV4LJHH.js';
+export { Tag } from '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-SRGTK5KI.css → Tag-2DQOVE6W.css}

@@ -277,12 +277,22 @@
   --crewlet-tag-line: var(--color-border-strong-hover);
 }
 
-/* The neutral outline is the engine's `.badge.outline`: the hairline step as
-   the boundary, and the tertiary ink, which is a quieter register than the
-   tinted outlines keep. It is the appearance for a value that is not a state
-   at all, so it says less than its neighbours on purpose. */
+/*
+ * The neutral outline: the neutral pill's own boundary with no fill, and the
+ * tertiary ink, which is a quieter register than the tinted outlines keep. It
+ * is the appearance for a value that is not a state at all, so it says less
+ * than its neighbours on purpose, by its ink and its empty ground.
+ *
+ * NOT BY A FAINTER EDGE. It used to take the plain hairline, the line that
+ * finds a card, and on the card it so often stands on that line measured
+ * 1.07:1 in dark: Limits' "Off" beside a filled "Default", an audit row's
+ * machine and open, a tool's "builtin", all read as loose words rather than
+ * as pills. The strong step is the edge the neutral soft pill already draws
+ * (1.49:1 dark, 1.52:1 light on the card), so the two neutral pills differ by
+ * their fill alone and both read as pills.
+ */
 .crewlet-tag--neutral.crewlet-tag--outline {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 

package/dist/TagsInput/index.js

@@ -1,5 +1,5 @@
-export { TagsInput } from '../chunk-3SBM4DGI.js';
-import '../chunk-GFV4LJHH.js';
+export { TagsInput } from '../chunk-BH52LIY6.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{chunk-K4VP6ZKE.js → chunk-4BJK7FE5.js}

@@ -1,5 +1,5 @@
 import { Link } from './chunk-FBSEJO2C.js';
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Avatar } from './chunk-PZKHBB7D.js';

package/dist/{chunk-3SBM4DGI.js → chunk-BH52LIY6.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { useListbox } from './chunk-7KHM2FZH.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-WX2NIG4G.js → chunk-BJI3RFXG.js}

@@ -1,5 +1,5 @@
 import { BrandLockup } from './chunk-7KBNFFM3.js';
-import { Card } from './chunk-5QXRI35B.js';
+import { Card } from './chunk-ZK3VYY7L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AuthLayout-ODHBUPHQ.css';
 import { useId } from 'react';

package/dist/{chunk-JXRI5YD2.js → chunk-BT5H2THK.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-PADTJCUQ.css';
+import './StatGroup-DOFHX5QJ.css';
 import { jsx } from 'react/jsx-runtime';
 
 function StatGroup({ columns = 4, flush = false, className, children, ...rest }) {
@@ -8,6 +8,7 @@ function StatGroup({ columns = 4, flush = false, className, children, ...rest })
     {
       ...rest,
       className: cx("crewlet-stat-group", flush && "crewlet-stat-group--flush", className),
+      "data-columns": columns,
       style: { "--crewlet-stat-group-cols": columns, ...rest.style },
       children
     }

package/dist/{chunk-HDHZWIFL.js → chunk-DYB66CNM.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-JBCZSSX3.css';
+import './AppShell-NDU4XMGF.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
@@ -122,6 +122,16 @@ function AppShell({
     },
     [mainRef]
   );
+  const [gutter, setGutter] = useState(0);
+  useLayoutEffect(() => {
+    if (!scroller) return void 0;
+    const measure = () => setGutter(Math.max(0, scroller.offsetWidth - scroller.clientWidth));
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [scroller]);
   const shell = {
     narrow,
     drawerOpen,
@@ -145,7 +155,11 @@ function AppShell({
         !shell.hasRail && "crewlet-app-shell--no-rail",
         className
       ),
-      style: drawerZ === null ? style : { ...style, ["--crewlet-app-shell-drawer-z"]: String(drawerZ) },
+      style: {
+        ...style,
+        ["--crewlet-app-shell-gutter"]: `${gutter}px`,
+        ...drawerZ === null ? null : { ["--crewlet-app-shell-drawer-z"]: String(drawerZ) }
+      },
       children: [
         /* @__PURE__ */ jsx(
           "a",

package/dist/{chunk-HMLAWVG6.js → chunk-IPWU6ERC.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-DZSBFITC.js → chunk-JZPK4IXR.js}

@@ -1,7 +1,7 @@
 import { TagGroup } from './chunk-O2EGEONV.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { ChangeMark } from './chunk-66X5WDKE.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-LFSIKGRQ.js';

package/dist/{chunk-GFV4LJHH.js → chunk-KYIAFNU7.js}

@@ -1,6 +1,6 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-SRGTK5KI.css';
+import './Tag-2DQOVE6W.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-F2XSYBKH.js → chunk-MFS6F2P7.js}

@@ -1,12 +1,14 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './DescriptionList-IXMRCSMK.css';
+import './DescriptionList-DEZISDLQ.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function DescriptionList({
   dense = false,
   fit = false,
+  termWidth,
   items,
   className,
+  style,
   children,
   ...rest
 }) {
@@ -14,6 +16,7 @@ function DescriptionList({
     "dl",
     {
       ...rest,
+      style: termWidth === void 0 ? style : { ...style, "--crewlet-description-list-term": termWidth },
       className: cx(
         "crewlet-description-list",
         dense && "crewlet-description-list--dense",

package/dist/{chunk-MICH6QSJ.js → chunk-OGXHZHRX.js}

@@ -1,7 +1,7 @@
 import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Disclosure-VKBJJIZ7.css';
+import './Disclosure-P4FH3C35.css';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-OHA6WSAG.js → chunk-OTCXRJ7D.js}

@@ -2,7 +2,7 @@ import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { ArtifactKindGround } from './chunk-UBZDYOCA.js';
-import { Card } from './chunk-5QXRI35B.js';
+import { Card } from './chunk-ZK3VYY7L.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
 import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';

package/dist/{chunk-MMPKN7WV.js → chunk-PT6WKXKW.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { Document } from './chunk-PWG3VHRQ.js';
-import { Composer } from './chunk-ISA2O2BK.js';
+import { Composer } from './chunk-ETVEGR2Y.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-NS4NSHVX.js → chunk-R2IBCEU6.js}

@@ -4,7 +4,7 @@ import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
 import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactMakeRow-W3RD5YWZ.css';
+import './ArtifactMakeRow-6UX2LTF7.css';
 import { useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -14,7 +14,17 @@ function ArtifactMakeRow({
   "aria-labelledby": ariaLabelledBy,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-make-row", className), children: /* @__PURE__ */ jsx("ul", { className: "crewlet-make-row__list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "crewlet-make-row__cell", children: /* @__PURE__ */ jsx(MakeItem, { item }) }, item.kind)) }) });
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-make-row", className), children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "crewlet-make-row__list",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-count": items.length,
+      style: { "--crewlet-make-row-count": items.length },
+      children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "crewlet-make-row__cell", children: /* @__PURE__ */ jsx(MakeItem, { item }) }, item.kind))
+    }
+  ) });
 }
 function MakeItem({ item }) {
   const { kind, label, detail, href, disabledReason } = item;

package/dist/{chunk-DQSXWQMJ.js → chunk-U3ILLCR2.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import './PricingCard-HTAHG4ST.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-YSG3DW7W.js → chunk-XBURIXHO.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-3TFDQLW3.js';
-import { Disclosure } from './chunk-MICH6QSJ.js';
-import { Composer } from './chunk-ISA2O2BK.js';
+import { Disclosure } from './chunk-OGXHZHRX.js';
+import { Composer } from './chunk-ETVEGR2Y.js';
 import { ArtifactPanel } from './chunk-Y5BD4MTE.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-5QXRI35B.js → chunk-ZK3VYY7L.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-QOVASQNU.css';
+import './Card-G2ZGT5Z6.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-RIAZM6L3.js → chunk-ZNOXQACX.js}

@@ -1,7 +1,7 @@
 import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Disclosure-VKBJJIZ7.css';
+import './Disclosure-P4FH3C35.css';
 import './Accordion-ZI2WLD5C.css';
 import { createContext, useState, useCallback, useMemo, useContext, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';