@crewlethq/ui 0.50.0 → 0.52.0

package/README.md

@@ -204,6 +204,40 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.52.0
+
+A second polish of the brand setup pieces.
+
+**`LogoSlotGroup` is new**: logo slots side by side, aligned row by row. Each slot is a subgrid of one set of rows, so the names and descriptions, the stages, the notes under them and the action rows each start on one line across the slots whatever their copy; a row no slot uses takes no room. What may be brought is written once under the row (`hint`) and describes every slot's picker, and a slot inside a group draws no caption of its own. The columns are as many as fit at 14rem, then one under another on a phone. A slot's empty note and refusal now share one element (`.crewlet-logo-slot__notes`).
+
+**`LogoSlot` takes `size="sm"`**: a thumbnail for a summary of what is set, at half the stage's height with a tighter inset and smaller words, best read-only.
+
+**`ChoiceButtons` takes `size="sm"`, per-option `media` and `chosen`.** The Inbox's one-press answer option, compact (the small control height, the compact and micro type steps) in a row that wraps, for suggestions beside a field. `media` is a decorative picture before the words (a `ColorChip` on a suggested colour). `chosen` keeps an applied option marked in the selected edge and fill, with every option a toggle button (`aria-pressed`) saying whether it is the one applied; left out, the options send and say nothing of a choice, as in the Inbox. Hover, press and focus are the Inbox's own.
+
+**`ListInput` counts its items, matches its Add to the field and aligns its rows.** With `maxItems` the help line ends in a plain count (`tallyLabel`, "3 of 5"), joined into the group's description, and a full list says "That's the most. Remove one to add another." (`fullMessage`'s new default). The Add button stands at the field's medium height on the box's first line. A row's number sits on the text's first line at its line height, so the two share a baseline however long the item; the row's gap is a step and a half; and an edited item keeps an inset for its ring that a margin takes back, so the words never move when it is focused. What to change: a test that reads the old "The list is full at N" sentence.
+
+**`FormField` takes `tally`**: a count that is not a length, drawn at the end of the help line where a length count would be and joined into the description the same way.
+
+## Changes in 0.51.0
+
+Polish of the setup wizard pieces, and the parts the brand setup asked for.
+
+**`ColorField` draws its `#` and reads more than six digits.** The `#` is drawn at the start of the field, so a person types the six hex digits alone, and a pasted `#rrggbb` loses its own `#` to it. When the reader leaves the field (Enter or Tab), `rrggbb`, the three digit shorthand and `rgb(r, g, b)` or `rgb(r g b)` are normalised to lowercase `#rrggbb`; anything else is refused with one sentence. Six digits are still reported as they are typed, and `onChange` still receives only a colour, or `''` for an emptied optional field. What to change: a test that reads the text field's value reads the six digits without the `#`. The default `labels.invalid` and `labels.placeholder` changed, and `labels.prefix` is new.
+
+**`ContrastHelp` is new**: a small info button beside a contrast heading that opens a short panel saying what AA, AAA and Low or Fails mean, each drawn as `ContrastBadge` draws it. It is a `Popover` the button toggles, so it opens by touch and from the keyboard, and closes on Escape with focus handed back. Place it beside the heading, not inside it. `ContrastLevelTag` is the one drawing of a level, shared by the badge and the panel.
+
+**`ColorChip` is new**: a colour as a small decorative chip (12px `xs` or 16px `sm`, round or square) with an edge of its own and the hatch of no colour, for the mark on a button that applies a suggested colour.
+
+**`SetupWizard` takes `footerStart` and `wide`.** `footerStart` stands at the start of the footer row (the way out), with `footer`, the step's actions, held at its end. `wide` lets a step that lays out columns of its own take the whole width beside the rail. A wizard with no `aside` no longer holds an empty 320px column from 70rem.
+
+**`Callout`'s actions stand one step apart.** The action slot is a wrapping row with the kit's step between, so two actions never draw touching.
+
+**`EditingStatus` reads cleanly.** Its text is "Draft Saved 24s ago", drawn "Draft · Saved 24s ago": no hidden comma and no second "Saved". The live region holds only the label and the state, and the time follows it in a `time` element outside the region, so it is shown and never announced. What to change: `labels.saved` is now the word alone (`'Saved'`), and `labels.savedSpoken` is gone. A test that reads `getByRole('status')` reads the label and the state only.
+
+**`ListInput` ends its new-item row with an Add button.** The add control no longer floats beside the legend as a `+` square: it is a text button at the end of the box's own row, with or without a shown legend, beside Enter. It shows `addText` ("Add") and is named by `addLabel` ("Add policy").
+
+**Folder tiles are set on the artifact card's type scale.** A `FolderTile`'s name and facts take a gallery card's title and facts steps at every width, on one 1.35 line height with the card's step between; a row, and a tile on a phone, no longer drop to smaller steps beside cards that keep theirs. `ArtifactCard`'s gallery facts take the title's line height. `ArtifactNameCell` is unchanged: a folder's row in the list is set as every artifact's row there.
+
 ## Changes in 0.50.0
 
 The pieces of a setup a person walks step by step, first used by the brand setup.

