@birdycom/omniaui-vue 0.0.0-stage → 0.11.1

package/src/components/OcTable.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+/**
+ * Data table: sortable header (v-model:sort), row selection (v-model:selected), row actions, empty state,
+ * density modifiers. Slots: `cell-<key>` (scoped: { row, value }), `actions` (scoped: { row }), `empty`.
+ * Classes: .oc-table-wrap > .oc-table(--striped/--compact/--borderless/--sticky), .oc-table-sort,
+ * .oc-table-actions, .oc-table-empty; aria-sort / aria-selected / data-numeric attributes.
+ */
+import { computed, useSlots } from 'vue'
+
+export interface TableColumn {
+  key: string
+  label: string
+  sortable?: boolean
+  numeric?: boolean
+  width?: string
+}
+export interface TableSort {
+  key: string
+  direction: 'ascending' | 'descending'
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns: TableColumn[]
+    rows: Record<string, any>[]
+    rowKey?: string
+    caption?: string
+    striped?: boolean
+    compact?: boolean
+    borderless?: boolean
+    sticky?: boolean
+    selectable?: boolean
+    actionsLabel?: string
+    selectAllLabel?: string
+  }>(),
+  { rowKey: 'id', actionsLabel: 'Actions', selectAllLabel: 'Select all' },
+)
+const selected = defineModel<(string | number)[]>('selected', { default: () => [] })
+const sort = defineModel<TableSort | null>('sort', { default: null })
+const slots = useSlots()
+
+const hasActions = computed(() => !!slots.actions)
+const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0) + (hasActions.value ? 1 : 0))
+const allSelected = computed(() => props.rows.length > 0 && props.rows.every((r) => selected.value.includes(r[props.rowKey])))
+
+function toggleAll(e: Event) {
+  selected.value = (e.target as HTMLInputElement).checked ? props.rows.map((r) => r[props.rowKey]) : []
+}
+function toggleRow(id: string | number, checked: boolean) {
+  selected.value = checked ? [...selected.value, id] : selected.value.filter((x) => x !== id)
+}
+function ariaSort(key: string) {
+  return sort.value?.key === key ? sort.value.direction : undefined
+}
+function toggleSort(e: Event, key: string) {
+  e.preventDefault()
+  const next = sort.value?.key === key && sort.value.direction === 'ascending' ? 'descending' : 'ascending'
+  sort.value = { key, direction: next }
+}
+function rowLabel(row: Record<string, any>) {
+  return `Select ${String(row[props.columns[0]?.key] ?? '')}`.trim()
+}
+</script>
+
+<template>
+  <div class="oc-table-wrap">
+    <table
+      :class="['oc-table', striped && 'oc-table--striped', compact && 'oc-table--compact', borderless && 'oc-table--borderless', sticky && 'oc-table--sticky']"
+    >
+      <caption v-if="caption">{{ caption }}</caption>
+      <thead>
+        <tr>
+          <th v-if="selectable" style="width: 2.5rem">
+            <input class="oc-checkbox" type="checkbox" :checked="allSelected" :aria-label="selectAllLabel" @change="toggleAll" />
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :aria-sort="ariaSort(col.key)"
+            :data-numeric="col.numeric ? '' : undefined"
+            :style="col.width ? { width: col.width } : undefined"
+          >
+            <a v-if="col.sortable" class="oc-table-sort" :href="`?sort=${col.key}`" @click="toggleSort($event, col.key)">{{ col.label }}</a>
+            <template v-else>{{ col.label }}</template>
+          </th>
+          <th v-if="hasActions"><span class="oc-visually-hidden">{{ actionsLabel }}</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="row[rowKey]"
+          :aria-selected="selected.includes(row[rowKey]) ? 'true' : undefined"
+        >
+          <td v-if="selectable">
+            <input
+              class="oc-checkbox"
+              type="checkbox"
+              :checked="selected.includes(row[rowKey])"
+              :aria-label="rowLabel(row)"
+              @change="toggleRow(row[rowKey], ($event.target as HTMLInputElement).checked)"
+            />
+          </td>
+          <td v-for="col in columns" :key="col.key" :data-numeric="col.numeric ? '' : undefined">
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">{{ row[col.key] }}</slot>
+          </td>
+          <td v-if="hasActions" class="oc-table-actions"><slot name="actions" :row="row" /></td>
+        </tr>
+        <tr v-if="rows.length === 0 && $slots.empty" class="oc-table-empty">
+          <td :colspan="colspan"><slot name="empty" :row="{}" /></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/OcTableActions.vue

