@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcBusyOverlay.vue

@@ -1,32 +1,32 @@
-<!-- File: packages/vue/src/components/OcBusyOverlay.vue | Map: props + model -> <dialog closedby="none"> (spinner or progress, title, text) -->
-<script setup lang="ts">
-/**
- * Modal "please wait" overlay (same markup as snippets/busy-overlay.html). v-model:open shows it while a long submit or
- * upload runs; the page is inert and Esc does not close it. `progress` (0-100) swaps the spinner for a progress bar.
- * Slot: default (replaces the text). Classes: .oc-busy-overlay __title __text; .oc-spinner / .oc-progress
- */
-import { ref } from 'vue'
-import { useDialog } from '../composables/useDialog'
-import { useUid } from '../composables/useUid'
-import OcProgress from './OcProgress.vue'
-
-const props = withDefaults(defineProps<{ title?: string; text?: string; progress?: number; label?: string; id?: string }>(), {
-  title: 'Saving…',
-  text: 'The photos are being processed. This can take a minute; please keep this page open.',
-  label: 'Busy',
-})
-const open = defineModel<boolean>('open', { default: false })
-const el = ref<HTMLDialogElement | null>(null)
-const { onClose } = useDialog(open, el)
-const auto = useUid('oc-busy-overlay')
-const base = props.id ?? auto
-</script>
-
-<template>
-  <dialog :id="base" ref="el" class="oc-busy-overlay" closedby="none" :aria-labelledby="`${base}-title`" :aria-describedby="`${base}-text`" @close="onClose">
-    <span v-if="progress == null" class="oc-spinner" role="status" :aria-label="label"></span>
-    <OcProgress v-else :value="progress" :label="label" />
-    <h2 :id="`${base}-title`" class="oc-busy-overlay__title">{{ title }}</h2>
-    <p :id="`${base}-text`" class="oc-busy-overlay__text"><slot>{{ text }}</slot></p>
-  </dialog>
-</template>
+<!-- File: packages/vue/src/components/OcBusyOverlay.vue | Map: props + model -> <dialog closedby="none"> (spinner or progress, title, text) -->
+<script setup lang="ts">
+/**
+ * Modal "please wait" overlay (same markup as snippets/busy-overlay.html). v-model:open shows it while a long submit or
+ * upload runs; the page is inert and Esc does not close it. `progress` (0-100) swaps the spinner for a progress bar.
+ * Slot: default (replaces the text). Classes: .oc-busy-overlay __title __text; .oc-spinner / .oc-progress
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+import OcProgress from './OcProgress.vue'
+
+const props = withDefaults(defineProps<{ title?: string; text?: string; progress?: number; label?: string; id?: string }>(), {
+  title: 'Saving…',
+  text: 'The photos are being processed. This can take a minute; please keep this page open.',
+  label: 'Busy',
+})
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const auto = useUid('oc-busy-overlay')
+const base = props.id ?? auto
+</script>
+
+<template>
+  <dialog :id="base" ref="el" class="oc-busy-overlay" closedby="none" :aria-labelledby="`${base}-title`" :aria-describedby="`${base}-text`" @close="onClose">
+    <span v-if="progress == null" class="oc-spinner" role="status" :aria-label="label"></span>
+    <OcProgress v-else :value="progress" :label="label" />
+    <h2 :id="`${base}-title`" class="oc-busy-overlay__title">{{ title }}</h2>
+    <p :id="`${base}-text`" class="oc-busy-overlay__text"><slot>{{ text }}</slot></p>
+  </dialog>
+</template>

package/src/components/OcButton.vue

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-/**
- * Button. Renders <a> when `href` is set, otherwise <button>.
- * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
- * --xs/--sm/--lg, --icon, --pill
- */
-withDefaults(
-  defineProps<{
-    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
-    size?: 'xs' | 'sm' | 'md' | 'lg'
-    icon?: boolean
-    pill?: boolean
-    href?: string
-    type?: 'button' | 'submit' | 'reset'
-  }>(),
-  { variant: 'default', size: 'md', type: 'button' },
-)
-</script>
-
-<template>
-  <a
-    v-if="href"
-    :href="href"
-    :class="[
-      'oc-btn',
-      variant !== 'default' && `oc-btn--${variant}`,
-      size !== 'md' && `oc-btn--${size}`,
-      icon && 'oc-btn--icon',
-      pill && 'oc-btn--pill',
-    ]"
-  >
-    <slot />
-  </a>
-  <button
-    v-else
-    :type="type"
-    :class="[
-      'oc-btn',
-      variant !== 'default' && `oc-btn--${variant}`,
-      size !== 'md' && `oc-btn--${size}`,
-      icon && 'oc-btn--icon',
-      pill && 'oc-btn--pill',
-    ]"
-  >
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+/**
+ * Button. Renders <a> when `href` is set, otherwise <button>.
+ * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
+ * --xs/--sm/--lg, --icon, --pill
+ */
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    icon?: boolean
+    pill?: boolean
+    href?: string
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  { variant: 'default', size: 'md', type: 'button' },
+)
+</script>
+
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    :class="[
+      'oc-btn',
+      variant !== 'default' && `oc-btn--${variant}`,
+      size !== 'md' && `oc-btn--${size}`,
+      icon && 'oc-btn--icon',
+      pill && 'oc-btn--pill',
+    ]"
+  >
+    <slot />
+  </a>
+  <button
+    v-else
+    :type="type"
+    :class="[
+      'oc-btn',
+      variant !== 'default' && `oc-btn--${variant}`,
+      size !== 'md' && `oc-btn--${size}`,
+      icon && 'oc-btn--icon',
+      pill && 'oc-btn--pill',
+    ]"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/OcButtonGroup.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-/** Joined buttons with shared borders. `label` becomes aria-label. Put OcButton (usually variant outline) and OcButtonGroupText inside. Classes: .oc-btn-group(--vertical) */
-defineProps<{ vertical?: boolean; label?: string }>()
-</script>
-
-<template>
-  <div :class="['oc-btn-group', vertical && 'oc-btn-group--vertical']" role="group" :aria-label="label">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+/** Joined buttons with shared borders. `label` becomes aria-label. Put OcButton (usually variant outline) and OcButtonGroupText inside. Classes: .oc-btn-group(--vertical) */
+defineProps<{ vertical?: boolean; label?: string }>()
+</script>
+
+<template>
+  <div :class="['oc-btn-group', vertical && 'oc-btn-group--vertical']" role="group" :aria-label="label">
+    <slot />
+  </div>
+</template>

