@crewlethq/ui 0.81.1 → 0.82.0

package/dist/utils/focusModality.d.ts

@@ -55,3 +55,17 @@ export declare const FOCUS_RETURNED_ATTRIBUTE = "data-crewlet-focus-returned";
  * it the keyboard's, and the ring shows.
  */
 export declare function returnFocus(el: HTMLElement | null | undefined, options?: FocusOptions): boolean;
+/**
+ * Whether `el` holds the focus a ring is drawn for: KEYBOARD focus, the focus
+ * `:focus-visible` matches, less a focus handed back by `returnFocus` while
+ * the reader is using a pointer, which the base stylesheet draws no ring on
+ * either. A surface that keeps something open while its trigger is focused (a
+ * tooltip) asks this rather than "is it focused": a mouse press focuses a
+ * button too, and so does a layer handing focus back as it closes, and
+ * neither is a reader asking to read the hint.
+ *
+ * A browser that cannot answer for `:focus-visible` counts every focus as
+ * visible, the accessible failure mode: a missed answer costs some calm,
+ * never a keyboard reader's hint.
+ */
+export declare function isVisibleFocus(el: Element): boolean;

package/dist/utils/heldHint.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A control's hint while it is held (`disabledReason`): what it does, then
+ * why it cannot be used now, so the tip a pointer or a keyboard opens says
+ * both. "React with eyes. Join the room to react."
+ */
+export declare function heldHint(hint: string, reason: string | undefined): string;

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, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality, } from './focusModality.js';
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, isVisibleFocus, 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, FOCUS_RETURNED_ATTRIBUTE, isVisibleFocus, returnFocus, trackFocusModality, useFocusModality } from '../chunk-4ITETIGZ.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.81.1",
+  "version": "0.82.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.81.1",
-    "@crewlethq/tokens": "0.81.1",
+    "@crewlethq/icons": "0.82.0",
+    "@crewlethq/tokens": "0.82.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/ArtifactKinds-O3CALPVX.css

@@ -1,16 +0,0 @@
-/*
- * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
- * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
- * glyph is drawn in. Every surface that tints by kind reads these, so a kind
- * glyph in a bar, a card's badge and a Make row's tile repaint together with
- * the theme, and no surface spells a kind's colour of its own. A sheet of
- * its own, imported by each surface that tints, because the glyph's module
- * carries no stylesheet (a frame that draws one glyph takes nothing else).
- */
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
-.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
-.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
-.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
-.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); }
-.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }

package/dist/{chunk-PLNJEDGI.js → chunk-I4IO56EY.js}

@@ -1,5 +1,5 @@
-import { announce } from './chunk-2G355KDJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArrangeFrame-QCQZ5RF6.css';
 import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';

package/dist/{chunk-624X3RVA.js → chunk-O55JQ7BE.js}

@@ -1,5 +1,5 @@
-import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { toISO, useNow, formatRelative } from './chunk-EJNJMHQG.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-TMGT265J.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';