@crewlethq/ui 0.64.1 → 0.65.0

package/dist/styles.css

@@ -12206,7 +12206,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* DataGrid-QYORTTHI.css */
+/* DataGrid-NHIN2I42.css */
 /*
  * DataGrid: a list as columns, one track list on the grid.
  *
@@ -12676,7 +12676,7 @@ button.crewlet-data-grid__row-link {
   }
 }
 
-/* ---- A ROW IS A CARD ON A PHONE -----------------------------------------
+/* ---- A ROW IS A CARD ON A PHONE, OR WHERE COLUMNS DO NOT FIT -----------------------------------------
    A GRID IS COLUMNS, AND A PHONE DOES NOT HAVE THEM: the grid clips (for its
    sticky head), so the columns past the edge were cut off with nothing to
    scroll to, and a sideways scroller resolves every flexible track to zero. So
@@ -12686,113 +12686,116 @@ button.crewlet-data-grid__row-link {
    (`:empty`), and a cell that draws a marked absence has content and stays.
    The sort is in the application's state, so a sorted list still arrives
    sorted. */
-@media (width < 640px) {
-  .crewlet-data-grid {
-    /* No ghost control is pulled out here (see above): every line of a card
-       starts at the grid's edge, and a compact row's marks run on one line,
-       where the hover ground swallowed the gap before it. */
-    --crewlet-data-grid-control-outdent: 0px;
+/* Card rows are the grid's own decision (`data-stacked`, DataGrid.tsx): set
+   on a phone, and wherever the grid's own width cannot hold its columns once
+   every give-way column has gone. `:where()` keeps each rule's weight what it
+   was when this block was a media query, so a rule written against the card
+   shape still wins where it did. */
+.crewlet-data-grid:where([data-stacked]) {
+  /* No ghost control is pulled out here (see above): every line of a card
+     starts at the grid's edge, and a compact row's marks run on one line,
+     where the hover ground swallowed the gap before it. */
+  --crewlet-data-grid-control-outdent: 0px;
 
-    display: block;
-  }
+  display: block;
+}
 
-  .crewlet-data-grid__head {
-    display: none;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__head {
+  display: none;
+}
 
-  .crewlet-data-grid__body,
-  .crewlet-data-grid__band {
-    display: block;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__body,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__band {
+  display: block;
+}
 
-  .crewlet-data-grid__row {
-    display: block;
-    padding: var(--spacing-2) var(--crewlet-data-grid-edge);
-    min-height: 0;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__row {
+  display: block;
+  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
+  min-height: 0;
+}
 
-  /* A FIXED BASIS lines the names up without a track, and the name wraps
-     inside it rather than pushing its value past every other card line. */
-  .crewlet-data-grid__cell {
-    display: flex;
-    align-items: baseline;
-    gap: var(--spacing-3);
-    padding: 1px 0;
-    min-width: 0;
-  }
+/* A FIXED BASIS lines the names up without a track, and the name wraps
+   inside it rather than pushing its value past every other card line. */
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding: 1px 0;
+  min-width: 0;
+}
 
-  .crewlet-data-grid__cell:empty {
-    display: none;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell:empty {
+  display: none;
+}
 
-  .crewlet-data-grid__cell[data-label]::before {
-    content: attr(data-label);
-    flex: 0 0 7rem;
-    overflow-wrap: anywhere;
-    font-size: var(--font-size-2xs);
-    text-transform: uppercase;
-    letter-spacing: var(--font-letter-spacing-wide);
-    color: var(--color-text-tertiary);
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell[data-label]::before {
+  content: attr(data-label);
+  flex: 0 0 7rem;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+}
 
-  /* `shrink` and `right` are column shapes, and there are no columns here. */
-  .crewlet-data-grid__cell--shrink,
-  .crewlet-data-grid__cell--right {
-    white-space: normal;
-    justify-content: flex-start;
-  }
+/* `shrink` and `right` are column shapes, and there are no columns here. */
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--shrink,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right {
+  white-space: normal;
+  justify-content: flex-start;
+}
 
-  .crewlet-data-grid__cell .crewlet-data-grid__truncate {
-    white-space: normal;
-    overflow: visible;
-    text-overflow: clip;
-    overflow-wrap: anywhere;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell .crewlet-data-grid__truncate {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
+}
 
-  /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
-     TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
-     breaks once: the lead cells first, a zero-height full-width `::after`
-     between them and the rest, then every other cell in column order. */
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacing-1) var(--spacing-2);
-  }
+/* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
+   TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
+   breaks once: the lead cells first, a zero-height full-width `::after`
+   between them and the rest, then every other cell in column order. */
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row::after {
-    content: '';
-    order: 1;
-    flex-basis: 100%;
-    height: 0;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__row::after {
+  content: '';
+  order: 1;
+  flex-basis: 100%;
+  height: 0;
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell {
-    order: 2;
-    padding: 0;
-    align-items: center;
-    gap: var(--spacing-1);
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell {
+  order: 2;
+  padding: 0;
+  align-items: center;
+  gap: var(--spacing-1);
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-lead] {
-    order: 0;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-lead] {
+  order: 0;
+}
 
-  /* The title takes the rest of the first line, beside the key. */
-  .crewlet-data-grid[data-phone-rows='compact']
-    .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
-    flex: 1 1 0;
-    min-width: 0;
-    font-weight: var(--font-weight-medium);
-  }
+/* The title takes the rest of the first line, beside the key. */
+.crewlet-data-grid[data-phone-rows='compact']
+  .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
+  flex: 1 1 0;
+  min-width: 0;
+  font-weight: var(--font-weight-medium);
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-label]::before {
-    content: none;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-label]::before {
+  content: none;
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-phone-omit] {
-    display: none;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-phone-omit] {
+  display: none;
 }
 
 
@@ -21577,10 +21580,19 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListDetail-5NXERLRJ.css */
+/* ListDetail-N3L7PB46.css */
 /*
  * ListDetail: a list beside the detail of what is chosen in it, each scrolling
- * on its own in the height it is given, one pane on a phone (ListDetail.tsx).
+ * on its own in the height it is given, one pane where it is narrow
+ * (ListDetail.tsx).
+ *
+ * IT FOLDS BY ITS OWN WIDTH, NOT THE WINDOW'S. The root is an inline-size
+ * container and the panes are its child, so the fold answers how wide THIS
+ * list and detail are: beside an aside the reader opened (the assistant) a
+ * 1375px window can leave the screen 443px, and a fold that asked the window
+ * drew the detail 130px wide beside a 17rem list. The phone rule below is the
+ * one decision that stays the window's: on a phone the page scrolls as a
+ * whole rather than each pane on its own.
  */
 
 /* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
@@ -21589,11 +21601,20 @@ a.crewlet-icon-btn {
 .crewlet-list-detail {
   --crewlet-list-detail-gutter: var(--spacing-7);
 
+  container: crewlet-list-detail / inline-size;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__panes {
   display: grid;
   flex: 1 1 auto;
   grid-template-columns: var(--crewlet-list-detail-list, 17rem) minmax(0, 1fr);
   gap: var(--crewlet-list-detail-gutter);
-  height: 100%;
   min-width: 0;
   min-height: 0;
 }
@@ -21616,19 +21637,18 @@ a.crewlet-icon-btn {
   overflow-y: auto;
 }
 
-@media (width < 640px) {
-  .crewlet-list-detail {
+/* ONE PANE UNDER 640px OF ITS OWN WIDTH: the list and a reading detail do not
+   both fit, so the pane `showing` names takes the whole width and keeps its
+   own scroller, which is what lets it sit in a screen that fills the window. */
+@container crewlet-list-detail (width < 640px) {
+  .crewlet-list-detail__panes {
     grid-template-columns: minmax(0, 1fr);
-    height: auto;
   }
 
   .crewlet-list-detail__list {
     padding-right: 0;
     border-right: 0;
-  }
-
-  .crewlet-list-detail__detail {
-    overflow: visible;
+    overflow-y: auto;
   }
 
   .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
@@ -21637,6 +21657,18 @@ a.crewlet-icon-btn {
   }
 }
 
+/* ON A PHONE THE PAGE SCROLLS AS A WHOLE, as tall as its content. */
+@media (width < 640px) {
+  .crewlet-list-detail {
+    height: auto;
+  }
+
+  .crewlet-list-detail__list,
+  .crewlet-list-detail__detail {
+    overflow: visible;
+  }
+}
+
 
 /* ListInput-4ISMGZDQ.css */
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.64.1",
+  "version": "0.65.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.64.1",
-    "@crewlethq/tokens": "0.64.1",
+    "@crewlethq/icons": "0.65.0",
+    "@crewlethq/tokens": "0.65.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",