@birdycom/omniaui-vue 0.12.6 → 0.14.0

package/manifest.json

@@ -114,6 +114,12 @@
       "file": "src/components/OcBarcodeInput.vue",
       "snippet": "@birdycom/omniaui/snippets/barcode-input.html"
     },
+    {
+      "name": "OcBrandMark",
+      "kind": "component",
+      "file": "src/components/OcBrandMark.vue",
+      "snippet": "@birdycom/omniaui/snippets/brand-mark.html"
+    },
     {
       "name": "OcBreadcrumb",
       "kind": "component",
@@ -150,6 +156,12 @@
       "file": "src/components/OcButtonGroupText.vue",
       "snippet": null
     },
+    {
+      "name": "OcCallout",
+      "kind": "component",
+      "file": "src/components/OcCallout.vue",
+      "snippet": "@birdycom/omniaui/snippets/callout.html"
+    },
     {
       "name": "OcCard",
       "kind": "component",
@@ -324,6 +336,12 @@
       "file": "src/components/OcFactList.vue",
       "snippet": "@birdycom/omniaui/snippets/fact-list.html"
     },
+    {
+      "name": "OcFeatureCard",
+      "kind": "component",
+      "file": "src/components/OcFeatureCard.vue",
+      "snippet": "@birdycom/omniaui/snippets/feature-card.html"
+    },
     {
       "name": "OcFilterCounts",
       "kind": "component",
@@ -378,6 +396,12 @@
       "file": "src/components/OcGreeting.vue",
       "snippet": "@birdycom/omniaui/snippets/greeting.html"
     },
+    {
+      "name": "OcGroup",
+      "kind": "component",
+      "file": "src/components/OcGroup.vue",
+      "snippet": "@birdycom/omniaui/snippets/group.html"
+    },
     {
       "name": "OcHeading",
       "kind": "component",
@@ -474,6 +498,12 @@
       "file": "src/components/OcLinkArrow.vue",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "OcLinkCard",
+      "kind": "component",
+      "file": "src/components/OcLinkCard.vue",
+      "snippet": null
+    },
     {
       "name": "OcLinkRow",
       "kind": "component",
@@ -516,6 +546,12 @@
       "file": "src/components/OcMediaThumb.vue",
       "snippet": "@birdycom/omniaui/snippets/media-thumb.html"
     },
+    {
+      "name": "OcMenuStatic",
+      "kind": "component",
+      "file": "src/components/OcMenuStatic.vue",
+      "snippet": "@birdycom/omniaui/snippets/menu-static.html"
+    },
     {
       "name": "OcMessage",
       "kind": "component",
@@ -594,6 +630,18 @@
       "file": "src/components/OcPagination.vue",
       "snippet": "@birdycom/omniaui/snippets/pagination.html"
     },
+    {
+      "name": "OcPanel",
+      "kind": "component",
+      "file": "src/components/OcPanel.vue",
+      "snippet": "@birdycom/omniaui/snippets/panel.html"
+    },
+    {
+      "name": "OcParticleField",
+      "kind": "component",
+      "file": "src/components/OcParticleField.vue",
+      "snippet": "@birdycom/omniaui/snippets/particle-field.html"
+    },
     {
       "name": "OcPasswordInput",
       "kind": "component",
@@ -684,12 +732,24 @@
       "file": "src/components/OcRatingInput.vue",
       "snippet": "@birdycom/omniaui/snippets/rating.html"
     },
+    {
+      "name": "OcReading",
+      "kind": "component",
+      "file": "src/components/OcReading.vue",
+      "snippet": "@birdycom/omniaui/snippets/reading.html"
+    },
     {
       "name": "OcRecoveryCodes",
       "kind": "component",
       "file": "src/components/OcRecoveryCodes.vue",
       "snippet": "@birdycom/omniaui/snippets/recovery-codes.html"
     },
