@indielayer/ui 1.18.1 → 2.1.0

package/docs/components/common/ExampleBlocks.vue

@@ -1,6 +1,31 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue'
 
+/** Generic silhouette placeholder (no external image). */
+const exampleAvatar =
+  'data:image/svg+xml,' + encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" role="img" aria-label="Placeholder avatar">'
+    + '<rect width="80" height="80" fill="#0f766e"/>'
+    + '<circle cx="40" cy="28" r="14" fill="#ccfbf1"/>'
+    + '<ellipse cx="40" cy="88" rx="32" ry="36" fill="#ccfbf1"/>'
+    + '</svg>',
+  )
+
+const TRACKS = [
+  { title: 'Neon Gridlock', artist: 'VOIDRUNNER' },
+  { title: 'Pulsewidth 303', artist: 'KryoTek Unit' },
+  { title: 'Sub-Basement FM', artist: 'Driftvector' },
+  { title: 'Chrome & Concrete', artist: 'Null Sector' },
+  { title: '4AM Warehouse', artist: 'Phase-Locked Loop' },
+  { title: 'Resonant Cage', artist: 'Hexaflux' },
+  { title: 'Dry Ice Protocol', artist: 'Tin Manifold' },
+  { title: 'BPM 128 (Locked)', artist: 'Cyanline' },
+  { title: 'Ghost in the Mixer', artist: 'Modul_8' },
+  { title: 'Afterhours Telemetry', artist: 'NØVA CACHE' },
+] as const
+
+const nowPlaying = ref(TRACKS[Math.floor(Math.random() * TRACKS.length)]!)
+
 const selected = ref('A')
 const options = [{
   value: 'A',
@@ -16,15 +41,123 @@ const password = ref('')
 const slider = ref(80)
 const isPlaying = ref(false)
 let interval: ReturnType<typeof setInterval> | null = null
+let audioContext: AudioContext | null = null
+let masterGain: GainNode | null = null
+let sequencerStep = 0
+
+const BPM = 128
+const STEPS_PER_BAR = 16
+const KICK_PATTERN = [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0]
+const HAT_PATTERN = [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0]
+const BASS_PATTERN = [0, 7, 0, 10, 0, 7, 0, 5, 0, 7, 0, 10, 0, 7, 0, 3]
+
+function ensureAudioEngine() {
+  if (audioContext) return
+  const Context = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext; }).webkitAudioContext
+
+  if (!Context) return
+
+  audioContext = new Context()
+  masterGain = audioContext.createGain()
+  masterGain.gain.value = 0.2
+  masterGain.connect(audioContext.destination)
+}
+
+function triggerKick(time: number) {
+  if (!audioContext || !masterGain) return
+  const osc = audioContext.createOscillator()
+  const gain = audioContext.createGain()
+
+  osc.type = 'sine'
+  osc.frequency.setValueAtTime(140, time)
+  osc.frequency.exponentialRampToValueAtTime(48, time + 0.12)
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.9, time + 0.01)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.12)
+  osc.connect(gain).connect(masterGain)
+  osc.start(time)
+  osc.stop(time + 0.13)
+}
+
+function triggerHat(time: number) {
+  if (!audioContext || !masterGain) return
+  const bufferSize = Math.floor(audioContext.sampleRate * 0.03)
+  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate)
+  const channel = buffer.getChannelData(0)
+
+  for (let i = 0; i < bufferSize; i += 1) {
+    channel[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize)
+  }
 
