@mlola-ui/registry 1.0.2 → 1.0.4

package/snapshot/items/components/color-picker.json

@@ -4,11 +4,11 @@
   "name": "color-picker",
   "type": "registry:ui",
   "title": "Color Picker",
-  "description": "A colour field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check",
+  "description": "A color field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check",
   "category": "forms",
   "tags": [
     "color",
-    "colour",
+    "color",
     "picker",
     "oklch",
     "hex",
@@ -24,7 +24,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -37,13 +37,13 @@
       "path": "packages/components/color-picker/color-picker.tsx",
       "target": "{{aliases.components}}/color-picker.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-UziuULSI7dIGLfu4jjWIz6Cbh2/HiaY2KYXlfQ+6iQg="
+      "integrity": "sha256-E+QB6MbSxg+3AZX3A7bOkst4arxgpmFL2ZmochoWCl8="
     },
     {
       "path": "packages/components/color-picker/color.ts",
       "target": "{{aliases.components}}/color-picker/color.ts",
       "type": "registry:ui",
-      "integrity": "sha256-3IO6DaelZ6TVn2aw+6o6pZCQGAQdeNRkN7sPypUzddE="
+      "integrity": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs="
     }
   ],
   "themeContract": {

package/snapshot/items/components/combobox.json

@@ -22,7 +22,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -47,7 +47,7 @@
       "path": "packages/components/combobox/combobox.tsx",
       "target": "{{aliases.components}}/combobox.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-CnuJP01m0ZPMB4MGjoKbJCBQ7inI6bPf5aMDrq4m1qI="
+      "integrity": "sha256-CvuYc/hJoS7yw6QM9vv1SIkwflx0Kwd95UjchtC+AOs="
     }
   ],
   "themeContract": {

package/snapshot/items/components/command-menu.json

@@ -22,7 +22,7 @@
     "modal"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/context-menu.json

@@ -19,7 +19,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/date-picker.json

@@ -23,7 +23,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -42,7 +42,7 @@
       "path": "packages/components/date-picker/date-picker.tsx",
       "target": "{{aliases.components}}/date-picker.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-pX7snZCO3SxVftkCvI/f5b82bNHPconUa50BJnjYNWc="
+      "integrity": "sha256-rsmDweD3RVfKTXR2i+/pnTb/MsrDAZXmHAYBvcUGxig="
     }
   ],
   "themeContract": {

package/snapshot/items/components/dropdown-menu.json

@@ -20,8 +20,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2",
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4",
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/dropzone.json

@@ -21,14 +21,14 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
       "path": "packages/components/dropzone/dropzone.tsx",
       "target": "{{aliases.components}}/dropzone.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-jMVEnTki4Suhx7pOWfLX9MO1Q3nLz0xqDJ/2EPHdpYg="
+      "integrity": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4="
     }
   ],
   "themeContract": {

package/snapshot/items/components/empty-state.json

@@ -28,7 +28,7 @@
       "path": "packages/components/empty-state/empty-state.tsx",
       "target": "{{aliases.components}}/empty-state.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-AWwOuZgm71hossjCGYygtvzGcDy6JOPryF+U1UrsLhM="
+      "integrity": "sha256-uCKqYpr9vkozXZHpdl4GFtdX9ijcGOriCHvgyarBqRw="
     }
   ],
   "themeContract": {

package/snapshot/items/components/hover-card.json

@@ -42,7 +42,7 @@
       "path": "packages/components/hover-card/hover-card.tsx",
       "target": "{{aliases.components}}/hover-card.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-HZyB9SUDcRPG8MvRX1sHqHA2rNcO63yVevH9hiGqVAA="
+      "integrity": "sha256-AyRbxfqDOYBgGlgjgrtQZm5DipArLEzQn6XnzjPd0ro="
     }
   ],
   "themeContract": {

package/snapshot/items/components/modal.json

@@ -26,8 +26,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2",
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4",
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/number-input.json

@@ -22,7 +22,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -35,7 +35,7 @@
       "path": "packages/components/number-input/number-input.tsx",
       "target": "{{aliases.components}}/number-input.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-D+8jH2YaW4lCv/F02qvkc9Huhxvz0y1idzgOBwsjiN8="
+      "integrity": "sha256-BDOyvCNtMULD/HK7uWHsYbGg79lrRDrVqtGQQrYHpmM="
     },
     {
       "path": "packages/components/number-input/number.ts",

package/snapshot/items/components/otp-input.json

@@ -32,7 +32,7 @@
       "path": "packages/components/otp-input/otp-input.tsx",
       "target": "{{aliases.components}}/otp-input.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-MWDyTP99wVAQSYJsF78ol1Kv9LKOj1lybmp2zOomVqo="
+      "integrity": "sha256-QURn8g5HqCQXBTdeENPbVxoPlqs3ZtoAPLRlFjQDxmI="
     }
   ],
   "themeContract": {

package/snapshot/items/components/pagination.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/progress.json

@@ -40,7 +40,7 @@
       "path": "packages/components/progress/progress.tsx",
       "target": "{{aliases.components}}/progress.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-3SOA1JX54msiq/pF2UolesQqQZm0zSVyZQi6W38lOOA="
+      "integrity": "sha256-9OjecRNPWn7Bfe+C5IyXaKsW1NJae6X5gco1o0X5XkE="
     }
   ],
   "themeContract": {

package/snapshot/items/components/segmented-control.json

@@ -21,7 +21,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4"
   },
   "files": [
     {
@@ -34,7 +34,7 @@
       "path": "packages/components/segmented-control/segmented-control.tsx",
       "target": "{{aliases.components}}/segmented-control.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-sExMN2WHtzxcaCu7xN/1jaP+sRVwJ2OAW1WkKGhNYnU="
+      "integrity": "sha256-MCBG5XHFWCwbACctsYKbqe8mvSSR6pf60tyRgdCDKDA="
     }
   ],
   "themeContract": {

package/snapshot/items/components/select.json

@@ -24,8 +24,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2",
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4",
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -50,7 +50,7 @@
       "path": "packages/components/select/select.tsx",
       "target": "{{aliases.components}}/select.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-MWHL/mlAO2ob4H3EmYSBZcC1qqy+M3cF1Z4s0R+frrc="
+      "integrity": "sha256-m8QmKUGC4386XcklosSntal0XwUAFjKosTBQSF0dduQ="
     }
   ],
   "themeContract": {

package/snapshot/items/components/sheet.json

@@ -29,8 +29,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2",
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4",
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/slider.json

@@ -23,7 +23,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/status-icon.json

@@ -4,7 +4,7 @@
   "name": "status-icon",
   "type": "registry:ui",
   "title": "Status Icon",
-  "description": "A work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without colour",
+  "description": "A work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without color",
   "category": "data",
   "tags": [
     "status",

package/snapshot/items/components/stepper.json

@@ -9,7 +9,7 @@
   "tags": [
     "stepper",
     "steps",
-    "wizard",
+    "multi-step",
     "progress",
     "checkout"
   ],
@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/tabs.json

@@ -24,7 +24,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.2"
+    "@mlola-ui/behavior": "^1.0.4"
   },
   "files": [
     {

package/snapshot/items/components/tag-input.json

@@ -23,7 +23,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -36,7 +36,7 @@
       "path": "packages/components/tag-input/tag-input.tsx",
       "target": "{{aliases.components}}/tag-input.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-+R1f2XljDYInsfuggKkpqz5m9TqEa0g3QYKMX2TE6h0="
+      "integrity": "sha256-EK7xJTe3Y/S5Kn3vS0zBQg9lC+RVoGvky6HOAt+DnAw="
     }
   ],
   "themeContract": {

package/snapshot/items/components/textarea.json

@@ -31,7 +31,7 @@
       "path": "packages/components/textarea/textarea.tsx",
       "target": "{{aliases.components}}/textarea.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-jeyvAlzFr25eWZ/Inkxo1UEOHXlCPB/QHeId124SfR8="
+      "integrity": "sha256-C9jMYZ63w+m6bgdLvHjvULRuoCe26q5zbgS4+ahWzr8="
     }
   ],
   "themeContract": {

package/snapshot/items/components/time-picker.json

@@ -22,7 +22,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -35,7 +35,7 @@
       "path": "packages/components/time-picker/time-picker.tsx",
       "target": "{{aliases.components}}/time-picker.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-OyIfJN6xVv6TwUYtRirkemJe5VMcu2HXxjaJj8fvu9I="
+      "integrity": "sha256-og8Cbf+e8oFYewfagUgjRzLHSIIlAZh+1OpAn9yNq70="
     },
     {
       "path": "packages/components/time-picker/times.ts",

package/snapshot/items/components/timeline.json

@@ -24,7 +24,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -37,7 +37,7 @@
       "path": "packages/components/timeline/timeline.tsx",
       "target": "{{aliases.components}}/timeline.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-FDZx+ihL5tbIY/sEl0444uj27JWHE5xl0vl8IqRUUPY="
+      "integrity": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU="
     }
   ],
   "themeContract": {

package/snapshot/items/components/toast.json

@@ -26,7 +26,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -39,7 +39,7 @@
       "path": "packages/components/toast/toast.tsx",
       "target": "{{aliases.components}}/toast.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-RrqUAAfKavEkZaLjywJHc0iTNHC1DHlIGVX97kftDkg="
+      "integrity": "sha256-FvZnwN6Lk/QEHmcNxo7sVlEvR3Lx54aT5cH9lwrthhE="
     }
   ],
   "themeContract": {

package/snapshot/items/components/toggle.json

@@ -35,7 +35,7 @@
       "path": "packages/components/toggle/toggle.tsx",
       "target": "{{aliases.components}}/toggle.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-zwTbHMSs3n0eg5XIpREDnySYLXHaLly1Ew4FWlzvgJY="
+      "integrity": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U="
     }
   ],
   "themeContract": {

package/snapshot/items/components/tour.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.2"
+    "@mlola-ui/icons": "^1.0.4"
   },
   "files": [
     {
@@ -45,7 +45,7 @@
       "path": "packages/components/tour/tour.tsx",
       "target": "{{aliases.components}}/tour.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-1aSh7hMVt/DM/kH3WGJzJMGNsNqYEOmnwAZwc8dwRv8="
+      "integrity": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU="
     }
   ],
   "themeContract": {

package/snapshot/source/packages/components/alert/alert.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cx } from "../_internal/react";
 import { IconCircleCheck, IconCircleX, IconInfo, IconTriangleAlert, IconX } from "@mlola-ui/icons";
 
