From 01cede6d2828883712b934196296589e36756e4f Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Mon, 11 May 2026 13:52:19 -0400
Subject: [PATCH 01/13] GAUD-8847: Removes checkbox.scss file

- Updates package-lock.json file
---
 package-lock.json | 69 -----------------------------------------------
 1 file changed, 69 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2268dedc124..5daead31c9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1375,9 +1375,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1399,9 +1396,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1423,9 +1417,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1447,9 +1438,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1471,9 +1459,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1495,9 +1480,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1907,9 +1889,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1924,9 +1903,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1941,9 +1917,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1958,9 +1931,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1975,9 +1945,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1992,9 +1959,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2009,9 +1973,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2026,9 +1987,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2043,9 +2001,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2060,9 +2015,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2077,9 +2029,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2094,9 +2043,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2111,9 +2057,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8480,9 +8423,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8504,9 +8444,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8528,9 +8465,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8552,9 +8486,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [

From 4ea51f7daa86f4259ed8a71b2bb04eeb708a8f39 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Mon, 11 May 2026 13:54:43 -0400
Subject: [PATCH 02/13] Removes checkbox.scss file and update vdiff tests and
 sass.scss files

---
 components/inputs/sass/checkbox.scss          | 37 -------------------
 .../inputs/test/input-checkbox.vdiff.js       | 24 ------------
 test/sass.scss                                |  4 --
 3 files changed, 65 deletions(-)
 delete mode 100644 components/inputs/sass/checkbox.scss

diff --git a/components/inputs/sass/checkbox.scss b/components/inputs/sass/checkbox.scss
deleted file mode 100644
index c0e16def5f7..00000000000
--- a/components/inputs/sass/checkbox.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "../../colors/colors.scss";
-
-@mixin d2l-input-checkbox() {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-size: 1.2rem 1.2rem;
-	border-radius: 0.3rem;
-	border-style: solid;
-	box-sizing: border-box;
-	display: inline-block;
-	height: 1.2rem;
-	margin: 0;
-	padding: 0;
-	vertical-align: middle;
-	width: 1.2rem;
-	&:checked {
-		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A");
-	}
-	&,
-	&:hover:disabled {
-		background-color: colors.$d2l-color-regolith;
-		border-color: colors.$d2l-color-galena;
-		border-width: 1px;
-	}
-	&:hover,
-	&:focus {
-		border-color: colors.$d2l-color-celestine;
-		border-width: 2px;
-		outline: none;
-	}
-	&:disabled {
-		opacity: 0.5;
-	}
-}
diff --git a/components/inputs/test/input-checkbox.vdiff.js b/components/inputs/test/input-checkbox.vdiff.js
index e35adbd4746..41d11a0ae32 100644
--- a/components/inputs/test/input-checkbox.vdiff.js
+++ b/components/inputs/test/input-checkbox.vdiff.js
@@ -108,28 +108,4 @@ describe('d2l-input-checkbox', () => {
 		});
 
 	});
-
-	describe('sass', () => {
-		[false, true].forEach(disabled => {
-			[true, false].forEach(checked => {
-
-				const name = `${disabled ? 'disabled' : 'default'}-${checked ? 'checked' : 'unchecked'}`;
-				const checkboxFixture = html`<input type="checkbox" class="d2l-test-input-checkbox" ?checked="${checked}" ?disabled="${disabled}">`;
-
-				it(name, async() => {
-					const elem = await fixture(checkboxFixture);
-					await expect(elem).to.be.golden();
-				});
-				if (!disabled) {
-					it(`${name}-focus`, async() => {
-						const elem = await fixture(checkboxFixture);
-						await focusElem(elem);
-						await expect(elem).to.be.golden();
-					});
-				}
-
-			});
-		});
-	});
-
 });
diff --git a/test/sass.scss b/test/sass.scss
index f2177c2b32e..9068c0f48ce 100644
--- a/test/sass.scss
+++ b/test/sass.scss
@@ -1,5 +1,4 @@
 @use "../components/colors/colors.scss";
-@use "../components/inputs/sass/checkbox.scss";
 @use "../components/inputs/sass/label.scss";
 @use "../components/inputs/sass/radio.scss";
 @use "../components/inputs/sass/select.scss";
@@ -35,9 +34,6 @@
 .d2l-test-heading-4 {
 	@include typography.d2l-heading-4();
 }
-.d2l-test-input-checkbox {
-	@include checkbox.d2l-input-checkbox();
-}
 .d2l-test-input-label {
 	@include label.d2l-input-label();
 }

From bc3f1705f25879e559fd22d29ad2f88cc7265ddc Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Mon, 11 May 2026 16:15:10 -0400
Subject: [PATCH 03/13] Reverts changes in package-lock.json

---
 package-lock.json | 69 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 5daead31c9d..2268dedc124 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1375,6 +1375,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1396,6 +1399,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1417,6 +1423,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1438,6 +1447,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1459,6 +1471,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1480,6 +1495,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1889,6 +1907,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1903,6 +1924,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1917,6 +1941,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1931,6 +1958,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1945,6 +1975,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1959,6 +1992,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1973,6 +2009,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1987,6 +2026,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2001,6 +2043,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2015,6 +2060,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2029,6 +2077,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2043,6 +2094,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2057,6 +2111,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8423,6 +8480,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8444,6 +8504,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8465,6 +8528,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8486,6 +8552,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [

From 7a3ccb5d6a5ecbf43f2ab48f5e6aee34368f1039 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Tue, 12 May 2026 12:59:46 -0400
Subject: [PATCH 04/13] Adds new inpuit-checkbox-styles.js file to encapsulate
 the styles removed from the scss file

---
 components/inputs/input-checkbox-styles.js | 48 ++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/inputs/input-checkbox-styles.js

diff --git a/components/inputs/input-checkbox-styles.js b/components/inputs/input-checkbox-styles.js
new file mode 100644
index 00000000000..1052b73ae6f
--- /dev/null
+++ b/components/inputs/input-checkbox-styles.js
@@ -0,0 +1,48 @@
+import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
+
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateInputCheckboxStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	const selectorCSS = unsafeCSS(selector);
+	return css`
+		${selectorCSS} {
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 1.2rem 1.2rem;
+			border-radius: 0.3rem;
+			border-style: solid;
+			box-sizing: border-box;
+			display: inline-block;
+			height: 1.2rem;
+			margin: 0;
+			padding: 0;
+			vertical-align: middle;
+			width: 1.2rem;
+		}
+		${selectorCSS},
+		${selectorCSS}:disabled {
+			background-color: #f9fbff; /* TODO: update this to the proper value */
+			border-color: #6e7477; /* TODO: update this to the proper value */
+			border-width: 1px;
+		}
+		${selectorCSS}:checked {
+			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A");
+		}
+		${selectorCSS}:hover,
+		${selectorCSS}:focus {
+			border-color: #006fbf; /* TODO: update this to the proper value */
+			border-width: 2px;
+			outline: none;
+		}
+		${selectorCSS}:disabled {
+			opacity: 0.5;
+		}
+	`;
+};

From 8874a1be6a749b71e067624c8b15c1fb3533a469 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Wed, 13 May 2026 15:50:31 -0400
Subject: [PATCH 05/13] Moves the checkbox styles to input-checkbox-styles.js

