@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcAspectRatio.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-/**
- * Aspect-ratio box. `ratio` is a preset (square | photo | portrait | wide), a number (1.5) or a CSS ratio ("5 / 2");
- * default 16 / 9. `center` centers the content. Classes: .oc-aspect(--square/--photo/--portrait/--wide/--center), --oc-aspect
- */
-import { computed } from 'vue'
-
-const presets = ['square', 'photo', 'portrait', 'wide']
-const props = defineProps<{ ratio?: 'square' | 'photo' | 'portrait' | 'wide' | number | string; center?: boolean }>()
-const preset = computed(() => (typeof props.ratio === 'string' && presets.includes(props.ratio) ? props.ratio : undefined))
-const custom = computed(() => (props.ratio !== undefined && !preset.value ? String(props.ratio) : undefined))
-</script>
-
-<template>
-  <div
-    :class="['oc-aspect', preset && `oc-aspect--${preset}`, center && 'oc-aspect--center']"
-    :style="custom ? { '--oc-aspect': custom } : undefined"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Aspect-ratio box. `ratio` is a preset (square | photo | portrait | wide), a number (1.5) or a CSS ratio ("5 / 2");
+ * default 16 / 9. `center` centers the content. Classes: .oc-aspect(--square/--photo/--portrait/--wide/--center), --oc-aspect
+ */
+import { computed } from 'vue'
+
+const presets = ['square', 'photo', 'portrait', 'wide']
+const props = defineProps<{ ratio?: 'square' | 'photo' | 'portrait' | 'wide' | number | string; center?: boolean }>()
+const preset = computed(() => (typeof props.ratio === 'string' && presets.includes(props.ratio) ? props.ratio : undefined))
+const custom = computed(() => (props.ratio !== undefined && !preset.value ? String(props.ratio) : undefined))
+</script>
+
+<template>
+  <div
+    :class="['oc-aspect', preset && `oc-aspect--${preset}`, center && 'oc-aspect--center']"
+    :style="custom ? { '--oc-aspect': custom } : undefined"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/OcAttachment.vue

