@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcTerminalLog.vue

@@ -1,50 +1,50 @@
-<!-- File: packages/vue/src/components/OcTerminalLog.vue | Map: props -> frame -> bar (dots, title, status) -> body (lines + prompt) -> auto-scroll -->
-<script setup lang="ts">
-/**
- * Dark console window (same markup as snippets/terminal-log.html).
- * Props: lines ({ level: info|success|warn|error|debug, message, time?, label? }[]), title, status ("Live" + pulsing dot),
- * prompt (text, or true for an empty prompt with cursor), height (max body height), autoScroll (default true), label.
- * Classes: .oc-terminal-log, __bar, __title, __status, __body, __line(--info/--success/--warn/--error/--debug), __time, __level, __msg, __prompt
- */
-import { nextTick, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    lines: { level: 'info' | 'success' | 'warn' | 'error' | 'debug'; message: string; time?: string; label?: string }[]
-    title?: string
-    status?: string
-    prompt?: string | boolean
-    height?: string
-    autoScroll?: boolean
-    label?: string
-  }>(),
-  { autoScroll: true, label: 'Log output', prompt: false },
-)
-const body = ref<HTMLDivElement | null>(null)
-// Keep the newest line in view.
-watch(
-  () => props.lines.length,
-  async () => {
-    await nextTick()
-    if (props.autoScroll && body.value) body.value.scrollTop = body.value.scrollHeight
-  },
-)
-</script>
-
-<template>
-  <div class="oc-terminal-log" :style="height ? { '--oc-terminal-log-height': height } : undefined">
-    <div class="oc-terminal-log__bar">
-      <i /><i /><i />
-      <span v-if="title" class="oc-terminal-log__title">{{ title }}</span>
-      <span v-if="status" class="oc-terminal-log__status">{{ status }}</span>
-    </div>
-    <div ref="body" class="oc-terminal-log__body" role="log" aria-live="polite" :aria-label="label" tabindex="0">
-      <p v-for="(l, i) in lines" :key="i" :class="['oc-terminal-log__line', `oc-terminal-log__line--${l.level}`]">
-        <time v-if="l.time" class="oc-terminal-log__time">{{ l.time }}</time>
-        <span class="oc-terminal-log__level">{{ l.label ?? (l.level === 'success' ? 'ok' : l.level) }}</span>
-        <span class="oc-terminal-log__msg">{{ l.message }}</span>
-      </p>
-      <p v-if="prompt !== false" class="oc-terminal-log__prompt">{{ prompt === true ? '' : prompt }}</p>
-    </div>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcTerminalLog.vue | Map: props -> frame -> bar (dots, title, status) -> body (lines + prompt) -> auto-scroll -->
+<script setup lang="ts">
+/**
+ * Dark console window (same markup as snippets/terminal-log.html).
+ * Props: lines ({ level: info|success|warn|error|debug, message, time?, label? }[]), title, status ("Live" + pulsing dot),
+ * prompt (text, or true for an empty prompt with cursor), height (max body height), autoScroll (default true), label.
+ * Classes: .oc-terminal-log, __bar, __title, __status, __body, __line(--info/--success/--warn/--error/--debug), __time, __level, __msg, __prompt
+ */
+import { nextTick, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    lines: { level: 'info' | 'success' | 'warn' | 'error' | 'debug'; message: string; time?: string; label?: string }[]
+    title?: string
+    status?: string
+    prompt?: string | boolean
+    height?: string
+    autoScroll?: boolean
+    label?: string
+  }>(),
+  { autoScroll: true, label: 'Log output', prompt: false },
+)
+const body = ref<HTMLDivElement | null>(null)
+// Keep the newest line in view.
+watch(
+  () => props.lines.length,
+  async () => {
+    await nextTick()
+    if (props.autoScroll && body.value) body.value.scrollTop = body.value.scrollHeight
+  },
+)
+</script>
+
+<template>
+  <div class="oc-terminal-log" :style="height ? { '--oc-terminal-log-height': height } : undefined">
+    <div class="oc-terminal-log__bar">
+      <i /><i /><i />
+      <span v-if="title" class="oc-terminal-log__title">{{ title }}</span>
+      <span v-if="status" class="oc-terminal-log__status">{{ status }}</span>
+    </div>
+    <div ref="body" class="oc-terminal-log__body" role="log" aria-live="polite" :aria-label="label" tabindex="0">
+      <p v-for="(l, i) in lines" :key="i" :class="['oc-terminal-log__line', `oc-terminal-log__line--${l.level}`]">
+        <time v-if="l.time" class="oc-terminal-log__time">{{ l.time }}</time>
+        <span class="oc-terminal-log__level">{{ l.label ?? (l.level === 'success' ? 'ok' : l.level) }}</span>
+        <span class="oc-terminal-log__msg">{{ l.message }}</span>
+      </p>
+      <p v-if="prompt !== false" class="oc-terminal-log__prompt">{{ prompt === true ? '' : prompt }}</p>
+    </div>
+  </div>
+</template>

