@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@birdycom/omniaui-vue",
-  "version": "0.11.0",
-  "description": "OmniaUI for Vue 3: one single-file component per OmniaUI component and block, rendering the exact markup of the CSS packages.",
-  "type": "module",
-  "license": "MIT",
-  "author": "Serge Cools (Birdycom)",
-  "homepage": "https://omniaui.eu",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Birdycom/OmniaUI.git",
-    "directory": "packages/vue"
-  },
-  "bugs": {
-    "url": "https://github.com/Birdycom/OmniaUI/issues"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "css",
-    "omniaui"
-  ],
-  "main": "./dist/omniaui-vue.js",
-  "module": "./dist/omniaui-vue.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/omniaui-vue.js"
-    },
-    "./src/*": "./src/*",
-    "./manifest.json": "./manifest.json",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "src",
-    "manifest.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "generate": "node scripts/generate-index.mjs",
-    "build": "npm run generate && vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
-    "typecheck": "vue-tsc --noEmit",
-    "test": "vitest run"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "jsdom": "^26.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^7.0.0",
-    "vitest": "^3.0.0",
-    "vue": "^3.5.0",
-    "vue-tsc": "^2.2.0"
-  },
-  "engines": {
-    "node": ">=22"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@birdycom/omniaui-vue",
+  "version": "0.11.2",
+  "description": "OmniaUI for Vue 3: one single-file component per OmniaUI component and block, rendering the exact markup of the CSS packages.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniaui.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaUI.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaUI/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "css",
+    "omniaui"
+  ],
+  "main": "./dist/omniaui-vue.js",
+  "module": "./dist/omniaui-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/omniaui-vue.js"
+    },
+    "./src/*": "./src/*",
+    "./manifest.json": "./manifest.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "manifest.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "generate": "node scripts/generate-index.mjs",
+    "build": "npm run generate && vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.0.0",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/blocks/OcBlockAboutTimeline.vue

@@ -1,44 +1,44 @@
-<!-- File: packages/vue/src/blocks/OcBlockAboutTimeline.vue | Map: props -> media (+ badge slot) -> copy (title, default slot) -> OcTimeline -->
-<script setup lang="ts">
-/**
- * About section: picture with a badge next to the company story and a year timeline.
- * `title` + `highlight` (gradient part), or the `title` slot. Slots: title, default (paragraphs), badge.
- * Classes: .oc-block-about (--reverse), -inner, -media, -badge, -copy, -title + .oc-timeline
- */
-import OcTimeline from '../components/OcTimeline.vue'
-import type { TimelineEntry } from '../components/OcTimeline.vue'
-import { useUid } from '../composables/useUid'
-
-withDefaults(
-  defineProps<{
-    eyebrow?: string
-    title?: string
-    highlight?: string
-    timeline?: TimelineEntry[]
-    image?: string
-    imageAlt?: string
-    reverse?: boolean
-  }>(),
-  { timeline: () => [], imageAlt: '' },
-)
-const titleId = useUid('oc-about-title')
-</script>
-
-<template>
-  <section :class="['oc-block-about', reverse && 'oc-block-about--reverse']" :aria-labelledby="titleId">
-    <div class="oc-block-about-inner">
-      <figure class="oc-block-about-media" :aria-hidden="image ? undefined : 'true'">
-        <img v-if="image" :src="image" :alt="imageAlt" loading="lazy" />
-        <span v-if="$slots.badge" class="oc-block-about-badge"><slot name="badge" /></span>
-      </figure>
-      <div class="oc-block-about-copy">
-        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-        <h2 :id="titleId" class="oc-block-about-title">
-          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></slot>
-        </h2>
-        <slot />
-        <OcTimeline v-if="timeline.length" :items="timeline" />
-      </div>
-    </div>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockAboutTimeline.vue | Map: props -> media (+ badge slot) -> copy (title, default slot) -> OcTimeline -->
+<script setup lang="ts">
+/**
+ * About section: picture with a badge next to the company story and a year timeline.
+ * `title` + `highlight` (gradient part), or the `title` slot. Slots: title, default (paragraphs), badge.
+ * Classes: .oc-block-about (--reverse), -inner, -media, -badge, -copy, -title + .oc-timeline
+ */
+import OcTimeline from '../components/OcTimeline.vue'
+import type { TimelineEntry } from '../components/OcTimeline.vue'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    timeline?: TimelineEntry[]
+    image?: string
+    imageAlt?: string
+    reverse?: boolean
+  }>(),
+  { timeline: () => [], imageAlt: '' },
+)
+const titleId = useUid('oc-about-title')
+</script>
+
+<template>
+  <section :class="['oc-block-about', reverse && 'oc-block-about--reverse']" :aria-labelledby="titleId">
+    <div class="oc-block-about-inner">
+      <figure class="oc-block-about-media" :aria-hidden="image ? undefined : 'true'">
+        <img v-if="image" :src="image" :alt="imageAlt" loading="lazy" />
+        <span v-if="$slots.badge" class="oc-block-about-badge"><slot name="badge" /></span>
+      </figure>
+      <div class="oc-block-about-copy">
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h2 :id="titleId" class="oc-block-about-title">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></slot>
+        </h2>
+        <slot />
+        <OcTimeline v-if="timeline.length" :items="timeline" />
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockAppHeader.vue