@@ -1,59 +1,59 @@
-<!-- File: packages/vue/src/components/OcAttachment.vue | Map: type / extension helpers -> props -> a[download] or div chip (icon, name, size, remove) -->
-<script lang="ts">
-export type AttachmentType = 'pdf' | 'doc' | 'sheet' | 'zip' | 'image'
-export interface AttachmentFile {
-  name: string
-  size?: string
-  type?: AttachmentType
-  ext?: string
-  href?: string
-  image?: string
-  state?: 'uploading' | 'error'
-  progress?: number
-  removable?: boolean
-  removeLabel?: string
-}
-const TYPES: Record<string, AttachmentType> = {
-  pdf: 'pdf', doc: 'doc', docx: 'doc', odt: 'doc', rtf: 'doc', txt: 'doc', xls: 'sheet', xlsx: 'sheet', csv: 'sheet', ods: 'sheet',
-  zip: 'zip', rar: 'zip', '7z': 'zip', gz: 'zip', jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', webp: 'image', heic: 'image', avif: 'image',
-}
-const extOf = (name: string) => (name.includes('.') ? name.split('.').pop()!.toLowerCase() : '')
-/** Icon text and tint of a file name (Plan.xlsx -> XLS, sheet). */
-export const attachmentMeta = (f: AttachmentFile) => ({
-  ext: f.ext ?? extOf(f.name).toUpperCase().replace(/^(DOC|XLS|PPT)X$/, '$1'),
-  type: f.type ?? TYPES[extOf(f.name)],
-})
-</script>
-
-<script setup lang="ts">
-/**
- * File chip (same markup as snippets/attachment.html): icon tile by type, name, size, upload / error state and remove button.
- * With href (and not removable) it is an <a download>. Emits: remove. Classes: .oc-attachment(--pdf/--doc/--sheet/--zip/--image,
- * --uploading/--error) __icon __body __name __size __remove; --oc-attachment-progress while uploading.
- */
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<AttachmentFile>(), { progress: 0 })
-const emit = defineEmits<{ remove: [] }>()
-const meta = computed(() => attachmentMeta(props))
-const uploading = computed(() => props.state === 'uploading')
-const link = computed(() => !!props.href && !props.removable)
-</script>
-
-<template>
-  <component
-    :is="link ? 'a' : 'div'"
-    :class="['oc-attachment', meta.type && `oc-attachment--${meta.type}`, state && `oc-attachment--${state}`]"
-    :href="link ? href : undefined"
-    :download="link ? '' : undefined"
-    :style="uploading ? `--oc-attachment-progress:${progress}%` : undefined"
-  >
-    <span class="oc-attachment__icon" aria-hidden="true"><img v-if="image" :src="image" alt="" /><template v-else>{{ meta.ext }}</template></span>
-    <span class="oc-attachment__body">
-      <span class="oc-attachment__name">{{ name }}</span>
-      <span v-if="uploading" class="oc-attachment__size" role="status">{{ size ?? `Uploading… ${progress}%` }}</span>
-      <span v-else-if="size" class="oc-attachment__size">{{ size }}</span>
-    </span>
-    <button v-if="removable" type="button" class="oc-attachment__remove" :aria-label="removeLabel ?? (uploading ? `Cancel upload of ${name}` : `Remove ${name}`)" @click="emit('remove')">&#10005;</button>
-  </component>
-</template>
+<!-- File: packages/vue/src/components/OcAttachment.vue | Map: type / extension helpers -> props -> a[download] or div chip (icon, name, size, remove) -->
+<script lang="ts">
+export type AttachmentType = 'pdf' | 'doc' | 'sheet' | 'zip' | 'image'
+export interface AttachmentFile {
+  name: string
+  size?: string
+  type?: AttachmentType
+  ext?: string
+  href?: string
+  image?: string
+  state?: 'uploading' | 'error'
+  progress?: number
+  removable?: boolean
+  removeLabel?: string
+}
+const TYPES: Record<string, AttachmentType> = {
+  pdf: 'pdf', doc: 'doc', docx: 'doc', odt: 'doc', rtf: 'doc', txt: 'doc', xls: 'sheet', xlsx: 'sheet', csv: 'sheet', ods: 'sheet',
+  zip: 'zip', rar: 'zip', '7z': 'zip', gz: 'zip', jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', webp: 'image', heic: 'image', avif: 'image',
+}
+const extOf = (name: string) => (name.includes('.') ? name.split('.').pop()!.toLowerCase() : '')
+/** Icon text and tint of a file name (Plan.xlsx -> XLS, sheet). */
+export const attachmentMeta = (f: AttachmentFile) => ({
+  ext: f.ext ?? extOf(f.name).toUpperCase().replace(/^(DOC|XLS|PPT)X$/, '$1'),
+  type: f.type ?? TYPES[extOf(f.name)],
+})
+</script>
+
+<script setup lang="ts">
+/**
+ * File chip (same markup as snippets/attachment.html): icon tile by type, name, size, upload / error state and remove button.
+ * With href (and not removable) it is an <a download>. Emits: remove. Classes: .oc-attachment(--pdf/--doc/--sheet/--zip/--image,
+ * --uploading/--error) __icon __body __name __size __remove; --oc-attachment-progress while uploading.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<AttachmentFile>(), { progress: 0 })
+const emit = defineEmits<{ remove: [] }>()
+const meta = computed(() => attachmentMeta(props))
+const uploading = computed(() => props.state === 'uploading')
+const link = computed(() => !!props.href && !props.removable)
+</script>
+
+<template>
+  <component
+    :is="link ? 'a' : 'div'"
+    :class="['oc-attachment', meta.type && `oc-attachment--${meta.type}`, state && `oc-attachment--${state}`]"
+    :href="link ? href : undefined"
+    :download="link ? '' : undefined"
+    :style="uploading ? `--oc-attachment-progress:${progress}%` : undefined"
+  >
+    <span class="oc-attachment__icon" aria-hidden="true"><img v-if="image" :src="image" alt="" /><template v-else>{{ meta.ext }}</template></span>
+    <span class="oc-attachment__body">
+      <span class="oc-attachment__name">{{ name }}</span>
+      <span v-if="uploading" class="oc-attachment__size" role="status">{{ size ?? `Uploading… ${progress}%` }}</span>
+      <span v-else-if="size" class="oc-attachment__size">{{ size }}</span>
+    </span>
+    <button v-if="removable" type="button" class="oc-attachment__remove" :aria-label="removeLabel ?? (uploading ? `Cancel upload of ${name}` : `Remove ${name}`)" @click="emit('remove')">&#10005;</button>
+  </component>
+</template>

package/src/components/OcAttachmentImage.vue

@@ -1,13 +1,13 @@
-<!-- File: packages/vue/src/components/OcAttachmentImage.vue | Map: props -> a.oc-attachment-image (img or placeholder art, caption) -->
-<script setup lang="ts">
-/** Image preview inside a message (4 : 3, same markup as snippets/attachment.html). No src = placeholder art. Classes: .oc-attachment-image, __caption */
-defineProps<{ href?: string; src?: string; alt: string; art?: number; caption?: string }>()
-</script>
-
-<template>
-  <a class="oc-attachment-image" :href="href">
-    <img v-if="src" :src="src" :alt="alt" />
-    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
-    <span v-if="caption" class="oc-attachment-image__caption">{{ caption }}</span>
-  </a>
-</template>
+<!-- File: packages/vue/src/components/OcAttachmentImage.vue | Map: props -> a.oc-attachment-image (img or placeholder art, caption) -->
+<script setup lang="ts">
+/** Image preview inside a message (4 : 3, same markup as snippets/attachment.html). No src = placeholder art. Classes: .oc-attachment-image, __caption */
+defineProps<{ href?: string; src?: string; alt: string; art?: number; caption?: string }>()
+</script>
+
+<template>
+  <a class="oc-attachment-image" :href="href">
+    <img v-if="src" :src="src" :alt="alt" />
+    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
+    <span v-if="caption" class="oc-attachment-image__caption">{{ caption }}</span>
+  </a>
+</template>

