Integrate HTML switch element polyfill for OuiCheckbox

[Copilot]

Adds support for the native HTML switch element (<input type="checkbox" switch>) via the input-switch-polyfill package, enabling modern switch semantics with proper ARIA roles and accessibility features.

Changes

• Added dependency: input-switch-polyfill@1.9.0
• Created polyfill loader (lib/basic/switch-polyfill.ts): Conditionally loads polyfill when 'switch' in HTMLInputElement.prototype is false
• Updated OuiCheckbox: Adds switch attribute to input elements when switch prop is true
• TypeScript definitions: Added type declarations for the polyfill module

Implementation

The polyfill initialization uses an async IIFE to avoid blocking module evaluation:

// lib/basic/switch-polyfill.ts
import 'input-switch-polyfill/input-switch-polyfill.css'

;(async () => {
  if (!('switch' in HTMLInputElement.prototype)) {
    await import('input-switch-polyfill')
  }
})()

The OuiCheckbox component now renders the native switch attribute:

<OuiCheckbox v-model="value" switch>
  Switch with label
</OuiCheckbox>

Renders as:

<input type="checkbox" switch class="oui-switch">

Screenshots

Unchecked state:

Checked state:

The polyfill provides drag-to-toggle interactions, accent color support, and enhanced contrast modes while maintaining zero overhead on browsers with native support.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• blog.tomayac.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Integrate polyfill for the HTML switch element</issue_title>
<issue_description>blog.tomayac.com: A polyfill for the HTML switch element (2026-01-13)

Update OuiCheckbox accordingly.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Integrate polyfill for the HTML switch element #1

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.