+    {
+      "name": "OcResult",
+      "kind": "component",
+      "file": "src/components/OcResult.vue",
+      "snippet": "@birdycom/omniaui/snippets/result.html"
+    },
     {
       "name": "OcRibbon",
       "kind": "component",
@@ -1032,6 +1092,12 @@
       "file": "src/blocks/OcBlockAuthSplit.vue",
       "snippet": "@birdycom/omniaui-blocks/blocks/auth-split.html"
     },
+    {
+      "name": "OcBlockContactForm",
+      "kind": "block",
+      "file": "src/blocks/OcBlockContactForm.vue",
+      "snippet": "@birdycom/omniaui-blocks/blocks/contact-form.html"
+    },
     {
       "name": "OcBlockContactGrid",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.6",
+  "version": "0.14.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",

package/src/blocks/OcBlockContactForm.vue

@@ -0,0 +1,146 @@
+<!-- File: packages/vue/src/blocks/OcBlockContactForm.vue | Map: props -> panel (result | title, intro, alert, form: honeypot, fields, actions) -> cards -->
+<script setup lang="ts">
+/**
+ * Contact form in a panel next to a column of contact cards. Server errors come in as `errors` (field name -> text,
+ * `form` = message above the form); `sent` shows the result, `busy` sets aria-busy and disables the button.
+ * Slots: fields (own fields instead of name, e-mail, phone, subject, message), note, success, card-icon ({ card }).
+ * Emits submit (the native event; call preventDefault for Inertia) and again (back to the form).
+ * Classes: .oc-block-contact-form, -layout, -title, -intro, -cards; .oc-panel--glow, .oc-form--filled, .oc-result
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface ContactFormLine {
+  text: string
+  href?: string
+}
+export interface ContactFormCard {
+  title: string
+  lines: ContactFormLine[]
+  /** Webicon name (mdi:email-outline …), drawn with <iconify-icon>. */
+  icon?: string
+}
+export interface ContactFormSubject {
+  value: string
+  label: string
+}
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    intro?: string
+    action?: string
+    method?: string
+    subjects?: ContactFormSubject[]
+    values?: Record<string, string>
+    errors?: Record<string, string>
+    sent?: boolean
+    busy?: boolean
+    submitLabel?: string
+    busyLabel?: string
+    note?: string
+    successTitle?: string
+    successText?: string
+    againLabel?: string
+    errorText?: string
+    cards?: ContactFormCard[]
+  }>(),
+  {
+    title: 'Send us a message',
+    method: 'post',
+    subjects: () => [],
+    values: () => ({}),
+    errors: () => ({}),
+    submitLabel: 'Send message',
+    busyLabel: 'Sending…',
+    successTitle: 'Thank you, your message was sent',
+    againLabel: 'Send another message',
+    errorText: 'Please check the fields in red.',
+    cards: () => [],
+  },
+)
+const emit = defineEmits<{ submit: [event: Event]; again: [] }>()
+const uid = useUid('oc-contact')
+const fid = (name: string) => `${uid}-${name}`
+const invalid = (name: string) => (props.errors[name] ? { 'aria-invalid': true as const, 'aria-describedby': `err-${name}` } : {})
+const alertText = computed(() => props.errors.form ?? (Object.keys(props.errors).some((k) => k !== 'form') ? props.errorText : null))
+</script>
+
+<template>
+  <section class="oc-block-contact-form" aria-label="Contact">
+    <div class="oc-block-contact-form-layout">
+      <div :id="uid" class="oc-panel oc-panel--glow">
+        <div v-if="sent" class="oc-result" role="status" tabindex="-1">
+          <slot name="success">
+            <span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:check" /></span>
+            <h2 class="oc-result__title">{{ successTitle }}</h2>
+            <p v-if="successText" class="oc-result__text">{{ successText }}</p>
+            <div class="oc-result__actions">
+              <button type="button" class="oc-btn oc-btn--outline" @click="emit('again')">{{ againLabel }}</button>
+            </div>
+          </slot>
+        </div>
+        <div v-else>
+          <h2 v-if="title" class="oc-block-contact-form-title">{{ title }}</h2>
+          <p v-if="intro" class="oc-block-contact-form-intro">{{ intro }}</p>
+          <p v-if="alertText" class="oc-alert oc-alert--danger" role="alert">{{ alertText }}</p>
+          <form class="oc-form oc-form--filled" :action="action" :method="method" novalidate :aria-busy="busy || undefined" @submit="emit('submit', $event)">
+            <div class="oc-honeypot" aria-hidden="true">
+              <label :for="fid('website')">Leave this field empty</label>
+              <input :id="fid('website')" type="text" name="website" tabindex="-1" autocomplete="off" />
+            </div>
+            <slot name="fields">
+              <div class="oc-field-group oc-field-group--row">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('name')">Name</label>
+                  <input :id="fid('name')" class="oc-input" type="text" name="name" required maxlength="100" autocomplete="name" :value="values.name" v-bind="invalid('name')" />
+                  <p v-if="errors.name" id="err-name" class="oc-field-error">{{ errors.name }}</p>
+                </div>
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('email')">E-mail</label>
+                  <input :id="fid('email')" class="oc-input" type="email" name="email" required maxlength="254" autocomplete="email" :value="values.email" v-bind="invalid('email')" />
+                  <p v-if="errors.email" id="err-email" class="oc-field-error">{{ errors.email }}</p>
+                </div>
+              </div>
+              <div :class="['oc-field-group', subjects.length && 'oc-field-group--row']">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('phone')">Phone <span class="oc-field-label__hint">(optional)</span></label>
+                  <input :id="fid('phone')" class="oc-input" type="tel" name="phone" maxlength="40" autocomplete="tel" inputmode="tel" :value="values.phone" v-bind="invalid('phone')" />
+                  <p v-if="errors.phone" id="err-phone" class="oc-field-error">{{ errors.phone }}</p>
+                </div>
+                <div v-if="subjects.length" class="oc-field">
+                  <label class="oc-field-label" :for="fid('subject')">What is it about?</label>
+                  <select :id="fid('subject')" class="oc-select" name="subject" required v-bind="invalid('subject')">
+                    <option value="" :selected="!values.subject">Choose a subject</option>
+                    <option v-for="s in subjects" :key="s.value" :value="s.value" :selected="values.subject === s.value">{{ s.label }}</option>
+                  </select>
+                  <p v-if="errors.subject" id="err-subject" class="oc-field-error">{{ errors.subject }}</p>
+                </div>
+              </div>
+              <div class="oc-field">
+                <label class="oc-field-label" :for="fid('message')">Your message</label>
+                <textarea :id="fid('message')" class="oc-input oc-textarea" name="message" rows="6" required maxlength="5000" :value="values.message" v-bind="invalid('message')" />
+                <p v-if="errors.message" id="err-message" class="oc-field-error">{{ errors.message }}</p>
+              </div>
+            </slot>
+            <div class="oc-form-actions">
+              <button class="oc-btn oc-btn--lg" type="submit" :disabled="busy">{{ busy ? busyLabel : submitLabel }}</button>
+              <p v-if="note || $slots.note" class="oc-form-note"><slot name="note">{{ note }}</slot></p>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div v-if="cards.length" class="oc-block-contact-form-cards">
+        <article v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
+          <span v-if="card.icon || $slots['card-icon']" class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">
+            <slot name="card-icon" :card="card"><iconify-icon :icon="card.icon" /></slot>
+          </span>
+          <h3 class="oc-block-contact-title">{{ card.title }}</h3>
+          <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>
+            <p v-else class="oc-block-contact-line">{{ line.text }}</p>
+          </template>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/OcBrandMark.vue