package/src/components/OcAttachmentList.vue

@@ -1,31 +1,31 @@
-<!-- File: packages/vue/src/components/OcAttachmentList.vue | Map: props + demo files -> ul (li > chip) or div of chips -->
-<script setup lang="ts">
-/**
- * Wrapping row of file chips (snippets/attachment.html). items = AttachmentFile[] (demo files when empty); slot default replaces them.
- * stack = one per line. as = ul (default) or div. Emits: remove(file, index). Classes: .oc-attachment-list(--stack)
- */
-import OcAttachment, { type AttachmentFile } from './OcAttachment.vue'
-
-withDefaults(defineProps<{ items?: AttachmentFile[]; stack?: boolean; as?: 'ul' | 'div'; label?: string }>(), {
-  as: 'ul',
-  label: 'Files in this message',
-  items: () => [
-    { name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
-    { name: 'Measurements ground floor.xlsx', size: '86 KB', href: '#measurements.xlsx' },
-    { name: 'Contract addendum.docx', size: '240 KB', href: '#contract.docx' },
-    { name: 'Plans architect.zip', size: '14.8 MB', href: '#plans.zip' },
-  ],
-})
-const emit = defineEmits<{ remove: [file: AttachmentFile, index: number] }>()
-</script>
-
-<template>
-  <component :is="as" :class="['oc-attachment-list', stack && 'oc-attachment-list--stack']" :aria-label="label">
-    <slot>
-      <template v-for="(f, i) in items" :key="i">
-        <li v-if="as === 'ul'"><OcAttachment v-bind="f" @remove="emit('remove', f, i)" /></li>
-        <OcAttachment v-else v-bind="f" @remove="emit('remove', f, i)" />
-      </template>
-    </slot>
-  </component>
-</template>
+<!-- File: packages/vue/src/components/OcAttachmentList.vue | Map: props + demo files -> ul (li > chip) or div of chips -->
+<script setup lang="ts">
+/**
+ * Wrapping row of file chips (snippets/attachment.html). items = AttachmentFile[] (demo files when empty); slot default replaces them.
+ * stack = one per line. as = ul (default) or div. Emits: remove(file, index). Classes: .oc-attachment-list(--stack)
+ */
+import OcAttachment, { type AttachmentFile } from './OcAttachment.vue'
+
+withDefaults(defineProps<{ items?: AttachmentFile[]; stack?: boolean; as?: 'ul' | 'div'; label?: string }>(), {
+  as: 'ul',
+  label: 'Files in this message',
+  items: () => [
+    { name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
+    { name: 'Measurements ground floor.xlsx', size: '86 KB', href: '#measurements.xlsx' },
+    { name: 'Contract addendum.docx', size: '240 KB', href: '#contract.docx' },
+    { name: 'Plans architect.zip', size: '14.8 MB', href: '#plans.zip' },
+  ],
+})
+const emit = defineEmits<{ remove: [file: AttachmentFile, index: number] }>()
+</script>
+
+<template>
+  <component :is="as" :class="['oc-attachment-list', stack && 'oc-attachment-list--stack']" :aria-label="label">
+    <slot>
+      <template v-for="(f, i) in items" :key="i">
+        <li v-if="as === 'ul'"><OcAttachment v-bind="f" @remove="emit('remove', f, i)" /></li>
+        <OcAttachment v-else v-bind="f" @remove="emit('remove', f, i)" />
+      </template>
+    </slot>
+  </component>
+</template>

package/src/components/OcAttachmentThumb.vue

@@ -1,14 +1,14 @@
-<!-- File: packages/vue/src/components/OcAttachmentThumb.vue | Map: props -> .oc-attachment-thumb (img or placeholder art, remove button) -->
-<script setup lang="ts">
-/** Square thumbnail of a pasted screenshot (snippets/attachment.html). removeLabel adds the remove button. Emits: remove. */
-withDefaults(defineProps<{ src?: string; alt: string; art?: number; removeLabel?: string; as?: 'div' | 'span' }>(), { as: 'div' })
-const emit = defineEmits<{ remove: [] }>()
-</script>
-
-<template>
-  <component :is="as" class="oc-attachment-thumb">
-    <img v-if="src" :src="src" :alt="alt" />
-    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
-    <button v-if="removeLabel" type="button" class="oc-attachment__remove" :aria-label="removeLabel" @click="emit('remove')">&#10005;</button>
-  </component>
-</template>
+<!-- File: packages/vue/src/components/OcAttachmentThumb.vue | Map: props -> .oc-attachment-thumb (img or placeholder art, remove button) -->
+<script setup lang="ts">
+/** Square thumbnail of a pasted screenshot (snippets/attachment.html). removeLabel adds the remove button. Emits: remove. */
+withDefaults(defineProps<{ src?: string; alt: string; art?: number; removeLabel?: string; as?: 'div' | 'span' }>(), { as: 'div' })
+const emit = defineEmits<{ remove: [] }>()
+</script>
+
+<template>
+  <component :is="as" class="oc-attachment-thumb">
+    <img v-if="src" :src="src" :alt="alt" />
+    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
+    <button v-if="removeLabel" type="button" class="oc-attachment__remove" :aria-label="removeLabel" @click="emit('remove')">&#10005;</button>
+  </component>
+</template>

package/src/components/OcAvatar.vue

@@ -1,18 +1,18 @@
-<script setup lang="ts">
-/** Avatar (initials via the default slot, or an image via `src`). Classes: .oc-avatar--sm/lg/xl */
-withDefaults(
-  defineProps<{
-    size?: 'sm' | 'md' | 'lg' | 'xl'
-    src?: string
-    alt?: string
-  }>(),
-  { size: 'md', alt: '' },
-)
-</script>
-
-<template>
-  <span :class="['oc-avatar', size !== 'md' && `oc-avatar--${size}`]">
-    <img v-if="src" :src="src" :alt="alt" />
-    <slot v-else />
-  </span>
-</template>
+<script setup lang="ts">
+/** Avatar (initials via the default slot, or an image via `src`). Classes: .oc-avatar--sm/lg/xl */
+withDefaults(
+  defineProps<{
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+    src?: string
+    alt?: string
+  }>(),
+  { size: 'md', alt: '' },
+)
+</script>
+
+<template>
+  <span :class="['oc-avatar', size !== 'md' && `oc-avatar--${size}`]">
+    <img v-if="src" :src="src" :alt="alt" />
+    <slot v-else />
+  </span>
+</template>

package/src/components/OcAvatarGroup.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-/** Overlapping avatars. Put <OcAvatar> elements in the default slot. */
-</script>
-
-<template>
-  <div class="oc-avatar-group"><slot /></div>
-</template>
+<script setup lang="ts">
+/** Overlapping avatars. Put <OcAvatar> elements in the default slot. */
+</script>
+
+<template>
+  <div class="oc-avatar-group"><slot /></div>
+</template>

package/src/components/OcBackLink.vue

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-/** Outline link that names its destination (Back to Products). */
-withDefaults(defineProps<{ href?: string }>(), { href: '#' })
-</script>
-
-<template>
-  <a class="oc-back-link" :href="href"><slot /></a>
-</template>
+<script setup lang="ts">
+/** Outline link that names its destination (Back to Products). */
+withDefaults(defineProps<{ href?: string }>(), { href: '#' })
+</script>
+
+<template>
+  <a class="oc-back-link" :href="href"><slot /></a>
+</template>

package/src/components/OcBadge.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-/** Badge. Classes: .oc-badge + --secondary/--outline/--destructive/--success/--warning/--info */
-withDefaults(
-  defineProps<{
-    variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
-  }>(),
-  { variant: 'default' },
-)
-</script>
-
-<template>
-  <span :class="['oc-badge', variant !== 'default' && `oc-badge--${variant}`]"><slot /></span>
-</template>
+<script setup lang="ts">
+/** Badge. Classes: .oc-badge + --secondary/--outline/--destructive/--success/--warning/--info */
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
+  }>(),
+  { variant: 'default' },
+)
+</script>
+
+<template>
+  <span :class="['oc-badge', variant !== 'default' && `oc-badge--${variant}`]"><slot /></span>
+</template>

