@oxy.so/bloom 3.6.0 → 4.0.0

package/lib/module/mail-list/MailSelectionBar.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import React, { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import { Checkbox } from "../checkbox/index.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MailGlyphButton } from "./parts.js";
+import { MAIL_LIST_CSS, MAIL_LIST_STYLE_ID, MAIL_ROW_GEOMETRY, MAIL_SELECTION_BAR_HEIGHT, mailActionColor, mailStrings, resolveMailPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The bar that replaces the top of the list while rows are selected: a
+ * select-all checkbox, the count, and the bulk actions.
+ *
+ * `MailList` mounts it itself the moment `onCheckedIdsChange` is given and
+ * something is checked — it is NOT a component an app places by hand, because a
+ * bar that can be forgotten is a selection mode with no way out of it.
+ *
+ * It paints the accent's SUBTLE pair (`resolveAccentColors`), which is the one
+ * fill in the palette that says "a mode is on" without competing with a
+ * selected row; the glyphs read their tone off the same recipe.
+ *
+ * The checkbox is `indeterminate` while some but not all rows are checked, so
+ * the one control answers both "how many" and "press me to take the rest".
+ */
+export function MailSelectionBar({
+  count,
+  total,
+  onSelectAll,
+  onClear,
+  actions,
+  onAction,
+  density = 'comfortable',
+  strings,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_LIST_STYLE_ID, MAIL_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailStrings(strings), [strings]);
+  const geo = MAIL_ROW_GEOMETRY[density];
+  if (count <= 0) return null;
+  const all = total > 0 && count >= total;
+  return /*#__PURE__*/_jsxs(View, {
+    role: "toolbar",
+    accessibilityLabel: text.selectedCount(count),
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      height: MAIL_SELECTION_BAR_HEIGHT[density],
+      paddingLeft: geo.paddingHorizontal,
+      paddingRight: geo.paddingHorizontal,
+      backgroundColor: paint.barFill
+    }, style],
+    testID: testID,
+    children: [onSelectAll !== undefined ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: geo.avatar,
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: all,
+        indeterminate: !all,
+        onCheckedChange: onSelectAll,
+        size: density === 'compact' ? 'small' : 'medium',
+        accessibilityLabel: text.selectAll,
+        testID: testID ? `${testID}-select-all` : undefined
+      })
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      variant: "body-semibold",
+      numberOfLines: 1,
+      style: {
+        color: paint.barText,
+        flexShrink: 1,
+        minWidth: 0
+      },
+      testID: testID ? `${testID}-count` : undefined,
+      children: text.selectedCount(count)
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      }
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 2
+      },
+      children: [(actions ?? []).map(action => /*#__PURE__*/_jsx(MailGlyphButton, {
+        label: action.label,
+        icon: action.icon,
+        color: action.tone === undefined ? paint.barText : mailActionColor(action, paint),
+        hoverFill: paint.selected,
+        ring: paint.accent,
+        size: geo.action,
+        glyph: geo.actionGlyph,
+        onPress: () => {
+          action.onPress?.();
+          onAction?.(action.key);
+        },
+        testID: testID ? `${testID}-action-${action.key}` : undefined
+      }, action.key)), onClear !== undefined ? /*#__PURE__*/_jsx(MailGlyphButton, {
+        label: text.clearSelection,
+        icon: RiCloseLine,
+        color: paint.barText,
+        hoverFill: paint.selected,
+        ring: paint.accent,
+        size: geo.action,
+        glyph: geo.actionGlyph,
+        onPress: onClear,
+        testID: testID ? `${testID}-clear` : undefined
+      }) : null]
+    })]
+  });
+}
+//# sourceMappingURL=MailSelectionBar.js.map

