fix(checkbox): add relative value for position in checkbox container (#896)

Closes #895

Co-authored-by: Erbil Nas <[email protected]>

Author: erbilnas

src/components/checkbox-group/checkbox/bl-checkbox.css

@@ -24,6 +24,10 @@ label {
   margin-bottom: var(--bl-size-3xs);
 }
 
+.checkbox-container {
+  position: relative;
+}
+
 input[type="checkbox"] {
   appearance: none;
   outline: none;

src/components/checkbox-group/checkbox/bl-checkbox.test.ts

@@ -14,7 +14,7 @@ describe("bl-checkbox", () => {
     assert.shadowDom.equal(
       el,
       `
-        <div>
+        <div class="checkbox-container">
           <label>
               <input type="checkbox"
                 aria-readonly="false"

src/components/checkbox-group/checkbox/bl-checkbox.ts

@@ -198,6 +198,7 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
     const requiredSuffix = this.required ? html`<span class="required-suffix">*</span>` : "";
 
     const classes = {
+      "checkbox-container": true,
       "dirty": this.dirty,
       "invalid": !this.checkValidity(),
     };