css-only-demo.html

<example-menu style="display: inline">
  <template shadowrootmode="open">
    <style>
      menu[popover] {
        margin: 0;
        box-sizing: border-box;
        height: 100vh;
        transition: translate 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
        translate: -100% 0; /* after hide */
        &:popover-open {
          translate: 0 0; /* shown */
          @starting-style {
            &:popover-open {
              translate: -100% 0; /* before show */
            }
          }
        }
        &::backdrop {
          background-color: rgb(0 0 0 / 0.2);
          transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, background-color 0.2s;
          @starting-style {
            &:popover-open::backdrop {
              background-color: rgb(0 0 0 / 0);
            }
          }
        }
      }
    </style>

    <menu id="id" popover="auto">
      <button popovertarget="id" popovertargetaction="hide">Close</button>
      <p>This is a popover</p>
      <ul>
        <li>
          <a href="https://nerdy.dev/have-a-dialog">Have a dialog</a>
        </li>
        <li>
          <a href="https://open-ui.org/components/customizableselect/">Customizable select</a>
        </li>
        <li>
          <a href="https://daisyui.com/components/modal/">DaisyUI Modal</a>
        </li>
      </ul>
    </menu>
    <button popovertarget="id">Menu</button>
  </template>
</example-menu>

<aside style="display: inline">
  <label><input name="color-scheme" type="radio" value="light dark" checked /> System</label>
  <label><input name="color-scheme" type="radio" value="light" /> Forced Light</label>
  <label><input name="color-scheme" type="radio" value="dark" /> Forced Dark</label>
  <style>
    :root {
      color-scheme: light dark;
    }

    :root {
      &:has(input[name="color-scheme"][value="light dark"]:checked) {
        color-scheme: light dark;
      }
      &:has(input[name="color-scheme"][value="light"]:checked) {
        color-scheme: light;
      }
      &:has(input[name="color-scheme"][value="dark"]:checked) {
        color-scheme: dark;
      }
    }
  </style>
</aside>

<example-details>
  <template shadowrootmode="open">
    <style>
      details {
        interpolate-size: allow-keywords;

        &::details-content {
          opacity: 0;
          height: 0;
          overflow-y: hidden;
          transition: opacity 0.2s, height 0.2s, content-visibility 0.2s allow-discrete;
          /* transition-behavior: allow-discrete; */
        }

        &:open {
          &::details-content {
            height: auto;
            opacity: 1;
          }
        }
      }
    </style>
    <style>
      details {
        border-radius: 0.5ex;
        overflow: hidden;
      }
      summary {
        cursor: pointer;
        padding-block: 1ex;
        background: ButtonFace;
      }
      ::details-content {
        color: ActiveText;
        background: Mark;
      }
    </style>
    <details>
      <summary>Details</summary>
      <p>Details content</p>
    </details>
  </template>
</example-details>

<example-popover>
  <template shadowrootmode="open">
    <style>
      .container {
        anchor-scope: --button;
        display: inline;
      }

      .button {
        anchor-name: --button;
      }

      .container:has(:where(.button, .popover):hover) .popover {
        display: inline-block;
        opacity: 1; /* shown */
        @starting-style {
          opacity: 0.333; /* before show */
        }
      }

      .popover {
        opacity: 0.333; /* after hide */
        display: none;
        position: absolute;
        position-anchor: --button;
        position-area: block-end center;
        position-try-fallbacks: flip-block;
        transition: opacity 0.15s, display 0.15s allow-discrete;
      }

      .inner {
        translate: 0 3px;
      }

      .inner::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid ButtonBorder;
        position-area: top;
        translate: 0 -6px;
      }
    </style>

    <div class="container">
      <button class="button">Popover</button>
      <div class="popover">
        <button class="inner">This is a popover</button>
      </div>
    </div>
  </template>
</example-popover>

<example-dropdown>
  <template shadowrootmode="open">
    <style>
      .container {
        anchor-scope: --button;
        display: inline;
      }

      .button {
        anchor-name: --button;
      }

      .dropdown {
        position: absolute;
        position-anchor: --button;
        position-area: block-end center;
        position-try-fallbacks: flip-block;
        transition: opacity 0.15s, display 0.15s allow-discrete;
        &[popover] {
          margin: 0;
          padding: 0;
          border: 0;
          overflow: unset;

          opacity: 0.333; /* after hide */
          &:popover-open {
            opacity: 1; /* shown */
            @starting-style {
              &:popover-open {
                opacity: 0.333; /* before show */
              }
            }
          }
        }
      }

      .inner {
        translate: 0 3px;
      }

      .inner::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid ButtonBorder;
        position-area: top;
        translate: 0 -6px;
      }
    </style>

    <div class="container">
      <button popovertarget="id" class="button">Dropdown</button>
      <div id="id" popover class="dropdown">
        <button class="inner" popovertarget="id" popoveraction="hide">This is a dropdown</button>
      </div>
    </div>
  </template>
</example-dropdown>

<example-select>
  <template shadowrootmode="open">
    <style>
      select {
        interpolate-size: allow-keywords;
        transition: width 0.3s ease, height 0.3s ease;

        &,
        &::picker(select) {
          appearance: base-select;
        }

        &::picker(select) {
          --_dur-in: 0.5s;
          --_dur-out: 0.1s;

          transition: display var(--_dur-in) allow-discrete, overlay var(--_dur-in) allow-discrete,
            opacity var(--_dur-in) ease, transform var(--_dur-in) ease-in-out;
        }

        /* off stage */
        &:not(:open)::picker(select) {
          opacity: 0;
          transform: scale(0.95);
          transition-duration: var(--_dur-out);
        }
        /* on stage */
        &:open::picker(select) {
          opacity: 1;
        }

        &::picker-icon {
          opacity: 0.75;
          transition: opacity 0.3s ease, transform 0.3s ease;
        }
        &:is(:hover, :focus-visible)::picker-icon {
          opacity: 1;
        }
        &:open::picker-icon {
          opacity: 1;
          transform: rotateX(0.5turn);
        }

        option {
          transition: background-color 0.3s ease, outline-offset 0.3s ease;
          &:focus-visible {
            outline-offset: -2px;
          }
          &:checked {
            background-color: Highlight;
            &::checkmark {
              color: CanvasText;
            }
          }
        }
      }
    </style>

    <select>
      <button>
        <selectedcontent></selectedcontent>
      </button>
      <option hidden>select…</option>
      <optgroup label="optgroup A">
        <option>option 1</option>
        <option>option 2</option>
      </optgroup>
      <optgroup label="optgroup B">
        <option>option 3</option>
        <option>option 4</option>
      </optgroup>
    </select>
  </template>
</example-select>