@common-origin/design-system 2.14.0 → 2.15.0

package/dist/client.esm.js

@@ -241,10 +241,10 @@ var exitAnimation = css(templateObject_2$v || (templateObject_2$v = __makeTempla
 var visuallyHidden = css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
 var templateObject_1$K, templateObject_2$v, templateObject_3$s;
 
-var _a$c = tokensJson.semantic,
-  typography$1 = _a$c.typography,
-  color$9 = _a$c.color,
-  letterSpacing = _a$c.letterSpacing;
+var _a$b = tokensJson.semantic,
+  typography$1 = _a$b.typography,
+  color$9 = _a$b.color,
+  letterSpacing = _a$b.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
     display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
@@ -375,10 +375,10 @@ var semantic$f = tokensJson.semantic;
 var color$8 = semantic$f.color,
   border$9 = semantic$f.border;
 var radius$4 = border$9.radius;
-var _a$b = tokensJson.component.badge,
-  dot = _a$b.dot,
-  count = _a$b.count,
-  ring = _a$b.ring;
+var _a$a = tokensJson.component.badge,
+  dot = _a$a.dot,
+  count = _a$a.count,
+  ring = _a$a.ring;
 var scaleIn$2 = keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
@@ -427,7 +427,8 @@ var Badge = function Badge(_a) {
     _e = _a.dot,
     dot = _e === void 0 ? false : _e,
     ariaLabel = _a["aria-label"],
-    className = _a.className;
+    className = _a.className,
+    dataTestId = _a["data-testid"];
   var isVisible = dot || count > 0;
   var displayCount = count > max ? "".concat(max, "+") : count.toString();
   // Generate default aria-label if not provided
@@ -435,6 +436,7 @@ var Badge = function Badge(_a) {
   var label = ariaLabel || defaultAriaLabel;
   return jsxs(BadgeWrapper, {
     className: className,
+    "data-testid": dataTestId,
     children: [children, jsxs(BadgeIndicator, {
       "$variant": variant,
       "$isDot": dot,
@@ -470,7 +472,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$alignItems && css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
 }, function (props) {
@@ -496,7 +498,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
 }, function (props) {
-  return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
+  return props.$pl && css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
 }, function (props) {
   return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$px], tokensJson.semantic.spacing.layout[props.$px]);
 }, function (props) {
@@ -686,7 +688,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
+var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
 
 var IconStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -885,8 +887,11 @@ var Button = function Button(_a) {
     rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
   // For links with custom link component (e.g., Next.js Link, React Router Link)
   if (purpose === 'link' && url && LinkComponent) {
-    return jsx(LinkComponent, {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsx(LinkComponent, __assign({}, linkProps, {
       href: url,
+      target: target,
       children: jsx(StyledLink, {
         as: "span",
         "$variant": variant,
@@ -894,18 +899,17 @@ var Button = function Button(_a) {
         "data-testid": dataTestId,
         children: renderButtonContent(children, iconName, size)
       })
-    });
+    }));
   }
   // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
-    return jsx(StyledLink, __assign({
+    return jsx(StyledLink, __assign({}, linkProps, {
       href: url,
       target: target,
       "$variant": variant,
       "$size": size,
-      "data-testid": dataTestId
-    }, linkProps, {
+      "data-testid": dataTestId,
       children: renderButtonContent(children, iconName, size)
     }));
   }
@@ -1059,6 +1063,11 @@ CategoryBadge.displayName = 'CategoryBadge';
 var templateObject_1$E;
 
 var chip = tokensJson.component.chip;
+// Selected-chip hover and active colours have no token yet: they wait on #21 (selected states).
+// eslint-disable-next-line no-restricted-syntax
+var SELECTED_HOVER = '#CAE8FF';
+// eslint-disable-next-line no-restricted-syntax
+var SELECTED_ACTIVE = '#B5DEFF';
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -1067,7 +1076,7 @@ var getVariantStyles = function getVariantStyles(_a) {
     $disabled = _a.$disabled;
   // Boolean chips with selected state get special background
   if ($selected) {
-    return "\n      background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
+    return "\n      background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_HOVER : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_ACTIVE : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
@@ -1119,7 +1128,7 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.border.radius.xs, function (props) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, tokensJson.semantic.spacing.layout.none, tokensJson.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, tokensJson.semantic.motion.hover, tokensJson.semantic.color.background['hover-overlay'], tokensJson.semantic.color.background['active-overlay'], tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
 var templateObject_1$D, templateObject_2$r, templateObject_3$p;
@@ -1410,9 +1419,9 @@ var Picture = function Picture(_a) {
 };
 var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
 
-var _a$a = tokensJson.semantic,
-  typography = _a$a.typography,
-  color$6 = _a$a.color;
+var _a$9 = tokensJson.semantic,
+  typography = _a$9.typography,
+  color$6 = _a$9.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
@@ -1468,9 +1477,9 @@ var DateFormatter = function DateFormatter(_a) {
 var templateObject_1$A;
 
 var motion$5 = tokensJson.semantic.motion,
-  _a$9 = tokensJson.component,
-  iconButton = _a$9.iconButton,
-  button = _a$9.button;
+  _a$8 = tokensJson.component,
+  iconButton = _a$8.iconButton,
+  button = _a$8.button;
 var IconButtonStyled = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1700,13 +1709,13 @@ var templateObject_1$y;
 
 // Destructure tokens
 var semantic$c = tokensJson.semantic;
-var _a$8 = __assign(__assign({}, semantic$c), {
+var _a$7 = __assign(__assign({}, semantic$c), {
     component: tokensJson.component
   }),
-  color$5 = _a$8.color,
-  border$7 = _a$8.border,
-  motion$4 = _a$8.motion,
-  component$2 = _a$8.component;
+  color$5 = _a$7.color,
+  border$7 = _a$7.border,
+  motion$4 = _a$7.motion,
+  component$2 = _a$7.component;
 var radius$2 = border$7.radius;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1741,7 +1750,7 @@ var ProgressBarFill = styled.div.withConfig({
   }
   return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 }, function (props) {
   return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
@@ -1753,13 +1762,20 @@ var ProgressBar = function ProgressBar(_a) {
     color = _c === void 0 ? 'default' : _c,
     height = _a.height,
     width = _a.width,
+    ariaLabel = _a["aria-label"],
+    ariaLabelledBy = _a["aria-labelledby"],
     dataTestId = _a["data-testid"];
+  // Blank values are no name at all, so they fall back like missing ones
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  var labelledBy = (ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) ? ariaLabelledBy : undefined;
   return jsx(ProgressBarContainer, {
     "$variant": variant,
     "$height": height,
     "$width": width,
     "data-testid": dataTestId,
     role: "progressbar",
+    "aria-label": label !== null && label !== void 0 ? label : labelledBy ? undefined : 'Progress',
+    "aria-labelledby": labelledBy,
     "aria-valuenow": Math.min(100, Math.max(0, value)),
     "aria-valuemin": 0,
     "aria-valuemax": 100,
@@ -1770,7 +1786,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
+var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokensJson.component.separator;
@@ -1947,10 +1963,10 @@ var templateObject_1$v;
 var statusColors = tokensJson.semantic.color.status;
 var spacing$5 = tokensJson.semantic.spacing.layout;
 var radius$1 = tokensJson.semantic.border.radius;
-var _a$7 = tokensJson.semantic.motion,
-  transition = _a$7.transition,
-  duration$3 = _a$7.duration,
-  easing$3 = _a$7.easing;
+var _a$6 = tokensJson.semantic.motion,
+  transition = _a$6.transition,
+  duration$3 = _a$6.duration,
+  easing$3 = _a$6.easing;
 var label$1 = tokensJson.component.badge.label;
 var scaleIn$1 = keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
@@ -2235,7 +2251,7 @@ var StyledStackWrapper = styled.div.withConfig({
 var StyledHeaderWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledHeaderWrapper",
   componentId: "sc-1erp7zn-4"
-})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
+})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
 // Map trend direction to icon and color
 ])), tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
 // Map trend direction to icon and color
@@ -2386,12 +2402,12 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
+var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$f;
 
 var semantic$9 = tokensJson.semantic;
-var _a$6 = semantic$9.motion,
-  duration$2 = _a$6.duration,
-  easing$2 = _a$6.easing;
+var _a$5 = semantic$9.motion,
+  duration$2 = _a$5.duration,
+  easing$2 = _a$5.easing;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2444,7 +2460,7 @@ var StyledTextContent = styled.div.withConfig({
 var StyledRightContent = styled.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
+})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
 var StyledChevronIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2586,7 +2602,7 @@ var ListItem = function ListItem(_a) {
   }));
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
+var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
 
 // How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
 var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
@@ -2631,12 +2647,12 @@ function useInert(ref, isInert) {
   }, [ref, isInert]);
 }
 
-var _a$5 = tokensJson.semantic,
-  color$3 = _a$5.color,
-  border$5 = _a$5.border,
-  layout$1 = _a$5.spacing.layout,
-  motion$3 = _a$5.motion,
-  elevation$2 = _a$5.elevation;
+var _a$4 = tokensJson.semantic,
+  color$3 = _a$4.color,
+  border$5 = _a$4.border,
+  layout$1 = _a$4.spacing.layout,
+  motion$3 = _a$4.motion,
+  elevation$2 = _a$4.elevation;
 var slideUp = keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
 var fadeIn$2 = keyframes(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var StyledOverlay$2 = styled.div.withConfig({
@@ -2659,7 +2675,7 @@ var StyledActionSheet = styled.div.withConfig({
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
+})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -2894,7 +2910,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$7;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -3015,7 +3031,7 @@ var InputShell = styled.div.withConfig({
 var Input = styled.input.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$8.spacing.layout['7xl'], semantic$8.typography.body, semantic$8.color.text["default"], semantic$8.color.text.subdued, semantic$8.color.text.disabled);
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$8.spacing.layout['7xl'], semantic$8.typography.body, semantic$8.color.text["default"], semantic$8.color.text.subdued, semantic$8.color.text.disabled);
 var InputActions = styled.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
@@ -3034,50 +3050,56 @@ var MicButtonWrapper = styled.div.withConfig({
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"])), semantic$8.border.radius.circle);
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+])), semantic$8.border.radius.circle);
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+var ringMask = css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
 var MicListeningRing = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$8.border.width.thick, semantic$8.spacing.layout.xs, component$1.iconButton.focus.outlineOffset, semantic$8.border.radius.circle, semantic$8.color.background['interactive-subtle'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-hover'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-subtle'], function (_a) {
+})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$8.border.width.thick, semantic$8.spacing.layout.xs, component$1.iconButton.focus.outlineOffset, semantic$8.border.radius.circle, semantic$8.color.background['interactive-subtle'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-hover'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
-  return !$reducedMotion && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-9"
-})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
 var StatusText = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-10"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
+})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
 var StatusAnnouncement = styled.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-11"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject([""], [""])));
+})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
 var MeterContainer = styled.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-12"
-})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$8.spacing.layout.xs, semantic$8.spacing.layout.lg);
+})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$8.spacing.layout.xs, semantic$8.spacing.layout.lg);
 var MeterBar = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-13"
