dotted line if tooltip is added

[Kugeleis]

Describe the issue

Current Behavior

        <ul>
            <li>
                <label data-tooltip="Toggle dark and light mode" for="theme-toggle" class="theme-toggle-label">{%
                    include 'flaticons/bright.svg' %}
                    <input name="terms" class="theme-toggle" id="theme-toggle" type="checkbox" role="switch"
                        checked />{%
                    include 'flaticons/moon.svg' %}
                </label>
            </li>
        </ul>

produces a dotted line below the element.
data-tooltip="Tooltip" within the <input> element destroys formatting completely.

Expected Behavior

Only tooltip added

[Yohn]

Are you using the newest version of Pico here? Cause

pico/scss/components/_tooltip.scss

Lines 12 to 16 in 6dc6489

	&:not(a, button, input) {
	border-bottom: 1px dotted;
	text-decoration: none;
	cursor: help;
	}

prevents the dotted line on inputs in the current release of Pico here.

[Kugeleis]

Yes, I'm using the latest version (2.0.6). Following your hint I added style="border-bottom: none;" to the element locally as a patch.

[Yohn]

I was able to duplicate your issue, and found a fix which I included in my fork of PicoCSS.

The main change for your issue is to update that line I pointed out previously to the follow:
&:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {