@atlaskit/checkbox 17.3.2 → 17.3.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/checkbox
 
+## 17.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.3.3
+
+### Patch Changes
+
+- [`bfa01f2ed5c65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfa01f2ed5c65) -
+  Internal only CSS refactor to eliminate nested CSS selectors (specifically sibling combinators
+  like & + svg) in favor of an atomic-friendly styling approach using CSS custom properties. This
+  change is behind the `platform-checkbox-atomic-styles` feature gate.
+
 ## 17.3.2
 
 ### Patch Changes

package/codemods/migrations/remove-imports.tsx

@@ -1,6 +1,9 @@
 import { createRemoveImportsFor } from '../utils';
 
-export const removeThemeImports: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveImportsFor({
+export const removeThemeImports: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveImportsFor({
 	importsToRemove: ['ComponentTokens', 'ThemeFn'],
 	packagePath: '@atlaskit/checkbox/types',
 	comment: `This file uses exports used to help theme @atlaskit/checkbox which

package/codemods/migrations/remove-props.tsx

@@ -1,8 +1,14 @@
 import { createRemoveFuncFor } from '../utils';
 
-export const removeFullWidth: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');
+export const removeFullWidth: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');
 
-export const removeOverrides: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor(
+export const removeOverrides: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
 	'@atlaskit/checkbox',
 	'Checkbox',
 	'overrides',
@@ -13,7 +19,10 @@ export const removeOverrides: (j: import("jscodeshift/src/core").JSCodeshift, so
   of Checkbox will have likely changed.`,
 );
 
-export const removeTheme: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor(
+export const removeTheme: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
 	'@atlaskit/checkbox',
 	'Checkbox',
 	'theme',
@@ -24,4 +33,7 @@ export const removeTheme: (j: import("jscodeshift/src/core").JSCodeshift, source
   The appearance of Checkbox will have likely changed.`,
 );
 
-export const removeSize: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');
+export const removeSize: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/migrations/rename-import.tsx

@@ -4,19 +4,28 @@ import { createRenameImportFor } from '../utils';
 // there are a lot of possible things to fix. Having searched on SourceTree
 // these are the only things that need to be fixed
 
-export const renameTypeImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxProps',
 	oldPackagePath: '@atlaskit/checkbox/types',
 	newPackagePath: '@atlaskit/checkbox',
 });
 
-export const renameDeepTypeImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameDeepTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxProps',
 	oldPackagePath: '@atlaskit/checkbox/dist/cjs/types',
 	newPackagePath: '@atlaskit/checkbox',
 });
 