package/dist/AgentHandoffPanel/index.js

@@ -1,11 +1,11 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-V7GOOXPK.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3NXWH5NC.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-GHY63X4C.js';
+import '../chunk-UJ4VVK7R.js';
 import '../chunk-NBDN5JZV.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';

package/dist/ArrangeList/index.js

@@ -1,8 +1,8 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-H55D66IK.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-SSHDQBHR.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-NCHKKYPQ.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-RQI43UJ7.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-Q44X36QC.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-CUL5XV6O.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
@@ -8,10 +8,10 @@ import '../chunk-PZKHBB7D.js';
 import '../chunk-RV6XB5UV.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-NCHKKYPQ.js';
+import '../chunk-RQI43UJ7.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{ArtifactCard-SOB63NV5.css → ArtifactCard-F7IVRL3A.css}

@@ -215,6 +215,9 @@
 
 .crewlet-artifact-card--card .crewlet-artifact-card__facts {
   font-size: var(--font-size-sm);
+  /* The title's line height, so a card's words and a folder tile's beside it
+     keep one rhythm. */
+  line-height: 1.35;
 }
 
 .crewlet-artifact-card__meta {

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-3QSKDZR5.js';
+export { AvatarPicker } from '../chunk-EW2N4FOD.js';
 import '../chunk-34RMTXDZ.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';

package/dist/BrandSample/index.js

@@ -1,5 +1,5 @@
-export { BrandSample } from '../chunk-OEEYL2CM.js';
-import '../chunk-P3OIM6OC.js';
+export { BrandSample } from '../chunk-AVMQMY66.js';
+import '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/BrandScope/index.js

@@ -1,4 +1,4 @@
-export { BrandScope, brandScopeInputs } from '../chunk-P3OIM6OC.js';
+export { BrandScope, brandScopeInputs } from '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-SZZRIHGT.js';
+export { Callout } from '../chunk-BPCY7ZID.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Callout-ZAVG3P66.css → Callout-G3N3IE6M.css}

@@ -77,7 +77,16 @@
   font-weight: var(--font-weight-semibold);
 }
 
+/*
+ * THE ACTIONS ARE A ROW one step apart, wrapping when there is no room, so a
+ * callout with two (Continue setting up, Review and adopt) never draws them
+ * touching, whatever the host wraps them in.
+ */
 .crewlet-callout__action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
   grid-column: 3;
   grid-row: 1;
   align-self: center;

package/dist/Checkbox/index.js

@@ -1,5 +1,5 @@
-export { Checkbox, CheckboxGroup } from '../chunk-NCHKKYPQ.js';
-import '../chunk-EXRRTKWT.js';
+export { Checkbox, CheckboxGroup } from '../chunk-RQI43UJ7.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ChoiceButtons/ChoiceButtons.d.ts

@@ -4,7 +4,17 @@ export interface ChoiceButtonOption {
     label: ReactNode;
     /** A line under the label: what choosing it means. */
     detail?: ReactNode;
+    /**
+     * A small picture before the words, decorative (the label names the
+     * option): a `ColorChip` on a suggested colour.
+     */
+    media?: ReactNode;
 }
+/**
+ * `md` is the Inbox's answer, as tall as a touch target, in a column. `sm` is
+ * the same option, compact, in a row that wraps: suggestions beside a field.
+ */
+export type ChoiceButtonsSize = 'md' | 'sm';
 export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Names the group: "Answers". */
     label: string;
@@ -15,6 +25,16 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
     recommendedLabel?: string | undefined;
     /** Sends one option. */
     onChoose: (value: string) => void;
