@atlaskit/primitives 14.14.2 → 14.15.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/primitives
 
+## 14.15.0
+
+### Minor Changes
+
+- [`fe9321ccb4bd7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe9321ccb4bd7) -
+  The Focusable component now resets the `outline` style when the element matches the pseudo-class
+  `:focus` but not `:focus-visible`. This is to ensure the focus ring is not applied when it should
+  not be. Some apps have global styles targeting all buttons and anchors, adding an `outline` on
+  `:focus`. This will unset that style.
+
+  This change is behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.14.3
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+
 ## 14.14.2
 
 ### Patch Changes

package/dist/cjs/compiled/components/anchor.js

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/focusable.compiled.css

@@ -1,4 +1,7 @@
-._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah31gt5:focus-visible{outline-offset:var(--_12dc40g)}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}

package/dist/cjs/compiled/components/focusable.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["as", "children", "isInset", "testId", "style", "xcss"],
   _excluded2 = ["className"];
 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); }
@@ -21,6 +22,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var focusRingStyles = null;
 var insetFocusRingStyles = null;
+
+// This is added to override and reset global styles that apps might be applying - for example,
+// at the time of writing, Jira has global styles that targets all button and anchor elements,
+// adding an outline on :focus.
+var outlineResetStyles = null;
 /**
  * __Focus ring__
  *
@@ -43,7 +49,7 @@ var Focusable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, safeHtmlAttributes, {
     // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ref: ref,
-    className: (0, _runtime.ax)(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", xcss])
+    className: (0, _runtime.ax)(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", (0, _platformFeatureFlags.fg)('platform_dst_compiled_primitives_outline_reset') && "_ymio1r31 _ypr0glyw _zcxs1o36", xcss])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
 

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/anchor.js

@@ -44,7 +44,8 @@ var focusRingStyles = (0, _react2.css)({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: "".concat(_styleMaps.borderWidthMap['border.width'], " solid")
     }
   }
 });
@@ -104,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -39,7 +39,8 @@ var focusRingStyles = (0, _react2.css)({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: "".concat(_styleMaps.borderWidthMap['border.width'], " solid")
     }
   }
 });
@@ -96,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.js

@@ -56,7 +56,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/focusable.compiled.css

@@ -1,4 +1,7 @@
-._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}

package/dist/es2019/compiled/components/focusable.js

@@ -4,8 +4,14 @@ import "./focusable.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const focusRingStyles = null;
 const insetFocusRingStyles = null;
+
+// This is added to override and reset global styles that apps might be applying - for example,
+// at the time of writing, Jira has global styles that targets all button and anchor elements,
+// adding an outline on :focus.
+const outlineResetStyles = null;
 /**
  * __Focus ring__
  *
@@ -30,7 +36,7 @@ const Focusable = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
     // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ref: ref,
-    className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gjf _2mwq1gjf", xcss])
+    className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gjf _2mwq1gjf", fg('platform_dst_compiled_primitives_outline_reset') && "_ymio1r31 _ypr0glyw _zcxs1o36", xcss])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: style,

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -33,7 +33,8 @@ const focusRingStyles = css({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: `${borderWidthMap['border.width']} solid`
     }
   }
 });
@@ -93,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -29,7 +29,8 @@ const focusRingStyles = css({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: `${borderWidthMap['border.width']} solid`
     }
   }
 });
@@ -85,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/anchor.js

@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/focusable.compiled.css

@@ -1,4 +1,7 @@
-._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah31gt5:focus-visible{outline-offset:var(--_12dc40g)}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}

package/dist/esm/compiled/components/focusable.js

@@ -10,8 +10,14 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var focusRingStyles = null;
 var insetFocusRingStyles = null;
+
+// This is added to override and reset global styles that apps might be applying - for example,
+// at the time of writing, Jira has global styles that targets all button and anchor elements,
+// adding an outline on :focus.
+var outlineResetStyles = null;
 /**
  * __Focus ring__
  *
@@ -34,7 +40,7 @@ var Focusable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
     // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ref: ref,
-    className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", xcss])
+    className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", fg('platform_dst_compiled_primitives_outline_reset') && "_ymio1r31 _ypr0glyw _zcxs1o36", xcss])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
 

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -38,7 +38,8 @@ var focusRingStyles = css({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: "".concat(borderWidthMap['border.width'], " solid")
     }
   }
 });
@@ -98,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -33,7 +33,8 @@ var focusRingStyles = css({
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
-      outline: '1px solid'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      outline: "".concat(borderWidthMap['border.width'], " solid")
     }
   }
 });
@@ -90,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "14.14.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/offerings.json

@@ -0,0 +1,298 @@
+[
+	{
+		"name": "Anchor",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Anchor",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["anchor", "link", "navigation", "href", "url", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Anchor component for navigation links with compiled styling support.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide clear link text that describes the destination",
+			"Use appropriate ARIA attributes for links",
+			"Ensure keyboard navigation support",
+			"Provide clear visual indicators for link state",
+			"Use descriptive link text for screen readers"
+		],
+		"usageGuidelines": [
+			"Use for navigation links to other pages or sections",
+			"Leverage compiled styling for performance",
+			"Use appropriate link styling and states",
+			"Consider link behavior and target attributes"
+		],
+		"contentGuidelines": [
+			"Use clear, descriptive link text",
+			"Maintain consistent link styling",
+			"Consider link context and destination"
+		],
+		"examples": ["./examples/ai/anchor.tsx"]
+	},
+	{
+		"name": "Bleed",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Bleed",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["bleed", "layout", "margin", "spacing", "edge", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Bleed component for extending content beyond container boundaries with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for extending content beyond container margins",
+			"Leverage compiled styling for performance",
+			"Use appropriate bleed directions and amounts",
+			"Consider responsive behavior and container constraints"
+		],
+		"contentGuidelines": [
+			"Use for appropriate layout bleeding",
+			"Maintain consistent bleeding patterns",
+			"Consider content hierarchy and visual flow"
+		],
+		"examples": ["./examples/ai/bleed.tsx"]
+	},
+	{
+		"name": "Box",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Box",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["box", "container", "div", "layout", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Box component for layout and container purposes with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for basic layout and container needs",
+			"Leverage compiled styling for performance",
+			"Use appropriate spacing and layout props",
+			"Consider semantic HTML when possible"
+		],
+		"contentGuidelines": [
+			"Use for appropriate layout purposes",
+			"Maintain consistent spacing and layout patterns",
+			"Consider accessibility and semantic structure"
+		],
+		"examples": ["./examples/ai/box.tsx"]
+	},
+	{
+		"name": "Flex",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Flex",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["flex", "layout", "flexbox", "alignment", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Flex component for flexbox layout with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for flexbox layout needs",
+			"Leverage compiled styling for performance",
+			"Use appropriate flex properties and alignment",
+			"Consider responsive behavior"
+		],
+		"contentGuidelines": [
+			"Use for appropriate flex layout",
+			"Maintain consistent flex patterns",
+			"Consider content alignment and distribution"
+		],
+		"examples": ["./examples/ai/flex.tsx"]
+	},
+	{
+		"name": "Focusable",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Focusable",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["focusable", "focus", "keyboard", "navigation", "accessibility", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Focusable component for keyboard navigation and focus management with compiled styling support.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide clear focus indicators",
+			"Use appropriate tab order and navigation",
+			"Ensure keyboard accessibility",
+			"Provide clear visual feedback for focus state",
+			"Use appropriate ARIA attributes"
+		],
+		"usageGuidelines": [
+			"Use for elements that need keyboard focus",
+			"Leverage compiled styling for performance",
+			"Use appropriate focus management",
+			"Consider keyboard navigation patterns"
+		],
+		"contentGuidelines": [
+			"Use for appropriate focusable content",
+			"Maintain consistent focus patterns",
+			"Consider keyboard navigation flow"
+		],
+		"examples": ["./examples/ai/focusable.tsx"]
+	},
+	{
+		"name": "Grid",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Grid",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["grid", "layout", "css-grid", "alignment", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Grid component for CSS Grid layout with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for CSS Grid layout needs",
+			"Leverage compiled styling for performance",
+			"Use appropriate grid properties and alignment",
+			"Consider responsive behavior"
+		],
+		"contentGuidelines": [
+			"Use for appropriate grid layout",
+			"Maintain consistent grid patterns",
+			"Consider content alignment and distribution"
+		],
+		"examples": ["./examples/ai/grid.tsx"]
+	},
+	{
+		"name": "Inline",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Inline",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["inline", "layout", "horizontal", "spacing", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Inline component for horizontal layout with consistent spacing.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for horizontal layout needs",
+			"Leverage compiled styling for performance",
+			"Use appropriate spacing and alignment props",
+			"Consider wrapping behavior"
+		],
+		"contentGuidelines": [
+			"Use for appropriate horizontal grouping",
+			"Maintain consistent spacing patterns",
+			"Consider content flow and readability"
+		],
+		"examples": ["./examples/ai/inline.tsx"]
+	},
+	{
+		"name": "MetricText",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "MetricText",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["text", "typography", "font", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Text component for typography with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for text content with consistent typography",
+			"Leverage compiled styling for performance",
+			"Use appropriate font size and weight props",
+			"Consider semantic HTML elements"
+		],
+		"contentGuidelines": [
+			"Use for appropriate text content",
+			"Maintain consistent typography patterns",
+			"Consider readability and hierarchy"
+		],
+		"examples": ["./examples/ai/metric-text.tsx"]
+	},
+	{
+		"name": "Pressable",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Pressable",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["pressable", "interaction", "touch", "click", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Pressable component for handling touch and click interactions with compiled styling support.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide clear visual feedback for press states",
+			"Ensure appropriate touch target sizes",
+			"Use appropriate ARIA attributes for interactive elements",
+			"Provide keyboard navigation support"
+		],
+		"usageGuidelines": [
+			"Use for interactive elements that need press feedback",
+			"Leverage compiled styling for performance",
+			"Use appropriate press states and feedback",
+			"Consider touch target accessibility"
+		],
+		"contentGuidelines": [
+			"Use for appropriate interactive content",
+			"Maintain consistent press patterns",
+			"Consider user interaction expectations"
+		],
+		"examples": ["./examples/ai/pressable.tsx"]
+	},
+	{
+		"name": "Stack",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Stack",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["stack", "layout", "vertical", "horizontal", "spacing", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Stack component for vertical and horizontal layout with consistent spacing.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for consistent vertical or horizontal layouts",
+			"Leverage compiled styling for performance",
+			"Use appropriate spacing and alignment props",
+			"Consider responsive behavior"
+		],
+		"contentGuidelines": [
+			"Use for appropriate layout grouping",
+			"Maintain consistent spacing patterns",
+			"Consider content hierarchy and flow"
+		],
+		"examples": ["./examples/ai/stack.tsx"]
+	},
+	{
+		"name": "Text",
+		"package": "@atlaskit/primitives",
+		"import": {
+			"name": "Text",
+			"package": "@atlaskit/primitives/compiled",
+			"type": "named"
+		},
+		"keywords": ["text", "typography", "font", "primitive", "compiled"],
+		"categories": ["primitive"],
+		"shortDescription": "A primitive Text component for typography with compiled styling support.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for text content with consistent typography",
+			"Leverage compiled styling for performance",
+			"Use appropriate font size and weight props",
+			"Consider semantic HTML elements"
+		],
+		"contentGuidelines": [
+			"Use for appropriate text content",
+			"Maintain consistent typography patterns",
+			"Consider readability and hierarchy"
+		],
+		"generativeInstructions": "./docs/ai/text-instructions.md",
+		"examples": ["./examples/ai/text.tsx"]
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.14.2",
+	"version": "14.15.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -133,10 +133,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/app-provider": "^3.1.0",
+		"@atlaskit/app-provider": "^3.2.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -158,12 +159,12 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/docs": "^11.0.0",
+		"@atlaskit/docs": "^11.1.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/flag": "^17.4.0",
-		"@atlaskit/form": "^12.5.0",
+		"@atlaskit/form": "^13.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/icon-object": "^7.2.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.2.0",
@@ -177,6 +178,7 @@
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlassian/analytics-bridge": "^0.7.0",
 		"@atlassian/codegen": "^0.1.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
@@ -220,5 +222,10 @@
 				"dist/types-ts4.5/index.d.ts"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_dst_compiled_primitives_outline_reset": {
+			"type": "boolean"
+		}
 	}
 }