@atlaskit/spotlight 0.10.10 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/spotlight
 
+## 0.11.0
+
+### Minor Changes
+
+- [`58f8502090976`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/58f8502090976) -
+  Expose `placement` prop on `SpotlightCard`. `SpotlightCard` is now better supported to render
+  outside of a `PopoverProvider`.
+
 ## 0.10.10
 
 ### Patch Changes

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

@@ -32,7 +32,8 @@ var styles = {
  *
  */
 var Caret = exports.Caret = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var testId = _ref.testId;
+  var placement = _ref.placement,
+    testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     card = _useContext.card;
   return /*#__PURE__*/React.createElement("div", {
@@ -43,6 +44,6 @@ var Caret = exports.Caret = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     style: {
       borderEndStartRadius: '1px'
     },
-    className: (0, _runtime.ax)([styles.root, styles[card.placement]])
+    className: (0, _runtime.ax)([styles.root, styles[placement || card.placement]])
   });
 });

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

@@ -3,6 +3,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
 ._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -11,12 +11,14 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _context = require("../../controllers/context");
 var _caret = require("./caret");
 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: "_kqswh2mm",
+  root: "_1bsb1ns9",
+  container: "_kqswh2mm",
   card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 var placementStyles = {
@@ -39,6 +41,7 @@ var placementStyles = {
  */
 var SpotlightCard = exports.SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
+    placement = _ref.placement,
     testId = _ref.testId;
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     card = _useContext.card;
@@ -46,13 +49,30 @@ var SpotlightCard = exports.SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(
   (0, _react.useEffect)(function () {
     card.setRef(cardRef);
   }, [card]);
+  if ((0, _platformFeatureFlags.fg)('platform_spotlight_card_fit_content_anchor')) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId,
+      ref: ref,
+      className: (0, _runtime.ax)([styles.root])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([styles.container])
+    }, /*#__PURE__*/React.createElement(_caret.Caret, {
+      placement: placement || card.placement
+    }), /*#__PURE__*/React.createElement(_compiled.Box, {
+      ref: cardRef,
+      backgroundColor: "color.background.neutral.bold",
+      xcss: (0, _css.cx)(styles.card, placementStyles[placement || card.placement])
+    }, children)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: (0, _runtime.ax)([styles.root])
-  }, /*#__PURE__*/React.createElement(_caret.Caret, null), /*#__PURE__*/React.createElement(_compiled.Box, {
+    className: (0, _runtime.ax)([styles.container])
+  }, /*#__PURE__*/React.createElement(_caret.Caret, {
+    placement: placement || card.placement
+  }), /*#__PURE__*/React.createElement(_compiled.Box, {
     ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
-    xcss: (0, _css.cx)(styles.card, placementStyles[card.placement])
+    xcss: (0, _css.cx)(styles.card, placementStyles[placement || card.placement])
   }, children));
 });

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

@@ -24,6 +24,7 @@ const styles = {
  *
  */
 export const Caret = /*#__PURE__*/forwardRef(({
+  placement,
   testId
 }, ref) => {
   const {
@@ -37,6 +38,6 @@ export const Caret = /*#__PURE__*/forwardRef(({
     style: {
       borderEndStartRadius: '1px'
     },
-    className: ax([styles.root, styles[card.placement]])
+    className: ax([styles.root, styles[placement || card.placement]])
   });
 });

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

@@ -3,6 +3,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
 ._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -4,11 +4,13 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 const styles = {
-  root: "_kqswh2mm",
+  root: "_1bsb1ns9",
+  container: "_kqswh2mm",
   card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 const placementStyles = {
@@ -31,6 +33,7 @@ const placementStyles = {
  */
 export const SpotlightCard = /*#__PURE__*/forwardRef(({
   children,
+  placement,
   testId
 }, ref) => {
   const {
@@ -40,13 +43,30 @@ export const SpotlightCard = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     card.setRef(cardRef);
   }, [card]);
+  if (fg('platform_spotlight_card_fit_content_anchor')) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId,
+      ref: ref,
+      className: ax([styles.root])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.container])
+    }, /*#__PURE__*/React.createElement(Caret, {
+      placement: placement || card.placement
+    }), /*#__PURE__*/React.createElement(Box, {
+      ref: cardRef,
+      backgroundColor: "color.background.neutral.bold",
+      xcss: cx(styles.card, placementStyles[placement || card.placement])
+    }, children)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    className: ax([styles.container])
+  }, /*#__PURE__*/React.createElement(Caret, {
+    placement: placement || card.placement
+  }), /*#__PURE__*/React.createElement(Box, {
     ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
-    xcss: cx(styles.card, placementStyles[card.placement])
+    xcss: cx(styles.card, placementStyles[placement || card.placement])
   }, children));
 });

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