-})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$8.spacing.layout.xs, semantic$8.border.radius.xs, semantic$8.color.background.interactive, function (_a) {
+})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$8.spacing.layout.xs, semantic$8.border.radius.xs, semantic$8.color.background.interactive, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
 }, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
 var VisuallyHiddenLabel = styled.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
   componentId: "sc-fhl996-14"
-})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -3706,13 +3728,13 @@ var AgentInput = function AgentInput(_a) {
     })]
   });
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
 
 var semantic$7 = tokensJson.semantic;
 var alert = tokensJson.component.alert;
-var _a$4 = semantic$7.motion,
-  duration$1 = _a$4.duration,
-  easing$1 = _a$4.easing;
+var _a$3 = semantic$7.motion,
+  duration$1 = _a$3.duration,
+  easing$1 = _a$3.easing;
 // Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
 // Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
 var FADE_MS = parseInt(duration$1.fast, 10);
@@ -3786,7 +3808,7 @@ var StyledAlert = styled.div.withConfig({
 }, function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
-  return $isExiting && css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
+  return $isExiting && css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
 });
 var StyledIconContainer = styled.div.withConfig({
   displayName: "Alert__StyledIconContainer",
@@ -3939,13 +3961,12 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2;
+var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2;
 
-var _a$3, _b$1;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensJson.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokensJson.semantic.border["default"]);
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
@@ -4013,7 +4034,8 @@ var CardSmall = function CardSmall(_a) {
     subtitle = _a.subtitle,
     meta = _a.meta,
     href = _a.href,
-    LinkComponent = _a.linkComponent;
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
   if (!picture || !meta) {
     return null;
   }
@@ -4047,6 +4069,7 @@ var CardSmall = function CardSmall(_a) {
     })]
   });
   return jsx(CardSmallStyled, {
+    "data-testid": dataTestId,
     children: LinkComponent && href ? jsx(LinkComponent, {
       href: href,
       "aria-label": title,
@@ -4073,8 +4096,10 @@ var CardLarge = function CardLarge(_a) {
     labels = _b === void 0 ? [] : _b,
     picture = _a.picture,
     onImageClick = _a.onImageClick,
-    imageHref = _a.imageHref;
+    imageHref = _a.imageHref,
+    dataTestId = _a["data-testid"];
   return jsx(CardLargeStyled, {
+    "data-testid": dataTestId,
     children: jsxs(Stack, {
       direction: "column",
       gap: "md",
@@ -4448,6 +4473,37 @@ var CopyButton = function CopyButton(_a) {
     })
   });
 };
+var LiveRegion = styled.span.withConfig({
+  displayName: "CodeBlock__LiveRegion",
+  componentId: "sc-1p1t0kp-4"
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */])), visuallyHidden);
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
  * and expandable content for long code blocks.
@@ -4490,6 +4546,9 @@ var CodeBlock = function CodeBlock(_a) {
   var _e = useState(false),
     needsExpansion = _e[0],
     setNeedsExpansion = _e[1];
+  var _f = useState(''),
+    announcement = _f[0],
+    setAnnouncement = _f[1];
   var contentRef = useRef(null);
   // Check if content exceeds maxHeight
   useEffect(function () {
@@ -4503,17 +4562,7 @@ var CodeBlock = function CodeBlock(_a) {
       return !prev;
     });
     // Announce state change to screen readers
-    var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
-    var announcer = document.createElement('div');
-    announcer.setAttribute('aria-live', 'polite');
-    announcer.setAttribute('aria-atomic', 'true');
-    announcer.setAttribute('class', 'sr-only');
-    announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
-    announcer.textContent = announcement;
-    document.body.appendChild(announcer);
-    setTimeout(function () {
-      document.body.removeChild(announcer);
-    }, 1000);
+    setAnnouncement(isExpanded ? 'Code block collapsed' : 'Code block expanded');
   };
   var showExpandButton = maxHeight && needsExpansion;
   return jsxs(CodeBlockWrapper, {
@@ -4538,13 +4587,17 @@ var CodeBlock = function CodeBlock(_a) {
         "data-testid": "expand-button",
         children: isExpanded ? 'Show less' : 'Show more'
       })
+    }), showExpandButton && jsx(LiveRegion, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: announcement
     }), showCopyButton && jsx(CopyButton, {
       text: children,
       onCopy: onCopy
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
+var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c, templateObject_5$a;
 
 var StyledHeader$1 = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
@@ -4790,9 +4843,11 @@ var FeatureBlock = function FeatureBlock(_a) {
     onReadMore = _a.onReadMore,
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
-    readMoreText = _c === void 0 ? "Read more" : _c;
+    readMoreText = _c === void 0 ? "Read more" : _c,
+    dataTestId = _a["data-testid"];
   return jsxs(Fragment, {
     children: [jsxs(FeatureBlockStyled, {
+      "data-testid": dataTestId,
       children: [jsx(ImageWrapper, {
         children: jsx(Picture, {
           title: title,
@@ -4931,7 +4986,8 @@ var Dropdown = function Dropdown(_a) {
     className = _a.className,
     label = _a.label,
     helperText = _a.helperText,
-    error = _a.error;
+    error = _a.error,
+    dataTestId = _a["data-testid"];
   var _d = useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -5036,6 +5092,7 @@ var Dropdown = function Dropdown(_a) {
   return jsxs(DropdownContainer, {
     ref: dropdownRef,
     className: className,
+    "data-testid": dataTestId,
     children: [label && jsx("label", {
       htmlFor: dropdownId,
       style: {
@@ -5672,10 +5729,36 @@ var PageTitleStyled = styled.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
   return $hasBackButton ? tokensJson.semantic.spacing.layout.none : tokensJson.semantic.spacing.layout['7xl'];
 });
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */
 var PageTitle = function PageTitle(_a) {
   var title = _a.title,
     _b = _a.hasBackButton,
@@ -6862,13 +6945,8 @@ var StyledBadge = styled.span.withConfig({
  * />
  * ```
  */])), tokensJson.component.tabBar.badge.size, tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, tokensJson.component.tabBar.badge.typography, tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, function (props) {
-  if (props.$variant === 'pills') {
-    return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic.color.background.interactive;
-  }
-  return semantic.color.background.interactive;
-}, function (props) {
-  return props.$variant === 'pills' && props.$isActive ? semantic.color.text.inverse : semantic.color.text.inverse;
-});
+  return props.$variant === 'pills' && props.$isActive ? semantic.color.background['inverse-overlay'] : semantic.color.background.interactive;
+}, semantic.color.text.inverse);
 /**
  * TabBar component for tabbed navigation
  *
@@ -7378,6 +7456,7 @@ var Grid = function Grid(_a) {
     gapX = _a.gapX,
     gapY = _a.gapY,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(GridContainer, {
     "$cols": cols,
@@ -7385,6 +7464,7 @@ var Grid = function Grid(_a) {
     "$gapX": gapX ? gapSpacing[gapX] : undefined,
     "$gapY": gapY ? gapSpacing[gapY] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7397,7 +7477,7 @@ var GridColContainer = styled.div.withConfig({
 })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
 }, function (props) {
-  return props.$order && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+  return props.$order !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
 }, function (props) {
   return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
 }, function (props) {
@@ -7407,13 +7487,13 @@ var GridColContainer = styled.div.withConfig({
 }, function (props) {
   return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
 }, function (props) {
-  return props.$orderSm && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+  return props.$orderSm !== undefined && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
 }, function (props) {
-  return props.$orderMd && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+  return props.$orderMd !== undefined && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
 }, function (props) {
-  return props.$orderLg && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+  return props.$orderLg !== undefined && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
 }, function (props) {
-  return props.$orderXl && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+  return props.$orderXl !== undefined && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
 });
 var GridCol = function GridCol(_a) {
   var span = _a.span,
@@ -7427,6 +7507,7 @@ var GridCol = function GridCol(_a) {
     orderLg = _a.orderLg,
     orderXl = _a.orderXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(GridColContainer, {
     "$span": span,
@@ -7440,6 +7521,7 @@ var GridCol = function GridCol(_a) {
     "$orderLg": orderLg,
     "$orderXl": orderXl,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7512,6 +7594,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     gapYLg = _a.gapYLg,
     gapYXl = _a.gapYXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(ResponsiveGridContainer, {
     "$cols": cols,
@@ -7535,6 +7618,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
     "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };