Hover effect incorrectly shown on checkbox and radio button

[gabbsmo]

Describe the bug The circle/square is filled when hovering over a disabled radio button or checkbox.

To Reproduce Steps to reproduce the behavior:

1. Go to Pattern Lab for disabled checkbox and radio button
2. Hover over the input
3. Notice the inner circle appearing

Expected behavior Nothing should happen, as in Fluent React.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 124

Additional context You can fix it for radio buttons by adding the :disabled condition to relevant selectors.

.hoo-radio:hover:not(:checked, :disabled) + label:after, .hoo-radio:checked + label:after {
    transform: scale(1);
    opacity: 1;
}

Checkboxes are a little more tricky since there's this magic box-shadow used to implement the check icon.

.hoo-checkbox:not(:checked, :disabled):hover + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    background: var(--neutralSecondary);
    box-shadow: 2px 0 0 var(--neutralSecondary), 4px 0 0 var(--neutralSecondary), 4px -2px 0 var(--neutralSecondary), 4px -4px 0 var(--neutralSecondary), 4px -6px 0 var(--neutralSecondary), 4px -8px 0 var(--neutralSecondary);
}

.hoo-checkbox:not(:checked, :disabled):hover + label:after, .hoo-checkbox:checked + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    box-shadow: 2px 0 0 var(--inputIcon), 4px 0 0 var(--inputIcon), 4px -2px 0 var(--inputIcon), 4px -4px 0 var(--inputIcon), 4px -6px 0 var(--inputIcon), 4px -8px 0 var(--inputIcon);
}

[StfBauer]

🛳️ Shipped in 2.5.0 - https://lab.n8d.studio/htwoo/changelog/htwoo-core-cl/