@crewlethq/ui 0.48.3 → 0.49.0

package/dist/PresenterView/index.js

@@ -1,6 +1,6 @@
-export { PresenterView, formatStopwatch } from '../chunk-ISDEXIXH.js';
-import '../chunk-RMEBFYL7.js';
+export { PresenterView, formatStopwatch } from '../chunk-E6HXFFWO.js';
 import '../chunk-RRO7UEYU.js';
+import '../chunk-RMEBFYL7.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';

package/dist/PrincipalPicker/index.js

@@ -1,5 +1,5 @@
-export { PrincipalPicker } from '../chunk-32TGEMQQ.js';
-import '../chunk-OOJTPR7N.js';
+export { PrincipalPicker } from '../chunk-KHZYAEGZ.js';
+import '../chunk-P5JBDHWC.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';

package/dist/SelectionBar/SelectionBar.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode, type RefObject } from 'react';
+export interface SelectionBarLabels {
+    /** The count, printed and said: "3 selected". */
+    count: (count: number) => string;
+    /** Said once the last pick is cleared, since the bar it was printed in goes. */
+    cleared: string;
+    /** The control that clears every pick. */
+    clear: string;
+    /** Names the bar: a toolbar is announced by its name. */
+    label: string;
+}
+export interface SelectionBarProps {
+    /** How many items are picked. At zero the bar draws nothing. */
+    count: number;
+    /** Clears every pick. */
+    onClear: () => void;
+    /**
+     * The bulk actions, as `Button`s ("Move to…"). An action only some of the
+     * picks allow is drawn with `disabledReason` ("You own 2 of 3"), never
+     * applied to the part it can be applied to without saying so.
+     */
+    children?: ReactNode;
+    /**
+     * Where focus goes once Clear has emptied the selection and the bar has
+     * gone with it: the gallery's Select toggle, or the list. Without it focus
+     * would fall to the page body with the button that held it.
+     */
+    returnFocusRef?: RefObject<HTMLElement | null> | undefined;
+    className?: string | undefined;
+    labels?: Partial<SelectionBarLabels> | undefined;
+}
+/**
+ * What is picked, and what can be done to all of it: the count, the bulk
+ * actions, and Clear.
+ *
+ * STICKY OVER THE LIST, DOCKED TO THE FOOT ON A PHONE. Over a long gallery the
+ * bar stays under the top of the scroller (`--crewlet-selection-bar-top` for a
+ * scroller that carries a bar of its own); under the phone breakpoint it
+ * floats at the bottom edge, where a thumb reaches it and the list it acts on
+ * stays in view; the host keeps the list's last row clear of it.
+ *
+ * THE COUNT IS SAID, POLITELY, AS IT CHANGES, through the shell's one polite
+ * region (`Announcer`): ticking a box changes nothing a screen reader reads on
+ * its own, and the bar appearing is not news a reader hears unless something
+ * says it. Clearing the last pick says so, since the bar goes with it.
+ *
+ * ONE STOP IN THE TAB ORDER: the actions and Clear are a `Toolbar`, walked
+ * with the arrows.
+ */
+export declare function SelectionBar({ count, onClear, children, returnFocusRef, className, labels }: SelectionBarProps): import("react").JSX.Element | null;

package/dist/SelectionBar/index.d.ts

@@ -0,0 +1,3 @@
+import './SelectionBar.css';
+export { SelectionBar } from './SelectionBar.js';
+export type { SelectionBarLabels, SelectionBarProps } from './SelectionBar.js';

package/dist/SelectionBar/index.js

@@ -0,0 +1,9 @@
+export { SelectionBar } from '../chunk-OCRVY42T.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar-XPWKUOSC.css