package/src/components/OcButtonGroupText.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-/** Static text cell inside OcButtonGroup (a count, a unit). Class: .oc-btn-group-text */
-</script>
-
-<template>
-  <span class="oc-btn-group-text"><slot /></span>
-</template>
+<script setup lang="ts">
+/** Static text cell inside OcButtonGroup (a count, a unit). Class: .oc-btn-group-text */
+</script>
+
+<template>
+  <span class="oc-btn-group-text"><slot /></span>
+</template>

package/src/components/OcCard.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
-/**
- * Card with header, content and footer.
- * Slots: header (replaces title/description), default (content), footer. Classes: .oc-card--sm
- */
-withDefaults(defineProps<{ title?: string; description?: string; size?: 'sm' | 'md' }>(), { size: 'md' })
-</script>
-
-<template>
-  <div :class="['oc-card', size === 'sm' && 'oc-card--sm']">
-    <div v-if="title || description || $slots.header" class="oc-card-header">
-      <slot name="header">
-        <h3 v-if="title" class="oc-card-title">{{ title }}</h3>
-        <p v-if="description" class="oc-card-description">{{ description }}</p>
-      </slot>
-    </div>
-    <div v-if="$slots.default" class="oc-card-content"><slot /></div>
-    <div v-if="$slots.footer" class="oc-card-footer"><slot name="footer" /></div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Card with header, content and footer.
+ * Slots: header (replaces title/description), default (content), footer. Classes: .oc-card--sm
+ */
+withDefaults(defineProps<{ title?: string; description?: string; size?: 'sm' | 'md' }>(), { size: 'md' })
+</script>
+
+<template>
+  <div :class="['oc-card', size === 'sm' && 'oc-card--sm']">
+    <div v-if="title || description || $slots.header" class="oc-card-header">
+      <slot name="header">
+        <h3 v-if="title" class="oc-card-title">{{ title }}</h3>
+        <p v-if="description" class="oc-card-description">{{ description }}</p>
+      </slot>
+    </div>
+    <div v-if="$slots.default" class="oc-card-content"><slot /></div>
+    <div v-if="$slots.footer" class="oc-card-footer"><slot name="footer" /></div>
+  </div>
+</template>

