@crewlethq/ui 0.4.3 → 0.5.0

package/dist/{Listbox-X2DOTSQA.css → Listbox-6WJNJQVQ.css}

@@ -32,6 +32,29 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  /*
+   * A ROW IS NEVER SHRUNK BELOW ITS OWN CONTENT, and `flex: none` is what says
+   * so. The list above is a column flex container with a `max-height` and
+   * `overflow-y: auto`, which makes every row a flex ITEM, and a flex item's
+   * automatic minimum size is normally its content — that is what stops a
+   * column from compressing its children and makes the container scroll
+   * instead. The `min-height` below REPLACES that automatic minimum with a
+   * fixed floor, so once the rows no longer fit, the free space goes negative
+   * and every row shrinks to exactly that floor BEFORE the scrollbar appears.
+   * A row is `overflow: visible`, so its content then paints over its
+   * neighbours.
+   *
+   * It is not a corner case: a row is 19.5px of text plus 16px of padding =
+   * 35.5px against a 28px floor, so EVERY row of a list long enough to scroll
+   * was over-tall. Measured in Chromium on a nine-option Select — five rows
+   * drawn over each other, two of them at 59px inside a 28px box.
+   *
+   * `flex: none` is `0 0 auto`: the basis stays content-derived and the row
+   * can no longer shrink, which leaves `min-height` doing the one job it was
+   * written for — a floor under a SHORT row, not a cap on a tall one. The
+   * scroller absorbs the excess, one row deep, which is what it is for.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-md);
@@ -39,8 +62,8 @@
    * The SECONDARY step, not the primary one. A list of candidates is read by
    * running the eye down it for the one that matches, and rows drawn at full
    * strength all shout at once; the row the reader is actually on is the one
-   * that takes the accent and its ink. The step is held at 4.5:1 on every
-   * ground a row can sit on, so quieter is not fainter.
+   * that lifts to the primary ink. The step is held at 4.5:1 on every ground a
+   * row can sit on, so quieter is not fainter.
    */
   color: var(--color-text-secondary);
   font-size: var(--font-size-compact);
