Demo 3: Tab Demo (Aria Toggles)

<div class="theming">
  <fieldset>
    <span>
      <input type="radio" id="grape" name="themes" value="grape" aria-toggleValueForAttribute="label" aria-toggleValueFor="grape" aria-toggleFor="theme-target">
      <label for="grape">Grape</label>
    </span>
    <span>
      <input type="radio" id="green" name="themes" value="green" aria-toggleValueForAttribute="label" aria-toggleValueFor="green" aria-toggleFor="theme-target">
      <label for="green">Green</label>
    </span>
    <span>
      <input type="radio" id="blue" name="themes" value="blue" checked aria-toggleValueForAttribute="label" aria-toggleValueFor="blue" aria-toggleFor="theme-target">
      <label for="blue">Blue</label>
    </span>
    <span>
      <input type="radio" id="red" name="themes" value="red" aria-toggleValueForAttribute="label" aria-toggleValueFor="red" aria-toggleFor="theme-target">
      <label for="red">Red</label>
    </span>
  </fieldset>
  <output aria-label="blue" id="theme-target" aria-toggleStates="grape,green,blue,red" class="show-colors">I am affected by the colors cycle</output>
  <button type="submit" aria-toggleValueForAttribute="label" aria-toggleFor="theme-target">Cycle</button>
</div>

@layer demo.theming {
  .theming {
    display: grid;
    gap: var(--size-3);
    justify-items: start;
  }
  
  .theming > fieldset {
    display: inline-flex;
    gap: var(--size-2);
    border: none;
    padding: 0;
  }
  
  .theming > fieldset:focus-within {
    outline: 1px solid var(--link);
    outline-offset: 5px;
  }
  
  .theming > fieldset > span > input {
    inline-size: 0;
    block-size: 0;
    margin: 0;
  }
  
  .theming > fieldset > span > label {
    padding-inline: 1ch;
    cursor: pointer;
  }
  
  .theming > fieldset > span:hover {
    border-block-end: 3px solid var(--gray-5);
  }
  
  .theming > fieldset > span:has(:checked) {
    border-block-end: 3px solid var(--blue-5);
  }
  
  .show-colors {
    padding: var(--size-3) var(--size-5);
    background: var(--surface-2);
  }
  
  .show-colors[aria-label="grape"] {
    background: var(--grape-7);
    color: var(--grape-0);
  }
  
  .show-colors[aria-label="green"] {
    background: var(--green-7);
    color: var(--green-0);
  }
  
  .show-colors[aria-label="blue"] {
    background: var(--blue-7);
    color: var(--blue-0);
  }
  
  .show-colors[aria-label="red"] {
    background: var(--red-7);
    color: var(--red-0);
  }
}