package/lib/module/mail-list/MailSelectionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","View","Checkbox","RiCloseLine","adoptStyleSheet","useSurfaceFill","useTheme","Text","MailGlyphButton","MAIL_LIST_CSS","MAIL_LIST_STYLE_ID","MAIL_ROW_GEOMETRY","MAIL_SELECTION_BAR_HEIGHT","mailActionColor","mailStrings","resolveMailPaint","jsx","_jsx","jsxs","_jsxs","MailSelectionBar","count","total","onSelectAll","onClear","actions","onAction","density","strings","style","testID","theme","surface","paint","text","geo","all","role","accessibilityLabel","selectedCount","flexDirection","alignItems","gap","height","paddingLeft","paddingHorizontal","paddingRight","backgroundColor","barFill","children","undefined","width","avatar","checked","indeterminate","onCheckedChange","size","selectAll","variant","numberOfLines","color","barText","flexShrink","minWidth","flex","map","action","label","icon","tone","hoverFill","selected","ring","accent","glyph","actionGlyph","onPress","key","clearSelection"],"sourceRoot":"../../../src","sources":["mail-list/MailSelectionBar.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,cAAc,QAAQ,6BAA0B;AACzD,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,eAAe,QAAQ,YAAS;AACzC,SACEC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjBC,yBAAyB,EACzBC,eAAe,EACfC,WAAW,EACXC,gBAAgB,QACX,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,KAAK;EACLC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,OAAO,GAAG,aAAa;EACvBC,OAAO;EACPC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAMC,KAAK,GAAGzB,QAAQ,CAAC,CAAC;EACxB,MAAM0B,OAAO,GAAG3B,cAAc,CAAC,CAAC;EAChCN,SAAS,CAAC,MAAM;IACdK,eAAe,CAACM,kBAAkB,EAAED,aAAa,CAAC;EACpD,CAAC,EAAE,EAAE,CAAC;EACN,MAAMwB,KAAK,GAAGjC,OAAO,CAAC,MAAMe,gBAAgB,CAACgB,KAAK,EAAEC,OAAO,CAAC,EAAE,CAACD,KAAK,EAAEC,OAAO,CAAC,CAAC;EAC/E,MAAME,IAAI,GAAGlC,OAAO,CAAC,MAAMc,WAAW,CAACc,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAC3D,MAAMO,GAAG,GAAGxB,iBAAiB,CAACgB,OAAO,CAAC;EAEtC,IAAIN,KAAK,IAAI,CAAC,EAAE,OAAO,IAAI;EAE3B,MAAMe,GAAG,GAAGd,KAAK,GAAG,CAAC,IAAID,KAAK,IAAIC,KAAK;EACvC,oBACEH,KAAA,CAAClB,IAAI;IACHoC,IAAI,EAAC,SAAS;IACdC,kBAAkB,EAAEJ,IAAI,CAACK,aAAa,CAAClB,KAAK,CAAE;IAC9CQ,KAAK,EAAE,CACL;MACEW,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE/B,yBAAyB,CAACe,OAAO,CAAC;MAC1CiB,WAAW,EAAET,GAAG,CAACU,iBAAiB;MAClCC,YAAY,EAAEX,GAAG,CAACU,iBAAiB;MACnCE,eAAe,EAAEd,KAAK,CAACe;IACzB,CAAC,EACDnB,KAAK,CACL;IACFC,MAAM,EAAEA,MAAO;IAAAmB,QAAA,GAEd1B,WAAW,KAAK2B,SAAS,gBACxBjC,IAAA,CAAChB,IAAI;MAAC4B,KAAK,EAAE;QAAEsB,KAAK,EAAEhB,GAAG,CAACiB,MAAM;QAAEX,UAAU,EAAE;MAAS,CAAE;MAAAQ,QAAA,eACvDhC,IAAA,CAACf,QAAQ;QACPmD,OAAO,EAAEjB,GAAI;QACbkB,aAAa,EAAE,CAAClB,GAAI;QACpBmB,eAAe,EAAEhC,WAAY;QAC7BiC,IAAI,EAAE7B,OAAO,KAAK,SAAS,GAAG,OAAO,GAAG,QAAS;QACjDW,kBAAkB,EAAEJ,IAAI,CAACuB,SAAU;QACnC3B,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,aAAa,GAAGoB;MAAU,CACrD;IAAC,CACE,CAAC,GACL,IAAI,eACRjC,IAAA,CAACV,IAAI;MACHmD,OAAO,EAAC,eAAe;MACvBC,aAAa,EAAE,CAAE;MACjB9B,KAAK,EAAE;QAAE+B,KAAK,EAAE3B,KAAK,CAAC4B,OAAO;QAAEC,UAAU,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAE,CAAE;MAC5DjC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGoB,SAAU;MAAAD,QAAA,EAE9Cf,IAAI,CAACK,aAAa,CAAClB,KAAK;IAAC,CACtB,CAAC,eACPJ,IAAA,CAAChB,IAAI;MAAC4B,KAAK,EAAE;QAAEmC,IAAI,EAAE;MAAE;IAAE,CAAE,CAAC,eAC5B7C,KAAA,CAAClB,IAAI;MAAC4B,KAAK,EAAE;QAAEW,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAE,CAAE;MAAAO,QAAA,GACjE,CAACxB,OAAO,IAAI,EAAE,EAAEwC,GAAG,CAAEC,MAAM,iBAC1BjD,IAAA,CAACT,eAAe;QAEd2D,KAAK,EAAED,MAAM,CAACC,KAAM;QACpBC,IAAI,EAAEF,MAAM,CAACE,IAAK;QAClBR,KAAK,EAAEM,MAAM,CAACG,IAAI,KAAKnB,SAAS,GAAGjB,KAAK,CAAC4B,OAAO,GAAGhD,eAAe,CAACqD,MAAM,EAAEjC,KAAK,CAAE;QAClFqC,SAAS,EAAErC,KAAK,CAACsC,QAAS;QAC1BC,IAAI,EAAEvC,KAAK,CAACwC,MAAO;QACnBjB,IAAI,EAAErB,GAAG,CAAC+B,MAAO;QACjBQ,KAAK,EAAEvC,GAAG,CAACwC,WAAY;QACvBC,OAAO,EAAEA,CAAA,KAAM;UACbV,MAAM,CAACU,OAAO,GAAG,CAAC;UAClBlD,QAAQ,GAAGwC,MAAM,CAACW,GAAG,CAAC;QACxB,CAAE;QACF/C,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,WAAWoC,MAAM,CAACW,GAAG,EAAE,GAAG3B;MAAU,GAZzDgB,MAAM,CAACW,GAab,CACF,CAAC,EACDrD,OAAO,KAAK0B,SAAS,gBACpBjC,IAAA,CAACT,eAAe;QACd2D,KAAK,EAAEjC,IAAI,CAAC4C,cAAe;QAC3BV,IAAI,EAAEjE,WAAY;QAClByD,KAAK,EAAE3B,KAAK,CAAC4B,OAAQ;QACrBS,SAAS,EAAErC,KAAK,CAACsC,QAAS;QAC1BC,IAAI,EAAEvC,KAAK,CAACwC,MAAO;QACnBjB,IAAI,EAAErB,GAAG,CAAC+B,MAAO;QACjBQ,KAAK,EAAEvC,GAAG,CAACwC,WAAY;QACvBC,OAAO,EAAEpD,OAAQ;QACjBM,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGoB;MAAU,CAChD,CAAC,GACA,IAAI;IAAA,CACJ,CAAC;EAAA,CACH,CAAC;AAEX","ignoreList":[]}

