@birdycom/omniaui-vue 0.12.1 → 0.12.3

package/manifest.json

@@ -324,6 +324,18 @@
       "file": "src/components/OcFormField.vue",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "OcGlass",
+      "kind": "component",
+      "file": "src/components/OcGlass.vue",
+      "snippet": "@birdycom/omniaui/snippets/glass.html"
+    },
+    {
+      "name": "OcGlassPanel",
+      "kind": "component",
+      "file": "src/components/OcGlassPanel.vue",
+      "snippet": "@birdycom/omniaui/snippets/glass.html"
+    },
     {
       "name": "OcGreeting",
       "kind": "component",
@@ -420,12 +432,24 @@
       "file": "src/components/OcLinkArrow.vue",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "OcLinkRow",
+      "kind": "component",
+      "file": "src/components/OcLinkRow.vue",
+      "snippet": "@birdycom/omniaui/snippets/link-row.html"
+    },
     {
       "name": "OcListToolbar",
       "kind": "component",
       "file": "src/components/OcListToolbar.vue",
       "snippet": "@birdycom/omniaui/snippets/list-toolbar.html"
     },
+    {
+      "name": "OcLiveFrame",
+      "kind": "component",
+      "file": "src/components/OcLiveFrame.vue",
+      "snippet": "@birdycom/omniaui/snippets/live-frame.html"
+    },
     {
       "name": "OcMarquee",
       "kind": "component",
@@ -702,6 +726,18 @@
       "file": "src/components/OcStatCard.vue",
       "snippet": "@birdycom/omniaui/snippets/stat-card.html"
     },
+    {
+      "name": "OcStatus",
+      "kind": "component",
+      "file": "src/components/OcStatus.vue",
+      "snippet": "@birdycom/omniaui/snippets/status-dot.html"
+    },
+    {
+      "name": "OcStatusDot",
+      "kind": "component",
+      "file": "src/components/OcStatusDot.vue",
+      "snippet": "@birdycom/omniaui/snippets/status-dot.html"
+    },
     {
       "name": "OcStepper",
       "kind": "component",
@@ -774,6 +810,30 @@
       "file": "src/components/OcTimeline.vue",
       "snippet": "@birdycom/omniaui/snippets/timeline.html"
     },
