@crewlethq/ui 0.50.0 → 0.51.0

package/dist/SandboxedFrame/index.js

@@ -1,7 +1,7 @@
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-356JNSER.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-WQQ5T5SA.js';
 import '../chunk-F6V2PTN6.js';
 import '../chunk-ZXXDZJQN.js';
-import '../chunk-SZZRIHGT.js';
+import '../chunk-BPCY7ZID.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SetupWizard/SetupWizard.d.ts

@@ -42,8 +42,16 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     aside?: ReactNode;
     /** What the aside is, for its complementary landmark: "Preview of your draft". Required with `aside`. */
     asideLabel?: string | undefined;
-    /** The step's actions, held at the bottom of the view: Back, Skip for now, Continue. */
+    /** The step's actions, at the end of the footer row and held at the bottom of the view: Back, Skip for now, Continue. */
     footer: ReactNode;
+    /** What stands at the start of the footer row, apart from the step's actions: Exit. */
+    footerStart?: ReactNode;
+    /**
+     * The content takes the whole width beside the rail rather than one 640px
+     * column, for a step that lays out columns of its own (a review of every
+     * step beside a preview). Meant for a step with no `aside`.
+     */
+    wide?: boolean | undefined;
     labels?: Partial<SetupWizardLabels> | undefined;
 }
 /**
@@ -57,7 +65,9 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * heading, with a lead sentence and the step's fields in one column of at
  * most 640px. The aside is a complementary landmark named by `asideLabel`,
  * held in view beside the content. The footer holds the step's actions at the
- * bottom of the view, above the device's safe area.
+ * end of its row (and `footerStart`, the way out, at its start) at the bottom
+ * of the view, above the device's safe area. A step that lays out columns of
+ * its own takes the whole width beside the rail with `wide`.
  *
  * THREE SHAPES. On a wide page the rail, the content and the aside stand side
  * by side (240px, the content, 320px). Where the wizard has under 70rem of its
@@ -74,4 +84,4 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * so a keyboard or screen reader user starts on the new step rather than on a
  * Continue button that now belongs to it; the first render takes no focus.
  */
-export declare function SetupWizard({ title, headingLevel, trail, status, actions, steps, current, reached, onSelect, stepsLabel, heading, lead, children, aside, asideLabel, footer, labels, className, ...rest }: SetupWizardProps): import("react").JSX.Element;
+export declare function SetupWizard({ title, headingLevel, trail, status, actions, steps, current, reached, onSelect, stepsLabel, heading, lead, children, aside, asideLabel, footer, footerStart, wide, labels, className, ...rest }: SetupWizardProps): import("react").JSX.Element;

package/dist/SetupWizard/index.js

@@ -1,4 +1,4 @@
-export { SetupWizard } from '../chunk-KKHCUHWS.js';
+export { SetupWizard } from '../chunk-DTSZUH6H.js';
 import '../chunk-LDGQIDIZ.js';
 import '../chunk-DKB73KZI.js';
 import '../chunk-WIATRXEJ.js';

package/dist/{SetupWizard-Y5BTXZX5.css → SetupWizard-GZK5UDKC.css}

@@ -120,7 +120,6 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-end;
   gap: var(--spacing-2);
   grid-area: foot;
   padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
@@ -128,6 +127,24 @@
   background: var(--color-surface-background);
 }
 
+/* The way out at the start of the row, the step's actions at its end. */
+.crewlet-setup-wizard__footer-start,
+.crewlet-setup-wizard__footer-end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-setup-wizard__footer-end {
+  margin-inline-start: auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the whole width beside the rail. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__content {
+  max-width: none;
+}
+
 /* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
 @container (min-width: 70rem) {
   .crewlet-setup-wizard__frame {
@@ -139,6 +156,15 @@
     grid-template-rows: auto 1fr auto;
   }
 
+  /* With no aside, nothing is held for one: the content takes its column too. */
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-areas:
+      'head head'
+      'rail content'
+      'foot foot';
+  }
+
   .crewlet-setup-wizard__aside {
     position: sticky;
     top: var(--spacing-5);

package/dist/ShareDialog/index.js

@@ -1,11 +1,11 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JFDIMO3A.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-PGYIDNGG.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-SZZRIHGT.js';
+import '../chunk-BPCY7ZID.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/{chunk-BEAXJARF.js → chunk-2UFUP2ZH.js}

@@ -1,6 +1,6 @@
 import { FileDrop, FilePickButton } from './chunk-THDGBD6Y.js';
-import { contrastRatio } from './chunk-NSSOWQCJ.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { contrastRatio } from './chunk-WW7TU6HE.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-4A4QG6UC.js → chunk-34C7NYIQ.js}

