@crewlethq/ui 0.48.2 → 0.49.0

package/dist/ContrastBadge-CBZPGG3G.css

@@ -0,0 +1,47 @@
+/*
+ * Whether one colour reads on another: a sample of the pair, the ratio and
+ * the level. The sample's two colours are the only values here that are not
+ * tokens, and they arrive through `--crewlet-contrast-badge-ink` and
+ * `--crewlet-contrast-badge-ground` only once both have passed `#rrggbb`.
+ */
+.crewlet-contrast-badge {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+}
+
+/* THE SAMPLE HAS AN EDGE OF ITS OWN, so a ground that matches the page is
+   still a sample. */
+.crewlet-contrast-badge__sample {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-contrast-badge-ground, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  color: var(--crewlet-contrast-badge-ink, var(--color-text-tertiary));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.crewlet-contrast-badge__label {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-contrast-badge__ratio {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-contrast-badge__unmeasured {
+  color: var(--color-text-tertiary);
+}

package/dist/DataGrid/DataGrid.d.ts

@@ -123,6 +123,20 @@ export interface DataGridBand<T> {
     /** A per-band aggregate line, or the way to what the band did not fit. */
     footer?: ReactNode;
 }
+/**
+ * Rows a reader picks for a bulk action, by their `rowKey`: a column of boxes
+ * before the first, with a box over them in the head.
+ */
+export interface DataGridSelection<T> {
+    /** The keys of the rows picked. Controlled, and kept across pages and sorts by the host. */
+    selected: ReadonlySet<string>;
+    /** The keys as they should be now. */
+    onChange: (selected: ReadonlySet<string>) => void;
+    /** A row's box, said: "Select Q3 plan". The row's own words are its name, so this says what ticking it does. */
+    rowLabel: (row: T) => string;
+    /** A row that cannot be picked (the reader may not act on it): its box is drawn and disabled. */
+    isSelectable?: ((row: T) => boolean) | undefined;
+}
 /** The words a grid says, for an application that says them otherwise. */
 export interface DataGridLabels {
     /** "Hidden to fit: Due and Updated". */
@@ -131,6 +145,8 @@ export interface DataGridLabels {
     showEveryColumn: string;
     /** Joins the last two names of a list: "Due and Updated". */
     and: string;
+    /** The head's box, over every row the grid draws. */
+    selectAll: string;
 }
 /**
  * What an application drives a grid's cursor with. The grid binds no keys of
@@ -156,6 +172,17 @@ export interface DataGridProps<T> {
     rowHref?: ((row: T) => string) | undefined;
     /** The row the reader is on (the object a page or a side panel shows): tinted and announced as current. */
     isSelected?: ((row: T) => boolean) | undefined;
+    /**
+     * Rows picked for a bulk action: a box on every row before the first
+     * column, and one in the head over every row drawn (ticked, clear, or mixed
+     * when some are). Shift with a box picks or clears every row between it and
+     * the box pressed before it, in the order the grid draws them.
+     *
+     * NOT `isSelected`, which is the one row the reader is ON. A picked row is
+     * tinted in the selected fill and its box says it; the current row keeps
+     * its own mark.
+     */
+    selection?: DataGridSelection<T> | undefined;
     isFailed?: ((row: T) => boolean) | undefined;
     /**
      * The sort as `key` or `-key` (descending), empty for the rows' own order.
@@ -264,4 +291,4 @@ export declare function fitGridColumns({ fit, width, overflows, visible, }: {
  * lets its head stick against the page's scroller; an application whose
  * scroller carries a sticky bar sets `--crewlet-data-grid-sticky-top`.
  */
-export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;
+export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;

package/dist/DataGrid/index.js

@@ -1,7 +1,14 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-2MYSESZF.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-FB5CFQTG.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-PPUR46MK.js';
+import '../chunk-EXRRTKWT.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DataGrid-AQKPJD7W.css → DataGrid-VNGQESJA.css}

@@ -195,6 +195,21 @@ button.crewlet-data-grid__row-link {
   background: var(--color-brand-accent-soft);
 }
 
+/*
+ * PICKED FOR A BULK ACTION (`selection`), as every chosen option is drawn:
+ * the selected fill, never the accent. One fill, so the hover overlay does not
+ * stack on it, and its box says it as well.
+ */
+.crewlet-data-grid__row--picked,
+.crewlet-data-grid__row--picked:hover {
+  background: var(--color-surface-selected);
+}
+
+/* The selection box, centred in its track and standing above the row's link. */
+.crewlet-data-grid__select {
+  display: inline-flex;
+}
+
 .crewlet-data-grid__row--cursor {
   box-shadow: inset 2px 0 0 var(--color-brand-accent);
 }

package/dist/DataTable/index.js

@@ -1,19 +1,19 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-DETVVKAH.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQ7S7CKZ.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-YUAQSWNW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-NCHKKYPQ.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,29 +1,29 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-IVA7ZWDS.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-NAWUXCBC.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-DETVVKAH.js';
-import '../chunk-K77LKW3X.js';
+import '../chunk-ZFM5L7M4.js';
+import '../chunk-WQ7S7CKZ.js';
+import '../chunk-YCC2S7DF.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-YUAQSWNW.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,10 +1,10 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-K77LKW3X.js';
-import '../chunk-KHJIEPZV.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-ZFM5L7M4.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DocTabsEditor/index.js

@@ -1,14 +1,14 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-R2EOET5Q.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-627KFRON.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Editor-6U4BJ25W.js → Editor-MLGK3KOG.js}

@@ -2,16 +2,16 @@ import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { FormField, Input } from './chunk-D4EOPIFL.js';
+import { FormField, Input } from './chunk-EXRRTKWT.js';
 import './chunk-XCUUI7E7.js';
 import './chunk-PQADV6P6.js';
 import './chunk-RSAQOKH3.js';
-import { Menu } from './chunk-3JIZ2A6K.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
-import './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { forwardRef, useMemo, useRef, useState, useId, useSyncExternalStore, useCallback, useLayoutEffect, useEffect, useImperativeHandle } from 'react';

package/dist/FolderTile/FolderTile.d.ts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+/**
+ * What a folder holds that the reader can open: its direct children only,
+ * counted from the reader's own view of them. A folder grants nothing, so a
+ * reader who can open nothing inside is told so rather than told it is empty.
+ */
+export interface FolderContents {
+    artifacts: number;
+    folders: number;
+}
+export interface FolderContentsLabels {
+    /** "12 artifacts", "1 artifact". */
+    artifacts: (count: number) => string;
+    /** "2 folders", "1 folder". */
+    folders: (count: number) => string;
+    /** Said when the reader can open nothing inside, which is never "Empty". */
+    nothing: string;
+}
+/**
+ * The line a folder's tile and its list row say about what is inside: "12
+ * artifacts · 2 folders", one part alone when the other is none, and "Nothing
+ * you can open yet" for neither.
+ *
+ * ONE PHRASING, EXPORTED, so the grid's tile and the list's name cell
+ * (`ArtifactNameCell kind="folder"`, whose `detail` takes this) never say the
+ * same count two ways.
+ */
+export declare function describeFolderContents(contents: FolderContents, labels?: Partial<FolderContentsLabels>): string;
+export type FolderTileSize = 'tile' | 'row';
+export interface FolderTileLabels extends FolderContentsLabels {
+    /** What it is, said after its name: the tile draws a folder rather than printing the word. */
+    folder: string;
+    /** Said when the tile is chosen, since the chosen edge is a picture of it. */
+    selected: string;
+}
+export interface FolderTileProps {
+    name: string;
+    /** The folder's page. The whole tile is one real link. */
+    href: string;
+    /**
+     * Who can see the folder, as a glyph and a short word: an
+     * `ArtifactAccessLabel` with the folder's own word ("Everyone", "Only you").
+     * Read as part of the tile's description.
+     */
+    visibility?: ReactNode;
+    /** What is inside that the reader can open. Left out (still loading), no line is drawn. */
+    contents?: FolderContents | undefined;
+    /**
+     * The tile's own controls (a More menu), drawn OUTSIDE its link at its
+     * trailing edge and shown on hover and while focus is inside the tile, so a
+     * keyboard reaches them after the link and they are never nested in it.
+     */
+    actions?: ReactNode;
+    /** It is chosen (a selection the host keeps): the selected edge and fill. */
+    selected?: boolean | undefined;
+    /**
+     * Something held over it would land in it: the drop target's edge and fill.
+     * Reserved for dragging onto a folder, which the host drives.
+     */
+    dropTarget?: boolean | undefined;
+    /**
+     * `tile` is a gallery's (a grid of them, a few across); `row` is the full
+     * width, 44px row a phone takes. A tile takes the row's shape on its own
+     * under the phone breakpoint.
+     */
+    size?: FolderTileSize | undefined;
+    className?: string | undefined;
+    labels?: Partial<FolderTileLabels> | undefined;
+}
+/**
+ * A folder in a gallery: the folder glyph on a neutral tint, the name on one
+ * line, who can see it and what is inside, and a More menu.
+ *
+ * SHORTER THAN AN ARTIFACT'S CARD AND WITH NO PREVIEW, so a folder and an
+ * artifact never look alike and the kind's badge keeps its meaning. The tint
+ * is neutral for the same reason: a folder is not a kind.
+ *
+ * THE FACTS ARE NEVER CUT. Who can see the folder and what is inside wrap
+ * onto a second line where the tile is narrow; only the name, which carries
+ * its whole self on hover, is cut to one line.
+ *
+ * THE WHOLE TILE IS ONE LINK, named by the folder's name alone and described
+ * by the rest, so a reader moving by link hears "Q3 launch" and then, if they
+ * wait, "Folder, Everyone, 12 artifacts · 2 folders". The More menu sits
+ * beside the link rather than inside it.
+ *
+ * ITS COUNT IS THE READER'S OWN. A folder grants nothing on what it holds, so
+ * the count is of what this reader can open, and a folder holding only things
+ * they cannot open says "Nothing you can open yet", never "Empty".
+ */
+export declare function FolderTile({ name, href, visibility, contents, actions, selected, dropTarget, size, className, labels, }: FolderTileProps): import("react").JSX.Element;

package/dist/FolderTile/index.d.ts

@@ -0,0 +1,3 @@
+import './FolderTile.css';
+export { FolderTile, describeFolderContents } from './FolderTile.js';
+export type { FolderContents, FolderContentsLabels, FolderTileLabels, FolderTileProps, FolderTileSize } from './FolderTile.js';

package/dist/FolderTile/index.js

@@ -0,0 +1,7 @@
+export { FolderTile, describeFolderContents } from '../chunk-M4QM477B.js';
+import '../chunk-INHXF2CL.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FolderTile-FDT5Y63Z.css

@@ -0,0 +1,231 @@
+/*
+ * A folder in a gallery: a short tile on Card (no preview), the folder glyph
+ * on a neutral tint over the name and one quiet line, and a More menu in the
+ * top corner outside the link. `row` is the full width, 44px row a phone
+ * takes, and a tile becomes one under the phone breakpoint.
+ *
+ * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
+ * class too: the two sheets meet at equal weight and the bundle orders them by
+ * file name, which puts Card's after this one.
+ */
+
+/*
+ * THE ARTIFACT CARD'S CORNER, so a folder tile and the cards below it read as
+ * one gallery, and Card's own hover step (the hairline darkens, nothing
+ * lifts). The chosen state is Card's (`selected`): the selected edge over the
+ * selected fill.
+ */
+.crewlet-card.crewlet-folder-tile {
+  /*
+   * THE TWO SHAPES ARE ONE LAYOUT AT TWO SIZES, so the row (and a tile under
+   * the phone breakpoint) restates these and nothing else.
+   */
+  --crewlet-folder-tile-radius: var(--radius-xl);
+  --crewlet-folder-tile-gap: var(--spacing-3);
+  --crewlet-folder-tile-pad-block: var(--spacing-4);
+  --crewlet-folder-tile-pad-inline: var(--spacing-4);
+  --crewlet-folder-tile-floor: auto;
+  --crewlet-folder-tile-glyph: 40px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  --crewlet-folder-tile-name: var(--font-size-md);
+  --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-actions-inset: var(--spacing-3);
+  /*
+   * A TILE STACKS: the glyph on top with the More menu level with it in the
+   * other corner, then the name and the facts the full width of the tile,
+   * where a gallery four across has room for "Everyone · 12 artifacts · 2
+   * folders". A row is one line of glyph and words with the menu centred on
+   * it, and only the row gives the menu room.
+   */
+  --crewlet-folder-tile-direction: column;
+  --crewlet-folder-tile-align: flex-start;
+  --crewlet-folder-tile-actions-top: calc(
+    var(--crewlet-folder-tile-pad-block) + (var(--crewlet-folder-tile-glyph) - var(--size-control-sm)) / 2
+  );
+  --crewlet-folder-tile-actions-shift: 0;
+  --crewlet-folder-tile-reserve-link: 0px;
+
+  flex-direction: row;
+  align-items: stretch;
+  min-width: 0;
+  border-radius: var(--crewlet-folder-tile-radius);
+}
+
+/* ---- the row: a phone's, full width at 44px ---- */
+
+.crewlet-card.crewlet-folder-tile--row {
+  --crewlet-folder-tile-radius: var(--radius-lg);
+  --crewlet-folder-tile-gap: var(--spacing-2);
+  --crewlet-folder-tile-pad-block: var(--spacing-1);
+  --crewlet-folder-tile-pad-inline: var(--spacing-3);
+  --crewlet-folder-tile-floor: var(--size-control-lg);
+  --crewlet-folder-tile-glyph: 28px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+  --crewlet-folder-tile-name: var(--font-size-sm);
+  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-actions-inset: var(--spacing-2);
+  --crewlet-folder-tile-direction: row;
+  --crewlet-folder-tile-align: center;
+  --crewlet-folder-tile-actions-top: 50%;
+  --crewlet-folder-tile-actions-shift: -50%;
+  --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+}
+
+/* UNDER THE PHONE BREAKPOINT A TILE IS THE ROW, strictly under, as the
+   package switches there everywhere else. */
+@media (width < 640px) {
+  .crewlet-card.crewlet-folder-tile--tile {
+    --crewlet-folder-tile-radius: var(--radius-lg);
+    --crewlet-folder-tile-gap: var(--spacing-2);
+    --crewlet-folder-tile-pad-block: var(--spacing-1);
+    --crewlet-folder-tile-pad-inline: var(--spacing-3);
+    --crewlet-folder-tile-floor: var(--size-control-lg);
+    --crewlet-folder-tile-glyph: 28px;
+    --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+    --crewlet-folder-tile-name: var(--font-size-sm);
+    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-actions-inset: var(--spacing-2);
+    --crewlet-folder-tile-direction: row;
+    --crewlet-folder-tile-align: center;
+    --crewlet-folder-tile-actions-top: 50%;
+    --crewlet-folder-tile-actions-shift: -50%;
+    --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+  }
+}
+
+/*
+ * SOMETHING HELD OVER IT WOULD LAND IN IT: the accent edge over the accent's
+ * soft fill, the same pair a file drop target takes while files are over it,
+ * so "let go here" reads one way across the package.
+ */
+.crewlet-card.crewlet-folder-tile.is-drop-target {
+  border-color: var(--color-brand-accent);
+  background-color: var(--color-brand-accent-soft);
+}
+
+.crewlet-card.crewlet-folder-tile:has(.crewlet-folder-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* THE LINK IS THE TILE: it fills it, and the ring is drawn on the tile. */
+.crewlet-folder-tile__link,
+.crewlet-folder-tile__link:hover {
+  text-decoration: none;
+}
+
+.crewlet-folder-tile__link {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: var(--crewlet-folder-tile-direction);
+  align-items: var(--crewlet-folder-tile-align);
+  gap: var(--crewlet-folder-tile-gap);
+  min-width: 0;
+  min-height: var(--crewlet-folder-tile-floor);
+  padding: var(--crewlet-folder-tile-pad-block) var(--crewlet-folder-tile-pad-inline);
+  border-radius: inherit;
+  color: inherit;
+  outline: none;
+}
+
+/* Room for the More menu on a row, where it sits beside the words. */
+.crewlet-folder-tile--with-actions .crewlet-folder-tile__link {
+  padding-inline-end: calc(var(--crewlet-folder-tile-pad-inline) + var(--crewlet-folder-tile-reserve-link));
+}
+
+/* A NEUTRAL TINT, never a kind's: a folder is not a kind. */
+.crewlet-folder-tile__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-folder-tile-glyph);
+  height: var(--crewlet-folder-tile-glyph);
+  box-sizing: border-box;
+  border-radius: var(--crewlet-folder-tile-glyph-radius);
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-folder-tile__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-folder-tile__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--crewlet-folder-tile-name);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE FACTS WRAP, NEVER CUT. "Everyone" and "Nothing you can open yet" are
+ * both things a reader has to read, and four tiles across a laptop's page do
+ * not have room for them on one line: the count moves under who can see the
+ * folder rather than losing its end to an ellipsis. The two are told apart by
+ * the visibility glyph and the gap between them, not by a separator, so a
+ * line that breaks never opens on a stray dot.
+ */
+.crewlet-folder-tile__facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px var(--spacing-3);
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-folder-tile-facts);
+  line-height: 1.35;
+}
+
+.crewlet-folder-tile__visibility {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-folder-tile__contents {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * THE TILE'S OWN CONTROLS, at its trailing edge and outside the link: hidden
+ * until the tile is hovered or holds focus, so a gallery rests as names, and
+ * always there on a screen with no hover or while their menu is open.
+ */
+.crewlet-folder-tile__actions {
+  position: absolute;
+  top: var(--crewlet-folder-tile-actions-top);
+  right: var(--crewlet-folder-tile-actions-inset);
+  display: inline-flex;
+  gap: var(--spacing-1);
+  transform: translateY(var(--crewlet-folder-tile-actions-shift));
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-folder-tile:hover .crewlet-folder-tile__actions,
+.crewlet-folder-tile:focus-within .crewlet-folder-tile__actions,
+.crewlet-folder-tile__actions:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-folder-tile__actions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-folder-tile__actions {
+    transition: none;
+  }
+}

package/dist/HuePicker/index.js

@@ -1,17 +1,17 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-RBUA7ZNK.js';
+export { HuePicker, HueSwatch } from '../chunk-34RMTXDZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-SMVWDO72.js';
-import '../chunk-GKRPPSWY.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-3JIZ2A6K.js';
-import '../chunk-2YTOOH3A.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Input/index.js

@@ -1,9 +1,9 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-D4EOPIFL.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,12 +1,12 @@
-export { LinkInterstitial, openExternal } from '../chunk-DY4DQ7EB.js';
+export { LinkInterstitial, openExternal } from '../chunk-GP4YWZFO.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-6AKG2VLR.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';