<panel-set>

<panel-set> is a kind of experiment in 'something different', based on some fundamental ideas and observation in design systems and the accessibility tree, it aims to allow users to create declarative tabsets and single select accordions (vertical tabsets, if you prefer).

It is informed by a long history of other experiments and is a unique spin in how it sets about this by being remarkably 'hands off'.

Start with HTML

First, it is a wrapper element. You wrap it around more or less standard HTML pairs of heading and content with simple boolean attributes identifying them as either x-title or x-content. So, kinda like this

 <panel-set> 
      <h2 x-title>Ingredients</h2>
      <div x-content>
        some content here that lists ingredients
      </div>
      <h2 x-title>Directions</h2>
      <div x-content>
        some content here describing the direction to prepare
      </div>
      <h2 x-title>Nutrition</h2>
      <div x-content>
        some content here about nutritional information
      </div>
</panel-set>

Even without JavaScript at all, this is reasonable HTML content and has been since 1991.. It's not interactive, so no need to worry about lots of other kinds of problems. With nothing else, it looks like...

It is, of course, highly stylable, so your page can add some CSS like...

  [x-title] {
    color: teal;
    margin: 0;
    padding:0;
  }
  [x-content] {
    margin-left: 1rem;
    margin-bottom: 1rem;
  }

Which renders, unsprisingly as...

Focus on function and meaning

What's really interesting here is that its main focus is mixing in function and meaning for accessibility rather than rendering. Basically, it's what people seem to want from the is="..." attribute, without the problems inherent in that. It's a new element idea without the old problems that frustrate us: Your DOM remains your DOM, in the light DOM. The only thing that is provided is that which is fundamentally necessary in order for it to retain some basic visual meaning - and the rest is up to you to style, in your normal light DOM. Below you will notice that it looks exactly the same as above, however now only one content section is expanded and it is both interactive and meaningful as vertical tabs, with full keyboard handling.

Cool. Simple enough: If you inspect the DOM you'll notice all of the aria attributes and things have sprung to life, and you'll notice there is a an attribute display="accordion". This is the default mode of panelsets because it should be acceptable on the smallest of screens. You can also change the display (even dynamically) to "tabs" and it will render as...

You can combine this with a `ResizeObserver` or `window.matchMedia` to resposively switch the display mode with just a few lines, but that's up to you.

Now, I know what you're thinking: "Those... don't look much like tabs?" and you're right. It does, of course, provide for something a little better by letting you opt in via another attribute theme="default". If you just add that, then you've got...

As you can see, your light DOM is still your light DOM, and sure you have a lot of flexibility in styling it -- but... To be honest, if history is any indication you very well might hit a wall....

If you do (and let's be honest, you will because we haven't managed to get this right yet), then rather than fiddling around with complex or custom ways to hide secrets and expose themes, and pieces and parts and properties you can just have very nearly full control.

So, basically --- that's the potentially interesting spin. What do you think? Want to try it? All you have to do is something like (the actual script is linked):

<script async type="module" src="panel-set-two.mjs"></script>

You can see this in action, with live switching of the type baesd on matchMedia and a little demo

You can also view and edit and remix all of the code in this explainer/demo @ https://glitch.com/edit/#!/panel-set