@@ -1,4 +1,4 @@
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-6GTTRJWJ.js

@@ -0,0 +1,24 @@
+import { normalizeHex } from './chunk-7W3LYIOC.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ColorChip-A5XHTH3J.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ColorChip({ value, size = "xs", shape = "round", className }) {
+  const hex = normalizeHex(value);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        "crewlet-color-chip",
+        `crewlet-color-chip--${size}`,
+        `crewlet-color-chip--${shape}`,
+        !hex && "is-empty",
+        className
+      ),
+      style: hex ? { "--crewlet-color-chip-value": hex } : void 0,
+      "aria-hidden": "true"
+    }
+  );
+}
+
+export { ColorChip };

package/dist/{chunk-QGRA2RHC.js → chunk-6RMZH7P7.js}

@@ -1,4 +1,4 @@
-import { EditingStatus } from './chunk-MMOXWAUG.js';
+import { EditingStatus } from './chunk-EJWPYEG4.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-W6FOEBIL.js → chunk-73WHPLWQ.js}

@@ -1,16 +1,20 @@
-import { normalizeHex } from './chunk-UZMNR366.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { normalizeHex, parseColourInput } from './chunk-7W3LYIOC.js';
+import { FormField, Input, InputAffix } from './chunk-EXRRTKWT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorField-2OIOWT3Z.css';
 import { useId, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var LABELS = {
-  invalid: "Enter the colour as # and six hex digits, such as #5b3df5.",
+  invalid: "Enter six hex digits, such as 5b3df5, or rgb(91, 61, 245).",
   missing: "Choose a colour.",
   picker: (label) => `Pick the ${label} colour`,
-  placeholder: "#rrggbb"
+  placeholder: "rrggbb",
+  prefix: "Hex colour, after #"
 };
+var digits = (colour) => colour.replace(/^#/, "");
+var typedText = (value) => value.replace(/^\s*#/, "");
+var SIX_DIGITS = /^[0-9a-f]{6}$/i;
 var PICKER_START = "#000000";
 function ColorField({
   label,
@@ -30,30 +34,34 @@ function ColorField({
   const autoId = useId();
   const fieldId = id ?? autoId;
   const committed = normalizeHex(value) ?? "";
-  const [draft, setDraft] = useState(committed);
+  const [draft, setDraft] = useState(digits(committed));
   const [seen, setSeen] = useState(committed);
   const [left, setLeft] = useState(false);
   if (committed !== seen) {
     setSeen(committed);
-    if ((normalizeHex(draft) ?? "") !== committed) {
-      setDraft(committed);
+    if ((parseColourInput(draft) ?? "") !== committed) {
+      setDraft(digits(committed));
       setLeft(false);
     }
   }
   const typed = draft.trim();
-  const reads = normalizeHex(typed);
+  const reads = parseColourInput(typed);
   const refusal = typed === "" ? required ? text.missing : null : reads === null ? text.invalid : null;
   const shown = error ?? (left ? refusal : null);
   const swatch = reads ?? (typed === "" ? null : committed || null);
+  const functional = /^rgb/i.test(typed);
+  const prefixId = `${fieldId}-prefix`;
   const take = (next) => {
-    setDraft(next);
-    const colour = normalizeHex(next);
-    if (colour !== null) onChange(colour);
-    else if (next.trim() === "" && !required) onChange("");
+    const held = typedText(next);
+    setDraft(held);
+    if (SIX_DIGITS.test(held.trim())) onChange(normalizeHex(`#${held.trim()}`));
+    else if (held.trim() === "" && !required) onChange("");
   };
   const settle = () => {
     setLeft(true);
-    if (reads !== null && reads !== draft) setDraft(reads);
+    if (reads === null) return;
+    if (reads !== committed) onChange(reads);
+    if (digits(reads) !== draft) setDraft(digits(reads));
   };
   return /* @__PURE__ */ jsx(
     FormField,
@@ -96,13 +104,14 @@ function ColorField({
             width: "sm",
             value: draft,
             placeholder: text.placeholder,
-            maxLength: 9,
+            leading: functional ? void 0 : /* @__PURE__ */ jsx(InputAffix, { text: "#", id: prefixId, sentence: text.prefix }),
+            maxLength: 24,
             spellCheck: false,
             autoComplete: "off",
             autoCapitalize: "off",
             disabled,
             error: Boolean(shown),
-            "aria-describedby": field.describedBy,
+            "aria-describedby": [functional ? null : prefixId, field.describedBy].filter(Boolean).join(" ") || void 0,
             "aria-required": required || void 0,
             onChange: (event) => take(event.target.value),
             onBlur: settle,

package/dist/chunk-7W3LYIOC.js

@@ -0,0 +1,27 @@
+import { parseHex } from '@crewlethq/tokens';
+
+// src/utils/hexColour.ts
+function normalizeHex(value) {
+  if (typeof value !== "string") return null;
+  return parseHex(value) === null ? null : value.trim().toLowerCase();
+}
+var SIX = /^#?([0-9a-f]{6})$/i;
+var THREE = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+var RGB = /^rgb\(\s*(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})\s*\)$/i;
+function parseColourInput(value) {
+  if (typeof value !== "string") return null;
+  const text = value.trim();
+  const six = SIX.exec(text);
+  if (six) return normalizeHex(`#${six[1]}`);
+  const three = THREE.exec(text);
+  if (three) return normalizeHex(`#${three[1]}${three[1]}${three[2]}${three[2]}${three[3]}${three[3]}`);
+  const rgb = RGB.exec(text);
+  if (rgb) {
+    const channels = [rgb[1], rgb[2], rgb[3]].map(Number);
+    if (channels.some((channel) => channel > 255)) return null;
+    return normalizeHex(`#${channels.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`);
+  }
+  return null;
+}
+
+export { normalizeHex, parseColourInput };

package/dist/{chunk-OEEYL2CM.js → chunk-AVMQMY66.js}

@@ -1,5 +1,5 @@
-import { BrandScope } from './chunk-P3OIM6OC.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { BrandScope } from './chunk-X7WEE3EK.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './BrandSample-G5V7GKR2.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-SZZRIHGT.js → chunk-BPCY7ZID.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Callout-ZAVG3P66.css';
+import './Callout-G3N3IE6M.css';
 import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-DTSZUH6H.js

@@ -0,0 +1,124 @@
+import { Stepper } from './chunk-LDGQIDIZ.js';
+import { PageHeader } from './chunk-DKB73KZI.js';
+import { Disclosure } from './chunk-OGXHZHRX.js';
+import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SetupWizard-GZK5UDKC.css';
+import { useId, useRef, useEffect, createElement } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  progress: (position, total) => `Step ${position} of ${total}`,
+  asideToggle: "Preview"
+};
+var PHONE = `(width < ${breakpoint.phone})`;
+function SetupWizard({
+  title,
+  headingLevel,
+  trail,
+  status,
+  actions,
+  steps,
+  current,
+  reached,
+  onSelect,
+  stepsLabel,
+  heading,
+  lead,
+  children,
+  aside,
+  asideLabel,
+  footer,
+  footerStart,
+  wide = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const phone = useMediaMatch(PHONE);
+  const context = useHeadingLevel();
+  const titleLevel = headingLevel ?? context;
+  const stepLevel = nextHeadingLevel(titleLevel);
+  const contentLevel = nextHeadingLevel(stepLevel);
+  const headingId = useId();
+  const headingRef = useRef(null);
+  const shown = useRef(current);
+  useEffect(() => {
+    if (shown.current === current) return;
+    shown.current = current;
+    headingRef.current?.focus();
+  }, [current]);
+  if (aside !== void 0 && aside !== null && !asideLabel) {
+    throw new TypeError("SetupWizard needs an asideLabel with an aside: it names the aside\u2019s landmark");
+  }
+  const position = steps.findIndex((step2) => step2.id === current);
+  const step = steps[position];
+  const stepper = /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      label: stepsLabel,
+      steps,
+      current,
+      reached,
+      onSelect,
+      tone: "brand",
+      orientation: phone ? "horizontal" : "vertical"
+    }
+  );
+  const asideBlock = aside === void 0 || aside === null ? null : /* @__PURE__ */ jsx("aside", { className: "crewlet-setup-wizard__aside", "aria-label": asideLabel, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children: aside }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-setup-wizard",
+        asideBlock === null && "crewlet-setup-wizard--no-aside",
+        wide && "crewlet-setup-wizard--wide",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__frame", children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__head", children: [
+          trail ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__trail", children: trail }) : null,
+          /* @__PURE__ */ jsx(
+            PageHeader,
+            {
+              title,
+              headingLevel: titleLevel,
+              actions: status || actions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                status ? /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__status", children: status }) : null,
+                actions
+              ] }) : void 0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("nav", { className: "crewlet-setup-wizard__rail", "aria-label": stepsLabel, children: [
+          phone && step ? /* @__PURE__ */ jsxs("p", { className: "crewlet-setup-wizard__position", children: [
+            text.progress(position + 1, steps.length),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__position-step", children: step.label })
+          ] }) : null,
+          stepper
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [
+          createElement(
+            headingTag(stepLevel),
+            { id: headingId, ref: headingRef, tabIndex: -1, className: "crewlet-setup-wizard__heading" },
+            heading
+          ),
+          lead ? /* @__PURE__ */ jsx("p", { className: "crewlet-setup-wizard__lead", children: lead }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children }) })
+        ] }),
+        asideBlock === null ? null : phone ? /* @__PURE__ */ jsx(Disclosure, { className: "crewlet-setup-wizard__preview", title: text.asideToggle, headingLevel: stepLevel, children: asideBlock }) : asideBlock,
+        /* @__PURE__ */ jsxs("footer", { className: "crewlet-setup-wizard__footer", children: [
+          footerStart ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-start", children: footerStart }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-end", children: footer })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { SetupWizard };

package/dist/chunk-EJWPYEG4.js

@@ -0,0 +1,38 @@
+import { toISO, useNow, formatRelative } from './chunk-3CZ7XAVY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EditingStatus-YU7EGM6Y.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  editing: "Editing",
+  unsaved: "Unsaved changes",
+  saving: "Saving",
+  saved: "Saved"
+};
+function EditingStatus({ dirty, saving = false, savedAt, labels, className }) {
+  const text = { ...LABELS, ...labels };
+  const showSaved = !saving && !dirty && savedAt !== void 0 && savedAt !== null && toISO(savedAt) !== null;
+  const state = saving ? text.saving : dirty ? text.unsaved : showSaved ? text.saved : null;
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-editing-status", dirty && "crewlet-editing-status--dirty", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-editing-status__text", children: [
+      /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "crewlet-editing-status__live", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),
+        state ? " " : null,
+        state ? /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__state", children: state }) : null
+      ] }),
+      showSaved ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(SavedAgo, { at: savedAt })
+      ] }) : null
+    ] })
+  ] });
+}
+function SavedAgo({ at }) {
+  const now = useNow();
+  const ago = formatRelative(at, now);
+  if (ago === null) return null;
+  return /* @__PURE__ */ jsx("time", { className: "crewlet-editing-status__ago", dateTime: toISO(at) ?? void 0, children: ago });
+}
+
+export { EditingStatus };

