@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcEmptyState.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-/** Icon, title, text and actions for lists without data. Slots: icon, title, default (text), actions. */
-defineProps<{ icon?: string; title?: string; text?: string }>()
-</script>
-
-<template>
-  <div class="oc-empty">
-    <span v-if="icon || $slots.icon" class="oc-empty-icon" aria-hidden="true"><slot name="icon">{{ icon }}</slot></span>
-    <h3 v-if="title || $slots.title" class="oc-empty-title"><slot name="title">{{ title }}</slot></h3>
-    <p v-if="text || $slots.default" class="oc-empty-text"><slot>{{ text }}</slot></p>
-    <div v-if="$slots.actions" class="oc-empty-actions"><slot name="actions" /></div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Icon, title, text and actions for lists without data. Slots: icon, title, default (text), actions. */
+defineProps<{ icon?: string; title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-empty">
+    <span v-if="icon || $slots.icon" class="oc-empty-icon" aria-hidden="true"><slot name="icon">{{ icon }}</slot></span>
+    <h3 v-if="title || $slots.title" class="oc-empty-title"><slot name="title">{{ title }}</slot></h3>
+    <p v-if="text || $slots.default" class="oc-empty-text"><slot>{{ text }}</slot></p>
+    <div v-if="$slots.actions" class="oc-empty-actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/components/OcEntityCard.vue

@@ -1,47 +1,47 @@
-<!-- File: packages/vue/src/components/OcEntityCard.vue | Map: props -> article -> grid (frame | body: eyebrow, title, description, facts) -> footer -->
-<script setup lang="ts">
-/**
- * Framed media cell + detail column (same markup as snippets/entity-card.html).
- * Props: title, eyebrow, description, src / alt or glyph (frame content), contain, facts ([key, value][]), stacked, size (sm|md).
- * Slots: media (frame content), default (extra body content), footer. Classes: .oc-entity-card(--stacked/--sm), __grid,
- * __frame(--contain), __glyph, __body, __eyebrow, __title, __description, __facts, __footer
- */
-withDefaults(
-  defineProps<{
-    title: string
-    eyebrow?: string
-    description?: string
-    src?: string
-    alt?: string
-    glyph?: string
-    contain?: boolean
-    facts?: [string, string][]
-    stacked?: boolean
-    size?: 'sm' | 'md'
-  }>(),
-  { alt: '', size: 'md' },
-)
-</script>
-
-<template>
-  <article :class="['oc-entity-card', stacked && 'oc-entity-card--stacked', size === 'sm' && 'oc-entity-card--sm']">
-    <div class="oc-entity-card__grid">
-      <div :class="['oc-entity-card__frame', contain && 'oc-entity-card__frame--contain']">
-        <slot name="media">
-          <img v-if="src" :src="src" :alt="alt" />
-          <span v-else-if="glyph" class="oc-entity-card__glyph" aria-hidden="true">{{ glyph }}</span>
-        </slot>
-      </div>
-      <div class="oc-entity-card__body">
-        <p v-if="eyebrow" class="oc-entity-card__eyebrow">{{ eyebrow }}</p>
-        <h3 class="oc-entity-card__title">{{ title }}</h3>
-        <p v-if="description" class="oc-entity-card__description">{{ description }}</p>
-        <dl v-if="facts?.length" class="oc-entity-card__facts">
-          <template v-for="([k, v], i) in facts" :key="i"><dt>{{ k }}</dt><dd>{{ v }}</dd></template>
-        </dl>
-        <slot />
-      </div>
-    </div>
-    <div v-if="$slots.footer" class="oc-entity-card__footer"><slot name="footer" /></div>
-  </article>
-</template>
+<!-- File: packages/vue/src/components/OcEntityCard.vue | Map: props -> article -> grid (frame | body: eyebrow, title, description, facts) -> footer -->
+<script setup lang="ts">
+/**
+ * Framed media cell + detail column (same markup as snippets/entity-card.html).
+ * Props: title, eyebrow, description, src / alt or glyph (frame content), contain, facts ([key, value][]), stacked, size (sm|md).
+ * Slots: media (frame content), default (extra body content), footer. Classes: .oc-entity-card(--stacked/--sm), __grid,
+ * __frame(--contain), __glyph, __body, __eyebrow, __title, __description, __facts, __footer
+ */
+withDefaults(
+  defineProps<{
+    title: string
+    eyebrow?: string
+    description?: string
+    src?: string
+    alt?: string
+    glyph?: string
+    contain?: boolean
+    facts?: [string, string][]
+    stacked?: boolean
+    size?: 'sm' | 'md'
+  }>(),
+  { alt: '', size: 'md' },
+)
+</script>
+
+<template>
+  <article :class="['oc-entity-card', stacked && 'oc-entity-card--stacked', size === 'sm' && 'oc-entity-card--sm']">
+    <div class="oc-entity-card__grid">
+      <div :class="['oc-entity-card__frame', contain && 'oc-entity-card__frame--contain']">
+        <slot name="media">
+          <img v-if="src" :src="src" :alt="alt" />
+          <span v-else-if="glyph" class="oc-entity-card__glyph" aria-hidden="true">{{ glyph }}</span>
+        </slot>
+      </div>
+      <div class="oc-entity-card__body">
+        <p v-if="eyebrow" class="oc-entity-card__eyebrow">{{ eyebrow }}</p>
+        <h3 class="oc-entity-card__title">{{ title }}</h3>
+        <p v-if="description" class="oc-entity-card__description">{{ description }}</p>
+        <dl v-if="facts?.length" class="oc-entity-card__facts">
+          <template v-for="([k, v], i) in facts" :key="i"><dt>{{ k }}</dt><dd>{{ v }}</dd></template>
+        </dl>
+        <slot />
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="oc-entity-card__footer"><slot name="footer" /></div>
+  </article>
+</template>

package/src/components/OcFactList.vue

@@ -1,37 +1,37 @@
-<!-- File: packages/vue/src/components/OcFactList.vue | Map: props (items + modifiers) -> dl.oc-fact-list -> div > dt + dd -->
-<script setup lang="ts">
-/**
- * Key / value product facts (variant of the definition list). Pass `items`, or your own <div><dt><dd> rows in the slot.
- * Classes: .oc-fact-list (--plain, --compact, --stacked, --accent)
- */
-export interface FactListRow {
-  label: string
-  value: string
-}
-withDefaults(
-  defineProps<{
-    items?: FactListRow[]
-    plain?: boolean
-    compact?: boolean
-    stacked?: boolean
-    accent?: boolean
-  }>(),
-  { items: () => [] },
-)
-</script>
-
-<template>
-  <dl
-    :class="[
-      'oc-fact-list',
-      plain && 'oc-fact-list--plain',
-      compact && 'oc-fact-list--compact',
-      stacked && 'oc-fact-list--stacked',
-      accent && 'oc-fact-list--accent',
-    ]"
-  >
-    <slot>
-      <div v-for="(row, i) in items" :key="i"><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div>
-    </slot>
-  </dl>
-</template>
+<!-- File: packages/vue/src/components/OcFactList.vue | Map: props (items + modifiers) -> dl.oc-fact-list -> div > dt + dd -->
+<script setup lang="ts">
+/**
+ * Key / value product facts (variant of the definition list). Pass `items`, or your own <div><dt><dd> rows in the slot.
+ * Classes: .oc-fact-list (--plain, --compact, --stacked, --accent)
+ */
+export interface FactListRow {
+  label: string
+  value: string
+}
+withDefaults(
+  defineProps<{
+    items?: FactListRow[]
+    plain?: boolean
+    compact?: boolean
+    stacked?: boolean
+    accent?: boolean
+  }>(),
+  { items: () => [] },
+)
+</script>
+
+<template>
+  <dl
+    :class="[
+      'oc-fact-list',
+      plain && 'oc-fact-list--plain',
+      compact && 'oc-fact-list--compact',
+      stacked && 'oc-fact-list--stacked',
+      accent && 'oc-fact-list--accent',
+    ]"
+  >
+    <slot>
+      <div v-for="(row, i) in items" :key="i"><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div>
+    </slot>
+  </dl>
+</template>