+    {
+      "name": "OcTitlebar",
+      "kind": "component",
+      "file": "src/components/OcTitlebar.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarBody",
+      "kind": "component",
+      "file": "src/components/OcTitlebarBody.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarButton",
+      "kind": "component",
+      "file": "src/components/OcTitlebarButton.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarWindow",
+      "kind": "component",
+      "file": "src/components/OcTitlebarWindow.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
     {
       "name": "OcToast",
       "kind": "component",
@@ -840,6 +900,12 @@
       "file": "src/components/OcVersionBanner.vue",
       "snippet": "@birdycom/omniaui/snippets/version-banner.html"
     },
+    {
+      "name": "OcWatermark",
+      "kind": "component",
+      "file": "src/components/OcWatermark.vue",
+      "snippet": "@birdycom/omniaui/snippets/watermark.html"
+    },
     {
       "name": "OcBlockAboutTimeline",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "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/components/OcAlert.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-/** Alert. Classes: .oc-alert--info/success/warning/danger. Default slot = description. */
+/** Alert. Classes: .oc-alert--info/success/warning/danger, --inline (compact, under a field). Default slot = description. */
 withDefaults(
   defineProps<{
     variant?: 'info' | 'success' | 'warning' | 'danger'
     title?: string
+    inline?: boolean
   }>(),
   { variant: 'info' },
 )
 </script>
 
 <template>
-  <div :class="['oc-alert', `oc-alert--${variant}`]" role="status">
+  <div :class="['oc-alert', `oc-alert--${variant}`, inline && 'oc-alert--inline']" :role="variant === 'danger' && inline ? 'alert' : 'status'">
     <h4 v-if="title || $slots.title" class="oc-alert-title"><slot name="title">{{ title }}</slot></h4>
     <p v-if="$slots.default" class="oc-alert-description"><slot /></p>
   </div>

package/src/components/OcButton.vue

@@ -2,7 +2,7 @@
 /**
  * Button. Renders <a> when `href` is set, otherwise <button>.
  * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
- * --xs/--sm/--lg, --icon, --pill
+ * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text)
  */
 withDefaults(
   defineProps<{
@@ -10,6 +10,7 @@ withDefaults(
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean
     pill?: boolean
+    inline?: boolean
     href?: string
     type?: 'button' | 'submit' | 'reset'
   }>(),
@@ -27,6 +28,7 @@ withDefaults(
       size !== 'md' && `oc-btn--${size}`,
       icon && 'oc-btn--icon',
       pill && 'oc-btn--pill',
+      inline && 'oc-btn--inline',
     ]"
   >
     <slot />
@@ -40,6 +42,7 @@ withDefaults(
       size !== 'md' && `oc-btn--${size}`,
       icon && 'oc-btn--icon',
       pill && 'oc-btn--pill',
+      inline && 'oc-btn--inline',
     ]"
   >
     <slot />

package/src/components/OcGlass.vue

@@ -0,0 +1,10 @@
+<!-- File: packages/vue/src/components/OcGlass.vue | Map: props (strong, flat, as) -> .oc-glass sheet -> default slot -->
+<script setup lang="ts">
+/** See-through glass sheet with a light top edge; .oc-card inside becomes a glass panel.
+ *  Classes: .oc-glass + --strong, --flat (desktop window where the OS draws the blur) */
+withDefaults(defineProps<{ strong?: boolean; flat?: boolean; as?: 'div' | 'section' | 'aside' | 'article' | 'main' }>(), { as: 'div' })
+</script>
+
+<template>
+  <component :is="as" :class="['oc-glass', strong && 'oc-glass--strong', flat && 'oc-glass--flat']"><slot /></component>
+</template>

package/src/components/OcGlassPanel.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcGlassPanel.vue | Map: props (strong) -> div.oc-glass-panel -> default slot -->
+<script setup lang="ts">
+/** A lighter layer inside a glass sheet. Classes: .oc-glass-panel(--strong) */
+defineProps<{ strong?: boolean }>()
+</script>
+
+<template>
+  <div :class="['oc-glass-panel', strong && 'oc-glass-panel--strong']"><slot /></div>
+</template>

package/src/components/OcLinkRow.vue

@@ -0,0 +1,19 @@
+<!-- File: packages/vue/src/components/OcLinkRow.vue | Map: props (links, tone, size) -> ul.oc-link-row -> li > a per link, or the slot -->
+<script setup lang="ts">
+/** A row of links under a card; external links get an arrow, github.com links the GitHub mark (CSS, by the href).
+ *  Classes: .oc-link-row + --accent/--muted, --sm/--lg */
+withDefaults(
+  defineProps<{ links?: { href: string; label: string }[]; tone?: 'default' | 'accent' | 'muted'; size?: 'sm' | 'default' | 'lg' }>(),
+  { tone: 'default', size: 'default' },
+)
+const external = (href: string) => /^https?:\/\//.test(href)
+</script>
+
+<template>
+  <ul :class="['oc-link-row', tone !== 'default' && `oc-link-row--${tone}`, size !== 'default' && `oc-link-row--${size}`]">
+    <template v-if="links">
+      <li v-for="(l, i) in links" :key="i"><a :href="l.href" :rel="external(l.href) ? 'noopener' : undefined">{{ l.label }}</a></li>
+    </template>
+    <slot v-else />
+  </ul>
+</template>

package/src/components/OcLiveFrame.vue

@@ -0,0 +1,21 @@
+<!-- File: packages/vue/src/components/OcLiveFrame.vue | Map: props (src, title, width, height, static) -> div.oc-live-frame -> iframe or slot -->
+<script setup lang="ts">
+/**
+ * A live page at a virtual size (default 1280x720), scaled down to the frame width in pure CSS. Without src the slot
+ * goes in (an <img>, <video> or .oc-live-frame__content). Classes: .oc-live-frame, --static, .oc-browser-frame__view
+ */
+withDefaults(
+  defineProps<{ src?: string; title?: string; width?: number; height?: number; static?: boolean; inBrowserFrame?: boolean }>(),
+  { title: '', width: 1280, height: 720, static: false, inBrowserFrame: false },
+)
+</script>
+
+<template>
+  <div
+    :class="[inBrowserFrame && 'oc-browser-frame__view', 'oc-live-frame', static && 'oc-live-frame--static']"
+    :style="{ '--oc-live-w': width, '--oc-live-h': height }"
+  >
+    <iframe v-if="src" :src="src" :title="title" loading="lazy" scrolling="no" :tabindex="static ? -1 : undefined" />
+    <slot v-else />
+  </div>
+</template>

package/src/components/OcProgress.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress-bar--success/warning/danger */
+/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress(--sm/--xs/--glow), .oc-progress-bar--success/warning/danger,
+ *  .oc-progress-marker. `levels`: warning from 70 %, danger from 90 % (or [warning, danger]); an explicit variant wins.
+ *  `marker`: a target point in the unit of `value`. */
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -7,15 +9,33 @@ const props = withDefaults(
     value: number
     max?: number
     variant?: 'default' | 'success' | 'warning' | 'danger'
+    size?: 'xs' | 'sm' | 'md'
+    glow?: boolean
+    levels?: boolean | [number, number]
+    marker?: number
     label?: string
   }>(),
-  { max: 100, variant: 'default' },
+  { max: 100, variant: 'default', size: 'md', levels: false },
 )
-const percent = computed(() => Math.min(100, Math.max(0, Math.round((props.value / props.max) * 100))))
+const pct = (v: number) => (props.max > 0 ? Math.min(100, Math.max(0, (v / props.max) * 100)) : 0)
+const percent = computed(() => Math.round(pct(props.value)))
+const tone = computed(() => {
+  if (props.variant !== 'default' || !props.levels) return props.variant
+  const [warn, danger] = props.levels === true ? [70, 90] : props.levels
+  return percent.value >= danger ? 'danger' : percent.value >= warn ? 'warning' : 'default'
+})
 </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
+    :class="['oc-progress', size !== 'md' && `oc-progress--${size}`, glow && 'oc-progress--glow']"
+    role="progressbar"
+    :aria-valuenow="value"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    :aria-label="label"
+  >
+    <div :class="['oc-progress-bar', tone !== 'default' && `oc-progress-bar--${tone}`]" :style="{ width: `${percent}%` }"></div>
+    <span v-if="marker != null" class="oc-progress-marker" :style="{ left: `${pct(marker)}%` }"></span>
   </div>
 </template>

package/src/components/OcProse.vue

@@ -2,10 +2,10 @@
 <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
+ * (put .oc-prose-lead on the intro paragraph); the snippet's demo article when empty. size: compact (widgets, 13 px) | sm | md | lg, full = no max width.
+ * Classes: .oc-prose(--compact/--sm/--lg/--full), .oc-prose-lead
  */
-withDefaults(defineProps<{ size?: 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
+withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
 </script>
 
 <template>

package/src/components/OcStatus.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcStatus.vue | Map: props (tone, meta) -> p.oc-status -> OcStatusDot + __text (slot) + __meta -->
+<script setup lang="ts">
+/** Status row: dot + one line of state text (slot, cuts off with …) + optional meta on the right.
+ *  Classes: .oc-status, .oc-status__text, .oc-status__meta */
+import OcStatusDot from './OcStatusDot.vue'
+
+withDefaults(defineProps<{ tone?: 'default' | 'working' | 'waiting' | 'done' | 'error' | 'idle'; meta?: string }>(), { tone: 'default' })
+</script>
+
+<template>
+  <p class="oc-status">
+    <OcStatusDot :tone="tone" />
+    <span class="oc-status__text"><slot /></span>
+    <span v-if="meta || $slots.meta" class="oc-status__meta"><slot name="meta">{{ meta }}</slot></span>
+  </p>
+</template>

package/src/components/OcStatusDot.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcStatusDot.vue | Map: props (tone, size, label) -> span.oc-status-dot (role="img" with a label, else aria-hidden) -->
+<script setup lang="ts">
+/** A live state light; --working pulses. With `label` the dot stands alone (role="img"), without it is decoration.
+ *  Classes: .oc-status-dot + --working/--waiting/--done/--error/--idle, --sm/--lg */
+withDefaults(
+  defineProps<{ tone?: 'default' | 'working' | 'waiting' | 'done' | 'error' | 'idle'; size?: 'sm' | 'md' | 'lg'; label?: string }>(),
+  { tone: 'default', size: 'md' },
+)
+</script>
+
+<template>
+  <span
+    :class="['oc-status-dot', tone !== 'default' && `oc-status-dot--${tone}`, size !== 'md' && `oc-status-dot--${size}`]"
+    :role="label ? 'img' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  ></span>
+</template>

package/src/components/OcTitlebar.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcTitlebar.vue | Map: props (title, subtitle, bordered, size) -> header.oc-titlebar -> __main (icon slot, title, subtitle) -> __actions (default slot) -->
+<script setup lang="ts">
+/** Drag area of a frameless desktop window (app-region: drag); buttons in it stay clickable.
+ *  Slots: icon, title, subtitle, default (the OcTitlebarButton actions).
+ *  Classes: .oc-titlebar(--bordered/--sm), __main, __icon, __title, __subtitle, __actions */
+withDefaults(defineProps<{ title?: string; subtitle?: string; bordered?: boolean; size?: 'sm' | 'md' }>(), { size: 'md' })
+</script>
+
+<template>
+  <header :class="['oc-titlebar', bordered && 'oc-titlebar--bordered', size === 'sm' && 'oc-titlebar--sm']">
+    <div class="oc-titlebar__main">
+      <span v-if="$slots.icon" class="oc-titlebar__icon" aria-hidden="true"><slot name="icon" /></span>
+      <span v-if="title || $slots.title" class="oc-titlebar__title"><slot name="title">{{ title }}</slot></span>
+      <span v-if="subtitle || $slots.subtitle" class="oc-titlebar__subtitle"><slot name="subtitle">{{ subtitle }}</slot></span>
+    </div>
+    <div v-if="$slots.default" class="oc-titlebar__actions"><slot /></div>
+  </header>
+</template>

package/src/components/OcTitlebarBody.vue

@@ -0,0 +1,8 @@
+<!-- File: packages/vue/src/components/OcTitlebarBody.vue | Map: div.oc-titlebar-body -> slot -->
+<script setup lang="ts">
+/** The part of the window that scrolls; the title bar gets its hairline once it does. Class: .oc-titlebar-body */
+</script>
+
+<template>
+  <div class="oc-titlebar-body"><slot /></div>
+</template>

package/src/components/OcTitlebarButton.vue

@@ -0,0 +1,10 @@
+<!-- File: packages/vue/src/components/OcTitlebarButton.vue | Map: props (label, close) -> button.oc-titlebar__btn -> slot (icon) -->
+<script setup lang="ts">
+/** Compact icon button in the title bar; `label` names it for screen readers, `close` turns it red on hover.
+ *  Classes: .oc-titlebar__btn(--close) */
+defineProps<{ label: string; close?: boolean }>()
+</script>
+
+<template>
+  <button type="button" :class="['oc-titlebar__btn', close && 'oc-titlebar__btn--close']" :aria-label="label" :title="label"><slot /></button>
+</template>

package/src/components/OcTitlebarWindow.vue

@@ -0,0 +1,8 @@
+<!-- File: packages/vue/src/components/OcTitlebarWindow.vue | Map: div.oc-titlebar-window -> slot (OcTitlebar + OcTitlebarBody) -->
+<script setup lang="ts">
+/** Column around the title bar and the body, so the bar sees the body scroll. Class: .oc-titlebar-window */
+</script>
+
+<template>
+  <div class="oc-titlebar-window"><slot /></div>
+</template>

package/src/components/OcWatermark.vue

@@ -0,0 +1,29 @@
+<!-- File: packages/vue/src/components/OcWatermark.vue | Map: props (text, variant, tone, repeat) -> span.oc-watermark (text once or tiled) -->
+<script setup lang="ts">
+/**
+ * Light text over its positioned parent (put it last inside an element with class="relative"). Click-through and
+ * aria-hidden. A logo or icon goes in the "mark" slot (<img> or <svg>) instead of text. Classes: .oc-watermark + --straight/--tile/--corner/--corner-top, --light/--primary/--destructive
+ */
+withDefaults(
+  defineProps<{
+    text?: string
+    variant?: 'diagonal' | 'straight' | 'tile' | 'corner' | 'corner-top'
+    tone?: 'default' | 'light' | 'primary' | 'destructive'
+    repeat?: number
+    mono?: boolean
+  }>(),
+  { text: 'Concept', variant: 'diagonal', tone: 'default', repeat: 12, mono: false },
+)
+</script>
+
+<template>
+  <span
+    :class="['oc-watermark', variant !== 'diagonal' && `oc-watermark--${variant}`, tone !== 'default' && `oc-watermark--${tone}`, mono && 'oc-watermark--mono']"
+    aria-hidden="true"
+  >
+    <template v-for="i in (variant === 'tile' ? Math.max(1, repeat) : 1)" :key="i">
+      <slot v-if="$slots.mark" name="mark" />
+      <span v-else><slot>{{ text }}</slot></span>
+    </template>
+  </span>
+</template>

package/src/index.ts

@@ -55,6 +55,8 @@ import OcFactList from './components/OcFactList.vue'
 import OcFilterCounts from './components/OcFilterCounts.vue'
 import OcFlipCard from './components/OcFlipCard.vue'
 import OcFormField from './components/OcFormField.vue'
+import OcGlass from './components/OcGlass.vue'
+import OcGlassPanel from './components/OcGlassPanel.vue'
 import OcGreeting from './components/OcGreeting.vue'
 import OcHeading from './components/OcHeading.vue'
 import OcHoverCard from './components/OcHoverCard.vue'
@@ -71,7 +73,9 @@ import OcLanguageSelect from './components/OcLanguageSelect.vue'
 import OcLauncherCard from './components/OcLauncherCard.vue'
 import OcLightbox from './components/OcLightbox.vue'
 import OcLinkArrow from './components/OcLinkArrow.vue'
+import OcLinkRow from './components/OcLinkRow.vue'
 import OcListToolbar from './components/OcListToolbar.vue'
+import OcLiveFrame from './components/OcLiveFrame.vue'
 import OcMarquee from './components/OcMarquee.vue'
 import OcMediaCard from './components/OcMediaCard.vue'
 import OcMediaRow from './components/OcMediaRow.vue'
@@ -118,6 +122,8 @@ import OcSpinner from './components/OcSpinner.vue'
 import OcStackCard from './components/OcStackCard.vue'
 import OcStackList from './components/OcStackList.vue'
 import OcStatCard from './components/OcStatCard.vue'
+import OcStatus from './components/OcStatus.vue'
+import OcStatusDot from './components/OcStatusDot.vue'
 import OcStepper from './components/OcStepper.vue'
 import OcSwitch from './components/OcSwitch.vue'
 import OcTable from './components/OcTable.vue'
@@ -130,6 +136,10 @@ import OcTextarea from './components/OcTextarea.vue'
 import OcThemeSwitch from './components/OcThemeSwitch.vue'
 import OcTimeInput from './components/OcTimeInput.vue'
 import OcTimeline from './components/OcTimeline.vue'
+import OcTitlebar from './components/OcTitlebar.vue'
+import OcTitlebarBody from './components/OcTitlebarBody.vue'
+import OcTitlebarButton from './components/OcTitlebarButton.vue'
+import OcTitlebarWindow from './components/OcTitlebarWindow.vue'
 import OcToast from './components/OcToast.vue'
 import OcToastContainer from './components/OcToastContainer.vue'
 import OcToggle from './components/OcToggle.vue'
@@ -141,6 +151,7 @@ import OcTree from './components/OcTree.vue'
 import OcUpgradeBanner from './components/OcUpgradeBanner.vue'
 import OcUser from './components/OcUser.vue'
 import OcVersionBanner from './components/OcVersionBanner.vue'
+import OcWatermark from './components/OcWatermark.vue'
 import OcBlockAboutTimeline from './blocks/OcBlockAboutTimeline.vue'
 import OcBlockAppHeader from './blocks/OcBlockAppHeader.vue'
 import OcBlockAppShell from './blocks/OcBlockAppShell.vue'
@@ -229,6 +240,8 @@ export {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcGlass,
+  OcGlassPanel,
   OcGreeting,
   OcHeading,
   OcHoverCard,
@@ -245,7 +258,9 @@ export {
   OcLauncherCard,
   OcLightbox,
   OcLinkArrow,
+  OcLinkRow,
   OcListToolbar,
+  OcLiveFrame,
   OcMarquee,
   OcMediaCard,
   OcMediaRow,
@@ -292,6 +307,8 @@ export {
   OcStackCard,
   OcStackList,
   OcStatCard,
+  OcStatus,
+  OcStatusDot,
   OcStepper,
   OcSwitch,
   OcTable,
@@ -304,6 +321,10 @@ export {
   OcThemeSwitch,
   OcTimeInput,
   OcTimeline,
+  OcTitlebar,
+  OcTitlebarBody,
+  OcTitlebarButton,
+  OcTitlebarWindow,
   OcToast,
   OcToastContainer,
   OcToggle,
@@ -315,6 +336,7 @@ export {
   OcUpgradeBanner,
   OcUser,
   OcVersionBanner,
+  OcWatermark,
   OcBlockAboutTimeline,
   OcBlockAppHeader,
   OcBlockAppShell,
@@ -459,6 +481,8 @@ export const components: Record<string, Component> = {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcGlass,
+  OcGlassPanel,
   OcGreeting,
   OcHeading,
   OcHoverCard,
@@ -475,7 +499,9 @@ export const components: Record<string, Component> = {
   OcLauncherCard,
   OcLightbox,
   OcLinkArrow,
+  OcLinkRow,
   OcListToolbar,
+  OcLiveFrame,
   OcMarquee,
   OcMediaCard,
   OcMediaRow,
@@ -522,6 +548,8 @@ export const components: Record<string, Component> = {
   OcStackCard,
   OcStackList,
   OcStatCard,
+  OcStatus,
+  OcStatusDot,
   OcStepper,
   OcSwitch,
   OcTable,
@@ -534,6 +562,10 @@ export const components: Record<string, Component> = {
   OcThemeSwitch,
   OcTimeInput,
   OcTimeline,
+  OcTitlebar,
+  OcTitlebarBody,
+  OcTitlebarButton,
+  OcTitlebarWindow,
   OcToast,
   OcToastContainer,
   OcToggle,
@@ -545,6 +577,7 @@ export const components: Record<string, Component> = {
   OcUpgradeBanner,
   OcUser,
   OcVersionBanner,
+  OcWatermark,
   OcBlockAboutTimeline,
   OcBlockAppHeader,
   OcBlockAppShell,