@crewlethq/ui 0.4.4 → 0.5.0

package/dist/Checkbox/index.js

@@ -1,2 +1,2 @@
-export { Checkbox } from '../chunk-2PRH365R.js';
+export { Checkbox } from '../chunk-UA7O3KKJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Checkbox-VGW26YLQ.css → Checkbox-BOXQ747I.css}

@@ -44,8 +44,8 @@
   flex: 0 0 auto;
   /*
    * THE TICK IS THE ACCENT, which is what "here, this one" means everywhere
-   * else in the system. It used to read --color-brand-primary, which is white
-   * in the dark theme: a white tick on a white box.
+   * else in the system. It used to read the monochrome brand fill, which was
+   * white in the dark theme: a white tick on a white box.
    */
   accent-color: var(--color-brand-accent);
   cursor: pointer;

package/dist/CodeBlock/index.js

@@ -1,7 +1,7 @@
-export { CodeBlock } from '../chunk-D35VTV2Z.js';
-import '../chunk-3QRYCPXQ.js';
+export { CodeBlock } from '../chunk-SV7QAONL.js';
+import '../chunk-OPKIKM35.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-MW356IVK.js';
-import '../chunk-KIC7BZYJ.js';
-import '../chunk-GKHAKGOF.js';
+export { Combobox } from '../chunk-D6EVJUGU.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-DSUY5F4E.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/CommandPalette.d.ts

@@ -5,8 +5,18 @@ export interface CommandPaletteItem {
     /** A glyph, drawn beside the label. Decorative: the label carries the words. */
     icon?: ReactNode;
     label: ReactNode;
-    /** What the row is, at its end: a path, a kind, a state. */
+    /**
+     * What the row is, read straight after its label in the quiet ink: a path, a
+     * state, who owns it. It runs on the label's line and is cut with it.
+     */
     hint?: ReactNode;
+    /**
+     * What sits at the row's END: a short fact (the space a page is in) or a
+     * `Kbd` naming the accelerator that runs the row from anywhere in the
+     * surface. It only DRAWS the key: the chord itself is the application's, on
+     * the palette's `onKeyDown`, like the chord that opens it.
+     */
+    meta?: ReactNode;
     onSelect: () => void;
 }
 export interface CommandPaletteGroup {
@@ -15,6 +25,41 @@ export interface CommandPaletteGroup {
     label: string;
     items: CommandPaletteItem[];
 }
+/** One scope the search can be narrowed to: a tab over the results. */
+export interface CommandPaletteScope {
+    /** Stable identity: the value `scope`, `onScopeChange` and `groupsScope` carry. */
+    id: string;
+    label: string;
+    /** How many results the scope holds, drawn as a `Count` beside its label. */
+    count?: number | undefined;
+}
+/**
+ * Scopes come as a SET or not at all. A scope row without its controlled value
+ * is a tablist with nothing selected; one without `groupsScope` is a palette
+ * that cannot tell the results it was handed from the results it asked for,
+ * which is the one thing the row makes possible to get wrong.
+ */
+export type CommandPaletteScopeProps = {
+    scopes?: undefined;
+    scope?: undefined;
+    onScopeChange?: undefined;
+    groupsScope?: undefined;
+    scopesLabel?: undefined;
+} | {
+    /** The scopes, in the order the row draws them and Tab walks them. */
+    scopes: CommandPaletteScope[];
+    /** The scope the reader has chosen. */
+    scope: string;
+    onScopeChange: (scope: string) => void;
+    /**
+     * THE SCOPE `groups` WAS COMPUTED FOR. While it is not `scope`, the rows
+     * are withheld and the list says it is searching, so results that arrive
+     * after the reader moved on are never offered under the scope they left.
+     */
+    groupsScope: string;
+    /** Names the row of scopes. */
+    scopesLabel?: string | undefined;
+};
 /**
  * Rest props reach the Modal's frame, which is what lets an application put
  * its own chord on the surface (see the component doc).
@@ -25,7 +70,7 @@ export interface CommandPaletteGroup {
  * the three ARIA relationships, which the Modal decides: `label` names this
  * surface and its field together.
  */
-export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'onSubmit' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> {
+export type CommandPaletteProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'role' | 'onSubmit' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & CommandPaletteScopeProps & {
     open: boolean;
     onClose: () => void;
     /** Names the surface and its field. */
@@ -35,13 +80,32 @@ export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLElement>, '
     /** What is offered right now. The caller does the searching and the ranking. */
     groups: CommandPaletteGroup[];
     placeholder?: string | undefined;
-    /** The hints under the results, usually `Kbd` keycaps. */
+    /**
+     * What the surface says BEFORE its results, outside the list: an answer
+     * written from what the rows point at, a notice about the search itself.
+     * It is a polite live region, so what arrives in it is read without moving
+     * the highlight, and it is never an option: Enter still takes the row the
+     * arrows are on.
+     */
+    lead?: ReactNode;
+    /** The key legend under the results, usually `Kbd` keycaps with a word each. */
     footer?: ReactNode;
+    /**
+     * Draws an `Esc` keycap at the END of the field, the approved design's
+     * reminder of how the surface closes. Off by default: it names a key, so
+     * it belongs on a surface a keyboard reaches, and an application that also
+     * opens the palette from a touch target decides whether that is the one
+     * every reader of it has. The key itself always closes the surface; this
+     * only draws it.
+     */
+    escapeHint?: boolean | undefined;
     /** Said when the query matches nothing. Name the kind of nothing it is. */
     emptyMessage?: string | undefined;
+    /** Said while the rows handed over answer a scope the reader has left. */
+    pendingMessage?: string | undefined;
     /** Names the result list itself. */
     resultsLabel?: string | undefined;
-}
+};
 /**
  * One search surface for a whole product: screens, records, and any id pasted
  * out of a log.
@@ -58,6 +122,31 @@ export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLElement>, '
  * instead put up to forty tab stops between the field and itself, and the
  * highlight moved in silence.
  *
+ * THE SCOPES ARE TABS NOBODY TABS TO. Focus never leaves the field, so the
+ * scope row is driven FROM it: Tab and Shift+Tab step through the scopes, and
+ * so do the left and right arrows while the field is empty (with text in it
+ * they move the caret, which is their job first). Each is still a real `tab` in
+ * a real `tablist` whose `tabpanel` is the results, and a press on one picks it
+ * without taking focus from the field. What the row costs is Tab's usual job,
+ * which in a surface whose only stop is the field was wrapping focus back to
+ * where it already was. The change is SAID, in a hidden status line, because a
+ * tab selected from somewhere else is otherwise silent.
+ *
+ * A SCOPE THAT HAS MOVED ON WITHHOLDS THE ROWS OF THE ONE BEFORE. A caller that
+ * searches asynchronously still holds the last scope's results for as long as
+ * the next search takes, and a palette that drew them would put an agent under
+ * "Tasks" and let Enter open it. So the rows say which scope they answer
+ * (`groupsScope`), and until that is the chosen one the list is busy and
+ * offers nothing. A query that moved on WITHIN a scope is not held back the
+ * same way: the rows for "flak" are a fair answer while "flaky" is in flight.
+ *
+ * THE LEAD IS NOT IN THE LIST. A listbox takes options and groups, and an
+ * answer written above the rows is neither, so it sits outside, in its own
+ * polite live region, mounted empty so the first words to arrive are read. It
+ * shares the one scroller with the rows, because an answer tall enough to need
+ * scrolling would otherwise squeeze the list to nothing. Anything a reader
+ * should be able to ACT on belongs in a row, where the arrows reach it.
+ *
  * THE LIST IS THE SURFACE'S OWN BODY, not a popup above it (`popup: false`).
  * Registered as a popup, the list would take Escape from the stack and take the
  * veil's press on `pointerdown`, closing the palette before that press's click
@@ -72,6 +161,8 @@ export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLElement>, '
  * THE CHORD THAT OPENS IT IS THE APPLICATION'S, not this component's. Pass an
  * `onKeyDown`: it reaches the frame, which is every key pressed inside the
  * surface, and closing from there is one line the caller already has the
- * definition for.
+ * definition for. The accelerators a row's `meta` draws are the same: an Enter
+ * held with Command, Control or Option is never taken as Enter on the
+ * highlighted row, so ⌘Enter reaches the caller alone.
  */
-export declare function CommandPalette({ open, ...rest }: CommandPaletteProps): import("react").JSX.Element | null;
+export declare function CommandPalette(props: CommandPaletteProps): import("react").JSX.Element | null;

package/dist/CommandPalette/index.d.ts

@@ -1,3 +1,3 @@
 import './CommandPalette.css';
 export { CommandPalette } from './CommandPalette.js';
-export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteProps } from './CommandPalette.js';
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteProps, CommandPaletteScope, CommandPaletteScopeProps, } from './CommandPalette.js';