package/src/components/OcFilterCounts.vue

@@ -1,38 +1,38 @@
-<!-- File: packages/vue/src/components/OcFilterCounts.vue | Map: types + props -> template (fieldset radiogroup -> tile per view) -->
-<script setup lang="ts">
-/**
- * View filter tiles with counts (Active / Deleted / All). v-model = selected value.
- * Same markup as packages/ui/snippets/filter-counts.html. Classes: .oc-filter-counts(--compact), -item(--success/--destructive/--muted), -value, -label, -hint
- */
-import { useUid } from '../composables/useUid'
-
-export interface FilterCountsItem {
-  value: string
-  label: string
-  count: number | string
-  hint?: string
-  /** Accent color of the tile; default primary. */
-  tone?: 'primary' | 'success' | 'destructive' | 'muted'
-  disabled?: boolean
-}
-defineProps<{
-  options: FilterCountsItem[]
-  /** aria-label of the group */
-  label?: string
-  compact?: boolean
-  name?: string
-}>()
-const model = defineModel<string>()
-const uid = useUid('oc-filter')
-</script>
-
-<template>
-  <fieldset :class="['oc-filter-counts', compact && 'oc-filter-counts--compact']" role="radiogroup" :aria-label="label">
-    <label v-for="option in options" :key="option.value" :class="['oc-filter-counts-item', option.tone && option.tone !== 'primary' && `oc-filter-counts-item--${option.tone}`]">
-      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
-      <span class="oc-filter-counts-value">{{ option.count }}</span>
-      <span class="oc-filter-counts-label">{{ option.label }}</span>
-      <span v-if="option.hint" class="oc-filter-counts-hint">{{ option.hint }}</span>
-    </label>
-  </fieldset>
-</template>
+<!-- File: packages/vue/src/components/OcFilterCounts.vue | Map: types + props -> template (fieldset radiogroup -> tile per view) -->
+<script setup lang="ts">
+/**
+ * View filter tiles with counts (Active / Deleted / All). v-model = selected value.
+ * Same markup as packages/ui/snippets/filter-counts.html. Classes: .oc-filter-counts(--compact), -item(--success/--destructive/--muted), -value, -label, -hint
+ */
+import { useUid } from '../composables/useUid'
+
+export interface FilterCountsItem {
+  value: string
+  label: string
+  count: number | string
+  hint?: string
+  /** Accent color of the tile; default primary. */
+  tone?: 'primary' | 'success' | 'destructive' | 'muted'
+  disabled?: boolean
+}
+defineProps<{
+  options: FilterCountsItem[]
+  /** aria-label of the group */
+  label?: string
+  compact?: boolean
+  name?: string
+}>()
+const model = defineModel<string>()
+const uid = useUid('oc-filter')
+</script>
+
+<template>
+  <fieldset :class="['oc-filter-counts', compact && 'oc-filter-counts--compact']" role="radiogroup" :aria-label="label">
+    <label v-for="option in options" :key="option.value" :class="['oc-filter-counts-item', option.tone && option.tone !== 'primary' && `oc-filter-counts-item--${option.tone}`]">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
+      <span class="oc-filter-counts-value">{{ option.count }}</span>
+      <span class="oc-filter-counts-label">{{ option.label }}</span>
+      <span v-if="option.hint" class="oc-filter-counts-hint">{{ option.hint }}</span>
+    </label>
+  </fieldset>
+</template>

