@common-origin/design-system 2.16.0 → 2.17.0

package/dist/client.js

@@ -742,7 +742,11 @@ var Icon = function Icon(_a) {
     size = _b === void 0 ? 'lg' : _b,
     _c = _a.iconColor,
     iconColor = _c === void 0 ? 'default' : _c,
+    ariaLabel = _a["aria-label"],
+    title = _a.title,
     dataTestId = _a["data-testid"];
+  // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
   // Get the icon data from the JSON file
   var iconData = data.iconsJson[name];
   if (!iconData) {
@@ -757,16 +761,23 @@ var Icon = function Icon(_a) {
     "$size": size,
     "$iconColor": iconColor,
     "data-testid": dataTestId,
-    children: jsxRuntime.jsx("svg", {
+    children: jsxRuntime.jsxs("svg", __assign({
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      "aria-label": iconData.name,
-      children: jsxRuntime.jsx("path", {
+      xmlns: "http://www.w3.org/2000/svg"
+    }, label ? {
+      role: 'img',
+      'aria-label': label
+    } : {
+      'aria-hidden': true,
+      focusable: false
+    }, {
+      children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsxRuntime.jsx("title", {
+        children: title
+      }), jsxRuntime.jsx("path", {
         d: iconData.path
-      })
-    })
+      })]
+    }))
   });
 };
 var templateObject_1$H;