package/dist/CommandPalette/index.js

@@ -1,11 +1,13 @@
-export { CommandPalette } from '../chunk-AJNCATWZ.js';
-import '../chunk-KIC7BZYJ.js';
-import '../chunk-GKHAKGOF.js';
-import '../chunk-2EOKFKHX.js';
+export { CommandPalette } from '../chunk-N3DPO6HG.js';
+import '../chunk-KJ34ZBBI.js';
+import '../chunk-IG27QX7Q.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-DSUY5F4E.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette-C5AMKGN2.css

@@ -0,0 +1,259 @@
+/*
+ * The command palette: a field, an optional row of scopes, one scroller
+ * holding the lead and the list, and a key legend.
+ *
+ * It is a Modal with its body's padding dropped, so the bands run edge to edge
+ * and the field reads as the surface rather than as a question on a form.
+ * The rows are the listbox register (`Listbox.css`), because a result here and
+ * a completion in a field are the same thing to a reader and the raised row
+ * that marks the active one has to mean the same in both.
+ *
+ * THE TWO OVERRIDES BELOW NAME BOTH CLASSES ON PURPOSE. A single class would
+ * tie with the rule it is overriding (`.crewlet-modal--md`,
+ * `.crewlet-input--command`), and a tie is broken by the order the stylesheets
+ * happen to be concatenated in, which is alphabetical over filenames.
+ */
+
+.crewlet-modal.crewlet-palette {
+  /*
+   * THE APPROVED DESIGN'S SURFACE: 720px wide, and as tall as its artboard
+   * draws it with an answer leading five rows, 664px of a 900px window. It was
+   * 620 by min(60dvh, 520px), sized for a list alone, and a lead that size
+   * over it left room for three rows. 74dvh is that artboard's 664/900; the
+   * 680px cap is the same surface with one more row, so a tall window does
+   * not turn a launcher read in one glance into a page.
+   */
+  --crewlet-modal-width: 720px;
+
+  max-height: min(74dvh, 680px);
+}
+
+/*
+ * THE BODY LAYS THE THREE BANDS OUT, and the RESULTS are what scrolls.
+ *
+ * A Modal's body is a block that scrolls its whole content, which is right for
+ * a dialog read top to bottom and wrong here: the field would ride up out of
+ * view as the arrows walked the list, and the list, sized to its own content,
+ * would never overflow, so the row the listbox brings into view by scrolling
+ * that element would have nowhere to go.
+ */
+.crewlet-palette .crewlet-modal__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/*
+ * The field, drawn as the surface's own top band: no box of its own, the full
+ * height of a large row, and the question asked at the reading size rather
+ * than at a control's. It is the first thing on the surface and the only thing
+ * with focus, so it is the surface's headline as much as its input.
+ */
+/*
+ * THE ROW'S TWO ENDS ARE INSET ONE STEP LESS THAN THE BANDS BELOW IT. The
+ * search glyph and the Esc keycap each carry a slot inset of their own (the
+ * glyph's, a step less than text's, see Input.css), so at the bands' 16px the
+ * glyph stood 24px in and the keycap 28px from the edge; at 12px they stand
+ * 20px and 16px in, where the approved palette draws them, and the query still
+ * starts on the line the design's does.
+ */
+.crewlet-input.crewlet-palette__field {
+  flex-shrink: 0;
+  min-height: var(--size-row-lg);
+  padding-inline: var(--spacing-3);
+  border: none;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+}
+
+.crewlet-input.crewlet-palette__field .crewlet-input__control {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-input.crewlet-palette__field .crewlet-input__trailing {
+  padding-right: var(--spacing-1);
+}
+
+/*
+ * THE FOOT IS THE KEYBOARD'S OWN BAND, at the micro register rather than the
+ * modal footer's. A modal's foot carries buttons and is sized for them; this
+ * one carries a line of keycaps saying what the arrows, Enter and Escape do,
+ * and at a dialog's padding that line reads as an action row nobody can press.
+ *
+ * Both classes are named for the same reason the two rules below are: a single
+ * class ties with `.crewlet-modal__footer`, and a tie is broken by the order
+ * the stylesheets are concatenated in.
+ */
+.crewlet-palette .crewlet-modal__footer {
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-4);
+  /* The SHEET rung under the card the results sit on, as the design draws the
+     legend: a band a step back from the surface, so it reads as the frame's
+     edge rather than as one more row. */
+  background: var(--color-surface-background);
+}
+
+.crewlet-palette .crewlet-modal__footer-start {
+  gap: var(--spacing-4);
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * THE SCOPES: a strip of words under the field, the current one in the primary
+ * ink over a bar in the same ink. Not `Tabs`, whose tabs are a roving tab stop:
+ * these are never focused (the field drives them), so the row has no ring to
+ * draw and no slider to measure, and the bar is each tab's own edge.
+ */
+.crewlet-palette__scopes {
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+  min-height: var(--size-row-md);
+  padding-inline: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.crewlet-palette__scopes::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-palette__scope {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: 0 var(--spacing-1);
+  border: none;
+  /* The bar is drawn on every tab and coloured only on the chosen one, so a
+     choice moves no label by the bar's width. */
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crewlet-palette__scope:hover,
+.crewlet-palette__scope.is-active {
+  color: var(--color-text-primary);
+}
+
+.crewlet-palette__scope.is-active {
+  border-bottom-color: var(--color-text-primary);
+}
+
+/*
+ * THE ONE SCROLLER: the lead and the list move together, and the listbox
+ * keeps the highlighted row in view inside this element.
+ */
+.crewlet-palette__results {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+}
+
+/*
+ * THE LEAD: an answer on the raised rung above the rows, in the secondary ink
+ * at a reading leading, because it is prose read once rather than a row run
+ * past. Empty, it draws nothing: the region is mounted so a screen reader sees
+ * its first words arrive, and an empty box would be a band saying nothing.
+ */
+.crewlet-palette__lead:not(:empty) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  line-height: var(--font-line-height-relaxed);
+}
+
+/*
+ * The glyph takes the ROW'S colour rather than a quiet step of its own, so the
+ * row under the arrows lifts to the primary ink in one piece. Pinned to the
+ * tertiary step it stayed grey inside the highlight, which read as a glyph
+ * that had failed to load.
+ */
+.crewlet-palette__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/*
+ * THE LABEL AND ITS HINT ARE ONE LINE, cut together: the hint reads as the
+ * rest of the label's sentence ("ENG-420 Flaky e2e, Todo, unassigned"), and
+ * the row's end is kept for its meta. A hint pushed to the end as well would
+ * put two quiet columns side by side, and neither would say which it was.
+ */
+.crewlet-palette__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-palette__label {
+  font-weight: var(--font-weight-medium);
+}
+
+/* The quiet ink on every row, the highlighted one included, as the approved
+   palette draws it: the rest of the label's sentence, a step under the label
+   it follows. The tertiary step clears 4.5:1 on the raised row as on the card,
+   so the highlight has no reason to lift it. */
+.crewlet-palette__hint {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The row's end: a short fact or an accelerator's keycap. Never cut and never
+ * wrapped, so a column of keycaps stands in one line down the list.
+ */
+.crewlet-palette__meta {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/*
+ * An honest empty state: it says which kind of nothing this is, and the
+ * component takes the sentence from the caller for that reason.
+ */
+.crewlet-palette__empty {
+  margin: 0;
+  padding: var(--spacing-5) var(--spacing-4);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  text-align: center;
+}
+
+/*
+ * FORCED COLORS draws a transparent border in the system's own ink, so every
+ * scope would wear the chosen one's bar. The bar is kept where it means
+ * something and painted out everywhere else, in the two colours the mode
+ * leaves as the author wrote them.
+ */
+@media (forced-colors: active) {
+  .crewlet-palette__scope {
+    border-bottom-color: Canvas;
+  }
+
+  .crewlet-palette__scope.is-active {
+    border-bottom-color: CanvasText;
+  }
+}

package/dist/Copyable/index.js

@@ -1,6 +1,6 @@
-export { CopyButton, Copyable } from '../chunk-3QRYCPXQ.js';
+export { CopyButton, Copyable } from '../chunk-OPKIKM35.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-PATXSJGR.js';
-import '../chunk-T43A26SD.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-ERVO6OUF.js';
+import '../chunk-IPVQKAHO.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-2PRH365R.js';
+import '../chunk-IG27QX7Q.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-UA7O3KKJ.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-2EOKFKHX.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DataTable-37UWTRN6.css → DataTable-OLHPF7D4.css}

@@ -1267,7 +1267,7 @@ body.crewlet-data-table-resizing {
   display: inline-block;
   height: var(--spacing-3);
   border-radius: var(--radius-xs);
-  background: var(--color-surface-elevated, var(--color-surface-muted));
+  background: var(--color-surface-elevated);
   animation: crewlet-data-table-skeleton-pulse var(--crewlet-data-table-skeleton-duration) var(--motion-easing-in-out) infinite;
   vertical-align: middle;
 }
@@ -1973,52 +1973,49 @@ body.crewlet-data-table-resizing {
    The component states its own, rather than leaning on the document
    baseline: this stylesheet also ships to an application that imports the
    component and not the baseline. The skeleton stops PULSING and keeps its
-   bars, which is what says the rows have not arrived.
-
-   THE SETTINGS FRAME IS NAMED SEPARATELY BECAUSE IT IS NOT IN THE TABLE. It
-   is a Modal, which portals onto the layer host, so a descendant selector
-   rooted at .crewlet-data-table reaches none of it: the chip row and every
-   column row kept their transitions under the preference in exactly the
-   application this rule exists for. */
+   bars, which is what says the rows have not arrived. */
 /*
- * EVERY PART OF THE TABLE, INCLUDING THE ONES DRAWN SOMEWHERE ELSE. The list
- * is not the root and its descendants: two of these live in the settings
- * frame, which is a dialog portaled to the layer host, and the chrome row is
- * drawn on a card's header wherever the table fills one. A preference
- * cancelled through the root alone leaves exactly those pieces animating,
- * which is the one place a reader who asked for stillness is least able to
- * connect it back to a table.
+ * EVERY MOTION THIS FILE STARTS IS STOPPED BY NAME, the same selector as the
+ * rule that starts it and after it, so the two tie on specificity and the stop
+ * wins on source order. The package's literal check holds the pairing
+ * selector for selector.
+ *
+ * A CATCH-ALL IS WHAT THIS REPLACED, and it lost twice. Written as
+ * `.crewlet-data-table *` it was one class against rules of two, so the row
+ * hover, the sort control, the action button and the pager and cog all kept
+ * their transitions; doubled to `.crewlet-data-table.crewlet-data-table *` it
+ * was two classes, and the row's own rule is two classes AND two elements
+ * (`… tbody tr`), so the row still eased its hover for a reader who had asked
+ * for stillness. The document-wide rule in @crewlethq/tokens covers every
+ * one of them with `!important` wherever that sheet is loaded, which is the
+ * only reason nobody saw it.
+ *
+ * Naming the rules also reaches the pieces a descendant selector cannot: the
+ * page-size and column rows are in the settings frame, a Modal portaled onto
+ * the layer host, and the chrome row is drawn on a card's header wherever the
+ * table fills one.
  */
 @media (prefers-reduced-motion: reduce) {
-  /*
-   * EACH NAME IS WRITTEN TWICE, which is not a typo: a selector repeating one
-   * class matches exactly what it matched and counts for twice as much. A
-   * cancellation is only a cancellation if it outranks what it cancels, and
-   * this one did not: written once, `.crewlet-data-table *` is one class where
-   * the rules it had to beat are two, so the row hover, the sort control, the
-   * action button and the pager and cog all kept their transitions for a
-   * reader who had asked for stillness. The document-wide rule in
-   * @crewlethq/tokens covered it with `!important` wherever that sheet is
-   * loaded, which is the only reason nobody saw it; this rule exists for the
-   * document that loads the components alone, and it has to stand on its own.
-   */
-  .crewlet-data-table.crewlet-data-table,
-  .crewlet-data-table.crewlet-data-table *,
-  .crewlet-data-table.crewlet-data-table *::before,
-  .crewlet-data-table.crewlet-data-table *::after,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *::before,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *::after,
-  .crewlet-data-table__items-per-page-btn.crewlet-data-table__items-per-page-btn,
-  .crewlet-data-table__column-toggle-item.crewlet-data-table__column-toggle-item {
-    animation: none;
+  .crewlet-data-table--default .crewlet-data-table__table tbody tr,
+  .crewlet-data-table--default .crewlet-data-table__th--sortable,
+  .crewlet-data-table--default .crewlet-data-table__sort-icon,
+  .crewlet-data-table--default .crewlet-data-table__action-btn,
+  .crewlet-data-table--default .crewlet-data-table__header-btn,
+  .crewlet-data-table__items-per-page-btn,
+  .crewlet-data-table__column-toggle-item,
+  .crewlet-data-table__chrome .crewlet-data-table__page-btn,
+  .crewlet-data-table__chrome .crewlet-data-table__settings-btn,
+  .crewlet-data-table__expand-all-btn,
+  .crewlet-data-table__chevron,
+  .crewlet-data-table__resizer::before,
+  .crewlet-data-table__copy-cell-button {
     transition: none;
   }
 
   /* The bars stay; only the pulse goes. A skeleton that vanished under a
      motion preference would take the answer to "has this loaded" with it. */
   .crewlet-data-table__skeleton-bar {
+    animation: none;
     opacity: 0.6;
   }
 }

package/dist/DataView/index.js

@@ -1,25 +1,25 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CC67MUUO.js';
-import '../chunk-5EKIWVOR.js';
-import '../chunk-3CZ7XAVY.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-FD5UEN6X.js';
+import '../chunk-PGRPNDWM.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-SFZOKW2G.js';
-import '../chunk-PATXSJGR.js';
-import '../chunk-T43A26SD.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-KJ34ZBBI.js';
+import '../chunk-ERVO6OUF.js';
+import '../chunk-IPVQKAHO.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-DB2VDLVR.js';
-import '../chunk-EFSG7HNU.js';
+import '../chunk-IG27QX7Q.js';
+import '../chunk-YIMOT5OO.js';
+import '../chunk-AUS5FNQE.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-2PRH365R.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-UA7O3KKJ.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-KIC7BZYJ.js';
-import '../chunk-GKHAKGOF.js';
-import '../chunk-2EOKFKHX.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-DSUY5F4E.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';