@@ -0,0 +1,15 @@
+<!-- File: packages/vue/src/components/OcBrandMark.vue | Map: link -> icon (slot) -> word (name + accent) -> tagline -->
+<script setup lang="ts">
+/** Logo from an icon and text (snippets/brand-mark.html). Slot icon: an <svg class="oc-brand-mark__icon"> or <img>. */
+withDefaults(defineProps<{ name: string; accent?: string; tagline?: string; href?: string; size?: 'sm' | 'md' | 'lg' }>(), { href: '/', size: 'md' })
+</script>
+
+<template>
+  <a :class="['oc-brand-mark', size !== 'md' && `oc-brand-mark--${size}`]" :href="href">
+    <slot name="icon" />
+    <span class="oc-brand-mark__text">
+      <span class="oc-brand-mark__word">{{ name }}<span v-if="accent" class="oc-brand-mark__accent">{{ accent }}</span></span>
+      <span v-if="tagline" class="oc-brand-mark__tagline">{{ tagline }}</span>
+    </span>
+  </a>
+</template>

package/src/components/OcButton.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /**
  * Button. Renders <a> when `href` is set, otherwise <button>.
- * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
+ * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass/--neon,
  * --soft-primary/-success/-warning/-destructive/-info (row actions), --plain (icon only, no surface),
  * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text). `loading` sets aria-busy (spinner).
  */
 withDefaults(
   defineProps<{
     variant?:
-      | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+      | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass' | 'neon'
       | 'soft-primary' | 'soft-success' | 'soft-warning' | 'soft-destructive' | 'soft-info' | 'plain'
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean

package/src/components/OcCallout.vue

@@ -0,0 +1,11 @@
+<!-- File: packages/vue/src/components/OcCallout.vue | Map: card row -> text (default slot) -> action (slot) -->
+<script setup lang="ts">
+/** Small card with a text on the left (default slot) and an action on the right (slot `action`). */
+</script>
+
+<template>
+  <div class="oc-callout">
+    <div class="oc-callout__text"><slot /></div>
+    <div v-if="$slots.action" class="oc-callout__action"><slot name="action" /></div>
+  </div>
+</template>

package/src/components/OcDropdownItem.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
-/** Menu item: <a> with `href`, otherwise <button>. */
-defineProps<{ href?: string }>()
+/** Menu item: <a> with `href`, otherwise <button>. checked (true/false) adds a check column, hint a muted text on the right. */
+withDefaults(defineProps<{ href?: string; checked?: boolean; hint?: string }>(), { checked: undefined })
 </script>
 
 <template>
-  <a v-if="href" class="oc-dropdown-item" :href="href"><slot /></a>
-  <button v-else class="oc-dropdown-item" type="button"><slot /></button>
+  <component
+    :is="href ? 'a' : 'button'"
+    class="oc-dropdown-item"
+    :href="href"
+    :type="href ? undefined : 'button'"
+    :role="checked !== undefined ? 'menuitemcheckbox' : undefined"
+    :aria-checked="checked !== undefined ? String(checked) : undefined"
+  >
+    <span v-if="checked !== undefined" class="oc-dropdown-check" aria-hidden="true"></span>
+    <slot />
+    <span v-if="hint" class="oc-dropdown-hint">{{ hint }}</span>
+  </component>
 </template>

package/src/components/OcFeatureCard.vue

@@ -0,0 +1,15 @@
+<!-- File: packages/vue/src/components/OcFeatureCard.vue | Map: tile (icon) -> title -> text (slot) -->
+<script setup lang="ts">
+/** Service or feature card (snippets/feature-card.html). icon = webicon name; slots: default (text), icon. */
+withDefaults(defineProps<{ title: string; icon?: string; accent?: string; headingLevel?: 2 | 3 | 4 }>(), { headingLevel: 3 })
+</script>
+
+<template>
+  <article class="oc-feature-card">
+    <span v-if="icon || $slots.icon" :class="['oc-icon-tile oc-icon-tile--sm', accent && `oc-accent--${accent}`]" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <component :is="`h${headingLevel}`" class="oc-feature-card__title">{{ title }}</component>
+    <p v-if="$slots.default" class="oc-feature-card__text"><slot /></p>
+  </article>
+</template>

package/src/components/OcGroup.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcGroup.vue | Map: section -> head (title + aside) -> meta -> content (slot) -->
+<script setup lang="ts">
+/** One section in a panel: title, a status on the right (aside, asideTone), a muted line (meta) and the content. */
+withDefaults(defineProps<{ title: string; aside?: string; asideTone?: 'busy' | 'ok' | 'warn' | 'error'; meta?: string; headingLevel?: 2 | 3 | 4 }>(), { headingLevel: 2 })
+</script>
+
+<template>
+  <section class="oc-group">
+    <header class="oc-group__head">
+      <component :is="`h${headingLevel}`" class="oc-group__title">{{ title }}</component>
+      <span v-if="aside || $slots.aside" class="oc-group__aside" :data-tone="asideTone"><slot name="aside">{{ aside }}</slot></span>
+    </header>
+    <p v-if="meta" class="oc-group__meta">{{ meta }}</p>
+    <slot />
+  </section>
+</template>

package/src/components/OcLanguageSelect.vue

@@ -18,6 +18,8 @@ defineProps<{
   label?: string
   currency?: boolean
   ghost?: boolean
+  /** Closed it shows only the code ("NL"), the value in upper case */
+  code?: boolean
   /** Text icon, e.g. "€" (default: globe, or € with `currency`) */
   icon?: string
 }>()
@@ -26,7 +28,7 @@ const { root, control } = useAttrsSplit()
 </script>
 
 <template>
-  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency']">
+  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency', code && 'oc-language-select--code']" :data-code="code ? String(model ?? options[0]?.value ?? '').toUpperCase() : undefined">
     <span class="oc-language-select-icon" aria-hidden="true">
       <slot name="icon">
         <template v-if="icon || currency">{{ icon ?? '€' }}</template>

package/src/components/OcLinkCard.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcLinkCard.vue | Map: link -> tile (icon) -> title -> text (slot) -> more -->
+<script setup lang="ts">
+/** A card that is a whole link (snippets/feature-card.html). icon = webicon name; slots: default (text), icon. */
+defineProps<{ title: string; href: string; icon?: string; accent?: string; more?: string }>()
+</script>
+
+<template>
+  <a :class="['oc-link-card', accent && `oc-accent--${accent}`]" :href="href">
+    <span v-if="icon || $slots.icon" class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <span class="oc-link-card__title">{{ title }}</span>
+    <span v-if="$slots.default" class="oc-link-card__text"><slot /></span>
+    <span v-if="more" class="oc-link-card__more">{{ more }}</span>
+  </a>
+</template>

package/src/components/OcMenuStatic.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcMenuStatic.vue | Map: div.oc-dropdown-menu--static -> items (slot) -->
+<script setup lang="ts">
+/** The dropdown menu as a surface of its own (a tray menu). Items: OcDropdownItem (checked, hint), OcDropdownLabel. */
+defineProps<{ flat?: boolean }>()
+</script>
+
+<template>
+  <div role="menu" :class="['oc-dropdown-menu', 'oc-dropdown-menu--static', flat && 'oc-dropdown-menu--flat']"><slot /></div>
+</template>

package/src/components/OcMeterRow.vue

@@ -1,9 +1,9 @@
 <!-- File: packages/vue/src/components/OcMeterRow.vue | Map: props -> level from the percentage -> row markup -->
 <script setup lang="ts">
-/** Usage line: label, percentage and amount, a colored bar (warn from 75, critical from 90) and the reset line. */
+/** Usage line: label, percentage and amount, a colored bar (warn from 75, critical from 90), a sub-line (sub, subPercent) and the reset line. */
 import { computed } from 'vue'
 
-const props = defineProps<{ label: string; percent: number; value?: string; reset?: string; level?: 'ok' | 'warn' | 'critical' }>()
+const props = defineProps<{ label: string; percent: number; value?: string; reset?: string; level?: 'ok' | 'warn' | 'critical'; sub?: string; subPercent?: number; subLevel?: 'warn' | 'critical' }>()
 const pct = computed(() => Math.max(0, Math.min(100, Math.round(props.percent))))
 const tone = computed(() => props.level ?? (pct.value >= 90 ? 'critical' : pct.value >= 75 ? 'warn' : 'ok'))
 </script>
@@ -13,6 +13,7 @@ const tone = computed(() => props.level ?? (pct.value >= 90 ? 'critical' : pct.v
     <span class="oc-meter-row__label">{{ label }}</span>
     <span class="oc-meter-row__value"><strong>{{ pct }}%</strong><template v-if="value"> · {{ value }}</template></span>
     <span class="oc-meter-row__bar" role="meter" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="pct" :aria-label="label"></span>
+    <span v-if="sub" class="oc-meter-row__sub">{{ sub }}<span v-if="subPercent != null" class="oc-meter-row__subbar" :data-level="subLevel" :style="{ '--oc-meter': `${Math.max(0, Math.min(100, subPercent))}%` }"></span></span>
     <span v-if="reset" class="oc-meter-row__reset">{{ reset }}</span>
   </div>
 </template>

package/src/components/OcPanel.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcPanel.vue | Map: glow -> classes -> panel with the slot -->
+<script setup lang="ts">
+/** Framed panel for a form, a call to action or a feature (same markup as snippets/panel.html). glow: start | end | both. */
+defineProps<{ glow?: 'start' | 'end' | 'both' }>()
+</script>
+
+<template>
+  <div :class="['oc-panel', (glow === 'start' || glow === 'end') && 'oc-panel--glow', glow === 'end' && 'oc-panel--glow-end', glow === 'both' && 'oc-panel--glow-both']"><slot /></div>
+</template>

package/src/components/OcParticleField.vue

@@ -0,0 +1,23 @@
+<!-- File: packages/vue/src/components/OcParticleField.vue | Map: canvas.oc-particles -> start on mount (particles.js) -> stop on unmount -->
+<script setup lang="ts">
+/** Background canvas with drifting points and lines; one still frame with reduced motion. local = fill the positioned parent. */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { initParticles } from '../../../ui/src/particles.js'
+
+const props = defineProps<{ count?: number; speed?: number; link?: number; local?: boolean }>()
+const canvas = ref<HTMLCanvasElement | null>(null)
+let stop = () => {}
+const start = () => {
+  stop()
+  if (!canvas.value) return
+  const options = Object.fromEntries(Object.entries({ count: props.count, speed: props.speed, link: props.link }).filter(([, v]) => v != null))
+  stop = initParticles(canvas.value, options)
+}
+onMounted(start)
+watch(() => [props.count, props.speed, props.link], start)
+onBeforeUnmount(() => stop())
+</script>
+
+<template>
+  <canvas ref="canvas" aria-hidden="true" :class="['oc-particles', local && 'oc-particles--local']"></canvas>
+</template>

package/src/components/OcReading.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcReading.vue | Map: span.oc-reading (+ level) -> value (slot) -->
+<script setup lang="ts">
+/** A small measured value ("57 °C") in tabular numbers. level: cool (default), warm, hot. */
+defineProps<{ level?: 'cool' | 'warm' | 'hot' }>()
+</script>
+
+<template>
+  <span :class="['oc-reading', level && level !== 'cool' && `oc-reading--${level}`]"><slot /></span>
+</template>

package/src/components/OcResult.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcResult.vue | Map: tile (icon) -> title -> text (slot) -> actions (slot) -->
+<script setup lang="ts">
+/** Outcome of an action in place of the form (snippets/result.html). icon = webicon name; slots: default (text), icon, actions. */
+defineProps<{ title: string; icon?: string; accent?: string; center?: boolean }>()
+</script>
+
+<template>
+  <div :class="['oc-result', center && 'oc-result--center']" role="status" tabindex="-1">
+    <span v-if="icon || $slots.icon" :class="['oc-icon-tile oc-icon-tile--sm', accent && `oc-accent--${accent}`]" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <h2 class="oc-result__title">{{ title }}</h2>
+    <p v-if="$slots.default" class="oc-result__text"><slot /></p>
+    <div v-if="$slots.actions" class="oc-result__actions"><slot name="actions" /></div>
+  </div>
+</template>