@crewlethq/ui 0.32.0 → 0.34.0

package/dist/SlideNav/SlideNav.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export interface SlideNavLabels {
+    /** The group's name. */
+    nav: string;
+    previous: string;
+    next: string;
+    /** Why Previous is off on the first slide. */
+    start: string;
+    /** Why Next is off on the last slide. */
+    end: string;
+    position: (position: number, total: number) => string;
+}
+export declare const SLIDE_NAV_LABELS: SlideNavLabels;
+/**
+ * Where the controls sit: `page` on the interface's own ground, `projection`
+ * floating over a slide shown full screen, on a scrim in its own light ink
+ * whatever the theme, since the letterbox under it is black in every theme.
+ */
+export type SlideNavTone = 'page' | 'projection';
+export interface SlideNavProps {
+    /** One-based. */
+    position: number;
+    total: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    tone?: SlideNavTone | undefined;
+    /**
+     * Controls after Next, set apart by a rule: Full screen. IconButtons take
+     * the tone; give them `size="sm"`, the step Previous and Next are drawn at.
+     */
+    children?: ReactNode;
+    className?: string | undefined;
+    labels?: Partial<SlideNavLabels> | undefined;
+}
+/**
+ * Previous, where the show is, and Next: the one set of controls every way of
+ * presenting a deck moves by, in the page, full screen and at the lectern.
+ *
+ * A TOOLBAR'S STEP: Previous and Next are the small control step, as tall as
+ * the buttons a toolbar or a panel sets beside them (the presenter's Pause).
+ *
+ * STOPS AT THE ENDS, SAYING WHY. Previous on the first slide and Next on the
+ * last are off, with the reason on the control, rather than pressable and
+ * doing nothing. The position is tabular in a fixed width, so the controls
+ * either side of it do not move as the count changes. It is not a live region:
+ * the host announces each slide as it arrives, by its number and its title,
+ * and a second announcement of the number alone would repeat it.
+ */
+export declare function SlideNav({ position, total, onPrevious, onNext, tone, children, className, labels, }: SlideNavProps): import("react").JSX.Element;

package/dist/SlideNav/index.d.ts

@@ -0,0 +1,3 @@
+import './SlideNav.css';
+export { SlideNav, SLIDE_NAV_LABELS } from './SlideNav.js';
+export type { SlideNavLabels, SlideNavProps } from './SlideNav.js';

package/dist/SlideNav/index.js

@@ -0,0 +1,4 @@
+export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-6VOS2GMB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SlideNav-BLFJF6AH.css

@@ -0,0 +1,53 @@
+/*
+ * SlideNav: Previous, the position and Next, and whatever follows them.
+ */
+
+.crewlet-slide-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-slide-nav__position {
+  min-width: 5em;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.crewlet-slide-nav__more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: var(--spacing-2);
+  padding-left: var(--spacing-3);
+  border-left: 1px solid var(--color-border-default);
+}
+
+/* OVER A PROJECTED SLIDE: a pill in the projection's own fixed colours, so it
+   reads over black bars and over a slide of any colour, in every theme. */
+.crewlet-slide-nav--projection {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-pill);
+  background: var(--color-projection-ground);
+  color: var(--color-projection-ink);
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__position {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__more {
+  border-left-color: var(--color-projection-rule);
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-projection-hover);
+  color: inherit;
+}

package/dist/SlideStage/SlideStage.d.ts

@@ -33,6 +33,14 @@ export interface SlideStageProps {
      * "artboard" for a design's board shown at its own layout.
      */
     roleDescription?: string | undefined;
+    /**
+     * The slide's own edge, a hairline on a small radius, so a slide whose
+     * ground is the page's own colour still reads as a slide: a thumbnail, a
+     * card, the editor's stage, a show in the page. Not for `fit="contain"`,
+     * whose box is letterboxed by design, nor in full screen, where the screen's
+     * own edge is the slide's.
+     */
+    framed?: boolean | undefined;
     className?: string | undefined;
 }
 /**
@@ -60,4 +68,4 @@ export interface SlideStageProps {
  * A GROUP NAMED AS A SLIDE, so a screen reader announces "slide" with its
  * name and reads its text in source order, which is the slide's reading order.
  */
-export declare function SlideStage({ children, label, fit, scale, width, height, roleDescription, className, }: SlideStageProps): import("react").JSX.Element;
+export declare function SlideStage({ children, label, fit, scale, width, height, roleDescription, framed, className, }: SlideStageProps): import("react").JSX.Element;

package/dist/SlideStage/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-E6CR5PEV.js';
-import '../chunk-HMPFGIWM.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-LV4APO72.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideStage-KGRRALXR.css → SlideStage-S2FISF4C.css}