package/src/components/OcFlipCard.vue

@@ -1,36 +1,36 @@
-<!-- File: packages/vue/src/components/OcFlipCard.vue | Map: props + v-model:flipped -> card -> checkbox (toggle) -> inner -> front / back faces -->
-<script setup lang="ts">
-/**
- * 3D flip card (same markup as snippets/flip-card.html). v-model:flipped. trigger: toggle (checkbox, default) |
- * hover (--hover, tabindex 0) | manual (.is-flipped from the model only). Props: vertical, frontLabel, backLabel.
- * Slots: front, back. Classes: .oc-flip-card(--hover/--vertical, .is-flipped), __toggle, __inner, __face(--front/--back),
- * __title, __text, __flip
- */
-import { useUid } from '../composables/useUid'
-
-withDefaults(
-  defineProps<{ trigger?: 'toggle' | 'hover' | 'manual'; vertical?: boolean; frontLabel?: string; backLabel?: string }>(),
-  { trigger: 'toggle', frontLabel: 'Show answer', backLabel: 'Back' },
-)
-const flipped = defineModel<boolean>('flipped', { default: false })
-const id = useUid('oc-flip')
-</script>
-
-<template>
-  <div
-    :class="['oc-flip-card', trigger === 'hover' && 'oc-flip-card--hover', vertical && 'oc-flip-card--vertical', trigger !== 'toggle' && flipped && 'is-flipped']"
-    :tabindex="trigger === 'hover' ? 0 : undefined"
-  >
-    <input v-if="trigger === 'toggle'" :id="id" v-model="flipped" type="checkbox" class="oc-flip-card__toggle" />
-    <div class="oc-flip-card__inner">
-      <div class="oc-flip-card__face oc-flip-card__face--front">
-        <slot name="front" />
-        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ frontLabel }}</label>
-      </div>
-      <div class="oc-flip-card__face oc-flip-card__face--back">
-        <slot name="back" />
-        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ backLabel }}</label>
-      </div>
-    </div>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcFlipCard.vue | Map: props + v-model:flipped -> card -> checkbox (toggle) -> inner -> front / back faces -->
+<script setup lang="ts">
+/**
+ * 3D flip card (same markup as snippets/flip-card.html). v-model:flipped. trigger: toggle (checkbox, default) |
+ * hover (--hover, tabindex 0) | manual (.is-flipped from the model only). Props: vertical, frontLabel, backLabel.
+ * Slots: front, back. Classes: .oc-flip-card(--hover/--vertical, .is-flipped), __toggle, __inner, __face(--front/--back),
+ * __title, __text, __flip
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{ trigger?: 'toggle' | 'hover' | 'manual'; vertical?: boolean; frontLabel?: string; backLabel?: string }>(),
+  { trigger: 'toggle', frontLabel: 'Show answer', backLabel: 'Back' },
+)
+const flipped = defineModel<boolean>('flipped', { default: false })
+const id = useUid('oc-flip')
+</script>
+
+<template>
+  <div
+    :class="['oc-flip-card', trigger === 'hover' && 'oc-flip-card--hover', vertical && 'oc-flip-card--vertical', trigger !== 'toggle' && flipped && 'is-flipped']"
+    :tabindex="trigger === 'hover' ? 0 : undefined"
+  >
+    <input v-if="trigger === 'toggle'" :id="id" v-model="flipped" type="checkbox" class="oc-flip-card__toggle" />
+    <div class="oc-flip-card__inner">
+      <div class="oc-flip-card__face oc-flip-card__face--front">
+        <slot name="front" />
+        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ frontLabel }}</label>
+      </div>
+      <div class="oc-flip-card__face oc-flip-card__face--back">
+        <slot name="back" />
+        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ backLabel }}</label>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcFormField.vue

@@ -1,36 +1,36 @@
-<script setup lang="ts">
-/**
- * Form field: label, control (default slot), description and error.
- * The slot receives { id, describedBy, invalid } so the control can be wired:
- *   <OcFormField label="Email" description="..." v-slot="f"><OcInput :id="f.id" :aria-describedby="f.describedBy" /></OcFormField>
- * Classes: .oc-field(--horizontal), .oc-field-label, .oc-field-description, .oc-field-error
- */
-import { computed } from 'vue'
-import { useUid } from '../composables/useUid'
-
-const props = defineProps<{
-  label?: string
-  description?: string
-  error?: string
-  /** id of the control; generated when omitted */
-  for?: string
-  horizontal?: boolean
-}>()
-const generated = useUid('oc-field')
-const id = computed(() => props.for ?? generated)
-const helpId = computed(() => `${id.value}-help`)
-const errorId = computed(() => `${id.value}-error`)
-const describedBy = computed(() => {
-  const ids = [props.description && helpId.value, props.error && errorId.value].filter(Boolean)
-  return ids.length ? ids.join(' ') : undefined
-})
-</script>
-
-<template>
-  <div :class="['oc-field', horizontal && 'oc-field--horizontal']">
-    <label v-if="label || $slots.label" class="oc-field-label" :for="id"><slot name="label">{{ label }}</slot></label>
-    <slot :id="id" :described-by="describedBy" :invalid="!!error" />
-    <p v-if="description" :id="helpId" class="oc-field-description">{{ description }}</p>
-    <p v-if="error" :id="errorId" class="oc-field-error" role="alert">{{ error }}</p>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Form field: label, control (default slot), description and error.
+ * The slot receives { id, describedBy, invalid } so the control can be wired:
+ *   <OcFormField label="Email" description="..." v-slot="f"><OcInput :id="f.id" :aria-describedby="f.describedBy" /></OcFormField>
+ * Classes: .oc-field(--horizontal), .oc-field-label, .oc-field-description, .oc-field-error
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  error?: string
+  /** id of the control; generated when omitted */
+  for?: string
+  horizontal?: boolean
+}>()
+const generated = useUid('oc-field')
+const id = computed(() => props.for ?? generated)
+const helpId = computed(() => `${id.value}-help`)
+const errorId = computed(() => `${id.value}-error`)
+const describedBy = computed(() => {
+  const ids = [props.description && helpId.value, props.error && errorId.value].filter(Boolean)
+  return ids.length ? ids.join(' ') : undefined
+})
+</script>
+
+<template>
+  <div :class="['oc-field', horizontal && 'oc-field--horizontal']">
+    <label v-if="label || $slots.label" class="oc-field-label" :for="id"><slot name="label">{{ label }}</slot></label>
+    <slot :id="id" :described-by="describedBy" :invalid="!!error" />
+    <p v-if="description" :id="helpId" class="oc-field-description">{{ description }}</p>
+    <p v-if="error" :id="errorId" class="oc-field-error" role="alert">{{ error }}</p>
+  </div>
+</template>