package/src/components/OcTextarea.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-/** Multi-line input (uses .oc-input). v-model. */
-defineProps<{ error?: boolean }>()
-const model = defineModel<string>()
-</script>
-
-<template>
-  <textarea v-model="model" :class="['oc-input', error && 'oc-input--error']" :aria-invalid="error ? 'true' : undefined"></textarea>
-</template>
+<script setup lang="ts">
+/** Multi-line input (uses .oc-input). v-model. */
+defineProps<{ error?: boolean }>()
+const model = defineModel<string>()
+</script>
+
+<template>
+  <textarea v-model="model" :class="['oc-input', error && 'oc-input--error']" :aria-invalid="error ? 'true' : undefined"></textarea>
+</template>

package/src/components/OcThemeSwitch.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-/**
- * System / light / dark switch (CSS only: color-scheme + :has()). v-model: 'system' | 'light' | 'dark'.
- * `options` limits the choices; `as="div"` renders a role="radiogroup" div instead of a fieldset.
- */
-import { useUid } from '../composables/useUid'
-
-type Theme = 'system' | 'light' | 'dark'
-const labels: Record<Theme, string> = { system: 'System', light: 'Light', dark: 'Dark' }
-
-withDefaults(
-  defineProps<{
-    options?: Theme[]
-    as?: 'fieldset' | 'div'
-    label?: string
-    name?: string
-  }>(),
-  { options: () => ['system', 'light', 'dark'], as: 'fieldset', label: 'Color theme' },
-)
-const model = defineModel<Theme>({ default: 'system' })
-const uid = useUid('oc-theme')
-</script>
-
-<template>
-  <component :is="as" class="oc-theme-switch" :role="as === 'div' ? 'radiogroup' : undefined" :aria-label="label">
-    <label v-for="o in options" :key="o">
-      <input v-model="model" type="radio" :name="name ?? uid" :value="o" />
-      {{ labels[o] }}
-    </label>
-  </component>
-</template>
+<script setup lang="ts">
+/**
+ * System / light / dark switch (CSS only: color-scheme + :has()). v-model: 'system' | 'light' | 'dark'.
+ * `options` limits the choices; `as="div"` renders a role="radiogroup" div instead of a fieldset.
+ */
+import { useUid } from '../composables/useUid'
+
+type Theme = 'system' | 'light' | 'dark'
+const labels: Record<Theme, string> = { system: 'System', light: 'Light', dark: 'Dark' }
+
+withDefaults(
+  defineProps<{
+    options?: Theme[]
+    as?: 'fieldset' | 'div'
+    label?: string
+    name?: string
+  }>(),
+  { options: () => ['system', 'light', 'dark'], as: 'fieldset', label: 'Color theme' },
+)
+const model = defineModel<Theme>({ default: 'system' })
+const uid = useUid('oc-theme')
+</script>
+
+<template>
+  <component :is="as" class="oc-theme-switch" :role="as === 'div' ? 'radiogroup' : undefined" :aria-label="label">
+    <label v-for="o in options" :key="o">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="o" />
+      {{ labels[o] }}
+    </label>
+  </component>
+</template>

package/src/components/OcTimeInput.vue