@@ -52,14 +75,39 @@
 }
 
 /*
- * The active row, whether the arrows put it there or a hover did. The accent
- * is what means "here", and it is a tint plus its ink step rather than a fill
- * with a label on it.
+ * The active row, whether the arrows put it there or a hover did: the RAISED
+ * rung with the label lifted to the primary ink, as the approved palette draws
+ * it. Every list here opens on a card (a popover, a dialog), and raised is held
+ * dE 3 off the card by @crewlethq/tokens because a chip or a well has no border
+ * of its own, which is what this row is; every text step clears 4.5:1 on it.
+ *
+ * It used to be the accent's soft tint with the accent ink. The accent is the
+ * primary action's fill and the focus ring, so a violet row under the arrows
+ * read as a second primary on every surface that offers a list, the same
+ * reason the rail's current row stopped wearing it. What the accent still
+ * marks in a list is a CHOICE made (a multi-select's tick), not where the
+ * arrows are.
  */
 .crewlet-listbox__option[aria-selected='true'],
 .crewlet-listbox__option:hover {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+/*
+ * FORCED COLORS repaints every author background to Canvas, which took the
+ * highlight with it: the arrows moved through a list in which no row looked
+ * any different, in every Select, Combobox and command palette. An outline is
+ * the one mark the mode keeps, drawn inside the row so the list's own clip
+ * does not cut it, in the system's colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-listbox__option[aria-selected='true'] {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-color: Highlight;
+    outline-offset: -2px;
+  }
 }
 
 .crewlet-listbox__option[aria-disabled='true'] {
@@ -103,7 +151,12 @@
   font-size: var(--font-size-compact);
 }
 
+/* AND NEITHER IS THE SEPARATOR, for the same reason one step further: its
+   content minimum is zero, so it is the one child a squeezed column can
+   flatten completely — exactly when the list is long enough to need the
+   grouping it draws. */
 .crewlet-listbox__separator {
+  flex: none;
   height: 1px;
   margin: var(--spacing-1) 0;
   background: var(--color-border-default);

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-FBZAKNSX.js';
+export { Menu } from '../chunk-IPVQKAHO.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/{Menu-6DE7I66I.css → Menu-BT5PMFJI.css}

@@ -70,6 +70,21 @@
   align-items: center;
   gap: var(--spacing-2);
   width: 100%;
+  /*
+   * THE SAME RULE THE LISTBOX ROW STATES, and it has to be stated twice
+   * because a menu's rows are deliberately not in that family (see the head of
+   * Listbox.css). The panel above is a column flex scroller, `__group` is
+   * `display: contents` so every item is a direct flex item of it, and the
+   * `min-height` below replaces the automatic minimum that would otherwise
+   * hold a row at its content. Once the menu is long enough to scroll, the
+   * free space goes negative and the rows shrink to that floor first.
+   *
+   * A plain row survives it by accident — one nowrap line is 19.5px, under the
+   * floor, so there is nothing to shrink. A `--described` row does not: it
+   * adds `padding-block` and stacks a label over a wrapping description, which
+   * is ~52px squeezed into 28px and drawn over the rows either side.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: 0 var(--spacing-2);
   border: none;

package/dist/Meter/Meter.d.ts

@@ -2,12 +2,17 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 /**
  * What the bar is saying.
  *
- * `brand` is the ordinary reading, because a budget that is being spent is not
- * in a state; it is just a number. The three that ARE states are derived from
- * the fill unless a caller overrides them, so a bar that is nearly full says
- * so without every call site remembering to.
+ * `quantity` is the ordinary reading, because a budget that is being spent is
+ * not in a state; it is just a number. It is the first data series,
+ * `--color-data-1`: a meter is a figure of one quantity, and the label that
+ * names it is what a data hue asks for, where the accent it used to take
+ * means "act here" and a bar is not an action. The three that ARE states are
+ * derived from the fill unless a caller overrides them, so a bar that is
+ * nearly full says so without every call site remembering to. A caller that
+ * owns the rule passes a `MeterState` instead, which names the state rather
+ * than the paint.
  */
-export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export type MeterTone = 'quantity' | 'success' | 'warning' | 'danger' | 'neutral';
 /**
  * WHICH DIRECTION A FULL BAR POINTS, which is the one thing the fill itself
  * cannot say. A budget at 100 percent is a fault; a goal at 100 percent is the
@@ -26,7 +31,40 @@ export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
  * other thing, and it is not this component.
  */
 export type MeterPolarity = 'spent' | 'progress';
-export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+/**
+ * WHAT A LIMITED QUANTITY HAS COME TO, in the words of whoever enforces the
+ * limit: `ok` is inside it, `near` is close enough that somebody should look,
+ * and `refusing` is at it, where whatever the limit guards has stopped
+ * accepting more. It is the `spent` ramp's three steps named for what they
+ * MEAN rather than for how they are painted, which is what lets a consumer
+ * that owns the rule hand the meter its verdict instead of a number to judge.
+ */
+export type MeterState = 'ok' | 'near' | 'refusing';
+/** Every `MeterState`, in escalating order, for a caller checking a value it was sent. */
+export declare const METER_STATES: readonly MeterState[];
+/**
+ * Where the `spent` ramp turns, as FRACTIONS OF THE LIMIT rather than
+ * percentages, because a limit is what the rule that owns it is written
+ * against ("warn at nine tenths of the budget").
+ *
+ * Only `near` is a threshold. `refusing` is the limit itself, a fraction of
+ * 1: a meter's maximum IS the limit, so a refusal anywhere else would be a
+ * second ceiling the bar could not draw.
+ */
+export interface MeterThresholds {
+    /**
+     * The fraction of the limit at and above which the reading is `near`.
+     * Greater than 0 and at most 1; at 1 the meter has no middle step, since
+     * the limit itself is `refusing`.
+     */
+    near: number;
+}
+/**
+ * The thresholds a meter uses when nobody says otherwise: `near` at three
+ * quarters of the limit, the ramp every existing caller has always had.
+ */
+export declare const DEFAULT_METER_THRESHOLDS: Readonly<MeterThresholds>;
+interface MeterBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     value: number;
     /**
      * The ceiling. NON-POSITIVE MEANS THERE IS NO CEILING, and the bar is then
@@ -49,6 +87,33 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     valueText?: string | undefined;
     /** Drawn at the trailing edge of the legend. Falls back to `valueText`. */
     hint?: ReactNode;
+    /**
+     * `compact` is the bar inside a table cell. Its legend drops a type step;
+     * the track does not: it is the design's 6px at both sizes, and a thinner
+     * one in a dense row is the one a reader takes for a divider.
+     */
+    size?: 'default' | 'compact' | undefined;
+    /** Keep the label out of the picture. It stays in the accessibility tree. */
+    hideLabel?: boolean | undefined;
+}
+/**
+ * THE VERDICT: a caller that owns the rule says which state the quantity is
+ * in, and the meter paints it and derives nothing. The fill still draws the
+ * value against the maximum; only the tone is the caller's.
+ *
+ * Nothing else that decides a tone may stand beside it, because each would be
+ * a second opinion about one reading, and the types refuse them.
+ */
+export interface MeterVerdictProps {
+    /** The state the owner of the limit says this is: `ok`, `near` or `refusing`. */
+    state?: MeterState | undefined;
+    tone?: undefined;
+    polarity?: undefined;
+    thresholds?: undefined;
+}
+/** A tone chosen by hand, or derived from the fill on either ramp's own steps. */
+export interface MeterRampProps {
+    state?: undefined;
     /** Overrides the tone derived from the fill. */
     tone?: MeterTone | undefined;
     /**
@@ -57,21 +122,42 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
      * is given, which overrides the ramp entirely.
      */
     polarity?: MeterPolarity | undefined;
-    /**
-     * `compact` is the bar inside a table cell. Its legend drops a type step;
-     * the track does not, because the track is already the engine's 4px and
-     * there is nothing below four a fill still reads as a proportion in.
-     */
-    size?: 'default' | 'compact' | undefined;
-    /** Keep the label out of the picture. It stays in the accessibility tree. */
-    hideLabel?: boolean | undefined;
+    thresholds?: undefined;
+}
+/**
+ * The `spent` ramp with its middle step moved. Only that ramp has one, and a
+ * tone given by hand would ignore it, so neither stands beside `thresholds`.
+ */
+export interface MeterThresholdProps {
+    state?: undefined;
+    tone?: undefined;
+    polarity?: 'spent' | undefined;
+    /** Where `near` begins, as a fraction of the limit. Replaces `DEFAULT_METER_THRESHOLDS`. */
+    thresholds?: MeterThresholds | undefined;
 }
+export type MeterProps = MeterBaseProps & (MeterVerdictProps | MeterRampProps | MeterThresholdProps);
+/** The tone a `MeterState` is painted in. */
+export declare function meterStateTone(state: MeterState): MeterTone;
+/**
+ * The state a fraction of the limit is in: at or past the limit it is
+ * `refusing`, at or past `thresholds.near` it is `near`, below that `ok`.
+ *
+ * The boundaries are INCLUSIVE, so `near: 0.9` flips at exactly `9 / 10`:
+ * a rule that says "warn at nine tenths" warns at nine tenths.
+ *
+ * A `near` outside (0, 1] is refused with a `RangeError` naming it, because
+ * every such value is a rule that cannot be drawn: at 0 or below everything,
+ * even an empty bar, is `near`, and past 1 the limit is `refusing` before it
+ * can ever be `near`.
+ */
+export declare function meterState(fraction: number, thresholds?: MeterThresholds): MeterState;
 /**
  * The `spent` ramp: at the top it is a fault, near the top it wants a person,
  * below that it is just a number.
  *
  * Keeps its plain name because renaming an export is breaking, and it is still
- * the ramp a `Meter` uses when nobody says otherwise.
+ * the ramp a `Meter` uses when nobody says otherwise. It is `meterState` at
+ * `DEFAULT_METER_THRESHOLDS`, painted, over a percentage.
  */
 export declare function meterTone(percent: number): MeterTone;
 /**
@@ -123,4 +209,5 @@ export declare function progressTone(percent: number): MeterTone;
  * figures, so nothing is lost: what a reader hears is "140 of 100", not a bar
  * that quietly rounds itself down to exactly the limit it has overrun.
  */
-export declare function Meter({ value, max, label, valueText, hint, tone, polarity, size, hideLabel, className, ...rest }: MeterProps): import("react").JSX.Element;
+export declare function Meter({ value, max, label, valueText, hint, state, tone, polarity, thresholds, size, hideLabel, className, ...rest }: MeterProps): import("react").JSX.Element;
+export {};

package/dist/Meter/index.d.ts

@@ -1,3 +1,3 @@
 import './Meter.css';
-export { Meter, meterTone, progressTone } from './Meter.js';
-export type { MeterPolarity, MeterProps, MeterTone } from './Meter.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone, } from './Meter.js';
+export type { MeterPolarity, MeterProps, MeterRampProps, MeterState, MeterThresholdProps, MeterThresholds, MeterTone, MeterVerdictProps, } from './Meter.js';

package/dist/Meter/index.js

@@ -1,3 +1,3 @@
-export { Meter, meterTone, progressTone } from '../chunk-YODNNSZL.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-4PZ6FJKW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Meter-SKOOXQBC.css → Meter-5VCSFMZW.css}

@@ -42,22 +42,41 @@
 }
 
 /*
- * A 4px track, which is the engine's. A meter sits under a line of 12px text
- * inside a card, and the 6px bar read as a divider rather than as a reading of
- * something; four is the height at which the fill is still unmistakably a
- * proportion and the bar is unmistakably chrome.
+ * A 6px track with round ends, the approved design's meter, at both sizes. It
+ * stands at the end of a stat tile's value line beside a 28px number and a
+ * 28px sparkline, and under a line of 12px text inside a card; the design
+ * draws it at six in both places, where the engine's older bar was four.
+ *
+ * The track is RAISED, the approved design's, and a rung rather than a well.
+ * The fill is measured against it as a mark, and the palette suite measures a
+ * mark on the four opaque rungs: on the inset well this track used to be, the
+ * light warning and success fills measured 2.84:1 and 2.86:1 over the frame
+ * once the states took the approved hues, a pair no palette rule could see.
+ *
+ * An opaque track has an edge only against a ground that is not itself, so a
+ * meter is drawn on a CARD, where the design puts every one and where the
+ * palette holds raised a visible step above the ground (dE 3.13 dark, 3.65
+ * light). On the raised rung the unfilled remainder, and with it the extent
+ * of the bar, would not be there at all.
  */
 .crewlet-meter__track {
-  height: 4px;
+  height: 6px;
   border-radius: var(--radius-pill);
-  background: var(--color-surface-inset);
+  background: var(--color-surface-elevated);
   overflow: hidden;
 }
 