package/src/components/OcBarcodeInput.vue

@@ -1,51 +1,51 @@
-<!-- File: packages/vue/src/components/OcBarcodeInput.vue | Map: props + model -> template (label, digits-only field, preview figure + slot) -->
-<script setup lang="ts">
-/**
- * Barcode / EAN field with a preview. v-model: string (digits only).
- * Slot `preview`: your own <svg>/<canvas> barcode; default = decorative placeholder bars.
- * Same markup as packages/ui/snippets/barcode-input.html. class/style on the wrapper, other attributes on the input.
- */
-import { computed } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-import { useUid } from '../composables/useUid'
-
-defineOptions({ inheritAttrs: false })
-const props = withDefaults(defineProps<{ label?: string; id?: string; emptyText?: string; error?: boolean }>(), { emptyText: 'No code yet' })
-const model = defineModel<string>({ default: '' })
-const { root, control } = useAttrsSplit()
-const auto = useUid('oc-barcode')
-const inputId = computed(() => props.id ?? auto)
-
-function onInput(e: Event) {
-  const input = e.target as HTMLInputElement
-  model.value = input.value
-}
-</script>
-
-<template>
-  <div v-bind="root" class="oc-barcode-input">
-    <label v-if="label" class="oc-field-label" :for="inputId">{{ label }}</label>
-    <div class="oc-input-group oc-input-group--affix">
-      <span class="oc-input-addon" aria-hidden="true">
-        <svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z" /></svg>
-      </span>
-      <input
-        v-bind="control"
-        :id="inputId"
-        class="oc-input oc-barcode-input-field"
-        type="text"
-        autocomplete="off"
-        spellcheck="false"
-        maxlength="80"
-        placeholder="EAN-13 or internal code"
-        :aria-invalid="error ? 'true' : undefined"
-        :value="model"
-        @input="onInput"
-      />
-    </div>
-    <figure :class="['oc-barcode-preview', !model && 'oc-barcode-preview--empty']" aria-label="Barcode preview">
-      <slot name="preview"><div class="oc-barcode-preview-bars" aria-hidden="true"></div></slot>
-      <figcaption class="oc-barcode-preview-code">{{ model || emptyText }}</figcaption>
-    </figure>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcBarcodeInput.vue | Map: props + model -> template (label, digits-only field, preview figure + slot) -->
+<script setup lang="ts">
+/**
+ * Barcode / EAN field with a preview. v-model: string (digits only).
+ * Slot `preview`: your own <svg>/<canvas> barcode; default = decorative placeholder bars.
+ * Same markup as packages/ui/snippets/barcode-input.html. class/style on the wrapper, other attributes on the input.
+ */
+import { computed } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<{ label?: string; id?: string; emptyText?: string; error?: boolean }>(), { emptyText: 'No code yet' })
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+const auto = useUid('oc-barcode')
+const inputId = computed(() => props.id ?? auto)
+
+function onInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  model.value = input.value
+}
+</script>
+
+<template>
+  <div v-bind="root" class="oc-barcode-input">
+    <label v-if="label" class="oc-field-label" :for="inputId">{{ label }}</label>
+    <div class="oc-input-group oc-input-group--affix">
+      <span class="oc-input-addon" aria-hidden="true">
+        <svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z" /></svg>
+      </span>
+      <input
+        v-bind="control"
+        :id="inputId"
+        class="oc-input oc-barcode-input-field"
+        type="text"
+        autocomplete="off"
+        spellcheck="false"
+        maxlength="80"
+        placeholder="EAN-13 or internal code"
+        :aria-invalid="error ? 'true' : undefined"
+        :value="model"
+        @input="onInput"
+      />
+    </div>
+    <figure :class="['oc-barcode-preview', !model && 'oc-barcode-preview--empty']" aria-label="Barcode preview">
+      <slot name="preview"><div class="oc-barcode-preview-bars" aria-hidden="true"></div></slot>
+      <figcaption class="oc-barcode-preview-code">{{ model || emptyText }}</figcaption>
+    </figure>
+  </div>
+</template>

