@crewlethq/ui 0.14.0 → 0.15.0

package/dist/styles.css

@@ -535,7 +535,7 @@
 }
 
 
-/* AppShell-CEVLW4QG.css */
+/* AppShell-6QUD7NWM.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -753,7 +753,44 @@
     color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-app-shell__rail-row--action:hover {
+/*
+ * A CONTROL IN THE FOOT IS A ROW OF THE RAIL'S OWN GRAMMAR: the nav row's 30px
+ * step, its glyph-to-word gap, its word size and weight, and its secondary ink
+ * lifting to the primary under the pointer, as Settings above it is drawn. So
+ * the engine's row under Settings reads as one more row of the rail rather
+ * than as a caption, its words start on the line the nav's words start on, and
+ * it keeps one height in every state it says: one line of the compact step.
+ * A status line the rail only states keeps the quieter caption above, and the
+ * status block keeps its card.
+ *
+ * Its mark takes a nav glyph's width, `sm` (14px), whatever the mark is, so a
+ * 7px status dot is centred where the glyph above it is centred and the words
+ * beside it start where "Settings" starts.
+ */
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-height: var(--size-nav-row);
+  padding-block: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-snug);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block) > .crewlet-app-shell__rail-row-icon {
+  min-width: 14px;
+}
+
+/*
+ * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
+ * as long as the panel is open, drawn from `aria-expanded` so the picture and
+ * what a screen reader is told cannot come apart, as the switcher's trigger
+ * draws it.
+ */
+.crewlet-app-shell__rail-row--action:hover,
+.crewlet-app-shell__rail-row--action[aria-expanded='true'] {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
@@ -831,6 +868,42 @@
   flex: none;
 }
 