package/lib/module/mail-list/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export { MailList } from "./MailList.js";
+export { MailListSkeleton } from "./MailListSkeleton.js";
+export { MailRow } from "./MailRow.js";
+export { MailSelectionBar } from "./MailSelectionBar.js";
+export { DEFAULT_MAIL_STRINGS, MAIL_LABEL_DOT, MAIL_ROW_GEOMETRY, MAIL_ROW_RADIUS, MAIL_SELECTION_BAR_HEIGHT, composeMailRowName, groupMailByDay, labelMarks, mailStrings, resolveMailPaint, toSwipeActions, visibleLabels } from "./shared.js";
+//# sourceMappingURL=index.js.map

package/lib/module/mail-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MailList","MailListSkeleton","MailRow","MailSelectionBar","DEFAULT_MAIL_STRINGS","MAIL_LABEL_DOT","MAIL_ROW_GEOMETRY","MAIL_ROW_RADIUS","MAIL_SELECTION_BAR_HEIGHT","composeMailRowName","groupMailByDay","labelMarks","mailStrings","resolveMailPaint","toSwipeActions","visibleLabels"],"sourceRoot":"../../../src","sources":["mail-list/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,eAAY;AACrC,SAASC,gBAAgB,QAAQ,uBAAoB;AACrD,SAASC,OAAO,QAAQ,cAAW;AACnC,SAASC,gBAAgB,QAAQ,uBAAoB;AACrD,SACEC,oBAAoB,EACpBC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,yBAAyB,EACzBC,kBAAkB,EAClBC,cAAc,EACdC,UAAU,EACVC,WAAW,EACXC,gBAAgB,EAChBC,cAAc,EACdC,aAAa,QACR,aAAU","ignoreList":[]}

