@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcPopover.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-/**
- * Floating panel on the popover attribute + anchor positioning. Trigger = `trigger` slot (scoped: { id })
- * or a default outline button with `label`. Default slot = panel content. Classes: .oc-popover(--sm/--lg),
- * -title, -text. Attributes land on the panel.
- */
-import { useAttrs } from 'vue'
-import { useUid } from '../composables/useUid'
-
-defineOptions({ inheritAttrs: false })
-withDefaults(defineProps<{ label?: string; title?: string; text?: string; size?: 'sm' | 'md' | 'lg' }>(), { size: 'md' })
-const attrs = useAttrs()
-const id = (attrs.id as string | undefined) ?? useUid('oc-popover')
-</script>
-
-<template>
-  <slot name="trigger" :id="id">
-    <button class="oc-btn oc-btn--outline" type="button" :popovertarget="id">{{ label }}</button>
-  </slot>
-  <div v-bind="attrs" :id="id" :class="['oc-popover', size !== 'md' && `oc-popover--${size}`]" popover>
-    <h3 v-if="title" class="oc-popover-title">{{ title }}</h3>
-    <p v-if="text" class="oc-popover-text">{{ text }}</p>
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Floating panel on the popover attribute + anchor positioning. Trigger = `trigger` slot (scoped: { id })
+ * or a default outline button with `label`. Default slot = panel content. Classes: .oc-popover(--sm/--lg),
+ * -title, -text. Attributes land on the panel.
+ */
+import { useAttrs } from 'vue'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+withDefaults(defineProps<{ label?: string; title?: string; text?: string; size?: 'sm' | 'md' | 'lg' }>(), { size: 'md' })
+const attrs = useAttrs()
+const id = (attrs.id as string | undefined) ?? useUid('oc-popover')
+</script>
+
+<template>
+  <slot name="trigger" :id="id">
+    <button class="oc-btn oc-btn--outline" type="button" :popovertarget="id">{{ label }}</button>
+  </slot>
+  <div v-bind="attrs" :id="id" :class="['oc-popover', size !== 'md' && `oc-popover--${size}`]" popover>
+    <h3 v-if="title" class="oc-popover-title">{{ title }}</h3>
+    <p v-if="text" class="oc-popover-text">{{ text }}</p>
+    <slot />
+  </div>
+</template>

package/src/components/OcPriceCard.vue