package/dist/{chunk-M4QM477B.js → chunk-FXHWOXGD.js}

@@ -1,7 +1,7 @@
 import { Card } from './chunk-INHXF2CL.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './FolderTile-FDT5Y63Z.css';
+import './FolderTile-MIUEB7SO.css';
 import { useId } from 'react';
 import { FolderGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-JWNYI7UD.js → chunk-KHP7TJF7.js}

@@ -1,5 +1,5 @@
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import './RichEditor-NPD2KAPS.css';

package/dist/chunk-KIRQZG3G.js

@@ -0,0 +1,53 @@
+import { ContrastLevelTag } from './chunk-WW7TU6HE.js';
+import { Popover } from './chunk-KHJIEPZV.js';
+import { IconButton } from './chunk-LACA4JGC.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ContrastHelp-MZCAW5WQ.css';
+import { InfoGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  trigger: "About contrast levels",
+  title: "Contrast levels",
+  intro: "Contrast compares two colours, from 1:1 to 21:1.",
+  aa: { term: "AA", meaning: "At least 4.5:1 for text, 3:1 for large text, icons and buttons." },
+  aaa: { term: "AAA", meaning: "At least 7:1 for text, 4.5:1 for large text." },
+  low: { term: "Low or Fails", meaning: "Below AA." }
+};
+function ContrastHelp({ align = "start", className, labels }) {
+  const text = { ...LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      role: "dialog",
+      label: text.title,
+      align,
+      className: cx("crewlet-contrast-help__panel", className),
+      trigger: (_, toggle) => /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          label: text.trigger,
+          icon: /* @__PURE__ */ jsx(InfoGlyph, { size: "sm" }),
+          className: "crewlet-contrast-help__trigger",
+          onClick: toggle
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-contrast-help", children: [
+        /* @__PURE__ */ jsx("p", { className: "crewlet-contrast-help__title", children: text.title }),
+        /* @__PURE__ */ jsx("p", { className: "crewlet-contrast-help__intro", children: text.intro }),
+        /* @__PURE__ */ jsxs("dl", { className: "crewlet-contrast-help__levels", children: [
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "aa", children: text.aa.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.aa.meaning }),
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "aaa", children: text.aaa.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.aaa.meaning }),
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "low", children: text.low.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.low.meaning })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { ContrastHelp };