@@ -0,0 +1,26 @@
+<!-- File: packages/vue/src/components/OcTableActions.vue | Map: td.oc-table-actions -> icon actions (default slot) OR overflow trigger + popover menu (default slot = menu items) -->
+<script setup lang="ts">
+/**
+ * Row actions cell. Two modes:
+ * - no `menuLabel`: the default slot holds icon actions (`a` / `button` with class oc-table-actions-icon(--primary/--success/--destructive)).
+ * - with `menuLabel`: a three dots trigger opens a native popover; the default slot holds `.oc-dropdown-item`s.
+ * Classes: td.oc-table-actions(--icons), .oc-table-actions-icon, .oc-table-actions-more, .oc-dropdown-menu[popover]
+ */
+import { useUid } from '../composables/useUid'
+
+defineProps<{
+  /** Accessible name of the overflow trigger, e.g. "Actions for Ada". Turns on menu mode. */
+  menuLabel?: string
+}>()
+const menuId = useUid('oc-table-actions-menu')
+</script>
+
+<template>
+  <td :class="['oc-table-actions', !menuLabel && 'oc-table-actions--icons']">
+    <template v-if="menuLabel">
+      <button class="oc-table-actions-more" type="button" :popovertarget="menuId" :aria-label="menuLabel"></button>
+      <div :id="menuId" class="oc-dropdown-menu" popover><slot /></div>
+    </template>
+    <slot v-else />
+  </td>
+</template>

package/src/components/OcTableCompact.vue

@@ -0,0 +1,46 @@
+<!-- File: packages/vue/src/components/OcTableCompact.vue | Map: wrapper div -> table.oc-table (thead from columns, tbody from rows, tfoot from footer) OR default slot -->
+<script setup lang="ts">
+/**
+ * Small striped table for inside cards. Pass `columns` + `rows` (+ `footer` total row), or put your own
+ * <table class="oc-table"> in the default slot. Scoped slot `cell` ({ row, column }) customises body cells.
+ * Classes: .oc-table-compact(--bordered/--plain), .oc-table-compact-muted, [data-numeric], [data-wrap]
+ */
+export interface TableCompactColumn {
+  key: string
+  label: string
+  numeric?: boolean
+  wrap?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    columns?: TableCompactColumn[]
+    rows?: Array<Record<string, unknown>>
+    footer?: Record<string, unknown>
+    bordered?: boolean
+    plain?: boolean
+  }>(),
+  { rows: () => [] },
+)
+// data-* attributes only when switched on (an empty string means "present").
+const cellAttrs = (c: TableCompactColumn) => ({ 'data-numeric': c.numeric ? '' : undefined, 'data-wrap': c.wrap ? '' : undefined })
+</script>
+
+<template>
+  <div :class="['oc-table-compact', bordered && 'oc-table-compact--bordered', plain && 'oc-table-compact--plain']">
+    <table v-if="columns" class="oc-table">
+      <thead>
+        <tr><th v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ c.label }}</th></tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, i) in rows" :key="i">
+          <td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)"><slot name="cell" :row="row" :column="c">{{ row[c.key] }}</slot></td>
+        </tr>
+      </tbody>
+      <tfoot v-if="footer">
+        <tr><td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ footer[c.key] }}</td></tr>
+      </tfoot>
+    </table>
+    <slot v-else />
+  </div>
+</template>

package/src/components/OcTabs.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Tabs with radio inputs and :has() (the CSS switches the panels). v-model = value of the active tab.
+ * One named slot per tab value renders its panel: <template #account>...</template>.
+ * Classes: .oc-tabset, .oc-tab-list, .oc-tab-trigger, .oc-tab-panel
+ */
+import { useUid } from '../composables/useUid'
+
+export interface TabItem {
+  label: string
+  /** Slot name and model value; defaults to the label. */
+  value?: string
+}
+defineProps<{ tabs: TabItem[]; name?: string }>()
+const model = defineModel<string>()
+const uid = useUid('oc-tabs')
+</script>
+
+<template>
+  <div class="oc-tabset">
+    <div class="oc-tab-list" role="tablist">
+      <label v-for="(tab, i) in tabs" :key="tab.value ?? tab.label" class="oc-tab-trigger">
+        <input
+          v-model="model"
+          type="radio"
+          :name="name ?? uid"
+          :value="tab.value ?? tab.label"
+          :checked="model === undefined && i === 0"
+        />
+        {{ tab.label }}
+      </label>
+    </div>
+    <div v-for="tab in tabs" :key="tab.value ?? tab.label" class="oc-tab-panel">
+      <slot :name="tab.value ?? tab.label" />
+    </div>
+  </div>
+</template>