@@ -1,69 +1,69 @@
-<!-- File: packages/vue/src/components/OcPriceCard.vue | Map: props -> head -> toggle (radios) -> monthly / yearly price -> features -> cta slot -->
-<script setup lang="ts">
-/**
- * Plan card with a CSS-only monthly / yearly switch (radio + :has). Slots: cta, features (replaces the list items).
- * Classes: .oc-price-card (--featured), __head, __name, __discount, __desc, __toggle, __price(--monthly/--yearly),
- * __amount, __period, __was, __note, __features, __feature(--excluded), __cta
- */
-import { useUid } from '../composables/useUid'
-
-export interface PriceCardFeature {
-  label: string
-  excluded?: boolean
-}
-export interface PriceCardPrice {
-  amount: string
-  period?: string
-  was?: string
-  note?: string
-}
-withDefaults(
-  defineProps<{
-    name: string
-    description?: string
-    discount?: string
-    monthly: PriceCardPrice
-    yearly?: PriceCardPrice
-    defaultPeriod?: 'monthly' | 'yearly'
-    features?: PriceCardFeature[]
-    featured?: boolean
-    monthlyLabel?: string
-    yearlyLabel?: string
-  }>(),
-  { defaultPeriod: 'monthly', features: () => [], monthlyLabel: 'Monthly', yearlyLabel: 'Yearly' },
-)
-// Every card needs its own radio group name.
-const group = useUid('oc-price')
-</script>
-
-<template>
-  <article :class="['oc-price-card', featured && 'oc-price-card--featured']">
-    <div class="oc-price-card__head">
-      <h3 class="oc-price-card__name">{{ name }}</h3>
-      <span v-if="discount" class="oc-price-card__discount">{{ discount }}</span>
-    </div>
-    <p v-if="description" class="oc-price-card__desc">{{ description }}</p>
-    <div v-if="yearly" class="oc-segmented oc-price-card__toggle" role="radiogroup" aria-label="Billing period">
-      <label class="oc-segmented-item"><input type="radio" :name="group" value="monthly" :checked="defaultPeriod === 'monthly'" /> {{ monthlyLabel }}</label>
-      <label class="oc-segmented-item"><input type="radio" :name="group" value="yearly" :checked="defaultPeriod === 'yearly'" /> {{ yearlyLabel }}</label>
-    </div>
-    <p class="oc-price-card__price oc-price-card__price--monthly">
-      <span class="oc-price-card__amount">{{ monthly.amount }}</span>
-      <span v-if="monthly.period" class="oc-price-card__period">{{ monthly.period }}</span>
-      <s v-if="monthly.was" class="oc-price-card__was">{{ monthly.was }}</s>
-      <span v-if="monthly.note" class="oc-price-card__note">{{ monthly.note }}</span>
-    </p>
-    <p v-if="yearly" class="oc-price-card__price oc-price-card__price--yearly">
-      <span class="oc-price-card__amount">{{ yearly.amount }}</span>
-      <span v-if="yearly.period" class="oc-price-card__period">{{ yearly.period }}</span>
-      <s v-if="yearly.was" class="oc-price-card__was">{{ yearly.was }}</s>
-      <span v-if="yearly.note" class="oc-price-card__note">{{ yearly.note }}</span>
-    </p>
-    <ul v-if="features.length || $slots.features" class="oc-price-card__features">
-      <slot name="features">
-        <li v-for="(f, i) in features" :key="i" :class="['oc-price-card__feature', f.excluded && 'oc-price-card__feature--excluded']">{{ f.label }}</li>
-      </slot>
-    </ul>
-    <slot name="cta" />
-  </article>
-</template>
+<!-- File: packages/vue/src/components/OcPriceCard.vue | Map: props -> head -> toggle (radios) -> monthly / yearly price -> features -> cta slot -->
+<script setup lang="ts">
+/**
+ * Plan card with a CSS-only monthly / yearly switch (radio + :has). Slots: cta, features (replaces the list items).
+ * Classes: .oc-price-card (--featured), __head, __name, __discount, __desc, __toggle, __price(--monthly/--yearly),
+ * __amount, __period, __was, __note, __features, __feature(--excluded), __cta
+ */
+import { useUid } from '../composables/useUid'
+
+export interface PriceCardFeature {
+  label: string
+  excluded?: boolean
+}
+export interface PriceCardPrice {
+  amount: string
+  period?: string
+  was?: string
+  note?: string
+}
+withDefaults(
+  defineProps<{
+    name: string
+    description?: string
+    discount?: string
+    monthly: PriceCardPrice
+    yearly?: PriceCardPrice
+    defaultPeriod?: 'monthly' | 'yearly'
+    features?: PriceCardFeature[]
+    featured?: boolean
+    monthlyLabel?: string
+    yearlyLabel?: string
+  }>(),
+  { defaultPeriod: 'monthly', features: () => [], monthlyLabel: 'Monthly', yearlyLabel: 'Yearly' },
+)
+// Every card needs its own radio group name.
+const group = useUid('oc-price')
+</script>
+
+<template>
+  <article :class="['oc-price-card', featured && 'oc-price-card--featured']">
+    <div class="oc-price-card__head">
+      <h3 class="oc-price-card__name">{{ name }}</h3>
+      <span v-if="discount" class="oc-price-card__discount">{{ discount }}</span>
+    </div>
+    <p v-if="description" class="oc-price-card__desc">{{ description }}</p>
+    <div v-if="yearly" class="oc-segmented oc-price-card__toggle" role="radiogroup" aria-label="Billing period">
+      <label class="oc-segmented-item"><input type="radio" :name="group" value="monthly" :checked="defaultPeriod === 'monthly'" /> {{ monthlyLabel }}</label>
+      <label class="oc-segmented-item"><input type="radio" :name="group" value="yearly" :checked="defaultPeriod === 'yearly'" /> {{ yearlyLabel }}</label>
+    </div>
+    <p class="oc-price-card__price oc-price-card__price--monthly">
+      <span class="oc-price-card__amount">{{ monthly.amount }}</span>
+      <span v-if="monthly.period" class="oc-price-card__period">{{ monthly.period }}</span>
+      <s v-if="monthly.was" class="oc-price-card__was">{{ monthly.was }}</s>
+      <span v-if="monthly.note" class="oc-price-card__note">{{ monthly.note }}</span>
+    </p>
+    <p v-if="yearly" class="oc-price-card__price oc-price-card__price--yearly">
+      <span class="oc-price-card__amount">{{ yearly.amount }}</span>
+      <span v-if="yearly.period" class="oc-price-card__period">{{ yearly.period }}</span>
+      <s v-if="yearly.was" class="oc-price-card__was">{{ yearly.was }}</s>
+      <span v-if="yearly.note" class="oc-price-card__note">{{ yearly.note }}</span>
+    </p>
+    <ul v-if="features.length || $slots.features" class="oc-price-card__features">
+      <slot name="features">
+        <li v-for="(f, i) in features" :key="i" :class="['oc-price-card__feature', f.excluded && 'oc-price-card__feature--excluded']">{{ f.label }}</li>
+      </slot>
+    </ul>
+    <slot name="cta" />
+  </article>
+</template>