-export const renameCheckboxWithoutAnalyticsImport: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameImportFor({
+export const renameCheckboxWithoutAnalyticsImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
 	componentName: 'CheckboxWithoutAnalytics',
 	newComponentName: 'Checkbox',
 	oldPackagePath: '@atlaskit/checkbox/Checkbox',

package/codemods/migrations/rename-input-ref-to-ref.tsx

@@ -1,8 +1,6 @@
 import { createRenameFuncFor } from '../utils';
 
-export const renameInputRef: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameFuncFor(
-	'@atlaskit/checkbox',
-	'Checkbox',
-	'inputRef',
-	'ref',
-);
+export const renameInputRef: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameFuncFor('@atlaskit/checkbox', 'Checkbox', 'inputRef', 'ref');

package/codemods/utils.tsx

@@ -20,7 +20,7 @@ export function getNamedSpecifier(
 	source: any,
 	specifier: string,
 	importName: string,
-) {
+): any {
 	const specifiers = source
 		.find(j.ImportDeclaration)
 		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
@@ -61,7 +61,11 @@ export function getJSXAttributesByName(
 		});
 }
 
-export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string) {
+export function hasImportDeclaration(
+	j: core.JSCodeshift,
+	source: any,
+	importPath: string,
+): boolean {
 	const imports = source
 		.find(j.ImportDeclaration)
 		.filter(
@@ -78,7 +82,7 @@ export function findIdentifierAndReplaceAttribute(
 	identifierName: string,
 	searchAttr: string,
 	replaceWithAttr: string,
-) {
+): void {
 	source
 		.find(j.JSXElement)
 		.find(j.JSXOpeningElement)
@@ -136,7 +140,7 @@ export function addCommentToStartOfFile({
 	j: core.JSCodeshift;
 	base: Collection<Node>;
 	message: string;
-}) {
+}): void {
 	addCommentBefore({
 		j,
 		target: base.find(j.Program),
@@ -152,7 +156,7 @@ export function addCommentBefore({
 	j: core.JSCodeshift;
 	target: Collection<Program> | Collection<ImportDeclaration>;
 	message: string;
-}) {
+}): void {
 	const content: string = ` TODO: (from codemod) ${clean(message)} `;
 	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
 		path.value.comments = path.value.comments || [];
@@ -178,7 +182,7 @@ export function tryCreateImport({
 	base: Collection<any>;
 	relativeToPackage: string;
 	packageName: string;
-}) {
+}): void {
 	const exists: boolean =
 		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
 			.length > 0;
@@ -203,7 +207,7 @@ export function addToImport({
 	base: Collection<any>;
 	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
 	packageName: string;
-}) {
+}): void {
 	base
 		.find(j.ImportDeclaration)
 		.filter((path) => path.value.source.value === packageName)
@@ -223,7 +227,12 @@ export function addToImport({
 		});
 }
 
-export const createRenameFuncFor =
+export const createRenameFuncFor: (
+	component: string,
+	importName: string,
+	from: string,
+	to: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, from: string, to: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier = getNamedSpecifier(j, source, component, importName);
@@ -253,7 +262,12 @@ export const createRenameFuncFor =
 		}
 	};
 
-export const createRemoveFuncFor =
+export const createRemoveFuncFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	(component: string, importName: string, prop: string, comment?: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
 		const specifier =
@@ -274,7 +288,17 @@ export const createRemoveFuncFor =
 		});
 	};
 
-export const createRenameImportFor =
+export const createRenameImportFor: ({
+	componentName,
+	newComponentName,
+	oldPackagePath,
+	newPackagePath,
+}: {
+	componentName: string;
+	newComponentName?: string;
+	oldPackagePath: string;
+	newPackagePath: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		componentName,
 		newComponentName,
@@ -355,7 +379,15 @@ export const createRenameImportFor =
 			.remove();
 	};
 
-export const createRemoveImportsFor =
+export const createRemoveImportsFor: ({
+	importsToRemove,
+	packagePath,
+	comment,
+}: {
+	importsToRemove: string[];
+	packagePath: string;
+	comment: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
 	({
 		importsToRemove,
 		packagePath,
@@ -425,16 +457,21 @@ export const createRemoveImportsFor =
 		}
 	};
 
-export const createTransformer =
+export const createTransformer: (
+	component: string,
+	migrates: {
+		(j: core.JSCodeshift, source: Collection<Node>): void;
+	}[],
+) => (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
 	(component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
-	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-		const source: Collection<Node> = j(fileInfo.source);
+	(fileInfo: FileInfo, { jscodeshift }: API, options: Options) => {
+		const source: Collection<Node> = jscodeshift(fileInfo.source);
 
-		if (!hasImportDeclaration(j, source, component)) {
+		if (!hasImportDeclaration(jscodeshift, source, component)) {
 			return fileInfo.source;
 		}
 
-		migrates.forEach((tf) => tf(j, source));
+		migrates.forEach((tf) => tf(jscodeshift, source));
 
 		return source.toSource(options.printOptions || { quote: 'single' });
 	};

package/dist/cjs/checkbox.js

@@ -16,19 +16,29 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss", "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); }
 /**
+ * The input is visually hidden but remains in the DOM for accessibility.
+ * State-based styling is handled by the Label component using CSS custom properties
+ * that cascade to the CheckboxIcon, avoiding nested sibling selectors.
+ */
+var checkboxStyles = {
+  root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf"
+};
+
+/**
+ * Legacy hidden input styles with nested sibling selectors.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
  * Using `cssMap` to avoid a Compiled bug with the transformed styles.
  * It was using a CSS variable for the outline template string,
  * which broke because of the use of a sibling selector.
  *
  * Related to: https://github.com/atlassian-labs/compiled/pull/1795
- *
- * Using `cssMap` seems to be a workaround for this.
  */
-var checkboxStyles = {
+var checkboxStylesLegacy = {
   root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
 };
 
@@ -91,6 +101,9 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(_internal.Label, {
     isDisabled: isDisabled,
+    isChecked: (0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') ? isChecked : undefined,
+    isIndeterminate: (0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
+    isInvalid: (0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') ? isInvalid : undefined,
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
@@ -110,7 +123,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.ax)([checkboxStyles.root, className]),
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') && checkboxStyles.root, !(0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

package/dist/cjs/internal/checkbox-icon.compiled.css

@@ -1,4 +1,14 @@
-._18m915vq{overflow-y:hidden}
+
+._1a3742bt{outline:var(--checkbox-outline)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._nd5lfibj{grid-area:1/1/2/2}
+._v56411so{transition:stroke .2s ease-in-out}
+._v5641mn3{transition:color .2s ease-in-out,fill .2s ease-in-out}._18m915vq{overflow-y:hidden}
+._1cwg1i6y{outline-offset:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
+._1s17hteq{stroke:var(--checkbox-border-color)}
+._1snbe4h9{stroke-width:var(--ds-border-width,1px)}
 ._lcxvglyw{pointer-events:none}
-._lswuvuon{fill:var(--ds-surface,#fff)}
+._lswu1kgh{fill:var(--checkbox-tick-color,var(--ds-surface,#fff))}
+._lswuvuon{fill:var(--ds-surface,#fff)}
+._syazmov0{color:var(--checkbox-background-color)}

package/dist/cjs/internal/checkbox-icon.js

@@ -10,8 +10,23 @@ require("./checkbox-icon.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 svgStyles = null;
+/**
+ * Styles for the checkbox icon.
+ * CSS custom properties for colors are set by the parent Label element
+ * and consumed directly in these styles.
+ */
+var svgStyles = {
+  root: "_nd5lfibj _1reo15vq _18m915vq _v5641mn3 _2rko12b0 _1a3742bt _lcxvglyw _syazmov0 _lswu1kgh _1cwg1i6y",
+  rect: "_v56411so _1snbe4h9 _1s17hteq"
+};
+
+/**
+ * Legacy SVG styles.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
+ */
+var svgStylesLegacy = null;
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return /*#__PURE__*/React.createElement("path", {
@@ -33,7 +48,6 @@ function getIcon(isIndeterminate, isChecked) {
   // No icon
   return null;
 }
-
 /**
  * __Checkbox icon__
  *
@@ -48,6 +62,27 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var icon = (0, _react.useMemo)(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
+  if ((0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      role: "presentation",
+      className: (0, _runtime.ax)([svgStyles.root])
+    }, /*#__PURE__*/React.createElement("g", {
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("rect", {
+      fill: "currentColor",
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      className: (0, _runtime.ax)([svgStyles.rect])
+    }), icon));
+  }
+
+  // Legacy rendering with inline style props for CSS variable consumption
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
     height: 24,

package/dist/cjs/internal/label.compiled.css

@@ -2,13 +2,20 @@
 ._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
 ._13hr1j28{--local-tick-rest:transparent}
 ._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
+._1c53glyw{--checkbox-outline:none}
 ._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
 ._1e0c11p5{display:grid}
+._1e9d1j28{--checkbox-tick-color:transparent}
+._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
 ._1ejihkll{grid-auto-columns:1fr}
 ._1esz1j4g{--local-background-checked:var(--_1gcp7nr)}
 ._1g1fe69j{--local-border-active:var(--_rczcge)}
 ._1j3h1380{--local-border-invalid:var(--_1i4xulb)}
 ._1nzs1kc0{--local-background-active:var(--_1cd0fcx)}
+._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
+._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
 ._1rdaeh7q{--local-tick-checked:var(--_jf353p)}
 ._1sfg1380{--local-border-checked-invalid:var(--_1i4xulb)}
 ._1yjc3zdg{--local-border-focus:var(--_xjqa3d)}
@@ -17,13 +24,35 @@
 ._ay2w1ouc{--local-background-disabled:var(--_r5pknd)}
 ._d51u12ci{--local-background-hover:var(--_1z08gfx)}
 ._eawbxz7c{--local-tick-active:var(--_uq1ko9)}
+._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
+._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
 ._fpdj1ouc{--local-border-disabled:var(--_r5pknd)}
 ._h5e31kd8{--local-background:var(--_4mkb4g)}
 ._l6wk1j4g{--local-border-checked:var(--_1gcp7nr)}
 ._oaj1ddza{--local-border-hover:var(--_vnm8xo)}
 ._phftddza{--local-border:var(--_vnm8xo)}
+._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
 ._syaz7wap{color:var(--_1ynhf1h)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazovqm{color:var(--_5xk3r4)}
 ._umai184x{grid-auto-rows:min-content}
 ._yp0j1ehr{--local-background-checked-hover:var(--_14y1fod)}
-._yv0ey09t{grid-template-columns:min-content auto}
+._yv0ey09t{grid-template-columns:min-content auto}
+._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
+._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._q29qby5v:hover{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
+._cz1uby5v:active{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
+._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
+@media screen and (forced-colors:active){._1s07gir2{--checkbox-border-color:Highlight}._jom5wc43{--checkbox-background-color:Canvas}._1s0718qt{--checkbox-border-color:GrayText}._106f18qt{--checkbox-tick-color:GrayText}._1s071onz{--checkbox-border-color:CanvasText}._106f1onz{--checkbox-tick-color:CanvasText}}

package/dist/cjs/internal/label.js

@@ -9,19 +9,59 @@ exports.default = Label;
 require("./label.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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); }
+/**
+ * Base state styles with CSS custom properties.
+ * Pseudo-selectors (:hover, :focus-within, :active) on the label element
+ * update CSS variables that cascade to the CheckboxIcon.
+ * This avoids nested sibling selectors.
+ *
+ * Uses `css` over `cssMap` to work around a bug in Compiled types when
+ * using CSS variables in pseudo-selectors.
+ */
 var baseStyles = null;
 var textLabelLayoutStyles = null;
+
+// Checked/Indeterminate state
+var checkedStyles = null;
+
+// Invalid state - must override hover/active to maintain red border
+var invalidStyles = null;
+
+// Disabled state - must override hover/active to maintain disabled appearance
 var disabledStyles = null;
-var labelStyles = null;
+
+// Disabled + Checked/Indeterminate
+var disabledCheckedStyles = null;
+
+/**
+ * Legacy label styles with --local-* CSS custom properties.
+ * These are consumed by the nested sibling selectors in checkbox.tsx.
+ */
+var legacyBaseStyles = null;
+var legacyTextLabelLayoutStyles = null;
+var legacyDisabledStyles = null;
+var legacyLabelStyles = null;
 function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
+    isChecked = _ref.isChecked,
+    isIndeterminate = _ref.isIndeterminate,
+    isInvalid = _ref.isInvalid,
     testId = _ref.testId,
     label = _ref.label,
     id = _ref.id,
     xcss = _ref.xcss;
+  if ((0, _platformFeatureFlags.fg)('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("label", {
+      className: (0, _runtime.ax)(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwnby5v _f0grby5v _syaz1tvo _80om13gf _1vj5by5v _q29qby5v _dh4gby5v _cz1uby5v _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      id: id
+    }, children);
+  }
   return /*#__PURE__*/React.createElement("label", {
     className: (0, _runtime.ax)(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
     "data-testid": testId,

package/dist/es2019/checkbox.js

@@ -6,17 +6,27 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /**
+ * The input is visually hidden but remains in the DOM for accessibility.
+ * State-based styling is handled by the Label component using CSS custom properties
+ * that cascade to the CheckboxIcon, avoiding nested sibling selectors.
+ */
+const checkboxStyles = {
+  root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf"
+};
+
+/**
+ * Legacy hidden input styles with nested sibling selectors.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
  * Using `cssMap` to avoid a Compiled bug with the transformed styles.
  * It was using a CSS variable for the outline template string,
  * which broke because of the use of a sibling selector.
  *
  * Related to: https://github.com/atlassian-labs/compiled/pull/1795
- *
- * Using `cssMap` seems to be a workaround for this.
  */
-const checkboxStyles = {
+const checkboxStylesLegacy = {
   root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
 };
 
@@ -73,6 +83,9 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
+    isChecked: fg('platform-checkbox-atomic-styles') ? isChecked : undefined,
+    isIndeterminate: fg('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
+    isInvalid: fg('platform-checkbox-atomic-styles') ? isInvalid : undefined,
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
@@ -92,7 +105,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([checkboxStyles.root, className]),
+    className: ax([fg('platform-checkbox-atomic-styles') && checkboxStyles.root, !fg('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && `${testId}--hidden-checkbox`,

package/dist/es2019/internal/checkbox-icon.compiled.css

@@ -1,4 +1,14 @@
-._18m915vq{overflow-y:hidden}
+
+._1a3742bt{outline:var(--checkbox-outline)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._nd5lfibj{grid-area:1/1/2/2}
+._v56411so{transition:stroke .2s ease-in-out}
+._v5641mn3{transition:color .2s ease-in-out,fill .2s ease-in-out}._18m915vq{overflow-y:hidden}
+._1cwg1i6y{outline-offset:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
+._1s17hteq{stroke:var(--checkbox-border-color)}
+._1snbe4h9{stroke-width:var(--ds-border-width,1px)}
 ._lcxvglyw{pointer-events:none}
-._lswuvuon{fill:var(--ds-surface,#fff)}
+._lswu1kgh{fill:var(--checkbox-tick-color,var(--ds-surface,#fff))}
+._lswuvuon{fill:var(--ds-surface,#fff)}
+._syazmov0{color:var(--checkbox-background-color)}

package/dist/es2019/internal/checkbox-icon.js

@@ -3,7 +3,22 @@ import "./checkbox-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';
-const svgStyles = null;
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * Styles for the checkbox icon.
+ * CSS custom properties for colors are set by the parent Label element
+ * and consumed directly in these styles.
+ */
+const svgStyles = {
+  root: "_nd5lfibj _1reo15vq _18m915vq _v5641mn3 _2rko12b0 _1a3742bt _lcxvglyw _syazmov0 _lswu1kgh _1cwg1i6y",
+  rect: "_v56411so _1snbe4h9 _1s17hteq"
+};
+
+/**
+ * Legacy SVG styles.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
+ */
+const svgStylesLegacy = null;
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return /*#__PURE__*/React.createElement("path", {
@@ -25,7 +40,6 @@ function getIcon(isIndeterminate, isChecked) {
   // No icon
   return null;
 }
-
 /**
  * __Checkbox icon__
  *
@@ -39,6 +53,27 @@ const CheckboxIcon = /*#__PURE__*/memo(({
   isChecked
 }) => {
   const icon = useMemo(() => getIcon(isIndeterminate, isChecked), [isIndeterminate, isChecked]);
+  if (fg('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      role: "presentation",
+      className: ax([svgStyles.root])
+    }, /*#__PURE__*/React.createElement("g", {
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("rect", {
+      fill: "currentColor",
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      className: ax([svgStyles.rect])
+    }), icon));
+  }
+
+  // Legacy rendering with inline style props for CSS variable consumption
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
     height: 24,

package/dist/es2019/internal/label.compiled.css

@@ -2,13 +2,20 @@
 ._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
 ._13hr1j28{--local-tick-rest:transparent}
 ._18q015t7{--local-tick-disabled:var(--ds-icon-disabled,#a5adba)}
+._1c53glyw{--checkbox-outline:none}
 ._1dikhh5a{--local-border-checked-hover:var(--ds-background-selected-bold-hovered,#0065ff)}
 ._1e0c11p5{display:grid}
+._1e9d1j28{--checkbox-tick-color:transparent}
+._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
 ._1ejihkll{grid-auto-columns:1fr}
 ._1eszzyvw{--local-background-checked:var(--ds-background-selected-bold,#0052cc)}
 ._1g1funzk{--local-border-active:var(--ds-border,#deebff)}
 ._1j3h1q3k{--local-border-invalid:var(--ds-border-danger,#ff5630)}
 ._1nzs11d3{--local-background-active:var(--ds-background-input-pressed,#deebff)}
+._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
+._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
 ._1rda1qbb{--local-tick-checked:var(--ds-icon-inverse,#fafbfc)}
 ._1sfg1q3k{--local-border-checked-invalid:var(--ds-border-danger,#ff5630)}
 ._1yjc194a{--local-border-focus:var(--ds-border-focused,#2684ff)}
@@ -17,13 +24,34 @@
 ._ay2w1y1w{--local-background-disabled:var(--ds-background-disabled,#f4f5f7)}
 ._d51u10ko{--local-background-hover:var(--ds-background-input-hovered,#ebecf0)}
 ._eawb1dzn{--local-tick-active:var(--ds-icon-inverse,#0052cc)}
+._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
+._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
 ._fpdj1y1w{--local-border-disabled:var(--ds-background-disabled,#f4f5f7)}
 ._h5e3mag2{--local-background:var(--ds-background-input,#fafbfc)}
 ._l6wkzyvw{--local-border-checked:var(--ds-background-selected-bold,#0052cc)}
 ._oaj11fmg{--local-border-hover:var(--ds-border-input,#7a869a)}
 ._phft1fmg{--local-border:var(--ds-border-input,#7a869a)}
 ._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazj3m3{color:var(--ds-text,#091e42)}
 ._umai184x{grid-auto-rows:min-content}
 ._yp0jhh5a{--local-background-checked-hover:var(--ds-background-selected-bold-hovered,#0065ff)}
-._yv0ey09t{grid-template-columns:min-content auto}
+._yv0ey09t{grid-template-columns:min-content auto}
+._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
+._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._q29qby5v:hover{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
+._cz1uby5v:active{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
+._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
+@media screen and (forced-colors:active){._1s07gir2{--checkbox-border-color:Highlight}._jom5wc43{--checkbox-background-color:Canvas}._1s0718qt{--checkbox-border-color:GrayText}._106f18qt{--checkbox-tick-color:GrayText}._1s071onz{--checkbox-border-color:CanvasText}._106f1onz{--checkbox-tick-color:CanvasText}}

package/dist/es2019/internal/label.js

@@ -2,19 +2,59 @@
 import "./label.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+/**
+ * Base state styles with CSS custom properties.
+ * Pseudo-selectors (:hover, :focus-within, :active) on the label element
+ * update CSS variables that cascade to the CheckboxIcon.
+ * This avoids nested sibling selectors.
+ *
+ * Uses `css` over `cssMap` to work around a bug in Compiled types when
+ * using CSS variables in pseudo-selectors.
+ */
 const baseStyles = null;
 const textLabelLayoutStyles = null;
+
+// Checked/Indeterminate state
+const checkedStyles = null;
+
+// Invalid state - must override hover/active to maintain red border
+const invalidStyles = null;
+
+// Disabled state - must override hover/active to maintain disabled appearance
 const disabledStyles = null;
-const labelStyles = null;
+
+// Disabled + Checked/Indeterminate
+const disabledCheckedStyles = null;
+
+/**
+ * Legacy label styles with --local-* CSS custom properties.
+ * These are consumed by the nested sibling selectors in checkbox.tsx.
+ */
+const legacyBaseStyles = null;
+const legacyTextLabelLayoutStyles = null;
+const legacyDisabledStyles = null;
+const legacyLabelStyles = null;
 export default function Label({
   children,
   isDisabled,
+  isChecked,
+  isIndeterminate,
+  isInvalid,
   testId,
   label,
   id,
   xcss
 }) {
+  if (fg('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("label", {
+      className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwnby5v _f0grby5v _syaz1tvo _80om13gf _1vj5by5v _q29qby5v _dh4gby5v _cz1uby5v _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      id: id
+    }, children);
+  }
   return /*#__PURE__*/React.createElement("label", {
     className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _syazj3m3 _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz1tvo _80om13gf", "_h5e3mag2 _1nzs11d3 _1eszzyvw _yp0jhh5a _ay2w1y1w _d51u10ko _phft1fmg _1g1funzk _l6wkzyvw _1dikhh5a _1sfg1q3k _fpdj1y1w _1yjc194a _oaj11fmg _1j3h1q3k _eawb1dzn _1rda1qbb _18q015t7 _13hr1j28", xcss]),
     "data-testid": testId,

package/dist/esm/checkbox.js

@@ -9,17 +9,27 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /**
+ * The input is visually hidden but remains in the DOM for accessibility.
+ * State-based styling is handled by the Label component using CSS custom properties
+ * that cascade to the CheckboxIcon, avoiding nested sibling selectors.
+ */
+var checkboxStyles = {
+  root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf"
+};
+
+/**
+ * Legacy hidden input styles with nested sibling selectors.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
  * Using `cssMap` to avoid a Compiled bug with the transformed styles.
  * It was using a CSS variable for the outline template string,
  * which broke because of the use of a sibling selector.
  *
  * Related to: https://github.com/atlassian-labs/compiled/pull/1795
- *
- * Using `cssMap` seems to be a workaround for this.
  */
-var checkboxStyles = {
+var checkboxStylesLegacy = {
   root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef78r4n _1h6r8r4n _smzg1nfn _1dk71nfn _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
 };
 
@@ -82,6 +92,9 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
   }, [isIndeterminate]);
   return /*#__PURE__*/React.createElement(Label, {
     isDisabled: isDisabled,
+    isChecked: fg('platform-checkbox-atomic-styles') ? isChecked : undefined,
+    isIndeterminate: fg('platform-checkbox-atomic-styles') ? isIndeterminate : undefined,
+    isInvalid: fg('platform-checkbox-atomic-styles') ? isInvalid : undefined,
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
@@ -101,7 +114,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
     name: name,
     required: isRequired,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([checkboxStyles.root, className]),
+    className: ax([fg('platform-checkbox-atomic-styles') && checkboxStyles.root, !fg('platform-checkbox-atomic-styles') && checkboxStylesLegacy.root, className]),
     onChange: onChangeAnalytics,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

package/dist/esm/internal/checkbox-icon.compiled.css

@@ -1,4 +1,14 @@
-._18m915vq{overflow-y:hidden}
+
+._1a3742bt{outline:var(--checkbox-outline)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._nd5lfibj{grid-area:1/1/2/2}
+._v56411so{transition:stroke .2s ease-in-out}
+._v5641mn3{transition:color .2s ease-in-out,fill .2s ease-in-out}._18m915vq{overflow-y:hidden}
+._1cwg1i6y{outline-offset:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
+._1s17hteq{stroke:var(--checkbox-border-color)}
+._1snbe4h9{stroke-width:var(--ds-border-width,1px)}
 ._lcxvglyw{pointer-events:none}
-._lswuvuon{fill:var(--ds-surface,#fff)}
+._lswu1kgh{fill:var(--checkbox-tick-color,var(--ds-surface,#fff))}
+._lswuvuon{fill:var(--ds-surface,#fff)}
+._syazmov0{color:var(--checkbox-background-color)}

package/dist/esm/internal/checkbox-icon.js

@@ -3,7 +3,22 @@ import "./checkbox-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';
-var svgStyles = null;
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * Styles for the checkbox icon.
+ * CSS custom properties for colors are set by the parent Label element
+ * and consumed directly in these styles.
+ */
+var svgStyles = {
+  root: "_nd5lfibj _1reo15vq _18m915vq _v5641mn3 _2rko12b0 _1a3742bt _lcxvglyw _syazmov0 _lswu1kgh _1cwg1i6y",
+  rect: "_v56411so _1snbe4h9 _1s17hteq"
+};
+
+/**
+ * Legacy SVG styles.
+ * Used when the `platform-checkbox-atomic-styles` feature gate is disabled.
+ */
+var svgStylesLegacy = null;
 function getIcon(isIndeterminate, isChecked) {
   if (isIndeterminate) {
     return /*#__PURE__*/React.createElement("path", {
@@ -25,7 +40,6 @@ function getIcon(isIndeterminate, isChecked) {
   // No icon
   return null;
 }
-
 /**
  * __Checkbox icon__
  *
@@ -40,6 +54,27 @@ var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
   var icon = useMemo(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
+  if (fg('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      role: "presentation",
+      className: ax([svgStyles.root])
+    }, /*#__PURE__*/React.createElement("g", {
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("rect", {
+      fill: "currentColor",
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      className: ax([svgStyles.rect])
+    }), icon));
+  }
+
+  // Legacy rendering with inline style props for CSS variable consumption
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
     height: 24,

package/dist/esm/internal/label.compiled.css

@@ -2,13 +2,20 @@
 ._zulp1nu5{gap:var(--ds-space-0,0) var(--ds-space-050,4px)}
 ._13hr1j28{--local-tick-rest:transparent}
 ._18q0snw8{--local-tick-disabled:var(--_1xmcmw9)}
+._1c53glyw{--checkbox-outline:none}
 ._1dik1ehr{--local-border-checked-hover:var(--_14y1fod)}
 ._1e0c11p5{display:grid}
+._1e9d1j28{--checkbox-tick-color:transparent}
+._1e9d2sac{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._1e9d5w2r{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
 ._1ejihkll{grid-auto-columns:1fr}
 ._1esz1j4g{--local-background-checked:var(--_1gcp7nr)}
 ._1g1fe69j{--local-border-active:var(--_rczcge)}
 ._1j3h1380{--local-border-invalid:var(--_1i4xulb)}
 ._1nzs1kc0{--local-background-active:var(--_1cd0fcx)}
+._1qwn1j9a{--checkbox-background-color:var(--ds-background-input,#fff)}
+._1qwnby5v{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1qwnjmqp{--checkbox-background-color:var(--ds-background-selected-bold,#1868db)}
 ._1rdaeh7q{--local-tick-checked:var(--_jf353p)}
 ._1sfg1380{--local-border-checked-invalid:var(--_1i4xulb)}
 ._1yjc3zdg{--local-border-focus:var(--_xjqa3d)}
@@ -17,13 +24,35 @@
 ._ay2w1ouc{--local-background-disabled:var(--_r5pknd)}
 ._d51u12ci{--local-background-hover:var(--_1z08gfx)}
 ._eawbxz7c{--local-tick-active:var(--_uq1ko9)}
+._f0gr1bqt{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._f0grby5v{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._f0grjmqp{--checkbox-border-color:var(--ds-background-selected-bold,#1868db)}
+._f0grrsbi{--checkbox-border-color:var(--ds-border-input,#8c8f97)}
 ._fpdj1ouc{--local-border-disabled:var(--_r5pknd)}
 ._h5e31kd8{--local-background:var(--_4mkb4g)}
 ._l6wk1j4g{--local-border-checked:var(--_1gcp7nr)}
 ._oaj1ddza{--local-border-hover:var(--_vnm8xo)}
 ._phftddza{--local-border:var(--_vnm8xo)}
+._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
 ._syaz7wap{color:var(--_1ynhf1h)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazovqm{color:var(--_5xk3r4)}
 ._umai184x{grid-auto-rows:min-content}
 ._yp0j1ehr{--local-background-checked-hover:var(--_14y1fod)}
-._yv0ey09t{grid-template-columns:min-content auto}
+._yv0ey09t{grid-template-columns:min-content auto}
+._ljcgdfik:focus-within{--checkbox-outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._1vj51q28:hover{--checkbox-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._1vj5by5v:hover{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._1vj5l4ek:hover{--checkbox-background-color:var(--ds-background-input-hovered,#f8f8f8)}
+._9js12sac:hover{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._q29q1bqt:hover{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._q29q1q28:hover{--checkbox-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
+._q29qby5v:hover{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._cz1u1bqt:active{--checkbox-border-color:var(--ds-border-danger,#e2483d)}
+._cz1u1l7x:active{--checkbox-border-color:var(--ds-border,#0b120e24)}
+._cz1uby5v:active{--checkbox-border-color:var(--ds-background-disabled,#17171708)}
+._dh4gby5v:active{--checkbox-background-color:var(--ds-background-disabled,#17171708)}
+._dh4gr01l:active{--checkbox-background-color:var(--ds-background-input-pressed,#fff)}
+._zoo92sac:active{--checkbox-tick-color:var(--ds-icon-disabled,#080f214a)}
+._zoo95w2r:active{--checkbox-tick-color:var(--ds-icon-inverse,#fff)}
+@media screen and (forced-colors:active){._1s07gir2{--checkbox-border-color:Highlight}._jom5wc43{--checkbox-background-color:Canvas}._1s0718qt{--checkbox-border-color:GrayText}._106f18qt{--checkbox-tick-color:GrayText}._1s071onz{--checkbox-border-color:CanvasText}._106f1onz{--checkbox-tick-color:CanvasText}}

package/dist/esm/internal/label.js

@@ -2,18 +2,58 @@
 import "./label.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+/**
+ * Base state styles with CSS custom properties.
+ * Pseudo-selectors (:hover, :focus-within, :active) on the label element
+ * update CSS variables that cascade to the CheckboxIcon.
+ * This avoids nested sibling selectors.
+ *
+ * Uses `css` over `cssMap` to work around a bug in Compiled types when
+ * using CSS variables in pseudo-selectors.
+ */
 var baseStyles = null;
 var textLabelLayoutStyles = null;
+
+// Checked/Indeterminate state
+var checkedStyles = null;
+
+// Invalid state - must override hover/active to maintain red border
+var invalidStyles = null;
+
+// Disabled state - must override hover/active to maintain disabled appearance
 var disabledStyles = null;
-var labelStyles = null;
+
+// Disabled + Checked/Indeterminate
+var disabledCheckedStyles = null;
+
+/**
+ * Legacy label styles with --local-* CSS custom properties.
+ * These are consumed by the nested sibling selectors in checkbox.tsx.
+ */
+var legacyBaseStyles = null;
+var legacyTextLabelLayoutStyles = null;
+var legacyDisabledStyles = null;
+var legacyLabelStyles = null;
 export default function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
+    isChecked = _ref.isChecked,
+    isIndeterminate = _ref.isIndeterminate,
+    isInvalid = _ref.isInvalid,
     testId = _ref.testId,
     label = _ref.label,
     id = _ref.id,
     xcss = _ref.xcss;
+  if (fg('platform-checkbox-atomic-styles')) {
+    return /*#__PURE__*/React.createElement("label", {
+      className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _1qwn1j9a _f0grrsbi _1c53glyw _1e9d1j28 _syazi7uo _80om73ad _ljcgdfik _1vj5l4ek _dh4gr01l _cz1u1l7x _jom5wc43 _1s071onz _106f1onz", label && "_zulp1nu5 _yv0ey09t", (isChecked || isIndeterminate) && "_1qwnjmqp _f0grjmqp _1e9d5w2r _1vj51q28 _q29q1q28 _dh4gr01l _cz1u1l7x _zoo95w2r _jom5wc43 _1s071onz _106f1onz", isInvalid && "_f0gr1bqt _q29q1bqt _cz1u1bqt _1s07gir2", isDisabled && "_1qwnby5v _f0grby5v _syaz1tvo _80om13gf _1vj5by5v _q29qby5v _dh4gby5v _cz1uby5v _jom5wc43 _1s0718qt _106f18qt", isDisabled && (isChecked || isIndeterminate) && "_1e9d2sac _9js12sac _zoo92sac", xcss]),
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      id: id
+    }, children);
+  }
   return /*#__PURE__*/React.createElement("label", {
     className: ax(["_11c8fhey _1e0c11p5 _1ejihkll _umai184x _syazovqm _80om73ad", label && "_zulp1nu5 _yv0ey09t", isDisabled && "_syaz7wap _80om13gf", "_h5e31kd8 _1nzs1kc0 _1esz1j4g _yp0j1ehr _ay2w1ouc _d51u12ci _phftddza _1g1fe69j _l6wk1j4g _1dik1ehr _1sfg1380 _fpdj1ouc _1yjc3zdg _oaj1ddza _1j3h1380 _eawbxz7c _1rdaeh7q _18q0snw8 _13hr1j28", xcss]),
     "data-testid": testId,

package/dist/types/internal/checkbox-icon.d.ts

@@ -1,3 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type NamedExoticComponent } from 'react';
+type CheckboxIconProps = {
+    isIndeterminate: boolean;
+    isChecked: boolean;
+};
 /**
  * __Checkbox icon__
  *
@@ -6,8 +15,5 @@
  *
  * @internal
  */
-declare const CheckboxIcon: import("react").NamedExoticComponent<{
-    isIndeterminate: boolean;
-    isChecked: boolean;
-}>;
+declare const CheckboxIcon: NamedExoticComponent<CheckboxIconProps>;
 export default CheckboxIcon;

package/dist/types/internal/label.d.ts

@@ -1,2 +1,2 @@
 import { type LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): JSX.Element;
+export default function Label({ children, isDisabled, isChecked, isIndeterminate, isInvalid, testId, label, id, xcss, }: LabelProps): JSX.Element;

package/dist/types/types.d.ts

@@ -91,6 +91,21 @@ export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
 }
 export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
     isDisabled?: boolean;
+    /**
+     * Whether the checkbox is checked.
+     * Used for conditional styling of the label.
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Used for conditional styling of the label.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Used for conditional styling of the label.
+     */
+    isInvalid?: boolean;
     /**
      * 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.
      */

package/dist/types-ts4.5/internal/checkbox-icon.d.ts

@@ -1,3 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type NamedExoticComponent } from 'react';
+type CheckboxIconProps = {
+    isIndeterminate: boolean;
+    isChecked: boolean;
+};
 /**
  * __Checkbox icon__
  *
@@ -6,8 +15,5 @@
  *
  * @internal
  */
-declare const CheckboxIcon: import("react").NamedExoticComponent<{
-    isIndeterminate: boolean;
-    isChecked: boolean;
-}>;
+declare const CheckboxIcon: NamedExoticComponent<CheckboxIconProps>;
 export default CheckboxIcon;

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

@@ -1,2 +1,2 @@
 import { type LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): JSX.Element;
+export default function Label({ children, isDisabled, isChecked, isIndeterminate, isInvalid, testId, label, id, xcss, }: LabelProps): JSX.Element;

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

@@ -91,6 +91,21 @@ export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
 }
 export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
     isDisabled?: boolean;
+    /**
+     * Whether the checkbox is checked.
+     * Used for conditional styling of the label.
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Used for conditional styling of the label.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Used for conditional styling of the label.
+     */
+    isInvalid?: boolean;
     /**
      * 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.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "17.3.2",
+	"version": "17.3.4",
 	"description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/theme": "^21.0.0",
+		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
@@ -49,8 +49,8 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/suppress-react-warnings": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.9.0",
-		"@atlaskit/docs": "^11.3.0",
+		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/docs": "^11.5.0",
 		"@atlaskit/form": "^15.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/primitives": "^18.0.0",
@@ -88,7 +88,7 @@
 	},
 	"homepage": "https://atlassian.design/components/checkbox/",
 	"platform-feature-flags": {
-		"platform-visual-refresh-icons": {
+		"platform-checkbox-atomic-styles": {
 			"type": "boolean"
 		},
 		"platform-dst-shape-theme-default": {