+/*
+ * THE COUNT: how many of something the row reports, after its words, drawn as
+ * a count in the nav is: the caption step, tabular figures so a count that
+ * ticks up does not move the words beside it, and a mark half a step off the
+ * figure. It is the tertiary step, as the nav's is, unless what it counts is
+ * wrong: a warning count is the warning ink, figure and mark together, which
+ * @crewlethq/tokens holds to 4.5:1 on the rail and under the hover overlay
+ * (RAIL_PAINTS), so on the row a panel is open from too.
+ */
+.crewlet-app-shell__rail-row-count {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: calc(var(--spacing-1) + 1px);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-app-shell__rail-row-count-mark {
+  display: inline-flex;
+}
+
+.crewlet-app-shell__rail-row-count--warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The chevron that says the row opens a panel, in the quiet step: a mark, not
+   a word, and it stays quiet while the row lifts, as the panel's own name is
+   what a reader is told. */
+.crewlet-app-shell__rail-row-opens {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
 /*
  * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
  * status, its words over a second line, on the card rung inside the plain
@@ -3297,7 +3370,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-JUERFLAR.css */
+/* Charts-JYW4X5ZL.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -3705,6 +3778,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   min-width: 0;
 }
 
+/*
+ * A FILL CHART GROWS INTO THE HEIGHT IT IS GIVEN (`height="fill"`). The figure
+ * flexes, so in a card a taller neighbour stretches it takes the spare height,
+ * and its rows (a style property) spend all of it on the plot's row. Nowhere to
+ * grow, it is as tall as its content, the plot at its least.
+ */
+.crewlet-stacked-columns--fill {
+  flex: 1 1 auto;
+}
+
 /*
  * EACH WORD IS A BOX OF NO HEIGHT, spread from the top of the plot to its
  * baseline, with the word centred on it: so every word stands exactly on the
@@ -3819,12 +3902,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * legend at its END, top right, where the design's Spend card draws it; the
  * legend is flushed to the end of that row and wraps from there. Below, the
  * legend starts under the axis, a step clear of the dates.
+ *
+ * ON A CARD TOO NARROW FOR BOTH, THE LEGEND TAKES A ROW OF ITS OWN, under the
+ * heading and still flushed to the end. Held on one line, the two shrank
+ * together and the legend stood beside the title as a column of one series a
+ * line. The rows stand a step apart, closer than the head stands to the plot,
+ * so the legend still reads as the head's.
  */
 .crewlet-stacked-columns__head {
   grid-column: 1 / -1;
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
-  gap: var(--spacing-4);
+  gap: var(--spacing-2) var(--spacing-4);
   margin-bottom: var(--spacing-3);
   min-width: 0;
 }
@@ -8065,7 +8155,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-YYY3V3O6.css */
+/* DescriptionList-IXMRCSMK.css */
 /*
  * Metadata pairs on one grid.
  *
@@ -8126,6 +8216,30 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+/*
+ * FIT: the term column is as wide as its longest term, and the pairs stay side
+ * by side at every width. It is for a panel of its own width, such as a
+ * popover, where the window's width says nothing about the room the list has:
+ * the narrow rule above is a question about the window, and a 260px panel is
+ * 260px on a phone and on a desktop alike. Its terms are a word each, so the
+ * column they take is a word wide and the details keep the rest.
+ *
+ * Written AFTER the narrow rule, which it overrides at the same weight, so
+ * nothing here has to outrank a media query.
+ */
+.crewlet-description-list--fit {
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-description-list--fit.crewlet-description-list--dense {
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+.crewlet-description-list--fit .crewlet-description-list__detail {
+  margin-bottom: 0;
+}
+
 
 /* DiffList-3EX64AAE.css */
 /* DiffList: one path per row, with its mark, its word and its tint.
@@ -10679,7 +10793,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layer-NAFSGCFA.css */
+/* Layer-J222IFNX.css */
 /*
  * The portal target a LayerHost provides.
  *
@@ -10691,13 +10805,23 @@ svg.crewlet-datetime__chevron {
  * Its container establishes the positioning context. A host whose parent is
  * static covers the nearest positioned ancestor instead, which is the
  * viewport in the common case and is still a usable bound.
+ *
+ * IT TAKES NO PLACE IN THE STACKING ORDER OF ITS OWN. Every surface drawn in
+ * it carries its own step in the layer band, its depth in the stack, and that
+ * is what decides what paints on top. A z-index here made the host a stacking
+ * context at the bottom of the band, which held everything inside it under
+ * whatever the page stacked above that step: the shell's open drawer takes
+ * the band's own steps beside the host rather than inside it, so a panel
+ * opened from the drawer was drawn under the drawer it came from. A surface
+ * at the same step as the drawer's rail, which is the next one opened above
+ * it, paints over the rail because the host follows the shell in the
+ * document.
  */
 
 .crewlet-layer-host {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  z-index: var(--z-index-layer-base);
 }
 
 .crewlet-layer-host > * {
@@ -10705,7 +10829,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layout-2ZCV3IGF.css */
+/* Layout-ZBEGLXAE.css */
 /*
  * Stack, Inline, Spacer and AutoGrid.
  *
@@ -10733,6 +10857,24 @@ svg.crewlet-datetime__chevron {
   flex-direction: row;
 }
 
+/*
+ * DRAWN AS A LIST, IT IS STILL A RUN OF ITEMS. A Stack or an Inline spends no
+ * pixel of its own, and a `ul` or an `ol` arrives with the browser's: a margin
+ * above and below, a 40px indent and a marker on every item, so a list of five
+ * names laid out as a Stack was pushed in and bulleted. They are taken back,
+ * and the element stays a list to a screen reader. A list that wants its
+ * markers is `List variant="bulleted"`.
+ *
+ * Inside :where(), so the rule weighs one class like every other here and a
+ * caller's own class still decides what it sets.
+ */
+:where(ul, ol).crewlet-stack,
+:where(ul, ol).crewlet-inline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
  * has room for and leaves the empty ones empty; `auto-fit`, which this was,
@@ -19899,7 +20041,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-VZKISP2S.css */
+/* Toaster-EOOOTSJT.css */
 /*
  * 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
@@ -20004,10 +20146,12 @@ svg.crewlet-time-window__tick {
 
 /*
  * 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.
+ * and the edge stays the hairline, so a failure is a rose mark 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. The wash is the
+ * countdown, so only a toast that counts down draws one: a success is a moss
+ * mark on a faint moss wash, and a failure, sticky unless it is given a
+ * duration, draws none. Information is the neutral mark on the neutral wash.
  */
 .crewlet-toast--success {
   --crewlet-toast-mark: var(--color-feedback-success-ink);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.14.0",
+  "version": "0.15.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.14.0",
-    "@crewlethq/tokens": "0.14.0"
+    "@crewlethq/icons": "0.15.0",
+    "@crewlethq/tokens": "0.15.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/Layer-NAFSGCFA.css

@@ -1,23 +0,0 @@
-/*
- * The portal target a LayerHost provides.
- *
- * It covers its container so a surface placed against its rectangle is placed
- * against the container, and it is inert until something is drawn in it: an
- * empty host over a canvas must not swallow the drag that pans the canvas.
- * Each overlay inside takes pointer events back for its own panel.
- *
- * Its container establishes the positioning context. A host whose parent is
- * static covers the nearest positioned ancestor instead, which is the
- * viewport in the common case and is still a usable bound.
- */
-
-.crewlet-layer-host {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: var(--z-index-layer-base);
-}
-
-.crewlet-layer-host > * {
-  pointer-events: auto;
-}