package/src/components/OcChartLine.vue

@@ -1,80 +1,80 @@
-<!-- File: packages/vue/src/components/OcChartLine.vue | Map: props + demo data -> computed axis / paths -> figure (head, y axis, plot: svg + hover columns, x axis, legend) -->
-<script setup lang="ts">
-/**
- * Line / area chart in inline SVG (same markup as snippets/chart-line.html); tooltips open on :hover / :focus-visible (CSS only).
- * series: { name, values, dashed? }[]; labels = one per point (tooltips), xLabels = short axis labels. max defaults to a round
- * number above the data. variant: line | area | spark; dots = always visible. Classes: .oc-chart-line(--area/--dots/--spark) __head
- * __title __sub __value __body __y __plot __svg __series __area __path(--dashed) __cols __col __dot __tip __row __x; .oc-chart-legend
- */
-import { computed } from 'vue'
-import { chartLinePath, n2, niceMax } from '../composables/chartLine'
-
-export interface ChartLineSeries { name: string; values: number[]; dashed?: boolean }
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    sub?: string
-    value?: string
-    series?: ChartLineSeries[]
-    labels?: string[]
-    xLabels?: string[]
-    max?: number
-    rows?: number
-    variant?: 'line' | 'area' | 'spark'
-    dots?: boolean
-    label?: string
-  }>(),
-  {
-    title: 'Visitors',
-    sub: 'January – June 2026',
-    series: () => [
-      { name: 'Desktop', values: [186, 305, 237, 73, 209, 214] },
-      { name: 'Mobile', values: [80, 200, 120, 190, 130, 140] },
-    ],
-    rows: 4,
-    variant: 'line',
-    dots: true,
-    label: 'Visitors per month',
-  },
-)
-const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June']
-const labels = computed(() => props.labels ?? MONTHS)
-const axis = computed(() => props.xLabels ?? props.labels ?? MONTHS.map((m) => m.slice(0, 3)))
-const top = computed(() => props.max ?? niceMax(Math.max(0, ...props.series.flatMap((s) => s.values)), props.rows))
-const count = computed(() => Math.max(0, ...props.series.map((s) => s.values.length)))
-const paths = computed(() => props.series.map((s) => chartLinePath(s.values, top.value)))
-const yLabels = computed(() => Array.from({ length: props.rows + 1 }, (_, i) => top.value - (top.value / props.rows) * i))
-const colLabel = (i: number) => `${labels.value[i] ?? i + 1}: ${props.series.map((s) => `${s.name} ${s.values[i]}`).join(', ')}`
-</script>
-
-<template>
-  <figure :class="['oc-chart-line', variant !== 'line' && `oc-chart-line--${variant}`, dots && 'oc-chart-line--dots']">
-    <figcaption v-if="title || sub || value" class="oc-chart-line__head">
-      <span v-if="title" class="oc-chart-line__title">{{ title }}</span>
-      <span v-if="sub" class="oc-chart-line__sub">{{ sub }}</span>
-      <span v-if="value" class="oc-chart-line__value">{{ value }}</span>
-    </figcaption>
-    <div class="oc-chart-line__body">
-      <ul class="oc-chart-line__y" aria-hidden="true"><li v-for="(y, i) in yLabels" :key="i">{{ y }}</li></ul>
-      <div class="oc-chart-line__plot" :style="rows !== 4 ? `--oc-chart-line-rows:${rows}` : undefined">
-        <svg class="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-          <g v-for="(s, i) in series" :key="i" class="oc-chart-line__series">
-            <path class="oc-chart-line__area" :d="`${paths[i]} L100 100 L0 100 Z`" />
-            <path :class="['oc-chart-line__path', s.dashed && 'oc-chart-line__path--dashed']" :d="paths[i]" />
-          </g>
-        </svg>
-        <ul class="oc-chart-line__cols" :style="`--n:${count}`" :aria-label="label">
-          <li v-for="i in count" :key="i" class="oc-chart-line__col" :style="`--x:${i - 1}`" tabindex="0" :aria-label="colLabel(i - 1)">
-            <i v-for="(s, j) in series" :key="j" class="oc-chart-line__dot" :style="`--y:${n2((s.values[i - 1] / top) * 100)}%`"></i>
-            <span class="oc-chart-line__tip" aria-hidden="true">
-              <strong>{{ labels[i - 1] ?? i }}</strong>
-              <span v-for="(s, j) in series" :key="j" class="oc-chart-line__row">{{ s.name }}<b>{{ s.values[i - 1] }}</b></span>
-            </span>
-          </li>
-        </ul>
-      </div>
-      <ol class="oc-chart-line__x" aria-hidden="true"><li v-for="(l, i) in axis" :key="i">{{ l }}</li></ol>
-    </div>
-    <ul class="oc-chart-legend"><li v-for="(s, i) in series" :key="i"><span class="oc-chart-swatch"></span>{{ s.name }}</li></ul>
-  </figure>
-</template>
+<!-- File: packages/vue/src/components/OcChartLine.vue | Map: props + demo data -> computed axis / paths -> figure (head, y axis, plot: svg + hover columns, x axis, legend) -->
+<script setup lang="ts">
+/**
+ * Line / area chart in inline SVG (same markup as snippets/chart-line.html); tooltips open on :hover / :focus-visible (CSS only).
+ * series: { name, values, dashed? }[]; labels = one per point (tooltips), xLabels = short axis labels. max defaults to a round
+ * number above the data. variant: line | area | spark; dots = always visible. Classes: .oc-chart-line(--area/--dots/--spark) __head
+ * __title __sub __value __body __y __plot __svg __series __area __path(--dashed) __cols __col __dot __tip __row __x; .oc-chart-legend
+ */
+import { computed } from 'vue'
+import { chartLinePath, n2, niceMax } from '../composables/chartLine'
+
+export interface ChartLineSeries { name: string; values: number[]; dashed?: boolean }
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    sub?: string
+    value?: string
+    series?: ChartLineSeries[]
+    labels?: string[]
+    xLabels?: string[]
+    max?: number
+    rows?: number
+    variant?: 'line' | 'area' | 'spark'
+    dots?: boolean
+    label?: string
+  }>(),
+  {
+    title: 'Visitors',
+    sub: 'January – June 2026',
+    series: () => [
+      { name: 'Desktop', values: [186, 305, 237, 73, 209, 214] },
+      { name: 'Mobile', values: [80, 200, 120, 190, 130, 140] },
+    ],
+    rows: 4,
+    variant: 'line',
+    dots: true,
+    label: 'Visitors per month',
+  },
+)
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June']
+const labels = computed(() => props.labels ?? MONTHS)
+const axis = computed(() => props.xLabels ?? props.labels ?? MONTHS.map((m) => m.slice(0, 3)))
+const top = computed(() => props.max ?? niceMax(Math.max(0, ...props.series.flatMap((s) => s.values)), props.rows))
+const count = computed(() => Math.max(0, ...props.series.map((s) => s.values.length)))
+const paths = computed(() => props.series.map((s) => chartLinePath(s.values, top.value)))
+const yLabels = computed(() => Array.from({ length: props.rows + 1 }, (_, i) => top.value - (top.value / props.rows) * i))
+const colLabel = (i: number) => `${labels.value[i] ?? i + 1}: ${props.series.map((s) => `${s.name} ${s.values[i]}`).join(', ')}`
+</script>
+
+<template>
+  <figure :class="['oc-chart-line', variant !== 'line' && `oc-chart-line--${variant}`, dots && 'oc-chart-line--dots']">
+    <figcaption v-if="title || sub || value" class="oc-chart-line__head">
+      <span v-if="title" class="oc-chart-line__title">{{ title }}</span>
+      <span v-if="sub" class="oc-chart-line__sub">{{ sub }}</span>
+      <span v-if="value" class="oc-chart-line__value">{{ value }}</span>
+    </figcaption>
+    <div class="oc-chart-line__body">
+      <ul class="oc-chart-line__y" aria-hidden="true"><li v-for="(y, i) in yLabels" :key="i">{{ y }}</li></ul>
+      <div class="oc-chart-line__plot" :style="rows !== 4 ? `--oc-chart-line-rows:${rows}` : undefined">
+        <svg class="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+          <g v-for="(s, i) in series" :key="i" class="oc-chart-line__series">
+            <path class="oc-chart-line__area" :d="`${paths[i]} L100 100 L0 100 Z`" />
+            <path :class="['oc-chart-line__path', s.dashed && 'oc-chart-line__path--dashed']" :d="paths[i]" />
+          </g>
+        </svg>
+        <ul class="oc-chart-line__cols" :style="`--n:${count}`" :aria-label="label">
+          <li v-for="i in count" :key="i" class="oc-chart-line__col" :style="`--x:${i - 1}`" tabindex="0" :aria-label="colLabel(i - 1)">
+            <i v-for="(s, j) in series" :key="j" class="oc-chart-line__dot" :style="`--y:${n2((s.values[i - 1] / top) * 100)}%`"></i>
+            <span class="oc-chart-line__tip" aria-hidden="true">
+              <strong>{{ labels[i - 1] ?? i }}</strong>
+              <span v-for="(s, j) in series" :key="j" class="oc-chart-line__row">{{ s.name }}<b>{{ s.values[i - 1] }}</b></span>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <ol class="oc-chart-line__x" aria-hidden="true"><li v-for="(l, i) in axis" :key="i">{{ l }}</li></ol>
+    </div>
+    <ul class="oc-chart-legend"><li v-for="(s, i) in series" :key="i"><span class="oc-chart-swatch"></span>{{ s.name }}</li></ul>
+  </figure>
+</template>

