microsoft-webui-press 3.0.5

<div role="group" aria-label="Color mode" class="control">
  <span class="label">Color mode</span>
  <div class="modes">
    <button type="button" aria-label="System" title="Follow your device's color mode" aria-pressed="{{appearance.selected.system}}" ?disabled="{{!ready}}" @click="{change('system')}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect x="3" y="4" width="18" height="13" rx="2"></rect>
        <path d="M8 21h8m-4-4v4"></path>
      </svg>
      <span>System</span>
    </button>
    <button type="button" aria-label="Light" title="Use light mode" aria-pressed="{{appearance.selected.light}}" ?disabled="{{!ready}}" @click="{change('light')}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
        <circle cx="12" cy="12" r="4"></circle>
        <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path>
      </svg>
      <span>Light</span>
    </button>
    <button type="button" aria-label="Dark" title="Use dark mode" aria-pressed="{{appearance.selected.dark}}" ?disabled="{{!ready}}" @click="{change('dark')}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M20.5 13.3A8.5 8.5 0 0 1 10.7 3.5a8.5 8.5 0 1 0 9.8 9.8Z"></path>
      </svg>
      <span>Dark</span>
    </button>
  </div>
</div>
<if condition="error"><span role="alert">{{error}}</span></if>