@@ -1,36 +1,36 @@
-<script setup lang="ts">
-/**
- * Top bar with sidebar toggle, module navigation and user actions.
- * `toggleFor` = id of the checkbox that collapses the sidebar (see OcBlockAppShell).
- * Slots: toggle (replaces the default hamburger label), nav (replaces the items), title, actions.
- * Classes: .oc-block-appbar, -nav, -actions, -title
- */
-import OcNavmenuList, { type NavmenuItem } from '../components/OcNavmenuList.vue'
-
-withDefaults(
-  defineProps<{
-    toggleFor?: string
-    toggleLabel?: string
-    navItems?: NavmenuItem[]
-    navLabel?: string
-    title?: string
-  }>(),
-  { toggleLabel: 'Toggle sidebar', navLabel: 'Module navigation' },
-)
-</script>
-
-<template>
-  <header class="oc-block-appbar">
-    <slot name="toggle">
-      <label v-if="toggleFor" class="oc-btn oc-btn--ghost oc-btn--icon" :for="toggleFor" :title="toggleLabel">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
-        <span class="oc-visually-hidden">{{ toggleLabel }}</span>
-      </label>
-    </slot>
-    <span v-if="title" class="oc-block-appbar-title">{{ title }}</span>
-    <nav v-if="navItems?.length || $slots.nav" class="oc-block-appbar-nav" :aria-label="navLabel">
-      <slot name="nav"><OcNavmenuList :items="navItems" /></slot>
-    </nav>
-    <div v-if="$slots.actions" class="oc-block-appbar-actions"><slot name="actions" /></div>
-  </header>
-</template>
+<script setup lang="ts">
+/**
+ * Top bar with sidebar toggle, module navigation and user actions.
+ * `toggleFor` = id of the checkbox that collapses the sidebar (see OcBlockAppShell).
+ * Slots: toggle (replaces the default hamburger label), nav (replaces the items), title, actions.
+ * Classes: .oc-block-appbar, -nav, -actions, -title
+ */
+import OcNavmenuList, { type NavmenuItem } from '../components/OcNavmenuList.vue'
+
+withDefaults(
+  defineProps<{
+    toggleFor?: string
+    toggleLabel?: string
+    navItems?: NavmenuItem[]
+    navLabel?: string
+    title?: string
+  }>(),
+  { toggleLabel: 'Toggle sidebar', navLabel: 'Module navigation' },
+)
+</script>
+
+<template>
+  <header class="oc-block-appbar">
+    <slot name="toggle">
+      <label v-if="toggleFor" class="oc-btn oc-btn--ghost oc-btn--icon" :for="toggleFor" :title="toggleLabel">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+        <span class="oc-visually-hidden">{{ toggleLabel }}</span>
+      </label>
+    </slot>
+    <span v-if="title" class="oc-block-appbar-title">{{ title }}</span>
+    <nav v-if="navItems?.length || $slots.nav" class="oc-block-appbar-nav" :aria-label="navLabel">
+      <slot name="nav"><OcNavmenuList :items="navItems" /></slot>
+    </nav>
+    <div v-if="$slots.actions" class="oc-block-appbar-actions"><slot name="actions" /></div>
+  </header>
+</template>

