Make use of CSS :has()

[distantnative]

Description

Reasoning

We already have started again to use :has() in many places. It might be time to bring all these back as well. I couldn't notice any performance issues in Firefox this time.

Changelog

Breaking changes

• <k-item>: Removed data-only-option attributes
• <k-dialog>: Removed data-has-footer attribute
• <k-toggles-input>: Removed data-disabled attribute
• <k-writer-input>: Removed data-toolbar-inline attribute
• <k-bubble>: Removed data-has-text attribute
• <k-header>: Removed data-has-buttons attribute
• <k-tag>: Removed data-has-image and data-has-toggle attributes
• <k-tree>: Removed data-has-subtree attribute

Ready?

• Tests and CI checks all pass

For review team

• Add changes & docs to release notes draft in Notion

[bastianallgeier]

I wonder if we should switch the css rules, but still keep the data attributes a little longer. They migth still be useful as hooks for custom styles.

[distantnative]

I'd love to steer people away from these data attributes as soon as possible.

[nilshoerrmann]

Removing the data attributes will be huge breaking change for many projects. Make sure to communicate this loudly if you proceed in that direction. It's a good idea in general 👍 but it will be disruptive for existing projects 🚨

[distantnative]

We of course need to communicate it properly. That's why they're all listed as breaking changes in the initial post.

I am still wondering if these specific data attributes are really used in "many projects". What are the use cases in projects for these?

[bastianallgeier]

I think it's good to clean up, but there are parts that are easier to read with the data attributes (in my opinion) or provide a bit more selector safety. I've tried to go through all the different changes and comment accordingly. I hope it helps to get this done.