package/src/components/OcTagInput.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Chips with remove buttons and a free-text input with suggestions. v-model: string[].
+ * Enter or comma adds the typed tag, Backspace on an empty input removes the last one.
+ * Classes: .oc-tag, .oc-tag-remove, .oc-tag-input, .oc-tag-suggestions
+ */
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    suggestions?: string[]
+    placeholder?: string
+    label?: string
+  }>(),
+  { suggestions: () => [], placeholder: 'Add tag...', label: 'Add tag' },
+)
+const tags = defineModel<string[]>({ default: () => [] })
+const draft = ref('')
+const available = computed(() => props.suggestions.filter((s) => !tags.value.includes(s)))
+
+function add(value: string) {
+  const tag = value.trim()
+  if (tag && !tags.value.includes(tag)) tags.value = [...tags.value, tag]
+  draft.value = ''
+}
+function remove(tag: string) {
+  tags.value = tags.value.filter((t) => t !== tag)
+}
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ',') {
+    e.preventDefault()
+    add(draft.value)
+  } else if (e.key === 'Backspace' && !draft.value && tags.value.length) {
+    tags.value = tags.value.slice(0, -1)
+  }
+}
+</script>
+
+<template>
+  <div class="oc-tag-input">
+    <span v-for="tag in tags" :key="tag" class="oc-tag">
+      {{ tag }}
+      <button class="oc-tag-remove" type="button" :aria-label="`Remove ${tag}`" @click="remove(tag)">&times;</button>
+    </span>
+    <input v-model="draft" type="text" :placeholder="placeholder" :aria-label="label" @keydown="onKeydown" />
+  </div>
+  <div v-if="available.length" class="oc-tag-suggestions">
+    <button v-for="s in available" :key="s" type="button" @click="add(s)">{{ s }}</button>
+  </div>
+</template>

package/src/components/OcTerminalLog.vue

@@ -0,0 +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>

package/src/components/OcTextarea.vue

@@ -0,0 +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>

package/src/components/OcThemeSwitch.vue

@@ -0,0 +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>

package/src/components/OcTimeInput.vue

@@ -0,0 +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>

package/src/components/OcTimeline.vue

@@ -0,0 +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>

package/src/components/OcToast.vue

@@ -0,0 +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>

package/src/components/OcToastContainer.vue

@@ -0,0 +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>

package/src/components/OcToggle.vue

@@ -0,0 +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>

package/src/components/OcToggleField.vue

@@ -0,0 +1,28 @@
+<!-- File: packages/vue/src/components/OcToggleField.vue | Map: props + model -> template (label row: text + span.oc-switch) -->
+<script setup lang="ts">
+/**
+ * Settings row: title, description and a switch. v-model: boolean. Slots `label` / `description` override the props.
+ * Same markup as packages/ui/snippets/toggle-field.html. class/style on the row, other attributes on the checkbox.
+ */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ label?: string; description?: string; card?: boolean; reverse?: boolean }>()
+const model = defineModel<boolean>({ default: false })
+const { root, control } = useAttrsSplit()
+const descId = useUid('oc-toggle-field')
+</script>
+
+<template>
+  <label v-bind="root" :class="['oc-toggle-field', card && 'oc-toggle-field--card', reverse && 'oc-toggle-field--reverse']">
+    <span class="oc-toggle-field-text">
+      <span class="oc-toggle-field-label"><slot name="label">{{ label }}</slot></span>
+      <span v-if="description || $slots.description" :id="descId" class="oc-toggle-field-description"><slot name="description">{{ description }}</slot></span>
+    </span>
+    <span class="oc-switch">
+      <input v-bind="control" v-model="model" type="checkbox" role="switch" :aria-describedby="description || $slots.description ? descId : undefined" />
+      <span class="oc-switch-track"></span>
+    </span>
+  </label>
+</template>

package/src/components/OcToggleGroup.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * Connected toggles. v-model = array of pressed values (type "multiple", checkbox inputs) or a single value
+ * string (type "single", radio inputs). Put OcToggle items with a `value` inside.
+ * Classes: .oc-toggle-group(--spaced)
+ */
+import { computed, provide } from 'vue'
+import { useUid } from '../composables/useUid'
+import { toggleGroupKey } from '../composables/keys'
+
+const props = withDefaults(defineProps<{ type?: 'single' | 'multiple'; spaced?: boolean; label?: string; name?: string }>(), { type: 'multiple' })
+const model = defineModel<string | string[]>()
+const uid = useUid('oc-toggle')
+
+const values = computed(() => (Array.isArray(model.value) ? model.value : model.value ? [model.value] : []))
+function toggle(value: string) {
+  if (props.type === 'single') {
+    model.value = value
+  } else {
+    const list = values.value
+    model.value = list.includes(value) ? list.filter((v) => v !== value) : [...list, value]
+  }
+}
+provide(toggleGroupKey, {
+  values,
+  type: computed(() => props.type),
+  name: computed(() => props.name ?? uid),
+  toggle,
+})
+</script>
+
+<template>
+  <div
+    :class="['oc-toggle-group', spaced && 'oc-toggle-group--spaced']"
+    :role="type === 'single' ? 'radiogroup' : 'group'"
+    :aria-label="label"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/OcTooltip.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+/** CSS-only tooltip: wraps the default slot and shows `text` via data-tooltip. */
+defineProps<{ text: string }>()
+</script>
+
+<template>
+  <span class="oc-tooltip" :data-tooltip="text"><slot /></span>
+</template>