package/src/components/OcGreeting.vue

@@ -1,52 +1,52 @@
-<!-- File: packages/vue/src/components/OcGreeting.vue | Map: time-of-day logic -> header -> icon slot -> body (eyebrow, title + name, date) -> actions slot -->
-<script setup lang="ts">
-/**
- * Dashboard greeting. The time of day comes from `date` (default now): morning 05-12, afternoon 12-18, evening otherwise.
- * Slots: icon, actions. Classes: .oc-greeting(--morning/--afternoon/--evening/--lg), -icon, -body, -eyebrow, -title, -name, -date, -actions
- */
-import { computed } from 'vue'
-
-type TimeOfDay = 'morning' | 'afternoon' | 'evening'
-
-const props = defineProps<{
-  name?: string
-  date?: Date
-  timeOfDay?: TimeOfDay
-  /** Translated greetings, e.g. { morning: 'Goedemorgen' }. */
-  words?: Partial<Record<TimeOfDay, string>>
-  locale?: string
-  hideDate?: boolean
-  eyebrow?: string
-  size?: 'lg'
-}>()
-
-const WORDS: Record<TimeOfDay, string> = { morning: 'Good morning', afternoon: 'Good afternoon', evening: 'Good evening' }
-
-const when = computed(() => props.date ?? new Date())
-const tod = computed<TimeOfDay>(() => {
-  if (props.timeOfDay) return props.timeOfDay
-  const h = when.value.getHours()
-  return h >= 5 && h < 12 ? 'morning' : h >= 12 && h < 18 ? 'afternoon' : 'evening'
-})
-const word = computed(() => props.words?.[tod.value] ?? WORDS[tod.value])
-const dateText = computed(() =>
-  new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(when.value),
-)
-// Local YYYY-MM-DD for datetime (toISOString would use UTC).
-const iso = computed(() => {
-  const d = when.value
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-})
-</script>
-
-<template>
-  <header :class="['oc-greeting', `oc-greeting--${tod}`, size && `oc-greeting--${size}`]">
-    <span v-if="$slots.icon" class="oc-greeting-icon" aria-hidden="true"><slot name="icon" /></span>
-    <div class="oc-greeting-body">
-      <p v-if="eyebrow" class="oc-greeting-eyebrow">{{ eyebrow }}</p>
-      <h2 class="oc-greeting-title">{{ word }}<template v-if="name">, <span class="oc-greeting-name">{{ name }}</span></template></h2>
-      <time v-if="!hideDate" class="oc-greeting-date" :datetime="iso">{{ dateText }}</time>
-    </div>
-    <div v-if="$slots.actions" class="oc-greeting-actions"><slot name="actions" /></div>
-  </header>
-</template>
+<!-- File: packages/vue/src/components/OcGreeting.vue | Map: time-of-day logic -> header -> icon slot -> body (eyebrow, title + name, date) -> actions slot -->
+<script setup lang="ts">
+/**
+ * Dashboard greeting. The time of day comes from `date` (default now): morning 05-12, afternoon 12-18, evening otherwise.
+ * Slots: icon, actions. Classes: .oc-greeting(--morning/--afternoon/--evening/--lg), -icon, -body, -eyebrow, -title, -name, -date, -actions
+ */
+import { computed } from 'vue'
+
+type TimeOfDay = 'morning' | 'afternoon' | 'evening'
+
+const props = defineProps<{
+  name?: string
+  date?: Date
+  timeOfDay?: TimeOfDay
+  /** Translated greetings, e.g. { morning: 'Goedemorgen' }. */
+  words?: Partial<Record<TimeOfDay, string>>
+  locale?: string
+  hideDate?: boolean
+  eyebrow?: string
+  size?: 'lg'
+}>()
+
+const WORDS: Record<TimeOfDay, string> = { morning: 'Good morning', afternoon: 'Good afternoon', evening: 'Good evening' }
+
+const when = computed(() => props.date ?? new Date())
+const tod = computed<TimeOfDay>(() => {
+  if (props.timeOfDay) return props.timeOfDay
+  const h = when.value.getHours()
+  return h >= 5 && h < 12 ? 'morning' : h >= 12 && h < 18 ? 'afternoon' : 'evening'
+})
+const word = computed(() => props.words?.[tod.value] ?? WORDS[tod.value])
+const dateText = computed(() =>
+  new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(when.value),
+)
+// Local YYYY-MM-DD for datetime (toISOString would use UTC).
+const iso = computed(() => {
+  const d = when.value
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+})
+</script>
+
+<template>
+  <header :class="['oc-greeting', `oc-greeting--${tod}`, size && `oc-greeting--${size}`]">
+    <span v-if="$slots.icon" class="oc-greeting-icon" aria-hidden="true"><slot name="icon" /></span>
+    <div class="oc-greeting-body">
+      <p v-if="eyebrow" class="oc-greeting-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-greeting-title">{{ word }}<template v-if="name">, <span class="oc-greeting-name">{{ name }}</span></template></h2>
+      <time v-if="!hideDate" class="oc-greeting-date" :datetime="iso">{{ dateText }}</time>
+    </div>
+    <div v-if="$slots.actions" class="oc-greeting-actions"><slot name="actions" /></div>
+  </header>
+</template>

