@flytedan/flytebot-design-system 0.11.2 → 0.11.4

package/dist/index.d.cts

@@ -1353,7 +1353,9 @@ interface EntityRowMetric {
     /** Phosphor icon name shown before the value, e.g. "student". */
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
-     *  the strip a real aligned column rather than text that happens to sit near text. */
+     *  the strip a real aligned column rather than text that happens to sit near text.
+     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
+     *  shows every figure rather than clipping whole columns off its end. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }
@@ -1505,7 +1507,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.d.ts

@@ -1353,7 +1353,9 @@ interface EntityRowMetric {
     /** Phosphor icon name shown before the value, e.g. "student". */
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
-     *  the strip a real aligned column rather than text that happens to sit near text. */
+     *  the strip a real aligned column rather than text that happens to sit near text.
+     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
+     *  shows every figure rather than clipping whole columns off its end. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }
@@ -1505,7 +1507,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.js

@@ -2833,7 +2833,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
   return /* @__PURE__ */ jsx39("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
     const key = m.id || m.label || i;
     const className2 = ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : "", m.tooltip != null ? "is-described" : ""].filter(Boolean).join(" ");
-    const cellStyle = { width: (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] };
+    const cellStyle = { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] };
     const content = /* @__PURE__ */ jsxs35(React17.Fragment, { children: [
       m.icon ? /* @__PURE__ */ jsx39("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
       /* @__PURE__ */ jsx39("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
@@ -3135,18 +3135,7 @@ function TransferList({
         ref: (el) => {
           sideRefs.current[side] = el;
         },
-        style: {
-          flex: 1,
-          minWidth: 0,
-          display: "flex",
-          flexDirection: "column",
-          gap: 8,
-          padding: 10,
-          borderRadius: 10,
-          border: "1px solid " + (dragOverSide === side ? "var(--brand)" : "var(--border)"),
-          background: "var(--surface)",
-          position: "relative"
-        },
+        className: ["fd-tlist-side", dragOverSide === side ? "is-drop-target" : ""].filter(Boolean).join(" "),
         children: [
           cfg.label ? /* @__PURE__ */ jsxs38("span", { className: "fd-overline fd-muted", children: [
             cfg.label,
@@ -3177,15 +3166,20 @@ function TransferList({
                 if (isBeingDragged) {
                   return /* @__PURE__ */ jsx43("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
+                const content = renderRow(item);
+                const destination = (side === "left" ? right : left).label || "the other list";
                 return /* @__PURE__ */ jsx43(
                   EntityRow,
                   {
-                    ...renderRow(item),
+                    ...content,
                     draggable: true,
                     onPointerDown: (e) => beginDrag(e, item, side),
                     action: {
                       icon: side === "left" ? "plus" : "minus",
-                      label: (side === "left" ? "Move to " : "Move from ") + (side === "left" ? right.label || "the other list" : left.label || "the other list"),
+                      // Names the row AND where it goes. A list repeats this button on every
+                      // row, so a name without the row's title is the same word fifty times
+                      // over to a screen reader, with nothing to tell one button from the next.
+                      label: "Move " + content.title + " to " + destination,
                       tone: side === "left" ? "add" : "remove",
                       onClick: () => onMove(item, side, opposite)
                     }
@@ -3203,7 +3197,7 @@ function TransferList({
       }
     );
   };
-  return /* @__PURE__ */ jsxs38("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
+  return /* @__PURE__ */ jsxs38("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), children: [
     renderSide("left", left, "right"),
     renderSide("right", right, "left"),
     drag ? createPortal4(