package/src/blocks/OcBlockAppShell.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-/**
- * Application layout: sidebar, header bar, breadcrumb strip and scrolling content.
- * v-model:collapsed drives the hidden checkbox (`toggleId`) that collapses the sidebar; point the header's
- * toggle label at the same id. `height` sets --oc-block-shell-height (default 100dvh).
- * Slots: sidebar (an OcSidebar), header (an OcBlockAppHeader), breadcrumbs, default (content).
- * Classes: .oc-block-shell, -toggle, -main, -breadcrumbs, -content
- */
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{ toggleId?: string; height?: string; toggleLabel?: string }>(), {
-  toggleId: 'oc-shell-toggle',
-  toggleLabel: 'Collapse sidebar',
-})
-const collapsed = defineModel<boolean>('collapsed', { default: false })
-const style = computed(() => (props.height ? { '--oc-block-shell-height': props.height } : undefined))
-</script>
-
-<template>
-  <div class="oc-block-shell" :style="style">
-    <input :id="toggleId" v-model="collapsed" class="oc-block-shell-toggle" type="checkbox" :aria-label="toggleLabel" />
-    <slot name="sidebar" />
-    <div class="oc-block-shell-main">
-      <slot name="header" />
-      <div v-if="$slots.breadcrumbs" class="oc-block-shell-breadcrumbs"><slot name="breadcrumbs" /></div>
-      <main class="oc-block-shell-content"><slot /></main>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Application layout: sidebar, header bar, breadcrumb strip and scrolling content.
+ * v-model:collapsed drives the hidden checkbox (`toggleId`) that collapses the sidebar; point the header's
+ * toggle label at the same id. `height` sets --oc-block-shell-height (default 100dvh).
+ * Slots: sidebar (an OcSidebar), header (an OcBlockAppHeader), breadcrumbs, default (content).
+ * Classes: .oc-block-shell, -toggle, -main, -breadcrumbs, -content
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ toggleId?: string; height?: string; toggleLabel?: string }>(), {
+  toggleId: 'oc-shell-toggle',
+  toggleLabel: 'Collapse sidebar',
+})
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+const style = computed(() => (props.height ? { '--oc-block-shell-height': props.height } : undefined))
+</script>
+
+<template>
+  <div class="oc-block-shell" :style="style">
+    <input :id="toggleId" v-model="collapsed" class="oc-block-shell-toggle" type="checkbox" :aria-label="toggleLabel" />
+    <slot name="sidebar" />
+    <div class="oc-block-shell-main">
+      <slot name="header" />
+      <div v-if="$slots.breadcrumbs" class="oc-block-shell-breadcrumbs"><slot name="breadcrumbs" /></div>
+      <main class="oc-block-shell-content"><slot /></main>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockAuth.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-/**
- * Sign-in card. Slots: default (fields, e.g. .oc-form-group blocks), actions (primary button),
- * social (alternative sign-in buttons, shown under the divider text), footer.
- * Classes: .oc-block-auth, -card, -divider, -footer, .oc-block-subtitle
- */
-defineProps<{ title?: string; subtitle?: string; divider?: string }>()
-</script>
-
-<template>
-  <div class="oc-block-auth">
-    <div class="oc-block-auth-card">
-      <h2 v-if="title">{{ title }}</h2>
-      <p v-if="subtitle" class="oc-block-subtitle">{{ subtitle }}</p>
-      <slot />
-      <slot name="actions" />
-      <template v-if="$slots.social">
-        <div v-if="divider" class="oc-block-auth-divider">{{ divider }}</div>
-        <slot name="social" />
-      </template>
-    </div>
-    <div v-if="$slots.footer" class="oc-block-auth-footer"><slot name="footer" /></div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Sign-in card. Slots: default (fields, e.g. .oc-form-group blocks), actions (primary button),
+ * social (alternative sign-in buttons, shown under the divider text), footer.
+ * Classes: .oc-block-auth, -card, -divider, -footer, .oc-block-subtitle
+ */
+defineProps<{ title?: string; subtitle?: string; divider?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-auth">
+    <div class="oc-block-auth-card">
+      <h2 v-if="title">{{ title }}</h2>
+      <p v-if="subtitle" class="oc-block-subtitle">{{ subtitle }}</p>
+      <slot />
+      <slot name="actions" />
+      <template v-if="$slots.social">
+        <div v-if="divider" class="oc-block-auth-divider">{{ divider }}</div>
+        <slot name="social" />
+      </template>
+    </div>
+    <div v-if="$slots.footer" class="oc-block-auth-footer"><slot name="footer" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockAuthSplit.vue

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-/**
- * Sign-in with a brand panel (logo, quote) next to the form. Emits `submit` (the native submit event).
- * Slots: logo, quote (or `quote` + `quoteAuthor` props), default (fields), row (remember me / forgot password),
- * submit (default: a full-width primary button with `submitLabel`), footer.
- * Classes: .oc-block-authsplit, -brand, -logo, -quote, -form, -card, -title, -subtitle, -fields, -row
- */
-withDefaults(
-  defineProps<{
-    title?: string
-    subtitle?: string
-    quote?: string
-    quoteAuthor?: string
-    submitLabel?: string
-    action?: string
-    method?: string
-  }>(),
-  { submitLabel: 'Sign in', action: '#', method: 'post' },
-)
-defineEmits<{ submit: [event: SubmitEvent] }>()
-</script>
-
-<template>
-  <div class="oc-block-authsplit">
-    <aside class="oc-block-authsplit-brand">
-      <a v-if="$slots.logo" class="oc-block-authsplit-logo" href="/"><slot name="logo" /></a>
-      <blockquote v-if="quote || $slots.quote" class="oc-block-authsplit-quote">
-        <slot name="quote">
-          <p>{{ quote }}</p>
-          <footer v-if="quoteAuthor">{{ quoteAuthor }}</footer>
-        </slot>
-      </blockquote>
-    </aside>
-    <div class="oc-block-authsplit-form">
-      <form class="oc-block-authsplit-card" :action="action" :method="method" @submit="$emit('submit', $event)">
-        <h1 v-if="title" class="oc-block-authsplit-title">{{ title }}</h1>
-        <p v-if="subtitle" class="oc-block-authsplit-subtitle">{{ subtitle }}</p>
-        <div class="oc-block-authsplit-fields">
-          <slot />
-          <div v-if="$slots.row" class="oc-block-authsplit-row"><slot name="row" /></div>
-          <slot name="submit"><button class="oc-btn" type="submit" style="width: 100%">{{ submitLabel }}</button></slot>
-        </div>
-        <slot name="footer" />
-      </form>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Sign-in with a brand panel (logo, quote) next to the form. Emits `submit` (the native submit event).
+ * Slots: logo, quote (or `quote` + `quoteAuthor` props), default (fields), row (remember me / forgot password),
+ * submit (default: a full-width primary button with `submitLabel`), footer.
+ * Classes: .oc-block-authsplit, -brand, -logo, -quote, -form, -card, -title, -subtitle, -fields, -row
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    quote?: string
+    quoteAuthor?: string
+    submitLabel?: string
+    action?: string
+    method?: string
+  }>(),
+  { submitLabel: 'Sign in', action: '#', method: 'post' },
+)
+defineEmits<{ submit: [event: SubmitEvent] }>()
+</script>
+
+<template>
+  <div class="oc-block-authsplit">
+    <aside class="oc-block-authsplit-brand">
+      <a v-if="$slots.logo" class="oc-block-authsplit-logo" href="/"><slot name="logo" /></a>
+      <blockquote v-if="quote || $slots.quote" class="oc-block-authsplit-quote">
+        <slot name="quote">
+          <p>{{ quote }}</p>
+          <footer v-if="quoteAuthor">{{ quoteAuthor }}</footer>
+        </slot>
+      </blockquote>
+    </aside>
+    <div class="oc-block-authsplit-form">
+      <form class="oc-block-authsplit-card" :action="action" :method="method" @submit="$emit('submit', $event)">
+        <h1 v-if="title" class="oc-block-authsplit-title">{{ title }}</h1>
+        <p v-if="subtitle" class="oc-block-authsplit-subtitle">{{ subtitle }}</p>
+        <div class="oc-block-authsplit-fields">
+          <slot />
+          <div v-if="$slots.row" class="oc-block-authsplit-row"><slot name="row" /></div>
+          <slot name="submit"><button class="oc-btn" type="submit" style="width: 100%">{{ submitLabel }}</button></slot>
+        </div>
+        <slot name="footer" />
+      </form>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockContactGrid.vue