package/dist/{chunk-JFDIMO3A.js → chunk-PGYIDNGG.js}

@@ -1,7 +1,7 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { Modal } from './chunk-YCC2S7DF.js';
 import { CopyButton } from './chunk-7SHAFLEX.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/{chunk-WLSEAIVC.js → chunk-RHPBTE3F.js}

@@ -1,5 +1,5 @@
 import { Copyable } from './chunk-7SHAFLEX.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorSwatch-DNMUFHNS.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-Q44X36QC.js → chunk-S63QOMXC.js}

@@ -10,7 +10,7 @@ import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactKinds-O3CALPVX.css';
-import './ArtifactCard-SOB63NV5.css';
+import './ArtifactCard-F7IVRL3A.css';
 import { useId } from 'react';
 import { PinGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-GP4YWZFO.js → chunk-U3LNU4B2.js}

@@ -1,6 +1,6 @@
 import { ConfirmModal } from './chunk-YCC2S7DF.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-PGR2PKH6.js → chunk-UUTEWGO6.js}

@@ -7,9 +7,9 @@ import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ListInput-WUP2YITQ.css';
+import './ListInput-P2ECUQJ2.css';
 import { forwardRef, useState, useRef, useImperativeHandle, useLayoutEffect, useId } from 'react';
-import { PlusGlyph, GripVerticalGlyph, ArrowUpGlyph, ArrowDownGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { GripVerticalGlyph, ArrowUpGlyph, ArrowDownGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function withDraft(value, draft) {
@@ -43,6 +43,7 @@ var ListInput = forwardRef(function ListInput2({
   itemError,
   fullMessage = (max) => `The list is full at ${max}. Remove one to add another.`,
   addLabel = (name) => `Add ${name}`,
+  addText = "Add",
   itemLabel = (name, position) => `${name} ${position}`,
   newItemLabel = (name) => `New ${name}`,
   moveUpLabel = (name, position) => `Move ${name} ${position} up`,
@@ -237,14 +238,14 @@ var ListInput = forwardRef(function ListInput2({
     )
   );
   const addControl = /* @__PURE__ */ jsx(
-    IconButton,
+    Button,
     {
-      size: "sm",
-      variant: "soft-brand",
-      label: addLabel(itemName),
-      icon: /* @__PURE__ */ jsx(PlusGlyph, {}),
+      size: "small",
+      variant: "secondary",
+      "aria-label": addLabel(itemName),
       disabled: disabled || full || draftRefused,
-      onClick: add
+      onClick: add,
+      children: addText
     }
   );
   return /* @__PURE__ */ jsxs(
@@ -258,7 +259,6 @@ var ListInput = forwardRef(function ListInput2({
       helperOnFocus,
       error,
       className: "crewlet-list-input",
-      labelAction: hideLabel ? void 0 : addControl,
       children: [
         full ? (
           /*
@@ -291,7 +291,7 @@ var ListInput = forwardRef(function ListInput2({
               addBox.current = el;
             }
           }),
-          hideLabel ? /* @__PURE__ */ jsx("span", { className: "crewlet-list-input__add-control", children: addControl }) : null
+          /* @__PURE__ */ jsx("span", { className: "crewlet-list-input__add-control", children: addControl })
         ] }),
         count > 0 || removed !== null ? /* @__PURE__ */ jsx("ol", { className: "crewlet-list-input__items", ...drags ? reorder.containerProps : {}, children: withRemoved(
           order.map((key) => {

package/dist/{chunk-356JNSER.js → chunk-WQQ5T5SA.js}

@@ -1,5 +1,5 @@
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';