+/*
+ * The ordinary reading, `quantity`, is the first data series. A meter is a
+ * figure of ONE quantity and its label names it, which is all a data hue
+ * asks for; the accent it used to take means "act here", and a bar is not
+ * something to act on. Every other tone below is a state, derived from the
+ * fill or passed by the caller.
+ */
 .crewlet-meter__fill {
   height: 100%;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-accent);
+  background: var(--color-data-1);
   transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
@@ -85,3 +104,23 @@
     transition: none;
   }
 }
+
+/*
+ * FORCED COLORS. The mode repaints every author background to Canvas, and the
+ * track and the fill are nothing but backgrounds, so the bar used to disappear
+ * whole, track and reading together, for exactly the reader who asked for
+ * more contrast. A system colour an author writes is kept, so the fill is
+ * drawn in CanvasText and the track in GrayText, the system's own pair for
+ * "there" and "quieter", which is what a SegmentedMeter draws its parts and
+ * its remainder in. The tone goes, as every hue does in this mode; the length
+ * is the reading, and it stays.
+ */
+@media (forced-colors: active) {
+  .crewlet-meter__track {
+    background: GrayText;
+  }
+
+  .crewlet-meter__fill[data-tone] {
+    background: CanvasText;
+  }
+}

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-2EOKFKHX.js';
+export { ConfirmModal, Modal } from '../chunk-IG27QX7Q.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/{Modal-XYQJ4BL6.css → Modal-JAYBS2KS.css}