package/src/components/OcChatComposer.vue

@@ -1,42 +1,42 @@
-<!-- File: packages/vue/src/components/OcChatComposer.vue | Map: props + v-model -> form -> label + textarea -> bar (tools slot, hint, send) -->
-<script setup lang="ts">
-/**
- * Chat composer (same markup as snippets/chat-composer.html). v-model = text. Emits send(text) on submit
- * (then clears the field). Enter sends, Shift+Enter adds a line (sendOnEnter, default true).
- * Props: placeholder, label, hint, inline, disabled. Slot: tools (.oc-chat-composer__tool buttons).
- * Classes: .oc-chat-composer(--inline), __input, __bar, __tools, __tool, __hint, __send
- */
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(
-  defineProps<{ placeholder?: string; label?: string; hint?: string; inline?: boolean; sendOnEnter?: boolean; disabled?: boolean }>(),
-  { placeholder: 'Write a message…', label: 'Message', sendOnEnter: true },
-)
-const text = defineModel<string>({ default: '' })
-const emit = defineEmits<{ send: [text: string] }>()
-const id = useUid('oc-chat')
-
-function submit() {
-  if (!text.value.trim() || props.disabled) return
-  emit('send', text.value.trim())
-  text.value = ''
-}
-function onKeydown(e: KeyboardEvent) {
-  if (props.sendOnEnter && e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
-    e.preventDefault()
-    ;(e.target as HTMLTextAreaElement).form?.requestSubmit()
-  }
-}
-</script>
-
-<template>
-  <form :class="['oc-chat-composer', inline && 'oc-chat-composer--inline']" @submit.prevent="submit">
-    <label class="oc-visually-hidden" :for="id">{{ label }}</label>
-    <textarea :id="id" v-model="text" class="oc-chat-composer__input" rows="1" :placeholder="placeholder" required :disabled="disabled" @keydown="onKeydown" />
-    <div class="oc-chat-composer__bar">
-      <div v-if="$slots.tools" class="oc-chat-composer__tools"><slot name="tools" /></div>
-      <span v-if="hint" class="oc-chat-composer__hint">{{ hint }}</span>
-      <button type="submit" class="oc-chat-composer__send" aria-label="Send" :disabled="disabled">&#10148;</button>
-    </div>
-  </form>
-</template>
+<!-- File: packages/vue/src/components/OcChatComposer.vue | Map: props + v-model -> form -> label + textarea -> bar (tools slot, hint, send) -->
+<script setup lang="ts">
+/**
+ * Chat composer (same markup as snippets/chat-composer.html). v-model = text. Emits send(text) on submit
+ * (then clears the field). Enter sends, Shift+Enter adds a line (sendOnEnter, default true).
+ * Props: placeholder, label, hint, inline, disabled. Slot: tools (.oc-chat-composer__tool buttons).
+ * Classes: .oc-chat-composer(--inline), __input, __bar, __tools, __tool, __hint, __send
+ */
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{ placeholder?: string; label?: string; hint?: string; inline?: boolean; sendOnEnter?: boolean; disabled?: boolean }>(),
+  { placeholder: 'Write a message…', label: 'Message', sendOnEnter: true },
+)
+const text = defineModel<string>({ default: '' })
+const emit = defineEmits<{ send: [text: string] }>()
+const id = useUid('oc-chat')
+
+function submit() {
+  if (!text.value.trim() || props.disabled) return
+  emit('send', text.value.trim())
+  text.value = ''
+}
+function onKeydown(e: KeyboardEvent) {
+  if (props.sendOnEnter && e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+    e.preventDefault()
+    ;(e.target as HTMLTextAreaElement).form?.requestSubmit()
+  }
+}
+</script>
+
+<template>
+  <form :class="['oc-chat-composer', inline && 'oc-chat-composer--inline']" @submit.prevent="submit">
+    <label class="oc-visually-hidden" :for="id">{{ label }}</label>
+    <textarea :id="id" v-model="text" class="oc-chat-composer__input" rows="1" :placeholder="placeholder" required :disabled="disabled" @keydown="onKeydown" />
+    <div class="oc-chat-composer__bar">
+      <div v-if="$slots.tools" class="oc-chat-composer__tools"><slot name="tools" /></div>
+      <span v-if="hint" class="oc-chat-composer__hint">{{ hint }}</span>
+      <button type="submit" class="oc-chat-composer__send" aria-label="Send" :disabled="disabled">&#10148;</button>
+    </div>
+  </form>
+</template>