+    /** `md` (the Inbox's answer) by default, or `sm`, compact and in a wrapping row. */
+    size?: ChoiceButtonsSize | undefined;
+    /**
+     * The option already applied, for options that stay on screen after a
+     * press (a suggestion that updated a field). Given, every option is a
+     * toggle button that says whether it is the one applied, and that one is
+     * drawn chosen: the selected edge and fill, never the accent. `null` when
+     * none is; left out, the options send and say nothing of a choice.
+     */
+    chosen?: string | null | undefined;
     /**
      * The option being sent. It is announced as busy, and every option holds
      * still until the answer lands, so a second press cannot send a second
@@ -40,4 +60,4 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * the control the reader just pressed and drops it on the page body.
  * `aria-disabled` and `aria-busy` say the same and leave focus where it was.
  */
-export declare function ChoiceButtons({ label, options, recommended, recommendedLabel, onChoose, pending, disabledReason, className, ...rest }: ChoiceButtonsProps): import("react").JSX.Element;
+export declare function ChoiceButtons({ label, options, recommended, recommendedLabel, onChoose, pending, disabledReason, size, chosen, className, ...rest }: ChoiceButtonsProps): import("react").JSX.Element;

package/dist/ChoiceButtons/index.d.ts

@@ -1,3 +1,3 @@
 import './ChoiceButtons.css';
 export { ChoiceButtons } from './ChoiceButtons.js';
-export type { ChoiceButtonOption, ChoiceButtonsProps } from './ChoiceButtons.js';
+export type { ChoiceButtonOption, ChoiceButtonsProps, ChoiceButtonsSize } from './ChoiceButtons.js';

package/dist/ChoiceButtons/index.js

@@ -1,3 +1,3 @@
-export { ChoiceButtons } from '../chunk-BWOIUOO3.js';
+export { ChoiceButtons } from '../chunk-WXRH7NZW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-FLIFXFFS.css → ChoiceButtons-HWXEF2H3.css}

@@ -55,6 +55,17 @@
   background: var(--color-surface-pressed);
 }
 