@@ -1,50 +1,50 @@
-<!-- File: packages/vue/src/components/OcTimeInput.vue | Map: props + model -> format helpers -> template (text field + datalist) -->
-<script setup lang="ts">
-/**
- * 24h time field (HH:mm). v-model: "HH:mm" or "". `slots` fills a datalist with suggestions.
- * Same markup as packages/ui/snippets/time-input.html. JS only adds the colon ("0930" -> "09:30").
- * All attributes go to the input.
- */
-import { useUid } from '../composables/useUid'
-
-defineOptions({ inheritAttrs: false })
-defineProps<{ slots?: string[]; error?: boolean; placeholder?: string }>()
-const model = defineModel<string>({ default: '' })
-const listId = useUid('oc-time')
-
-/** Up to 4 digits with a colon after the first two. A picked datalist option is kept as is. */
-function onInput(e: Event) {
-  const input = e.target as HTMLInputElement
-  const v = input.value
-  const digits = v.replace(/\D/g, '').slice(0, 4)
-  model.value = /^\d{2}:\d{2}$/.test(v) ? v : digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`
-  input.value = model.value
-}
-
-/** On blur: "9" -> "09:00", "930" -> "09:30". */
-function onBlur() {
-  const d = model.value.replace(/\D/g, '')
-  if (d.length === 1 || d.length === 2) model.value = `${d.padStart(2, '0')}:00`
-  else if (d.length === 3) model.value = `0${d[0]}:${d.slice(1)}`
-}
-</script>
-
-<template>
-  <input
-    v-bind="$attrs"
-    class="oc-input oc-time-input"
-    type="text"
-    inputmode="numeric"
-    maxlength="5"
-    pattern="([01][0-9]|2[0-3]):[0-5][0-9]"
-    :placeholder="placeholder ?? 'hh:mm'"
-    :list="slots?.length ? listId : undefined"
-    :aria-invalid="error ? 'true' : undefined"
-    :value="model"
-    @input="onInput"
-    @blur="onBlur"
-  />
-  <datalist v-if="slots?.length" :id="listId">
-    <option v-for="s in slots" :key="s" :value="s"></option>
-  </datalist>
-</template>
+<!-- File: packages/vue/src/components/OcTimeInput.vue | Map: props + model -> format helpers -> template (text field + datalist) -->
+<script setup lang="ts">
+/**
+ * 24h time field (HH:mm). v-model: "HH:mm" or "". `slots` fills a datalist with suggestions.
+ * Same markup as packages/ui/snippets/time-input.html. JS only adds the colon ("0930" -> "09:30").
+ * All attributes go to the input.
+ */
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ slots?: string[]; error?: boolean; placeholder?: string }>()
+const model = defineModel<string>({ default: '' })
+const listId = useUid('oc-time')
+
+/** Up to 4 digits with a colon after the first two. A picked datalist option is kept as is. */
+function onInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  const v = input.value
+  const digits = v.replace(/\D/g, '').slice(0, 4)
+  model.value = /^\d{2}:\d{2}$/.test(v) ? v : digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`
+  input.value = model.value
+}
+
+/** On blur: "9" -> "09:00", "930" -> "09:30". */
+function onBlur() {
+  const d = model.value.replace(/\D/g, '')
+  if (d.length === 1 || d.length === 2) model.value = `${d.padStart(2, '0')}:00`
+  else if (d.length === 3) model.value = `0${d[0]}:${d.slice(1)}`
+}
+</script>
+
+<template>
+  <input
+    v-bind="$attrs"
+    class="oc-input oc-time-input"
+    type="text"
+    inputmode="numeric"
+    maxlength="5"
+    pattern="([01][0-9]|2[0-3]):[0-5][0-9]"
+    :placeholder="placeholder ?? 'hh:mm'"
+    :list="slots?.length ? listId : undefined"
+    :aria-invalid="error ? 'true' : undefined"
+    :value="model"
+    @input="onInput"
+    @blur="onBlur"
+  />
+  <datalist v-if="slots?.length" :id="listId">
+    <option v-for="s in slots" :key="s" :value="s"></option>
+  </datalist>
+</template>