@@ -0,0 +1,61 @@
+/*
+ * What is picked and what can be done to it: the count, the bulk actions and
+ * Clear, on the raised rung inside the strong hairline so it reads as a bar
+ * laid over the list rather than a row of it.
+ *
+ * ON TOP OF TOOLBAR, so the rules that change Toolbar's own layout carry
+ * Toolbar's class too: the bundle orders the two sheets by file name.
+ */
+.crewlet-toolbar.crewlet-selection-bar {
+  position: sticky;
+  top: var(--crewlet-selection-bar-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+  flex-wrap: nowrap;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-sm);
+}
+
+.crewlet-selection-bar__count {
+  flex: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-selection-bar__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-selection-bar__spacer {
+  flex: 1 1 auto;
+}
+
+/*
+ * DOCKED TO THE FOOT ON A PHONE, strictly under the phone breakpoint: over the
+ * list at the bottom edge, inside the safe area, where a thumb reaches it and
+ * the picks it acts on stay in view above it.
+ */
+@media (width < 640px) {
+  .crewlet-toolbar.crewlet-selection-bar {
+    position: fixed;
+    top: auto;
+    right: var(--spacing-3);
+    bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
+    left: var(--spacing-3);
+    z-index: var(--z-index-overlay);
+    gap: var(--spacing-2);
+    padding-inline-start: var(--spacing-3);
+    box-shadow: var(--shadow-lg);
+  }
+}

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-5EBDOE3C.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JFDIMO3A.js';
 import '../chunk-XQZ6EWOE.js';
+import '../chunk-YCC2S7DF.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';

package/dist/SheetColumnEditor/index.js

@@ -1,4 +1,4 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-MUQJCH2Y.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-VTSJMDGP.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
@@ -6,14 +6,14 @@ import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-34RMTXDZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-F57N6ZJG.js';
 import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-NCHKKYPQ.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/SheetGrid/index.js

@@ -1,4 +1,4 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OO7QJCJQ.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-WXOYHVWG.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-KYIAFNU7.js';
@@ -9,8 +9,8 @@ import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-I33UIUZD.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-RSAQOKH3.js';

package/dist/Switcher/index.js

@@ -1,5 +1,5 @@
-export { Switcher } from '../chunk-7JED2NYP.js';
-import '../chunk-6AKG2VLR.js';
+export { Switcher } from '../chunk-VBIM6HFC.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';

package/dist/ThemeGallery/ThemeGallery.d.ts

@@ -5,8 +5,19 @@ import { type ThemeSwatchPair } from '../ThemeSwatch/index.js';
 export interface ThemeGalleryTheme<T extends string = string> {
     id: T;
     name: string;
-    /** A few words on what sets it apart, said with its name. */
-    tag: string;
+    /**
+     * A few words on what sets it apart, said with its name. Drawn only when
+     * the theme also sets `tagTone`; left out, the card is its name alone.
+     */
+    tag?: string | undefined;
+    /**
+     * Draws the tag on the card as well as saying it: `quiet` as a caption
+     * under the name, `brand` as the accent's pill, for the company's own theme
+     * among the product's ("Your company brand"). Left out, the tag is said
+     * with the name and nothing is drawn, which is how the product's own theme
+     * picker lists its themes.
+     */
+    tagTone?: 'quiet' | 'brand' | undefined;
     /** The id of the group it is listed under. */
     group: string;
     /** Its two palettes, drawn as the card's thumbnail unless `renderPreview` draws one. */

package/dist/ThemeGallery/index.js

@@ -1,6 +1,8 @@
-export { ThemeGallery } from '../chunk-E4BOVKNJ.js';
+export { ThemeGallery } from '../chunk-UTESMBPL.js';
 import '../chunk-MNFU2RNT.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';

package/dist/{ThemeGallery-X35Y25EX.css → ThemeGallery-UEFZRT6W.css}

@@ -102,6 +102,27 @@
   white-space: nowrap;
 }
 
+/*
+ * THE TAG, DRAWN WHERE A THEME ASKS (`tagTone`), under the name: `quiet` on
+ * the tertiary step and a step smaller, cut to one line with the whole of it
+ * on hover, and `brand` as the accent's pill, so a reader picking a deck's
+ * theme finds their brand among the product's at a glance. A theme that sets
+ * no tone has its tag said with its name and nothing drawn.
+ */
+.crewlet-theme-gallery__tag {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-theme-gallery__tag--brand {
+  display: flex;
+  min-width: 0;
+}
+
 /*
  * FORCED COLORS keeps the border and drops the accent, so the chosen card
  * would look like every other; the system's own selected colour says it.

package/dist/TimeWindowPicker/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-VKFG4FLE.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-R6R2UHVG.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';

package/dist/TypeSpecimen/TypeSpecimen.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export interface TypeSpecimenLabels {
+    /** The large letters the face is shown in. */
+    glyphs: string;
+    /** The line the face is read in, when the host gives none. */
+    sample: string;
+}
+export type TypeSpecimenSize = 'md' | 'sm';
+export interface TypeSpecimenProps {
+    /** The face's name, as a reader knows it: "Geist", "Inter Display". */
+    family: string;
+    /**
+     * What the face is for, printed over its name: "Heading", "Body". Named
+     * `label` rather than `role`, which is the ARIA attribute's name.
+     */
+    label: string;
+    /**
+     * The CSS family list to draw it in, when it is not the face's name alone:
+     * a system stack, or the family an uploaded face was declared under. Left
+     * out, or not a list of family names, the name is drawn in quotes before the
+     * package's own sans, so a face this page has not loaded falls back to a
+     * face it has.
+     */
+    fontFamily?: string | undefined;
+    /** The line the face is read in. */
+    sample?: string | undefined;
+    /** One fact under the name: "Uploaded, 4 files", "System stack". */
+    detail?: ReactNode;
+    /** The weight the specimen draws: a heading's face is shown at a heading's weight. */
+    weight?: 'regular' | 'medium' | 'semibold' | 'bold' | undefined;
+    size?: TypeSpecimenSize | undefined;
+    className?: string | undefined;
+    labels?: Partial<TypeSpecimenLabels> | undefined;
+}
+/**
+ * A face, shown: what it is for, "Aa" large in it, its name, and a line read
+ * in it.
+ *
+ * THE FACE IS DRAWN, NOT DESCRIBED. The letters and the line are set in the
+ * face itself (through `--crewlet-type-specimen-family`), so choosing a face
+ * is choosing what it looks like rather than a name. The name and the role
+ * are set in the interface's own type, so they read the same whatever the face
+ * is.
+ *
+ * A FACE THE PAGE CANNOT DRAW FALLS BACK TO ONE IT CAN: the family list ends
+ * in the package's sans, so a face still loading (or never uploaded) shows as
+ * the interface's type rather than as the browser's default serif.
+ */
+export declare function TypeSpecimen({ family, label, fontFamily, sample, detail, weight, size, className, labels, }: TypeSpecimenProps): import("react").JSX.Element;

package/dist/TypeSpecimen/index.d.ts

@@ -0,0 +1,3 @@
+import './TypeSpecimen.css';
+export { TypeSpecimen } from './TypeSpecimen.js';
+export type { TypeSpecimenLabels, TypeSpecimenProps, TypeSpecimenSize } from './TypeSpecimen.js';

package/dist/TypeSpecimen/index.js

@@ -0,0 +1,3 @@
+export { TypeSpecimen } from '../chunk-JKAFEFFC.js';
+import '../chunk-5SGHW42B.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TypeSpecimen-WK6YNHL7.css

@@ -0,0 +1,96 @@
+/*
+ * A face, shown: its role and name in the interface's own type, then "Aa" and
+ * a line set in the face itself (`--crewlet-type-specimen-family`, which
+ * always ends in the package's sans).
+ */
+.crewlet-type-specimen {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'glyphs caption'
+    'sample sample';
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-4);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-type-specimen__caption {
+  grid-area: caption;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-type-specimen__label {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-type-specimen__family {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-type-specimen__detail {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-type-specimen__glyphs {
+  grid-area: glyphs;
+  color: var(--color-text-primary);
+  font-family: var(--crewlet-type-specimen-family);
+  font-size: var(--font-size-4xl);
+  line-height: 1;
+}
+
+.crewlet-type-specimen__sample {
+  grid-area: sample;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-family: var(--crewlet-type-specimen-family);
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-type-specimen--regular :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-type-specimen--medium :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-type-specimen--semibold :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-type-specimen--bold :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-bold);
+}
+
+/* ---- sm: a select option's lead, the letters smaller and the line gone ---- */
+
+.crewlet-type-specimen--sm {
+  grid-template-areas: 'glyphs caption';
+  gap: var(--spacing-3);
+}
+
+.crewlet-type-specimen--sm .crewlet-type-specimen__glyphs {
+  font-size: var(--font-size-2xl);
+}
+
+.crewlet-type-specimen--sm .crewlet-type-specimen__sample {
+  display: none;
+}

package/dist/chunk-5SGHW42B.js

@@ -0,0 +1,23 @@
+// src/utils/fontFamily.ts
+var QUOTED = String.raw`"[^"\\\r\n]{1,80}"|'[^'\\\r\n]{1,80}'`;
+var IDENTIFIER = String.raw`-?[A-Za-z][A-Za-z0-9_-]*`;
+var WORDS = `${IDENTIFIER}(?: ${IDENTIFIER}){0,5}`;
+var TOKEN = String.raw`var\(--font-family-(?:sans|mono|display)\)`;
+var NAME = `(?:${QUOTED}|${TOKEN}|${WORDS})`;
+var MAX_NAMES = 11;
+var LIST = new RegExp(`^${NAME}(?:\\s*,\\s*${NAME}){0,${MAX_NAMES - 1}}$`);
+var KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer", "default"]);
+var MAX_LENGTH = 400;
+function safeFontFamily(value) {
+  if (typeof value !== "string") return null;
+  const list = value.trim();
+  if (list === "" || list.length > MAX_LENGTH || !LIST.test(list)) return null;
+  const keyword = list.split(",").some((name) => KEYWORDS.has(name.trim().toLowerCase()));
+  return keyword ? null : list;
+}
+function fontStack(value, fallback) {
+  const list = safeFontFamily(value);
+  return list ? `${list}, ${fallback}` : fallback;
+}
+
+export { fontStack, safeFontFamily };

package/dist/{chunk-ILDNJHRU.js → chunk-AVL52EME.js}

@@ -1,4 +1,4 @@
-import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { ShieldGlyph, ActivityGlyph, GaugeGlyph, PackageGlyph, FolderGlyph, ClockGlyph, DatabaseGlyph, Settings2Glyph, BookOpenGlyph, FlagGlyph, StarGlyph, WandSparklesGlyph, BugGlyph, TargetGlyph, ImageGlyph, CodeGlyph, CoinsGlyph, UserGlyph, UsersGlyph, ChartNoAxesGanttGlyph, SquareKanbanGlyph, ListChecksGlyph, ListGlyph, GlobeGlyph, CompassGlyph, FileTextGlyph, TableGlyph, CalendarGlyph, LayoutDashboardGlyph, ChartPieGlyph, ChartColumnGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-B235ANDO.js

@@ -0,0 +1,66 @@
+import { Tag } from './chunk-KYIAFNU7.js';
+import { normalizeHex } from './chunk-UZMNR366.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ContrastBadge-CBZPGG3G.css';
+import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph } from '@crewlethq/icons/glyphs';
+import { WCAG_CONTRAST, parseHex, contrast } from '@crewlethq/tokens';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function contrastLevel(ratio, scale = "body") {
+  if (scale === "large") {
+    if (ratio >= WCAG_CONTRAST.aaaLarge) return "aaa";
+    if (ratio >= WCAG_CONTRAST.aaLarge) return "aa";
+    return "fail";
+  }
+  if (ratio >= WCAG_CONTRAST.aaa) return "aaa";
+  if (ratio >= WCAG_CONTRAST.aa) return "aa";
+  if (ratio >= WCAG_CONTRAST.aaLarge) return "aa-large";
+  return "fail";
+}
+function contrastRatio(foreground, background) {
+  const a = parseHex(foreground);
+  const b = parseHex(background);
+  return a && b ? contrast(a, b) : null;
+}
+function formatContrastRatio(ratio) {
+  const cut = Math.floor(ratio * 100) / 100;
+  return String(Number(cut.toFixed(2)));
+}
+var LABELS = {
+  levels: { aaa: "AAA", aa: "AA", "aa-large": "AA large text", fail: "Fails" },
+  unmeasured: "Not measured",
+  ratio: (ratio) => `${ratio} to 1`,
+  sample: "Aa"
+};
+var TONE = { aaa: "success", aa: "success", "aa-large": "warning", fail: "danger" };
+function ContrastBadge({ foreground, background, label, scale = "body", className, labels }) {
+  const text = { ...LABELS, ...labels, levels: { ...LABELS.levels, ...labels?.levels } };
+  const ink = normalizeHex(foreground);
+  const ground = normalizeHex(background);
+  const ratio = ink && ground ? contrastRatio(ink, ground) : null;
+  const level = ratio === null ? null : contrastLevel(ratio, scale);
+  const printed = ratio === null ? null : formatContrastRatio(ratio);
+  const sample = ink && ground ? { "--crewlet-contrast-badge-ink": ink, "--crewlet-contrast-badge-ground": ground } : void 0;
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-contrast-badge", level && `crewlet-contrast-badge--${level}`, className), children: [
+    /* @__PURE__ */ jsx("span", { className: cx("crewlet-contrast-badge__sample", ratio === null && "is-empty"), style: sample, "aria-hidden": "true", children: text.sample }),
+    label ? /* @__PURE__ */ jsx("span", { className: "crewlet-contrast-badge__label", children: label }) : null,
+    printed !== null && level !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-contrast-badge__ratio", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${printed}:1` }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: text.ratio(printed) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Tag,
+        {
+          size: "xs",
+          variant: TONE[level],
+          leadingIcon: level === "fail" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) : level === "aa-large" ? /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "xs" }),
+          children: text.levels[level]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("span", { className: "crewlet-contrast-badge__unmeasured", children: text.unmeasured })
+  ] });
+}
+
+export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio };