@godxjp/ui 31.29.0 → 31.30.1

package/dist/components/data-display/range-timeline.js

@@ -4,8 +4,18 @@ import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
 import { Button } from "../general/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { CONTRAST_PIVOT, relativeLuminance } from "../../app/tenant-theme.js";
 import { Text } from "../general/typography.js";
 import { cn } from "../../lib/utils.js";
+function inkOn(color) {
+  if (!color) return void 0;
+  const luminance = relativeLuminance(color);
+  if (luminance == null) return void 0;
+  return luminance > CONTRAST_PIVOT ? "black" : "white";
+}
+const LABEL_WIDTH_STEP = 8;
+const LABEL_WIDTH_BIG_STEP = 32;
 const RangeTimeline = React.forwardRef(
   function RangeTimeline2({
     label,
@@ -20,10 +30,30 @@ const RangeTimeline = React.forwardRef(
     defaultExpandedValues,
     onExpandedValuesChange,
     sticky = false,
+    resizableLabel = false,
+    labelWidth,
+    defaultLabelWidth,
+    onLabelWidthChange,
+    busy = false,
     className,
     ...props
   }, ref) {
     const { t } = useTranslation();
+    const resize = resizableLabel ? {
+      min: typeof resizableLabel === "object" && resizableLabel.min || 160,
+      max: typeof resizableLabel === "object" && resizableLabel.max || 640
+    } : null;
+    const [ownLabelWidth, setOwnLabelWidth] = React.useState(defaultLabelWidth);
+    const currentLabelWidth = labelWidth ?? ownLabelWidth;
+    const labelCell = React.useRef(null);
+    const labelDrag = React.useRef(null);
+    const setLabelWidth = (next) => {
+      if (!resize) return;
+      const bounded = Math.round(Math.min(resize.max, Math.max(resize.min, next)));
+      if (labelWidth === void 0) setOwnLabelWidth(bounded);
+      onLabelWidthChange?.(bounded);
+    };
+    const measuredLabelWidth = () => currentLabelWidth ?? Math.round(labelCell.current?.getBoundingClientRect().width ?? 0);
     const reactId = React.useId();
     const depthOf = (row) => Math.max(0, Math.floor(row.depth ?? 0));
     const nested = rows.some((row) => depthOf(row) > 0);
@@ -85,7 +115,7 @@ const RangeTimeline = React.forwardRef(
       const row = rows.find((row2) => row2.id === current.id);
       const delta = deltaAt(event.clientX);
       cancel();
-      if (!row) return;
+      if (!row || row.start === null || row.end === null) return;
       const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
       if (bounded) onRangeChange?.(row.id, current.edge, bounded);
     };
@@ -107,7 +137,53 @@ const RangeTimeline = React.forwardRef(
         )) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-label", ref: labelCell, children: [
+          /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }),
+          resize && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              tabIndex: 0,
+              className: "ui-range-timeline-label-resizer",
+              "aria-orientation": "vertical",
+              "aria-label": t("rangeTimeline.resizeLabel"),
+              "aria-valuemin": resize.min,
+              "aria-valuemax": resize.max,
+              "aria-valuenow": currentLabelWidth ?? void 0,
+              onPointerDown: (event) => {
+                if (event.button !== 0) return;
+                event.preventDefault();
+                event.currentTarget.setPointerCapture(event.pointerId);
+                labelDrag.current = {
+                  x: event.clientX,
+                  width: measuredLabelWidth(),
+                  direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                };
+              },
+              onPointerMove: (event) => {
+                const current = labelDrag.current;
+                if (current)
+                  setLabelWidth(current.width + (event.clientX - current.x) * current.direction);
+              },
+              onPointerUp: () => labelDrag.current = null,
+              onPointerCancel: () => labelDrag.current = null,
+              onLostPointerCapture: () => labelDrag.current = null,
+              onKeyDown: (event) => {
+                const step = event.shiftKey ? LABEL_WIDTH_BIG_STEP : LABEL_WIDTH_STEP;
+                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                let next = null;
+                if (event.key === "ArrowRight") next = measuredLabelWidth() + step * direction;
+                else if (event.key === "ArrowLeft")
+                  next = measuredLabelWidth() - step * direction;
+                else if (event.key === "Home") next = resize.min;
+                else if (event.key === "End") next = resize.max;
+                if (next === null) return;
+                event.preventDefault();
+                setLabelWidth(next);
+              }
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
           "div",
           {
@@ -117,7 +193,8 @@ const RangeTimeline = React.forwardRef(
           },
           index
         )) })
-      ] })
+      ] }),
+      busy && /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-busy", "aria-hidden": "true" })
     ] });
     const body = /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
       (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
@@ -136,10 +213,17 @@ const RangeTimeline = React.forwardRef(
       ] }),
       visibleRows.map((row, index) => {
         const idBase = `${reactId}-row-${rows.indexOf(row)}`;
+        const dated = row.start !== null && row.end !== null;
+        const rowStart = row.start ?? 0, rowEnd = row.end ?? 0;
         const delta = preview?.id === row.id ? preview.delta : 0;
-        const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
-        const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+        const start = Math.min(rowEnd, rowStart + (preview?.edge === "start" ? delta : 0));
+        const end = Math.max(rowStart, rowEnd + (preview?.edge === "end" ? delta : 0));
         const left = Math.max(0, start), right = Math.min(units, end + 1);
+        const plan = dated && row.plan && row.plan.start !== null && row.plan.end !== null ? row.plan : null;
+        const planLeft = plan ? Math.max(0, plan.start) : 0, planRight = plan ? Math.min(units, plan.end + 1) : 0;
+        const overrun = plan !== null && end > plan.end;
+        const early = plan !== null && end < plan.end;
+        const overrunLeft = overrun ? Math.max(left, Math.min(units, plan.end + 1)) : 0;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -182,7 +266,14 @@ const RangeTimeline = React.forwardRef(
                     /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "ui-range-timeline-label",
+                  id: row.tooltip != null ? `${idBase}-label` : void 0,
+                  children: row.label
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
                 today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
                   "span",
@@ -192,71 +283,135 @@ const RangeTimeline = React.forwardRef(
                     style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
                   }
                 ),
-                right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                !dated && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-outside", "data-direction": "none", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.noDates") }) }),
+                dated && right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
                   /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" }),
                   /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
                 ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
                   /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
                   /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" })
                 ] })),
-                right > left && /* @__PURE__ */ jsx(
+                plan && planRight > planLeft && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-range-timeline-plan",
+                    style: {
+                      insetInlineStart: `${planLeft / units * 100}%`,
+                      inlineSize: `${(planRight - planLeft) / units * 100}%`
+                    }
+                  }
+                ),
+                overrun && right > overrunLeft && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "ui-range-timeline-overrun",
+                    style: {
+                      insetInlineStart: `${overrunLeft / units * 100}%`,
+                      inlineSize: `${(right - overrunLeft) / units * 100}%`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overrun") }),
+                      row.varianceLabel !== false && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-variance", children: row.varianceLabel ?? t("rangeTimeline.lateBy", { n: String(end - plan.end) }) })
+                    ]
+                  }
+                ),
+                dated && !plan && row.planNote != null && right > left && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-plan-note",
+                    style: { insetInlineStart: `${right / units * 100}%` },
+                    children: row.planNote
+                  }
+                ),
+                early && right > left && right <= units && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-early",
+                    style: { insetInlineStart: `${right / units * 100}%` },
+                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.early") })
+                  }
+                ),
+                dated && right > left && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "ui-range-timeline-bar",
+                    "data-muted": row.muted ? "true" : void 0,
+                    "data-overdue": row.overdue ? "true" : void 0,
                     style: {
                       insetInlineStart: `${left / units * 100}%`,
-                      inlineSize: `${(right - left) / units * 100}%`
+                      inlineSize: `${(right - left) / units * 100}%`,
+                      ...row.color && {
+                        "--range-timeline-bar-color": row.color,
+                        "--range-timeline-bar-ink": inkOn(row.color)
+                      }
                     },
-                    children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                      (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                    ).map((edge) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "icon-xs",
-                        className: "ui-range-timeline-handle",
-                        "data-edge": edge,
-                        "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                        onPointerDown: (event) => {
-                          const width = track.current?.getBoundingClientRect().width ?? 0;
-                          if (!width || event.button !== 0) return;
-                          event.currentTarget.setPointerCapture(event.pointerId);
-                          drag.current = {
-                            id: row.id,
-                            edge,
-                            x: event.clientX,
-                            width,
-                            direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                          };
-                        },
-                        onPointerMove: (event) => {
-                          if (drag.current)
-                            setPreview({
-                              id: drag.current.id,
-                              edge: drag.current.edge,
-                              delta: deltaAt(event.clientX)
-                            });
-                        },
-                        onPointerUp: complete,
-                        onPointerCancel: cancel,
-                        onLostPointerCapture: cancel,
-                        onKeyDown: (event) => {
-                          if (event.key === "Escape") {
-                            cancel();
-                            return;
+                    children: [
+                      row.tooltip != null && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "ui-range-timeline-bar-hit ui-focus-ring",
+                            tabIndex: 0,
+                            "aria-labelledby": `${idBase}-label`
                           }
-                          const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                          if (!step) return;
-                          event.preventDefault();
-                          const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                          const delta2 = step * direction;
-                          if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                            onRangeChange(row.id, edge, delta2);
+                        ) }),
+                        /* @__PURE__ */ jsx(TooltipContent, { children: row.tooltip })
+                      ] }),
+                      row.overdue && /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overdue") }),
+                      onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                        (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                      ).filter(
+                        (edge) => row.editable === void 0 || row.editable === true ? true : row.editable === false ? false : row.editable[edge] !== false
+                      ).map((edge) => /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon-xs",
+                          className: "ui-range-timeline-handle",
+                          "data-edge": edge,
+                          "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                          onPointerDown: (event) => {
+                            const width = track.current?.getBoundingClientRect().width ?? 0;
+                            if (!width || event.button !== 0) return;
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            drag.current = {
+                              id: row.id,
+                              edge,
+                              x: event.clientX,
+                              width,
+                              direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                            };
+                          },
+                          onPointerMove: (event) => {
+                            if (drag.current)
+                              setPreview({
+                                id: drag.current.id,
+                                edge: drag.current.edge,
+                                delta: deltaAt(event.clientX)
+                              });
+                          },
+                          onPointerUp: complete,
+                          onPointerCancel: cancel,
+                          onLostPointerCapture: cancel,
+                          onKeyDown: (event) => {
+                            if (event.key === "Escape") {
+                              cancel();
+                              return;
+                            }
+                            const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                            if (!step) return;
+                            event.preventDefault();
+                            const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                            const delta2 = step * direction;
+                            if (edge === "start" ? rowStart + delta2 <= rowEnd : rowEnd + delta2 >= rowStart)
+                              onRangeChange(row.id, edge, delta2);
+                          },
+                          children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
                         },
-                        children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                      },
-                      edge
-                    ))
+                        edge
+                      ))
+                    ]
                   }
                 )
               ] })