+/*
+ * THE OPTION APPLIED is drawn as every chosen option in the package is: the
+ * selected edge over the soft selected fill, calm beside the focus ring, and
+ * held under the pointer so a hover never makes it look unchosen.
+ */
+.crewlet-choice-buttons__option.is-chosen,
+.crewlet-choice-buttons__option.is-chosen:hover {
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
+}
+
 /*
  * The plain option draws the strong hairline, so its ring is drawn over that
  * edge rather than a gap away from it, which would read as a second outline.
@@ -130,6 +141,55 @@
   text-transform: uppercase;
 }
 
+/* The picture before the words, centred on the label's line. */
+.crewlet-choice-buttons__media {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+}
+
+/* Before the words, not at the far end with the recommended mark. */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
+  justify-content: flex-start;
+}
+
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
+  margin-inline-start: auto;
+}
+
+/*
+ * SMALL: the same option, compact, in a row that wraps. A step and a half
+ * inside, the field's small height, the label at the compact step and its
+ * detail at the micro step, so three suggestions sit under a field without
+ * outweighing it. Every state (hover, press, focus, chosen) is the Inbox's.
+ */
+.crewlet-choice-buttons--sm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option {
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: center;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__text {
+  gap: 1px;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__detail {
+  font-size: var(--font-size-2xs);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-choice-buttons__option {
     transition: none;

package/dist/ColorChip/ColorChip.d.ts

@@ -0,0 +1,26 @@
+/** `xs` is 12px, a mark inside a small button; `sm` is 16px, beside a word in a row. */
+export type ColorChipSize = 'xs' | 'sm';
+export type ColorChipShape = 'round' | 'square';
+export interface ColorChipProps {
+    /**
+     * The colour, as `#rrggbb`. Anything else draws the hatch of no colour and
+     * is never put into a style.
+     */
+    value: string | null | undefined;
+    size?: ColorChipSize | undefined;
+    shape?: ColorChipShape | undefined;
+    className?: string | undefined;
+}
+/**
+ * A colour as a small chip and nothing else: the mark on a button that
+ * applies it ("Use #007f7f"), or beside a value in a row.
+ *
+ * DECORATION, hidden from a screen reader: the words beside it say what the
+ * colour is. Where a colour has to be named, read and copied, that is
+ * `ColorSwatch`.
+ *
+ * THE VALUE PASSES THE SAME GATE AS EVERY BRAND PART (`#rrggbb`, lowercased)
+ * before it reaches a style, and the chip draws an edge of its own, so a
+ * colour that matches the ground it sits on is still a chip.
+ */
+export declare function ColorChip({ value, size, shape, className }: ColorChipProps): import("react").JSX.Element;

package/dist/ColorChip/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorChip.css';
+export { ColorChip } from './ColorChip.js';
+export type { ColorChipProps, ColorChipShape, ColorChipSize } from './ColorChip.js';

package/dist/ColorChip/index.js

@@ -0,0 +1,3 @@
+export { ColorChip } from '../chunk-6GTTRJWJ.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ColorChip-A5XHTH3J.css

@@ -0,0 +1,46 @@
+/*
+ * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
+ * not a token, and it arrives through `--crewlet-color-chip-value` only after
+ * it has passed `#rrggbb`.
+ */
+.crewlet-color-chip {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  background: var(--crewlet-color-chip-value, var(--color-surface-inset));
+  /* An edge of its own, so a colour that matches its ground is still a chip. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  vertical-align: middle;
+}
+
+.crewlet-color-chip--sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.crewlet-color-chip--round {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-color-chip--square {
+  border-radius: var(--radius-xs);
+}
+
+/* The hatch of no colour, as every swatch in the package draws it. */
+.crewlet-color-chip.is-empty {
+  background: repeating-linear-gradient(-45deg, var(--color-border-hatch) 0 1px, transparent 1px var(--spacing-1));
+}
+
+/*
+ * FORCED COLORS drops backgrounds, which is all a chip is, so the mode keeps
+ * this one: the colour is the information, and the edge is drawn in the
+ * system's text colour so the chip still has a boundary.
+ */
+@media (forced-colors: active) {
+  .crewlet-color-chip {
+    forced-color-adjust: none;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}

package/dist/ColorField/ColorField.d.ts

@@ -7,10 +7,12 @@ export interface ColorFieldLabels {
     /** Names the colour picker beside the field: "Pick the Primary colour". */
     picker: (label: string) => string;
     /**
-     * What the empty field shows: the shape a value takes, never a colour, which
-     * an empty field would seem to hold.
+     * What the empty field shows after its `#`: the shape a value takes, never
+     * a colour, which an empty field would seem to hold.
      */
     placeholder: string;
+    /** Said for the `#` drawn at the start of the field, which is not part of what is typed. */
+    prefix: string;
 }
 export interface ColorFieldProps {
     /** The colour's role, which is the field's name: "Primary". */
@@ -48,12 +50,18 @@ export interface ColorFieldProps {
  * A colour a person chooses: a hex field, a swatch that opens the platform's
  * colour picker, and the reason a value was refused.
  *
- * THE VALUE IS `#` AND SIX HEX DIGITS, and nothing else is ever reported: the
- * field holds what is being typed, and a value reaches `onChange` only once it
- * reads as a colour, lowercased, the one spelling the engine stores. A value
- * that does not read is refused when the reader leaves the field (Enter or
- * Tab), never while they are still typing it, with a sentence saying what
- * right looks like.
+ * THE `#` IS THE FIELD'S, drawn at its start, so a person types the six hex
+ * digits alone; a pasted `#rrggbb` loses its own `#` to it. When the reader
+ * leaves the field (Enter or Tab) what they wrote is read as a colour:
+ * `rrggbb`, the three digit shorthand, or `rgb(r, g, b)` (commas or spaces),
+ * each normalised to the one spelling the engine stores, lowercase
+ * `#rrggbb`. Anything else is refused then, never while they are still
+ * typing, with a sentence saying what right looks like.
+ *
+ * ONLY A COLOUR IS EVER REPORTED. Six hex digits reach `onChange` as they are
+ * typed, so a preview follows the field; the shorthand and `rgb()` reach it
+ * when the reader leaves, since `abc` on its way to `abcdef` is not the colour
+ * they mean. An optional field emptied reports `''`.
  *
  * THE SWATCH IS THE PICKER. It is the platform's own colour input, drawn as
  * the chip of the colour the field holds and named for it, so it is a real,

package/dist/ColorField/index.js

@@ -1,6 +1,6 @@
-export { ColorField } from '../chunk-W6FOEBIL.js';
-import '../chunk-UZMNR366.js';
-import '../chunk-EXRRTKWT.js';
+export { ColorField } from '../chunk-5WYPSVRX.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ColorSwatch/index.js

@@ -1,8 +1,8 @@
-export { ColorSwatch } from '../chunk-WLSEAIVC.js';
+export { ColorSwatch } from '../chunk-RHPBTE3F.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Combobox/index.js

@@ -1,6 +1,6 @@
-export { Combobox } from '../chunk-P5JBDHWC.js';
+export { Combobox } from '../chunk-C6Z3MLSA.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-MIEBOO7Y.js';
+export { CommandPalette } from '../chunk-NMR7AJSB.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/CommentThread/index.js

@@ -1,13 +1,13 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-H7NMJ5AI.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-EZ43L6T7.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-GHY63X4C.js';
+import '../chunk-UJ4VVK7R.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-GHY63X4C.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-UJ4VVK7R.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ConfirmField/index.js

@@ -1,6 +1,6 @@
-export { ConfirmField, confirmMatches } from '../chunk-ZCIL5IHU.js';
+export { ConfirmField, confirmMatches } from '../chunk-2GIWL7IS.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ContrastBadge/ContrastBadge.d.ts

@@ -44,6 +44,19 @@ export interface ContrastBadgeLabels {
 export type ContrastBadgeLabelsInput = Partial<Omit<ContrastBadgeLabels, 'levels'>> & {
     levels?: Partial<Record<ContrastBadgeLevel, string>> | undefined;
 };
+export interface ContrastLevelTagProps {
+    /** The level drawn. */
+    level: ContrastBadgeLevel;
+    /** Its word: "AA", "Low". */
+    children: string;
+}
+/**
+ * A contrast level as the badge draws it: its word in its tone with its
+ * glyph (a check for AA and AAA, the warning triangle for large text only and
+ * Low, the alert circle for Fails). The one drawing of a level, so the badge
+ * and the explanation of the levels (`ContrastHelp`) never disagree.
+ */
+export declare function ContrastLevelTag({ level, children }: ContrastLevelTagProps): import("react").JSX.Element;
 export interface ContrastBadgeProps {
     /** The colour read: text, a logo, an accent. `#rrggbb`. */
     foreground: string;

package/dist/ContrastBadge/index.d.ts

@@ -1,3 +1,3 @@
 import './ContrastBadge.css';
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
-export type { ContrastBadgeLabels, ContrastBadgeLabelsInput, ContrastBadgeLevel, ContrastBadgeProps, ContrastLevel, ContrastScale, } from './ContrastBadge.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
+export type { ContrastBadgeLabels, ContrastBadgeLabelsInput, ContrastBadgeLevel, ContrastBadgeProps, ContrastLevelTagProps, ContrastLevel, ContrastScale, } from './ContrastBadge.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-NSSOWQCJ.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/ContrastHelp.d.ts

@@ -0,0 +1,40 @@
+import { type PopoverAlign } from '../Popover/index.js';
+export interface ContrastHelpLabels {
+    /** The button's name: "About contrast levels". */
+    trigger: string;
+    /** The panel's name: "Contrast levels". */
+    title: string;
+    /** What contrast is. */
+    intro: string;
+    /** The levels, each its word as the badge draws it and what it means. */
+    aa: {
+        term: string;
+        meaning: string;
+    };
+    aaa: {
+        term: string;
+        meaning: string;
+    };
+    low: {
+        term: string;
+        meaning: string;
+    };
+}
+export interface ContrastHelpProps {
+    /** Which edge of the button the panel lines up with. `start` by default. */
+    align?: PopoverAlign | undefined;
+    className?: string | undefined;
+    labels?: Partial<ContrastHelpLabels> | undefined;
+}
+/**
+ * What the contrast levels mean, a press away: a small info button beside a
+ * contrast heading that opens a short panel with AA, AAA and Low or Fails,
+ * each drawn as `ContrastBadge` draws it.
+ *
+ * A PRESS, NOT A HOVER. The panel is a `Popover` the button toggles, so it
+ * opens on a phone, where there is no hover, and from the keyboard (Enter or
+ * Space), and closes on Escape or a press outside, handing focus back to the
+ * button. A tooltip would hold this on hover alone and drop it the moment the
+ * pointer moved to read it. The panel is a dialog named by its title.
+ */
+export declare function ContrastHelp({ align, className, labels }: ContrastHelpProps): import("react").JSX.Element;

package/dist/ContrastHelp/index.d.ts

@@ -0,0 +1,3 @@
+import './ContrastHelp.css';
+export { ContrastHelp } from './ContrastHelp.js';
+export type { ContrastHelpLabels, ContrastHelpProps } from './ContrastHelp.js';

package/dist/ContrastHelp/index.js

@@ -0,0 +1,12 @@
+export { ContrastHelp } from '../chunk-KIRQZG3G.js';
+import '../chunk-WW7TU6HE.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-KHJIEPZV.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';