@crewlethq/ui 0.37.0 → 0.38.0

package/dist/utils/focusModality.d.ts

@@ -22,7 +22,10 @@
  * focus is NOT in a text-entry control (Enter on a link, the arrows in a
  * radio group, Escape out of a menu), because those keys move focus. Typing
  * inside a field does not, or the ring would widen under every character a
- * reader typed into a field they clicked. A modifier on its own is neither.
+ * reader typed into a field they clicked. A modifier on its own is neither. A
+ * shortcut (Cmd or Ctrl with a key) is the keyboard outside a field, since it
+ * opens a palette or a dialog whose focus goes back on Escape, and neither
+ * inside one, where it is copy, paste or undo.
  *
  * One listener set per document however many fields mount, counted, and taken
  * down when the last one unmounts.
@@ -39,3 +42,16 @@ export declare const FOCUS_MODALITY_ATTRIBUTE = "data-crewlet-focus";
 export declare function trackFocusModality(doc?: Document): () => void;
 /** Track the modality for as long as the calling component is mounted. */
 export declare function useFocusModality(): void;
+export declare const FOCUS_RETURNED_ATTRIBUTE = "data-crewlet-focus-returned";
+/**
+ * Hand focus back to `el` (the trigger a surface opened from, the button an
+ * inline editor replaced) and report whether it took it.
+ *
+ * A focus moved by script after a text field matches `:focus-visible`, since
+ * the field always did. So a palette opened with a click and closed with
+ * Escape left its trigger ringed as if it had been tabbed to. The element is
+ * marked until it blurs, and the base stylesheet draws no ring on a marked
+ * element while the modality is the pointer's. A key pressed afterwards makes
+ * it the keyboard's, and the ring shows.
+ */
+export declare function returnFocus(el: HTMLElement | null | undefined, options?: FocusOptions): boolean;

package/dist/utils/index.d.ts

@@ -14,5 +14,5 @@ export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './nodeHue.js';
 export type { NodeHue } from './nodeHue.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './headingLevel.js';
 export type { HeadingLevel, HeadingLevelProviderProps } from './headingLevel.js';
-export { FOCUS_MODALITY_ATTRIBUTE, trackFocusModality, useFocusModality } from './focusModality.js';
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality, } from './focusModality.js';
 export type { FocusModality } from './focusModality.js';

package/dist/utils/index.js

@@ -3,6 +3,6 @@ export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
-export { FOCUS_MODALITY_ATTRIBUTE, trackFocusModality, useFocusModality } from '../chunk-YSGLEHND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality } from '../chunk-NUZHC6MM.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.37.0",
+  "version": "0.38.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.37.0",
-    "@crewlethq/tokens": "0.37.0",
+    "@crewlethq/icons": "0.38.0",
+    "@crewlethq/tokens": "0.38.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/StatGroup-PADTJCUQ.css

@@ -1,86 +0,0 @@
-/*
- * A row of stat tiles.
- *
- * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
- * tiles appeared and vanished moved every number on the page for a reason that
- * had nothing to do with the numbers, which is exactly what a reader watching
- * a live board is trying not to have happen.
- */
-
-.crewlet-stat-group {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the card's surface, its hairline and its 12px
-     corner, flat as every card is, and `overflow: hidden`, which is what lets
-     the tiles inside sit against the corners without their own hairlines
-     escaping past them. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-/* Inside another card: the card's surface and edge are the row's. */
-.crewlet-stat-group--flush {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A tile inside the row brings no surface of its own, whether or not its
- * caller remembered `flush`. The group draws one card and the hairlines
- * inside it, so a tile that kept its own border and radius is a card inside
- * a card: a box inside a box, which is what the reader sees.
- *
- * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
- * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
- * which one painted was settled by whichever stylesheet the bundler put
- * last. It put the tile's last, and every tile in every group drew its own
- * border, its own 12px corner and its own surface inside the group's.
- * Naming both classes settles it by weight, which no import order can undo.
- */
-.crewlet-stat-group > .crewlet-statcard {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A hairline between columns, drawn on the tile that follows one.
- *
- * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
- * weighs two classes, so a one-class selector here loses to it and the row
- * of numbers runs together with nothing between the columns. The first
- * selector matches whatever a caller puts in the row; the second weighs the
- * same as the rule it has to beat, and sits after it.
- */
-.crewlet-stat-group > * + *,
-.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
-  border-left: 1px solid var(--color-border-default);
-}
-
-/*
- * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row, and strictly under it, as the shell switches. The step is
- * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
- * is the width at which the shell stops holding the page beside the rail. The
- * rules are written for the general case rather than per column count: the
- * first tile of each pair loses its left hairline, and everything on the
- * second row and below gains a top one.
- */
-@media (width < 1024px) {
-  .crewlet-stat-group {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .crewlet-stat-group > *:nth-child(odd),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
-    border-left: 0;
-  }
-
-  .crewlet-stat-group > *:nth-child(n + 3),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
-    border-top: 1px solid var(--color-border-default);
-  }
-}

package/dist/chunk-WKEPORNM.js

@@ -1,2 +0,0 @@
-import './Tabs-MMZXV5EF.css';
-import './SegmentedControl-FLI45IOW.css';