@atlaskit/spotlight 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/spotlight
 
+## 0.3.3
+
+### Patch Changes
+
+- [`bd8e43d78afb8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd8e43d78afb8) - -
+  Add `role="dialog"` to PopoverContent. `aria-labelledby` is internally managed by
+  `SpotlightContext`.
+  - Add `aria-label='Dismiss'` to `SpotlightDismissControl`.
+  - Add `aria-label'` prop to `SpotlightPrimaryAction`.
+  - Add `aria-label'` prop to `SpotlightSecondaryAction`.
+
+## 0.3.2
+
+### Patch Changes
+
+- [`ec2250eef3ec9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec2250eef3ec9) -
+  Spotlight now accepts `top-center` and `bottom-center` placements to ensure SpotlightCard content
+  can be seen on small viewports.
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -1,4 +1,4 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -19,20 +19,35 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
   placement: 'bottom-end',
   setPlacement: function setPlacement() {
     return undefined;
+  },
+  heading: {
+    id: '',
+    setId: function setId() {
+      return undefined;
+    }
   }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SpotlightContextProvider = exports.SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var children = _ref.children;
+  var id = (0, _react.useId)();
   var _useState = (0, _react.useState)('bottom-end'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)("".concat(id, "-heading")),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    headingId = _useState4[0],
+    setHeadingId = _useState4[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
-      setPlacement: setPlacement
+      setPlacement: setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/card/caret/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -15,8 +15,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
   'top-start': "_1eint94y",
+  'top-center': "_1eint94y",
   'top-end': "_1eint94y",
   'bottom-start': "_1s1gt94y",
+  'bottom-center': "_1s1gt94y",
   'bottom-end': "_1s1gt94y",
   'right-start': "_1yxnt94y",
   'right-end': "_1yxnt94y",

package/dist/cjs/ui/card/index.compiled.css

@@ -5,6 +5,7 @@
 ._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
+._1e021qz4{inset-inline-start:-140px}
 ._1e02c7mi{inset-inline-start:var(--ds-space-negative-250,-20px)}
 ._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -21,10 +21,12 @@ var styles = {
 };
 var placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",
+  'top-center': "_u7co12x7 _1e021qz4",
   'top-end': "_u7co12x7 _1e02c7mi",
   'right-start': "_1e0212x7 _u7comgjw",
   'right-end': "_1e0212x7 _152tmgjw",
   'bottom-start': "_152t12x7 _rjxpc7mi",
+  'bottom-center': "_152t12x7 _1e021qz4",
   'bottom-end': "_152t12x7 _1e02c7mi",
   'left-start': "_rjxp12x7 _u7comgjw",
   'left-end': "_rjxp12x7 _152tmgjw"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -27,6 +27,7 @@ var SpotlightDismissControl = exports.SpotlightDismissControl = /*#__PURE__*/(0,
   var onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _context = require("../../controllers/context");
 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); }
 /**
  * __SpotlightHeadline__
@@ -21,7 +22,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var SpotlightHeadline = exports.SpotlightHeadline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    heading = _useContext.heading;
   return /*#__PURE__*/React.createElement(_heading.default, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -38,8 +38,10 @@ var offset = [0, 2];
  */
 var popperPlacementMap = {
   'top-start': 'top',
+  'top-center': 'top',
   'top-end': 'top',
   'bottom-start': 'bottom',
+  'bottom-center': 'bottom',
   'bottom-end': 'bottom',
   'right-start': 'right',
   'right-end': 'right',
@@ -56,9 +58,11 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
-    setPlacement = _useContext.setPlacement;
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   var visibility = isVisible ? 'visible' : 'hidden';
   (0, _react.useEffect)(function () {
     setPlacement(placement);
@@ -70,7 +74,12 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     var ref = _ref2.ref,
       style = _ref2.style;
     return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
       style: style,
       className: (0, _runtime.ax)([styles.root, visibilityStyles[visibility]])
     }, children);

package/dist/cjs/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -23,10 +23,12 @@ var styles = {
  *
  */
 var SpotlightPrimaryAction = exports.SpotlightPrimaryAction = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/cjs/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -23,10 +23,12 @@ var styles = {
  *
  */
 var SpotlightSecondaryAction = exports.SpotlightSecondaryAction = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/cjs/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/step-count/index.js

@@ -1,6 +1,7 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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 = {
   root: "_1ul91ris"
@@ -29,5 +31,5 @@ var SpotlightStepCount = exports.SpotlightStepCount = /*#__PURE__*/(0, _react.fo
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, ' ', /*#__PURE__*/React.createElement(_visuallyHidden.default, null, "steps")));
 });

package/dist/es2019/controllers/context.js

@@ -1,25 +1,35 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useState } from 'react';
+import { createContext, useId, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SpotlightContext = /*#__PURE__*/createContext({
   placement: 'bottom-end',
-  setPlacement: () => undefined
+  setPlacement: () => undefined,
+  heading: {
+    id: '',
+    setId: () => undefined
+  }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SpotlightContextProvider = ({
   children
 }) => {
+  const id = useId();
   const [placement, setPlacement] = useState('bottom-end');
+  const [headingId, setHeadingId] = useState(`${id}-heading`);
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement,
-      setPlacement
+      setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/card/caret/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,8 +7,10 @@ import { SpotlightContext } from '../../../controllers/context';
 const styles = {
   root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
   'top-start': "_1eint94y",
+  'top-center': "_1eint94y",
   'top-end': "_1eint94y",
   'bottom-start': "_1s1gt94y",
+  'bottom-center': "_1s1gt94y",
   'bottom-end': "_1s1gt94y",
   'right-start': "_1yxnt94y",
   'right-end': "_1yxnt94y",

package/dist/es2019/ui/card/index.compiled.css

@@ -5,6 +5,7 @@
 ._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
+._1e021qz4{inset-inline-start:-140px}
 ._1e02c7mi{inset-inline-start:var(--ds-space-negative-250,-20px)}
 ._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -13,10 +13,12 @@ const styles = {
 };
 const placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",
+  'top-center': "_u7co12x7 _1e021qz4",
   'top-end': "_u7co12x7 _1e02c7mi",
   'right-start': "_1e0212x7 _u7comgjw",
   'right-end': "_1e0212x7 _152tmgjw",
   'bottom-start': "_152t12x7 _rjxpc7mi",
+  'bottom-center': "_152t12x7 _1e021qz4",
   'bottom-end': "_152t12x7 _1e02c7mi",
   'left-start': "_rjxp12x7 _u7comgjw",
   'left-end': "_rjxp12x7 _152tmgjw"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -19,6 +19,7 @@ export const SpotlightDismissControl = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,8 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import Heading from '@atlaskit/heading';
+import { SpotlightContext } from '../../controllers/context';
 /**
  * __SpotlightHeadline__
  *
@@ -13,7 +14,11 @@ export const SpotlightHeadline = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const {
+    heading
+  } = useContext(SpotlightContext);
   return /*#__PURE__*/React.createElement(Heading, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -30,8 +30,10 @@ const offset = [0, 2];
  */
 const popperPlacementMap = {
   'top-start': 'top',
+  'top-center': 'top',
   'top-end': 'top',
   'bottom-start': 'bottom',
+  'bottom-center': 'bottom',
   'bottom-end': 'bottom',
   'right-start': 'right',
   'right-end': 'right',
@@ -47,10 +49,12 @@ const popperPlacementMap = {
 export const PopoverContent = ({
   children,
   placement,
-  isVisible = true
+  isVisible = true,
+  testId
 }) => {
   const {
-    setPlacement
+    setPlacement,
+    heading
   } = useContext(SpotlightContext);
   const visibility = isVisible ? 'visible' : 'hidden';
   useEffect(() => {
@@ -63,7 +67,12 @@ export const PopoverContent = ({
     ref,
     style
   }) => /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+    role: "dialog",
+    "data-testid": testId,
+    "aria-labelledby": heading.id,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: style,
     className: ax([styles.root, visibilityStyles[visibility]])
   }, children));

package/dist/es2019/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Manager } from '@atlaskit/popper';

package/dist/es2019/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightPrimaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightSecondaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/step-count/index.js

@@ -1,9 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const styles = {
   root: "_1ul91ris"
 };
@@ -22,5 +23,5 @@ export const SpotlightStepCount = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/esm/controllers/context.js

@@ -1,8 +1,8 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useState } from 'react';
+import { createContext, useId, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -11,20 +11,35 @@ export var SpotlightContext = /*#__PURE__*/createContext({
   placement: 'bottom-end',
   setPlacement: function setPlacement() {
     return undefined;
+  },
+  heading: {
+    id: '',
+    setId: function setId() {
+      return undefined;
+    }
   }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var children = _ref.children;
+  var id = useId();
   var _useState = useState('bottom-end'),
     _useState2 = _slicedToArray(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
+  var _useState3 = useState("".concat(id, "-heading")),
+    _useState4 = _slicedToArray(_useState3, 2),
+    headingId = _useState4[0],
+    setHeadingId = _useState4[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
-      setPlacement: setPlacement
+      setPlacement: setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/card/caret/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,8 +7,10 @@ import { SpotlightContext } from '../../../controllers/context';
 var styles = {
   root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
   'top-start': "_1eint94y",
+  'top-center': "_1eint94y",
   'top-end': "_1eint94y",
   'bottom-start': "_1s1gt94y",
+  'bottom-center': "_1s1gt94y",
   'bottom-end': "_1s1gt94y",
   'right-start': "_1yxnt94y",
   'right-end': "_1yxnt94y",

package/dist/esm/ui/card/index.compiled.css

@@ -5,6 +5,7 @@
 ._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
+._1e021qz4{inset-inline-start:-140px}
 ._1e02c7mi{inset-inline-start:var(--ds-space-negative-250,-20px)}
 ._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -13,10 +13,12 @@ var styles = {
 };
 var placementStyles = {
   'top-start': "_u7co12x7 _rjxpc7mi",
+  'top-center': "_u7co12x7 _1e021qz4",
   'top-end': "_u7co12x7 _1e02c7mi",
   'right-start': "_1e0212x7 _u7comgjw",
   'right-end': "_1e0212x7 _152tmgjw",
   'bottom-start': "_152t12x7 _rjxpc7mi",
+  'bottom-center': "_152t12x7 _1e021qz4",
   'bottom-end': "_152t12x7 _1e02c7mi",
   'left-start': "_rjxp12x7 _u7comgjw",
   'left-end': "_rjxp12x7 _152tmgjw"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -18,6 +18,7 @@ export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref
   var onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": "Dismiss",
     xcss: styles.root,
     onClick: onClick,
     ref: ref,

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,8 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import Heading from '@atlaskit/heading';
+import { SpotlightContext } from '../../controllers/context';
 /**
  * __SpotlightHeadline__
  *
@@ -12,7 +13,10 @@ import Heading from '@atlaskit/heading';
 export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    heading = _useContext.heading;
   return /*#__PURE__*/React.createElement(Heading, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -30,8 +30,10 @@ var offset = [0, 2];
  */
 var popperPlacementMap = {
   'top-start': 'top',
+  'top-center': 'top',
   'top-end': 'top',
   'bottom-start': 'bottom',
+  'bottom-center': 'bottom',
   'bottom-end': 'bottom',
   'right-start': 'right',
   'right-end': 'right',
@@ -48,9 +50,11 @@ export var PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),
-    setPlacement = _useContext.setPlacement;
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   var visibility = isVisible ? 'visible' : 'hidden';
   useEffect(function () {
     setPlacement(placement);
@@ -62,7 +66,12 @@ export var PopoverContent = function PopoverContent(_ref) {
     var ref = _ref2.ref,
       style = _ref2.style;
     return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
       style: style,
       className: ax([styles.root, visibilityStyles[visibility]])
     }, children);

package/dist/esm/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Manager } from '@atlaskit/popper';

package/dist/esm/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightPrimaryAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightSecondaryAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/step-count/index.js

@@ -1,9 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var styles = {
   root: "_1ul91ris"
 };
@@ -21,5 +22,5 @@ export var SpotlightStepCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/types/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types/index.d.ts

@@ -14,3 +14,4 @@ export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
+export { type Placement } from './types';

package/dist/types/types.d.ts

@@ -1 +1 @@
-export type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';

package/dist/types/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/dist/types-ts4.5/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

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

@@ -14,3 +14,4 @@ export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
+export { type Placement } from './types';

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

@@ -1 +1 @@
-export type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types-ts4.5/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/offerings.json

@@ -0,0 +1,33 @@
+[
+	{
+		"name": "Spotlight",
+		"package": "@atlaskit/spotlight",
+		"import": {
+			"name": "Spotlight",
+			"package": "@atlaskit/spotlight",
+			"type": "named"
+		},
+		"keywords": ["spotlight", "search", "command", "palette", "quick"],
+		"categories": ["navigation"],
+		"shortDescription": "A component for quick search and command execution.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Ensure proper keyboard navigation",
+			"Provide clear search functionality",
+			"Use appropriate ARIA attributes",
+			"Consider screen reader announcements"
+		],
+		"usageGuidelines": [
+			"Use for quick search and commands",
+			"Provide clear search functionality",
+			"Consider keyboard shortcuts",
+			"Handle search results appropriately"
+		],
+		"contentGuidelines": [
+			"Use clear, descriptive search labels",
+			"Provide helpful search suggestions",
+			"Use consistent command naming",
+			"Keep search results relevant"
+		]
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,8 +32,9 @@
 		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},