package/lib/module/mail-list/parts.js

@@ -0,0 +1,343 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Linking, Pressable, StyleSheet, View } from 'react-native';
+import { Chip } from "../chip/index.js";
+import { RiStarFill } from "../icons/remix/RiStarFill.js";
+import { RiStarLine } from "../icons/remix/RiStarLine.js";
+import { webDataSet } from "../styles/web-data.js";
+import { Text } from "../typography/index.js";
+import { IS_WEB, MAIL_LABEL_DOT, MAIL_ROW_RADIUS, MAIL_TOUCH_TARGET } from "./shared.js";
+
+// ---------------------------------------------------------------------------
+//  The link that covers a row
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A ROW'S LINK IS A SIBLING LAID UNDER ITS CONTENT, NOT A WRAPPER AROUND IT.
+ *
+ * It fills the row absolutely and carries the whole composed name; the avatar,
+ * the text lines and the label chips are drawn over it with
+ * `pointerEvents="none"`, so a press anywhere on them falls through. The star,
+ * the checkbox and the hover rail are drawn over it as their OWN targets — a
+ * button inside an anchor is invalid HTML, and nesting them would make every
+ * "Archive" click open the message.
+ *
+ * `actions` also reaches it as `accessibilityActions`, which is the ONLY path a
+ * screen-reader user has to a swipe: the rotor lists them on the row itself.
+ * react-native-web drops the prop, and rightly — there the rail is in the tab
+ * order and `:focus-within` reveals it.
+ */
+export function MailRowLink({
+  name,
+  onPress,
+  onLongPress,
+  href,
+  selected = false,
+  paint,
+  onPressedChange,
+  actions,
+  onAction,
+  testID
+}) {
+  const handlePress = event => {
+    if (onPress) {
+      if (IS_WEB && href) event.preventDefault();
+      onPress();
+      return;
+    }
+    if (!IS_WEB && href) void Linking.openURL(href).catch(() => undefined);
+  };
+  const interactive = Boolean(onPress || href || onLongPress);
+  const style = {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: MAIL_ROW_RADIUS,
+    '--bloom-mail-ring': paint.accent
+  };
+  const rotor = actions === undefined || actions.length === 0 ? null : {
+    accessibilityActions: actions.map(action => ({
+      name: action.key,
+      label: action.label
+    })),
+    onAccessibilityAction: event => {
+      const match = actions.find(action => action.key === event.nativeEvent.actionName);
+      if (match === undefined) return;
+      match.onPress?.();
+      onAction?.(match.key);
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webDataSet({
+      bloomMailFocusable: ''
+    }),
+    ...rotor,
+    ...(IS_WEB && href ? {
+      href
+    } : null),
+    ...(IS_WEB && selected ? {
+      'aria-current': 'true'
+    } : null),
+    role: href ? 'link' : interactive ? 'button' : undefined,
+    accessibilityLabel: name
+    // `selected` on a row is `aria-current` on web — `aria-selected` is for a
+    // tab or an option, and a message row is neither. Native reads the state.
+    ,
+    accessibilityState: {
+      selected
+    },
+    onPress: onPress || !IS_WEB && href ? handlePress : undefined,
+    onLongPress: onLongPress,
+    onPressIn: onPressedChange ? () => onPressedChange(true) : undefined,
+    onPressOut: onPressedChange ? () => onPressedChange(false) : undefined,
+    style: style,
+    testID: testID
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  A round glyph button
+// ---------------------------------------------------------------------------
+
+/**
+ * The round icon button the hover rail, the star and the selection bar use.
+ * Hover and press are a COLOUR CHANGE ONLY — nothing in this family scales.
+ */
+export function MailGlyphButton({
+  label,
+  icon: Icon,
+  onPress,
+  size,
+  glyph,
+  color,
+  hoverFill,
+  ring,
+  pressed,
+  style,
+  testID
+}) {
+  const [active, setActive] = useState(false);
+  // The DRAWN control and the TOUCH target are two numbers. A 44-tall button in
+  // the row's right column sets the row's height — a list of two-line rows came
+  // out at 88 because of it — so the glyph is drawn at `size` and the target is
+  // grown back to 44 with `hitSlop`. That is safe here and nowhere near an
+  // adjacent control: the star is the only button in the column, and it sits
+  // ABOVE the row's link, so the slop takes the press from the link rather than
+  // from another button.
+  const slop = Math.max(0, Math.round((MAIL_TOUCH_TARGET - size) / 2));
+  const buttonStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: active ? hoverFill : 'transparent',
+    '--bloom-mail-ring': ring,
+    ...(IS_WEB ? {
+      transitionProperty: 'background-color',
+      transitionDuration: '120ms'
+    } : null)
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webDataSet({
+      bloomMailFocusable: ''
+    }),
+    role: "button",
+    accessibilityLabel: label
+    // react-native-web drops `accessibilityState` and React Native has no
+    // `aria-pressed`, so a toggle spells both. A plain button spells neither:
+    // `aria-pressed="false"` announces a state nobody set.
+    ,
+    ...(pressed === undefined ? null : {
+      'aria-pressed': pressed,
+      accessibilityState: {
+        selected: pressed
+      }
+    }),
+    onPress: onPress,
+    hitSlop: {
+      top: slop,
+      bottom: slop,
+      left: slop,
+      right: slop
+    },
+    onHoverIn: () => setActive(true),
+    onHoverOut: () => setActive(false),
+    onPressIn: () => setActive(true),
+    onPressOut: () => setActive(false),
+    style: [buttonStyle, style],
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Icon, {
+      width: glyph,
+      height: glyph,
+      fill: color
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  The star
+// ---------------------------------------------------------------------------
+
+/**
+ * THE STAR IS DRAWN ONLY WHERE IT IS A CONTROL. With no `onStarredChange` the
+ * row draws nothing at all: a star that looks like a button and does nothing is
+ * worse than no button, and on a two-line row it is also the widest thing
+ * competing with the subject. The state is not lost — `composeMailRowName` says
+ * "Starred" either way, which is the reading a marker of that size was ever
+ * going to give.
+ *
+ * The ON state is the accent, because a star is a mark the reader made and not
+ * a status.
+ */
+export function MailStar({
+  starred,
+  onStarredChange,
+  size,
+  glyph,
+  paint,
+  strings,
+  testID
+}) {
+  const Icon = starred ? RiStarFill : RiStarLine;
+  const color = starred ? paint.accent : paint.textGraphical;
+  if (onStarredChange === undefined) return null;
+  return /*#__PURE__*/_jsx(MailGlyphButton, {
+    label: starred ? strings.starred : strings.star,
+    icon: Icon,
+    pressed: starred,
+    onPress: () => onStarredChange(!starred),
+    size: size,
+    glyph: glyph,
+    color: color,
+    hoverFill: paint.selected,
+    ring: paint.accent,
+    testID: testID
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Label chips
+// ---------------------------------------------------------------------------
+
+/**
+ * The labels a row carries, as `Chip`s in the subtle fill. The tone reaches
+ * `resolveAccentColors` through the chip, so nothing here picks a colour.
+ *
+ * Hidden from assistive technology: the row's composed name already says every
+ * label, and the chips are inside the row's `pointerEvents="none"` content.
+ */
+export function MailLabelChips({
+  labels,
+  overflow,
+  surface,
+  strings,
+  testID
+}) {
+  if (labels.length === 0 && overflow === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      flexShrink: 0
+    },
+    testID: testID,
+    children: [labels.map(label => /*#__PURE__*/_jsx(Chip, {
+      size: "small",
+      variant: "subtle",
+      color: label.tone ?? 'default',
+      surface: surface,
+      testID: testID ? `${testID}-${label.id}` : undefined,
+      children: label.name
+    }, label.id)), overflow > 0 ? /*#__PURE__*/_jsx(Chip, {
+      size: "small",
+      variant: "subtle",
+      color: "default",
+      surface: surface,
+      accessibilityLabel: strings.moreLabels(overflow),
+      testID: testID ? `${testID}-overflow` : undefined,
+      children: `+${overflow}`
+    }) : null]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Label marks — one chip, then dots
+// ---------------------------------------------------------------------------
+
+/**
+ * What a TWO-LINE row draws for its labels: one chip and a dot per label that
+ * did not fit. Which labels those are is `labelMarks`, and it is pure.
+ *
+ * A dot is not a smaller chip. It carries no name, so it is the row saying
+ * "there is another one of these" in 8px of the label's own tone — and the
+ * row's composed name is where the names are. Hidden from assistive technology
+ * for exactly that reason, like every other glyph inside the row's content.
+ */
+export function MailLabelMarks({
+  chip,
+  dots,
+  surface,
+  testID
+}) {
+  if (chip === undefined && dots.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      flexShrink: 0
+    },
+    testID: testID,
+    children: [chip === undefined ? null : /*#__PURE__*/_jsx(Chip, {
+      size: "small",
+      variant: "subtle",
+      color: chip.tone ?? 'default',
+      surface: surface,
+      testID: testID ? `${testID}-${chip.id}` : undefined,
+      children: chip.name
+    }), dots.map(dot => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: MAIL_LABEL_DOT,
+        height: MAIL_LABEL_DOT,
+        borderRadius: MAIL_LABEL_DOT / 2,
+        backgroundColor: dot.color
+      },
+      testID: testID ? `${testID}-dot-${dot.id}` : undefined
+    }, dot.id))]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  A section heading
+// ---------------------------------------------------------------------------
+
+export function MailSectionHeading({
+  title,
+  paint,
+  paddingHorizontal,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    role: "presentation",
+    style: {
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop: 12,
+      paddingBottom: 4
+    },
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-semibold",
+      style: {
+        color: paint.textTertiary
+      },
+      children: title
+    })
+  });
+}
+//# sourceMappingURL=parts.js.map

package/lib/module/mail-list/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Linking","Pressable","StyleSheet","View","Chip","RiStarFill","RiStarLine","webDataSet","Text","IS_WEB","MAIL_LABEL_DOT","MAIL_ROW_RADIUS","MAIL_TOUCH_TARGET","jsx","_jsx","jsxs","_jsxs","MailRowLink","name","onPress","onLongPress","href","selected","paint","onPressedChange","actions","onAction","testID","handlePress","event","preventDefault","openURL","catch","undefined","interactive","Boolean","style","absoluteFillObject","borderRadius","accent","rotor","length","accessibilityActions","map","action","key","label","onAccessibilityAction","match","find","nativeEvent","actionName","bloomMailFocusable","role","accessibilityLabel","accessibilityState","onPressIn","onPressOut","MailGlyphButton","icon","Icon","size","glyph","color","hoverFill","ring","pressed","active","setActive","slop","Math","max","round","buttonStyle","width","height","alignItems","justifyContent","backgroundColor","transitionProperty","transitionDuration","hitSlop","top","bottom","left","right","onHoverIn","onHoverOut","children","fill","MailStar","starred","onStarredChange","strings","textGraphical","star","MailLabelChips","labels","overflow","surface","importantForAccessibility","flexDirection","gap","flexShrink","variant","tone","id","moreLabels","MailLabelMarks","chip","dots","dot","MailSectionHeading","title","paddingHorizontal","paddingLeft","paddingRight","paddingTop","paddingBottom","textTertiary"],"sourceRoot":"../../../src","sources":["mail-list/parts.tsx"],"mappings":"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","ignoreList":[]}