package/src/components/OcTimeline.vue

@@ -1,36 +1,36 @@
-<!-- File: packages/vue/src/components/OcTimeline.vue | Map: props (items, size, accent) -> ol.oc-timeline -> li.oc-timeline__item -->
-<script setup lang="ts">
-/**
- * Vertical timeline. Pass `items`, or put your own li.oc-timeline__item elements in the default slot.
- * Classes: .oc-timeline (--lg, --accent), .oc-timeline__item (--current), __date, __title, __text
- */
-export interface TimelineEntry {
-  date: string
-  /** Renders a <time datetime> when set. */
-  dateTime?: string
-  title?: string
-  text?: string
-  current?: boolean
-}
-withDefaults(
-  defineProps<{
-    items?: TimelineEntry[]
-    size?: 'default' | 'lg'
-    accent?: boolean
-  }>(),
-  { items: () => [], size: 'default', accent: false },
-)
-</script>
-
-<template>
-  <ol :class="['oc-timeline', size === 'lg' && 'oc-timeline--lg', accent && 'oc-timeline--accent']">
-    <slot>
-      <li v-for="(item, i) in items" :key="i" :class="['oc-timeline__item', item.current && 'oc-timeline__item--current']">
-        <time v-if="item.dateTime" class="oc-timeline__date" :datetime="item.dateTime">{{ item.date }}</time>
-        <span v-else class="oc-timeline__date">{{ item.date }}</span>
-        <h3 v-if="item.title" class="oc-timeline__title">{{ item.title }}</h3>
-        <p v-if="item.text" class="oc-timeline__text">{{ item.text }}</p>
-      </li>
-    </slot>
-  </ol>
-</template>
+<!-- File: packages/vue/src/components/OcTimeline.vue | Map: props (items, size, accent) -> ol.oc-timeline -> li.oc-timeline__item -->
+<script setup lang="ts">
+/**
+ * Vertical timeline. Pass `items`, or put your own li.oc-timeline__item elements in the default slot.
+ * Classes: .oc-timeline (--lg, --accent), .oc-timeline__item (--current), __date, __title, __text
+ */
+export interface TimelineEntry {
+  date: string
+  /** Renders a <time datetime> when set. */
+  dateTime?: string
+  title?: string
+  text?: string
+  current?: boolean
+}
+withDefaults(
+  defineProps<{
+    items?: TimelineEntry[]
+    size?: 'default' | 'lg'
+    accent?: boolean
+  }>(),
+  { items: () => [], size: 'default', accent: false },
+)
+</script>
+
+<template>
+  <ol :class="['oc-timeline', size === 'lg' && 'oc-timeline--lg', accent && 'oc-timeline--accent']">
+    <slot>
+      <li v-for="(item, i) in items" :key="i" :class="['oc-timeline__item', item.current && 'oc-timeline__item--current']">
+        <time v-if="item.dateTime" class="oc-timeline__date" :datetime="item.dateTime">{{ item.date }}</time>
+        <span v-else class="oc-timeline__date">{{ item.date }}</span>
+        <h3 v-if="item.title" class="oc-timeline__title">{{ item.title }}</h3>
+        <p v-if="item.text" class="oc-timeline__text">{{ item.text }}</p>
+      </li>
+    </slot>
+  </ol>
+</template>

package/src/components/OcToast.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-/**
- * One notification. Emits `dismiss`. role="alert" for errors, role="status" otherwise.
- * Slots: icon, title, default (description). Classes: .oc-toast--success/error/warning/info, -icon, -body,
- * -title, -description, -close
- */
-const glyphs = { success: '✓', error: '!', warning: '!', info: 'i' } as const
-
-withDefaults(
-  defineProps<{
-    variant?: 'success' | 'error' | 'warning' | 'info'
-    title?: string
-    description?: string
-    dismissible?: boolean
-    dismissLabel?: string
-  }>(),
-  { variant: 'info', dismissible: true, dismissLabel: 'Dismiss' },
-)
-defineEmits<{ dismiss: [] }>()
-</script>
-
-<template>
-  <div :class="['oc-toast', `oc-toast--${variant}`]" :role="variant === 'error' ? 'alert' : 'status'">
-    <span class="oc-toast-icon" aria-hidden="true"><slot name="icon">{{ glyphs[variant] }}</slot></span>
-    <div class="oc-toast-body">
-      <p class="oc-toast-title"><slot name="title">{{ title }}</slot></p>
-      <p v-if="description || $slots.default" class="oc-toast-description"><slot>{{ description }}</slot></p>
-    </div>
-    <button v-if="dismissible" class="oc-toast-close" type="button" :aria-label="dismissLabel" @click="$emit('dismiss')">&times;</button>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * One notification. Emits `dismiss`. role="alert" for errors, role="status" otherwise.
+ * Slots: icon, title, default (description). Classes: .oc-toast--success/error/warning/info, -icon, -body,
+ * -title, -description, -close
+ */
+const glyphs = { success: '✓', error: '!', warning: '!', info: 'i' } as const
+
+withDefaults(
+  defineProps<{
+    variant?: 'success' | 'error' | 'warning' | 'info'
+    title?: string
+    description?: string
+    dismissible?: boolean
+    dismissLabel?: string
+  }>(),
+  { variant: 'info', dismissible: true, dismissLabel: 'Dismiss' },
+)
+defineEmits<{ dismiss: [] }>()
+</script>
+
+<template>
+  <div :class="['oc-toast', `oc-toast--${variant}`]" :role="variant === 'error' ? 'alert' : 'status'">
+    <span class="oc-toast-icon" aria-hidden="true"><slot name="icon">{{ glyphs[variant] }}</slot></span>
+    <div class="oc-toast-body">
+      <p class="oc-toast-title"><slot name="title">{{ title }}</slot></p>
+      <p v-if="description || $slots.default" class="oc-toast-description"><slot>{{ description }}</slot></p>
+    </div>
+    <button v-if="dismissible" class="oc-toast-close" type="button" :aria-label="dismissLabel" @click="$emit('dismiss')">&times;</button>
+  </div>
+</template>

package/src/components/OcToastContainer.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-/** Fixed stack that renders the useToast() queue. Mount once near the app root. Classes: .oc-toast-container(--top/--static) */
-import { useToast } from '../composables/useToast'
-import OcToast from './OcToast.vue'
-
-withDefaults(defineProps<{ position?: 'bottom' | 'top'; static?: boolean }>(), { position: 'bottom' })
-const { toasts, dismiss } = useToast()
-</script>
-
-<template>
-  <div :class="['oc-toast-container', position === 'top' && 'oc-toast-container--top', static && 'oc-toast-container--static']">
-    <OcToast
-      v-for="t in toasts"
-      :key="t.id"
-      :variant="t.variant"
-      :title="t.title"
-      :description="t.description"
-      @dismiss="dismiss(t.id)"
-    />
-  </div>
-</template>
+<script setup lang="ts">
+/** Fixed stack that renders the useToast() queue. Mount once near the app root. Classes: .oc-toast-container(--top/--static) */
+import { useToast } from '../composables/useToast'
+import OcToast from './OcToast.vue'
+
+withDefaults(defineProps<{ position?: 'bottom' | 'top'; static?: boolean }>(), { position: 'bottom' })
+const { toasts, dismiss } = useToast()
+</script>
+
+<template>
+  <div :class="['oc-toast-container', position === 'top' && 'oc-toast-container--top', static && 'oc-toast-container--static']">
+    <OcToast
+      v-for="t in toasts"
+      :key="t.id"
+      :variant="t.variant"
+      :title="t.title"
+      :description="t.description"
+      @dismiss="dismiss(t.id)"
+    />
+  </div>
+</template>