@@ -220,10 +220,11 @@
 }
 
 /*
- * The shell's one breakpoint. Below it there is no content beside a sheet to
- * keep in view, so the sheet takes the whole width and its edge goes with it.
+ * The shell's one breakpoint, strictly under it as the shell switches. Below
+ * it there is no content beside a sheet to keep in view, so the sheet takes
+ * the whole width and its edge goes with it.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-modal--sheet {
     width: 100%;
     border-inline: none;
@@ -249,6 +250,14 @@
  * it on the line the bar behind it draws, and holds the two buttons that
  * commit and abandon the form at a full control step with room around them.
  *
+ * THE HEIGHT IS THE ROOM, NOT THE PADDING. The head centres what it holds, so
+ * the room around the buttons is what the bar's height leaves, and the block
+ * padding is only the least it keeps when a title wraps. It was the 16px step
+ * while the bar was 64px, which a full control step filled exactly; at 52px
+ * the same padding stood the head 12px past the bar behind it. At the 4px step
+ * the head is the bar's height with the control step at every density, 36.48px
+ * at comfortable included, and with a subtitle under the title.
+ *
  * It used to be the tighter band, 49px with a close control alone, and the
  * commit pair sat in a foot below a body that scrolled 1,764px on a seat with
  * a dozen fields: the reader had to travel the whole form to reach Apply, and
@@ -256,7 +265,7 @@
  */
 .crewlet-modal__header--sheet {
   min-height: var(--size-shell-topbar);
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: var(--spacing-1) var(--spacing-6);
   gap: var(--spacing-4);
   box-sizing: border-box;
 }

