@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcButtonGroupText.vue

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

package/src/components/OcCard.vue

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

package/src/components/OcChartLine.vue

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

package/src/components/OcChatComposer.vue

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

package/src/components/OcCheckbox.vue

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

package/src/components/OcChecklist.vue

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

package/src/components/OcChipFilter.vue

@@ -0,0 +1,48 @@
+<!-- File: packages/vue/src/components/OcChipFilter.vue | Map: types + props -> template (group -> chip label per option) -->
+<script setup lang="ts">
+/**
+ * Rounded filter chips. `multiple`: checkboxes, v-model = string[]. Otherwise radios, v-model = string.
+ * Same markup as packages/ui/snippets/chip-filter.html. Classes: .oc-chip-filter(--sm/--scroll), -item, -count
+ */
+import { useUid } from '../composables/useUid'
+
+export interface ChipFilterItem {
+  value: string
+  label: string
+  count?: number
+  disabled?: boolean
+}
+const props = defineProps<{
+  options: ChipFilterItem[]
+  multiple?: boolean
+  /** aria-label of the group */
+  label?: string
+  size?: 'sm' | 'md'
+  scroll?: boolean
+  name?: string
+}>()
+const model = defineModel<string | string[]>()
+const uid = useUid('oc-chip')
+
+const isChecked = (v: string) => (Array.isArray(model.value) ? model.value.includes(v) : model.value === v)
+
+/** Checkbox: add or remove the value (works when v-model starts undefined). Radio: replace it. */
+function toggle(v: string) {
+  if (!props.multiple) {
+    model.value = v
+    return
+  }
+  const list = Array.isArray(model.value) ? model.value : []
+  model.value = list.includes(v) ? list.filter((x) => x !== v) : [...list, v]
+}
+</script>
+
+<template>
+  <div :class="['oc-chip-filter', size === 'sm' && 'oc-chip-filter--sm', scroll && 'oc-chip-filter--scroll']" :role="multiple ? 'group' : 'radiogroup'" :aria-label="label">
+    <label v-for="option in options" :key="option.value" class="oc-chip-filter-item">
+      <input :type="multiple ? 'checkbox' : 'radio'" :name="name ?? uid" :value="option.value" :checked="isChecked(option.value)" :disabled="option.disabled" @change="toggle(option.value)" />
+      {{ option.label }}
+      <span v-if="option.count != null" class="oc-chip-filter-count">{{ option.count }}</span>
+    </label>
+  </div>
+</template>

package/src/components/OcCollapsible.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/** Card-style details/summary section. v-model:open. Slots: icon, title, default (content). Classes: --dense */
+defineProps<{ title?: string; dense?: boolean }>()
+const open = defineModel<boolean>('open', { default: false })
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details :class="['oc-collapsible', dense && 'oc-collapsible--dense']" :open="open" @toggle="onToggle">
+    <summary>
+      <slot name="icon" />
+      <span class="oc-collapsible-title"><slot name="title">{{ title }}</slot></span>
+    </summary>
+    <div class="oc-collapsible-content"><slot /></div>
+  </details>
+</template>

package/src/components/OcColorField.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/** Native color picker next to a hex text input, kept in sync. v-model: color string (#rrggbb). */
+withDefaults(defineProps<{ pickerLabel?: string; valueLabel?: string }>(), {
+  pickerLabel: 'Pick a color',
+  valueLabel: 'Color value',
+})
+const model = defineModel<string>({ default: '#000000' })
+</script>
+
+<template>
+  <div class="oc-color-field">
+    <input v-model="model" type="color" :aria-label="pickerLabel" />
+    <input v-model="model" class="oc-input" type="text" :aria-label="valueLabel" />
+  </div>
+</template>

package/src/components/OcColorSelect.vue

@@ -0,0 +1,33 @@
+<!-- File: packages/vue/src/components/OcColorSelect.vue | Map: types + props -> template (fieldset radiogroup -> label per color) -->
+<script setup lang="ts">
+/** Pick one color from swatches. v-model = selected value. Classes: .oc-color-select(--list/--sm), -option, -swatch, -name */
+import { useUid } from '../composables/useUid'
+
+export interface ColorSelectItem {
+  value: string
+  label: string
+  /** CSS color, use Omnia tokens: "var(--color-red-70)". */
+  color: string
+  disabled?: boolean
+}
+defineProps<{
+  options: ColorSelectItem[]
+  /** aria-label of the group */
+  label?: string
+  list?: boolean
+  size?: 'sm' | 'md'
+  name?: string
+}>()
+const model = defineModel<string>()
+const uid = useUid('oc-color')
+</script>
+
+<template>
+  <fieldset :class="['oc-color-select', list && 'oc-color-select--list', size === 'sm' && 'oc-color-select--sm']" role="radiogroup" :aria-label="label">
+    <label v-for="option in options" :key="option.value" class="oc-color-select-option" :style="{ '--oc-swatch': option.color }">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
+      <span class="oc-color-select-swatch"></span>
+      <span class="oc-color-select-name">{{ option.label }}</span>
+    </label>
+  </fieldset>
+</template>

