From 0f365eaa7be41a0f3ffba0b934a8c00e6cd8bfc6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 13 Jan 2026 19:52:15 +0000
Subject: [PATCH 1/4] Initial plan


From 893f97c6fb7f855abfd5c9ddb7dda8a318b25f6a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 13 Jan 2026 19:58:30 +0000
Subject: [PATCH 2/4] feat: integrate HTML switch element polyfill

Co-authored-by: holtwick <49557+holtwick@users.noreply.github.com>
---
 lib/basic/input-switch-polyfill.d.ts | 12 ++++++++++++
 lib/basic/oui-checkbox.vue           | 10 ++++++++--
 lib/basic/switch-polyfill.ts         | 10 ++++++++++
 package.json                         |  1 +
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 lib/basic/input-switch-polyfill.d.ts
 create mode 100644 lib/basic/switch-polyfill.ts

diff --git a/lib/basic/input-switch-polyfill.d.ts b/lib/basic/input-switch-polyfill.d.ts
new file mode 100644
index 0000000..ced24fd
--- /dev/null
+++ b/lib/basic/input-switch-polyfill.d.ts
@@ -0,0 +1,12 @@
+// Type definitions for input-switch-polyfill
+declare module 'input-switch-polyfill' {
+  // The polyfill is a side-effect only module
+  const polyfill: void
+  export default polyfill
+}
+
+declare module 'input-switch-polyfill/input-switch-polyfill.css' {
+  // CSS module
+  const css: string
+  export default css
+}
diff --git a/lib/basic/oui-checkbox.vue b/lib/basic/oui-checkbox.vue
index c00dfa7..8c5b682 100644
--- a/lib/basic/oui-checkbox.vue
+++ b/lib/basic/oui-checkbox.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import './oui-form.styl'
 import './oui-checkbox.styl'
+import './switch-polyfill'
 
 defineOptions({
   inheritAttrs: false,
@@ -37,12 +38,17 @@ const klass = computed(() => {
     klasses.push('_checkbox_intermediate')
   return klasses
 })
+
+const switchAttrs = computed(() => {
+  // Add the 'switch' attribute for the polyfill when switch prop is true
+  return props.switch ? { switch: '' } : {}
+})
 </script>
 
 <template>
   <template v-if="title || $slots.default">
     <label class="oui-form-item-checkbox" :class="{ _disabled: $attrs.disabled }">
-      <input v-model="modelBool" type="checkbox" :class="klass" v-bind="$attrs">
+      <input v-model="modelBool" type="checkbox" :class="klass" v-bind="{ ...$attrs, ...switchAttrs }">
       {{ ' ' }}
       <slot>{{ title }}</slot>
     </label>
@@ -55,6 +61,6 @@ const klass = computed(() => {
     </template>
   </template>
   <template v-else>
-    <input v-model="modelBool" type="checkbox" :class="klass" v-bind="$attrs">
+    <input v-model="modelBool" type="checkbox" :class="klass" v-bind="{ ...$attrs, ...switchAttrs }">
   </template>
 </template>
diff --git a/lib/basic/switch-polyfill.ts b/lib/basic/switch-polyfill.ts
new file mode 100644
index 0000000..fa24bf0
--- /dev/null
+++ b/lib/basic/switch-polyfill.ts
@@ -0,0 +1,10 @@
+// Polyfill for the HTML switch element
+// https://github.com/tomayac/input-switch-polyfill
+
+// Import the polyfill CSS
+import 'input-switch-polyfill/input-switch-polyfill.css'
+
+// Only load the polyfill if the browser doesn't support the switch attribute
+if (!('switch' in HTMLInputElement.prototype)) {
+  import('input-switch-polyfill')
+}
diff --git a/package.json b/package.json
index cd0052b..4d3bc4b 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.9",
     "@vueuse/core": "^14.1.0",
+    "input-switch-polyfill": "^1.9.0",
     "vue": "^3.5.25",
     "zeed": "^1.1.1"
   },

From 6aebceb4c524ce8d01720071de77dcfa6b63f313 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:02:49 +0000
Subject: [PATCH 3/4] fix: address code review feedback on polyfill integration

Co-authored-by: holtwick <49557+holtwick@users.noreply.github.com>
---
 lib/basic/input-switch-polyfill.d.ts | 2 --
 lib/basic/switch-polyfill.ts         | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/basic/input-switch-polyfill.d.ts b/lib/basic/input-switch-polyfill.d.ts
index ced24fd..84d5c01 100644
--- a/lib/basic/input-switch-polyfill.d.ts
+++ b/lib/basic/input-switch-polyfill.d.ts
@@ -1,8 +1,6 @@
 // Type definitions for input-switch-polyfill
 declare module 'input-switch-polyfill' {
   // The polyfill is a side-effect only module
-  const polyfill: void
-  export default polyfill
 }
 
 declare module 'input-switch-polyfill/input-switch-polyfill.css' {
diff --git a/lib/basic/switch-polyfill.ts b/lib/basic/switch-polyfill.ts
index fa24bf0..6ddc4d0 100644
--- a/lib/basic/switch-polyfill.ts
+++ b/lib/basic/switch-polyfill.ts
@@ -6,5 +6,5 @@ import 'input-switch-polyfill/input-switch-polyfill.css'
 
 // Only load the polyfill if the browser doesn't support the switch attribute
 if (!('switch' in HTMLInputElement.prototype)) {
-  import('input-switch-polyfill')
+  await import('input-switch-polyfill')
 }

From dfb850d264524811083c041b2c49ce76b85b59b6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:05:43 +0000
Subject: [PATCH 4/4] fix: wrap polyfill import in async IIFE to avoid
 top-level await

Co-authored-by: holtwick <49557+holtwick@users.noreply.github.com>
---
 lib/basic/switch-polyfill.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/basic/switch-polyfill.ts b/lib/basic/switch-polyfill.ts
index 6ddc4d0..d5a0801 100644
--- a/lib/basic/switch-polyfill.ts
+++ b/lib/basic/switch-polyfill.ts
@@ -5,6 +5,8 @@
 import 'input-switch-polyfill/input-switch-polyfill.css'
 
 // Only load the polyfill if the browser doesn't support the switch attribute
-if (!('switch' in HTMLInputElement.prototype)) {
-  await import('input-switch-polyfill')
-}
+;(async () => {
+  if (!('switch' in HTMLInputElement.prototype)) {
+    await import('input-switch-polyfill')
+  }
+})()