@crewlethq/ui 0.4.2 → 0.4.4

package/dist/styles.css

@@ -3506,7 +3506,7 @@
 }
 
 
-/* DataTable-ITNACQ2X.css */
+/* DataTable-37UWTRN6.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
  *
@@ -3525,11 +3525,15 @@
   --crewlet-data-table-active-sort-color: var(--color-brand-accent-ink);
   width: 100%;
   position: relative;
-  overflow-x: auto;
-  /* The gesture stops at the table's own edge. Without it a trackpad swipe
-     that runs out of table carries on into the browser's back navigation, so
-     one column too far left loses the page. */
-  overscroll-behavior-x: contain;
+  /* NO SCROLLER HERE. This carried `overflow-x: auto` and its own
+     `overscroll-behavior-x`, and neither could act: `.crewlet-data-table__scroll`
+     is rendered inside it for BOTH variants at `width: 100%`, so it absorbs
+     the table's width and the root never has anything to scroll. What the
+     declaration did still do is make this a scroll container — and per CSS
+     Overflow that pulls `overflow-y` to `auto` as well — so it quietly became
+     the scrollport a `position: sticky` descendant resolves against. The inner
+     wrapper carries the real scrolling and the gesture containment, which is
+     what the layout comment further down already describes. */
 }
 
 .crewlet-data-table--default .crewlet-data-table__table {
@@ -8597,7 +8601,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Listbox-X2DOTSQA.css */
+/* Listbox-ZXYYNN6U.css */
 /*
  * The listbox register: one look for every list a field offers.
  *
@@ -8632,6 +8636,29 @@ svg.crewlet-datetime__chevron {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  /*
+   * A ROW IS NEVER SHRUNK BELOW ITS OWN CONTENT, and `flex: none` is what says
+   * so. The list above is a column flex container with a `max-height` and
+   * `overflow-y: auto`, which makes every row a flex ITEM, and a flex item's
+   * automatic minimum size is normally its content — that is what stops a
+   * column from compressing its children and makes the container scroll
+   * instead. The `min-height` below REPLACES that automatic minimum with a
+   * fixed floor, so once the rows no longer fit, the free space goes negative
+   * and every row shrinks to exactly that floor BEFORE the scrollbar appears.
+   * A row is `overflow: visible`, so its content then paints over its
+   * neighbours.
+   *
+   * It is not a corner case: a row is 19.5px of text plus 16px of padding =
+   * 35.5px against a 28px floor, so EVERY row of a list long enough to scroll
+   * was over-tall. Measured in Chromium on a nine-option Select — five rows
+   * drawn over each other, two of them at 59px inside a 28px box.
+   *
+   * `flex: none` is `0 0 auto`: the basis stays content-derived and the row
+   * can no longer shrink, which leaves `min-height` doing the one job it was
+   * written for — a floor under a SHORT row, not a cap on a tall one. The
+   * scroller absorbs the excess, one row deep, which is what it is for.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-md);
@@ -8703,14 +8730,19 @@ svg.crewlet-datetime__chevron {
   font-size: var(--font-size-compact);
 }
 
+/* AND NEITHER IS THE SEPARATOR, for the same reason one step further: its
+   content minimum is zero, so it is the one child a squeezed column can
+   flatten completely — exactly when the list is long enough to need the
+   grouping it draws. */
 .crewlet-listbox__separator {
+  flex: none;
   height: 1px;
   margin: var(--spacing-1) 0;
   background: var(--color-border-default);
 }
 
 
-/* Menu-6DE7I66I.css */
+/* Menu-BT5PMFJI.css */
 /*
  * The menu button's panel.
  *
@@ -8783,6 +8815,21 @@ svg.crewlet-datetime__chevron {
   align-items: center;
   gap: var(--spacing-2);
   width: 100%;
+  /*
+   * THE SAME RULE THE LISTBOX ROW STATES, and it has to be stated twice
+   * because a menu's rows are deliberately not in that family (see the head of
+   * Listbox.css). The panel above is a column flex scroller, `__group` is
+   * `display: contents` so every item is a direct flex item of it, and the
+   * `min-height` below replaces the automatic minimum that would otherwise
+   * hold a row at its content. Once the menu is long enough to scroll, the
+   * free space goes negative and the rows shrink to that floor first.
+   *
+   * A plain row survives it by accident — one nowrap line is 19.5px, under the
+   * floor, so there is nothing to shrink. A `--described` row does not: it
+   * adds `padding-block` and stacks a label over a wrapping description, which
+   * is ~52px squeezed into 28px and drawn over the rows either side.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: 0 var(--spacing-2);
   border: none;
@@ -11409,7 +11456,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Select-2X77FSWR.css */
+/* Select-E24U5LBC.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -11709,9 +11756,25 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/*
+ * ONE LINE, WHICH IS WHAT THE ELLIPSIS BELOW WAS ALWAYS FOR. `overflow:
+ * hidden` clips what leaves the box and `text-overflow` replaces what a LINE
+ * cannot hold — and neither does anything to text that is simply allowed to
+ * wrap, which is what this rule did without `white-space`. A long option
+ * silently grew a second line instead of ellipsing, and with the row's own
+ * flex minimum gone (see Listbox.css) that second line was drawn over the
+ * option underneath.
+ *
+ * The trigger's `.crewlet-select__label` a hundred lines above has carried all
+ * three since it was written; this is the same register on the same text, and
+ * `.crewlet-listbox__hint` states the rule outright — "never wrapped: a hint
+ * that broke across two lines turned every row in the list a different
+ * height".
+ */
 .crewlet-select__option-label {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .crewlet-select__option-desc {
@@ -11729,6 +11792,24 @@ svg.crewlet-select__chevron {
 
 /* ── The search box ──────────────────────────────────────────────────── */
 
+/*
+ * THE RING IS DRAWN WHERE THE ELEMENT IS. The input below clears the user
+ * agent's outline, and the frame's `:focus-within` rule is the package's one
+ * replacement for it — but that rule's own premise is that everything
+ * focusable sits INSIDE `.crewlet-select`, and this box does not: the panel is
+ * portalled into the layer host, outside that subtree, so `:focus-within`
+ * could never match while focus was in the search field. And focus is moved
+ * here on every open, so the one control a searchable Select puts a reader in
+ * was the one with no focus indicator at all.
+ *
+ * On the band rather than the input, and INSET, because the panel clips: an
+ * outset ring on the input would be cut by the menu's own `overflow: hidden`.
+ */
+.crewlet-select__search:focus-within {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-select__search {
   display: flex;
   align-items: center;
@@ -12964,7 +13045,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Table-MDOLVUAW.css */
+/* Table-TGCS4C3F.css */
 /*
  * Table: the operator's table, on the elements a table is made of.
  *
@@ -12996,10 +13077,20 @@ svg.crewlet-select__chevron {
 .crewlet-table__container {
   /* The overflow is a safety net for a cell that cannot wrap (a long token, a
      hash); the fixed layout below is what keeps a table inside the width it is
-     given. A `maxHeight` turns this into the vertical scroller the sticky
-     header needs, which is the only way a long table keeps its column names. */
-  overflow-x: auto;
-  overflow-y: var(--crewlet-table-overflow-y, visible);
+     given. A `maxHeight` gives it something to scroll vertically, which is
+     what the sticky header needs and the only way a long table keeps its
+     column names.
+
+     BOTH AXES, STATED. This was `overflow-y: var(--crewlet-table-overflow-y,
+     visible)`, and the fallback was unreachable: per CSS Overflow, when one
+     axis is not `visible` the other computes to `auto`, so the unconditional
+     `overflow-x: auto` beside it made this box a scrollport in both
+     directions in every state. The variable had exactly one reachable value —
+     the `auto` Table.tsx wrote beside the max-height — so it read as a knob
+     with a default nothing could ever select. Without a max-height there is
+     simply nothing to scroll to, which is what made the difference invisible
+     rather than what made it absent. */
+  overflow: auto;
   max-height: var(--crewlet-table-max-height, none);
   overscroll-behavior-x: contain;
   flex: 1;
@@ -13126,7 +13217,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-VLICJFVB.css */
+/* Tabs-MJ2E3VPK.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -13179,7 +13270,21 @@ svg.crewlet-select__chevron {
    */
   content: '';
   position: absolute;
-  bottom: -1px;
+  /*
+   * ON THE PADDING EDGE, NOT BELOW IT. This is an absolutely positioned child
+   * of the row, and the row is a scroll container: `overflow-x: auto` makes
+   * `overflow-y` compute to `auto` as well, so there is no axis on which it
+   * does not clip. Clipping is to the PADDING edge and the row's own 1px
+   * `border-bottom` lies outside it, so at `bottom: -1px` a 2px bar was cut in
+   * half — and the half removed was the lower one, the half meant to sit on
+   * the baseline rule and replace it. `scrollbar-width: none` above then hid
+   * the 1px vertical scrollbar that would have given the game away.
+   *
+   * `overflow: visible` is not the way out: the horizontal scrolling is the
+   * row's whole contract. The bar sits at 0 instead and paints over the row's
+   * last two pixels, which is where a reader sees it anyway.
+   */
+  bottom: 0;
   /*
    * Under the LABEL, not under the tab's box: the measurement is the button,
    * which carries the small side pad an inset focus ring needs, and a bar
@@ -13237,6 +13342,24 @@ svg.crewlet-select__chevron {
   align-items: center;
   justify-content: center;
   gap: var(--spacing-1);
+  /*
+   * A TAB IS NEVER SQUEEZED, which is what makes the row above it SCROLL.
+   *
+   * `.crewlet-tabs--underline` is a `width: 100%` flex row with
+   * `overflow-x: auto`, and its own comment states the contract: the row
+   * scrolls rather than overflowing the page. That behaviour came entirely
+   * from each tab's automatic minimum resolving to its `nowrap` label, which
+   * is what makes the line unable to fit — and the explicit `min-width` below
+   * REPLACES that automatic minimum with a flat 24px for every item, not just
+   * the narrow ones the floor is for. With the default `flex-shrink: 1` the
+   * tabs were squeezed toward 24px until the line fitted, the strip stopped
+   * scrolling, and the labels — `nowrap`, with `min-width: 0` and no clip —
+   * spilled out of their buttons over their neighbours.
+   *
+   * `flex: none` is what the comment above already claims: "a tab whose label
+   * is wider than the floor is untouched".
+   */
+  flex: none;
   /* Never under the 24px target floor, at any density. */
   min-height: var(--size-control-sm);
   min-width: var(--size-target-min);

package/package.json

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