package/src/components/OcProductMark.vue

@@ -1,31 +1,31 @@
-<!-- File: packages/vue/src/components/OcProductMark.vue | Map: props (size, accent, soft, glow, cover) -> span.oc-product-mark -->
-<script setup lang="ts">
-/**
- * Squircle app-icon tile in the accent gradient. Slot: glyph, <img alt=""> or SVG. Decorative (aria-hidden).
- * Classes: .oc-product-mark (--sm, --lg, --xl, --soft, --glow, --cover) + .oc-accent--*
- */
-withDefaults(
-  defineProps<{
-    size?: 'sm' | 'default' | 'lg' | 'xl'
-    accent?: 'blue' | 'cyan' | 'green' | 'orange' | 'red' | 'violet' | 'yellow'
-    soft?: boolean
-    glow?: boolean
-    cover?: boolean
-  }>(),
-  { size: 'default' },
-)
-</script>
-
-<template>
-  <span
-    :class="[
-      'oc-product-mark',
-      size !== 'default' && `oc-product-mark--${size}`,
-      soft && 'oc-product-mark--soft',
-      glow && 'oc-product-mark--glow',
-      cover && 'oc-product-mark--cover',
-      accent && `oc-accent--${accent}`,
-    ]"
-    aria-hidden="true"
-  ><slot /></span>
-</template>
+<!-- File: packages/vue/src/components/OcProductMark.vue | Map: props (size, accent, soft, glow, cover) -> span.oc-product-mark -->
+<script setup lang="ts">
+/**
+ * Squircle app-icon tile in the accent gradient. Slot: glyph, <img alt=""> or SVG. Decorative (aria-hidden).
+ * Classes: .oc-product-mark (--sm, --lg, --xl, --soft, --glow, --cover) + .oc-accent--*
+ */
+withDefaults(
+  defineProps<{
+    size?: 'sm' | 'default' | 'lg' | 'xl'
+    accent?: 'blue' | 'cyan' | 'green' | 'orange' | 'red' | 'violet' | 'yellow'
+    soft?: boolean
+    glow?: boolean
+    cover?: boolean
+  }>(),
+  { size: 'default' },
+)
+</script>
+
+<template>
+  <span
+    :class="[
+      'oc-product-mark',
+      size !== 'default' && `oc-product-mark--${size}`,
+      soft && 'oc-product-mark--soft',
+      glow && 'oc-product-mark--glow',
+      cover && 'oc-product-mark--cover',
+      accent && `oc-accent--${accent}`,
+    ]"
+    aria-hidden="true"
+  ><slot /></span>
+</template>

