Apply dropdown li padding to label

[zachwill]

Relevant lines in _dropdown.css:

pico/scss/components/_dropdown.scss

Lines 192 to 193 in 1039a47

	padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
	var(#{$css-var-prefix}form-element-spacing-horizontal);

The basic gist:

1. If li:has(label)...
2. Then the padding should actually be applied to the label rather than the li

With the padding being applied to the li instead, there's times when clicks don't reach the label and checkbox/radio button — even though the dropdown item is highlighted:

By using li:has(label) then you could zero out the padding in this instance and apply it instead to the label. Pseudocode below:

details.dropdown > summary + ul li {
  padding: calc(…);

  /* li that directly contains a label */
  &:has(> label) {
    padding: 0;
  }

  /* the label inside */
  & > label {
    padding: calc(…);
  }
}

Thanks!