@crewlethq/ui 0.22.0 → 0.23.0

package/dist/styles.css

@@ -9193,7 +9193,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DateTimePicker-NJ6XH2TE.css */
+/* DateTimePicker-HG2KQXQ6.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -9355,7 +9355,7 @@ svg.crewlet-datetime__chevron {
   font-variant-numeric: tabular-nums;
   color: var(--color-text-primary);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   /* A box is a box: the corner every field in the package wears. */
   border-radius: var(--radius-md);
   outline: none;
@@ -11447,7 +11447,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-3KVSNUO5.css */
+/* Input-GBZSFXLU.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -11461,12 +11461,14 @@ svg.crewlet-datetime__chevron {
  * with padding on all four sides a 32px field drew 39px tall, so a field, the
  * button beside it and the select beside that were three heights.
  *
- * THE BOUNDARY IS --color-border-control, not the default border. A text
- * box, a checkbox and a switch are the three things on a page whose OUTLINE
- * is the control: with the ordinary hairline they measured 1.27:1 in light
- * and 1.75:1 in dark, which is a box a reader has to already know is there.
- * It is the one place this register does not follow the product's own
- * stylesheet, which draws every field on the panel hairline.
+ * THE BOUNDARY IS --color-border-field, not the default border. A text box
+ * is one of the few things on a page whose OUTLINE is the control: with the
+ * ordinary hairline it measured 1.27:1 in light and 1.75:1 in dark, which is
+ * a box a reader has to already know is there. The field step is the strong
+ * border lifted only as far as 3:1 on the rungs a field stands on, so it
+ * clears that floor without being the brightest edge on the page, which the
+ * control boundary was: held to every row composite a checkbox meets, it
+ * measured 4.9:1 on the card a search box nearly always sits on.
  *
  * AND A FOCUSED FIELD SHOWS ONE RING, drawn as an outline over that boundary.
  * Every field in this package states that rule for itself and states it the
@@ -11490,7 +11492,7 @@ svg.crewlet-datetime__chevron {
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   /* The boundary is the only thing that moves here. The ring is an outline,
      which takes no transition, and nothing else paints a shadow. */