-/** The meaning of the message, from the theme's colour roles. */
+/** The meaning of the message, from the theme's color roles. */
 export type AlertTone = "neutral" | "info" | "success" | "warning" | "danger";
 /** "card" is a neutral card with a solid icon mark; "soft" tints the whole alert, for banners across a page. */
 export type AlertVariant = "card" | "soft";

package/snapshot/source/packages/components/badge/badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cx } from "../_internal/react";
 import { IconX } from "@mlola-ui/icons";
 
-/** The meaning of the colour, from the theme's roles. */
+/** The meaning of the color, from the theme's roles. */
 export type BadgeTone = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
 /** The form: a tint, a solid fill, or an outline. */
 export type BadgeVariant = "soft" | "solid" | "outline";
@@ -26,7 +26,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
           type="button"
           onClick={onRemove}
           aria-label={`Remove${typeof children === "string" ? ` ${children}` : " badge"}`}
-          className="ml-badge-remove"
+          className="ml-badge-remove" data-hit="expand"
         >
           <IconX aria-hidden="true" size="0.75em" />
         </button>

package/snapshot/source/packages/components/breadcrumb/breadcrumb.tsx

@@ -16,7 +16,7 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HT
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
 const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
-  ({ className, ...props }, ref) => <a ref={ref} className={cx("ml-breadcrumb-link", className)} {...props} />
+  ({ className, ...props }, ref) => <a ref={ref} className={cx("ml-breadcrumb-link", className)} data-hit="expand" {...props} />
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
 function BreadcrumbPage({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {

package/snapshot/source/packages/components/carousel/carousel.tsx

@@ -227,6 +227,7 @@ export function Carousel({
                 }}
                 type="button"
                 className="ml-carousel-dot"
+                data-hit="expand"
                 aria-current={active ? "true" : undefined}
                 aria-label={labelFor(position)}
                 tabIndex={active ? 0 : -1}

package/snapshot/source/packages/components/checkbox/checkbox.tsx

@@ -28,7 +28,8 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const state = indeterminate ? "indeterminate" : current ? "checked" : "unchecked";
     return (
       <div className={cx("ml-checkbox-field", className)} data-state={state} data-disabled={disabled ? "" : undefined} data-invalid={error ? "" : undefined}>
-        <span className="ml-checkbox-control">
+        {/* The box is a label around its input, so a touch near the box (data-hit widens it) still toggles it. */}
+        <label className="ml-checkbox-control" data-hit="expand">
           <input
             ref={composeRefs(inputRef, ref)}
             id={inputId}
@@ -46,7 +47,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <span aria-hidden="true" className="ml-checkbox-indicator">
             {indeterminate ? <IconMinus aria-hidden="true" size="0.75em" /> : current ? <IconCheck aria-hidden="true" size="0.75em" /> : null}
           </span>
-        </span>
+        </label>
         {label || description || error ? (
           <span className="ml-checkbox-copy">
             {label ? (

package/snapshot/source/packages/components/color-picker/color-picker.tsx

@@ -11,16 +11,16 @@ export type { ColorFormat, RGBA };
 export { contrastRatio, formatColor, parseColor } from "./color";
 
 export interface ColorPickerProps {
-  /** Any colour the picker reads: hex, rgb() or oklch(). */
+  /** Any color the picker reads: hex, rgb() or oklch(). */
   value?: string;
   defaultValue?: string;
-  /** Called with the colour in `format`. */
+  /** Called with the color in `format`. */
   onValueChange?: (value: string) => void;
   /** The format the value comes back in. */
   format?: ColorFormat;
   /** Offer an opacity slider. */
   alpha?: boolean;
-  /** Colours one click away, such as the brand palette. */
+  /** Colors one click away, such as the brand palette. */
   swatches?: string[];
   label?: React.ReactNode;
   hint?: React.ReactNode;
@@ -83,25 +83,25 @@ function Track({ label, value, max, onChange, background, valueText, className }
 }
 
 /**
- * A colour field: a swatch and its value that open a picker with a
+ * A color field: a swatch and its value that open a picker with a
  * saturation and brightness area, hue and opacity sliders, a typed value in
  * hex, rgb or oklch, the system eyedropper where the browser has one, preset
- * swatches, and the colour's contrast against white and black.
+ * swatches, and the color's contrast against white and black.
  */
-export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, format = "hex", alpha = false, swatches, label, hint, error, disabled, id, className }: ColorPickerProps) {
+export const ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>(function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, format = "hex", alpha = false, swatches, label, hint, error, disabled, id, className }: ColorPickerProps, ref) {
   const autoId = React.useId();
   const fieldId = id ?? autoId;
   const [inner, setInner] = React.useState(defaultValue);
   const current = value ?? inner;
   const rgba = parseColor(current) ?? parseColor(defaultValue) ?? BLACK;
-  // HSV is kept locally so hue survives greys and black, where RGB forgets it.
+  // HSV is kept locally so hue survives grays and black, where RGB forgets it.
   const [hsv, setHsv] = React.useState<HSVA>(() => rgbToHsv(rgba));
   const [view, setView] = React.useState<ColorFormat>(format);
   const [draft, setDraft] = React.useState<string | null>(null);
   const [open, setOpen] = React.useState(false);
   const shownHex = formatColor(rgba, "hex");
 
-  // Follow a value set from outside, unless it is the colour already shown.
+  // Follow a value set from outside, unless it is the color already shown.
   React.useEffect(() => {
     if (formatColor(hsvToRgb(hsv), "hex") !== shownHex) setHsv(rgbToHsv(rgba));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -127,13 +127,14 @@ export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, fo
 
   const trigger = (
     <button
+      ref={ref}
       id={fieldId}
       type="button"
       className="ml-input ml-color-picker-trigger"
       disabled={disabled}
       aria-invalid={error ? true : undefined}
       aria-describedby={fieldDescription(fieldId, { hint, error })}
-      aria-label={`${typeof label === "string" ? label : "Colour"}: ${formatColor(rgba, format)}`}
+      aria-label={`${typeof label === "string" ? label : "Color"}: ${formatColor(rgba, format)}`}
     >
       <span className="ml-color-picker-swatch" style={{ "--ml-color": formatColor(rgba, "rgb") } as React.CSSProperties} aria-hidden="true" />
       <span className="ml-color-picker-value">{formatColor(rgba, format)}</span>
@@ -142,7 +143,7 @@ export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, fo
 
   return (
     <Field id={fieldId} label={label} hint={hint} error={error} disabled={disabled} className={cx("ml-color-picker", className)}>
-      <Popover trigger={trigger} label={typeof label === "string" ? `Choose ${label.toLowerCase()}` : "Choose a colour"} open={open} onOpenChange={setOpen} className="ml-color-picker-popover">
+      <Popover trigger={trigger} label={typeof label === "string" ? `Choose ${label.toLowerCase()}` : "Choose a color"} open={open} onOpenChange={setOpen} className="ml-color-picker-popover">
         <div className="ml-color-picker-panel">
           <div
             className="ml-color-picker-area"
@@ -191,7 +192,7 @@ export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, fo
             </button>
             <input
               className="ml-color-picker-text"
-              aria-label={`Colour as ${view}`}
+              aria-label={`Color as ${view}`}
               value={draft ?? formatColor(rgba, view)}
               spellCheck={false}
               onChange={(event) => {
@@ -208,7 +209,7 @@ export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, fo
               <button
                 type="button"
                 className="ml-color-picker-eyedropper"
-                aria-label="Pick a colour from the screen"
+                aria-label="Pick a color from the screen"
                 onClick={async () => {
                   try {
                     const result = await new EyeDropper().open();
@@ -258,4 +259,5 @@ export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, fo
       </Popover>
     </Field>
   );
-}
+});
+ColorPicker.displayName = "ColorPicker";

package/snapshot/source/packages/components/color-picker/color.ts

@@ -1,5 +1,5 @@
 /**
- * Colour conversions for the picker: hex, rgb() and oklch() in and out, HSV
+ * Color conversions for the picker: hex, rgb() and oklch() in and out, HSV
  * for the picking surface, and WCAG contrast. sRGB throughout; OKLCH through
  * OKLab, the space the Mlola engine derives its palettes in.
  */