@@ -24,7 +24,8 @@ var styles = {
  *
  */
 export var Caret = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var testId = _ref.testId;
+  var placement = _ref.placement,
+    testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),
     card = _useContext.card;
   return /*#__PURE__*/React.createElement("div", {
@@ -35,6 +36,6 @@ export var Caret = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       borderEndStartRadius: '1px'
     },
-    className: ax([styles.root, styles[card.placement]])
+    className: ax([styles.root, styles[placement || card.placement]])
   });
 });

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

@@ -3,6 +3,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._152t12x7{inset-block-start:var(--ds-space-075,6px)}
 ._152tmgjw{inset-block-start:var(--ds-space-negative-200,-1pc)}
 ._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
 ._1bsbaq3k{width:295px}
 ._1e0212x7{inset-inline-start:var(--ds-space-075,6px)}
 ._1e021qz4{inset-inline-start:-140px}

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

@@ -4,11 +4,13 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { SpotlightContext } from '../../controllers/context';
 import { Caret } from './caret';
 var styles = {
-  root: "_kqswh2mm",
+  root: "_1bsb1ns9",
+  container: "_kqswh2mm",
   card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
 };
 var placementStyles = {
@@ -31,6 +33,7 @@ var placementStyles = {
  */
 export var SpotlightCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
+    placement = _ref.placement,
     testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),
     card = _useContext.card;
@@ -38,13 +41,30 @@ export var SpotlightCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     card.setRef(cardRef);
   }, [card]);
+  if (fg('platform_spotlight_card_fit_content_anchor')) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId,
+      ref: ref,
+      className: ax([styles.root])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.container])
+    }, /*#__PURE__*/React.createElement(Caret, {
+      placement: placement || card.placement
+    }), /*#__PURE__*/React.createElement(Box, {
+      ref: cardRef,
+      backgroundColor: "color.background.neutral.bold",
+      xcss: cx(styles.card, placementStyles[placement || card.placement])
+    }, children)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(Caret, null), /*#__PURE__*/React.createElement(Box, {
+    className: ax([styles.container])
+  }, /*#__PURE__*/React.createElement(Caret, {
+    placement: placement || card.placement
+  }), /*#__PURE__*/React.createElement(Box, {
     ref: cardRef,
     backgroundColor: "color.background.neutral.bold",
-    xcss: cx(styles.card, placementStyles[card.placement])
+    xcss: cx(styles.card, placementStyles[placement || card.placement])
   }, children));
 });

package/dist/types/ui/card/caret/index.d.ts