-function togglePlayer() {
+  const source = audioContext.createBufferSource()
+  const bandPass = audioContext.createBiquadFilter()
+  const gain = audioContext.createGain()
+
+  source.buffer = buffer
+  bandPass.type = 'highpass'
+  bandPass.frequency.value = 7000
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.2, time + 0.004)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.03)
+  source.connect(bandPass).connect(gain).connect(masterGain)
+  source.start(time)
+  source.stop(time + 0.035)
+}
+
+function triggerBass(time: number, semitone: number) {
+  if (!audioContext || !masterGain) return
+  const osc = audioContext.createOscillator()
+  const filter = audioContext.createBiquadFilter()
+  const gain = audioContext.createGain()
+  const baseHz = 55
+  const frequency = baseHz * 2 ** (semitone / 12)
+
+  osc.type = 'sawtooth'
+  osc.frequency.setValueAtTime(frequency, time)
+  filter.type = 'lowpass'
+  filter.frequency.setValueAtTime(220, time)
+  filter.Q.value = 5
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.22, time + 0.01)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.18)
+  osc.connect(filter).connect(gain).connect(masterGain)
+  osc.start(time)
+  osc.stop(time + 0.2)
+}
+
+function tickSequencer() {
+  if (!audioContext) return
+  const step = sequencerStep % STEPS_PER_BAR
+  const now = audioContext.currentTime
+  const hitTime = now + 0.01
+
+  if (KICK_PATTERN[step]) triggerKick(hitTime)
+  if (HAT_PATTERN[step]) triggerHat(hitTime)
+  const bassNote = BASS_PATTERN[step]
+
+  if (bassNote > 0) triggerBass(hitTime, bassNote)
+
+  slider.value = (slider.value + 1) % 100
+  sequencerStep += 1
+}
+
+async function togglePlayer() {
   if (isPlaying.value) {
     if (interval) clearInterval(interval)
     interval = null
+    masterGain?.gain.cancelScheduledValues(0)
+    masterGain?.gain.setTargetAtTime(0.0001, audioContext?.currentTime ?? 0, 0.02)
   } else {
-    interval = setInterval(() => {
-      slider.value += 1
-    }, 1000)
+    ensureAudioEngine()
+    if (!audioContext || !masterGain) return
+    if (audioContext.state === 'suspended') {
+      await audioContext.resume()
+    }
+    masterGain.gain.cancelScheduledValues(audioContext.currentTime)
+    masterGain.gain.setTargetAtTime(0.2, audioContext.currentTime, 0.03)
+    const stepMs = ((60 / BPM) / 4) * 1000
+
+    interval = setInterval(tickSequencer, stepMs)
   }
 
   isPlaying.value = !isPlaying.value
@@ -32,6 +165,12 @@ function togglePlayer() {
 
 onBeforeUnmount(() => {
   if (interval) clearInterval(interval)
+  interval = null
+  if (audioContext) {
+    void audioContext.close()
+    audioContext = null
+    masterGain = null
+  }
 })
 </script>
 
@@ -57,7 +196,7 @@ onBeforeUnmount(() => {
       </div>
       <x-card class="p-4 flex items-center mt-4">
         <x-badge outlined position="bottom">
-          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" rounded/>
+          <x-avatar :image="exampleAvatar" rounded/>
         </x-badge>
         <div class="ml-4">
           <div class="font-bold">John Smith</div>
@@ -78,10 +217,10 @@ onBeforeUnmount(() => {
       </div>
       <x-card flat class="border mt-4">
         <div class="p-2 flex items-center">
-          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" size="lg"/>
+          <x-avatar :image="exampleAvatar" size="lg"/>
           <div class="ml-4">
-            <div class="font-bold">Holding back</div>
-            <div class="text-gray-400 text-sm">BANKS</div>
+            <div class="font-bold">{{ nowPlaying.title }}</div>
+            <div class="text-gray-400 text-sm">{{ nowPlaying.artist }}</div>
           </div>
         </div>
         <x-divider/>

package/docs/components/menu/DocsMenu.vue

@@ -18,6 +18,7 @@ const components = [
       { to: '/component/datepicker', label: 'Datepicker' },
       { to: '/component/form', label: 'Form' },
       { to: '/component/formGroup', label: 'Form Group' },
+      { to: '/component/inputGroup', label: 'Input Group' },
       { to: '/component/input', label: 'Input' },
       { to: '/component/radio', label: 'Radio' },
       { to: '/component/select', label: 'Select' },
@@ -40,9 +41,9 @@ const components = [
       { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
       { to: '/component/card', label: 'Card' },
       { to: '/component/carousel', label: 'Carousel' },
-      { to: '/component/container', label: 'Container' },
       { to: '/component/divider', label: 'Divider' },
       { to: '/component/drawer', label: 'Drawer' },
+      { to: '/component/empty', label: 'Empty' },
       { to: '/component/icon', label: 'Icon' },
       { to: '/component/image', label: 'Image' },
       { to: '/component/loader', label: 'Loader' },
@@ -69,6 +70,7 @@ const components = [
     collapseIcon: 'chevron-down',
     expanded: true,
     items: [
+      { to: '/component/container', label: 'Container' },
       { to: '/component/infiniteLoader', label: 'Infinite Loader' },
       { to: '/component/scroll', label: 'Scroll' },
       { to: '/component/spacer', label: 'Spacer' },

package/docs/components/toolbar/PreToolbar.vue

@@ -7,7 +7,7 @@ import ToolbarColorToggle from './ToolbarColorToggle.vue'
     <div class="flex justify-items-center items-center py-2 text-slate-500 dark:text-slate-300 h-10 text-sm">
       <toolbar-color-toggle class="shrink-0" />
       <p class="text-secondary-300 font-semibold mx-2 truncate">
-        Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 3. ⚡️ &nbsp;Build and prototype fast web applications.
+        Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️ &nbsp;Build and prototype fast web applications.
       </p>
       <x-spacer/>
       <a target="_blank" class="shrink-0" href="https://github.com/indielayer"><x-icon size="sm" icon="github"/></a>

package/docs/components/toolbar/Toolbar.vue

@@ -65,7 +65,7 @@ const isDev = import.meta.env.DEV
   </x-container>
 </template>
 
-<style lang="postcss">
+<style>
 .logo-white {
   display: none;
 }

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -1,41 +1,52 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const colorMode = ref('light')
 
-try {
-  const storedMode = localStorage.getItem('color-mode')
+function updateMode() {
+  if (typeof document === 'undefined') return
+
+  colorMode.value === 'light'
+    ? document.querySelector('html')?.classList.remove('dark')
+    : document.querySelector('html')?.classList.add('dark')
+}
+
+function readInitialMode() {
+  if (import.meta.env.SSR || typeof localStorage === 'undefined') return 'light'
+
+  try {
+    const storedMode = localStorage.getItem('color-mode')
+
+    if (storedMode) return storedMode
 
-  if (storedMode) {
-    colorMode.value = storedMode
-  } else {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      colorMode.value = 'dark'
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
     }
+  } catch {
+    // ignore
   }
-} catch (e) {
-  colorMode.value = 'light'
+
+  return 'light'
 }
 
-updateMode()
+onMounted(() => {
+  colorMode.value = readInitialMode()
+  updateMode()
+})
 
 function toggle() {
   colorMode.value = (colorMode.value === 'light') ? 'dark' : 'light'
 
   updateMode()
 
+  if (import.meta.env.SSR || typeof localStorage === 'undefined') return
+
   try {
     localStorage.setItem('color-mode', colorMode.value)
-  } catch (e) {
+  } catch {
     colorMode.value = 'light'
   }
 }
-
-function updateMode() {
-  colorMode.value === 'light'
-    ? document.querySelector('html')?.classList.remove('dark')
-    : document.querySelector('html')?.classList.add('dark')
-}
 </script>
 
 <template>

package/docs/components/toolbar/ToolbarSearch.vue

@@ -133,7 +133,9 @@ function keydownInput(e: KeyboardEvent) {
   }
 }
 
-const { x: mouseX, y: mouseY } = useMouse({ type: 'page' })
+const { x: mouseX, y: mouseY } = import.meta.env.SSR
+  ? { x: ref(0), y: ref(0) }
+  : useMouse({ type: 'page' })
 
 function hoverResult(e: MouseEvent) {
   if (mouseX.value !== e.x || mouseY.value !== e.y) {
@@ -169,16 +171,14 @@ const metaKey = ref('')
 
 onMounted(() => {
   metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
-})
 
-if (document) {
   useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
       e.preventDefault()
       openSearch()
     }
   })
-}
+})
 </script>
 
 <template>
@@ -241,11 +241,11 @@ if (document) {
 
     <template #actions>
       <footer class="w-full flex gap-2 items-center justify-center">
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#8626;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#8626;</span>
         <span class="text-xs">to select</span>
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#11139;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#11139;</span>
         <span class="text-xs">to navigate</span>
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#9243;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#9243;</span>
         <span class="text-xs">to close</span>
       </footer>
     </template>

package/docs/composables/useDocMeta.ts

@@ -3,7 +3,7 @@ import { useHead } from '@unhead/vue'
 const SITE_URL = 'https://indielayer.com'
 const SITE_NAME = 'Indielayer'
 const DEFAULT_OG_IMAGE = `${SITE_URL}/card.jpg`
-const DEFAULT_KEYWORDS = 'indielayer, vue, vue 3, nuxt, nuxt 3, tailwind css, ui kit, ui library, ui components, component library'
+const LLMS_TXT = `${SITE_URL}/llms.txt`
 
 export function useDocMeta(options: {
   title: string;
@@ -17,12 +17,67 @@ export function useDocMeta(options: {
   const description = options.description
     || 'Vue 3 and Tailwind CSS UI components for fast web applications.'
   const url = options.path ? `${SITE_URL}${options.path}` : SITE_URL
+  const isComponent = Boolean(options.path?.startsWith('/component/'))
+  const componentSlug = isComponent ? options.path!.replace('/component/', '') : null
+  const markdownUrl = componentSlug
+    ? `${SITE_URL}/md/component/${componentSlug}.md`
+    : undefined
+
+  const breadcrumbItems = [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: 'Docs',
+      item: `${SITE_URL}/getting-started`,
+    },
+  ]
+
+  if (isComponent && options.title) {
+    breadcrumbItems.push({
+      '@type': 'ListItem',
+      position: 2,
+      name: options.title,
+      item: url,
+    })
+  }
+
+  const schema = [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'WebPage',
+      name: pageTitle,
+      description,
+      url,
+      isPartOf: {
+        '@type': 'WebSite',
+        name: SITE_NAME,
+        url: SITE_URL,
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: breadcrumbItems,
+    },
+  ]
+
+  const links: Array<Record<string, string>> = [
+    { rel: 'canonical', href: url },
+    { rel: 'describedby', href: LLMS_TXT },
+  ]
+
+  if (markdownUrl) {
+    links.push({
+      rel: 'alternate',
+      type: 'text/markdown',
+      href: markdownUrl,
+    })
+  }
 
   useHead({
     title: pageTitle,
     meta: [
       { name: 'description', content: description },
-      { name: 'keywords', content: DEFAULT_KEYWORDS },
       { property: 'og:site_name', content: SITE_NAME },
       { property: 'og:title', content: pageTitle },
       { property: 'og:description', content: description },
@@ -40,8 +95,12 @@ export function useDocMeta(options: {
       { name: 'twitter:title', content: pageTitle },
       { name: 'twitter:description', content: description },
     ],
-    link: [
-      { rel: 'canonical', href: url },
+    link: links,
+    script: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify(schema),
+      },
     ],
   })
 }

package/docs/icons.ts

@@ -78,6 +78,9 @@ export default {
   'refresh-cw':'<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>',
   'arrow-right': '<line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline>',
   'arrow-left': '<line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>',
+  'external-link': '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>',
+  sparkles: '<path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M19 14l.75 2.25L22 17l-2.25.75L19 20l-.75-2.25L16 17l2.25-.75L19 14z"/><path d="M5 15l.75 2.25L8 18l-2.25.75L5 21l-.75-2.25L2 18l2.25-.75L5 15z"/>',
   'wrench': '<path d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z" /><path d="M4.867 19.125h.008v.008h-.008v-.008z" />',
 
   /**

package/docs/main.ts

@@ -1,8 +1,7 @@
-import { createApp } from 'vue'
-import { createHead } from '@unhead/vue/client'
+import { ViteSSG } from 'vite-ssg'
 import UI, { BaseTheme } from '@indielayer/ui'
 import App from './App.vue'
-import router from './router'
+import { routes, scrollBehavior } from './router'
 import icons from './icons'
 
 // global components
@@ -12,27 +11,32 @@ import MultiSnippet from './components/common/MultiSnippet.vue'
 import CodePreview from './components/common/CodePreview.vue'
 import DocumentPage from './components/common/DocumentPage.vue'
 import DocsHero from './components/common/DocsHero.vue'
+import DocsCopyPage from './components/common/DocsCopyPage.vue'
 
 // css
 import './assets/css/tailwind.css'
 
-const app = createApp(App)
-const head = createHead()
+export const createApp = ViteSSG(
+  App,
+  {
+    routes,
+    scrollBehavior,
+    base: import.meta.env.BASE_URL,
+  },
+  ({ app }) => {
+    app.use(UI, {
+      prefix: 'X',
+      icons,
+      theme: BaseTheme,
+      defaults: {},
+    })
 
-app.use(head)
-app.use(UI, {
-  prefix: 'X',
-  icons,
-  theme: BaseTheme,
-})
-
-app.use(router)
-
-app.component('CopyButton', CopyButton)
-app.component('CodeSnippet', CodeSnippet)
-app.component('MultiSnippet', MultiSnippet)
-app.component('CodePreview', CodePreview)
-app.component('DocumentPage', DocumentPage)
-app.component('DocsHero', DocsHero)
-
-app.mount('#app')
+    app.component('CopyButton', CopyButton)
+    app.component('CodeSnippet', CodeSnippet)
+    app.component('MultiSnippet', MultiSnippet)
+    app.component('CodePreview', CodePreview)
+    app.component('DocumentPage', DocumentPage)
+    app.component('DocsHero', DocsHero)
+    app.component('DocsCopyPage', DocsCopyPage)
+  },
+)

package/docs/pages/colors.vue

@@ -27,6 +27,15 @@ function copyPalette(val: any) {
 
   notifications?.success('Copied to clipboard!')
 }
+
+const tailwindThemeSnippet = `/* src/assets/tailwind.css — after @import "@indielayer/ui/tailwind.css" */
+@theme {
+  --color-primary-500: var(--color-emerald-500);
+  --color-secondary-500: var(--color-slate-500);
+  --color-success-500: var(--color-green-500);
+  --color-warning-500: var(--color-yellow-500);
+  --color-error-500: var(--color-red-500);
+}`
 </script>
 
 <template>
@@ -90,25 +99,8 @@ app.use(UI, {
 
     <div>
       <code-snippet
-        lang="js"
-        :code="`// tailwind.config.js
-//...
-const colors = require('tailwindcss/colors')
-
-module.exports = {
-  //...
-  theme: {
-    extend: {
-      colors: {
-        primary: colors.emerald,
-        secondary: colors.slate,
-        success: colors.green,
-        warning: colors.yellow,
-        error: colors.red,
-      },
-    },
-  },
-}`"
+        lang="css"
+        :code="tailwindThemeSnippet"
       />
     </div>
 

package/docs/pages/component/accordion/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Accordion'
-const description = 'Accordion is a component that allows you to collapse and expand content.'
+const description = 'Collapsible panels for showing and hiding related content. Use x-accordion with x-accordion-item when space is limited and users need progressive disclosure.'
 const components = [XAccordion, XAccordionItem]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/alert/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Alert'
-const description = 'Alerts are used to communicate a state that affects a system, feature or page.'
+const description = 'Inline notices for system, feature, or page status—success, warning, error, or info. Use alerts when the message should stay visible until addressed.'
 const components = [XAlert]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/avatar/index.vue

@@ -8,21 +8,21 @@ import SizeDemoCode from './size.vue?raw'
 import SizeDemo from './size.vue'
 
 const title = 'Avatar'
-const description = 'Avatars are used to represent a user.'
+const description = 'Displays a user\'s photo, initials, or icon in a compact frame. Use avatars in lists, headers, and comments to identify people at a glance.'
 const components = [XAvatar]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Variants',
-  description: '',
+  description: 'Color and style variants.',
   code: VariantsDemoCode,
   component: VariantsDemo,
 }, {
   name: 'Size',
-  description: '',
+  description: 'Size options from xs to lg.',
   code: SizeDemoCode,
   component: SizeDemo,
 }]

package/docs/pages/component/badge/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Badge'
-const description = 'Badges are used to display a small amount of information.'
+const description = 'Small status indicators that overlay or sit beside another element—counts, labels, or presence dots. Use badges to draw attention without interrupting the layout.'
 const components = [XBadge]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/breadcrumbs/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Breadcrumbs'
-const description = 'Breadcrumbs are used to indicate the current page\'s location within a navigational hierarchy.'
+const description = 'Shows the current page\'s place in a navigational hierarchy. Use breadcrumbs for deep page trees so users can jump back to parent sections.'
 const components = [XBreadcrumbs]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/button/button-group.vue

@@ -10,9 +10,9 @@
       <x-button>right</x-button>
     </x-button-group>
     <x-button-group color="primary" light outlined>
-      <x-button icon="edit"/>
-      <x-button icon="code"/>
-      <x-button icon="smile"/>
+      <x-button icon="edit" tooltip="Edit" />
+      <x-button icon="code" tooltip="Code" />
+      <x-button icon="smile" tooltip="Smile" />
     </x-button-group>
     <x-button-group color="indigo" outlined disabled>
       <x-button>left</x-button>