@atlaskit/lozenge 13.4.1 → 13.4.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/lozenge
 
+## 13.4.2
+
+### Patch Changes
+
+- [`6d33a20db82a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d33a20db82a1) -
+  [ux] Added support for trailing metrics on semantic lozenges via the `trailingMetric` prop, with
+  optional `trailingMetricAppearance` override (including `inverse`). Not supported for accent
+  lozenges.
+- Updated dependencies
+
 ## 13.4.1
 
 ### Patch Changes

package/dist/cjs/new/lozenge-base.compiled.css

@@ -6,17 +6,15 @@
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
-._18zr1b66{padding-inline:var(--ds-space-050,4px)}
-._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
-._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
+._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}._111i1h4e{--icon-pressed-l-factor:0.7}
 ._13muu67f{--cm-border-color:#fff}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._168qx19p{--cm-icon-value:20%}
 ._18dicjiy{--border-hovered-l-factor:1.2}
 ._18m915vq{overflow-y:hidden}
+._1axm1bqy:active [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color-pressed)}
 ._1b3i17hp{--icon-color:var(--ds-icon-accent-green,#22a06b)}
 ._1b3i1cv2{--icon-color:var(--ds-icon-subtlest,#6b6e76)}
 ._1b3i1diz{--icon-color:var(--ds-icon-accent-gray,#7d818a)}
@@ -33,12 +31,25 @@
 ._1b3iuq3u{--icon-color:var(--ds-icon-accent-purple,#af59e1)}
 ._1b3iv8hk{--icon-color:var(--ds-icon-accent-magenta,#cd519d)}
 ._1b3iyhbg{--icon-color:var(--ds-icon-information,#357de8)}
+._1bah1h6o{justify-content:center}
+._1bn814je{--badge-background-color:#b7b9be}
+._1bn85usi{--badge-background-color:var(--ds-background-discovery-subtler-pressed,#d8a0f7)}
+._1bn8ar1y{--badge-background-color:var(--ds-background-information-subtler-pressed,#8fb8f6)}
+._1bn8bkku{--badge-background-color:var(--ds-background-warning-subtler-pressed,#fbc828)}
+._1bn8d6jc{--badge-background-color:var(--ds-background-success-subtler-pressed,#b3df72)}
+._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
+._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1ftrbpke [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color)}
 ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))}
 ._1iel6xdd{--icon-hovered-l-factor:0.8}
 ._1k671038{--border-l-factor:1.33}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeviql{min-height:2rem}
 ._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important}
@@ -60,10 +71,18 @@
 ._3wu0v30g{--border-color:var(--ds-border-discovery,#af59e1)}
 ._3wu0vbh5{--border-color:var(--ds-border-information,#357de8)}
 ._46v5hwvj{--cm-icon-pressed-value:40%}
+._4ayg18vq{--badge-background-color-pressed:var(--ds-background-discovery-pressed,#e3bdfa)}
+._4ayg1c1j{--badge-background-color-pressed:var(--ds-background-information-pressed,#adcbfb)}
+._4ayg1fkg{--badge-background-color-pressed:#dddee1}
+._4ayg1r4b{--badge-background-color-pressed:var(--ds-background-danger-pressed,#ffb8b2)}
+._4ayg1wl5{--badge-background-color-pressed:var(--ds-background-success-pressed,#bde97c)}
+._4aygvuon{--badge-background-color-pressed:var(--ds-surface,#fff)}
+._4aygzr32{--badge-background-color-pressed:var(--ds-background-warning-pressed,#fbd779)}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
 ._4uq11yqs{--icon-l-factor:0.88}
-._80omtlke{cursor:pointer}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
 ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)}
@@ -81,12 +100,18 @@
 ._bfhkysee{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
 ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
 ._bg3q9by0{--cm-border-pressed-value:10%}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
 ._m71tr3uz{--cm-icon-color:#000}
 ._o5721q9c{white-space:nowrap}
 ._oe6mmko7{--cm-border-value:45%}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._syaz12v7{color:var(--ds-text-accent-teal-bolder,#164555)}
 ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
 ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}
@@ -104,8 +129,14 @@
 ._syazhwvp{color:var(--ds-text-accent-red-bolder,#5d1f1a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
+._tzy4idpf{opacity:0}
+._u7coze3t{inset-block-end:var(--ds-space-0,0)}
 ._vchhusvi{box-sizing:border-box}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4ti303w{padding-inline-end:.0625rem}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._ylgq1r5k{--cm-border-hovered-value:30%}
+[data-color-mode=dark] ._16burnys{--badge-background-color-pressed:#3d3f43}
 [data-color-mode=dark] ._189qkb7n{--icon-l-factor:1}
 [data-color-mode=dark] ._18mn783i{--icon-pressed-l-factor:1.37}
 [data-color-mode=dark] ._196p1btq{--icon-hovered-l-factor:1.15}
@@ -113,14 +144,11 @@
 [data-color-mode=dark] ._1t75u67f{--cm-icon-color:#fff}
 [data-color-mode=dark] ._aewt1n8h{--cm-icon-pressed-value:70%}
 [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
+[data-color-mode=dark] ._iymy8hz0{--badge-background-color:#4b4d51}
 [data-color-mode=dark] ._l0666xdd{--border-hovered-l-factor:0.8}
 [data-color-mode=dark] ._ockq1r5k{--cm-icon-hovered-value:30%}
 [data-color-mode=dark] ._pclnn8xv{--border-pressed-l-factor:0.9}
 [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
-._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
-._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
-._ra3xnqa1:focus-visible{outline-style:solid}
 ._4cvx7ddx:hover{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-hovered-value))!important}
 ._irr315aw:hover{background-color:var(--ds-background-information-subtler-hovered,#adcbfb)}
 ._irr31axx:hover{background-color:var(--ds-background-accent-magenta-subtler-hovered,#fcb6e1)}

package/dist/cjs/new/lozenge-base.js

@@ -11,10 +11,13 @@ require("./lozenge-base.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _css = require("@atlaskit/css");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _iconRenderer = _interopRequireDefault(require("./icon-renderer"));
 var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -40,12 +43,21 @@ var pressedBackgroundMapping = {
   'accent-gray': "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
 };
 var styles = {
-  container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
-  containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
-  containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
+  container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
+  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
+  containerBadgePadding: "_y4ti303w",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
+  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
+  metricBadgeWrapper: "_1e0c1txw",
+  'metric.semantic.success': "_1bn8d6jc _4ayg1wl5",
+  'metric.semantic.warning': "_1bn8bkku _4aygzr32",
+  'metric.semantic.danger': "_1bn8jkmi _4ayg1r4b",
+  'metric.semantic.information': "_1bn8ar1y _4ayg1c1j",
+  'metric.semantic.neutral': "_1bn814je _4ayg1fkg _iymy8hz0 _16burnys",
+  'metric.semantic.discovery': "_1bn85usi _4ayg18vq",
+  'metric.inverse': "_1bn8vuon _4aygvuon",
   'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
   'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
   'semantic.danger': "_1b3is4qr _3wu01bqt _bfhk18wg _syaz1blx",
@@ -80,7 +92,12 @@ var styles = {
   'interactive.accent.gray': "_irr3wejn _1di618ut",
   iconBorderFilter: "_1h6dzs9d _4uq11yqs _1k671038 _m71tr3uz _13muu67f _168qx19p _oe6mmko7 _189qkb7n _u8p61h4e _1t75u67f _hg5mr3uz _1f28f1ug _1xe213rw _1easxmrh _1r9r1ss3",
   iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha",
-  containerSelected: "_1xe213kw"
+  containerSelected: "_1xe213kw",
+  content: "_zulp1b66 _1e0c116y _4cvr1h6o",
+  contentSpacious: "_zulp12x7",
+  loadingContent: "_tzy4idpf",
+  containerBadge: "_1ftrbpke",
+  containerBadgeInteractive: "_1axm1bqy"
 };
 
 /**
@@ -94,11 +111,15 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     testId = _ref.testId,
     appearance = _ref.appearance,
     iconBefore = _ref.iconBefore,
+    trailingMetric = _ref.trailingMetric,
+    trailingMetricAppearance = _ref.trailingMetricAppearance,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     onClick = _ref.onClick,
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
@@ -114,11 +135,17 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   var interactiveStyleKey = "interactive.".concat(category, ".").concat(key);
   var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
   var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
+  var resolvedTrailingMetricAppearance = trailingMetricAppearance ? trailingMetricAppearance === 'inverse' ? 'inverse' : (0, _utils.resolveLozengeColor)(trailingMetricAppearance) : resolvedColor;
+  var metricBadgeAppearance = resolvedTrailingMetricAppearance === 'inverse' ? 'inverse' : resolvedTrailingMetricAppearance != null && resolvedTrailingMetricAppearance.startsWith('accent-') ? 'neutral' : resolvedTrailingMetricAppearance !== null && resolvedTrailingMetricAppearance !== void 0 ? resolvedTrailingMetricAppearance : 'neutral';
+  var metricStyleKey = resolvedTrailingMetricAppearance === 'inverse' ? 'metric.inverse' : resolvedTrailingMetricAppearance != null && !resolvedTrailingMetricAppearance.startsWith('accent-') ? "metric.semantic.".concat((0, _utils.getThemeStyles)(resolvedTrailingMetricAppearance).key) : 'metric.semantic.neutral';
   var commonStyleOverrides = {
     backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
-  var innerContent = /*#__PURE__*/React.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
+  var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
+  var innerContent = /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
+  }, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
@@ -130,34 +157,53 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     },
     "data-testid": testId && "".concat(testId, "--text"),
     className: (0, _runtime.ax)([styles.text, spacing === 'spacious' && styles.textSpacious])
-  }, children), isInteractive && /*#__PURE__*/React.createElement(_chevronDown.default, {
+  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
+    "data-lozenge-metric-wrapper": true,
+    "data-testid": testId && "".concat(testId, "--metric"),
+    className: (0, _runtime.ax)([styles.metricBadgeWrapper])
+  }, /*#__PURE__*/React.createElement(_badge.default, {
+    appearance: metricBadgeAppearance
+  }, trailingMetric)), isInteractive && /*#__PURE__*/React.createElement(_chevronDown.default, {
     label: "",
     size: "small",
     color: 'currentColor',
     testId: testId && "".concat(testId, "--chevron")
   }));
   if (isInteractive) {
-    return /*#__PURE__*/React.createElement(_pressable.default, {
+    return /*#__PURE__*/React.createElement(_pressable.default, (0, _extends2.default)({
       ref: ref,
-      xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
-      onClick: onClick,
+      xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
+    }, isLoading && {
+      'aria-busy': true,
+      'aria-disabled': true,
+      isDisabled: true
+    }, {
+      "aria-label": isLoading ? 'Loading' : undefined,
+      onClick: isLoading ? undefined : onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         border: "solid ".concat("var(--ds-border-width, 1px)", " ", isSelected ? 'oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h) !important' : 'transparent'),
-        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined
+        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined,
+        cursor: isLoading ? 'progress' : 'pointer'
       }),
       testId: testId,
       analyticsContext: analyticsContext,
       interactionName: interactionName,
       componentName: "LozengeDropdownTrigger"
-    }, innerContent);
+    }), innerContent, isLoading && /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)([styles.loadingOverlay])
+    }, /*#__PURE__*/React.createElement(_spinner.default, {
+      size: spacing === 'spacious' ? 'small' : 'xsmall',
+      label: ", Loading",
+      testId: testId ? "".concat(testId, "--loading-spinner") : undefined
+    })));
   }
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
     style: commonStyleOverrides,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
+    className: (0, _runtime.ax)([styles.container, spacing === 'spacious' && styles.containerSpacious, spacing !== 'spacious' && hasTrailingMetric && styles.containerBadgePadding, styles[colorStyleKey], hasTrailingMetric && styles[metricStyleKey], styles.iconBorderFilter, styles.containerBadge])
   }, innerContent);
 }));
 var _default = exports.default = LozengeBase;

package/dist/cjs/new/lozenge-dropdown-trigger.js

@@ -10,6 +10,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _lozengeBase = _interopRequireDefault(require("./lozenge-base"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -33,8 +34,12 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     iconBefore = _ref.iconBefore,
+    trailingMetric = _ref.trailingMetric,
+    trailingMetricAppearance = _ref.trailingMetricAppearance,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
     _ref$onClick = _ref.onClick,
@@ -42,21 +47,25 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
     interactionName = _ref.interactionName;
-  return /*#__PURE__*/React.createElement(_lozengeBase.default, {
-    ref: ref,
+  var baseProps = {
     appearance: appearance,
     spacing: spacing,
     iconBefore: iconBefore,
+    trailingMetric: trailingMetric,
+    trailingMetricAppearance: trailingMetricAppearance,
     isSelected: isSelected,
-    maxWidth: maxWidth
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
+    isLoading: isLoading,
+    maxWidth: maxWidth,
     style: style,
     testId: testId,
     onClick: onClick,
     analyticsContext: analyticsContext,
-    interactionName: interactionName
-  }, children);
+    interactionName: interactionName,
+    children: children
+  };
+  return /*#__PURE__*/React.createElement(_lozengeBase.default, (0, _extends2.default)({
+    ref: ref
+  }, baseProps), children);
 }));
 LozengeDropdownTrigger.displayName = 'LozengeDropdownTrigger';
 var _default = exports.default = LozengeDropdownTrigger;

package/dist/cjs/new/lozenge.js

@@ -30,17 +30,21 @@ var Lozenge = function Lozenge(_ref) {
     style = _ref.style,
     testId = _ref.testId,
     children = _ref.children,
-    iconBefore = _ref.iconBefore;
-  return /*#__PURE__*/React.createElement(_lozengeBase.default, {
+    iconBefore = _ref.iconBefore,
+    trailingMetric = _ref.trailingMetric,
+    trailingMetricAppearance = _ref.trailingMetricAppearance;
+  var baseProps = {
     appearance: appearance,
     spacing: spacing,
     iconBefore: iconBefore,
-    maxWidth: maxWidth
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
+    trailingMetric: trailingMetric,
+    trailingMetricAppearance: trailingMetricAppearance,
+    maxWidth: maxWidth,
     style: style,
-    testId: testId
-  }, children);
+    testId: testId,
+    children: children
+  };
+  return /*#__PURE__*/React.createElement(_lozengeBase.default, baseProps, children);
 };
 Lozenge.displayName = 'Lozenge';
 var _default = exports.default = Lozenge;

package/dist/es2019/new/lozenge-base.compiled.css

@@ -6,17 +6,15 @@
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
-._18zr1b66{padding-inline:var(--ds-space-050,4px)}
-._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
-._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
+._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}._111i1h4e{--icon-pressed-l-factor:0.7}
 ._13muu67f{--cm-border-color:#fff}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._168qx19p{--cm-icon-value:20%}
 ._18dicjiy{--border-hovered-l-factor:1.2}
 ._18m915vq{overflow-y:hidden}
+._1axm1bqy:active [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color-pressed)}
 ._1b3i17hp{--icon-color:var(--ds-icon-accent-green,#22a06b)}
 ._1b3i1cv2{--icon-color:var(--ds-icon-subtlest,#6b6e76)}
 ._1b3i1diz{--icon-color:var(--ds-icon-accent-gray,#7d818a)}
@@ -33,12 +31,25 @@
 ._1b3iuq3u{--icon-color:var(--ds-icon-accent-purple,#af59e1)}
 ._1b3iv8hk{--icon-color:var(--ds-icon-accent-magenta,#cd519d)}
 ._1b3iyhbg{--icon-color:var(--ds-icon-information,#357de8)}
+._1bah1h6o{justify-content:center}
+._1bn814je{--badge-background-color:#b7b9be}
+._1bn85usi{--badge-background-color:var(--ds-background-discovery-subtler-pressed,#d8a0f7)}
+._1bn8ar1y{--badge-background-color:var(--ds-background-information-subtler-pressed,#8fb8f6)}
+._1bn8bkku{--badge-background-color:var(--ds-background-warning-subtler-pressed,#fbc828)}
+._1bn8d6jc{--badge-background-color:var(--ds-background-success-subtler-pressed,#b3df72)}
+._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
+._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1ftrbpke [data-lozenge-metric-wrapper]>span:first-of-type{background-color:var(--badge-background-color)}
 ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))}
 ._1iel6xdd{--icon-hovered-l-factor:0.8}
 ._1k671038{--border-l-factor:1.33}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeviql{min-height:2rem}
 ._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important}
@@ -60,10 +71,18 @@
 ._3wu0v30g{--border-color:var(--ds-border-discovery,#af59e1)}
 ._3wu0vbh5{--border-color:var(--ds-border-information,#357de8)}
 ._46v5hwvj{--cm-icon-pressed-value:40%}
+._4ayg18vq{--badge-background-color-pressed:var(--ds-background-discovery-pressed,#e3bdfa)}
+._4ayg1c1j{--badge-background-color-pressed:var(--ds-background-information-pressed,#adcbfb)}
+._4ayg1fkg{--badge-background-color-pressed:#dddee1}
+._4ayg1r4b{--badge-background-color-pressed:var(--ds-background-danger-pressed,#ffb8b2)}
+._4ayg1wl5{--badge-background-color-pressed:var(--ds-background-success-pressed,#bde97c)}
+._4aygvuon{--badge-background-color-pressed:var(--ds-surface,#fff)}
+._4aygzr32{--badge-background-color-pressed:var(--ds-background-warning-pressed,#fbd779)}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
 ._4uq11yqs{--icon-l-factor:0.88}
-._80omtlke{cursor:pointer}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
 ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)}
@@ -81,12 +100,18 @@
 ._bfhkysee{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
 ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
 ._bg3q9by0{--cm-border-pressed-value:10%}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
 ._m71tr3uz{--cm-icon-color:#000}
 ._o5721q9c{white-space:nowrap}
 ._oe6mmko7{--cm-border-value:45%}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._syaz12v7{color:var(--ds-text-accent-teal-bolder,#164555)}
 ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
 ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}
@@ -104,8 +129,14 @@
 ._syazhwvp{color:var(--ds-text-accent-red-bolder,#5d1f1a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
+._tzy4idpf{opacity:0}
+._u7coze3t{inset-block-end:var(--ds-space-0,0)}
 ._vchhusvi{box-sizing:border-box}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4ti303w{padding-inline-end:.0625rem}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._ylgq1r5k{--cm-border-hovered-value:30%}
+[data-color-mode=dark] ._16burnys{--badge-background-color-pressed:#3d3f43}
 [data-color-mode=dark] ._189qkb7n{--icon-l-factor:1}
 [data-color-mode=dark] ._18mn783i{--icon-pressed-l-factor:1.37}
 [data-color-mode=dark] ._196p1btq{--icon-hovered-l-factor:1.15}
@@ -113,14 +144,11 @@
 [data-color-mode=dark] ._1t75u67f{--cm-icon-color:#fff}
 [data-color-mode=dark] ._aewt1n8h{--cm-icon-pressed-value:70%}
 [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
+[data-color-mode=dark] ._iymy8hz0{--badge-background-color:#4b4d51}
 [data-color-mode=dark] ._l0666xdd{--border-hovered-l-factor:0.8}
 [data-color-mode=dark] ._ockq1r5k{--cm-icon-hovered-value:30%}
 [data-color-mode=dark] ._pclnn8xv{--border-pressed-l-factor:0.9}
 [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
-._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
-._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
-._ra3xnqa1:focus-visible{outline-style:solid}
 ._4cvx7ddx:hover{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-hovered-value))!important}
 ._irr315aw:hover{background-color:var(--ds-background-information-subtler-hovered,#adcbfb)}
 ._irr31axx:hover{background-color:var(--ds-background-accent-magenta-subtler-hovered,#fcb6e1)}

package/dist/es2019/new/lozenge-base.js

@@ -1,11 +1,14 @@
 /* lozenge-base.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./lozenge-base.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef, Fragment, memo } from 'react';
+import { forwardRef, memo } from 'react';
+import Badge from '@atlaskit/badge';
 import { cx } from '@atlaskit/css';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import Pressable from '@atlaskit/primitives/pressable';
+import Spinner from '@atlaskit/spinner';
 import IconRenderer from './icon-renderer';
 import { getThemeStyles, resolveLozengeColor } from './utils';
 // Get the pressed background color for the selected lozenge dropdown trigger
@@ -28,12 +31,21 @@ const pressedBackgroundMapping = {
   'accent-gray': "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
 };
 const styles = {
-  container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
-  containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
-  containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
+  container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
+  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
+  containerBadgePadding: "_y4ti303w",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
+  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
+  metricBadgeWrapper: "_1e0c1txw",
+  'metric.semantic.success': "_1bn8d6jc _4ayg1wl5",
+  'metric.semantic.warning': "_1bn8bkku _4aygzr32",
+  'metric.semantic.danger': "_1bn8jkmi _4ayg1r4b",
+  'metric.semantic.information': "_1bn8ar1y _4ayg1c1j",
+  'metric.semantic.neutral': "_1bn814je _4ayg1fkg _iymy8hz0 _16burnys",
+  'metric.semantic.discovery': "_1bn85usi _4ayg18vq",
+  'metric.inverse': "_1bn8vuon _4aygvuon",
   'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
   'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
   'semantic.danger': "_1b3is4qr _3wu01bqt _bfhk18wg _syaz1blx",
@@ -68,7 +80,12 @@ const styles = {
   'interactive.accent.gray': "_irr3wejn _1di618ut",
   iconBorderFilter: "_1h6dzs9d _4uq11yqs _1k671038 _m71tr3uz _13muu67f _168qx19p _oe6mmko7 _189qkb7n _u8p61h4e _1t75u67f _hg5mr3uz _1f28f1ug _1xe213rw _1easxmrh _1r9r1ss3",
   iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha",
-  containerSelected: "_1xe213kw"
+  containerSelected: "_1xe213kw",
+  content: "_zulp1b66 _1e0c116y _4cvr1h6o",
+  contentSpacious: "_zulp12x7",
+  loadingContent: "_tzy4idpf",
+  containerBadge: "_1ftrbpke",
+  containerBadgeInteractive: "_1axm1bqy"
 };
 
 /**
@@ -82,10 +99,14 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   appearance,
   iconBefore,
+  trailingMetric,
+  trailingMetricAppearance,
   maxWidth = 200,
   spacing = 'default',
   isSelected,
   // for dropdown trigger
+  isLoading = false,
+  // for dropdown trigger
   onClick,
   // for dropdown trigger
   style,
@@ -104,11 +125,17 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const interactiveStyleKey = `interactive.${category}.${key}`;
   const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
   const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
+  const resolvedTrailingMetricAppearance = trailingMetricAppearance ? trailingMetricAppearance === 'inverse' ? 'inverse' : resolveLozengeColor(trailingMetricAppearance) : resolvedColor;
+  const metricBadgeAppearance = resolvedTrailingMetricAppearance === 'inverse' ? 'inverse' : resolvedTrailingMetricAppearance != null && resolvedTrailingMetricAppearance.startsWith('accent-') ? 'neutral' : resolvedTrailingMetricAppearance !== null && resolvedTrailingMetricAppearance !== void 0 ? resolvedTrailingMetricAppearance : 'neutral';
+  const metricStyleKey = resolvedTrailingMetricAppearance === 'inverse' ? 'metric.inverse' : resolvedTrailingMetricAppearance != null && !resolvedTrailingMetricAppearance.startsWith('accent-') ? `metric.semantic.${getThemeStyles(resolvedTrailingMetricAppearance).key}` : 'metric.semantic.neutral';
   const commonStyleOverrides = {
     backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
-  const innerContent = /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
+  const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
+  const innerContent = /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
+  }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
@@ -120,36 +147,55 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
     "data-testid": testId && `${testId}--text`,
     className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
-  }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
+  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
+    "data-lozenge-metric-wrapper": true,
+    "data-testid": testId && `${testId}--metric`,
+    className: ax([styles.metricBadgeWrapper])
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: metricBadgeAppearance
+  }, trailingMetric)), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small",
     color: 'currentColor',
     testId: testId && `${testId}--chevron`
   }));
   if (isInteractive) {
-    return /*#__PURE__*/React.createElement(Pressable, {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
       ref: ref,
-      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
-      onClick: onClick,
+      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
+    }, isLoading && {
+      'aria-busy': true,
+      'aria-disabled': true,
+      isDisabled: true
+    }, {
+      "aria-label": isLoading ? 'Loading' : undefined,
+      onClick: isLoading ? undefined : onClick,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ...commonStyleOverrides,
         // Specified because Pressable has a default border:none which overrides the border specified on the container
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         border: `solid ${"var(--ds-border-width, 1px)"} ${isSelected ? 'oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h) !important' : 'transparent'}`,
-        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined
+        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined,
+        cursor: isLoading ? 'progress' : 'pointer'
       },
       testId: testId,
       analyticsContext: analyticsContext,
       interactionName: interactionName,
       componentName: "LozengeDropdownTrigger"
-    }, innerContent);
+    }), innerContent, isLoading && /*#__PURE__*/React.createElement("span", {
+      className: ax([styles.loadingOverlay])
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: spacing === 'spacious' ? 'small' : 'xsmall',
+      label: ", Loading",
+      testId: testId ? `${testId}--loading-spinner` : undefined
+    })));
   }
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
     style: commonStyleOverrides,
     "data-testid": testId,
-    className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
+    className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, spacing !== 'spacious' && hasTrailingMetric && styles.containerBadgePadding, styles[colorStyleKey], hasTrailingMetric && styles[metricStyleKey], styles.iconBorderFilter, styles.containerBadge])
   }, innerContent);
 }));
 export default LozengeBase;