JSFiddle - React, Tailwind, and code Playground

by tdjdev

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selur@latest/dist/selur-longhand.css"/>

<header
  data-widget="menu"
  data-type="navbar"
  data-breakpoint="md"
  data-trigger="checked"
  style="--nav-position: 2; /* need :has support to be auto-setted */"
>
  <h1>Brand</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
  <input type="checkbox" data-widget="toggle" data-type="hamburger">
</header>

<hr/>

<button>test</button>
<input type="checkbox" data-widget="toggle" data-type="switch"/>
<input type="checkbox" data-widget="toggle" data-type="switch" data-params="large"/>
<input type="checkbox" data-widget="toggle" data-type="switch" data-params="small"/>
<input type="checkbox" data-widget="toggle" data-type="hamburger"/>
<input type="checkbox" data-widget="toggle" data-type="fried"/>
<input type="checkbox" data-widget="toggle" data-type="hotdog"/>
<input type="checkbox" data-widget="toggle" data-type="meatball"/>
<input type="checkbox" data-widget="toggle" data-type="kebab"/>
<input type="checkbox" data-widget="toggle" data-type="bento"/>

<hr/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div
  data-widget="slideshow"
  data-type="carousel"
  data-direction="vertical"
  data-indexation="all"
  data-trigger="focus"
>
  <div tabindex="0" style="background: #abcdefed;"> First clickable slide </div>
  <div tabindex="0" style="background: #abcdefed;"> Second clickable slide </div>
  <div tabindex="0" style="background: #abcdefed;"> Third clickable slide </div>
  <div tabindex="0" style="background: #abcdefed;"> Fourth clickable slide </div>
  <div tabindex="0" style="background: #abcdefed;"> Fifth clickable slide </div>
  <div tabindex="0" style="background: #abcdefed;"> Sixth clickable slide </div>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div
  data-widget="slideshow"
  data-type="carousel"
  data-direction="horizontal"
  data-indexation="all"
 ...

CSS

body {
  /* If you want to how it react to: */

  /* color change */
  /* --d-red: 33; */
  /* --d-green: 33; */
  /* --d-blue: 33; */

  /* different text size */
  /* --font-size: 1.5rem; */

}

JavaScript

// JS fallback for browser that doesn't support :has.
// Utterly useless if you use react/vue wich do the same job but better
if(!CSS.supports(":has(*)")) { // only on legacy browser 
  const getCSSVar = (element, varName) => getComputedStyle(element).getPropertyValue(varName)
  // for all navbar
  document.querySelectorAll('[data-widget="menu"][data-type="navbar"] > [data-widget="toggle"]')
    .forEach(toggle => toggle.addEventListener('change', function() {
      this.parentElement.style.setProperty('--state--', Number(this.checked));
    }));

  // for all focus based trigger
  document.querySelectorAll('[data-trigger="focus"]').forEach(carousel => {
    [...carousel.children].forEach(slide => {
      slide.addEventListener(
        'focus',
        function() {carousel.style.setProperty('--state--', getCSSVar(this,'--i--'))}
      )
      // If you want the exact same behavior of the :has based interactivity
      slide.addEventListener("blur", e => carousel.style.removeProperty("--state--"))
    })
  });

}