@@ -16,6 +16,29 @@
   height: 100%;
 }
 
+/* THE SLIDE'S OWN EDGE: the box is the slide (or, for a show in the page,
+   the room it was measured into), so its outline is the slide's edge, drawn over the slide's corners rather than outside them. A host that
+   marks a stage (selected, current) recolours this outline rather than adding
+   a second line. */
+.crewlet-slide-stage--framed {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+:fullscreen .crewlet-slide-stage--framed,
+.crewlet-slide-stage--framed:fullscreen {
+  border-radius: 0;
+  outline: 0;
+}
+
+/* FULL SCREEN IS A PROJECTOR: the bars round a slide whose shape is not the
+   screen's are black, whatever the theme, so the room sees the slide alone. */
+:fullscreen .crewlet-slide-stage--contain,
+:fullscreen .crewlet-slide-stage--view,
+.crewlet-slide-stage:fullscreen {
+  background: var(--color-projection-letterbox);
+}
+
 /* Until it is measured, and wherever it is not (no layout), a view stage is
    its slide's shape at its width. In full screen it fills the box, sharing a
    flex column with the show's controls. */

package/dist/StatCard/StatCard.d.ts

@@ -34,6 +34,13 @@ export interface StatCardDelta {
 export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
     /** What is being counted, in sentence case: "Tasks in progress". */
     label: ReactNode;
+    /**
+     * Keep the label out of the picture. It stays in the accessibility tree.
+     * For a tile whose container already names it, such as a dashboard
+     * widget's frame, where the frame's title above the label said the same
+     * thing twice. A Meter's `hideLabel`, for the same reason.
+     */
+    hideLabel?: boolean;
     /** The headline value, already formatted by the caller. */
     value: ReactNode;
     /** A unit after the value, at a quieter weight: "ms", "/ 7", "per turn". */
@@ -61,6 +68,14 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
      * says otherwise.
      */
     trend?: ReactNode;
+    /**
+     * Where `trend` stands: at the END of the value's line (the default), or
+     * BELOW it at the tile's full width. Below is a quota's tile, a number of a
+     * known ceiling whose bar is the reading and not a sparkline beside it; a
+     * row of them keeps one shape at every width, where three end slots wrapped
+     * one by one as each number's width decided.
+     */
+    trendPlacement?: 'end' | 'below' | undefined;
     /** A glyph before the label. A component, not a name. */
     icon?: ReactNode;
     /** Colours the VALUE's ink. See the type for when that is right. */
@@ -100,4 +115,4 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
  * being zero. The trend and the delta wait with it: both are readings of the
  * number that has not arrived.
  */
-export declare const StatCard: ({ label, value, unit, sub, subTone, delta, trend, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;
+export declare const StatCard: ({ label, hideLabel, value, unit, sub, subTone, delta, trend, trendPlacement, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-IKB6HFGK.js';
+export { StatCard } from '../chunk-XO7PUL4F.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-KPAFD4E2.css → StatCard-4T7TMWMN.css}

@@ -72,12 +72,18 @@
  * The value's line: the number at its start, the figure at its end, both on
  * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
  * rather than centring on each other.
+ *
+ * THE FIGURE GIVES WAY BEFORE THE NUMBER. Where a tile is too narrow for
+ * both (a row of tiles on a phone, two to a line), the figure moves under the
+ * number rather than the number being cut to its first digit: "2…" beside a
+ * meter said nothing, and the meter alone says less than the number.
  */
 .crewlet-statcard__reading {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
-  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  gap: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -86,40 +92,51 @@
  * track, with tabular figures so a number that ticks up moves nothing beside
  * it.
  *
- * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The number is one line
  * that never wraps, and any leading over it is air under the digits that
  * opens between the number and the line below it and stands the number
  * higher than the figure it shares a foot with.
  *
- * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
- * rather than stop: `text-overflow` acts on a block container only, and as a
- * flex row the number and its unit were anonymous flex items no rule could
- * reach, so a value too long for its tile was cut mid-digit with nothing to
- * say a digit was lost. The unit sits on the same line as inline text, on
- * the number's baseline.
+ * THE NUMBER ENDS, THE UNIT MOVES. The number and its unit are a wrapping
+ * row on one baseline: where the tile is too narrow for both, the unit moves
+ * under the number whole ("of 10 GB"), rather than being cut to "of 1…"; and
+ * the number, alone on its line and still too long, ends in an ellipsis
+ * rather than stopping mid-digit with nothing to say a digit was lost. The
+ * ellipsis is the number's own box's, since `text-overflow` acts on a block
+ * container only.
  */
 .crewlet-statcard__value {
-  display: block;
-  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  /* Never narrower than the number, so the figure wraps first; never wider
+     than the tile, so a number too long for the tile alone still ends. */
+  flex: 1 0 auto;
   min-width: 0;
+  max-width: 100%;
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
   line-height: 1;
   font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__number {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
-   reads as part of the figure rather than as a second one. */
+/* The unit, on the number's baseline at a quieter weight, kept whole. */
 .crewlet-statcard__unit {
-  margin-inline-start: var(--spacing-1);
+  flex: none;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--font-letter-spacing-normal);
   color: var(--color-text-tertiary);
+  white-space: nowrap;
 }
 
 /*
@@ -137,6 +154,16 @@
   min-width: 0;
 }
 
+/* BELOW: the figure under the number, as wide as the tile. */
+.crewlet-statcard__reading--below {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.crewlet-statcard__reading--below > .crewlet-statcard__trend {
+  width: auto;
+}
+
 .crewlet-statcard__trend > :where(button, a) {
   align-self: flex-end;
 }

package/dist/Switcher/index.js

@@ -1,13 +1,13 @@
-export { Switcher } from '../chunk-HVNTQ36V.js';
-import '../chunk-W5J7R5EB.js';
-import '../chunk-I3KKZ2O3.js';
+export { Switcher } from '../chunk-GMU6SQ6B.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-IG75YMUN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-LFNUH4GY.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-K4VP6ZKE.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 /**
  * How the row is drawn. `pill` is a segmented well with a raised chip for the
  * one that is on; `underline` is a strip with a sliding bar, for a screen's
@@ -14,8 +14,12 @@ export interface TabsItem {
     label: ReactNode;
     /** A glyph drawn before the label. A component, not a name. */
     icon?: ReactNode;
-    /** How many things are behind this tab. Drawn as a Count beside the label. */
-    count?: number | null;
+    /**
+     * How many things are behind this tab. Drawn as a Count beside the label,
+     * as it is given: a string is a figure the caller has already formatted
+     * ("1.2k", "50+").
+     */
+    count?: number | string | null;
     /**
      * What needs the reader behind this tab, drawn after the label: problems
      * as a danger count, a warning or an unsaved change as a 6px dot. It
@@ -77,6 +81,19 @@ export interface TabsProps {
      * and a screen reader told otherwise looks for a panel that never arrives.
      */
     renderItem?: (props: TabsRenderItemProps) => ReactNode;
+    /**
+     * Drawn inside the row after the last item, ROUTER MODE ONLY: the menu a
+     * navigation row folds its overflow into ("More"), or a note about every
+     * section. It is part of the navigation landmark, so a screen reader meets
+     * it with the links it continues. A tab list holds tabs alone, so a row
+     * without `renderItem` ignores it.
+     */
+    trailing?: ReactNode;
+    /**
+     * The row's root element, for a consumer that measures the row: which of
+     * its items fit, and what folds into its trailing menu.
+     */
+    ref?: Ref<HTMLElement> | undefined;
 }
 /**
  * The id of the tab that labels a tab panel, so a panel and the row that
@@ -103,7 +120,7 @@ export declare function tabId(panelId: string, value: string): string;
  * says. In router mode that IS what the items are, so the root becomes a
  * `nav`, the tab roles go, and the consumer's own link carries the state.
  */
-export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, }: TabsProps): React.JSX.Element;
+export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, trailing, ref, }: TabsProps): React.JSX.Element;
 export interface TabPanelProps {
     /** The same id the row was given as `panelId`. */
     id: string;

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-HJEVSQN6.js';
+export { TabPanel, Tabs, tabId } from '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-CJGO35BH.css → Tabs-MMZXV5EF.css}

@@ -95,13 +95,14 @@
  * chips floated; the raised rung is held a visible step above the card by the
  * palette suite, and the hairline finds it on any other ground.
  *
- * The inset is 2px, which is smaller than the scale's first step on purpose:
- * it is the gap a chip needs to read as sitting IN the well. With the 1px
- * boundary it is three pixels a side, and a 24px chip makes a 30px row: the
- * medium control step, the height of the button beside it.
+ * The inset is 1px, a hairline of the well's own ground round each chip:
+ * with the 1px boundary it is two pixels a side, and a 24px chip makes a 28px
+ * row, the tab step. Tabs sit between the 26px controls of a toolbar or a
+ * panel and the 32px actions of a page, so a row of them reads as the place's
+ * navigation rather than as one more button beside them.
  */
 .crewlet-tabs--pill {
-  --crewlet-tabs-pill-inset: 2px;
+  --crewlet-tabs-pill-inset: 1px;
 
   gap: var(--crewlet-tabs-pill-inset);
   padding: var(--crewlet-tabs-pill-inset);
@@ -205,8 +206,8 @@
  * can hit. max() against --size-target-min holds every density at 24px or
  * more, and at density 1 the two agree.
  *
- * The corner is the small radius, the design's: the well's 8px less its 1px
- * boundary and 2px inset is 5px, and a chip a pixel rounder than that
+ * The corner is the chip radius (--radius-chip): the well's 8px less its 1px
+ * boundary and 1px inset is 6px, and a chip a pixel rounder than that
  * concentric curve is what reads as a chip sitting IN the well rather than a
  * second well inside it. The side pad is the design's 10px, two steps and a
  * half.
@@ -224,7 +225,7 @@
 .crewlet-tabs--pill .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
   padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-chip);
   color: var(--color-text-secondary);
   font-size: var(--font-size-xs);
 }

package/dist/TagsInput/index.js

@@ -2,7 +2,7 @@ export { TagsInput } from '../chunk-2CQLNML5.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/ThemeSwitcher/index.js

@@ -1,9 +1,9 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-2QEDJSJC.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,11 +1,11 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-UZ6MA2V6.js';
-import '../chunk-FC4YTTFJ.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-AORVEG5V.js';
+import '../chunk-BQ7AKL2N.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Toaster/index.js

@@ -1,5 +1,5 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
-import '../chunk-HMPFGIWM.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-AC22RZKC.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Toaster-EOOOTSJT.css → Toaster-C6BQ7L6I.css}

@@ -234,13 +234,22 @@
  * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
  * whole strip, draining from the right as the time runs out. It sits under
  * every raised child, and it is the timer's picture, not the timer.
+ *
+ * ITS LEADING EDGE FADES OUT rather than stopping. Cut square, the wash read
+ * as a strip painted in two tones whenever it stood still: in a still frame,
+ * and under the pointer, which pauses it, which is when a reader is looking.
+ * Feathered, a stopped wash still reads as a tint running out.
  */
 .crewlet-toast__progress {
   position: absolute;
   inset: 0;
   z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-wash);
+  background: linear-gradient(
+    to right,
+    var(--crewlet-toast-wash) calc(100% - var(--spacing-7)),
+    transparent
+  );
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;

package/dist/Toolbar/index.js

@@ -1,4 +1,4 @@
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tooltip/Tooltip.d.ts

@@ -1,10 +1,21 @@
 import { type ReactElement, type ReactNode } from 'react';
 export type TooltipPlacement = 'top' | 'bottom';
+/**
+ * Where along the trigger the panel lines up: `center` on its middle, or
+ * `start` on its leading edge, running toward the inline end.
+ */
+export type TooltipAlign = 'center' | 'start';
 export interface TooltipProps {
     /** One short line. A tooltip is not a place to put a list or a paragraph. */
     content: ReactNode;
     /** The preferred side. It flips when there is not room and there is more room the other way. */
     placement?: TooltipPlacement | undefined;
+    /**
+     * `start` for a trigger at the leading edge of what it belongs to, such as a
+     * grid's row gutter: a centred tip there hangs past that edge, and at the
+     * page's edge is pushed off its trigger by the clamp.
+     */
+    align?: TooltipAlign | undefined;
     /** Nothing opens: for a trigger whose tip is only worth showing sometimes. */
     disabled?: boolean | undefined;
     /** Milliseconds a pointer rests on the trigger before the panel appears. Focus never waits. */
@@ -48,4 +59,4 @@ export interface TooltipProps {
  * control has a name already, and replacing it with the hint is how a Close
  * button came to be announced as "Closing is unavailable until this finishes".
  */
-export declare function Tooltip({ content, placement, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, placement, align, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 import './Tooltip.css';
 export { Tooltip } from './Tooltip.js';
-export type { TooltipPlacement, TooltipProps } from './Tooltip.js';
+export type { TooltipAlign, TooltipPlacement, TooltipProps } from './Tooltip.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+export { Tooltip } from '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-WTNUVQVI.js';
+export { TreeCanvas } from '../chunk-UHJQDFKQ.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-OTN35CI4.js';
-import '../chunk-VYOKRN2I.js';
+import '../chunk-3P4Y5RX6.js';
+import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/TreeGrid/index.js

@@ -1,7 +1,7 @@
-export { TreeGrid } from '../chunk-VEB5ERRE.js';
+export { TreeGrid } from '../chunk-QWNVSR6G.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-LM3ISVJA.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/VersionCompare/index.js

@@ -1,8 +1,8 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-PLTCDSTU.js';
 import '../chunk-BVWSLXTY.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-RA2ULG6H.js';
 import '../chunk-BHHIIK3M.js';

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-W4XYY73O.js';
+export { VersionTimeline } from '../chunk-VHZ3AXJD.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-4KP4RC3O.js';
+import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';