Bug: Not possible to change initial state for one toggle in a group

[mirisuzanne]

With tabs, we create a group with all of the toggles at 0:

panel-tab {
  toggle: tab 1 at 0 group sticky;
}

But ideally, we would have the first tab active by default. In order to do that, we need to change the definition on that first child:

panel-tab:first-child {
  toggle: tab 1 at 1 group sticky;
}

When I try that, the entire group breaks. It seems like that is changing the initial state for everything in the group?

[jerivas]

It looks like the polyfill gets confused when trying to set up the toggle root on the :first-child selector. Even though we only want to target the first panel-tab the wide toggle root scope means all other sibling panel-tabs also get polyfilled with an initial state of 1, which overrides the previous toggle roots initialized with 0.

Maybe we need new syntax to target the toggle trigger only instead of redefining the root + trigger on the first child? We could also modify the polyfill to only modify initial states if a node is already part of a toggle root, but that would interfere with the overlapping scope behavior we rely on to define a bunch of toggle roots on sibling and nested elements (like the tree and self-toggle examples).

[mirisuzanne]

I think the idea in the current spec is that grouped toggles should still be treated as distinct toggles with distinct roots -- only they are exclusive. So:

panel-tab {
  toggle: tab 1 at 0 group sticky;
}

• Each panel-tab becomes the root of a tab toggle
• That toggle is visible to a wide scope except that…
• When scopes with the same name overlap, the closer scope wins, so each panel's toggle 'takes over' for the previous
• Those individual toggles are "grouped" so only one can be active at a time

If you think of them as individual toggles that are part of a grouping, then the current syntax makes sense:

panel-tab:first-child {
  toggle: tab 1 at 1 group sticky;
}

Is only trying to change one toggle in the group.