@crewlethq/ui 0.41.0 → 0.42.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-V3TAAYL3.css */
+/* AppShell-TSACKAU7.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -923,18 +923,21 @@
 }
 
 /*
- * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
- * its right edge is where every row's background ends; and its glyph stands
- * on the nav's glyph column: a row's glyph is the gutter and the row's pad
- * in, the field's is the gutter, its own 1px edge and its pad
- * (`SearchTrigger`'s two steps and a half), so the inset at its start makes
- * up the difference from those measures.
+ * THE RAIL'S FIELD IS A ROW'S WIDTH, compact: its edges are a nav row's
+ * highlight edges, the nav's gutter in from each side of the rail, and its
+ * content stands on a row's content columns through its pad
+ * (`--crewlet-rail-field-pad`, which the rail variant of `SearchTrigger`
+ * takes): the glyph on the nav's glyph column and the shortcut ending where a
+ * row's words end. A row's content is the gutter and the row's pad in; the
+ * field's is the slot's inset, its own 1px edge and its pad, so the inset at
+ * each end makes up the difference, which is the gutter.
+ *
+ * And it is held off the nav by the nav's own top inset alone, one step, so
+ * the field and the rows read as one group with the field first.
  */
 .crewlet-app-shell__rail-search {
-  padding: 0 var(--size-nav-gutter) var(--spacing-3);
-  padding-inline-start: calc(
-    var(--size-nav-gutter) + var(--size-nav-row-pad) - (var(--spacing-2) + var(--spacing-1) / 2) - 1px
-  );
+  --crewlet-rail-field-pad: calc(var(--size-nav-row-pad) - 1px);
+  padding: 0 calc(var(--size-nav-gutter) + var(--size-nav-row-pad) - var(--crewlet-rail-field-pad) - 1px);
 }
 
 /* The same gutter the nav takes, so what the foot says lines up with the rows
@@ -1515,22 +1518,40 @@
  * whatever size of badge a caller hands the row, it is centred where a glyph
  * is, and the row takes the nav row's pad and its glyph-to-word gap.
  */
+/*
+ * AND THE WORDS TAKE THE ROOM: the name and the detail are what the row is
+ * for, so every gap after the name is the half step and the menu's chevron
+ * stands one step off the words at least, at the link's end. The controls
+ * beside the link (Settings, Preferences) are half a step apart and half a
+ * step off the link, so a reader's name keeps the width two controls leave.
+ */
 .crewlet-app-shell__rail-foot .crewlet-account-row {
   --crewlet-account-row-pad: var(--spacing-0);
+  gap: calc(var(--spacing-1) / 2);
 }
 
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
-  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  gap: 0;
   /* On the foot's compact step: the two lines of name and detail with half a
      step above and below them, which still clears the avatar. */
   padding-block: calc(var(--spacing-1) / 2);
-  padding-inline-start: var(--size-nav-row-pad);
+  padding-inline: var(--size-nav-row-pad) calc(var(--spacing-1) / 2);
 }
 
 .crewlet-app-shell__rail-foot .crewlet-account-row__avatar {
   justify-content: center;
   width: 14px;
+  /* The nav's glyph-to-word gap, so the name starts on the nav's word line. */
+  margin-inline-end: calc(var(--spacing-2) + var(--spacing-1) / 2);
+}
+
+.crewlet-app-shell__rail-foot .crewlet-account-row__text {
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-app-shell__rail-foot .crewlet-account-row__actions {
+  gap: calc(var(--spacing-1) / 2);
 }
 
 /* The row as the reader's menu button: a button drawn as the link is. */
@@ -15398,7 +15419,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* IconButton-VYWP6SGW.css */
+/* IconButton-K24JQHLF.css */
 /*
  * IconButton: a square icon-only control.
  *
@@ -15517,6 +15538,27 @@ button.crewlet-finding-list__row:focus-visible {
   background: var(--color-surface-pressed);
 }
 
+/*
+ * THE PLACE THE READER IS ON (`IconButtonLink current`): the selected
+ * treatment a nav row draws, the lifted ground inside the default hairline,
+ * drawn on the square's own transparent boundary so nothing moves. With an
+ * edge to draw, its ring covers the edge, as the bordered squares' does.
+ */
+a.crewlet-icon-btn {
+  text-decoration: none;
+}
+
+.crewlet-icon-btn--current,
+.crewlet-icon-btn--current:hover {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-icon-btn--current:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /* ghost: transparent, neutral ink, a mild tint on hover. */
 .crewlet-icon-btn--ghost {
   color: var(--color-text-secondary);
@@ -22928,7 +22970,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SearchTrigger-KIZLWBEH.css */
+/* SearchTrigger-UAKWW5HT.css */
 /*
  * A button drawn as the field it stands in for.
  *
@@ -22958,16 +23000,18 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 /*
- * THE RAIL'S FIELD: the full width of the sidebar, on the SHEET's ground, and
- * a step taller than a control. It is the rail's one field and the first
- * thing in it under the company's name, and the design stands it at 34px,
- * the medium control and one scale step, so it reads as the way in rather
- * than as one more button.
+ * THE RAIL'S FIELD: the width of the slot it stands in, on the SHEET's
+ * ground, on the rail's compact step (the small control, 26px, never under
+ * the 24px target), with a tighter pad at each end. The rail's search slot
+ * names the pad (`--crewlet-rail-field-pad`), so its inset and the field's
+ * pad are one measure and the glyph lands on the nav's glyph column; outside
+ * that slot the field keeps the trigger's own pad.
  */
 .crewlet-search-trigger--rail {
   display: flex;
   width: 100%;
-  height: calc(var(--size-control-md) + var(--spacing-1));
+  height: var(--size-control-sm);
+  padding-inline: var(--crewlet-rail-field-pad, calc(var(--spacing-2) + var(--spacing-1) / 2));
   background: var(--color-surface-background);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.41.0",
+  "version": "0.42.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.41.0",
-    "@crewlethq/tokens": "0.41.0",
+    "@crewlethq/icons": "0.42.0",
+    "@crewlethq/tokens": "0.42.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",