@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/blocks/OcBlockDataTable.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-/**
- * Card with title, actions, toolbar, table, bulk bar and footer. Put an <OcTable> in the default slot.
- * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills, columns popover),
- * bulk (selection bar, shown when `selectedCount` > 0), default (table), footer (.oc-table-footer: entries text, page size, pagination).
- * Classes: .oc-card.oc-block-datatable, -head, -title, -description, -body, -bulk, .oc-table-toolbar, .oc-table-footer
- */
-defineProps<{ title?: string; description?: string; selectedCount?: number }>()
-</script>
-
-<template>
-  <section class="oc-card oc-block-datatable">
-    <header v-if="title || description || $slots.actions" class="oc-block-datatable-head">
-      <div>
-        <h2 v-if="title" class="oc-block-datatable-title">{{ title }}</h2>
-        <p v-if="description" class="oc-block-datatable-description">{{ description }}</p>
-      </div>
-      <div v-if="$slots.actions"><slot name="actions" /></div>
-    </header>
-    <div class="oc-block-datatable-body">
-      <div v-if="$slots.toolbar" class="oc-table-toolbar"><slot name="toolbar" /></div>
-      <div v-if="$slots.bulk && selectedCount" class="oc-block-datatable-bulk"><slot name="bulk" :count="selectedCount" /></div>
-      <slot />
-      <div v-if="$slots.footer" class="oc-table-footer"><slot name="footer" /></div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Card with title, actions, toolbar, table, bulk bar and footer. Put an <OcTable> in the default slot.
+ * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills, columns popover),
+ * bulk (selection bar, shown when `selectedCount` > 0), default (table), footer (.oc-table-footer: entries text, page size, pagination).
+ * Classes: .oc-card.oc-block-datatable, -head, -title, -description, -body, -bulk, .oc-table-toolbar, .oc-table-footer
+ */
+defineProps<{ title?: string; description?: string; selectedCount?: number }>()
+</script>
+
+<template>
+  <section class="oc-card oc-block-datatable">
+    <header v-if="title || description || $slots.actions" class="oc-block-datatable-head">
+      <div>
+        <h2 v-if="title" class="oc-block-datatable-title">{{ title }}</h2>
+        <p v-if="description" class="oc-block-datatable-description">{{ description }}</p>
+      </div>
+      <div v-if="$slots.actions"><slot name="actions" /></div>
+    </header>
+    <div class="oc-block-datatable-body">
+      <div v-if="$slots.toolbar" class="oc-table-toolbar"><slot name="toolbar" /></div>
+      <div v-if="$slots.bulk && selectedCount" class="oc-block-datatable-bulk"><slot name="bulk" :count="selectedCount" /></div>
+      <slot />
+      <div v-if="$slots.footer" class="oc-table-footer"><slot name="footer" /></div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockFaq.vue