package/src/components/OcHeading.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-/** Page or section title with a muted description. Classes: .oc-heading(--sm). `as` picks the title tag. */
-withDefaults(
-  defineProps<{
-    title?: string
-    description?: string
-    size?: 'sm' | 'md'
-    as?: 'h1' | 'h2' | 'h3' | 'h4'
-  }>(),
-  { size: 'md', as: 'h2' },
-)
-</script>
-
-<template>
-  <div :class="['oc-heading', size === 'sm' && 'oc-heading--sm']">
-    <component :is="as" class="oc-heading-title"><slot name="title">{{ title }}</slot></component>
-    <p v-if="description || $slots.default" class="oc-heading-description"><slot>{{ description }}</slot></p>
-  </div>
-</template>
+<script setup lang="ts">
+/** Page or section title with a muted description. Classes: .oc-heading(--sm). `as` picks the title tag. */
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    size?: 'sm' | 'md'
+    as?: 'h1' | 'h2' | 'h3' | 'h4'
+  }>(),
+  { size: 'md', as: 'h2' },
+)
+</script>
+
+<template>
+  <div :class="['oc-heading', size === 'sm' && 'oc-heading--sm']">
+    <component :is="as" class="oc-heading-title"><slot name="title">{{ title }}</slot></component>
+    <p v-if="description || $slots.default" class="oc-heading-description"><slot>{{ description }}</slot></p>
+  </div>
+</template>

