@atlaskit/lozenge 13.5.7 → 13.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/lozenge
 
+## 13.6.0
+
+### Minor Changes
+
+- [`7b44d021342cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b44d021342cf) -
+  Added motion to lozenge dropdown to animate the width of the lozenge upon change. Includes
+  transitioning the background, border and text color using experimental motion design tokens. These
+  changes are behind the `platform-dst-motion-uplift` feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.5.7
 
 ### Patch Changes

package/dist/cjs/new/icon-renderer.compiled.css

@@ -0,0 +1,3 @@
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._k8m01ylx{transition-property:color}

package/dist/cjs/new/icon-renderer.js

@@ -1,3 +1,4 @@
+/* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.IconRenderer = void 0;
+require("./icon-renderer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 // Map lozenge colors to appropriate icon colors
 var getIconColor = function getIconColor(color) {
   // For semantic colors, use corresponding semantic icon colors
@@ -47,6 +52,9 @@ var getIconColor = function getIconColor(color) {
       return "var(--ds-icon-subtlest, #6B6E76)";
   }
 };
+var styles = {
+  motion: "_k8m01ylx _1oeci9qs _6fl41d08"
+};
 
 /**
  * Icon renderer for lozenge components
@@ -58,7 +66,16 @@ var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
     testId = _ref.testId,
     size = _ref.size;
   var iconColor = getIconColor(color);
-  return /*#__PURE__*/_react.default.createElement(Icon, {
+  return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.motion,
+    style: {
+      color: iconColor
+    }
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    label: "",
+    size: size,
+    testId: testId
+  })) : /*#__PURE__*/_react.default.createElement(Icon, {
     color: iconColor,
     label: "",
     size: size,

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

@@ -40,6 +40,7 @@
 ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
 ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1btozryt{text-overflow:clip}
 ._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}
@@ -48,6 +49,7 @@
 ._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}
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
 ._4uq11yqs{--icon-l-factor:0.88}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._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)}
@@ -105,6 +108,7 @@
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k8m01rje{transition-property:background-color,border-color}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}

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

@@ -11,11 +11,14 @@ 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _css = require("@atlaskit/css");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _resizingWidth = require("@atlaskit/motion/resizing-width");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _iconRenderer = _interopRequireDefault(require("./icon-renderer"));
@@ -44,9 +47,11 @@ var pressedBackgroundMapping = {
 };
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
+  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
+  textResizing: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -128,6 +133,19 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     ariaExpanded = _ref['aria-expanded'],
     ariaHaspopup = _ref['aria-haspopup'],
     ariaLabel = _ref['aria-label'];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    resizing = _useState2[0],
+    setResizing = _useState2[1];
+  var onFinishMotion = function onFinishMotion() {
+    return setResizing(false);
+  };
+  var resizingWidth = (0, _resizingWidth.useResizingWidth)({
+    duration: "var(--ds-duration-medium, 200ms)",
+    easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
+    onFinishMotion: onFinishMotion
+  });
+  var isInitialRender = (0, _react.useRef)(true);
   var isInteractive = typeof onClick === 'function';
 
   // Determine the effective color, with fallback logic for legacy appearances
@@ -147,14 +165,26 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
-  var innerContent = /*#__PURE__*/React.createElement("span", {
+  var childrenKey = typeof children === 'string' ? children : undefined;
+  (0, _react.useLayoutEffect)(function () {
+    // Ignore initial render
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
+      setResizing(true);
+    }
+  }, [childrenKey]);
+  var innerContent = /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
-    },
+    }
+  }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? resizingWidth : undefined, {
     className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
-  }, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
+  }), iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
@@ -165,7 +195,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: (0, _runtime.ax)([styles.text, spacing === 'spacious' && styles.textSpacious])
+    className: (0, _runtime.ax)([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && "".concat(testId, "--metric"),
@@ -181,7 +211,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(_pressable.default, (0, _extends2.default)({
       ref: ref,
-      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])
+      xcss: (0, _css.cx)(styles.container, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && styles.motionContainer, 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,

package/dist/es2019/new/icon-renderer.compiled.css

@@ -0,0 +1,3 @@
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._k8m01ylx{transition-property:color}

package/dist/es2019/new/icon-renderer.js

@@ -1,4 +1,9 @@
+/* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./icon-renderer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 // Map lozenge colors to appropriate icon colors
 const getIconColor = color => {
   // For semantic colors, use corresponding semantic icon colors
@@ -40,6 +45,9 @@ const getIconColor = color => {
       return "var(--ds-icon-subtlest, #6B6E76)";
   }
 };
+const styles = {
+  motion: "_k8m01ylx _1oeci9qs _6fl41d08"
+};
 
 /**
  * Icon renderer for lozenge components
@@ -52,7 +60,16 @@ export const IconRenderer = ({
   size
 }) => {
   const iconColor = getIconColor(color);
-  return /*#__PURE__*/React.createElement(Icon, {
+  return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.motion,
+    style: {
+      color: iconColor
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    testId: testId
+  })) : /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",
     size: size,

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

@@ -40,6 +40,7 @@
 ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
 ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1btozryt{text-overflow:clip}
 ._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}
@@ -48,6 +49,7 @@
 ._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}
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
 ._4uq11yqs{--icon-l-factor:0.88}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._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)}
@@ -105,6 +108,7 @@
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k8m01rje{transition-property:background-color,border-color}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}

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

@@ -3,10 +3,12 @@ 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, memo } from 'react';
+import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
 import Badge from '@atlaskit/badge';
 import { cx } from '@atlaskit/css';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { useResizingWidth } from '@atlaskit/motion/resizing-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Spinner from '@atlaskit/spinner';
 import IconRenderer from './icon-renderer';
@@ -32,9 +34,11 @@ const pressedBackgroundMapping = {
 };
 const styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
+  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
+  textResizing: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -117,6 +121,14 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   'aria-haspopup': ariaHaspopup,
   'aria-label': ariaLabel
 }, ref) => {
+  const [resizing, setResizing] = useState(false);
+  const onFinishMotion = () => setResizing(false);
+  const resizingWidth = useResizingWidth({
+    duration: "var(--ds-duration-medium, 200ms)",
+    easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
+    onFinishMotion
+  });
+  const isInitialRender = useRef(true);
   const isInteractive = typeof onClick === 'function';
 
   // Determine the effective color, with fallback logic for legacy appearances
@@ -137,14 +149,26 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
-  const innerContent = /*#__PURE__*/React.createElement("span", {
+  const childrenKey = typeof children === 'string' ? children : undefined;
+  useLayoutEffect(() => {
+    // Ignore initial render
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    if (fg('platform-dst-motion-uplift')) {
+      setResizing(true);
+    }
+  }, [childrenKey]);
+  const innerContent = /*#__PURE__*/React.createElement("span", _extends({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
-    },
+    }
+  }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
-  }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
+  }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
@@ -155,7 +179,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && `${testId}--text`,
-    className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
+    className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && `${testId}--metric`,
@@ -171,7 +195,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, _extends({
       ref: ref,
-      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])
+      xcss: cx(styles.container, fg('platform-dst-motion-uplift') && styles.motionContainer, 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,

package/dist/esm/new/icon-renderer.compiled.css

@@ -0,0 +1,3 @@
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._k8m01ylx{transition-property:color}

package/dist/esm/new/icon-renderer.js

@@ -1,4 +1,9 @@
+/* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./icon-renderer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 // Map lozenge colors to appropriate icon colors
 var getIconColor = function getIconColor(color) {
   // For semantic colors, use corresponding semantic icon colors
@@ -40,6 +45,9 @@ var getIconColor = function getIconColor(color) {
       return "var(--ds-icon-subtlest, #6B6E76)";
   }
 };
+var styles = {
+  motion: "_k8m01ylx _1oeci9qs _6fl41d08"
+};
 
 /**
  * Icon renderer for lozenge components
@@ -51,7 +59,16 @@ export var IconRenderer = function IconRenderer(_ref) {
     testId = _ref.testId,
     size = _ref.size;
   var iconColor = getIconColor(color);
-  return /*#__PURE__*/React.createElement(Icon, {
+  return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.motion,
+    style: {
+      color: iconColor
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    testId: testId
+  })) : /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",
     size: size,

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

@@ -40,6 +40,7 @@
 ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
 ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1btozryt{text-overflow:clip}
 ._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}
@@ -48,6 +49,7 @@
 ._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}
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
 ._4uq11yqs{--icon-l-factor:0.88}
+._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._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)}
@@ -105,6 +108,7 @@
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k8m01rje{transition-property:background-color,border-color}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}

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

@@ -1,15 +1,18 @@
 /* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./lozenge-base.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
 import Badge from '@atlaskit/badge';
 import { cx } from '@atlaskit/css';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { useResizingWidth } from '@atlaskit/motion/resizing-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Spinner from '@atlaskit/spinner';
 import IconRenderer from './icon-renderer';
@@ -35,9 +38,11 @@ var pressedBackgroundMapping = {
 };
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
+  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
+  textResizing: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -119,6 +124,19 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     ariaExpanded = _ref['aria-expanded'],
     ariaHaspopup = _ref['aria-haspopup'],
     ariaLabel = _ref['aria-label'];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    resizing = _useState2[0],
+    setResizing = _useState2[1];
+  var onFinishMotion = function onFinishMotion() {
+    return setResizing(false);
+  };
+  var resizingWidth = useResizingWidth({
+    duration: "var(--ds-duration-medium, 200ms)",
+    easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
+    onFinishMotion: onFinishMotion
+  });
+  var isInitialRender = useRef(true);
   var isInteractive = typeof onClick === 'function';
 
   // Determine the effective color, with fallback logic for legacy appearances
@@ -138,14 +156,26 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
-  var innerContent = /*#__PURE__*/React.createElement("span", {
+  var childrenKey = typeof children === 'string' ? children : undefined;
+  useLayoutEffect(function () {
+    // Ignore initial render
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    if (fg('platform-dst-motion-uplift')) {
+      setResizing(true);
+    }
+  }, [childrenKey]);
+  var innerContent = /*#__PURE__*/React.createElement("span", _extends({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
-    },
+    }
+  }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
-  }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
+  }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
@@ -156,7 +186,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
+    className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && "".concat(testId, "--metric"),
@@ -172,7 +202,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, _extends({
       ref: ref,
-      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])
+      xcss: cx(styles.container, fg('platform-dst-motion-uplift') && styles.motionContainer, 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,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.5.7",
+	"version": "13.6.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -62,6 +62,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/icon": "^34.0.0",
+		"@atlaskit/motion": "^5.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/spinner": "^19.1.0",