---
 components/inputs/input-checkbox-styles.js |  95 +++++++++++++++---
 components/inputs/input-checkbox.js        | 110 +--------------------
 components/table/table-wrapper.js          |   2 +-
 helpers/internal/css.js                    |   2 +-
 helpers/test/css.test.js                   |  11 +++
 5 files changed, 98 insertions(+), 122 deletions(-)
 create mode 100644 helpers/test/css.test.js

diff --git a/components/inputs/input-checkbox-styles.js b/components/inputs/input-checkbox-styles.js
index 1052b73ae6f..dd478b1593c 100644
--- a/components/inputs/input-checkbox-styles.js
+++ b/components/inputs/input-checkbox-styles.js
@@ -1,5 +1,25 @@
 import { css, unsafeCSS } from 'lit';
 import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
+
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-check-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
+	</svg>`
+);
+
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-indeterminate-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
+	</svg>`
+);
+
+export const cssSizes = {
+	inputBoxSize: 1.2,
+	checkboxMargin: 0.5,
+};
 
 /**
  * A private helper method that should not be used by general consumers
@@ -10,39 +30,90 @@ export const _generateInputCheckboxStyles = (selector) => {
 	const selectorCSS = unsafeCSS(selector);
 	return css`
 		${selectorCSS} {
+			--d2l-input-checkbox-background-image: none;
+			--d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			--d2l-input-checkbox-background-image-disabled:
+				linear-gradient(
+					var(--d2l-theme-background-color-interactive-faint-disabled),
+					var(--d2l-theme-background-color-interactive-faint-disabled)
+				),
+				var(--d2l-input-checkbox-background-image);
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			appearance: none;
+			background-image: var(--d2l-input-checkbox-background-image);
 			background-position: center center;
 			background-repeat: no-repeat;
-			background-size: 1.2rem 1.2rem;
+			background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
 			border-radius: 0.3rem;
 			border-style: solid;
 			box-sizing: border-box;
 			display: inline-block;
-			height: 1.2rem;
+			height: ${cssSizes.inputBoxSize}rem;
 			margin: 0;
 			padding: 0;
 			vertical-align: middle;
-			width: 1.2rem;
+			width: ${cssSizes.inputBoxSize}rem;
+		}
+		${selectorCSS}:checked {
+			--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
+		}
+		${selectorCSS}:indeterminate {
+			--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
 		}
 		${selectorCSS},
-		${selectorCSS}:disabled {
-			background-color: #f9fbff; /* TODO: update this to the proper value */
-			border-color: #6e7477; /* TODO: update this to the proper value */
+		${selectorCSS}:hover:disabled {
+			background-color: var(--d2l-input-checkbox-background-color);
+			border-color: var(--d2l-theme-border-color-emphasized);
 			border-width: 1px;
 		}
