@atlaskit/editor-toolbar 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-toolbar
 
+## 0.5.0
+
+### Minor Changes
+
+- [`bf3ab0c552ba7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf3ab0c552ba7) -
+  [ux] ED-29000 Add keyboard navigation to colour palette and minor UI fixes
+
+### Patch Changes
+
+- [`4ef462fecb522`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ef462fecb522) -
+  [ux] [ED-29003] Register loom component as a dropdown menu item in overflow menu
+- Updated dependencies
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -226,6 +226,12 @@ Object.defineProperty(exports, "ListNumberedIcon", {
     return _ListNumberedIcon.ListNumberedIcon;
   }
 });
+Object.defineProperty(exports, "LoomIcon", {
+  enumerable: true,
+  get: function get() {
+    return _LoomIcon.LoomIcon;
+  }
+});
 Object.defineProperty(exports, "MentionIcon", {
   enumerable: true,
   get: function get() {
@@ -496,6 +502,7 @@ var _TaskIcon = require("./ui/icons/TaskIcon");
 var _UndoIcon = require("./ui/icons/UndoIcon");
 var _RedoIcon = require("./ui/icons/RedoIcon");
 var _HistoryIcon = require("./ui/icons/HistoryIcon");
+var _LoomIcon = require("./ui/icons/LoomIcon");
 var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
 var _utils = require("./ui/ColorPalette/utils");
 var _uiContext = require("./hooks/ui-context");

package/dist/cjs/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,6 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

package/dist/cjs/ui/ColorPalette/Color.js

@@ -51,7 +51,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: label
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: (0, _runtime.ax)(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -62,7 +62,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
       border: "1px solid ".concat(borderColor),

package/dist/cjs/ui/ColorPalette/index.js

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _chromatism = _interopRequireDefault(require("chromatism"));
 var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tokens = require("@atlaskit/tokens");
 var _Color = require("./Color");
 var _getColorMessage = _interopRequireDefault(require("./getColorMessage"));
@@ -28,7 +29,7 @@ var styles = {
  *
  * @param color color string, supports HEX, RGB, RGBA etc.
  * @param useIconToken boolean, describes if a token should be used for the icon color
- * @return Highest contrast color in pool
+ * @returns Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
   var tokenVal = (0, _utils.getTokenCSSVariableValue)(color);
@@ -75,15 +76,203 @@ var ColorPalette = function ColorPalette(_ref) {
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     tokenTheme = _useThemeObserver.colorMode;
   var useIconToken = !!hexToPaletteColor;
+
+  // Refs for keyboard navigation
+  var paletteRef = (0, _react.useRef)(null);
+  var currentFocusRef = (0, _react.useRef)({
+    row: 0,
+    col: 0
+  });
   var colorsPerRow = (0, _react.useMemo)(function () {
     return (0, _utils.getColorsPerRowFromPalette)(palette, cols);
   }, [palette, cols]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row) {
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      xcss: styles.paletteWrapper,
+
+  // Get initial focus position based on selected color
+  var _useMemo = (0, _react.useMemo)(function () {
+      return (0, _utils.getSelectedRowAndColumnFromPalette)(palette, selectedColor, cols);
+    }, [palette, selectedColor, cols]),
+    selectedRowIndex = _useMemo.selectedRowIndex,
+    selectedColumnIndex = _useMemo.selectedColumnIndex;
+
+  // Focus management utility
+  var focusColorAt = (0, _react.useCallback)(function (row, col) {
+    var _rowElement$children$, _rowElement$children$2;
+    if (!paletteRef.current) {
+      return;
+    }
+    var rowElement = paletteRef.current.children[row];
+    if (!(rowElement instanceof HTMLElement)) {
+      return;
+    }
+    var colorButtonCandidate = (_rowElement$children$ = rowElement.children[col]) === null || _rowElement$children$ === void 0 || (_rowElement$children$2 = _rowElement$children$.querySelector) === null || _rowElement$children$2 === void 0 ? void 0 : _rowElement$children$2.call(_rowElement$children$, 'button');
+    var colorButton = colorButtonCandidate instanceof HTMLButtonElement ? colorButtonCandidate : null;
+    if (colorButton) {
+      colorButton.focus();
+      currentFocusRef.current = {
+        row: row,
+        col: col
+      };
+    }
+  }, []);
+
+  // Initialize focus position and handle autofocus
+  (0, _react.useEffect)(function () {
+    if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+      return;
+    }
+    if (selectedRowIndex >= 0 && selectedColumnIndex >= 0) {
+      currentFocusRef.current = {
+        row: selectedRowIndex,
+        col: selectedColumnIndex
+      };
+    } else {
+      currentFocusRef.current = {
+        row: 0,
+        col: 0
+      };
+    }
+  }, [selectedRowIndex, selectedColumnIndex]);
+
+  // Keyboard navigation handler
+  var handleKeyDown = (0, _react.useCallback)(function (value, label, event) {
+    var _colorsPerRow$row;
+    var _currentFocusRef$curr = currentFocusRef.current,
+      row = _currentFocusRef$curr.row,
+      col = _currentFocusRef$curr.col;
+    var maxRow = colorsPerRow.length - 1;
+    var maxCol = ((_colorsPerRow$row = colorsPerRow[row]) === null || _colorsPerRow$row === void 0 ? void 0 : _colorsPerRow$row.length) - 1 || 0;
+    switch (event.key) {
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          if (col < maxCol) {
+            focusColorAt(row, col + 1);
+          } else if (row < maxRow) {
+            // Move to first color of next row
+            focusColorAt(row + 1, 0);
+          } else {
+            // Wrap to first color of first row
+            focusColorAt(0, 0);
+          }
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          event.preventDefault();
+          if (col > 0) {
+            focusColorAt(row, col - 1);
+          } else if (row > 0) {
+            var _colorsPerRow;
+            // Move to last color of previous row
+            var prevRowMaxCol = ((_colorsPerRow = colorsPerRow[row - 1]) === null || _colorsPerRow === void 0 ? void 0 : _colorsPerRow.length) - 1 || 0;
+            focusColorAt(row - 1, prevRowMaxCol);
+          } else {
+            var _colorsPerRow$maxRow;
+            // Wrap to last color of last row
+            var lastRowMaxCol = ((_colorsPerRow$maxRow = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow === void 0 ? void 0 : _colorsPerRow$maxRow.length) - 1 || 0;
+            focusColorAt(maxRow, lastRowMaxCol);
+          }
+          break;
+        }
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          if (row < maxRow) {
+            var _colorsPerRow2;
+            // Move to same column in next row, or last available column
+            var nextRowMaxCol = ((_colorsPerRow2 = colorsPerRow[row + 1]) === null || _colorsPerRow2 === void 0 ? void 0 : _colorsPerRow2.length) - 1 || 0;
+            var targetCol = Math.min(col, nextRowMaxCol);
+            focusColorAt(row + 1, targetCol);
+          } else {
+            var _colorsPerRow$;
+            // Wrap to same column in first row
+            var firstRowMaxCol = ((_colorsPerRow$ = colorsPerRow[0]) === null || _colorsPerRow$ === void 0 ? void 0 : _colorsPerRow$.length) - 1 || 0;
+            var _targetCol = Math.min(col, firstRowMaxCol);
+            focusColorAt(0, _targetCol);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          if (row > 0) {
+            var _colorsPerRow3;
+            // Move to same column in previous row, or last available column
+            var _prevRowMaxCol = ((_colorsPerRow3 = colorsPerRow[row - 1]) === null || _colorsPerRow3 === void 0 ? void 0 : _colorsPerRow3.length) - 1 || 0;
+            var _targetCol2 = Math.min(col, _prevRowMaxCol);
+            focusColorAt(row - 1, _targetCol2);
+          } else {
+            var _colorsPerRow$maxRow2;
+            // Wrap to same column in last row
+            var _lastRowMaxCol = ((_colorsPerRow$maxRow2 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow2 === void 0 ? void 0 : _colorsPerRow$maxRow2.length) - 1 || 0;
+            var _targetCol3 = Math.min(col, _lastRowMaxCol);
+            focusColorAt(maxRow, _targetCol3);
+          }
+          break;
+        }
+      case 'Home':
+        {
+          event.preventDefault();
+          focusColorAt(row, 0);
+          break;
+        }
+      case 'End':
+        {
+          event.preventDefault();
+          focusColorAt(row, maxCol);
+          break;
+        }
+      case 'PageUp':
+        {
+          event.preventDefault();
+          focusColorAt(0, col);
+          break;
+        }
+      case 'PageDown':
+        {
+          var _colorsPerRow$maxRow3;
+          event.preventDefault();
+          var _lastRowMaxCol2 = ((_colorsPerRow$maxRow3 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow3 === void 0 ? void 0 : _colorsPerRow$maxRow3.length) - 1 || 0;
+          var _targetCol4 = Math.min(col, _lastRowMaxCol2);
+          focusColorAt(maxRow, _targetCol4);
+          break;
+        }
+      case 'Tab':
+        {
+          // Allow Tab to move to next focusable element (don't prevent default)
+          // This will allow Tab to move between color palettes
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+      case 'Enter':
+      case ' ':
+        {
+          event.preventDefault();
+          onClick(value, label);
+          break;
+        }
+      default:
+        {
+          // Pass through to custom onKeyDown handler if provided
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+    }
+  }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_compiled.Grid, {
+    gap: "space.050",
+    ref: paletteRef,
+    role: "group"
+  }, colorsPerRow.map(function (row, rowIndex) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      rowSpace: "space.050",
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
-    }, row.map(function (_ref2) {
+    }, row.map(function (_ref2, colIndex) {
       var value = _ref2.value,
         label = _ref2.label,
         border = _ref2.border,
@@ -91,6 +280,51 @@ var ColorPalette = function ColorPalette(_ref) {
         decorator = _ref2.decorator;
       var tooltipMessage = message;
 
+      // Override with theme-specific tooltip messages if provided
+      if (paletteColorTooltipMessages) {
+        if (tokenTheme === 'dark') {
+          tooltipMessage = (0, _getColorMessage.default)(paletteColorTooltipMessages.dark, value.toUpperCase());
+        }
+        if (tokenTheme === 'light') {
+          tooltipMessage = (0, _getColorMessage.default)(paletteColorTooltipMessages.light, value.toUpperCase());
+        }
+      }
+
+      // Determine if this color should be focusable
+      var isSelectedColor = value === selectedColor;
+      var isFirstColor = rowIndex === 0 && colIndex === 0;
+
+      // Only the selected color or first color should be focusable via Tab
+      // This allows Tab to move between color palettes
+      var shouldBeFocusable = isSelectedColor || !selectedColor && isFirstColor;
+      return /*#__PURE__*/_react.default.createElement(_Color.Color, {
+        key: value,
+        value: value,
+        borderColor: border,
+        label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+        onClick: onClick,
+        onKeyDown: handleKeyDown,
+        isSelected: isSelectedColor,
+        checkMarkColor: getCheckMarkColor(value, useIconToken),
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator,
+        tabIndex: shouldBeFocusable ? 0 : -1,
+        autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
+      });
+    }));
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.paletteWrapper,
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref3) {
+      var value = _ref3.value,
+        label = _ref3.label,
+        border = _ref3.border,
+        message = _ref3.message,
+        decorator = _ref3.decorator;
+      var tooltipMessage = message;
+
       // Override with theme-specific tooltip messages if provided
       if (paletteColorTooltipMessages) {
         if (tokenTheme === 'dark') {

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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); }
 var styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
@@ -51,7 +52,10 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
     testId = _ref2.testId,
-    ariaKeyshortcuts = _ref2.ariaKeyshortcuts;
+    ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
+    href = _ref2.href,
+    target = _ref2.target,
+    rel = _ref2.rel;
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     onClick: onClick,
     elemBefore: elemBefore,
@@ -62,7 +66,10 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     "aria-pressed": isSelected,
     "aria-keyshortcuts": ariaKeyshortcuts,
     ref: triggerRef,
-    component: CustomDropdownMenuItemButton,
+    href: href,
+    target: target,
+    rel: rel,
+    component: href && (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
     testId: testId
   }, children);
 };

package/dist/cjs/ui/ToolbarDropdownMenu.compiled.css

@@ -1 +1,2 @@
-._1mou1b66{margin-block:var(--ds-space-050,4px)}
+
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -11,12 +11,14 @@ require("./ToolbarDropdownMenu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _uiContext = require("../hooks/ui-context");
 var _ToolbarButton = require("./ToolbarButton");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 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); }
 var styles = {
-  sectionMargin: "_1mou1b66"
+  sectionMargin: "_1mou1b66",
+  firstSectionSeparator: "_18l8n7od"
 };
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
@@ -81,6 +83,6 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     testId: testId,
     label: label
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([hasSectionMargin && styles.sectionMargin])
+    className: (0, _runtime.ax)([hasSectionMargin && styles.sectionMargin, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
   }, children)));
 };

package/dist/cjs/ui/icons/LoomIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoomIcon", {
+  enumerable: true,
+  get: function get() {
+    return _video.default;
+  }
+});
+var _video = _interopRequireDefault(require("@atlaskit/icon/core/video"));

package/dist/es2019/index.js

@@ -65,6 +65,7 @@ export { TaskIcon } from './ui/icons/TaskIcon';
 export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
+export { LoomIcon } from './ui/icons/LoomIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/es2019/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,6 @@
 
 ._19itv4vr{border:1px solid var(--ds-border-inverse,#fff)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

package/dist/es2019/ui/ColorPalette/Color.js

@@ -42,7 +42,7 @@ export const Color = /*#__PURE__*/memo(({
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -57,7 +57,7 @@ export const Color = /*#__PURE__*/memo(({
       border: `1px solid ${borderColor}`
     },
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,

package/dist/es2019/ui/ColorPalette/index.js

@@ -1,14 +1,15 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import chromatism from 'chromatism';
 import { useIntl } from 'react-intl-next';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Grid, Inline } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { Color } from './Color';
 import getColorMessage from './getColorMessage';
-import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue } from './utils';
 const styles = {
   paletteWrapper: "_1e0c1txw"
 };
@@ -19,7 +20,7 @@ const styles = {
  *
  * @param color color string, supports HEX, RGB, RGBA etc.
  * @param useIconToken boolean, describes if a token should be used for the icon color
- * @return Highest contrast color in pool
+ * @returns Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
   const tokenVal = getTokenCSSVariableValue(color);
@@ -68,10 +69,244 @@ const ColorPalette = ({
     colorMode: tokenTheme
   } = useThemeObserver();
   const useIconToken = !!hexToPaletteColor;
+
+  // Refs for keyboard navigation
+  const paletteRef = useRef(null);
+  const currentFocusRef = useRef({
+    row: 0,
+    col: 0
+  });
   const colorsPerRow = useMemo(() => {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement(Box, {
+
+  // Get initial focus position based on selected color
+  const {
+    selectedRowIndex,
+    selectedColumnIndex
+  } = useMemo(() => {
+    return getSelectedRowAndColumnFromPalette(palette, selectedColor, cols);
+  }, [palette, selectedColor, cols]);
+
+  // Focus management utility
+  const focusColorAt = useCallback((row, col) => {
+    var _rowElement$children$, _rowElement$children$2;
+    if (!paletteRef.current) {
+      return;
+    }
+    const rowElement = paletteRef.current.children[row];
+    if (!(rowElement instanceof HTMLElement)) {
+      return;
+    }
+    const colorButtonCandidate = (_rowElement$children$ = rowElement.children[col]) === null || _rowElement$children$ === void 0 ? void 0 : (_rowElement$children$2 = _rowElement$children$.querySelector) === null || _rowElement$children$2 === void 0 ? void 0 : _rowElement$children$2.call(_rowElement$children$, 'button');
+    const colorButton = colorButtonCandidate instanceof HTMLButtonElement ? colorButtonCandidate : null;
+    if (colorButton) {
+      colorButton.focus();
+      currentFocusRef.current = {
+        row,
+        col
+      };
+    }
+  }, []);
+
+  // Initialize focus position and handle autofocus
+  useEffect(() => {
+    if (!expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+      return;
+    }
+    if (selectedRowIndex >= 0 && selectedColumnIndex >= 0) {
+      currentFocusRef.current = {
+        row: selectedRowIndex,
+        col: selectedColumnIndex
+      };
+    } else {
+      currentFocusRef.current = {
+        row: 0,
+        col: 0
+      };
+    }
+  }, [selectedRowIndex, selectedColumnIndex]);
+
+  // Keyboard navigation handler
+  const handleKeyDown = useCallback((value, label, event) => {
+    var _colorsPerRow$row;
+    const {
+      row,
+      col
+    } = currentFocusRef.current;
+    const maxRow = colorsPerRow.length - 1;
+    const maxCol = ((_colorsPerRow$row = colorsPerRow[row]) === null || _colorsPerRow$row === void 0 ? void 0 : _colorsPerRow$row.length) - 1 || 0;
+    switch (event.key) {
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          if (col < maxCol) {
+            focusColorAt(row, col + 1);
+          } else if (row < maxRow) {
+            // Move to first color of next row
+            focusColorAt(row + 1, 0);
+          } else {
+            // Wrap to first color of first row
+            focusColorAt(0, 0);
+          }
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          event.preventDefault();
+          if (col > 0) {
+            focusColorAt(row, col - 1);
+          } else if (row > 0) {
+            var _colorsPerRow;
+            // Move to last color of previous row
+            const prevRowMaxCol = ((_colorsPerRow = colorsPerRow[row - 1]) === null || _colorsPerRow === void 0 ? void 0 : _colorsPerRow.length) - 1 || 0;
+            focusColorAt(row - 1, prevRowMaxCol);
+          } else {
+            var _colorsPerRow$maxRow;
+            // Wrap to last color of last row
+            const lastRowMaxCol = ((_colorsPerRow$maxRow = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow === void 0 ? void 0 : _colorsPerRow$maxRow.length) - 1 || 0;
+            focusColorAt(maxRow, lastRowMaxCol);
+          }
+          break;
+        }
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          if (row < maxRow) {
+            var _colorsPerRow2;
+            // Move to same column in next row, or last available column
+            const nextRowMaxCol = ((_colorsPerRow2 = colorsPerRow[row + 1]) === null || _colorsPerRow2 === void 0 ? void 0 : _colorsPerRow2.length) - 1 || 0;
+            const targetCol = Math.min(col, nextRowMaxCol);
+            focusColorAt(row + 1, targetCol);
+          } else {
+            var _colorsPerRow$;
+            // Wrap to same column in first row
+            const firstRowMaxCol = ((_colorsPerRow$ = colorsPerRow[0]) === null || _colorsPerRow$ === void 0 ? void 0 : _colorsPerRow$.length) - 1 || 0;
+            const targetCol = Math.min(col, firstRowMaxCol);
+            focusColorAt(0, targetCol);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          if (row > 0) {
+            var _colorsPerRow3;
+            // Move to same column in previous row, or last available column
+            const prevRowMaxCol = ((_colorsPerRow3 = colorsPerRow[row - 1]) === null || _colorsPerRow3 === void 0 ? void 0 : _colorsPerRow3.length) - 1 || 0;
+            const targetCol = Math.min(col, prevRowMaxCol);
+            focusColorAt(row - 1, targetCol);
+          } else {
+            var _colorsPerRow$maxRow2;
+            // Wrap to same column in last row
+            const lastRowMaxCol = ((_colorsPerRow$maxRow2 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow2 === void 0 ? void 0 : _colorsPerRow$maxRow2.length) - 1 || 0;
+            const targetCol = Math.min(col, lastRowMaxCol);
+            focusColorAt(maxRow, targetCol);
+          }
+          break;
+        }
+      case 'Home':
+        {
+          event.preventDefault();
+          focusColorAt(row, 0);
+          break;
+        }
+      case 'End':
+        {
+          event.preventDefault();
+          focusColorAt(row, maxCol);
+          break;
+        }
+      case 'PageUp':
+        {
+          event.preventDefault();
+          focusColorAt(0, col);
+          break;
+        }
+      case 'PageDown':
+        {
+          var _colorsPerRow$maxRow3;
+          event.preventDefault();
+          const lastRowMaxCol = ((_colorsPerRow$maxRow3 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow3 === void 0 ? void 0 : _colorsPerRow$maxRow3.length) - 1 || 0;
+          const targetCol = Math.min(col, lastRowMaxCol);
+          focusColorAt(maxRow, targetCol);
+          break;
+        }
+      case 'Tab':
+        {
+          // Allow Tab to move to next focusable element (don't prevent default)
+          // This will allow Tab to move between color palettes
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+      case 'Enter':
+      case ' ':
+        {
+          event.preventDefault();
+          onClick(value, label);
+          break;
+        }
+      default:
+        {
+          // Pass through to custom onKeyDown handler if provided
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+    }
+  }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
+  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Grid, {
+    gap: "space.050",
+    ref: paletteRef,
+    role: "group"
+  }, colorsPerRow.map((row, rowIndex) => /*#__PURE__*/React.createElement(Inline, {
+    rowSpace: "space.050",
+    key: `row-first-color-${row[0].value}`,
+    role: "radiogroup"
+  }, row.map(({
+    value,
+    label,
+    border,
+    message,
+    decorator
+  }, colIndex) => {
+    let tooltipMessage = message;
+
+    // Override with theme-specific tooltip messages if provided
+    if (paletteColorTooltipMessages) {
+      if (tokenTheme === 'dark') {
+        tooltipMessage = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
+      }
+      if (tokenTheme === 'light') {
+        tooltipMessage = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
+      }
+    }
+
+    // Determine if this color should be focusable
+    const isSelectedColor = value === selectedColor;
+    const isFirstColor = rowIndex === 0 && colIndex === 0;
+
+    // Only the selected color or first color should be focusable via Tab
+    // This allows Tab to move between color palettes
+    const shouldBeFocusable = isSelectedColor || !selectedColor && isFirstColor;
+    return /*#__PURE__*/React.createElement(Color, {
+      key: value,
+      value: value,
+      borderColor: border,
+      label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+      onClick: onClick,
+      onKeyDown: handleKeyDown,
+      isSelected: isSelectedColor,
+      checkMarkColor: getCheckMarkColor(value, useIconToken),
+      hexToPaletteColor: hexToPaletteColor,
+      decorator: decorator,
+      tabIndex: shouldBeFocusable ? 0 : -1,
+      autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
+    });
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement(Box, {
     xcss: styles.paletteWrapper,
     key: `row-first-color-${row[0].value}`,
     role: "radiogroup"

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -5,6 +5,7 @@ import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -42,17 +43,25 @@ export const ToolbarDropdownItem = ({
   hasNestedDropdownMenu,
   triggerRef,
   testId,
-  ariaKeyshortcuts
-}) => /*#__PURE__*/React.createElement(DropdownItem, {
-  onClick: onClick,
-  elemBefore: elemBefore,
-  elemAfter: elemAfter,
-  isSelected: isSelected,
-  isDisabled: isDisabled,
-  "aria-haspopup": hasNestedDropdownMenu,
-  "aria-pressed": isSelected,
-  "aria-keyshortcuts": ariaKeyshortcuts,
-  ref: triggerRef,
-  component: CustomDropdownMenuItemButton,
-  testId: testId
-}, children);
+  ariaKeyshortcuts,
+  href,
+  target,
+  rel
+}) => {
+  return /*#__PURE__*/React.createElement(DropdownItem, {
+    onClick: onClick,
+    elemBefore: elemBefore,
+    elemAfter: elemAfter,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    "aria-haspopup": hasNestedDropdownMenu,
+    "aria-pressed": isSelected,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    ref: triggerRef,
+    href: href,
+    target: target,
+    rel: rel,
+    component: href && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
+    testId: testId
+  }, children);
+};

package/dist/es2019/ui/ToolbarDropdownMenu.compiled.css

@@ -1 +1,2 @@
-._1mou1b66{margin-block:var(--ds-space-050,4px)}
+
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -3,11 +3,13 @@ import "./ToolbarDropdownMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 const styles = {
-  sectionMargin: "_1mou1b66"
+  sectionMargin: "_1mou1b66",
+  firstSectionSeparator: "_18l8n7od"
 };
 const ToolbarDropdownMenuContent = ({
   iconBefore,
@@ -73,6 +75,6 @@ export const ToolbarDropdownMenu = ({
     testId: testId,
     label: label
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([hasSectionMargin && styles.sectionMargin])
+    className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
   }, children)));
 };

package/dist/es2019/ui/icons/LoomIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as LoomIcon } from '@atlaskit/icon/core/video';

package/dist/esm/index.js

@@ -65,6 +65,7 @@ export { TaskIcon } from './ui/icons/TaskIcon';
 export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
+export { LoomIcon } from './ui/icons/LoomIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/esm/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,6 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

package/dist/esm/ui/ColorPalette/Color.js

@@ -42,7 +42,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -53,7 +53,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
       border: "1px solid ".concat(borderColor),

package/dist/esm/ui/ColorPalette/index.js

@@ -1,14 +1,15 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import chromatism from 'chromatism';
 import { useIntl } from 'react-intl-next';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Grid, Inline } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { Color } from './Color';
 import getColorMessage from './getColorMessage';
-import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue } from './utils';
 var styles = {
   paletteWrapper: "_1e0c1txw"
 };
@@ -19,7 +20,7 @@ var styles = {
  *
  * @param color color string, supports HEX, RGB, RGBA etc.
  * @param useIconToken boolean, describes if a token should be used for the icon color
- * @return Highest contrast color in pool
+ * @returns Highest contrast color in pool
  */
 function getCheckMarkColor(color, useIconToken) {
   var tokenVal = getTokenCSSVariableValue(color);
@@ -66,15 +67,203 @@ var ColorPalette = function ColorPalette(_ref) {
   var _useThemeObserver = useThemeObserver(),
     tokenTheme = _useThemeObserver.colorMode;
   var useIconToken = !!hexToPaletteColor;
+
+  // Refs for keyboard navigation
+  var paletteRef = useRef(null);
+  var currentFocusRef = useRef({
+    row: 0,
+    col: 0
+  });
   var colorsPerRow = useMemo(function () {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
-    return /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.paletteWrapper,
+
+  // Get initial focus position based on selected color
+  var _useMemo = useMemo(function () {
+      return getSelectedRowAndColumnFromPalette(palette, selectedColor, cols);
+    }, [palette, selectedColor, cols]),
+    selectedRowIndex = _useMemo.selectedRowIndex,
+    selectedColumnIndex = _useMemo.selectedColumnIndex;
+
+  // Focus management utility
+  var focusColorAt = useCallback(function (row, col) {
+    var _rowElement$children$, _rowElement$children$2;
+    if (!paletteRef.current) {
+      return;
+    }
+    var rowElement = paletteRef.current.children[row];
+    if (!(rowElement instanceof HTMLElement)) {
+      return;
+    }
+    var colorButtonCandidate = (_rowElement$children$ = rowElement.children[col]) === null || _rowElement$children$ === void 0 || (_rowElement$children$2 = _rowElement$children$.querySelector) === null || _rowElement$children$2 === void 0 ? void 0 : _rowElement$children$2.call(_rowElement$children$, 'button');
+    var colorButton = colorButtonCandidate instanceof HTMLButtonElement ? colorButtonCandidate : null;
+    if (colorButton) {
+      colorButton.focus();
+      currentFocusRef.current = {
+        row: row,
+        col: col
+      };
+    }
+  }, []);
+
+  // Initialize focus position and handle autofocus
+  useEffect(function () {
+    if (!expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+      return;
+    }
+    if (selectedRowIndex >= 0 && selectedColumnIndex >= 0) {
+      currentFocusRef.current = {
+        row: selectedRowIndex,
+        col: selectedColumnIndex
+      };
+    } else {
+      currentFocusRef.current = {
+        row: 0,
+        col: 0
+      };
+    }
+  }, [selectedRowIndex, selectedColumnIndex]);
+
+  // Keyboard navigation handler
+  var handleKeyDown = useCallback(function (value, label, event) {
+    var _colorsPerRow$row;
+    var _currentFocusRef$curr = currentFocusRef.current,
+      row = _currentFocusRef$curr.row,
+      col = _currentFocusRef$curr.col;
+    var maxRow = colorsPerRow.length - 1;
+    var maxCol = ((_colorsPerRow$row = colorsPerRow[row]) === null || _colorsPerRow$row === void 0 ? void 0 : _colorsPerRow$row.length) - 1 || 0;
+    switch (event.key) {
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          if (col < maxCol) {
+            focusColorAt(row, col + 1);
+          } else if (row < maxRow) {
+            // Move to first color of next row
+            focusColorAt(row + 1, 0);
+          } else {
+            // Wrap to first color of first row
+            focusColorAt(0, 0);
+          }
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          event.preventDefault();
+          if (col > 0) {
+            focusColorAt(row, col - 1);
+          } else if (row > 0) {
+            var _colorsPerRow;
+            // Move to last color of previous row
+            var prevRowMaxCol = ((_colorsPerRow = colorsPerRow[row - 1]) === null || _colorsPerRow === void 0 ? void 0 : _colorsPerRow.length) - 1 || 0;
+            focusColorAt(row - 1, prevRowMaxCol);
+          } else {
+            var _colorsPerRow$maxRow;
+            // Wrap to last color of last row
+            var lastRowMaxCol = ((_colorsPerRow$maxRow = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow === void 0 ? void 0 : _colorsPerRow$maxRow.length) - 1 || 0;
+            focusColorAt(maxRow, lastRowMaxCol);
+          }
+          break;
+        }
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          if (row < maxRow) {
+            var _colorsPerRow2;
+            // Move to same column in next row, or last available column
+            var nextRowMaxCol = ((_colorsPerRow2 = colorsPerRow[row + 1]) === null || _colorsPerRow2 === void 0 ? void 0 : _colorsPerRow2.length) - 1 || 0;
+            var targetCol = Math.min(col, nextRowMaxCol);
+            focusColorAt(row + 1, targetCol);
+          } else {
+            var _colorsPerRow$;
+            // Wrap to same column in first row
+            var firstRowMaxCol = ((_colorsPerRow$ = colorsPerRow[0]) === null || _colorsPerRow$ === void 0 ? void 0 : _colorsPerRow$.length) - 1 || 0;
+            var _targetCol = Math.min(col, firstRowMaxCol);
+            focusColorAt(0, _targetCol);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          if (row > 0) {
+            var _colorsPerRow3;
+            // Move to same column in previous row, or last available column
+            var _prevRowMaxCol = ((_colorsPerRow3 = colorsPerRow[row - 1]) === null || _colorsPerRow3 === void 0 ? void 0 : _colorsPerRow3.length) - 1 || 0;
+            var _targetCol2 = Math.min(col, _prevRowMaxCol);
+            focusColorAt(row - 1, _targetCol2);
+          } else {
+            var _colorsPerRow$maxRow2;
+            // Wrap to same column in last row
+            var _lastRowMaxCol = ((_colorsPerRow$maxRow2 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow2 === void 0 ? void 0 : _colorsPerRow$maxRow2.length) - 1 || 0;
+            var _targetCol3 = Math.min(col, _lastRowMaxCol);
+            focusColorAt(maxRow, _targetCol3);
+          }
+          break;
+        }
+      case 'Home':
+        {
+          event.preventDefault();
+          focusColorAt(row, 0);
+          break;
+        }
+      case 'End':
+        {
+          event.preventDefault();
+          focusColorAt(row, maxCol);
+          break;
+        }
+      case 'PageUp':
+        {
+          event.preventDefault();
+          focusColorAt(0, col);
+          break;
+        }
+      case 'PageDown':
+        {
+          var _colorsPerRow$maxRow3;
+          event.preventDefault();
+          var _lastRowMaxCol2 = ((_colorsPerRow$maxRow3 = colorsPerRow[maxRow]) === null || _colorsPerRow$maxRow3 === void 0 ? void 0 : _colorsPerRow$maxRow3.length) - 1 || 0;
+          var _targetCol4 = Math.min(col, _lastRowMaxCol2);
+          focusColorAt(maxRow, _targetCol4);
+          break;
+        }
+      case 'Tab':
+        {
+          // Allow Tab to move to next focusable element (don't prevent default)
+          // This will allow Tab to move between color palettes
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+      case 'Enter':
+      case ' ':
+        {
+          event.preventDefault();
+          onClick(value, label);
+          break;
+        }
+      default:
+        {
+          // Pass through to custom onKeyDown handler if provided
+          if (onKeyDown) {
+            onKeyDown(value, label, event);
+          }
+          break;
+        }
+    }
+  }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
+  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Grid, {
+    gap: "space.050",
+    ref: paletteRef,
+    role: "group"
+  }, colorsPerRow.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement(Inline, {
+      rowSpace: "space.050",
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
-    }, row.map(function (_ref2) {
+    }, row.map(function (_ref2, colIndex) {
       var value = _ref2.value,
         label = _ref2.label,
         border = _ref2.border,
@@ -82,6 +271,51 @@ var ColorPalette = function ColorPalette(_ref) {
         decorator = _ref2.decorator;
       var tooltipMessage = message;
 
+      // Override with theme-specific tooltip messages if provided
+      if (paletteColorTooltipMessages) {
+        if (tokenTheme === 'dark') {
+          tooltipMessage = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
+        }
+        if (tokenTheme === 'light') {
+          tooltipMessage = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
+        }
+      }
+
+      // Determine if this color should be focusable
+      var isSelectedColor = value === selectedColor;
+      var isFirstColor = rowIndex === 0 && colIndex === 0;
+
+      // Only the selected color or first color should be focusable via Tab
+      // This allows Tab to move between color palettes
+      var shouldBeFocusable = isSelectedColor || !selectedColor && isFirstColor;
+      return /*#__PURE__*/React.createElement(Color, {
+        key: value,
+        value: value,
+        borderColor: border,
+        label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+        onClick: onClick,
+        onKeyDown: handleKeyDown,
+        isSelected: isSelectedColor,
+        checkMarkColor: getCheckMarkColor(value, useIconToken),
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator,
+        tabIndex: shouldBeFocusable ? 0 : -1,
+        autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
+      });
+    }));
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.paletteWrapper,
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref3) {
+      var value = _ref3.value,
+        label = _ref3.label,
+        border = _ref3.border,
+        message = _ref3.message,
+        decorator = _ref3.decorator;
+      var tooltipMessage = message;
+
       // Override with theme-specific tooltip messages if provided
       if (paletteColorTooltipMessages) {
         if (tokenTheme === 'dark') {

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -5,6 +5,7 @@ import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -43,7 +44,10 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
     testId = _ref2.testId,
-    ariaKeyshortcuts = _ref2.ariaKeyshortcuts;
+    ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
+    href = _ref2.href,
+    target = _ref2.target,
+    rel = _ref2.rel;
   return /*#__PURE__*/React.createElement(DropdownItem, {
     onClick: onClick,
     elemBefore: elemBefore,
@@ -54,7 +58,10 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     "aria-pressed": isSelected,
     "aria-keyshortcuts": ariaKeyshortcuts,
     ref: triggerRef,
-    component: CustomDropdownMenuItemButton,
+    href: href,
+    target: target,
+    rel: rel,
+    component: href && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
     testId: testId
   }, children);
 };

package/dist/esm/ui/ToolbarDropdownMenu.compiled.css

@@ -1 +1,2 @@
-._1mou1b66{margin-block:var(--ds-space-050,4px)}
+
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -3,11 +3,13 @@ import "./ToolbarDropdownMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 var styles = {
-  sectionMargin: "_1mou1b66"
+  sectionMargin: "_1mou1b66",
+  firstSectionSeparator: "_18l8n7od"
 };
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
@@ -72,6 +74,6 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
     testId: testId,
     label: label
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([hasSectionMargin && styles.sectionMargin])
+    className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
   }, children)));
 };

package/dist/esm/ui/icons/LoomIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as LoomIcon } from '@atlaskit/icon/core/video';

package/dist/types/index.d.ts

@@ -64,6 +64,7 @@ export { TaskIcon } from './ui/icons/TaskIcon';
 export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
+export { LoomIcon } from './ui/icons/LoomIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';

package/dist/types/ui/ToolbarDropdownItem.d.ts

@@ -13,12 +13,15 @@ type ToolbarDropdownItemProps = {
     elemAfter?: ReactNode;
     elemBefore?: ReactNode;
     hasNestedDropdownMenu?: boolean;
+    href?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    rel?: string;
+    target?: string;
     testId?: string;
     textStyle?: TextStyle;
     triggerRef?: Ref<HTMLButtonElement>;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/LoomIcon.d.ts

@@ -0,0 +1 @@
+export { default as LoomIcon } from '@atlaskit/icon/core/video';

package/dist/types-ts4.5/index.d.ts

@@ -64,6 +64,7 @@ export { TaskIcon } from './ui/icons/TaskIcon';
 export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
+export { LoomIcon } from './ui/icons/LoomIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';

package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts

@@ -13,12 +13,15 @@ type ToolbarDropdownItemProps = {
     elemAfter?: ReactNode;
     elemBefore?: ReactNode;
     hasNestedDropdownMenu?: boolean;
+    href?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    rel?: string;
+    target?: string;
     testId?: string;
     textStyle?: TextStyle;
     triggerRef?: Ref<HTMLButtonElement>;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/LoomIcon.d.ts

@@ -0,0 +1 @@
+export { default as LoomIcon } from '@atlaskit/icon/core/video';

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -30,6 +30,7 @@
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/tmp-editor-statsig": "^11.9.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",