package/src/components/OcColumnMenu.vue

@@ -0,0 +1,50 @@
+<!-- File: packages/vue/src/components/OcColumnMenu.vue | Map: scope -> toolbar trigger -> popover (title, form with one checkbox per column, reset) -> default slot (the table) -->
+<script setup lang="ts">
+/**
+ * Column visibility menu. CSS hides column n of the table in the default slot when [data-col="n"] is unchecked.
+ * Checkboxes are uncontrolled, so "Reset" (form reset) restores the defaults. Emits `toggle(column, visible)`.
+ * Classes: .oc-column-menu-scope, .oc-column-menu[popover], -title, form.oc-column-menu-list, -item, -footer
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    /** One entry per column, in order (max 10). */
+    columns: Array<{ label: string; visible?: boolean; locked?: boolean }>
+    triggerLabel?: string
+    title?: string
+    resetLabel?: string
+  }>(),
+  { triggerLabel: 'Columns', title: 'Visible columns', resetLabel: 'Reset' },
+)
+const emit = defineEmits<{ toggle: [column: number, visible: boolean] }>()
+const menuId = useUid('oc-column-menu')
+</script>
+
+<template>
+  <div class="oc-column-menu-scope">
+    <div class="oc-table-toolbar">
+      <span class="oc-table-toolbar-spacer"></span>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" :popovertarget="menuId">{{ triggerLabel }}</button>
+    </div>
+    <div :id="menuId" class="oc-column-menu" popover>
+      <p class="oc-column-menu-title">{{ title }}</p>
+      <form class="oc-column-menu-list">
+        <label v-for="(col, i) in columns" :key="i" class="oc-column-menu-item">
+          <input
+            type="checkbox"
+            :data-col="i + 1"
+            :checked="col.locked || col.visible !== false"
+            :disabled="col.locked"
+            @change="emit('toggle', i + 1, ($event.target as HTMLInputElement).checked)"
+          />
+          {{ col.label }}
+        </label>
+        <div class="oc-column-menu-footer">
+          <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">{{ resetLabel }}</button>
+        </div>
+      </form>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/OcCommand.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * Command palette / searchable list. Filtering, aria-selected and keyboard navigation
+ * (ArrowUp/ArrowDown/Enter) are handled here (the CSS only styles the markup).
+ * v-model:query is the search text. Emits `select` with the chosen item.
+ * Classes: .oc-command, -input, -list, -group-label, -item, -shortcut, -separator, -empty
+ */
+import { computed, ref, watch } from 'vue'
+
+export interface CommandItem {
+  label: string
+  value?: string
+  group?: string
+  shortcut?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: CommandItem[]
+    placeholder?: string
+    label?: string
+    emptyText?: string
+  }>(),
+  { placeholder: 'Type a command or search...', label: 'Search commands', emptyText: 'No results found.' },
+)
+const emit = defineEmits<{ select: [item: CommandItem] }>()
+const query = defineModel<string>('query', { default: '' })
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  return q ? props.items.filter((i) => i.label.toLowerCase().includes(q)) : props.items
+})
+
+const sections = computed(() => {
+  const order: string[] = []
+  const map = new Map<string, CommandItem[]>()
+  for (const item of filtered.value) {
+    const key = item.group ?? ''
+    if (!map.has(key)) {
+      map.set(key, [])
+      order.push(key)
+    }
+    map.get(key)!.push(item)
+  }
+  return order.map((key) => ({ label: key, items: map.get(key)! }))
+})
+
+const flat = computed(() => sections.value.flatMap((s) => s.items))
+const active = ref(0)
+
+function firstEnabled(from = 0, step = 1) {
+  const list = flat.value
+  for (let i = from; i >= 0 && i < list.length; i += step) if (!list[i].disabled) return i
+  return -1
+}
+
+watch(flat, () => {
+  active.value = Math.max(firstEnabled(), 0)
+})
+
+function move(step: 1 | -1) {
+  const next = firstEnabled(active.value + step, step)
+  if (next !== -1) active.value = next
+}
+
+function choose(item: CommandItem) {
+  if (!item.disabled) emit('select', item)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    move(1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    move(-1)
+  } else if (e.key === 'Enter') {
+    const item = flat.value[active.value]
+    if (item) {
+      e.preventDefault()
+      choose(item)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="oc-command" role="combobox" aria-expanded="true" aria-haspopup="listbox">
+    <input
+      v-model="query"
+      class="oc-command-input"
+      type="search"
+      :placeholder="placeholder"
+      :aria-label="label"
+      @keydown="onKeydown"
+    />
+    <ul class="oc-command-list" role="listbox">
+      <template v-for="(section, s) in sections" :key="section.label + s">
+        <li v-if="s > 0" class="oc-command-separator" role="separator"></li>
+        <li v-if="section.label" class="oc-command-group-label" role="presentation">{{ section.label }}</li>
+        <li
+          v-for="item in section.items"
+          :key="item.value ?? item.label"
+          class="oc-command-item"
+          role="option"
+          :aria-selected="flat[active] === item ? 'true' : undefined"
+          :aria-disabled="item.disabled ? 'true' : undefined"
+          @click="choose(item)"
+          @mousemove="!item.disabled && (active = flat.indexOf(item))"
+        >
+          {{ item.label }}
+          <span v-if="item.shortcut" class="oc-command-shortcut">{{ item.shortcut }}</span>
+        </li>
+      </template>
+    </ul>
+    <div class="oc-command-empty" :hidden="flat.length > 0">{{ emptyText }}</div>
+  </div>
+</template>

package/src/components/OcConfirmDialog.vue

@@ -0,0 +1,65 @@
+<!-- File: packages/vue/src/components/OcConfirmDialog.vue | Map: dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm) -->
+<script setup lang="ts">
+/**
+ * Confirm variant of the alert dialog. v-model:open. Emits `confirm`, `cancel`, `discard` (all close the dialog).
+ * With `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
+ * Slots: icon, title, default (message).
+ * Classes: .oc-alert-dialog--confirm, .oc-alert-dialog-close, .oc-alert-dialog-form, .oc-alert-dialog-typed,
+ * .oc-alert-dialog-confirm, .oc-alert-dialog-discard
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    discardLabel?: string
+    confirmWord?: string
+    closeLabel?: string
+  }>(),
+  { type: 'error', confirmLabel: 'Confirm', cancelLabel: 'Cancel', closeLabel: 'Close' },
+)
+const emit = defineEmits<{ confirm: []; cancel: []; discard: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-confirm-dialog-title')
+const textId = `${titleId}-text`
+const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
+
+// Every action emits its event, then closes through the model (Vue stays the source of truth).
+function done(event: 'confirm' | 'cancel' | 'discard') {
+  if (event === 'confirm') emit('confirm')
+  else if (event === 'cancel') emit('cancel')
+  else emit('discard')
+  open.value = false
+}
+const destructive = () => props.type === 'error'
+</script>
+
+<template>
+  <dialog ref="el" class="oc-modal" closedby="any" :aria-labelledby="titleId" :aria-describedby="textId" @close="onClose">
+    <div :class="['oc-modal-content', 'oc-alert-dialog', `oc-alert-dialog--${type}`, 'oc-alert-dialog--confirm']">
+      <button class="oc-alert-dialog-close" type="button" :aria-label="closeLabel" @click="done('cancel')">×</button>
+      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
+      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
+      <form class="oc-alert-dialog-form" @submit.prevent="done('confirm')">
+        <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
+        <label v-if="confirmWord" class="oc-alert-dialog-typed">
+          <span>Type <code>{{ confirmWord }}</code> to confirm</span>
+          <input class="oc-input" name="confirm" :pattern="confirmWord" required autocomplete="off" />
+        </label>
+        <div class="oc-modal-footer">
+          <button v-if="discardLabel" class="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" @click="done('discard')">{{ discardLabel }}</button>
+          <button class="oc-btn oc-btn--outline" type="button" @click="done('cancel')">{{ cancelLabel }}</button>
+          <button :class="['oc-btn', destructive() && 'oc-btn--destructive', 'oc-alert-dialog-confirm']" type="submit" value="confirm">{{ confirmLabel }}</button>
+        </div>
+      </form>
+    </div>
+  </dialog>
+</template>