package/src/components/OcCheckbox.vue

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-/**
- * Checkbox or radio inside a label. v-model: boolean (checkbox), array (checkbox group with `value`)
- * or the selected `value` (radio). Attributes other than class/style go to the input.
- */
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-defineOptions({ inheritAttrs: false })
-withDefaults(
-  defineProps<{
-    type?: 'checkbox' | 'radio'
-    value?: unknown
-    label?: string
-  }>(),
-  { type: 'checkbox' },
-)
-const model = defineModel<any>()
-const { root, control } = useAttrsSplit()
-</script>
-
-<template>
-  <label v-bind="root">
-    <input v-bind="control" v-model="model" :class="type === 'radio' ? 'oc-radio' : 'oc-checkbox'" :type="type" :value="value" />
-    <slot><template v-if="label"> {{ label }}</template></slot>
-  </label>
-</template>
+<script setup lang="ts">
+/**
+ * Checkbox or radio inside a label. v-model: boolean (checkbox), array (checkbox group with `value`)
+ * or the selected `value` (radio). Attributes other than class/style go to the input.
+ */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+defineOptions({ inheritAttrs: false })
+withDefaults(
+  defineProps<{
+    type?: 'checkbox' | 'radio'
+    value?: unknown
+    label?: string
+  }>(),
+  { type: 'checkbox' },
+)
+const model = defineModel<any>()
+const { root, control } = useAttrsSplit()
+</script>
+
+<template>
+  <label v-bind="root">
+    <input v-bind="control" v-model="model" :class="type === 'radio' ? 'oc-radio' : 'oc-checkbox'" :type="type" :value="value" />
+    <slot><template v-if="label"> {{ label }}</template></slot>
+  </label>
+</template>