package/dist/OrgLabel/OrgLabel.d.ts

@@ -17,8 +17,10 @@
  *     because a node is read as a box and a column is read down its leading
  *     edge: names centred in a column are a column nobody can scan;
  *   - the mark's zone is a large control step in a node and a small one in a
- *     row, and the mark inside it takes the step that half-fills or
- *     three-quarter-fills whichever zone it is in;
+ *     row, and a glyph inside it takes the step that half-fills or
+ *     three-quarter-fills whichever zone it is in; a seat's badge is the
+ *     approved org chart's own 26px in a node and the smallest badge, 20px,
+ *     in a row;
  *   - the push slot keeps a FIXED room in a node, because a node is
  *     `width: max-content` and a slot that grew with its content would relay
  *     the whole chart, and is content-sized in a row, where the grid already
@@ -41,36 +43,67 @@
  * became one.
  */
 import type { ReactNode } from 'react';
+import { type AvatarKind } from '../Avatar/index.js';
 import type { TreeCardTone } from '../TreeCanvas/index.js';
 /**
  * Which of the two things this label is: a card in a chart, or a line in a
  * grid of them.
  */
 export type OrgLabelLayout = 'node' | 'row';
-/** What both layouts say, in the order they say it. */
-export interface OrgLabelContent {
-    /** The mark in the leading zone: a glyph, a brand mark, an image. */
+/**
+ * The seat a node or a row stands for, drawn as its badge in the mark's zone.
+ *
+ * `kind` IS REQUIRED HERE, where `Avatar` defaults it: an org chart is the one
+ * surface whose whole job is saying which seats a person holds and which the
+ * engine runs, and a default would draw every person the caller forgot to
+ * mark as an agent.
+ */
+export interface OrgLabelAvatar {
+    /** Whose badge: the initials are made from it, usually the label's own name. */
+    name: string;
+    /** An agent is a squircle, a human a circle: `Avatar`'s own kind. */
+    kind: AvatarKind;
+    /** A picture, where the seat has one; otherwise the initials. */
+    src?: string | undefined;
+}
+/**
+ * The mark in the leading zone: a glyph, or a seat's badge. Never both, since
+ * the zone holds one mark.
+ */
+export type OrgLabelMark = {
+    /** A glyph, a brand mark or an image, for what is not a seat: a company, a unit, a group. */
     icon?: ReactNode | undefined;
     /**
-     * A ring around that mark.
+     * How big the glyph is drawn in its zone, as a proportion of the zone
+     * rather than as a size: `md` half-fills it, `lg` fills three quarters.
      *
-     * `dashed` is the boundary something standing for somebody outside the
-     * system wears, the same mark a dashed card and a dashed row carry. The
-     * BOUNDARY says it rather than a hue, so it reads to somebody who cannot
-     * separate hues at all.
+     * `md` is what a container takes (a company, a unit, a group) and `lg`
+     * is for the mark that stands for the THING the chart is about, so a
+     * reader tells one from the other at the far end of a chart without
+     * reading either caption. The zone itself does not change either way,
+     * so this moves nothing: only what is drawn inside it.
      */
-    iconRing?: 'none' | 'dashed' | undefined;
+    iconSize?: 'md' | 'lg' | undefined;
+    avatar?: undefined;
+} | {
     /**
-     * How big the mark is drawn in its zone, as a proportion of the zone rather
-     * than as a size: `md` half-fills it, `lg` fills three quarters.
+     * A SEAT'S BADGE, with its kind as its outline: a squircle for an agent,
+     * a circle for a person, which is the one cue that tells them apart.
+     * There used to be a second, a dashed ring round a glyph for a human
+     * seat, and two cues for one fact are two things to keep agreeing.
+     *
+     * The layout sizes it and nothing here does: the approved org chart's
+     * 26px badge in a node and the smallest step, 20px, in a row.
      *
-     * `md` is what a container takes (a company, a unit, a group) and `lg` is
-     * for the mark that stands for the THING the chart is about, so a reader
-     * tells one from the other at the far end of a chart without reading either
-     * caption. The zone itself does not change either way, so this moves
-     * nothing: only what is drawn inside it.
+     * Optional in this branch as well, so a label that draws no mark at all
+     * matches both and a caller can hand either layout the same content.
      */
-    iconSize?: 'md' | 'lg' | undefined;
+    avatar?: OrgLabelAvatar | undefined;
+    icon?: undefined;
+    iconSize?: undefined;
+};
+/** What both layouts say besides the mark, in the order they say it. */
+interface OrgLabelWords {
     /** The name, which takes the width the two fixed zones leave and truncates. */
     name: ReactNode;
     /** What kind of thing this is: "Department", "Human seat", "Crewlet agent". */
@@ -98,7 +131,9 @@ export interface OrgLabelContent {
      */
     className?: string | undefined;
 }
-export interface OrgLabelNodeProps extends OrgLabelContent {
+/** What both layouts say, in the order they say it. */
+export type OrgLabelContent = OrgLabelMark & OrgLabelWords;
+export type OrgLabelNodeProps = OrgLabelContent & {
     layout?: 'node' | undefined;
     /**
      * Refused on a node, because a node has no element to carry it. A chart card
@@ -106,12 +141,13 @@ export interface OrgLabelNodeProps extends OrgLabelContent {
      * is where a node's ink comes from; there is nothing here to tone.
      */
     tone?: never | undefined;
-}
-export interface OrgLabelRowProps extends OrgLabelContent {
+};
+export type OrgLabelRowProps = OrgLabelContent & {
     layout: 'row';
-    /** The row's hue, which its mark and its name are drawn in. */
+    /** The row's hue, which its glyph and its name are drawn in. */
     tone?: TreeCardTone | undefined;
-}
+};
 export type OrgLabelProps = OrgLabelNodeProps | OrgLabelRowProps;
 /** The mark, the name and the caption of an org chart node or an org table row. */
 export declare function OrgLabel(props: OrgLabelProps): import("react").JSX.Element;
+export {};

package/dist/OrgLabel/index.d.ts

@@ -1,3 +1,3 @@
 import './OrgLabel.css';
 export { OrgLabel } from './OrgLabel.js';
-export type { OrgLabelContent, OrgLabelLayout, OrgLabelProps, OrgLabelNodeProps, OrgLabelRowProps, } from './OrgLabel.js';
+export type { OrgLabelAvatar, OrgLabelContent, OrgLabelLayout, OrgLabelMark, OrgLabelProps, OrgLabelNodeProps, OrgLabelRowProps, } from './OrgLabel.js';

package/dist/OrgLabel/index.js

@@ -1,2 +1,3 @@
-export { OrgLabel } from '../chunk-5C5YMZQU.js';
+export { OrgLabel } from '../chunk-WOFOMTGB.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgLabel-D7U6QJZD.css → OrgLabel-CR233G34.css}

@@ -73,26 +73,17 @@
      had the fill alone and therefore the same defect; one rule now answers for
      both surfaces. */
   color: inherit;
-  fill: currentColor;
-}
-
-/*
- * THE DASHED RING is the boundary something standing for somebody outside the
- * system wears, around the mark rather than instead of it: the card's own edge
- * and the row's own mark carry the same dash, and the two together are what a
- * reader recognises without reading a word.
- */
-.crewlet-org-label__icon--dashed {
-  position: relative;
 }
 
-.crewlet-org-label__icon--dashed::before {
-  content: '';
-  position: absolute;
-  width: var(--size-target-min);
-  height: var(--size-target-min);
-  border: 1px dashed var(--color-border-hover);
-  border-radius: var(--radius-circle);
+/* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
+   inside of a Lucide glyph turns every closed shape in it solid and every
+   open one into a smear (a person's head and shoulders, a unit's building, a
+   warning's triangle, each a blob), so a `.crewlet-glyph` keeps the fill its
+   own frame decides and takes the ink through its stroke. */
+.crewlet-org-label__icon svg:not(.crewlet-glyph),
+.crewlet-org-label__icon svg:not(.crewlet-glyph) g,
+.crewlet-org-label__icon svg:not(.crewlet-glyph) path {
+  fill: currentColor;
 }
 
 /* ---- The name and its caption -------------------------------------------- */

package/dist/OrgNode/index.js

@@ -1,3 +1,4 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IAJLHVUA.js';
-import '../chunk-5C5YMZQU.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TIWAHZZ6.js';
+import '../chunk-WOFOMTGB.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/OrgTable.d.ts

@@ -71,9 +71,9 @@ export declare function OrgTable({ rows, renderCell, tone, controls, labels, ref
  * this folder is drawing. It adds nothing and takes nothing away beyond the
  * row's `tone`, which only a row has: a chart card publishes its own.
  */
-export interface OrgTableNameProps extends OrgLabelContent {
+export type OrgTableNameProps = OrgLabelContent & {
     tone?: OrgTableTone | undefined;
-}
+};
 export declare function OrgTableName({ tone, ...content }: OrgTableNameProps): import("react").JSX.Element;
 /**
  * The strip of controls at the end of a row.