Few ideas for PicoCSS

[vonTrips]

Hi, PicooCSS is great project! I started using PicoCSS a few weeks back and I'm really happy. But there are just a few things missing that I had to finish myself, so I'll share them. I'm not really skilled on the frontend, so I ask for your indulgence, the codes are nothing special, but hopefully you can get the idea from them...

• Tabs
• Responsive show/hide nav
• Flash/alerts

TABS:

The first custom feature is TABS, maybe a different version of Accordions. I was inspired by https://codepen.io/alvarotrigo/pen/VwMJgGO and I think it's something that should be (native) part of the PicoCSS framework
My CSS for TABS:

.tabs {
  padding: 0.2em;
  margin: 0 auto;
  background: inherit;
  color: inherit;
}

.tabs p {
  margin: 0 0 20px;
  line-height: 1.5;
}

.tabs section {
  display: none;
  padding: 1em;
  background-color: var(--card-sectionning-background-color);
  border-top: var(--border-width) solid var(--form-element-border-color);
  border-bottom: var(--border-width) solid var(--form-element-border-color);
}

.tabs input {
  display: none;
}

.tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  color: var(--form-element-color);
  border: 1px solid transparent;
}

.tabs label:hover {
  color: var(--primary);
  cursor: pointer;
}

.tabs input:checked + label {
  color: inherit;
  background-color: var(--card-sectionning-background-color);
  border-left: 1px solid var(--form-element-border-color);
  border-right: 1px solid var(--form-element-border-color);
  border-top: 3px solid var(--primary);
  border-bottom: 2px solid var(--card-sectionning-background-color);
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6,
#tab7:checked ~ #content7,
#tab8:checked ~ #content8 {
  display: block;
}

My HTML for TABS:

<div class="tabs">
  <input id="tab1" type="radio" name="tabs">
  <label for="tab1">Item 1</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Item 2</label>

  <section id="content1">
    <p>Content for Item 1.</p>
  </section>

  <section id="content2">
    <p>Content for Item 2</p>
  </section>
</div>

RESPONSIVE SHOW/HIDE NAV

The second thing I missed with PicoCSS and had to get it done is RESPONSIVE SHOW/HIDE NAV. I like the way the horizontal NAV in framework works, the addition of the DROPDOWNS takes it all to the next level. But I miss the responsive hide/show of menus at lower resolutions. For my purposes I used completely https://www.w3schools.com/howto/howto_js_topnav_responsive.asp just adjusted the colors.
I can send my codes if needed, but I'm really basing this on W3. Unfortunately I have no idea how to fit this to NAV>UL>LI used in PicoCSS. But I think that since the framework allows show/hide side menu (https://picocss.com/examples/google-amp/), it would be nice to also offer show/hide horizontal menu (NAV).

FLASH/ALERTS

I know there are already two threads here, the live one is here #12 I'll just add that I know this from Bootstrap, where I used DISMISSING version https://getbootstrap.com/docs/5.0/components/alerts/#dismissing, but exclusively for announcements, e.g. successful editing or attempting to enter a protected section, etc. I would also appreciate this functionality in the framework - the primary, success, danger (error), warning and info variants are sufficient.

Of course I can send or share all the code (but I primarily use GitLab). I hope you will at least consider my ideas and I will be glad for any response.

Have a nice day.