package/src/components/OcChecklist.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-/**
- * Rule / step list with met and unmet states. Classes: .oc-checklist(--card), .oc-checklist-item.is-done
- * Slots: default (replaces all rows), action (scoped: item) in the card variant.
- */
-export interface ChecklistItem {
-  title: string
-  hint?: string
-  done?: boolean
-}
-withDefaults(defineProps<{ items?: ChecklistItem[]; card?: boolean; label?: string }>(), { items: () => [] })
-</script>
-
-<template>
-  <ul :class="['oc-checklist', card && 'oc-checklist--card']" aria-live="polite" :aria-label="label">
-    <slot>
-      <li v-for="(item, i) in items" :key="i" :class="['oc-checklist-item', item.done && 'is-done']">
-        <template v-if="card">
-          <span class="oc-checklist-text">
-            <span class="oc-checklist-title">{{ item.title }}</span>
-            <span v-if="item.hint" class="oc-checklist-hint">{{ item.hint }}</span>
-          </span>
-          <slot name="action" :item="item" />
-        </template>
-        <template v-else>{{ item.title }}</template>
-      </li>
-    </slot>
-  </ul>
-</template>
+<script setup lang="ts">
+/**
+ * Rule / step list with met and unmet states. Classes: .oc-checklist(--card), .oc-checklist-item.is-done
+ * Slots: default (replaces all rows), action (scoped: item) in the card variant.
+ */
+export interface ChecklistItem {
+  title: string
+  hint?: string
+  done?: boolean
+}
+withDefaults(defineProps<{ items?: ChecklistItem[]; card?: boolean; label?: string }>(), { items: () => [] })
+</script>
+
+<template>
+  <ul :class="['oc-checklist', card && 'oc-checklist--card']" aria-live="polite" :aria-label="label">
+    <slot>
+      <li v-for="(item, i) in items" :key="i" :class="['oc-checklist-item', item.done && 'is-done']">
+        <template v-if="card">
+          <span class="oc-checklist-text">
+            <span class="oc-checklist-title">{{ item.title }}</span>
+            <span v-if="item.hint" class="oc-checklist-hint">{{ item.hint }}</span>
+          </span>
+          <slot name="action" :item="item" />
+        </template>
+        <template v-else>{{ item.title }}</template>
+      </li>
+    </slot>
+  </ul>
+</template>