package/src/components/OcHoverCard.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-/**
- * Preview on hover/focus (interestfor + popover, CSS hover fallback). The trigger is the `trigger` slot
- * (scoped: { id }) or a link with `label` and `href`; default slot = card content.
- * Classes: .oc-hover-card(--top), -trigger, -content(--sm). Attributes land on the content element.
- */
-import { useAttrs } from 'vue'
-import { useUid } from '../composables/useUid'
-
-defineOptions({ inheritAttrs: false })
-defineProps<{ label?: string; href?: string; top?: boolean; small?: boolean }>()
-const attrs = useAttrs()
-const id = (attrs.id as string | undefined) ?? useUid('oc-hover-card')
-</script>
-
-<template>
-  <span :class="['oc-hover-card', top && 'oc-hover-card--top']">
-    <slot name="trigger" :id="id">
-      <a class="oc-hover-card-trigger" :href="href ?? '#'" :interestfor="id">{{ label }}</a>
-    </slot>
-    <div v-bind="attrs" :id="id" :class="['oc-hover-card-content', small && 'oc-hover-card-content--sm']" popover>
-      <slot />
-    </div>
-  </span>
-</template>
+<script setup lang="ts">
+/**
+ * Preview on hover/focus (interestfor + popover, CSS hover fallback). The trigger is the `trigger` slot
+ * (scoped: { id }) or a link with `label` and `href`; default slot = card content.
+ * Classes: .oc-hover-card(--top), -trigger, -content(--sm). Attributes land on the content element.
+ */
+import { useAttrs } from 'vue'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ label?: string; href?: string; top?: boolean; small?: boolean }>()
+const attrs = useAttrs()
+const id = (attrs.id as string | undefined) ?? useUid('oc-hover-card')
+</script>
+
+<template>
+  <span :class="['oc-hover-card', top && 'oc-hover-card--top']">
+    <slot name="trigger" :id="id">
+      <a class="oc-hover-card-trigger" :href="href ?? '#'" :interestfor="id">{{ label }}</a>
+    </slot>
+    <div v-bind="attrs" :id="id" :class="['oc-hover-card-content', small && 'oc-hover-card-content--sm']" popover>
+      <slot />
+    </div>
+  </span>
+</template>