Checkbox improvements

- Added `part="control", fixes #529
- Removed wrapper div which is no longer needed
- Removed `form-control--has-hint` class which is no longer used anywhere

src/components/checkbox/checkbox.ts

@@ -233,47 +233,40 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733
     //
     return html`
-      <div
-        class=${classMap({
-          'form-control--has-hint': hasHint,
-          'form-control': true,
-        })}
+      <label part="base">
+        <span part="control">
+          <input
+            class="input"
+            type="checkbox"
+            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+            name=${this.name}
+            value=${ifDefined(this._value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked ? 'true' : 'false'}
+            aria-describedby="hint"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
+
+          <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
+        </span>
+
+        <slot part="label"></slot>
+      </label>
+
+      <slot
+        name="hint"
+        aria-hidden=${hasHint ? 'false' : 'true'}
+        class="${classMap({ 'has-slotted': hasHint })}"
+        id="hint"
+        part="hint"
+        >${this.hint}</slot
       >
-        <label part="base">
-          <span class="control">
-            <input
-              class="input"
-              type="checkbox"
-              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-              name=${this.name}
-              value=${ifDefined(this._value)}
-              .indeterminate=${live(this.indeterminate)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked ? 'true' : 'false'}
-              aria-describedby="hint"
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-
-            <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
-          </span>
-
-          <slot part="label"></slot>
-        </label>
-
-        <slot
-          name="hint"
-          aria-hidden=${hasHint ? 'false' : 'true'}
-          class="${classMap({ 'has-slotted': hasHint })}"
-          id="hint"
-          part="hint"
-          >${this.hint}</slot
-        >
-      </div>
     `;
   }
 }

src/styles/native/checkbox.css

@@ -41,7 +41,7 @@ input[type='checkbox']:where(:not(:host *)) {
 }
 
 input[type='checkbox']:where(:not(:host *)),
-:host .control {
+:host [part~='control'] {
   flex: 0 0 auto;
   position: relative;
   display: inline-flex;
@@ -75,7 +75,7 @@ input[type='checkbox']:where(:not(:host *)) + label,
 
 /* Checked */
 input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *)),
-[part~='base'] .control:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
+[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
   color: var(--checked-icon-color);
   border-color: var(--border-color-checked);
   background-color: var(--background-color-checked);
@@ -83,7 +83,7 @@ input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *)),
 
 /* Focus */
 input[type='checkbox']:focus-visible:where(:not(:host *)),
-[part~='base'] .control:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
+[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }

src/styles/shadow/form-control.css

@@ -21,7 +21,7 @@
   font-size: var(--wa-size-smaller, 85%);
   line-height: var(--wa-form-control-label-line-height);
 
-  &:not(.has-slotted, .form-control--has-hint *) {
+  &:not(.has-slotted) {
     display: none;
   }
 }