package/src/components/OcToggle.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-/**
- * Toggle. Inside OcToggleGroup (give it a `value`) it is a label around a radio/checkbox bound to the group's v-model.
- * Standalone: v-model boolean on a label + checkbox, or `button` for a <button aria-pressed>.
- * Pass an aria-label attribute for icon-only toggles (it lands on the input/button).
- * Classes: .oc-toggle(--outline/--sm/--lg/--icon)
- */
-import { computed, inject } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-import { toggleGroupKey } from '../composables/keys'
-
-defineOptions({ inheritAttrs: false })
-const props = defineProps<{
-  value?: string
-  variant?: 'default' | 'outline'
-  size?: 'sm' | 'md' | 'lg'
-  icon?: boolean
-  button?: boolean
-  disabled?: boolean
-}>()
-const pressed = defineModel<boolean>({ default: false })
-const group = inject(toggleGroupKey, null)
-const { root, control } = useAttrsSplit()
-
-const classes = computed(() => [
-  'oc-toggle',
-  props.variant === 'outline' && 'oc-toggle--outline',
-  props.size && props.size !== 'md' && `oc-toggle--${props.size}`,
-  props.icon && 'oc-toggle--icon',
-])
-const inGroup = computed(() => !!group && props.value !== undefined)
-const isOn = computed(() => (inGroup.value ? group!.values.value.includes(props.value!) : pressed.value))
-function onChange() {
-  if (inGroup.value) group!.toggle(props.value!)
-  else pressed.value = !pressed.value
-}
-</script>
-
-<template>
-  <button
-    v-if="button && !inGroup"
-    v-bind="{ ...root, ...control }"
-    type="button"
-    :class="classes"
-    :aria-pressed="pressed ? 'true' : 'false'"
-    :disabled="disabled"
-    @click="pressed = !pressed"
-  >
-    <slot />
-  </button>
-  <label v-else v-bind="root" :class="classes">
-    <input
-      v-bind="control"
-      :type="inGroup && group!.type.value === 'single' ? 'radio' : 'checkbox'"
-      :name="inGroup ? group!.name.value : (control.name as string | undefined)"
-      :value="value"
-      :checked="isOn"
-      :disabled="disabled"
-      @change="onChange"
-    />
-    <slot />
-  </label>
-</template>
+<script setup lang="ts">
+/**
+ * Toggle. Inside OcToggleGroup (give it a `value`) it is a label around a radio/checkbox bound to the group's v-model.
+ * Standalone: v-model boolean on a label + checkbox, or `button` for a <button aria-pressed>.
+ * Pass an aria-label attribute for icon-only toggles (it lands on the input/button).
+ * Classes: .oc-toggle(--outline/--sm/--lg/--icon)
+ */
+import { computed, inject } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { toggleGroupKey } from '../composables/keys'
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{
+  value?: string
+  variant?: 'default' | 'outline'
+  size?: 'sm' | 'md' | 'lg'
+  icon?: boolean
+  button?: boolean
+  disabled?: boolean
+}>()
+const pressed = defineModel<boolean>({ default: false })
+const group = inject(toggleGroupKey, null)
+const { root, control } = useAttrsSplit()
+
+const classes = computed(() => [
+  'oc-toggle',
+  props.variant === 'outline' && 'oc-toggle--outline',
+  props.size && props.size !== 'md' && `oc-toggle--${props.size}`,
+  props.icon && 'oc-toggle--icon',
+])
+const inGroup = computed(() => !!group && props.value !== undefined)
+const isOn = computed(() => (inGroup.value ? group!.values.value.includes(props.value!) : pressed.value))
+function onChange() {
+  if (inGroup.value) group!.toggle(props.value!)
+  else pressed.value = !pressed.value
+}
+</script>
+
+<template>
+  <button
+    v-if="button && !inGroup"
+    v-bind="{ ...root, ...control }"
+    type="button"
+    :class="classes"
+    :aria-pressed="pressed ? 'true' : 'false'"
+    :disabled="disabled"
+    @click="pressed = !pressed"
+  >
+    <slot />
+  </button>
+  <label v-else v-bind="root" :class="classes">
+    <input
+      v-bind="control"
+      :type="inGroup && group!.type.value === 'single' ? 'radio' : 'checkbox'"
+      :name="inGroup ? group!.name.value : (control.name as string | undefined)"
+      :value="value"
+      :checked="isOn"
+      :disabled="disabled"
+      @change="onChange"
+    />
+    <slot />
+  </label>
+</template>