@@ -1098,8 +1109,7 @@ var CategoryLabel = function CategoryLabel(_a) {
       children: [icon && jsxRuntime.jsx(Icon, {
         name: icon,
         size: iconSize,
-        iconColor: variant === 'filled' ? 'inverse' : 'inherit',
-        "aria-hidden": "true"
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit'
       }), children]
     }), accessibleLabel && jsxRuntime.jsx(HiddenLabel, {
       children: accessibleLabel
@@ -1544,12 +1554,9 @@ var DateFormatter = function DateFormatter(_a) {
   var date = dateFns.parseISO(dateString);
   var displayText;
   switch (mode) {
-    case 'relative':
-      // Always use relative labels (Today/Yesterday) or fall back to day name
-      displayText = formatDateSmart(date, formatString);
-      break;
+    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
     case 'smart':
-      // Smart mode: relative for recent, absolute for older
+      // Today, Yesterday or the day name for recent dates; formatted for older ones
       displayText = formatDateSmart(date, formatString);
       break;
     case 'absolute':
@@ -1791,14 +1798,18 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     "$weight": weight,
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [showPositiveIcon && !showNegativeIcon && jsxRuntime.jsx(Icon, {
+    children: [showPositiveIcon && !showNegativeIcon &&
+    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
+    jsxRuntime.jsx(Icon, {
       name: "addRing",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Plus"
     }), showNegativeIcon && jsxRuntime.jsx(Icon, {
       name: "remove",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Minus"
     }), jsxRuntime.jsx(Typography, {
       variant: typographyVariant,
       color: amountColor,
@@ -2200,8 +2211,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
       children: [showIcon && jsxRuntime.jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
-        iconColor: "inherit",
-        "aria-hidden": "true"
+        iconColor: "inherit"
       }), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]
@@ -2528,6 +2538,12 @@ var AccountCard = function AccountCard(_a) {
 };
 var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
 
+/**
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
+ * a List it's `comfortable`. Internal: not exported from the package.
+ */
+var ListSpacingContext = /*#__PURE__*/React.createContext('comfortable');
+
 var semantic$b = data.tokensJson.semantic;
 var _a$5 = semantic$b.motion,
   duration$2 = _a$5.duration,
@@ -2634,8 +2650,7 @@ var ListItem = function ListItem(_a) {
     selected = _f === void 0 ? false : _f,
     _g = _a.destructive,
     destructive = _g === void 0 ? false : _g,
-    _h = _a.spacing,
-    spacing = _h === void 0 ? 'comfortable' : _h,
+    spacingProp = _a.spacing,
     children = _a.children,
     className = _a.className,
     dataTestId = _a["data-testid"],
@@ -2645,6 +2660,8 @@ var ListItem = function ListItem(_a) {
     customTabIndex = _a.tabIndex,
     customOnKeyDown = _a.onKeyDown,
     props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "destructive", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
+  var listSpacing = React.useContext(ListSpacingContext);
+  var spacing = spacingProp !== null && spacingProp !== void 0 ? spacingProp : listSpacing;
   var isInteractive = interactive || expandable || customRole === 'option';
   var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
   var ariaExpanded = expandable ? expanded : undefined;
@@ -2669,61 +2686,69 @@ var ListItem = function ListItem(_a) {
       handleClick();
     }
   };
-  return jsxRuntime.jsxs(StyledListItem, __assign({
-    "$interactive": isInteractive,
-    "$disabled": disabled,
-    "$selected": selected,
-    "$destructive": destructive,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: customRole || 'listitem',
-    id: id,
-    "aria-selected": ariaSelected
-  }, props, {
-    children: [jsxRuntime.jsxs(StyledItemContent, {
-      "$interactive": isInteractive,
-      "$disabled": disabled,
-      "$selected": selected,
-      "$destructive": destructive,
-      "$spacing": spacing,
-      role: contentRole,
-      "aria-expanded": ariaExpanded,
-      "aria-disabled": ariaDisabled,
-      "aria-current": ariaCurrent,
-      tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      children: [icon && jsxRuntime.jsx(StyledIconContainer$1, {
-        "aria-hidden": "true",
-        children: icon
-      }), jsxRuntime.jsxs(StyledTextContent, {
-        children: [jsxRuntime.jsx(Typography, {
-          variant: "body",
-          color: destructive ? 'error' : 'default',
-          children: primary
-        }), secondary && jsxRuntime.jsx(Typography, {
-          variant: "small",
-          color: "subdued",
-          children: secondary
-        })]
-      }), jsxRuntime.jsxs(StyledRightContent, {
-        children: [badge, expandable && jsxRuntime.jsx(StyledChevronIcon, {
+  return (
+    // The List's spacing is for its own items: reset it for this item's content, so components
+    // built on ListItem (ActionSheet, even through its portal) and expanded content keep their own
+    // density. A nested List provides its own spacing (#77)
+    jsxRuntime.jsx(ListSpacingContext.Provider, {
+      value: "comfortable",
+      children: jsxRuntime.jsxs(StyledListItem, __assign({
+        "$interactive": isInteractive,
+        "$disabled": disabled,
+        "$selected": selected,
+        "$destructive": destructive,
+        "$spacing": spacing,
+        className: className,
+        "data-testid": dataTestId,
+        role: customRole || 'listitem',
+        id: id,
+        "aria-selected": ariaSelected
+      }, props, {
+        children: [jsxRuntime.jsxs(StyledItemContent, {
+          "$interactive": isInteractive,
+          "$disabled": disabled,
+          "$selected": selected,
+          "$destructive": destructive,
+          "$spacing": spacing,
+          role: contentRole,
+          "aria-expanded": ariaExpanded,
+          "aria-disabled": ariaDisabled,
+          "aria-current": ariaCurrent,
+          tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: [icon && jsxRuntime.jsx(StyledIconContainer$1, {
+            "aria-hidden": "true",
+            children: icon
+          }), jsxRuntime.jsxs(StyledTextContent, {
+            children: [jsxRuntime.jsx(Typography, {
+              variant: "body",
+              color: destructive ? 'error' : 'default',
+              children: primary
+            }), secondary && jsxRuntime.jsx(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: secondary
+            })]
+          }), jsxRuntime.jsxs(StyledRightContent, {
+            children: [badge, expandable && jsxRuntime.jsx(StyledChevronIcon, {
+              "$expanded": expanded,
+              "aria-hidden": "true",
+              children: jsxRuntime.jsx(Icon, {
+                name: "caretDown",
+                size: "sm"
+              })
+            })]
+          })]
+        }), expandable && children && jsxRuntime.jsx(StyledExpandedContent, {
+          "$spacing": spacing,
           "$expanded": expanded,
-          "aria-hidden": "true",
-          children: jsxRuntime.jsx(Icon, {
-            name: "caretDown",
-            size: "sm"
-          })
+          "aria-hidden": !expanded,
+          children: children
         })]
-      })]
-    }), expandable && children && jsxRuntime.jsx(StyledExpandedContent, {
-      "$spacing": spacing,
-      "$expanded": expanded,
-      "aria-hidden": !expanded,
-      children: children
-    })]
-  }));
+      }))
+    })
+  );
 };
 ListItem.displayName = 'ListItem';
 var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
@@ -4470,12 +4495,12 @@ var StyledCheckbox = styled__default.default.span.withConfig({
   return props.$checked || props.$indeterminate ? data.tokensJson.semantic.color.background.inverse : data.tokensJson.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return data.tokensJson.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return data.tokensJson.semantic.border.strong;
+  if (props.$checked || props.$indeterminate) return data.tokensJson.semantic.color.border.strong;
   return data.tokensJson.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
-  return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.border.strong : data.tokensJson.component.input.hover.borderColor;
+  return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.color.border.strong : data.tokensJson.component.input.hover.borderColor;
 }, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.semantic.border.focusOffset, function (props) {
   return props.$state === 'error' ? data.tokensJson.component.input.error.focus.borderColor : data.tokensJson.component.input.focus.borderColor;
 }, function (props) {
@@ -5466,15 +5491,17 @@ var List = function List(_a) {
     className = _a.className,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
-  return jsxRuntime.jsx(StyledList, __assign({
-    "$dividers": dividers,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: "list"
-  }, props, {
-    children: children
-  }));
+  return jsxRuntime.jsx(ListSpacingContext.Provider, {
+    value: spacing,
+    children: jsxRuntime.jsx(StyledList, __assign({
+      "$dividers": dividers,
+      className: className,
+      "data-testid": dataTestId,
+      role: "list"
+    }, props, {
+      children: children
+    }))
+  });
 };
 List.displayName = 'List';
 var templateObject_1$c;
@@ -6463,8 +6490,7 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       children: [jsxRuntime.jsx(Icon, {
         name: "search",
         size: "sm",
-        iconColor: "subdued",
-        "aria-hidden": "true"
+        iconColor: "subdued"
       }), jsxRuntime.jsx(StyledInput, __assign({
         ref: inputRef,
         type: "text",
@@ -6530,8 +6556,7 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           secondary: description,
           icon: item.type === 'recent' ? jsxRuntime.jsx(Icon, {
             name: "refresh",
-            size: "xs",
-            "aria-hidden": "true"
+            size: "xs"
           }) : undefined,
           interactive: true,
           selected: index === highlightedIndex,
@@ -7194,7 +7219,7 @@ var StyledTab = styled__default.default.button.withConfig({
   },
   displayName: "TabBar__StyledTab",
   componentId: "sc-1g9ib0y-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
   return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
@@ -7678,20 +7703,14 @@ var TransactionListItem = function TransactionListItem(_a) {
             })
           })]
         }), (hasReceipt || hasNote) && jsxRuntime.jsxs(StyledIconIndicator, {
-          children: [hasReceipt && jsxRuntime.jsx("span", {
-            "aria-label": "Has receipt",
-            role: "img",
-            children: jsxRuntime.jsx(Icon, {
-              name: "fileDocSearch",
-              size: "xs"
-            })
-          }), hasNote && jsxRuntime.jsx("span", {
-            "aria-label": "Has note",
-            role: "img",
-            children: jsxRuntime.jsx(Icon, {
-              name: "paper",
-              size: "xs"
-            })
+          children: [hasReceipt && jsxRuntime.jsx(Icon, {
+            name: "fileDocSearch",
+            size: "xs",
+            "aria-label": "Has receipt"
+          }), hasNote && jsxRuntime.jsx(Icon, {
+            name: "paper",
+            size: "xs",
+            "aria-label": "Has note"
           })]
         })]
       })]