@birdycom/omniaui-vue 0.0.0-stage → 0.11.1

package/src/blocks/OcBlockPageHero.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/** Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Classes: .oc-hero, -eyebrow, -title, -text, -actions */
+defineProps<{ eyebrow?: string; title: string; text?: string }>()
+</script>
+
+<template>
+  <section class="oc-hero">
+    <span v-if="eyebrow" class="oc-hero-eyebrow">{{ eyebrow }}</span>
+    <h1 class="oc-hero-title">{{ title }}</h1>
+    <p v-if="text" class="oc-hero-text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-hero-actions"><slot name="actions" /></div>
+  </section>
+</template>

package/src/blocks/OcBlockPortfolioGrid.vue

@@ -0,0 +1,63 @@
+<!-- File: packages/vue/src/blocks/OcBlockPortfolioGrid.vue | Map: props -> head (title, lead, link slot) -> grid of OcProjectCard -->
+<script setup lang="ts">
+/**
+ * Portfolio section: heading, lead, "all projects" link and a grid of project cards.
+ * `title` + `highlight` (gradient word). Slots: link, default (own cards). Classes: .oc-block-portfolio (--two), -head, -lead, -grid
+ */
+import OcProjectCard from '../components/OcProjectCard.vue'
+import { useUid } from '../composables/useUid'
+
+export interface PortfolioGridProject {
+  href: string
+  name: string
+  type?: string
+  meta?: string
+  more?: string
+  image?: string
+  imageAlt?: string
+  accent?: string
+}
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    lead?: string
+    projects?: PortfolioGridProject[]
+    two?: boolean
+  }>(),
+  { projects: () => [] },
+)
+const titleId = useUid('oc-portfolio-title')
+</script>
+
+<template>
+  <section :class="['oc-block-portfolio oc-section-pad', two && 'oc-block-portfolio--two']" :aria-labelledby="titleId">
+    <div class="oc-container">
+      <div class="oc-block-portfolio-head">
+        <div>
+          <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+          <h2 :id="titleId" class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+          <p v-if="lead" class="oc-block-portfolio-lead">{{ lead }}</p>
+        </div>
+        <slot name="link" />
+      </div>
+      <div class="oc-block-portfolio-grid">
+        <slot>
+          <OcProjectCard
+            v-for="(p, i) in projects"
+            :key="i"
+            :class="p.accent && `oc-accent--${p.accent}`"
+            :href="p.href"
+            :name="p.name"
+            :type="p.type"
+            :meta="p.meta"
+            :more="p.more ?? 'View project'"
+            :image="p.image"
+            :image-alt="p.imageAlt"
+          />
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockPricing.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * Pricing cards with a featured plan. Emits `select` with the plan when its button is clicked.
+ * Slot `action` (scoped: { plan }) replaces the button. Classes: .oc-block-pricing, -grid, -card(--featured),
+ * -name, -desc, -price, -features
+ */
+export interface PricingPlan {
+  name: string
+  description?: string
+  price: string
+  /** e.g. "/month" */
+  period?: string
+  features: string[]
+  cta: string
+  featured?: boolean
+}
+defineProps<{ title?: string; description?: string; plans: PricingPlan[] }>()
+defineEmits<{ select: [plan: PricingPlan] }>()
+</script>
+
+<template>
+  <div class="oc-block-pricing">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="description">{{ description }}</p>
+    <div class="oc-block-pricing-grid">
+      <div v-for="plan in plans" :key="plan.name" :class="['oc-block-pricing-card', plan.featured && 'oc-block-pricing-card--featured']">
+        <p class="oc-block-pricing-name">{{ plan.name }}</p>
+        <p v-if="plan.description" class="oc-block-pricing-desc">{{ plan.description }}</p>
+        <p class="oc-block-pricing-price">{{ plan.price }} <span v-if="plan.period">{{ plan.period }}</span></p>
+        <ul class="oc-block-pricing-features">
+          <li v-for="f in plan.features" :key="f">{{ f }}</li>
+        </ul>
+        <slot name="action" :plan="plan">
+          <button :class="['oc-btn', !plan.featured && 'oc-btn--outline']" type="button" style="width: 100%" @click="$emit('select', plan)">{{ plan.cta }}</button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockProcess.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * Numbered steps (CSS counter) + an endless marquee of technologies (the list is rendered twice, the copy aria-hidden).
+ * Classes: .oc-section-pad, .oc-container, .oc-eyebrow, .oc-display(--md), .oc-text-gradient, .oc-steps, .oc-marquee
+ */
+export interface ProcessStep {
+  title: string
+  text: string
+}
+defineProps<{
+  eyebrow?: string
+  title?: string
+  highlight?: string
+  steps: ProcessStep[]
+  marquee?: string[]
+  marqueeLabel?: string
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <ol class="oc-steps">
+        <li v-for="step in steps" :key="step.title">
+          <h3>{{ step.title }}</h3>
+          <p>{{ step.text }}</p>
+        </li>
+      </ol>
+      <div v-if="marquee?.length" class="oc-marquee mt-4" :aria-label="marqueeLabel">
+        <div class="oc-marquee__track">
+          <span v-for="item in marquee" :key="item" class="oc-marquee__item">{{ item }}</span>
+          <span v-for="item in marquee" :key="'copy-' + item" class="oc-marquee__item" aria-hidden="true">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockProductGrid.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Section title + grid of product cards, each with its own accent color (oc-accent--green|orange|violet|cyan...).
+ * Classes: .oc-card-grid, .oc-product-card, -top, -name, -tagline, -summary, -more, .oc-icon-tile, .oc-pill
+ */
+export interface ProductItem {
+  name: string
+  tagline?: string
+  summary?: string
+  /** Pill text, e.g. "Own product" */
+  tag?: string
+  /** Glyph for the icon tile */
+  icon?: string
+  /** Accent name: green, orange, violet, cyan, ... */
+  accent?: string
+  href?: string
+  more?: string
+}
+defineProps<{ eyebrow?: string; title?: string; highlight?: string; products: ProductItem[] }>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <div class="oc-card-grid">
+        <a v-for="p in products" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`]" :href="p.href ?? '#'">
+          <div class="oc-product-card__top">
+            <span class="oc-icon-tile" aria-hidden="true">{{ p.icon }}</span>
+            <span v-if="p.tag" class="oc-pill">{{ p.tag }}</span>
+          </div>
+          <h3 class="oc-product-card__name">{{ p.name }}</h3>
+          <p v-if="p.tagline" class="oc-product-card__tagline">{{ p.tagline }}</p>
+          <p v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</p>
+          <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockProfileHeader.vue

@@ -0,0 +1,50 @@
+<!-- File: packages/vue/src/blocks/OcBlockProfileHeader.vue | Map: props -> banner -> bar (avatar slot, info, actions slot) -> tabs -->
+<script setup lang="ts">
+/**
+ * Profile / channel header: banner, overhanging avatar, name, meta, bio, actions and link tabs.
+ * Slots: avatar (initials or <img>), actions, bio. Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
+ * -info, -name, -meta, -bio, -actions, -tabs, -tab (aria-current="page")
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface ProfileHeaderTab {
+  label: string
+  href: string
+  current?: boolean
+}
+const props = withDefaults(
+  defineProps<{
+    name: string
+    meta?: string
+    bio?: string
+    initials?: string
+    banner?: string
+    tabs?: ProfileHeaderTab[]
+    tabsLabel?: string
+    compact?: boolean
+    headingLevel?: 1 | 2
+  }>(),
+  { tabs: () => [], tabsLabel: 'Profile sections', headingLevel: 1 },
+)
+const nameId = useUid('oc-profile-name')
+const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${props.banner}")` : undefined))
+</script>
+
+<template>
+  <section :class="['oc-block-profile', compact && 'oc-block-profile--compact']" :aria-labelledby="nameId">
+    <div class="oc-block-profile-banner" :style="bannerStyle" aria-hidden="true"></div>
+    <div class="oc-block-profile-bar">
+      <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true"><slot name="avatar">{{ initials }}</slot></span>
+      <div class="oc-block-profile-info">
+        <component :is="headingLevel === 1 ? 'h1' : 'h2'" :id="nameId" class="oc-block-profile-name">{{ name }}</component>
+        <p v-if="meta" class="oc-block-profile-meta">{{ meta }}</p>
+        <p v-if="bio || $slots.bio" class="oc-block-profile-bio"><slot name="bio">{{ bio }}</slot></p>
+      </div>
+      <div v-if="$slots.actions" class="oc-block-profile-actions"><slot name="actions" /></div>
+    </div>
+    <nav v-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
+      <a v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab" :href="tab.href" :aria-current="tab.current ? 'page' : undefined">{{ tab.label }}</a>
+    </nav>
+  </section>
+</template>