-		${selectorCSS}:checked {
-			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A");
+		${selectorCSS}:hover:disabled {
+			border-color: var(--d2l-theme-border-color-disabled);
 		}
 		${selectorCSS}:hover,
-		${selectorCSS}:focus {
-			border-color: #006fbf; /* TODO: update this to the proper value */
+		${selectorCSS}:focus,
+		${selectorCSS}.d2l-input-checkbox-focus,
+		:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
+			border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
 			border-width: 2px;
 			outline: none;
 		}
-		${selectorCSS}:disabled {
-			opacity: 0.5;
+		${selectorCSS}:disabled,
+		${selectorCSS}:where([aria-disabled="true"]) {
+			background-image: var(--d2l-input-checkbox-background-image-disabled);
+			border-color: var(--d2l-theme-border-color-disabled);
+		}
+		@media (forced-colors: active) {
+			${selectorCSS}:checked,
+			${selectorCSS}:indeterminate {
+				background-image: none;
+				position: relative;
+			}
+			${selectorCSS}:checked::after,
+			${selectorCSS}:indeterminate::after {
+				background-color: FieldText;
+				content: "";
+				display: block;
+				height: ${cssSizes.inputBoxSize}rem;
+				left: 50%;
+				position: absolute;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: ${cssSizes.inputBoxSize}rem;
+			}
+
+			${selectorCSS}:disabled,
+			${selectorCSS}:where([aria-disabled="true"]) {
+				opacity: var(--d2l-theme-opacity-disabled-control);
+			}
+
+			${selectorCSS}:checked::after {
+				mask-image: var(--d2l-input-checkbox-check-image);
+			}
+
+			${selectorCSS}:indeterminate::after {
+				mask-image: var(--d2l-input-checkbox-indeterminate-image);
+			}
 		}
 	`;
 };
diff --git a/components/inputs/input-checkbox.js b/components/inputs/input-checkbox.js
index 287cd0ec191..960bc77155e 100644
--- a/components/inputs/input-checkbox.js
+++ b/components/inputs/input-checkbox.js
@@ -1,5 +1,6 @@
 import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
+import { _generateInputCheckboxStyles, cssSizes } from './input-checkbox-styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -8,116 +9,9 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-registerSemanticVariableForSvgImageUrl(
-	'--d2l-input-checkbox-check-image',
-	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
-	</svg>`
-);
-
-registerSemanticVariableForSvgImageUrl(
-	'--d2l-input-checkbox-indeterminate-image',
-	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
-	</svg>`
-);
-
-export const cssSizes = {
-	inputBoxSize: 1.2,
-	checkboxMargin: 0.5,
-};
-
-export const checkboxStyles = css`
-	input[type="checkbox"].d2l-input-checkbox {
-		--d2l-input-checkbox-background-image: none;
-		--d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
-		--d2l-input-checkbox-background-image-disabled:
-			linear-gradient(
-				var(--d2l-theme-background-color-interactive-faint-disabled),
-				var(--d2l-theme-background-color-interactive-faint-disabled)
-			),
-			var(--d2l-input-checkbox-background-image);
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background-image: var(--d2l-input-checkbox-background-image);
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
-		border-radius: 0.3rem;
-		border-style: solid;
-		box-sizing: border-box;
-		display: inline-block;
-		height: ${cssSizes.inputBoxSize}rem;
-		margin: 0;
-		padding: 0;
-		vertical-align: middle;
-		width: ${cssSizes.inputBoxSize}rem;
-	}
-	input[type="checkbox"].d2l-input-checkbox:checked {
-		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
-	}
-	input[type="checkbox"].d2l-input-checkbox:indeterminate {
-		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
-	}
-	input[type="checkbox"].d2l-input-checkbox,
-	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		background-color: var(--d2l-input-checkbox-background-color);
-		border-color: var(--d2l-theme-border-color-emphasized);
-		border-width: 1px;
-	}
-	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		border-color: var(--d2l-theme-border-color-disabled);
-	}
-	input[type="checkbox"].d2l-input-checkbox:hover,
-	input[type="checkbox"].d2l-input-checkbox:focus,
-	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
-	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
-		border-width: 2px;
-		outline: none;
-	}
-	input[type="checkbox"].d2l-input-checkbox:disabled,
-	input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
-		background-image: var(--d2l-input-checkbox-background-image-disabled);
-		border-color: var(--d2l-theme-border-color-disabled);
-	}
-	@media (forced-colors: active) {
-		input[type="checkbox"].d2l-input-checkbox:checked,
-		input[type="checkbox"].d2l-input-checkbox:indeterminate {
-			background-image: none;
-			position: relative;
-		}
-		input[type="checkbox"].d2l-input-checkbox:checked::after,
-		input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
-			background-color: FieldText;
-			content: "";
-			display: block;
-			height: ${cssSizes.inputBoxSize}rem;
-			left: 50%;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			width: ${cssSizes.inputBoxSize}rem;
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:disabled,
-		input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
-			opacity: var(--d2l-theme-opacity-disabled-control);
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:checked::after {
-			mask-image: var(--d2l-input-checkbox-check-image);
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
-			mask-image: var(--d2l-input-checkbox-indeterminate-image);
-		}
-	}
-`;
+export const checkboxStyles = _generateInputCheckboxStyles('input[type="checkbox"].d2l-input-checkbox');
 
 /**
  * A component that can be used to show a checkbox and optional visible label.
diff --git a/components/table/table-wrapper.js b/components/table/table-wrapper.js
index 780249f5348..48cfec4545d 100644
--- a/components/table/table-wrapper.js
+++ b/components/table/table-wrapper.js
@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { cssSizes } from '../inputs/input-checkbox.js';
+import { cssSizes } from '../inputs/input-checkbox-styles.js';
 import { getComposedParent } from '../../helpers/dom.js';
 import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
diff --git a/helpers/internal/css.js b/helpers/internal/css.js
index e7231ed9cba..623a793b01a 100644
--- a/helpers/internal/css.js
+++ b/helpers/internal/css.js
@@ -1,6 +1,6 @@
 export function _isValidCssSelector(selector) {
 	const partIsValid = (part) => {
-		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
+		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
 		if (part === ':host') return true;
 		const match = part.match(re);
 		const isValid = !!match && match.length === 1 && match[0].length === part.length;
diff --git a/helpers/test/css.test.js b/helpers/test/css.test.js
new file mode 100644
index 00000000000..98079b9ec77
--- /dev/null
+++ b/helpers/test/css.test.js
@@ -0,0 +1,11 @@
+import { _isValidCssSelector } from '../internal/css.js';
+import { expect } from '@brightspace-ui/testing';
+
+describe('_isValidCssSelector', () => {
+	it('should return true for valid selectors', () => {
+		expect(_isValidCssSelector('input[type="checkbox"].d2l-input-checkbox')).to.be.true;
+		expect(_isValidCssSelector('input[type="checkbox"]')).to.be.true;
+		expect(_isValidCssSelector('.d2l-input-checkbox')).to.be.true;
+		expect(_isValidCssSelector('.d2l-link')).to.be.true;
+	});
+});

From 3cfdb0ee857931135bfd7f02db9868045eb2d908 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Wed, 13 May 2026 16:41:18 -0400
Subject: [PATCH 06/13] Remove styles.test.js and migrate the tests into
 css.test.js

---
 components/typography/test/styles.test.js | 65 -----------------------
 helpers/test/css.test.js                  | 63 ++++++++++++++++++++--
 2 files changed, 59 insertions(+), 69 deletions(-)
 delete mode 100644 components/typography/test/styles.test.js

diff --git a/components/typography/test/styles.test.js b/components/typography/test/styles.test.js
deleted file mode 100644
index 6e7d94a78ff..00000000000
--- a/components/typography/test/styles.test.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { _isValidCssSelector } from '../../../helpers/internal/css.js';
-import { expect } from '@brightspace-ui/testing';
-
-describe('_isValidCssSelector', () => {
-
-	it('should support simple tag names', () => {
-		expect(_isValidCssSelector('a')).to.be.true;
-		expect(_isValidCssSelector('button')).to.be.true;
-		expect(_isValidCssSelector('table')).to.be.true;
-		expect(_isValidCssSelector('dl')).to.be.true;
-	});
-
-	it('should support simple class selectors', () => {
-		expect(_isValidCssSelector('.d2l-label-styles')).to.be.true;
-		expect(_isValidCssSelector('.d2l-body-compact')).to.be.true;
-		expect(_isValidCssSelector('.className')).to.be.true;
-	});
-
-	it('should support simple id selectors', () => {
-		expect(_isValidCssSelector('#opener')).to.be.true;
-	});
-
-	it('should support simple property selectors', () => {
-		expect(_isValidCssSelector('button[loading]')).to.be.true;
-		expect(_isValidCssSelector('p[loading]')).to.be.true;
-	});
-
-	it('should support complex selectors', () => {
-		expect(_isValidCssSelector('dl dd')).to.be.true;
-		expect(_isValidCssSelector('dt.class')).to.be.true;
-		expect(_isValidCssSelector('dt#id')).to.be.true;
-		expect(_isValidCssSelector('dl .class')).to.be.true;
-		expect(_isValidCssSelector('dl #id')).to.be.true;
-		expect(_isValidCssSelector('dl > dt')).to.be.true;
-		expect(_isValidCssSelector('dl > dt > dd')).to.be.true;
-	});
-
-	it('should support simple :host selector', () => {
-		expect(_isValidCssSelector(':host')).to.be.true;
-	});
-
-	it('should support sets of selectors', () => {
-		expect(_isValidCssSelector('.class1, .class2')).to.be.true;
-	});
-
-	it('should not support sets with invalid selectors', () => {
-		expect(_isValidCssSelector('.valid, invalid$')).to.be.false;
-	});
-
-	it('should not support complex :host selectors', () => {
-		expect(_isValidCssSelector(':host p')).to.be.false;
-		expect(_isValidCssSelector(':host([hidden])')).to.be.false;
-		expect(_isValidCssSelector(':host([dir="rtl"])')).to.be.false;
-	});
-
-	it('should not support invalid selectors', () => {
-		expect(_isValidCssSelector('a[b[c]]')).to.be.false;
-		expect(_isValidCssSelector('abc$')).to.be.false;
-		expect(_isValidCssSelector('@')).to.be.false;
-		expect(_isValidCssSelector('@import')).to.be.false;
-		expect(_isValidCssSelector('@media')).to.be.false;
-		expect(_isValidCssSelector('%')).to.be.false;
-		expect(_isValidCssSelector('.class-name{display:block}')).to.be.false;
-	});
-});
diff --git a/helpers/test/css.test.js b/helpers/test/css.test.js
index 98079b9ec77..ea867169229 100644
--- a/helpers/test/css.test.js
+++ b/helpers/test/css.test.js
@@ -2,10 +2,65 @@ import { _isValidCssSelector } from '../internal/css.js';
 import { expect } from '@brightspace-ui/testing';
 
 describe('_isValidCssSelector', () => {
-	it('should return true for valid selectors', () => {
+
+	it('should support simple tag names', () => {
+		expect(_isValidCssSelector('a')).to.be.true;
+		expect(_isValidCssSelector('button')).to.be.true;
+		expect(_isValidCssSelector('table')).to.be.true;
+		expect(_isValidCssSelector('dl')).to.be.true;
+	});
+
+	it('should support simple class selectors', () => {
+		expect(_isValidCssSelector('.d2l-label-styles')).to.be.true;
+		expect(_isValidCssSelector('.d2l-body-compact')).to.be.true;
+		expect(_isValidCssSelector('.className')).to.be.true;
+	});
+
+	it('should support simple id selectors', () => {
+		expect(_isValidCssSelector('#opener')).to.be.true;
+	});
+
+	it('should support simple property selectors', () => {
+		expect(_isValidCssSelector('button[loading]')).to.be.true;
+		expect(_isValidCssSelector('p[loading]')).to.be.true;
+	});
+
+	it('should support complex selectors', () => {
+		expect(_isValidCssSelector('dl dd')).to.be.true;
+		expect(_isValidCssSelector('dt.class')).to.be.true;
+		expect(_isValidCssSelector('dt#id')).to.be.true;
+		expect(_isValidCssSelector('dl .class')).to.be.true;
+		expect(_isValidCssSelector('dl #id')).to.be.true;
+		expect(_isValidCssSelector('dl > dt')).to.be.true;
+		expect(_isValidCssSelector('dl > dt > dd')).to.be.true;
 		expect(_isValidCssSelector('input[type="checkbox"].d2l-input-checkbox')).to.be.true;
-		expect(_isValidCssSelector('input[type="checkbox"]')).to.be.true;
-		expect(_isValidCssSelector('.d2l-input-checkbox')).to.be.true;
-		expect(_isValidCssSelector('.d2l-link')).to.be.true;
+	});
+
+	it('should support simple :host selector', () => {
+		expect(_isValidCssSelector(':host')).to.be.true;
+	});
+
+	it('should support sets of selectors', () => {
+		expect(_isValidCssSelector('.class1, .class2')).to.be.true;
+	});
+
+	it('should not support sets with invalid selectors', () => {
+		expect(_isValidCssSelector('.valid, invalid$')).to.be.false;
+	});
+
+	it('should not support complex :host selectors', () => {
+		expect(_isValidCssSelector(':host p')).to.be.false;
+		expect(_isValidCssSelector(':host([hidden])')).to.be.false;
+		expect(_isValidCssSelector(':host([dir="rtl"])')).to.be.false;
+	});
+
+	it('should not support invalid selectors', () => {
+		expect(_isValidCssSelector('a[b[c]]')).to.be.false;
+		expect(_isValidCssSelector('abc$')).to.be.false;
+		expect(_isValidCssSelector('@')).to.be.false;
+		expect(_isValidCssSelector('@import')).to.be.false;
+		expect(_isValidCssSelector('@media')).to.be.false;
+		expect(_isValidCssSelector('%')).to.be.false;
+		expect(_isValidCssSelector('.class-name{display:block}')).to.be.false;
 	});
 });

From 0f835004d3f3d874b992ffe5a73aa60a1d6ff26d Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Thu, 14 May 2026 16:30:10 -0400
Subject: [PATCH 07/13] Re-adds the checkbox.scss file so to only first include
 the changes related to the new way of generating styles

---
 components/inputs/sass/checkbox.scss | 37 ++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 components/inputs/sass/checkbox.scss

diff --git a/components/inputs/sass/checkbox.scss b/components/inputs/sass/checkbox.scss
new file mode 100644
index 00000000000..c0e16def5f7
--- /dev/null
+++ b/components/inputs/sass/checkbox.scss
@@ -0,0 +1,37 @@
+@use "../../colors/colors.scss";
+
+@mixin d2l-input-checkbox() {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 1.2rem 1.2rem;
+	border-radius: 0.3rem;
+	border-style: solid;
+	box-sizing: border-box;
+	display: inline-block;
+	height: 1.2rem;
+	margin: 0;
+	padding: 0;
+	vertical-align: middle;
+	width: 1.2rem;
+	&:checked {
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A");
+	}
+	&,
+	&:hover:disabled {
+		background-color: colors.$d2l-color-regolith;
+		border-color: colors.$d2l-color-galena;
+		border-width: 1px;
+	}
+	&:hover,
+	&:focus {
+		border-color: colors.$d2l-color-celestine;
+		border-width: 2px;
+		outline: none;
+	}
+	&:disabled {
+		opacity: 0.5;
+	}
+}

From 1e5d1f8f05efe5addb7374f8258ca55ee0f1e541 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Thu, 14 May 2026 16:33:59 -0400
Subject: [PATCH 08/13] Re-adds sass test for the input-checkbox component
 (will be removed in a separate PR)

---
 .../inputs/test/input-checkbox.vdiff.js       | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/inputs/test/input-checkbox.vdiff.js b/components/inputs/test/input-checkbox.vdiff.js
index 41d11a0ae32..e35adbd4746 100644
--- a/components/inputs/test/input-checkbox.vdiff.js
+++ b/components/inputs/test/input-checkbox.vdiff.js
@@ -108,4 +108,28 @@ describe('d2l-input-checkbox', () => {
 		});
 
 	});
+
+	describe('sass', () => {
+		[false, true].forEach(disabled => {
+			[true, false].forEach(checked => {
+
+				const name = `${disabled ? 'disabled' : 'default'}-${checked ? 'checked' : 'unchecked'}`;
+				const checkboxFixture = html`<input type="checkbox" class="d2l-test-input-checkbox" ?checked="${checked}" ?disabled="${disabled}">`;
+
+				it(name, async() => {
+					const elem = await fixture(checkboxFixture);
+					await expect(elem).to.be.golden();
+				});
+				if (!disabled) {
+					it(`${name}-focus`, async() => {
+						const elem = await fixture(checkboxFixture);
+						await focusElem(elem);
+						await expect(elem).to.be.golden();
+					});
+				}
+
+			});
+		});
+	});
+
 });

From 8582f33dfdcbdeafaeb21af56011c398138f2628 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Thu, 14 May 2026 16:37:07 -0400
Subject: [PATCH 09/13] Re-adds the sass styles for test

---
 test/sass.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/sass.scss b/test/sass.scss
index 9068c0f48ce..f2177c2b32e 100644
--- a/test/sass.scss
+++ b/test/sass.scss
@@ -1,4 +1,5 @@
 @use "../components/colors/colors.scss";
+@use "../components/inputs/sass/checkbox.scss";
 @use "../components/inputs/sass/label.scss";
 @use "../components/inputs/sass/radio.scss";
 @use "../components/inputs/sass/select.scss";
@@ -34,6 +35,9 @@
 .d2l-test-heading-4 {
 	@include typography.d2l-heading-4();
 }
+.d2l-test-input-checkbox {
+	@include checkbox.d2l-input-checkbox();
+}
 .d2l-test-input-label {
 	@include label.d2l-input-label();
 }

From 70c18fc33df69f16c1128a81cae4cd4eadb77beb Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Tue, 19 May 2026 16:31:33 -0400
Subject: [PATCH 10/13] Removes SASS logic for checkbox

---
 components/inputs/sass/checkbox.scss          | 37 -------------------
 .../inputs/test/input-checkbox.vdiff.js       | 24 ------------
 test/sass.scss                                |  3 --
 3 files changed, 64 deletions(-)
 delete mode 100644 components/inputs/sass/checkbox.scss

diff --git a/components/inputs/sass/checkbox.scss b/components/inputs/sass/checkbox.scss
deleted file mode 100644
index c0e16def5f7..00000000000
--- a/components/inputs/sass/checkbox.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "../../colors/colors.scss";
-
-@mixin d2l-input-checkbox() {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-size: 1.2rem 1.2rem;
-	border-radius: 0.3rem;
-	border-style: solid;
-	box-sizing: border-box;
-	display: inline-block;
-	height: 1.2rem;
-	margin: 0;
-	padding: 0;
-	vertical-align: middle;
-	width: 1.2rem;
-	&:checked {
-		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A");
-	}
-	&,
-	&:hover:disabled {
-		background-color: colors.$d2l-color-regolith;
-		border-color: colors.$d2l-color-galena;
-		border-width: 1px;
-	}
-	&:hover,
-	&:focus {
-		border-color: colors.$d2l-color-celestine;
-		border-width: 2px;
-		outline: none;
-	}
-	&:disabled {
-		opacity: 0.5;
-	}
-}
diff --git a/components/inputs/test/input-checkbox.vdiff.js b/components/inputs/test/input-checkbox.vdiff.js
index e35adbd4746..41d11a0ae32 100644
--- a/components/inputs/test/input-checkbox.vdiff.js
+++ b/components/inputs/test/input-checkbox.vdiff.js
@@ -108,28 +108,4 @@ describe('d2l-input-checkbox', () => {
 		});
 
 	});
-
-	describe('sass', () => {
-		[false, true].forEach(disabled => {
-			[true, false].forEach(checked => {
-
-				const name = `${disabled ? 'disabled' : 'default'}-${checked ? 'checked' : 'unchecked'}`;
-				const checkboxFixture = html`<input type="checkbox" class="d2l-test-input-checkbox" ?checked="${checked}" ?disabled="${disabled}">`;
-
-				it(name, async() => {
-					const elem = await fixture(checkboxFixture);
-					await expect(elem).to.be.golden();
-				});
-				if (!disabled) {
-					it(`${name}-focus`, async() => {
-						const elem = await fixture(checkboxFixture);
-						await focusElem(elem);
-						await expect(elem).to.be.golden();
-					});
-				}
-
-			});
-		});
-	});
-
 });
diff --git a/test/sass.scss b/test/sass.scss
index f2177c2b32e..159eb5a6dea 100644
--- a/test/sass.scss
+++ b/test/sass.scss
@@ -35,9 +35,6 @@
 .d2l-test-heading-4 {
 	@include typography.d2l-heading-4();
 }
-.d2l-test-input-checkbox {
-	@include checkbox.d2l-input-checkbox();
-}
 .d2l-test-input-label {
 	@include label.d2l-input-label();
 }

From 3add307253e63485a1497418e6abf163f2223c63 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Tue, 19 May 2026 16:40:07 -0400
Subject: [PATCH 11/13] Removes unexisting import

---
 test/sass.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/sass.scss b/test/sass.scss
index 159eb5a6dea..9068c0f48ce 100644
--- a/test/sass.scss
+++ b/test/sass.scss
@@ -1,5 +1,4 @@
 @use "../components/colors/colors.scss";
-@use "../components/inputs/sass/checkbox.scss";
 @use "../components/inputs/sass/label.scss";
 @use "../components/inputs/sass/radio.scss";
 @use "../components/inputs/sass/select.scss";

From 90e77bba1d6f2a4ad16b9d626bc47c2542423a91 Mon Sep 17 00:00:00 2001
From: Edwin Collazos <Edwin.Collazos@D2L.com>
Date: Tue, 19 May 2026 16:47:06 -0400
Subject: [PATCH 12/13] Removes unnecessary loadSass and unloadSass functions
 and their import

---
 components/inputs/test/input-checkbox.vdiff.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/inputs/test/input-checkbox.vdiff.js b/components/inputs/test/input-checkbox.vdiff.js
index 41d11a0ae32..ddb4bab7624 100644
--- a/components/inputs/test/input-checkbox.vdiff.js
+++ b/components/inputs/test/input-checkbox.vdiff.js
@@ -1,14 +1,9 @@
 import '../input-checkbox.js';
 import { expect, fixture, focusElem, hoverElem, html, oneEvent } from '@brightspace-ui/testing';
-import { loadSass, unloadSass } from '../../../test/load-sass.js';
 import { checkboxFixtures } from './input-checkbox-fixtures.js';
 import { inlineHelpFixtures } from './input-shared-content.js';
 
 describe('d2l-input-checkbox', () => {
-
-	before(loadSass);
-	after(unloadSass);
-
 	[false, true].forEach(skeleton => {
 		[false, true].forEach(disabled => {
 			const checkedStates = ['checked', 'unchecked'];

From 4eeb4f48455c3624557317539685ac26746ff9f9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 17:02:26 -0400
Subject: [PATCH 13/13] Updating vdiff goldens (#6999)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../chromium/sass-default-checked-focus.png      | Bin 1426 -> 0 bytes
 .../chromium/sass-default-checked.png            | Bin 1488 -> 0 bytes
 .../chromium/sass-default-unchecked-focus.png    | Bin 1014 -> 0 bytes
 .../chromium/sass-default-unchecked.png          | Bin 1069 -> 0 bytes
 .../chromium/sass-disabled-checked.png           | Bin 1367 -> 0 bytes
 .../chromium/sass-disabled-unchecked.png         | Bin 986 -> 0 bytes
 6 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png
 delete mode 100644 components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png
deleted file mode 100644
index d8c7b2c7a03d26b2b8882fc1c377b46bb9338039..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1426
zcma)+X)xOf7>EDjN*${a6^*nsTSrOi+PbP572*gr8r`6}s9M&tR%)tl;*KMoZl&s6
zw63Kgs%a5Iiq_GphH6n~5S3Ki>R9`2zwFHZX5QaB^UOQ%$0yyz87D6TmjM7k-rf%D
zdbo*);{gU8HshjH002nh?6Fpah=MN#ad=fXM0;ENg0TmE4wqn%LZM$Z#(EDrWoDG1
z2Ky?L(ERt11LAI{%_X@$zuz^<hPUJjWj`VGEAN_C>{6$c5uI3qx;X5Nvq||&gO3UL
z5+%>`Egxu0waa52QNqZ$mN!2MW1>c)_GSeWIo~#NQ79B3u6|VIfQ?mu0G5Czcq5PE
zB@)vy`Vg=t=)WOHQN4eyWt9=@xcUa#=E3XQZ+P>u5Ccj^X*-{B%#gWbtYLW3sg?+r
zz#dU&Mg$erFPY<0o4bF_R>j<-PPU)O)6F0$mMXC^U|%E)UN9CG9XjCrV*>T<BP*?@
zC;i+M@gqHH5pAT#%5B3fa`n98=LkOyZ)*%kD~3l~v+n3gNut9>x&yeUUKxn&%<>qw
zJNWvUo~eDL9ahbS$9eg1`tk(KuvARp8iYJE9RA|EPx+U{C>b@1^uv~sz{uucqRRHo
z5pj4p*gO7HjKFfenf|fWh}<NZUHX^X=jFbmwiAJBVit64=r{)k)7;`0In@|VTU#j&
zcc%&lTJxV6Z+PxEngik}NY*?$+6?WyGCWg*!8$ZRU47@G?~}w-ywgn$CM`FX6rRY*
z$pMh5@1D*4X&P$6gL}uHYd|m!duawjH;OeBy*c{8CSIdMN5!%>>n?dApmc0w{%e<r
z!-I3A56<#c`RC0CdX8o6wxHeJ-A@)*TaS~KnxR1mOzb-wYU`t@!!SG6*6>_uX+J}E
ze}B!lRxgG^CqS1S9icAPr9X368DR>t2xqOA#|xEg2v-F{fnX#1w+~E6<ta0WbhS=1
zYgv?CF<zXz8GX{l+5^cXu`80-8rP<$6-&~Sun3E-sRQEV3%QbX0yb3HoVEBhn{q?!
zG;%sL{AnB-2!_~})jxVV>d%<tg*de8ap#S3If%fE<AM|Og6vXvpc<K?rvOuKUDP3s
z`>;0>`}2!eKJbYB^-UYb!Wc7I4UJ|j10djX*X6@IesKzRx-vxTunP`$3JRiZW>0$_
zKIrpj;K~IN<FD=&H@}wON#W)C3tM-6#VW7E;k6t5EhdioZEx)KpwF{a+oY{tkjt?Z
zzOJMcneDrB&1z^#H9ACylf|sRbI}p%pt)6Lr2@Yjbrox6k|h`9b28Jk(YkH5vIgC<
z&k}bcIl*3bY)~3Qe<ln9U7o2bz@p*<bO{9%!*NRm*t>eb_bj*SkJk+iVYRkP)x6nR
zyKYdL#iDB!!Q9KtPBGUyxn1!T?fGrB;wJI}SfQHgbAiZKgh2VMjyQN{<aCp%R2|dE
z*0+-$VnRf^Ue(?bNyeouz$}FLtSf*N5g9gIxg{DDc7HiYquF=)kW7PORc2~N6T46#
z3kZC(KI_V=u;`>1WOQ{sZE@%GWQ_p@a7?m2f$S61Ec~!OQNXjwQOg>-?^PDPUNxJ>
z>6wcc3)#G*t!J-1JD~7te_?l@RAv&uijV&$%3wU!`fh#o?oD<AcRL7B04*l(SgtmC
zmc!~OZb_-s;|#C-aJjsg3Rvt;m}vOcxk)R{sYcP5TCx+ZUCmB=>ix?zoqn-}YzJ-0
zJ!h(~Oao=GYI_8(SM=Oea_x?5*-k`_=Jls?U<hWHtK&thE8YvP?lv{D2>gEEB$+$a
ztA+>nI=EUstduB~px^FedNVHne-Zuba#t1r4i0(<okfRcmHJ1i;y?h<%ff4&&O9W5
My^S-r?vi)n-$yQ?3jhEB

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png
deleted file mode 100644
index 6f2ec7b30435f4dd6a2afcbebe01630ab1e5405d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1488
zcmai!dpOez9L9g!*qKY2yJm$IXYN~vnMRu|mz2?=kXvqf$Z2j79=8XNxr<N?N9nl6
z5=j!Z+~VYtq|tFHjNCTE%;oI-f6jBB@AH1&=lMME-yfQtt>qDMgg5{IN35;Lmxb*l
zj0+4b{7potKLCg(Ta(QkB1?Xh2q@Pak)5w$`6`jm?5G)*?*$AUjGqI%;%?5xVA412
znWE4+;?U09_3e!!+RZkV`GNRmd8I^7cMuvR`ZQOv+d^&5aMGpRp{N{kL7KvnJ?E0|
zyD-TTyyYjA#6-6mnZ`t|nq~_s^;j%cClD#Bq)-Htlufvf!dw(dp><-Ul{CO_$)5iW
zgF#>F8XBagRPJDEhV>B#uFhCQCJB;jbxJy#&)@AnezpXzvM{d!uEE<+w!69QFW-)c
zIP9cf$`fm4j*S_rYhrbIZc<Va<sydCQik6B558m`;V#6XaX360jZuZqd}oUpI61qG
z1vFCzi4;R`@2c*>!IgpPM04yg333J%%Vr1twoFQJSPJDNozu$$6`GXN>+2h?xwu#a
z+g_PxY2E^1<;ap>l`oHfC7I1G-||6zfYV$PqV2{5SNvawZtJB{6w&TBc(6}S79x}@
zaYdrf+S+(xV$TWShO71OV+ia)vYd9{(q?)(30j?+Rs7selefX2-Vd9m&#~DuH0DSK
ziv-Pug+Y|>;FrFA3#%yyruq^hhKgKr8b}~S<6-Op5~eDHH84r+hu=3rV_-<Kzg4OZ
zUP*L2Weo!IL0Jr-e304F0#sq2y|D=g5Uzh8W9zI?TVbJ)XD-L#B!hQ2gpvI*1%&v~
z^Lj?xu(^2+IO%%*%&KirX<+u{${$N@-&bdXQAR{V!|)H@r@XLQ&s$pJf!%byv=V(|
zBHq9BbbVc&`|c77aq@0nUV?JcOUb_&jpjBsveXn(G&5PhKS(G31@{nAqDGdMm-pD(
z-e!&etf3CN0kdVkvynG_WxB-^vy=%54N3SVNgd2fHq}L5!bh#TVyU!vvTMg4@6d^4
z4yDrU$f^=<#E6M;t~W>oHCwEG6&VO>RlpJmtdTG6EiJcye2(4--iSWIT^XyT8xdBP
zho^FlBs!~8+0|?cQNTnzoM~LVY47J(Fo+%3YG{sVVU?xp$SKDCSu8po=2z|DxEAZ|
z>^Sjpb8huPO-=u&PYMEA{&S!t&B@8BvAVj$ed_aP&rHVv$55N5ednVLpu`<9jKzj>
zxww0aYnCtPi!J7|a;Nb9V5-*aK+kzZrbWXz>tpR$jcIm7x#;xfNRAa#UEQ}~m;b7_
z%l}cBkVPF^)xKAdU$C~E_<{c>u8SYb?9fZ{1no=|G1}IN)XsyeU<S~>VyC89>8p6t
z71je@f8n^Go10%y&_nKV@_1ZXDJEp?i=3@3J#Fou%-)1lVaTXDYhckHgO>}0z#2}Y
zq)Q8)sZJq>n{Xj@loRjV$;KDRDDd9Cef8*Ig88sBSp;bU6M@rGvob`?HevOZSZNY)
zKNZc5&JHk0XWl314_0(xaA&g;(eMA@jKFCm*@fOzYF=O1KB1X5H`#BBecgP4)?ZX*
zMfA{wlg`9wg*4IW^x+d11r&NGA?WyuMAWO=^!I%xBR7bTP(zb1FhnWQ*F2u#-jJ2{
zOr!@6hg(us-i1Q#V%qEy3ie1)deZ3XSC3+s!RSUWMj=X{h%!O8`gnyreR7ZzzMDh8
zw_z)u><S9d?0vx4&<f9Nw%p<KQ<8<3ggWV^uV3CZ!r@5HZVY@J$msF}Y{WSe+2Y<0
zAI3us@<s~FOlt)l!F$6ZRH-(C7AK@#*Sf%gT5&L@l{Y$?t?@WEj>BB<k>SPtnzOsp
z>)YjDl?Ic5)ZiIwMT|FB%Kpz`|7ttFA^;p7?o}vj3cU>dN5~Ms9le-%_OOg1B!KmK
LTk?~0o{4`0sj;ru

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png
deleted file mode 100644
index a8ce357f69bc209b8630d9639c9ed62ba44d78b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1014
zcmeAS@N?(olHy`uVBq!ia0vp^5kMTp!2~2X+p}dbFfgz7ba4!+nDgdNw1-Hd#IcXp
zO}F1_Uh#6-%*Z9VkwU2<AtjrHulNdz%~g1zv`eF-gHPb5Z`0J0i6X8d5}r;fQ)D^#
z#Uod)@XVSvbKTCJa+j`z-uBHsIsK*}Ps;xMaQ%7rubyc*_rd*6{+#PGO-xK&9F{2l
zU{{oIGH6NQI4IDh$l}b=CcuMDV1uVhbol=Ri#JVs)1Ny(x@zry8QVU_Ne35v?dQ34
ztnFplv350GLrJyYlSAr+{#RtbE?cr^+a0Yf-z?cr&Msk`wRm;<oSP!DX&efkOIj<U
zZti<tm%9G&Zq6$`lmBk!)4yY7-;y#x_)%8e<CSmLo5-zu-(|V4OpSB0z$3@bw+?Pw
zf1Nn>;=te2hn~+aDSY@VVDFsy_sn*0UUf4r_w`wgpMfba<q8?u#ou_(@Jn)W4l%ne
zzEos&f6P6@?@xYdd|IYmIqmcLS6AHa=0@k4z4T~!ar}AfocvdJ4+(SLTlb(S>+l+L
zb)hTndUos84V@HY<c0gSZ%w)TB)3>-QO^_M(~Ek<x19?sGd>+vcWbVSgN935X7{GO
zDwhhX9_xHsxViJ<N5QJp>sOmtI9g9=mCyfuW7bTmUiqIBUYEFsyH5I@6y@1);nb!*
zE8TC3{fT`l`MKop3h~E`3kAxqe#%VTF|X#F%(Hd(wYN>1UbbGb_M^R++T!Yok0b=5
z*dM%`j3-X8#hR1im#FX4&C4xMJinrDn$aq^hNG3kJZtJ({;-AWdGj>$i~M_BSh74D
z0y=(3vZd}$vT>TSa$dP!pUDJ<g#xpmv1;Gmem_dKzQ)}1*`?<)JAR*A^+s)#-ZADR
z#WU}U%}c(-S4H~UP5HCv-ld<j-F8dxbF>=FE_wBG-xVA0k0%WE-&fwhFg5JLiZ^-v
zv&Dq1rm}R@)hv78clFoq=gva;Q{qnN%Y1pp%@K3o#`O9o%e_99Myd|Q#+h=R6Aj{K
z1SVPknE&yRt6-bJ+&L$kugRrv&HeK6P<#8MZ+fN^B`lejXa2nJZ?|&kM}tN-zxJmg
zTh;Hb-sCOiDBs;_(PXn`<Kq7wX=hi@;`_8u_t^vM>a&3dgFS@oU#<_+T=DkI-%Ej4
zF2r8Hr~dc8$g>uoSV7qxie?$HJ_4Rk+sn`J9KNfLGxcMH^oISwO#A<T=WQn!AcGB*
bZJ8Owj;g$@@#^^l6k+gm^>bP0l+XkKH!#O3

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png
deleted file mode 100644
index 0cf107432760dc196f6f6e44533e4a6350003d6e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1069
zcmeAS@N?(olHy`uVBq!ia0vp^5kMTp!2~2X+p}dbFfc#zba4!+nDge&ZU4#TGRHsW
zv*+qh*!DUxkWW`v-SF61o!beMWGCJ2IeCVwCu+{kf16T!7>y#galA<|GEx^Z6<l*k
z$noQqq)b*;(=AgTtoPqPT}`c~era4yoZ|jJhkWPn`TaqrqAvI6xpRDs7o%C&S`s)8
z3N$IQICHcK@F+?+8DJGS<+=Ur*|RfWPn0gcI5p(g%U@MyvsGnv#JUgXeco}`oloBG
z*E_-0SDm6}n*94*mi+kU&yy#;FHhfIWT~aL`R1K_*M1#+KL73QaK~90+=a$cujOS<
zrF?q-f8n%gw`R?HwJPgqSfr=bn*5w2k3Y8moZo&i!sqX?tgUtRS~V{cj9)HLKeGRS
z?2qIeC*K&o=O^=>?bc84diic|wX^c!)vL3!?v*}z?SIQ&&5&1dUEFL*39H3wYvpTh
zRPMQ)WElK$W$gPqM{YdT4!`oJ#Nx}pi{Cxms;))UP0<OlxOVNDD9<}z)>HpuBX;fQ
z+*W&K)w93NhqYIVob+(^`SZ75D%S6LczoG~dDizXJ}j{4Icwo>v`F9;gV;{XbfcMm
zt%qNE_*MJO4L-bA(KJx~&2#;@2@M)Y&g8iCmd3^Vmhw*R*uU;vbo6Sq>uKvJH|V&i
z$RCP+QhX%)=N>!Lb8dM+#V$4z4Yn<QqWDQ#pkLj?p`>%}*}Rp8555O`{;c_FtF(Ko
zE0feaQ!TA6vCrT29nK4X{Oy|==Yw~X3B?#%oGub*b!B)JXfQP-k@*U9qL4uA3X^H9
zs?%K0-+IF3FZb5$qLgZ2$Ev@-ug>t$3HDU&5eQ}H139laS$VHuwac9wGuVVCv}T;z
z|1HL3meBe;H@AjZ$<Cf1K3VN?>`l|aj&hrM$J&0y=zYJe&%9G<{o0zPf4u+SS%0kA
zw^wd^H_MXc=L5<&tXZQo)2HwMSM|3$H+Ft}a;j_Ro<Ax6=D@(-5xZ{RJvq~z7N(`&
zwg<*?_r+^ZKH1YVZ|<ylVV^J8Dz+c?GpZ7s;}`ei|M%j@SxMV(JK65#{rWY;hr7G`
zuyQ)rbpC_FbLVf9S2oP`p0If1PkDAW?&_A~kNJKu|Fhb!m9+h)NBh;STUDRFyYzPH
z(h@7*V?s~l_r1=}%u|vr(esM0{*?0L`o*8o+#xluUP!!pS#>)iWo4`9@9@<+_jVR%
zKm7KWo&QpQ_||%#gHKC-?b-S&<f;J2gfO+5<35b<>?CpI8?;yeWwpI53=IGOKlfiE
g56tvzpxn;P!1LB|txUI>2~dQ=)78&qol`;+00}AU;{X5v

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png
deleted file mode 100644
index f220d7b0f132b97d1671371da2b890d29c8c5678..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1367
zcmeAS@N?(olHy`uVBq!ia0vp^5kMTp!2~2X+p}dbFtGA?x;TbZ%y}~>GF-}2q(T3;
zn)MEqBoj3~9jWJ$^VN*^SALo`)6+*SP|7tRrbC)bgTv&O$Ll-GURM;gNEQd}wY~EF
zz{<Sc{?q4Q4c)$KUBvtM?;9Bt*xdNlnhv-K%-~=Wc1%#>@L_4}R4@=^!7aFEfyv#x
z?ImS#>q08_)hcsTaCjwbjhf51`}ku?NjW)L$&FFE3pCVN#q+J_p1XJO;Khrc;UbQ{
zI%220Z~QpDQgioRHm-#;I*OK_%FVfR&#V6b!;CBK6?^06pHD1r5aN(scr(Lf)+Kf`
z^A}quE<M_sp~B;}pr_++lHvZ?15LNzdZ|vTt7o{fq%QRSnY?YcuSfKqKkK(|21AyJ
zKw(kTBQvv&0@eR&($d6k>#pe6DBI3$ef+q3MBU~IHD+dPB^Uan){5yz&*(V%?D^wc
z5ezG5Z#ee+(Z-L3I?Ih`*X-skxzKgv=H1qN(uSXZnP%|WU3poQv~a_2_L6{30js&6
zi*BYE=`IOM+w7M6uzEwRj>@En#!EME>fW{RRb3Qfby!aA!S~;L>MnFTD7^UobA#0K
zr9uG?>W}`&*#E7&t8?On=m7;jjRis%bId*(FWAnplj*FRu*L$ejk{wtn|Roo7ij-$
z5ZTsI9`bMvQ!(%CvwW)#re6A8U2V48cBY4)pC9j@V=pJL@dfT-=9)6UMDxUN`}_0f
z$s{`pv|PQ~FR|oE5*N!vX2W+Te-0jE{#nBpa(IF6qxbyvwwoGO%zB#QBDi|Bd><eG
z@ALh~lNLy|32*%MGI?Xf8+&^zE3x_h4OtT2EZbTe#f}}Dr>n2uJWImk$n*2_{~c%Y
z({}LfQDV}4^PYc(V^%UFkJ6*p)9b%%WytE@v1?U+{`117KUu%7o;dO1K=!qLb((L)
zew|N#zhWk9K&Z>wvY+qn$`?ttA6~jNJ}v#ZT<qq3`?dw&c)4F(cg>nL8EK3my*ie9
zfB!1}JJ;`YxTK2rw)g+uThR=mu3Mtkx~E@y`87sQd%Cft-hA^e)_|{9J6sn3)wAe3
zZ1K}iWc#*Ff49F#WegGhm{zzlNbj@F{}(lFkJ;kZF9s<su$sGn-(TKx?fNH4GMc4Z
z7_$5i-_`rxzvF^Y+z<Vb`2LDZt%5oYX57Y`x)&~7_)lK)2vf#3r&hgt-*y`Gv0f-z
zdG2M&!fp>0CHZ}G=9vLSDlT0u{%9>BG|ky{fsmrQ5vMF;iR-$Ct6o=kt#rBZ_R_V!
zJs+1V7qQClt*TYi60}<{&ZF$K?u@^)s*((s=huvvI*Tsm*n~V=zEDW;W$Kntt*K?R
z+2<Z`4__Us({lJ%=Z774Cl+v&$6ua#=I-2GJEt-qY+q(96Q&@=nVj0dbnBt<)Q;#g
zX))y*UnZ?INn0L}v9+T6=$;8n?*3jV`mktc&`ArieX??SPq(=Q&TM(Cevm!2_~zlo
z$`dYe2lKJ#My)pDT+V(pe`jtc@3ogDD#9lNCcG-GopkzicW+LZz>*J&cJ|hmi9IdB
zGrhhtRdZRg-h5ohKGDHIgvY8XQszs{{g~_7Tch^It-f9ncWTv^n>pUyD?M&_Xr3@K
zH#e8QscXXYs(G(+ng0$BHm<}Vo0ktZg{_W@F_Y>o`yKVMKDc1_-Man!&TSJebw;aw
zlQlNV`Q}Mfk%Lw^wbU~*F#P|2BgeY}SUj?U%0*^|DYehkOWoP$14S4-UHx3vIVCg!
E0IKX{J^%m!

diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png
deleted file mode 100644
index 456bf466f4e6b4af6cc890344fc4e3981bd9733e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 986
zcmeAS@N?(olHy`uVBq!ia0vp^5kMTp!2~2X+p}dbFfjLfx;TbZ%z1MsI{21@$bpZ{
zEQeARSORWq#aTV>o&EK9J*VhJt*G~l8XTBenpmox&XxSSAenxr^+!P+|CwJ?=I&RF
zJk#~*+c!3z1N=E%&H{Xn7Ay}1S_m*iCgj@4U7t7ab+6n0d_G<7dKO6$SI*T7BXqWH
z+3_Pa(=(7sVXFTl`F!`q7oT3ediU<(8`~16F*P2DDtr3-n45+Oi|3No73Q<rpMHA1
z`t$Gjm<W#r6*lucRw#<5Y;X&^ZqT#tbJKEZpYs#{?!Dxs#%pwf^W*DZzn({mvR}+t
zGDANjN+@mR=iS9ImS$%e`--h^zs_E*;N#TMe*9MAPYL#$PoJ(`n`@Jw_${ZpCd_vK
z{`vzS`-2|dzP?_;?aR80ufN{qT7C1)ySzL*(E~euG<MF7DNAKN&hCD^_A-m%BE@t1
zdI`V!Zrr-lvh#3rn{uK|h`yd<PXI@@N!7aRwRZ6<Bfk88UZVGh`+RrMz6RkHwzhk_
z?k;b2x{~Ez(dwBMrL?ZmeUfLaw@QIj|5hmu0q&1~de+Z+7Rfr@nla``Bf~<0yLsaA
zljGV8)GwIsQgF!Vw3V~g_K3ZHFgWT`<hC2a3!koOIWKiEfx|{LY_4>BuD=6A{Vx@n
zrUH&biX80<#4?mb4&6PG(yQ}fiZ!FFV3nJ)h>}Q=+}j=e|7@Q4IfS;(Gv;jdIP&;I
zrqhneKMfWNybL)t)BXHo0k`WvtY`8Ib4{H2E+gASYS~Tp{s#+ZpH<_#l=<H2$fAor
zR;~W={C$0DlW)FT`$ymA#lee;ehG?`kDY8_xOh9=a6b2szkB1>Tix|BO@DqhYyEY8
zmOo3K<c@T-b+{-Ub>d?;-@aXax%xKU^ur%_e{h(3`PAFHvKF_wyH{!LS{r(<?egl^
zvoCKhmT5Vhr5Nw=(kcIX`PL}?r(Q=l&3WpaS6*HFwK&J3)O419#nOW93dfTIWmUgU
zS-1Lftjr^}!;Z`E=9OE$_1k^FyeyQh`QYEZNos#*Zd2IZb~tfoQIl)Jw-2v6rY|pu
z@JpQ_edub|_SyQnhYfs+75?5AS#)v5GSz~U6DI8~JbnDW;p0dC^9khyl-%-!ADA)!
k|G#nDFc-*R17%HShU_BO)d#K8ihv>vp00i_>zopr0Ex!7#{d8T