package/src/components/OcProgress.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress-bar--success/warning/danger */
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    value: number
-    max?: number
-    variant?: 'default' | 'success' | 'warning' | 'danger'
-    label?: string
-  }>(),
-  { max: 100, variant: 'default' },
-)
-const percent = computed(() => Math.min(100, Math.max(0, Math.round((props.value / props.max) * 100))))
-</script>
-
-<template>
-  <div class="oc-progress" role="progressbar" :aria-valuenow="value" aria-valuemin="0" :aria-valuemax="max" :aria-label="label">
-    <div :class="['oc-progress-bar', variant !== 'default' && `oc-progress-bar--${variant}`]" :style="{ width: `${percent}%` }"></div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress-bar--success/warning/danger */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: number
+    max?: number
+    variant?: 'default' | 'success' | 'warning' | 'danger'
+    label?: string
+  }>(),
+  { max: 100, variant: 'default' },
+)
+const percent = computed(() => Math.min(100, Math.max(0, Math.round((props.value / props.max) * 100))))
+</script>
+
+<template>
+  <div class="oc-progress" role="progressbar" :aria-valuenow="value" aria-valuemin="0" :aria-valuemax="max" :aria-label="label">
+    <div :class="['oc-progress-bar', variant !== 'default' && `oc-progress-bar--${variant}`]" :style="{ width: `${percent}%` }"></div>
+  </div>
+</template>

package/src/components/OcProjectCard.vue

@@ -1,36 +1,36 @@
-<!-- File: packages/vue/src/components/OcProjectCard.vue | Map: props -> a.oc-project-card -> frame (bar + shot) -> body -->
-<script setup lang="ts">
-/**
- * Portfolio card with a browser-like preview. Without `image` the preview is an accent gradient.
- * Slots: type, name, meta, more. Classes: .oc-project-card (--flat), __frame, __bar, __shot, __body, __type, __name, __meta, __more
- */
-withDefaults(
-  defineProps<{
-    href: string
-    name?: string
-    type?: string
-    meta?: string
-    more?: string
-    image?: string
-    imageAlt?: string
-    flat?: boolean
-  }>(),
-  { more: 'View project', imageAlt: '' },
-)
-</script>
-
-<template>
-  <a :class="['oc-project-card', flat && 'oc-project-card--flat']" :href="href">
-    <span class="oc-project-card__frame">
-      <span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span>
-      <img v-if="image" class="oc-project-card__shot" :src="image" :alt="imageAlt" loading="lazy" />
-      <span v-else class="oc-project-card__shot" role="img" :aria-label="imageAlt || undefined" :aria-hidden="imageAlt ? undefined : 'true'"></span>
-    </span>
-    <span class="oc-project-card__body">
-      <span v-if="type || $slots.type" class="oc-project-card__type"><slot name="type">{{ type }}</slot></span>
-      <span class="oc-project-card__name"><slot name="name">{{ name }}</slot></span>
-      <span v-if="meta || $slots.meta" class="oc-project-card__meta"><slot name="meta">{{ meta }}</slot></span>
-      <span v-if="more" class="oc-project-card__more"><slot name="more">{{ more }}</slot></span>
-    </span>
-  </a>
-</template>
+<!-- File: packages/vue/src/components/OcProjectCard.vue | Map: props -> a.oc-project-card -> frame (bar + shot) -> body -->
+<script setup lang="ts">
+/**
+ * Portfolio card with a browser-like preview. Without `image` the preview is an accent gradient.
+ * Slots: type, name, meta, more. Classes: .oc-project-card (--flat), __frame, __bar, __shot, __body, __type, __name, __meta, __more
+ */
+withDefaults(
+  defineProps<{
+    href: string
+    name?: string
+    type?: string
+    meta?: string
+    more?: string
+    image?: string
+    imageAlt?: string
+    flat?: boolean
+  }>(),
+  { more: 'View project', imageAlt: '' },
+)
+</script>
+
+<template>
+  <a :class="['oc-project-card', flat && 'oc-project-card--flat']" :href="href">
+    <span class="oc-project-card__frame">
+      <span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span>
+      <img v-if="image" class="oc-project-card__shot" :src="image" :alt="imageAlt" loading="lazy" />
+      <span v-else class="oc-project-card__shot" role="img" :aria-label="imageAlt || undefined" :aria-hidden="imageAlt ? undefined : 'true'"></span>
+    </span>
+    <span class="oc-project-card__body">
+      <span v-if="type || $slots.type" class="oc-project-card__type"><slot name="type">{{ type }}</slot></span>
+      <span class="oc-project-card__name"><slot name="name">{{ name }}</slot></span>
+      <span v-if="meta || $slots.meta" class="oc-project-card__meta"><slot name="meta">{{ meta }}</slot></span>
+      <span v-if="more" class="oc-project-card__more"><slot name="more">{{ more }}</slot></span>
+    </span>
+  </a>
+</template>