@@ -274,7 +429,14 @@ const RangeTimeline = React.forwardRef(
       // Only a NON-default step scopes the unit-width knob, so a theme that narrows
       // --range-timeline-unit-width globally still owns the default timeline (gh#730).
       "data-density": density === "default" ? void 0 : density,
-      "aria-label": label
+      "data-busy": busy ? "true" : void 0,
+      "aria-busy": busy || void 0,
+      "aria-label": label,
+      // Only once a width exists does it override the token, so a theme's width stays the default.
+      style: currentLabelWidth !== void 0 ? {
+        ...props.style,
+        "--range-timeline-label-width": `${currentLabelWidth}px`
+      } : props.style
     };
     if (!sticky) {
       return /* @__PURE__ */ jsx("section", { ...sectionProps, tabIndex: 0, children: /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-canvas", style: canvasStyle, children: [

package/dist/components/data-entry/password-strength.d.ts

@@ -1,12 +1,29 @@
 declare const DEFAULT_PASSWORD_RULES: readonly ["length", "upper", "lower", "number", "symbol"];
 export type PasswordRule = (typeof DEFAULT_PASSWORD_RULES)[number];
+/**
+ * Every visible and screen-reader string, each optional (gh#1191). Unset entries come from the
+ * kit's own ja / en / vi catalogue for the active locale, so most apps pass nothing.
+ */
 export type PasswordStrengthLabels = {
-    weak: string;
-    fair: string;
-    strong: string;
+    weak?: string;
+    fair?: string;
+    strong?: string;
+    /** Checklist line per rule. */
+    rules?: Partial<Record<PasswordRule, string>>;
+    /** Screen-reader prefix before a met rule (e.g. "Passed: "). */
+    passed?: string;
+    /** Screen-reader prefix before an unmet rule (e.g. "Not yet: "). */
+    failed?: string;
+    /** The polite live-region sentence, given the strength word. */
+    announcement?: (strength: string) => string;
 };
 export type PasswordStrengthProps = {
     value: string;
+    /**
+     * The length rule's threshold (gh#1193), so the checklist matches the server's policy, e.g. 12 for
+     * Laravel `Password::min(12)`. Default 8. It drives the check, the score and the rule text.
+     */
+    minLength?: number;
     rules?: PasswordRule[];
     showChecklist?: boolean;
     labels?: PasswordStrengthLabels;
@@ -15,6 +32,6 @@ export type PasswordStrengthReturn = {
     score: 0 | 1 | 2 | 3 | 4;
     checks: Record<PasswordRule, boolean>;
 };
-export declare function usePasswordStrength(value: string, rules?: PasswordRule[]): PasswordStrengthReturn;
-export declare function PasswordStrength({ value, rules, showChecklist, labels, }: PasswordStrengthProps): import("react").JSX.Element;
+export declare function usePasswordStrength(value: string, rules?: PasswordRule[], minLength?: number): PasswordStrengthReturn;
+export declare function PasswordStrength({ value, minLength, rules, showChecklist, labels, }: PasswordStrengthProps): import("react").JSX.Element;
 export {};

package/dist/components/data-entry/password-strength.js

@@ -1,16 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 const DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
-const DEFAULT_LABELS = {
-  weak: "Weak",
-  fair: "Fair",
-  strong: "Strong"
-};
-function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES]) {
+function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES], minLength = 8) {
   const uniqueRules = [...new Set(rules)];
   const checks = {
-    length: value.length >= 8,
+    length: value.length >= minLength,
     upper: /[A-Z]/.test(value),
     lower: /[a-z]/.test(value),
     number: /\d/.test(value),
@@ -25,28 +21,34 @@ function scoreTone(score) {
   if (score <= 3) return "warning";
   return "success";
 }
-function scoreLabel(score, labels) {
-  if (score <= 1) return labels.weak;
-  if (score <= 3) return labels.fair;
-  return labels.strong;
+function scoreKey(score) {
+  if (score <= 1) return "weak";
+  if (score <= 3) return "fair";
+  return "strong";
 }
 function PasswordStrength({
   value,
+  minLength = 8,
   rules = [...DEFAULT_PASSWORD_RULES],
   showChecklist = true,
-  labels = DEFAULT_LABELS
+  labels = {}
 }) {
+  const { t } = useTranslation();
   const normalizedRules = [...new Set(rules)];
-  const { score, checks } = usePasswordStrength(value, normalizedRules);
+  const { score, checks } = usePasswordStrength(value, normalizedRules, minLength);
   const tone = scoreTone(score);
   const segments = Array.from({ length: 5 });
+  const key = scoreKey(score);
+  const strength = labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
+  const ruleLabel = (rule) => labels.rules?.[rule] ?? t(`dataEntry.passwordStrength.rules.${rule}`, { n: String(minLength) });
+  const announcement = labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
   return /* @__PURE__ */ jsxs("div", { className: "ui-password-strength", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: "ui-password-strength-track",
         role: "img",
-        "aria-label": `Password strength ${score}/4`,
+        "aria-label": t("dataEntry.passwordStrength.meter", { score: String(score) }),
         children: segments.map((_, index) => {
           const filled = index < score + 1;
           return /* @__PURE__ */ jsx(
@@ -63,7 +65,7 @@ function PasswordStrength({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "ui-password-strength-meta", children: [
-      /* @__PURE__ */ jsx("span", { className: "ui-password-strength-label", children: scoreLabel(score, labels) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-password-strength-label", children: strength }),
       /* @__PURE__ */ jsxs("span", { className: "ui-password-strength-score", "aria-hidden": "true", children: [
         score,
         "/4"
@@ -76,34 +78,15 @@ function PasswordStrength({
         "data-state": checks[rule] ? "passed" : "failed",
         children: [
           checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? "Passed: " : "Failed: " }),
-          /* @__PURE__ */ jsx("span", { children: labelForRule(rule) })
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? labels.passed ?? t("dataEntry.passwordStrength.passed") : labels.failed ?? t("dataEntry.passwordStrength.failed") }),
+          /* @__PURE__ */ jsx("span", { children: ruleLabel(rule) })
         ]
       },
       rule
     )) }) : null,
-    /* @__PURE__ */ jsxs("span", { className: "sr-only", "aria-live": "polite", children: [
-      scoreLabel(score, labels),
-      " password strength"
-    ] })
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: announcement })
   ] });
 }
-function labelForRule(rule) {
-  switch (rule) {
-    case "length":
-      return "8+ characters";
-    case "upper":
-      return "Contains uppercase letter";
-    case "lower":
-      return "Contains lowercase letter";
-    case "number":
-      return "Contains number";
-    case "symbol":
-      return "Contains symbol";
-    default:
-      return rule;
-  }
-}
 export {
   PasswordStrength,
   usePasswordStrength

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.29.0",
+  "version": "31.30.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -240,6 +240,22 @@
       "moved": "{label}: position {position} of {count}.",
       "dropped": "Dropped {label} at position {position} of {count}.",
       "cancelled": "Move cancelled. {label} is back at position {position} of {count}."
+    },
+    "passwordStrength": {
+      "weak": "Weak",
+      "fair": "Fair",
+      "strong": "Strong",
+      "meter": "Password strength {score} of 4",
+      "passed": "Passed: ",
+      "failed": "Not yet: ",
+      "announcement": "Password strength: {strength}",
+      "rules": {
+        "length": "{n}+ characters",
+        "upper": "Contains uppercase letter",
+        "lower": "Contains lowercase letter",
+        "number": "Contains number",
+        "symbol": "Contains symbol"
+      }
     }
   },
   "feedback": {
@@ -749,7 +765,13 @@
     "childRows": "Child rows",
     "outsideAfter": "After the visible range",
     "outsideBefore": "Before the visible range",
-    "schedule": "Schedule"
+    "schedule": "Schedule",
+    "noDates": "No dates",
+    "resizeLabel": "Resize the label column",
+    "overdue": "Overdue",
+    "overrun": "Over the plan",
+    "early": "Ahead of the plan",
+    "lateBy": "+{n}d"
   },
   "chat": {
     "bubble": {

package/dist/i18n/messages/ja.json

@@ -236,6 +236,22 @@
       "moved": "{label}: {count} 件中 {position} 番目。",
       "dropped": "{label} を {count} 件中 {position} 番目に置きました。",
       "cancelled": "移動を取り消しました。{label} は {count} 件中 {position} 番目に戻りました。"
+    },
+    "passwordStrength": {
+      "weak": "弱い",
+      "fair": "普通",
+      "strong": "強い",
+      "meter": "パスワードの強度 4 段階中 {score}",
+      "passed": "達成: ",
+      "failed": "未達成: ",
+      "announcement": "パスワードの強度: {strength}",
+      "rules": {
+        "length": "{n} 文字以上",
+        "upper": "大文字を含む",
+        "lower": "小文字を含む",
+        "number": "数字を含む",
+        "symbol": "記号を含む"
+      }
     }
   },
   "feedback": {
@@ -724,7 +740,13 @@
     "childRows": "子の行",
     "outsideAfter": "表示範囲より後",
     "outsideBefore": "表示範囲より前",
-    "schedule": "スケジュール"
+    "schedule": "スケジュール",
+    "noDates": "日付なし",
+    "resizeLabel": "ラベル列の幅を変更",
+    "overdue": "期限超過",
+    "overrun": "予定超過",
+    "early": "予定より早く完了",
+    "lateBy": "+{n}日"
   },
   "chat": {
     "bubble": {

package/dist/i18n/messages/vi.json

@@ -237,6 +237,22 @@
       "moved": "{label}: vị trí {position}/{count}.",
       "dropped": "Đã thả {label} ở vị trí {position}/{count}.",
       "cancelled": "Đã huỷ di chuyển. {label} trở lại vị trí {position}/{count}."
+    },
+    "passwordStrength": {
+      "weak": "Yếu",
+      "fair": "Trung bình",
+      "strong": "Mạnh",
+      "meter": "Độ mạnh mật khẩu {score} trên 4",
+      "passed": "Đạt: ",
+      "failed": "Chưa đạt: ",
+      "announcement": "Độ mạnh mật khẩu: {strength}",
+      "rules": {
+        "length": "Tối thiểu {n} ký tự",
+        "upper": "Có chữ in hoa",
+        "lower": "Có chữ thường",
+        "number": "Có chữ số",
+        "symbol": "Có ký hiệu"
+      }
     }
   },
   "feedback": {
@@ -725,7 +741,13 @@
     "childRows": "Hàng con",
     "outsideAfter": "Sau khoảng đang xem",
     "outsideBefore": "Trước khoảng đang xem",
-    "schedule": "Lịch công việc"
+    "schedule": "Lịch công việc",
+    "noDates": "Chưa có ngày",
+    "resizeLabel": "Đổi độ rộng cột nhãn",
+    "overdue": "Quá hạn",
+    "overrun": "Vượt kế hoạch",
+    "early": "Sớm hơn kế hoạch",
+    "lateBy": "+{n} ngày"
   },
   "chat": {
     "bubble": {

package/dist/props/components/data-display.prop.d.ts

@@ -71,6 +71,15 @@ import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 export type LegendItemProp = {
     /** The tone this key explains — the SAME tone the marks it stands for are drawn in. */
     tone: ToneProp;
+    color?: never;
+    label: LabelProp;
+} | {
+    /**
+     * A hex colour from data (the same contract as `Badge color` / `RangeTimelineRow color`),
+     * for keys whose colours are user-chosen, e.g. a project's status colours (gh#1189).
+     */
+    color: string;
+    tone?: never;
     label: LabelProp;
 };
 /** @see Legend — the key for a colour-coded surface: a breakdown bar, a chart, a status column. */