package/src/blocks/OcBlockShowcase.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+/**
+ * Portfolio grid: project cards with a browser frame around the screenshot.
+ * `background` is any CSS background (use Omnia tokens, e.g. linear-gradient(135deg, var(--color-green-40), var(--color-teal-80))); `image` shows an img.
+ * Classes: .oc-card-grid, .oc-product-card, .oc-browser-frame(__bar/__body), .oc-pill--accent
+ */
+export interface ShowcaseProject {
+  name: string
+  summary?: string
+  tag?: string
+  accent?: string
+  href?: string
+  background?: string
+  image?: string
+  more?: string
+}
+defineProps<{ eyebrow?: string; title?: string; highlight?: string; projects: ShowcaseProject[] }>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <div class="oc-card-grid" style="--oc-card-min: 26rem">
+        <a v-for="p in projects" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`, 'p-0 overflow-hidden']" :href="p.href ?? '#'">
+          <span class="oc-browser-frame m-1">
+            <span class="oc-browser-frame__bar"><i></i><i></i><i></i></span>
+            <span class="oc-browser-frame__body" :style="p.background ? { background: p.background } : undefined">
+              <img v-if="p.image" :src="p.image" alt="" />
+            </span>
+          </span>
+          <span class="grid gap-0.5 p-1.5 pt-0">
+            <span v-if="p.tag" class="oc-pill oc-pill--accent">{{ p.tag }}</span>
+            <span class="oc-product-card__name">{{ p.name }}</span>
+            <span v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</span>
+            <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockSiteFooter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * Brand column, link columns, a contact column and a bottom bar.
+ * Slots: brand (the logo link), about (default: `about` text), bottom-start, bottom-end.
+ * Classes: .oc-site-footer, __grid, __about, __title, __list, __bottom, .oc-site-header__brand
+ */
+export interface SiteFooterColumn {
+  title: string
+  links: { label: string; href: string }[]
+}
+export interface SiteFooterContact {
+  title: string
+  lines: { label: string; href?: string }[]
+}
+defineProps<{
+  about?: string
+  columns?: SiteFooterColumn[]
+  contact?: SiteFooterContact
+  copyright?: string
+  credit?: string
+}>()
+</script>
+
+<template>
+  <footer class="oc-site-footer">
+    <div class="oc-container">
+      <div class="oc-site-footer__grid">
+        <div class="oc-site-footer__about">
+          <slot name="brand" />
+          <p v-if="about">{{ about }}</p>
+        </div>
+        <div v-for="col in columns" :key="col.title">
+          <h2 class="oc-site-footer__title">{{ col.title }}</h2>
+          <ul class="oc-site-footer__list">
+            <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
+          </ul>
+        </div>
+        <div v-if="contact">
+          <h2 class="oc-site-footer__title">{{ contact.title }}</h2>
+          <address class="oc-site-footer__list">
+            <template v-for="line in contact.lines" :key="line.label">
+              <a v-if="line.href" :href="line.href">{{ line.label }}</a>
+              <span v-else>{{ line.label }}</span>
+            </template>
+          </address>
+        </div>
+      </div>
+      <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-site-footer__bottom">
+        <span><slot name="bottom-start">{{ copyright }}</slot></span>
+        <span><slot name="bottom-end">{{ credit }}</slot></span>
+      </div>
+    </div>
+  </footer>
+</template>

package/src/blocks/OcBlockSiteHeader.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * Sticky header that turns into glass after scrolling; the mobile menu is a popover. No JavaScript needed.
+ * Slots: brand (inside the brand link), nav (replaces the items), cta (the trailing button).
+ * Classes: .oc-site-header, __inner, __brand, __toggle, __nav, .oc-container
+ */
+import { useUid } from '../composables/useUid'
+
+export interface SiteHeaderLink {
+  label: string
+  href: string
+  current?: boolean
+}
+withDefaults(
+  defineProps<{ items?: SiteHeaderLink[]; homeHref?: string; menuLabel?: string; navLabel?: string }>(),
+  { items: () => [], homeHref: '/', menuLabel: 'Menu', navLabel: 'Main' },
+)
+const navId = useUid('oc-site-nav')
+</script>
+
+<template>
+  <header class="oc-site-header">
+    <div class="oc-container oc-site-header__inner">
+      <a class="oc-site-header__brand" :href="homeHref"><slot name="brand" /></a>
+      <button class="oc-site-header__toggle" type="button" :popovertarget="navId" :aria-label="menuLabel">&#9776;</button>
+      <nav :id="navId" class="oc-site-header__nav" popover :aria-label="navLabel">
+        <slot name="nav">
+          <a v-for="item in items" :key="item.href + item.label" :href="item.href" :aria-current="item.current ? 'page' : undefined">{{ item.label }}</a>
+        </slot>
+        <slot name="cta" />
+      </nav>
+    </div>
+  </header>
+</template>

package/src/blocks/OcBlockSpotlight.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Highlighted flagship product: badge, big title with icon tile, tagline, copy, button and a module list.
+ * Slots: cta (default: a gradient link from `ctaLabel` / `ctaHref`). Classes: .oc-spotlight(__title/__tagline/__modules),
+ * .oc-accent--<name>, .oc-pill--accent, .oc-status-dot, .oc-icon-tile(--lg/--sm), .oc-lead
+ */
+export interface SpotlightModule {
+  icon?: string
+  label: string
+}
+defineProps<{
+  accent?: string
+  badge?: string
+  icon?: string
+  title: string
+  tagline?: string
+  lead?: string
+  ctaLabel?: string
+  ctaHref?: string
+  modules?: SpotlightModule[]
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <div :class="['oc-spotlight', accent && `oc-accent--${accent}`]">
+        <div>
+          <span v-if="badge" class="oc-pill oc-pill--accent"><span class="oc-status-dot"></span>{{ badge }}</span>
+          <h2 class="oc-spotlight__title">
+            <span v-if="icon" class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{{ icon }}</span>{{ title }}
+          </h2>
+          <p v-if="tagline" class="oc-spotlight__tagline">{{ tagline }}</p>
+          <p v-if="lead" class="oc-lead">{{ lead }}</p>
+          <slot name="cta">
+            <a v-if="ctaLabel" class="oc-btn oc-btn--gradient oc-btn--lg" :href="ctaHref ?? '#'">{{ ctaLabel }}</a>
+          </slot>
+        </div>
+        <ul v-if="modules?.length" class="oc-spotlight__modules">
+          <li v-for="m in modules" :key="m.label">
+            <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{{ m.icon }}</span>{{ m.label }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockStats.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/** Key figures row. Classes: .oc-block-stats, -stat, -stat-value, -stat-label */
+export interface StatItem {
+  value: string
+  label: string
+}
+defineProps<{ items: StatItem[] }>()
+</script>
+
+<template>
+  <div class="oc-block-stats">
+    <div v-for="item in items" :key="item.label" class="oc-block-stat">
+      <div class="oc-block-stat-value">{{ item.value }}</div>
+      <div class="oc-block-stat-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockStatsCounter.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/** Key figures that count up when they scroll into view (CSS only). Classes: .oc-block-stats, -stat, -stat-value + .oc-counter, -stat-label */
+import OcCounter from '../components/OcCounter.vue'
+
+export interface CounterStat {
+  to: number
+  suffix?: string
+  label: string
+}
+defineProps<{ items: CounterStat[] }>()
+</script>
+
+<template>
+  <div class="oc-block-stats">
+    <div v-for="item in items" :key="item.label" class="oc-block-stat">
+      <OcCounter class="oc-block-stat-value" :to="item.to" :suffix="item.suffix" />
+      <span class="oc-block-stat-label">{{ item.label }}</span>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockTeamList.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * Member rows with avatar, role badge and a row action menu (popover). Emits `action` ({ member, action }).
+ * Slot `meta` (scoped: { member }) adds extra badges. Classes: .oc-block-team, -row, -meta, .oc-user, .oc-dropdown-menu
+ */
+import { useUid } from '../composables/useUid'
+
+export interface TeamAction {
+  label: string
+  href?: string
+  /** Draw a separator line before this action */
+  separator?: boolean
+}
+export interface TeamMember {
+  name: string
+  email?: string
+  initials?: string
+  role?: string
+  roleVariant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
+  actions?: TeamAction[]
+}
+defineProps<{ members: TeamMember[]; actionsLabel?: string }>()
+defineEmits<{ action: [payload: { member: TeamMember; action: TeamAction }] }>()
+const base = useUid('oc-team-menu')
+</script>
+
+<template>
+  <div class="oc-block-team">
+    <div v-for="(member, i) in members" :key="member.email ?? member.name" class="oc-block-team-row">
+      <div class="oc-user">
+        <span class="oc-avatar">{{ member.initials }}</span>
+        <span class="oc-user-text">
+          <span class="oc-user-name">{{ member.name }}</span>
+          <span v-if="member.email" class="oc-user-email">{{ member.email }}</span>
+        </span>
+      </div>
+      <div class="oc-block-team-meta">
+        <span v-if="member.role" :class="['oc-badge', member.roleVariant && member.roleVariant !== 'default' && `oc-badge--${member.roleVariant}`]">{{ member.role }}</span>
+        <slot name="meta" :member="member" />
+        <template v-if="member.actions?.length">
+          <button class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" type="button" :popovertarget="`${base}-${i}`" :aria-label="actionsLabel ?? 'Member actions'">&hellip;</button>
+          <div :id="`${base}-${i}`" class="oc-dropdown-menu" popover>
+            <template v-for="action in member.actions" :key="action.label">
+              <div v-if="action.separator" class="oc-dropdown-separator"></div>
+              <a v-if="action.href" class="oc-dropdown-item" :href="action.href" @click="$emit('action', { member, action })">{{ action.label }}</a>
+              <button v-else class="oc-dropdown-item" type="button" @click="$emit('action', { member, action })">{{ action.label }}</button>
+            </template>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockTwoFactor.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * Authenticator setup: QR, copyable key, OTP code and recovery codes. v-model = the typed code.
+ * Emits `submit` with the code (form submit of the confirm step). Slot `qr` replaces the QR placeholder.
+ * Classes: .oc-block-twofactor, -step, -center, -qr; reuses copy-field, otp, recovery-codes components.
+ */
+import OcCopyField from '../components/OcCopyField.vue'
+import OcOtpInput from '../components/OcOtpInput.vue'
+import OcRecoveryCodes from '../components/OcRecoveryCodes.vue'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    setupKey: string
+    recoveryCodes?: string[]
+    length?: number
+    scanTitle?: string
+    scanText?: string
+    confirmTitle?: string
+    codeLabel?: string
+    submitLabel?: string
+  }>(),
+  {
+    length: 6,
+    scanTitle: '1. Scan the QR code',
+    scanText: 'Use an authenticator app, or enter the key manually.',
+    confirmTitle: '2. Confirm with a code',
+    codeLabel: 'Authentication code',
+    submitLabel: 'Enable two-factor',
+  },
+)
+defineEmits<{ submit: [code: string] }>()
+const code = defineModel<string>({ default: '' })
+const codeId = useUid('oc-twofactor-code')
+</script>
+
+<template>
+  <div class="oc-block-twofactor">
+    <section class="oc-block-twofactor-step">
+      <div class="oc-heading oc-heading--sm">
+        <h2 class="oc-heading-title">{{ scanTitle }}</h2>
+        <p v-if="scanText" class="oc-heading-description">{{ scanText }}</p>
+      </div>
+      <div class="oc-block-twofactor-center">
+        <slot name="qr"><div class="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div></slot>
+        <OcCopyField :value="setupKey" label="Setup key" />
+      </div>
+    </section>
+    <section class="oc-block-twofactor-step">
+      <div class="oc-heading oc-heading--sm"><h2 class="oc-heading-title">{{ confirmTitle }}</h2></div>
+      <div class="oc-field">
+        <label class="oc-field-label" :for="codeId">{{ codeLabel }}</label>
+        <OcOtpInput :id="codeId" v-model="code" name="code" :length="length" />
+      </div>
+      <button class="oc-btn" type="submit" @click="$emit('submit', code)">{{ submitLabel }}</button>
+    </section>
+    <section v-if="recoveryCodes?.length" class="oc-block-twofactor-step">
+      <OcRecoveryCodes :codes="recoveryCodes" />
+    </section>
+  </div>
+</template>

package/src/blocks/OcBlockWizardDialog.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * Modal wizard: stepper rail on the left, step content and a Back / Next footer.
+ * v-model:open opens the dialog, v-model:step is the active step index. Emits `finish` on the last step's button.
+ * Slots: step-<index> (or default, scoped: { step, index }) for the content of each step.
+ * Classes: dialog.oc-modal > .oc-modal-content--xl, .oc-block-wizard(-rail/-main/-step), .oc-stepper, .oc-modal-footer
+ */
+import { computed, ref } from 'vue'
+import OcStepper from '../components/OcStepper.vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    steps: { label: string }[]
+    backLabel?: string
+    nextLabel?: string
+    finishLabel?: string
+    stepsLabel?: string
+    /** Text for "Step 2 of 3"; receives the 1-based index and the count */
+    stepText?: (index: number, total: number) => string
+  }>(),
+  { backLabel: 'Back', nextLabel: 'Next', finishLabel: 'Finish', stepsLabel: 'Setup steps' },
+)
+const emit = defineEmits<{ finish: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const step = defineModel<number>('step', { default: 0 })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-wizard-title')
+const last = computed(() => step.value >= props.steps.length - 1)
+const description = computed(() => (props.stepText ?? ((i, n) => `Step ${i} of ${n}`))(step.value + 1, props.steps.length))
+
+function next() {
+  if (last.value) {
+    emit('finish')
+    open.value = false
+  } else {
+    step.value++
+  }
+}
+</script>
+
+<template>
+  <dialog ref="el" class="oc-modal" closedby="closerequest" :aria-labelledby="titleId" @close="onClose">
+    <div class="oc-modal-content oc-modal-content--xl">
+      <div class="oc-block-wizard">
+        <div class="oc-block-wizard-rail">
+          <OcStepper v-model="step" :steps="steps" :label="stepsLabel" />
+        </div>
+        <div class="oc-block-wizard-main">
+          <div class="oc-modal-header">
+            <h2 :id="titleId" class="oc-modal-title">{{ steps[step]?.label }}</h2>
+            <p class="oc-modal-description">{{ description }}</p>
+          </div>
+          <div class="oc-block-wizard-step">
+            <slot :name="`step-${step}`" :step="steps[step]" :index="step"><slot :step="steps[step]" :index="step" /></slot>
+          </div>
+          <div class="oc-modal-footer">
+            <button class="oc-btn oc-btn--outline" type="button" :disabled="step === 0" @click="step--">{{ backLabel }}</button>
+            <button class="oc-btn" type="button" @click="next">{{ last ? finishLabel : nextLabel }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>