package/src/components/OcProse.vue

@@ -1,57 +1,57 @@
-<!-- File: packages/vue/src/components/OcProse.vue | Map: props -> wrapper with size modifiers -> default slot (demo article when empty) -->
-<script setup lang="ts">
-/**
- * Typography for long-form text written without classes (same markup as snippets/prose.html). Slot default = the text
- * (put .oc-prose-lead on the intro paragraph); the snippet's demo article when empty. size: sm | md | lg, full = no max width.
- * Classes: .oc-prose(--sm/--lg/--full), .oc-prose-lead
- */
-withDefaults(defineProps<{ size?: 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
-</script>
-
-<template>
-  <component :is="as" :class="['oc-prose', size !== 'md' && `oc-prose--${size}`, full && 'oc-prose--full']">
-    <slot>
-      <h1>Planning a kitchen renovation</h1>
-      <p class="oc-prose-lead">A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</p>
-      <h2>Before the first visit</h2>
-      <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
-      <ul>
-        <li>The <strong>budget range</strong> you have in mind, including appliances</li>
-        <li>Which walls, doors and windows can move, and which cannot
-          <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
-        </li>
-        <li>Appliances you want to keep</li>
-      </ul>
-      <figure>
-        <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
-        <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
-      </figure>
-      <h3>From design to installation</h3>
-      <ol>
-        <li>Site visit and measurements (week 1)</li>
-        <li>Design and quote, with two revision rounds (weeks 2–3)</li>
-        <li>Order and production of the cabinets (weeks 4–9)</li>
-        <li>Installation, worktop and finishing (weeks 10–11)</li>
-      </ol>
-      <blockquote>
-        <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-        <footer>— Ann Dewitte, client in Ghent</footer>
-      </blockquote>
-      <h2>Worktop materials compared</h2>
-      <table>
-        <caption>Prices per running metre, 60 cm deep, installed.</caption>
-        <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
-        <tbody>
-          <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
-          <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
-          <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
-        </tbody>
-      </table>
-      <h3>Sharing your floor plan</h3>
-      <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-      <pre><code>{{ 'Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
-      <hr />
-      <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
-    </slot>
-  </component>
-</template>
+<!-- File: packages/vue/src/components/OcProse.vue | Map: props -> wrapper with size modifiers -> default slot (demo article when empty) -->
+<script setup lang="ts">
+/**
+ * Typography for long-form text written without classes (same markup as snippets/prose.html). Slot default = the text
+ * (put .oc-prose-lead on the intro paragraph); the snippet's demo article when empty. size: sm | md | lg, full = no max width.
+ * Classes: .oc-prose(--sm/--lg/--full), .oc-prose-lead
+ */
+withDefaults(defineProps<{ size?: 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
+</script>
+
+<template>
+  <component :is="as" :class="['oc-prose', size !== 'md' && `oc-prose--${size}`, full && 'oc-prose--full']">
+    <slot>
+      <h1>Planning a kitchen renovation</h1>
+      <p class="oc-prose-lead">A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</p>
+      <h2>Before the first visit</h2>
+      <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
+      <ul>
+        <li>The <strong>budget range</strong> you have in mind, including appliances</li>
+        <li>Which walls, doors and windows can move, and which cannot
+          <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
+        </li>
+        <li>Appliances you want to keep</li>
+      </ul>
+      <figure>
+        <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
+        <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+      </figure>
+      <h3>From design to installation</h3>
+      <ol>
+        <li>Site visit and measurements (week 1)</li>
+        <li>Design and quote, with two revision rounds (weeks 2–3)</li>
+        <li>Order and production of the cabinets (weeks 4–9)</li>
+        <li>Installation, worktop and finishing (weeks 10–11)</li>
+      </ol>
+      <blockquote>
+        <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
+        <footer>— Ann Dewitte, client in Ghent</footer>
+      </blockquote>
+      <h2>Worktop materials compared</h2>
+      <table>
+        <caption>Prices per running metre, 60 cm deep, installed.</caption>
+        <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
+        <tbody>
+          <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
+          <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
+          <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
+        </tbody>
+      </table>
+      <h3>Sharing your floor plan</h3>
+      <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
+      <pre><code>{{ 'Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
+      <hr />
+      <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
+    </slot>
+  </component>
+</template>

package/src/components/OcRadio.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-/**
- * One radio. Inside OcRadioGroup it reads and writes the group's v-model; standalone it has its own v-model
- * and needs a `name` attribute. `description` (or `card`, or the group's `card`) renders the bordered card form.
- * Classes: .oc-radio, .oc-radio-item(--card)
- */
-import { computed, inject } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-import { radioGroupKey } from '../composables/keys'
-
-defineOptions({ inheritAttrs: false })
-const props = defineProps<{ value: string | number; description?: string; card?: boolean; disabled?: boolean }>()
-const own = defineModel<string | number>()
-const group = inject(radioGroupKey, null)
-const { root, control } = useAttrsSplit()
-
-const checked = computed(() => (group ? group.model.value : own.value) === props.value)
-const isCard = computed(() => props.card || !!group?.card.value || !!props.description)
-function onChange() {
-  if (group) group.model.value = props.value
-  else own.value = props.value
-}
-</script>
-
-<template>
-  <label v-bind="root" :class="['oc-radio-item', isCard && 'oc-radio-item--card']">
-    <input
-      v-bind="control"
-      class="oc-radio"
-      type="radio"
-      :name="group ? group.name.value : (control.name as string | undefined)"
-      :value="value"
-      :checked="checked"
-      :disabled="disabled"
-      @change="onChange"
-    />
-    <span v-if="description"><slot /><small>{{ description }}</small></span>
-    <slot v-else />
-  </label>
-</template>
+<script setup lang="ts">
+/**
+ * One radio. Inside OcRadioGroup it reads and writes the group's v-model; standalone it has its own v-model
+ * and needs a `name` attribute. `description` (or `card`, or the group's `card`) renders the bordered card form.
+ * Classes: .oc-radio, .oc-radio-item(--card)
+ */
+import { computed, inject } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { radioGroupKey } from '../composables/keys'
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{ value: string | number; description?: string; card?: boolean; disabled?: boolean }>()
+const own = defineModel<string | number>()
+const group = inject(radioGroupKey, null)
+const { root, control } = useAttrsSplit()
+
+const checked = computed(() => (group ? group.model.value : own.value) === props.value)
+const isCard = computed(() => props.card || !!group?.card.value || !!props.description)
+function onChange() {
+  if (group) group.model.value = props.value
+  else own.value = props.value
+}
+</script>
+
+<template>
+  <label v-bind="root" :class="['oc-radio-item', isCard && 'oc-radio-item--card']">
+    <input
+      v-bind="control"
+      class="oc-radio"
+      type="radio"
+      :name="group ? group.name.value : (control.name as string | undefined)"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      @change="onChange"
+    />
+    <span v-if="description"><slot /><small>{{ description }}</small></span>
+    <slot v-else />
+  </label>
+</template>