Integrate HTML switch element polyfill for OuiCheckbox

lib/basic/input-switch-polyfill.d.ts

@@ -0,0 +1,10 @@
+// Type definitions for input-switch-polyfill
+declare module 'input-switch-polyfill' {
+  // The polyfill is a side-effect only module
+}
+
+declare module 'input-switch-polyfill/input-switch-polyfill.css' {
+  // CSS module
+  const css: string
+  export default css
+}

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>

lib/basic/switch-polyfill.ts

@@ -0,0 +1,12 @@
+// 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
+;(async () => {
+  if (!('switch' in HTMLInputElement.prototype)) {
+    await import('input-switch-polyfill')
+  }
+})()

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"
   },