@@ -1,49 +1,49 @@
-<!-- File: packages/vue/src/blocks/OcBlockFaq.vue | Map: props -> section.oc-block-faq -> head -> accordion (details name) -> more slot -->
-<script setup lang="ts">
-/**
- * FAQ section: title + exclusive accordion on native <details name> (no JavaScript).
- * Slots: lead, default (own details items), more. Classes: .oc-block-faq (--split), -inner, -head, -title, -lead, -list, -more
- */
-import { useUid } from '../composables/useUid'
-
-export interface FaqItem {
-  question: string
-  answer: string
-}
-const props = withDefaults(
-  defineProps<{
-    eyebrow?: string
-    title: string
-    lead?: string
-    items?: FaqItem[]
-    openIndex?: number
-    split?: boolean
-    name?: string
-  }>(),
-  { items: () => [], openIndex: 0 },
-)
-const titleId = useUid('oc-faq-title')
-const autoGroup = useUid('oc-faq')
-const group = props.name ?? autoGroup
-</script>
-
-<template>
-  <section :class="['oc-block-faq', split && 'oc-block-faq--split']" :aria-labelledby="titleId">
-    <div class="oc-block-faq-inner">
-      <div class="oc-block-faq-head">
-        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-        <h2 :id="titleId" class="oc-block-faq-title">{{ title }}</h2>
-        <p v-if="lead || $slots.lead" class="oc-block-faq-lead"><slot name="lead">{{ lead }}</slot></p>
-      </div>
-      <div class="oc-accordion oc-block-faq-list">
-        <slot>
-          <details v-for="(item, i) in items" :key="i" class="oc-accordion-item" :name="group" :open="i === openIndex">
-            <summary class="oc-accordion-trigger">{{ item.question }}</summary>
-            <div class="oc-accordion-content">{{ item.answer }}</div>
-          </details>
-        </slot>
-      </div>
-      <p v-if="$slots.more" class="oc-block-faq-more"><slot name="more" /></p>
-    </div>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockFaq.vue | Map: props -> section.oc-block-faq -> head -> accordion (details name) -> more slot -->
+<script setup lang="ts">
+/**
+ * FAQ section: title + exclusive accordion on native <details name> (no JavaScript).
+ * Slots: lead, default (own details items), more. Classes: .oc-block-faq (--split), -inner, -head, -title, -lead, -list, -more
+ */
+import { useUid } from '../composables/useUid'
+
+export interface FaqItem {
+  question: string
+  answer: string
+}
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title: string
+    lead?: string
+    items?: FaqItem[]
+    openIndex?: number
+    split?: boolean
+    name?: string
+  }>(),
+  { items: () => [], openIndex: 0 },
+)
+const titleId = useUid('oc-faq-title')
+const autoGroup = useUid('oc-faq')
+const group = props.name ?? autoGroup
+</script>
+
+<template>
+  <section :class="['oc-block-faq', split && 'oc-block-faq--split']" :aria-labelledby="titleId">
+    <div class="oc-block-faq-inner">
+      <div class="oc-block-faq-head">
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h2 :id="titleId" class="oc-block-faq-title">{{ title }}</h2>
+        <p v-if="lead || $slots.lead" class="oc-block-faq-lead"><slot name="lead">{{ lead }}</slot></p>
+      </div>
+      <div class="oc-accordion oc-block-faq-list">
+        <slot>
+          <details v-for="(item, i) in items" :key="i" class="oc-accordion-item" :name="group" :open="i === openIndex">
+            <summary class="oc-accordion-trigger">{{ item.question }}</summary>
+            <div class="oc-accordion-content">{{ item.answer }}</div>
+          </details>
+        </slot>
+      </div>
+      <p v-if="$slots.more" class="oc-block-faq-more"><slot name="more" /></p>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockFeatures.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-/** Feature grid with icons. Slot `icon` (scoped: { item }) overrides the glyph. Classes: .oc-block-features, -grid, .oc-block-feature-card, -icon */
-export interface FeatureItem {
-  icon?: string
-  title: string
-  text: string
-}
-defineProps<{ title?: string; description?: string; items: FeatureItem[] }>()
-</script>
-
-<template>
-  <div class="oc-block-features">
-    <h2 v-if="title">{{ title }}</h2>
-    <p v-if="description">{{ description }}</p>
-    <div class="oc-block-features-grid">
-      <div v-for="(item, i) in items" :key="i" class="oc-block-feature-card">
-        <div class="oc-block-feature-icon"><slot name="icon" :item="item">{{ item.icon }}</slot></div>
-        <h3>{{ item.title }}</h3>
-        <p>{{ item.text }}</p>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Feature grid with icons. Slot `icon` (scoped: { item }) overrides the glyph. Classes: .oc-block-features, -grid, .oc-block-feature-card, -icon */
+export interface FeatureItem {
+  icon?: string
+  title: string
+  text: string
+}
+defineProps<{ title?: string; description?: string; items: FeatureItem[] }>()
+</script>
+
+<template>
+  <div class="oc-block-features">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="description">{{ description }}</p>
+    <div class="oc-block-features-grid">
+      <div v-for="(item, i) in items" :key="i" class="oc-block-feature-card">
+        <div class="oc-block-feature-icon"><slot name="icon" :item="item">{{ item.icon }}</slot></div>
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockFooter.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-/** Multi-column site footer. Slots: bottom-start, bottom-end (default text via `copyright` / `credit`). Classes: .oc-block-footer, -grid, -col, -bottom */
-export interface FooterColumn {
-  title: string
-  links: { label: string; href: string }[]
-}
-defineProps<{ columns: FooterColumn[]; copyright?: string; credit?: string }>()
-</script>
-
-<template>
-  <div class="oc-block-footer">
-    <div class="oc-block-footer-grid">
-      <div v-for="col in columns" :key="col.title" class="oc-block-footer-col">
-        <h4>{{ col.title }}</h4>
-        <ul>
-          <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
-        </ul>
-      </div>
-    </div>
-    <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-block-footer-bottom">
-      <span><slot name="bottom-start">{{ copyright }}</slot></span>
-      <span><slot name="bottom-end">{{ credit }}</slot></span>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Multi-column site footer. Slots: bottom-start, bottom-end (default text via `copyright` / `credit`). Classes: .oc-block-footer, -grid, -col, -bottom */
+export interface FooterColumn {
+  title: string
+  links: { label: string; href: string }[]
+}
+defineProps<{ columns: FooterColumn[]; copyright?: string; credit?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-footer">
+    <div class="oc-block-footer-grid">
+      <div v-for="col in columns" :key="col.title" class="oc-block-footer-col">
+        <h4>{{ col.title }}</h4>
+        <ul>
+          <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
+        </ul>
+      </div>
+    </div>
+    <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-block-footer-bottom">
+      <span><slot name="bottom-start">{{ copyright }}</slot></span>
+      <span><slot name="bottom-end">{{ credit }}</slot></span>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockFormPage.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-/**
- * Collapsible form sections with a sticky action bar. Default slot = sections (OcCollapsible containing a
- * `<div class="oc-block-formpage-grid">` for the two-column field grid). Emits `submit`.
- * Slot `actions` replaces the default Cancel / Save buttons. Classes: .oc-block-formpage, -grid, -actions
- */
-withDefaults(
-  defineProps<{ cancelLabel?: string; submitLabel?: string; action?: string; method?: string }>(),
-  { cancelLabel: 'Cancel', submitLabel: 'Save', action: '#', method: 'post' },
-)
-defineEmits<{ submit: [event: SubmitEvent]; cancel: [] }>()
-</script>
-
-<template>
-  <form class="oc-block-formpage" :action="action" :method="method" @submit="$emit('submit', $event)">
-    <slot />
-    <div class="oc-block-formpage-actions">
-      <slot name="actions">
-        <button class="oc-btn oc-btn--outline" type="button" @click="$emit('cancel')">{{ cancelLabel }}</button>
-        <button class="oc-btn" type="submit">{{ submitLabel }}</button>
-      </slot>
-    </div>
-  </form>
-</template>
+<script setup lang="ts">
+/**
+ * Collapsible form sections with a sticky action bar. Default slot = sections (OcCollapsible containing a
+ * `<div class="oc-block-formpage-grid">` for the two-column field grid). Emits `submit`.
+ * Slot `actions` replaces the default Cancel / Save buttons. Classes: .oc-block-formpage, -grid, -actions
+ */
+withDefaults(
+  defineProps<{ cancelLabel?: string; submitLabel?: string; action?: string; method?: string }>(),
+  { cancelLabel: 'Cancel', submitLabel: 'Save', action: '#', method: 'post' },
+)
+defineEmits<{ submit: [event: SubmitEvent]; cancel: [] }>()
+</script>
+
+<template>
+  <form class="oc-block-formpage" :action="action" :method="method" @submit="$emit('submit', $event)">
+    <slot />
+    <div class="oc-block-formpage-actions">
+      <slot name="actions">
+        <button class="oc-btn oc-btn--outline" type="button" @click="$emit('cancel')">{{ cancelLabel }}</button>
+        <button class="oc-btn" type="submit">{{ submitLabel }}</button>
+      </slot>
+    </div>
+  </form>
+</template>

package/src/blocks/OcBlockHero.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-/** Centered hero with badge, headline, text and actions. Classes: .oc-block-hero, -badge, -actions */
-defineProps<{ badge?: string; title?: string; text?: string }>()
-</script>
-
-<template>
-  <div class="oc-block-hero">
-    <span v-if="badge" class="oc-block-hero-badge">{{ badge }}</span>
-    <h1 v-if="title">{{ title }}</h1>
-    <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">
+/** Centered hero with badge, headline, text and actions. Classes: .oc-block-hero, -badge, -actions */
+defineProps<{ badge?: string; title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-hero">
+    <span v-if="badge" class="oc-block-hero-badge">{{ badge }}</span>
+    <h1 v-if="title">{{ title }}</h1>
+    <p v-if="text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-block-hero-actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockHeroCode.vue

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-/**
- * Landing hero: eyebrow, display title with a gradient word, lead, buttons and a code window with floating icon tiles.
- * `title` + `highlight` (gradient word) + `titleEnd`, or the `title` slot. Slots: lead, actions, visual (replaces the code window).
- * Classes: .oc-section-pad, .oc-container, .oc-split, .oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-code-window
- */
-defineProps<{
-  eyebrow?: string
-  title?: string
-  highlight?: string
-  titleEnd?: string
-  lead?: string
-  code?: string
-  codeTitle?: string
-}>()
-</script>
-
-<template>
-  <section class="oc-section-pad">
-    <div class="oc-container oc-split">
-      <div>
-        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-        <h1 class="oc-display">
-          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
-        </h1>
-        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
-        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
-      </div>
-      <div class="relative p-2">
-        <slot name="visual">
-          <span class="oc-icon-tile oc-icon-tile--float oc-accent--green absolute" style="inset: -0.5rem auto auto 8%" aria-hidden="true">&#9670;</span>
-          <span class="oc-icon-tile oc-icon-tile--float oc-accent--violet absolute" style="inset: 0 6% auto auto; animation-delay: -2s" aria-hidden="true">&#9673;</span>
-          <span class="oc-icon-tile oc-icon-tile--float oc-accent--orange absolute" style="inset: auto 10% -0.5rem auto; animation-delay: -4s" aria-hidden="true">&#9650;</span>
-          <div class="oc-code-window">
-            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
-            <pre class="oc-code-window__body">{{ code }}</pre>
-          </div>
-        </slot>
-      </div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Landing hero: eyebrow, display title with a gradient word, lead, buttons and a code window with floating icon tiles.
+ * `title` + `highlight` (gradient word) + `titleEnd`, or the `title` slot. Slots: lead, actions, visual (replaces the code window).
+ * Classes: .oc-section-pad, .oc-container, .oc-split, .oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-code-window
+ */
+defineProps<{
+  eyebrow?: string
+  title?: string
+  highlight?: string
+  titleEnd?: string
+  lead?: string
+  code?: string
+  codeTitle?: string
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container oc-split">
+      <div>
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h1 class="oc-display">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
+        </h1>
+        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
+        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
+      </div>
+      <div class="relative p-2">
+        <slot name="visual">
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--green absolute" style="inset: -0.5rem auto auto 8%" aria-hidden="true">&#9670;</span>
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--violet absolute" style="inset: 0 6% auto auto; animation-delay: -2s" aria-hidden="true">&#9673;</span>
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--orange absolute" style="inset: auto 10% -0.5rem auto; animation-delay: -4s" aria-hidden="true">&#9650;</span>
+          <div class="oc-code-window">
+            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
+            <pre class="oc-code-window__body">{{ code }}</pre>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockHeroOrbit.vue

@@ -1,69 +1,69 @@
-<!-- File: packages/vue/src/blocks/OcBlockHeroOrbit.vue | Map: props + default marks -> copy -> visual (ring with marks + center slot / code window) -->
-<script setup lang="ts">
-/**
- * Hero with a code window and product marks that orbit around it (reduced motion: they stand still).
- * `title` + `highlight` + `titleEnd`, or the `title` slot. Slots: lead, actions, center (replaces the code window;
- * give it class="oc-block-orbit-center"). Classes: .oc-block-orbit-visual, -ring, -mark (--oc-orbit-angle), -center
- */
-import { computed } from 'vue'
-
-export interface HeroOrbitMark {
-  glyph: string
-  accent: string
-}
-const props = withDefaults(
-  defineProps<{
-    eyebrow?: string
-    title?: string
-    highlight?: string
-    titleEnd?: string
-    lead?: string
-    code?: string
-    codeTitle?: string
-    marks?: HeroOrbitMark[]
-    duration?: string
-  }>(),
-  {
-    code: '',
-    marks: () => [
-      { glyph: '◆', accent: 'green' },
-      { glyph: '◉', accent: 'violet' },
-      { glyph: '▲', accent: 'orange' },
-      { glyph: '★', accent: 'cyan' },
-      { glyph: '♥', accent: 'red' },
-      { glyph: '☀', accent: 'yellow' },
-    ],
-  },
-)
-// Spread the marks evenly over the ring.
-const angle = (i: number) => `--oc-orbit-angle: ${(360 / props.marks.length) * i}deg`
-const visualStyle = computed(() => (props.duration ? `--oc-orbit-duration: ${props.duration}` : undefined))
-</script>
-
-<template>
-  <section class="oc-block-orbit oc-section-pad">
-    <div class="oc-container oc-split">
-      <div>
-        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-        <h1 class="oc-display">
-          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
-        </h1>
-        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
-        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
-      </div>
-      <div class="oc-block-orbit-visual" :style="visualStyle">
-        <div class="oc-block-orbit-ring" aria-hidden="true">
-          <span v-for="(mark, i) in marks" :key="i" class="oc-block-orbit-mark" :style="angle(i)">
-            <span :class="['oc-product-mark oc-product-mark--sm', `oc-accent--${mark.accent}`]">{{ mark.glyph }}</span>
-          </span>
-        </div>
-        <slot name="center">
-          <div class="oc-code-window oc-block-orbit-center">
-            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
-            <pre class="oc-code-window__body">{{ code }}</pre>
-          </div>
-        </slot>
-      </div>
-    </div>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockHeroOrbit.vue | Map: props + default marks -> copy -> visual (ring with marks + center slot / code window) -->
+<script setup lang="ts">
+/**
+ * Hero with a code window and product marks that orbit around it (reduced motion: they stand still).
+ * `title` + `highlight` + `titleEnd`, or the `title` slot. Slots: lead, actions, center (replaces the code window;
+ * give it class="oc-block-orbit-center"). Classes: .oc-block-orbit-visual, -ring, -mark (--oc-orbit-angle), -center
+ */
+import { computed } from 'vue'
+
+export interface HeroOrbitMark {
+  glyph: string
+  accent: string
+}
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    titleEnd?: string
+    lead?: string
+    code?: string
+    codeTitle?: string
+    marks?: HeroOrbitMark[]
+    duration?: string
+  }>(),
+  {
+    code: '',
+    marks: () => [
+      { glyph: '◆', accent: 'green' },
+      { glyph: '◉', accent: 'violet' },
+      { glyph: '▲', accent: 'orange' },
+      { glyph: '★', accent: 'cyan' },
+      { glyph: '♥', accent: 'red' },
+      { glyph: '☀', accent: 'yellow' },
+    ],
+  },
+)
+// Spread the marks evenly over the ring.
+const angle = (i: number) => `--oc-orbit-angle: ${(360 / props.marks.length) * i}deg`
+const visualStyle = computed(() => (props.duration ? `--oc-orbit-duration: ${props.duration}` : undefined))
+</script>
+
+<template>
+  <section class="oc-block-orbit oc-section-pad">
+    <div class="oc-container oc-split">
+      <div>
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h1 class="oc-display">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
+        </h1>
+        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
+        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
+      </div>
+      <div class="oc-block-orbit-visual" :style="visualStyle">
+        <div class="oc-block-orbit-ring" aria-hidden="true">
+          <span v-for="(mark, i) in marks" :key="i" class="oc-block-orbit-mark" :style="angle(i)">
+            <span :class="['oc-product-mark oc-product-mark--sm', `oc-accent--${mark.accent}`]">{{ mark.glyph }}</span>
+          </span>
+        </div>
+        <slot name="center">
+          <div class="oc-code-window oc-block-orbit-center">
+            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
+            <pre class="oc-code-window__body">{{ code }}</pre>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockHeroSplit.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-/** Hero with text left and visual right. Slots: actions, visual. Classes: .oc-block-hero-split, -actions, -visual */
-defineProps<{ title?: string; text?: string }>()
-</script>
-
-<template>
-  <div class="oc-block-hero-split">
-    <div>
-      <h1 v-if="title">{{ title }}</h1>
-      <p v-if="text">{{ text }}</p>
-      <div v-if="$slots.actions" class="oc-block-hero-actions justify-start"><slot name="actions" /></div>
-    </div>
-    <div class="oc-block-hero-visual"><slot name="visual" /></div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Hero with text left and visual right. Slots: actions, visual. Classes: .oc-block-hero-split, -actions, -visual */
+defineProps<{ title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-hero-split">
+    <div>
+      <h1 v-if="title">{{ title }}</h1>
+      <p v-if="text">{{ text }}</p>
+      <div v-if="$slots.actions" class="oc-block-hero-actions justify-start"><slot name="actions" /></div>
+    </div>
+    <div class="oc-block-hero-visual"><slot name="visual" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockModuleHeader.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-/**
- * Page header with icon tile, title, intro, meta badges and an action row.
- * Slots: icon, meta (badges), actions. Classes: .oc-block-modulehead, -band, -icon, -body, -title, -intro, -meta, -actions
- */
-defineProps<{ title: string; intro?: string }>()
-</script>
-
-<template>
-  <header class="oc-block-modulehead">
-    <div class="oc-block-modulehead-band">
-      <span v-if="$slots.icon" class="oc-block-modulehead-icon" aria-hidden="true"><slot name="icon" /></span>
-      <div class="oc-block-modulehead-body">
-        <h1 class="oc-block-modulehead-title">{{ title }}</h1>
-        <p v-if="intro" class="oc-block-modulehead-intro">{{ intro }}</p>
-        <div v-if="$slots.meta" class="oc-block-modulehead-meta"><slot name="meta" /></div>
-      </div>
-    </div>
-    <div v-if="$slots.actions" class="oc-block-modulehead-actions"><slot name="actions" /></div>
-  </header>
-</template>
+<script setup lang="ts">
+/**
+ * Page header with icon tile, title, intro, meta badges and an action row.
+ * Slots: icon, meta (badges), actions. Classes: .oc-block-modulehead, -band, -icon, -body, -title, -intro, -meta, -actions
+ */
+defineProps<{ title: string; intro?: string }>()
+</script>
+
+<template>
+  <header class="oc-block-modulehead">
+    <div class="oc-block-modulehead-band">
+      <span v-if="$slots.icon" class="oc-block-modulehead-icon" aria-hidden="true"><slot name="icon" /></span>
+      <div class="oc-block-modulehead-body">
+        <h1 class="oc-block-modulehead-title">{{ title }}</h1>
+        <p v-if="intro" class="oc-block-modulehead-intro">{{ intro }}</p>
+        <div v-if="$slots.meta" class="oc-block-modulehead-meta"><slot name="meta" /></div>
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="oc-block-modulehead-actions"><slot name="actions" /></div>
+  </header>
+</template>