@@ -11505,8 +11507,13 @@ svg.crewlet-datetime__chevron {
 
 .crewlet-input--sm { min-height: var(--size-control-sm); }
 
+/*
+ * UNDER THE POINTER THE EDGE STEPS UP, to the control boundary. The hover
+ * border is a hairline step, darker than the field's own edge, so a field
+ * that took it faded as the pointer reached it.
+ */
 .crewlet-input:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-control);
 }
 
 /*
@@ -11794,7 +11801,7 @@ svg.crewlet-datetime__chevron {
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
   box-sizing: border-box;
@@ -13155,7 +13162,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* MarkdownEditor-ZLSHTOIZ.css */
+/* MarkdownEditor-WOKV7CLK.css */
 /*
  * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
  * and the footer, in ONE box.
@@ -13177,14 +13184,15 @@ svg.crewlet-datetime__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   background: var(--color-surface-subtle);
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
 .crewlet-markdown-editor:hover {
-  border-color: var(--color-border-hover);
+  /* A step up from the field's edge, as every field takes (see Input.css). */
+  border-color: var(--color-border-control);
 }
 
 .crewlet-markdown-editor:has(.crewlet-markdown-editor__field:focus-visible) {
@@ -20375,7 +20383,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Switcher-B44Q4WF4.css */
+/* Switcher-K3EPA2RB.css */
 /*
  * The switcher: a button that is the page's name, and a banded panel under it
  * (a search band, a list that scrolls, and a footer that does not).
@@ -20596,17 +20604,23 @@ svg.crewlet-switcher-trigger__chevron {
 }
 
 /*
- * THE CURRENT SUBJECT, outlined by its own accent hairline inside the row: an
+ * THE CURRENT SUBJECT, in the accent's soft pair: the tint, and the line
+ * paired with it drawn inside the row, as a chosen chip is (see Tabs.css). An
  * outline rather than a shadow, so forced-colours mode keeps it. The row the
- * arrows are on takes the raised fill as every listbox row does; both can land
- * on one row, and it never gains a second border.
+ * arrows are on takes the raised fill as every listbox row does, and keeps it
+ * when it is the current row too, so the tint never hides where the arrows
+ * are; that row keeps the line, and it never gains a second border.
  */
 .crewlet-listbox__option.crewlet-switcher__option.is-current {
   color: var(--color-text-primary);
-  outline: 1px solid var(--color-brand-accent);
+  outline: 1px solid var(--color-brand-accent-soft-strong);
   outline-offset: -1px;
 }
 
+.crewlet-listbox__option.crewlet-switcher__option.is-current:not([aria-selected='true']):not(:hover) {
+  background: var(--color-brand-accent-soft);
+}
+
 /* A HELD ROW answers no pointer: no fill under it, and the reason in the quiet
    ink at its end says why. */
 .crewlet-listbox__option.crewlet-switcher__option[aria-disabled='true'] {
@@ -21003,7 +21017,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-ITJYJFMU.css */
+/* Tabs-CJGO35BH.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -21311,8 +21325,9 @@ b.crewlet-switcher__match {
  * QUIET CHIPS WITH NO WELL: the lenses of an object or a scope, set beside its
  * name in a page's bar. A well round them was a second box beside the name the
  * lenses are about, and a raised chip inside it a second highlight. Here the
- * chip that is on is drawn by its own border in the accent and nothing else,
- * which is the kit's one way of saying "this one is chosen".
+ * chip that is on is drawn in the accent's soft pair, the tint and the line
+ * paired with it, which is how the kit says "this one is chosen" on a chip
+ * (FilterChip draws the same pair).
  */
 .crewlet-tabs--chip {
   display: inline-flex;
@@ -21340,11 +21355,17 @@ b.crewlet-switcher__match {
   background: none;
 }
 
-/* An outline rather than a border, so a chip turning on does not move its
-   neighbours by a pixel, and forced-colors mode keeps it. */
+/*
+ * THE SOFT PAIR, not the solid accent. A full-strength accent ring round a
+ * chip is the brightest edge in the bar, louder than the name the lenses are
+ * about; the soft tint says which chip is on and the paired line gives it an
+ * edge. An outline rather than a border, so a chip turning on does not move
+ * its neighbours by a pixel, and forced-colors mode keeps it.
+ */
 .crewlet-tabs--chip .crewlet-tabs__tab.is-active {
+  background: var(--color-brand-accent-soft);
   color: var(--color-text-primary);
-  outline: 1px solid var(--color-brand-accent);
+  outline: 1px solid var(--color-brand-accent-soft-strong);
   outline-offset: -1px;
 }
 
@@ -21984,7 +22005,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagsInput-P2HS5QL4.css */
+/* TagsInput-XMXTI5Q4.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -22036,7 +22057,7 @@ b.crewlet-switcher__match {
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   outline: none;
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -22678,7 +22699,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-BZ5HHATU.css */
+/* TimeWindowPicker-T763GLXH.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -22981,7 +23002,7 @@ svg.crewlet-time-window__tick {
   min-height: var(--size-control-sm);
   padding: 0 var(--spacing-2);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-compact);
@@ -24908,7 +24929,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeGrid-FBX3MSJA.css */
+/* TreeGrid-UCPV37XB.css */
 /*
  * A hierarchy as rows and columns (TreeGrid.tsx).
  *
@@ -24955,6 +24976,18 @@ svg.crewlet-time-window__tick {
   border-radius: var(--radius-lg);
 }
 
+/*
+ * INSIDE A FLUSH CARD THE CARD IS THE FRAME. A flush card exists so that a
+ * table's rows reach its edges (Card.css), and a grid that drew its own border
+ * and corner there was a second rounded box one pixel inside the first, with
+ * the card's footer hanging outside it. The rows keep their own hairlines.
+ */
+.crewlet-card--flush .crewlet-tree-grid__grid {
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
 .crewlet-tree-grid__row {
   display: grid;
   grid-template-columns: var(--crewlet-tree-grid-columns, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.22.0",
+  "version": "0.23.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.22.0",
-    "@crewlethq/tokens": "0.22.0",
+    "@crewlethq/icons": "0.23.0",
+    "@crewlethq/tokens": "0.23.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/{chunk-L2OQRPXJ.js → chunk-ZM7HLFOA.js}

@@ -1,5 +1,5 @@
-import { ConfirmModal } from './chunk-F4DPAJCN.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
+import { ConfirmModal } from './chunk-F4DPAJCN.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';