@@ -1,4 +1,9 @@
+import type { Placement } from '../../../types';
 export interface CaretProps {
+    /**
+     * The position in relation to the target the content should be shown at. Overrides `PopoverContent.placement`
+     */
+    placement?: Placement;
     /**
      * 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,

package/dist/types/ui/card/index.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import type { Placement } from '../../types';
 export interface SpotlightCardProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -10,6 +11,10 @@ export interface SpotlightCardProps {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * The position in relation to the target the content should be shown at. Overrides `PopoverContent.placement`
+     */
+    placement?: Placement;
     /**
      * Elements to be rendered inside the `SpotlightCard`.
      */

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

@@ -50,8 +50,8 @@ interface BasePopoverContentProps {
      */
     offset?: Offset;
     /**
-     * Describes the positioning strategy to use. By default, it is `absolute`, which in the simplest cases does not require
-     * repositioning of the popper. If your reference element is in a fixed container, use the `fixed` strategy
+     * Describes the positioning strategy to use. By default, it is `fixed`, which positions the popper correctly when it's in the normal
+     * flow of the document. If your reference element is in an absolute container, like a modal, use the `absolute` strategy instead.
      *
      * For more details see: https://popper.js.org/docs/v2/constructors/#strategy
      */

package/dist/types-ts4.5/ui/card/caret/index.d.ts

@@ -1,4 +1,9 @@
+import type { Placement } from '../../../types';
 export interface CaretProps {
+    /**
+     * The position in relation to the target the content should be shown at. Overrides `PopoverContent.placement`
+     */
+    placement?: Placement;
     /**
      * 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,

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import type { Placement } from '../../types';
 export interface SpotlightCardProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -10,6 +11,10 @@ export interface SpotlightCardProps {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * The position in relation to the target the content should be shown at. Overrides `PopoverContent.placement`
+     */
+    placement?: Placement;
     /**
      * Elements to be rendered inside the `SpotlightCard`.
      */

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

@@ -53,8 +53,8 @@ interface BasePopoverContentProps {
      */
     offset?: Offset;
     /**
-     * Describes the positioning strategy to use. By default, it is `absolute`, which in the simplest cases does not require
-     * repositioning of the popper. If your reference element is in a fixed container, use the `fixed` strategy
+     * Describes the positioning strategy to use. By default, it is `fixed`, which positions the popper correctly when it's in the normal
+     * flow of the document. If your reference element is in an absolute container, like a modal, use the `absolute` strategy instead.
      *
      * For more details see: https://popper.js.org/docs/v2/constructors/#strategy
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.10.10",
+	"version": "0.11.0",
 	"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,12 +37,12 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -55,9 +55,10 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/dropdown-menu": "^16.7.0",
+		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0"
 	},
@@ -67,6 +68,9 @@
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform_spotlight_card_fit_content_anchor": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {

package/spotlight.docs.tsx

@@ -4,36 +4,238 @@ import type { ComponentStructuredContentSource } from '@atlassian/structured-doc
 
 const documentation: ComponentStructuredContentSource[] = [
 	{
-		name: 'Spotlight',
-		description: 'A component for quick search and command execution.',
-		status: 'general-availability',
+		name: 'SpotlightCard',
+		description:
+			'A spotlight introduces users to points of interest, from focused messages to multi-step tours.',
+		status: 'open-beta',
 		import: {
-			name: 'Spotlight',
+			name: 'SpotlightCard',
 			package: '@atlaskit/spotlight',
 			type: 'named',
 			packagePath: path.resolve(__dirname),
 			packageJson: require('./package.json'),
 		},
 		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',
+			'Use for onboarding, feature discovery, or highlighting UI',
+			'Keep content to a single step when possible; max three steps for tours',
+			'Always include a dismiss control as the first focusable element',
+			'Use primary and secondary actions for buttons or links as needed',
 		],
 		accessibilityGuidelines: [
-			'Ensure proper keyboard navigation',
-			'Provide clear search functionality',
-			'Use appropriate ARIA attributes',
-			'Consider screen reader announcements',
+			'Dismiss control must be first focusable element',
+			'Ensure spotlight content is understandable in seconds',
+		],
+		examples: [
+			{
+				name: 'Spotlight Card',
+				description: 'Spotlight example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'onboarding', 'feature', 'discovery', 'card'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightHeader',
+		description: 'Header section of a spotlight card. Contains the headline and controls.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightHeader',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Contains the headline and dismiss/control area'],
+		examples: [
+			{
+				name: 'Spotlight Header',
+				description: 'SpotlightHeader example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'header'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightBody',
+		description: 'Main content area of a spotlight card.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightBody',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		examples: [
+			{
+				name: 'Spotlight Body',
+				description: 'SpotlightBody example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'body', 'content'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightFooter',
+		description: 'Footer section of a spotlight card. Contains action buttons or links.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightFooter',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Contains primary and secondary action buttons or links'],
+		examples: [
+			{
+				name: 'Spotlight Footer',
+				description: 'SpotlightFooter example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'footer', 'actions'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'PopoverProvider',
+		description:
+			'Context provider for positioning spotlight content. Wrap with PopoverTarget and PopoverContent.',
+		status: 'open-beta',
+		import: {
+			name: 'PopoverProvider',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Wraps the target element and spotlight content for positioning'],
+		examples: [
+			{
+				name: 'Popover Provider',
+				description: 'PopoverProvider example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'popover', 'provider', 'positioning'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'PopoverContent',
+		description: 'Renders the spotlight card content. Use with PopoverProvider and PopoverTarget.',
+		status: 'open-beta',
+		import: {
+			name: 'PopoverContent',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Placement is static—choose placement that prevents overflow'],
+		examples: [
+			{
+				name: 'Popover Content',
+				description: 'PopoverContent example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'popover', 'content', 'positioning'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'PopoverTarget',
+		description:
+			'The element the spotlight is positioned relative to. Use with PopoverProvider and PopoverContent.',
+		status: 'open-beta',
+		import: {
+			name: 'PopoverTarget',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Wrap the UI element the spotlight points to'],
+		examples: [
+			{
+				name: 'Popover Target',
+				description: 'PopoverTarget example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'popover', 'target', 'positioning'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightDismissControl',
+		description:
+			'Required close/dismiss button for spotlight cards. Must be the first focusable element.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightDismissControl',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Required for all spotlights—must be the first focusable element for accessibility',
+		],
+		accessibilityGuidelines: ['Must be first focusable element for proper focus order'],
+		examples: [
+			{
+				name: 'Spotlight Dismiss Control',
+				description: 'SpotlightDismissControl example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'dismiss', 'close', 'control'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightHeadline',
+		description: 'The headline/title of a spotlight card. Use within SpotlightHeader.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightHeadline',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Keep headlines concise and understandable in seconds'],
+		examples: [
+			{
+				name: 'Spotlight Headline',
+				description: 'SpotlightHeadline example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
+		],
+		keywords: ['spotlight', 'headline', 'title'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SpotlightActions',
+		description: 'Container for spotlight footer action buttons or links.',
+		status: 'open-beta',
+		import: {
+			name: 'SpotlightActions',
+			package: '@atlaskit/spotlight',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Container for primary and secondary action buttons or links'],
+		examples: [
+			{
+				name: 'Spotlight Actions',
+				description: 'SpotlightActions example',
+				source: path.resolve(__dirname, './examples/constellation/actions.tsx'),
+			},
 		],
-		examples: [],
-		keywords: ['spotlight', 'search', 'command', 'palette', 'quick'],
+		keywords: ['spotlight', 'actions', 'footer', 'buttons'],
 		categories: ['navigation'],
 	},
 ];