feat(input) - update radio and checkbox components for shine

.changeset/lemon-shoes-tease.md

@@ -0,0 +1,11 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Updated checkbox and radio styling in Stacks Classic and documentation for SHINE
+`.s-check-control` has been removed
+Renamed `.s-check-group` to `.s-form-group`
+`.s-checkbox` and `.s-radio` are now expected to be on the container where `.s-check-control` would previously be applied. They are no longer needed on the input itself
+Added `.s-checkbox__checkmark` and `.s-radio__checkmark` to Stacks Classic
+Added `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup` components to Stacks Svelte

MIGRATION_GUIDE.md

@@ -48,6 +48,12 @@
 - The variant `Muted` has been removed, `Tonal` has been added
 - `s-btn__md` has been removed, `s-btn__lg` has been added
 
+#### Checkbox & Radio
+- The `s-checkbox` and `s-radio` classes should now be applied to the container including the `input` and `label`. These classes replace `.s-check-control`
+- The `s-checkbox` and `s-radio` classes are no longer needed on the `input` element itself
+- The `s-check-group` class has been renamed to `s-form-group`
+- Added `.s-checkbox__checkmark` and `.s-radio__checkmark` modifier classes for checkmark-style variants
+
 #### Inputs
 - `s-input__md` removed
 - `s-input__xl` removed

packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.a11y.test.ts

@@ -1,35 +1,33 @@
-import { html } from "@open-wc/testing";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const checkboxTemplate = ({ component, testid, id }: any) =>
-    html` <div class="s-check-control" data-testid="${testid}">
-        ${component}
-        <label class="s-label" for="${id}">Label</label>
-    </div>`;
+["s-checkbox", "s-radio"].forEach((atomicClass) => {
+    const type = atomicClass.replace("s-", "");
 
-["checkbox", "radio"].forEach((type) => {
     describe(type, () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
             runA11yTests({
-                tag: "input",
-                baseClass: `s-${type}`,
-                attributes: {
-                    name: "test-name",
-                    id: "test-id",
-                    type,
-                    ...(state === "checked" ? { checked: "checked" } : {}),
+                baseClass: atomicClass,
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                    primary: ["checkmark"],
+                },
+                children: {
+                    default: `
+                        <input
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
                 },
-                template: ({ component, testid }) =>
-                    checkboxTemplate({
-                        component,
-                        testid,
-                        id: "test-id",
-                    }),
                 options: {
-                    testidSuffix: state,
+                    testidSuffix: `${state}-${type}`,
                 },
             });
         });