@@ -1,53 +1,53 @@
-<!-- File: packages/vue/src/blocks/OcBlockContactGrid.vue | Map: props -> head -> grid -> cards (mark, title, lines) -->
-<script setup lang="ts">
-/**
- * Contact info cards (e-mail, phone, address, hours). A card with `address: true` renders as <address>.
- * Slot: default (own cards). Classes: .oc-block-contact (--plain), -head, -heading, -lead, -grid, -card, -title, -line
- */
-import { useUid } from '../composables/useUid'
-
-export interface ContactGridLine {
-  text: string
-  href?: string
-}
-export interface ContactGridCard {
-  title: string
-  lines: ContactGridLine[]
-  icon?: string
-  accent?: string
-  address?: boolean
-}
-withDefaults(
-  defineProps<{
-    eyebrow?: string
-    title?: string
-    lead?: string
-    cards?: ContactGridCard[]
-    plain?: boolean
-  }>(),
-  { cards: () => [] },
-)
-const titleId = useUid('oc-contact-title')
-</script>
-
-<template>
-  <section :class="['oc-block-contact', plain && 'oc-block-contact--plain']" :aria-labelledby="title ? titleId : undefined">
-    <div v-if="eyebrow || title || lead" class="oc-block-contact-head">
-      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-      <h2 v-if="title" :id="titleId" class="oc-block-contact-heading">{{ title }}</h2>
-      <p v-if="lead" class="oc-block-contact-lead">{{ lead }}</p>
-    </div>
-    <div class="oc-block-contact-grid">
-      <slot>
-        <component :is="card.address ? 'address' : 'article'" v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
-          <span v-if="card.icon" :class="['oc-product-mark oc-product-mark--sm oc-product-mark--soft', card.accent && `oc-accent--${card.accent}`]" aria-hidden="true">{{ card.icon }}</span>
-          <component :is="card.address ? 'span' : 'h3'" class="oc-block-contact-title">{{ card.title }}</component>
-          <template v-for="(line, j) in card.lines" :key="j">
-            <a v-if="line.href" class="oc-block-contact-line" :href="line.href">{{ line.text }}</a>
-            <component :is="card.address ? 'span' : 'p'" v-else class="oc-block-contact-line">{{ line.text }}</component>
-          </template>
-        </component>
-      </slot>
-    </div>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockContactGrid.vue | Map: props -> head -> grid -> cards (mark, title, lines) -->
+<script setup lang="ts">
+/**
+ * Contact info cards (e-mail, phone, address, hours). A card with `address: true` renders as <address>.
+ * Slot: default (own cards). Classes: .oc-block-contact (--plain), -head, -heading, -lead, -grid, -card, -title, -line
+ */
+import { useUid } from '../composables/useUid'
+
+export interface ContactGridLine {
+  text: string
+  href?: string
+}
+export interface ContactGridCard {
+  title: string
+  lines: ContactGridLine[]
+  icon?: string
+  accent?: string
+  address?: boolean
+}
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    lead?: string
+    cards?: ContactGridCard[]
+    plain?: boolean
+  }>(),
+  { cards: () => [] },
+)
+const titleId = useUid('oc-contact-title')
+</script>
+
+<template>
+  <section :class="['oc-block-contact', plain && 'oc-block-contact--plain']" :aria-labelledby="title ? titleId : undefined">
+    <div v-if="eyebrow || title || lead" class="oc-block-contact-head">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 v-if="title" :id="titleId" class="oc-block-contact-heading">{{ title }}</h2>
+      <p v-if="lead" class="oc-block-contact-lead">{{ lead }}</p>
+    </div>
+    <div class="oc-block-contact-grid">
+      <slot>
+        <component :is="card.address ? 'address' : 'article'" v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
+          <span v-if="card.icon" :class="['oc-product-mark oc-product-mark--sm oc-product-mark--soft', card.accent && `oc-accent--${card.accent}`]" aria-hidden="true">{{ card.icon }}</span>
+          <component :is="card.address ? 'span' : 'h3'" class="oc-block-contact-title">{{ card.title }}</component>
+          <template v-for="(line, j) in card.lines" :key="j">
+            <a v-if="line.href" class="oc-block-contact-line" :href="line.href">{{ line.text }}</a>
+            <component :is="card.address ? 'span' : 'p'" v-else class="oc-block-contact-line">{{ line.text }}</component>
+          </template>
+        </component>
+      </slot>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockCta.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-/** Call to action banner. Slot `actions` holds the buttons (inside .oc-block-hero-actions). */
-defineProps<{ title?: string; text?: string }>()
-</script>
-
-<template>
-  <div class="oc-block-cta">
-    <h2 v-if="title">{{ title }}</h2>
-    <p v-if="text">{{ text }}</p>
-    <div v-if="$slots.actions" class="oc-block-hero-actions"><slot name="actions" /></div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Call to action banner. Slot `actions` holds the buttons (inside .oc-block-hero-actions). */
+defineProps<{ title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-cta">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-block-hero-actions"><slot name="actions" /></div>
+  </div>
+</template>