package/src/components/OcBreadcrumb.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-/** Breadcrumb. Pass `items` (the last one is the current page) or use the default slot. */
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string }>(), {
-  items: () => [],
-  label: 'Breadcrumb',
-})
-</script>
-
-<template>
-  <nav class="oc-breadcrumb" :aria-label="label">
-    <slot>
-      <template v-for="(item, i) in items" :key="i">
-        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href">{{ item.label }}</a>
-        <span v-else class="oc-breadcrumb-item" aria-current="page">{{ item.label }}</span>
-      </template>
-    </slot>
-  </nav>
-</template>
+<script setup lang="ts">
+/** Breadcrumb. Pass `items` (the last one is the current page) or use the default slot. */
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string }>(), {
+  items: () => [],
+  label: 'Breadcrumb',
+})
+</script>
+
+<template>
+  <nav class="oc-breadcrumb" :aria-label="label">
+    <slot>
+      <template v-for="(item, i) in items" :key="i">
+        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href">{{ item.label }}</a>
+        <span v-else class="oc-breadcrumb-item" aria-current="page">{{ item.label }}</span>
+      </template>
+    </slot>
+  </nav>
+</template>

package/src/components/OcBrowserFrame.vue

@@ -1,33 +1,33 @@
-<!-- File: packages/vue/src/components/OcBrowserFrame.vue | Map: props -> figure -> bar (dots, address, actions) -> view (slot or img) -> caption -->
-<script setup lang="ts">
-/**
- * Fake browser chrome (same markup as snippets/browser-frame.html).
- * Props: url (address pill), src / alt (screenshot), caption, minimal, dark, tilt, auto (free height), ratio ("16 / 9").
- * Slots: default (live content, replaces the screenshot), actions (glyphs right in the bar), caption.
- * Classes: .oc-browser-frame(--minimal/--dark/--tilt/--auto), __bar, __address, __actions, __view, __caption
- */
-withDefaults(
-  defineProps<{ url?: string; src?: string; alt?: string; caption?: string; minimal?: boolean; dark?: boolean; tilt?: boolean; auto?: boolean; ratio?: string }>(),
-  { alt: '' },
-)
-</script>
-
-<template>
-  <figure
-    :class="['oc-browser-frame', minimal && 'oc-browser-frame--minimal', dark && 'oc-browser-frame--dark', tilt && 'oc-browser-frame--tilt', auto && 'oc-browser-frame--auto']"
-    :style="ratio ? { '--oc-browser-frame-ratio': ratio } : undefined"
-  >
-    <div class="oc-browser-frame__bar">
-      <i /><i /><i />
-      <span v-if="url" class="oc-browser-frame__address">{{ url }}</span>
-      <span v-if="$slots.actions" class="oc-browser-frame__actions" aria-hidden="true"><slot name="actions" /></span>
-    </div>
-    <div class="oc-browser-frame__view">
-      <slot>
-        <img v-if="src" :src="src" :alt="alt" />
-        <div v-else class="oc-media-art" role="img" :aria-label="alt" />
-      </slot>
-    </div>
-    <figcaption v-if="caption || $slots.caption" class="oc-browser-frame__caption"><slot name="caption">{{ caption }}</slot></figcaption>
-  </figure>
-</template>
+<!-- File: packages/vue/src/components/OcBrowserFrame.vue | Map: props -> figure -> bar (dots, address, actions) -> view (slot or img) -> caption -->
+<script setup lang="ts">
+/**
+ * Fake browser chrome (same markup as snippets/browser-frame.html).
+ * Props: url (address pill), src / alt (screenshot), caption, minimal, dark, tilt, auto (free height), ratio ("16 / 9").
+ * Slots: default (live content, replaces the screenshot), actions (glyphs right in the bar), caption.
+ * Classes: .oc-browser-frame(--minimal/--dark/--tilt/--auto), __bar, __address, __actions, __view, __caption
+ */
+withDefaults(
+  defineProps<{ url?: string; src?: string; alt?: string; caption?: string; minimal?: boolean; dark?: boolean; tilt?: boolean; auto?: boolean; ratio?: string }>(),
+  { alt: '' },
+)
+</script>
+
+<template>
+  <figure
+    :class="['oc-browser-frame', minimal && 'oc-browser-frame--minimal', dark && 'oc-browser-frame--dark', tilt && 'oc-browser-frame--tilt', auto && 'oc-browser-frame--auto']"
+    :style="ratio ? { '--oc-browser-frame-ratio': ratio } : undefined"
+  >
+    <div class="oc-browser-frame__bar">
+      <i /><i /><i />
+      <span v-if="url" class="oc-browser-frame__address">{{ url }}</span>
+      <span v-if="$slots.actions" class="oc-browser-frame__actions" aria-hidden="true"><slot name="actions" /></span>
+    </div>
+    <div class="oc-browser-frame__view">
+      <slot>
+        <img v-if="src" :src="src" :alt="alt" />
+        <div v-else class="oc-media-art" role="img" :aria-label="alt" />
+      </slot>
+    </div>
+    <figcaption v-if="caption || $slots.caption" class="oc-browser-frame__caption"><slot name="caption">{{ caption }}</slot></figcaption>
+  </figure>
+</template>