@sabrenski/spire-ui 0.0.1

package/src/components/Breadcrumb/Breadcrumb.test.ts

@@ -0,0 +1,342 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import BreadcrumbRoot from './BreadcrumbRoot.vue'
+import BreadcrumbList from './BreadcrumbList.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+import BreadcrumbLink from './BreadcrumbLink.vue'
+import BreadcrumbPage from './BreadcrumbPage.vue'
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
+import BreadcrumbEllipsis from './BreadcrumbEllipsis.vue'
+
+describe('BreadcrumbRoot', () => {
+  it('renders as nav element', () => {
+    const wrapper = mount(BreadcrumbRoot, {
+      slots: {
+        default: 'Content'
+      }
+    })
+    expect(wrapper.find('nav').exists()).toBe(true)
+  })
+
+  it('has aria-label for accessibility', () => {
+    const wrapper = mount(BreadcrumbRoot)
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Breadcrumb')
+  })
+
+  it('applies breadcrumb class', () => {
+    const wrapper = mount(BreadcrumbRoot)
+    expect(wrapper.find('nav').classes()).toContain('ui-breadcrumb')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BreadcrumbRoot, {
+      slots: {
+        default: '<span data-testid="content">Test</span>'
+      }
+    })
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+  })
+})
+
+describe('BreadcrumbList', () => {
+  it('renders as ordered list', () => {
+    const wrapper = mount(BreadcrumbList)
+    expect(wrapper.find('ol').exists()).toBe(true)
+  })
+
+  it('applies list class', () => {
+    const wrapper = mount(BreadcrumbList)
+    expect(wrapper.find('ol').classes()).toContain('ui-breadcrumb__list')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BreadcrumbList, {
+      slots: {
+        default: '<li data-testid="item">Item</li>'
+      }
+    })
+    expect(wrapper.find('[data-testid="item"]').exists()).toBe(true)
+  })
+})
+
+describe('BreadcrumbItem', () => {
+  it('renders as list item', () => {
+    const wrapper = mount(BreadcrumbItem)
+    expect(wrapper.find('li').exists()).toBe(true)
+  })
+
+  it('applies item class', () => {
+    const wrapper = mount(BreadcrumbItem)
+    expect(wrapper.find('li').classes()).toContain('ui-breadcrumb__item')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BreadcrumbItem, {
+      slots: {
+        default: '<a data-testid="link" href="/">Link</a>'
+      }
+    })
+    expect(wrapper.find('[data-testid="link"]').exists()).toBe(true)
+  })
+})
+
+describe('BreadcrumbLink', () => {
+  it('renders as anchor by default', () => {
+    const wrapper = mount(BreadcrumbLink, {
+      props: { href: '/' },
+      slots: { default: 'Home' }
+    })
+    expect(wrapper.find('a').exists()).toBe(true)
+  })
+
+  it('applies href attribute', () => {
+    const wrapper = mount(BreadcrumbLink, {
+      props: { href: '/products' },
+      slots: { default: 'Products' }
+    })
+    expect(wrapper.find('a').attributes('href')).toBe('/products')
+  })
+
+  it('renders as router-link when to prop is provided', () => {
+    const wrapper = mount(BreadcrumbLink, {
+      props: { to: '/settings' },
+      slots: { default: 'Settings' },
+      global: {
+        stubs: {
+          'router-link': {
+            template: '<a><slot /></a>'
+          }
+        }
+      }
+    })
+    expect(wrapper.find('a').exists()).toBe(true)
+  })
+
+  it('applies link class', () => {
+    const wrapper = mount(BreadcrumbLink, {
+      props: { href: '/' },
+      slots: { default: 'Home' }
+    })
+    expect(wrapper.find('a').classes()).toContain('ui-breadcrumb__link')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BreadcrumbLink, {
+      props: { href: '/' },
+      slots: { default: '<span data-testid="text">Home</span>' }
+    })
+    expect(wrapper.find('[data-testid="text"]').exists()).toBe(true)
+  })
+
+  it('renders custom component via as prop', () => {
+    const CustomLink = {
+      template: '<span class="custom-link"><slot /></span>'
+    }
+    const wrapper = mount(BreadcrumbLink, {
+      props: { as: CustomLink },
+      slots: { default: 'Custom' }
+    })
+    expect(wrapper.find('.custom-link').exists()).toBe(true)
+  })
+})
+
+describe('BreadcrumbPage', () => {
+  it('renders as span', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current Page' }
+    })
+    expect(wrapper.find('span').exists()).toBe(true)
+  })
+
+  it('has aria-current page attribute', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current Page' }
+    })
+    expect(wrapper.find('span').attributes('aria-current')).toBe('page')
+  })
+
+  it('has aria-disabled attribute', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current Page' }
+    })
+    expect(wrapper.find('span').attributes('aria-disabled')).toBe('true')
+  })
+
+  it('has role link', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current Page' }
+    })
+    expect(wrapper.find('span').attributes('role')).toBe('link')
+  })
+
+  it('applies page class', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current Page' }
+    })
+    expect(wrapper.find('span').classes()).toContain('ui-breadcrumb__page')
+  })
+})
+
+describe('BreadcrumbSeparator', () => {
+  it('renders as list item', () => {
+    const wrapper = mount(BreadcrumbSeparator)
+    expect(wrapper.find('li').exists()).toBe(true)
+  })
+
+  it('has aria-hidden for accessibility', () => {
+    const wrapper = mount(BreadcrumbSeparator)
+    expect(wrapper.find('li').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('has presentation role', () => {
+    const wrapper = mount(BreadcrumbSeparator)
+    expect(wrapper.find('li').attributes('role')).toBe('presentation')
+  })
+
+  it('applies separator class', () => {
+    const wrapper = mount(BreadcrumbSeparator)
+    expect(wrapper.find('li').classes()).toContain('ui-breadcrumb__separator')
+  })
+
+  it('renders default separator from root', () => {
+    const wrapper = mount(BreadcrumbRoot, {
+      props: { separator: '>' },
+      slots: {
+        default: () => h(BreadcrumbSeparator)
+      }
+    })
+    expect(wrapper.text()).toContain('>')
+  })
+
+  it('renders custom slot content', () => {
+    const wrapper = mount(BreadcrumbSeparator, {
+      slots: {
+        default: '<span data-testid="custom">/</span>'
+      }
+    })
+    expect(wrapper.find('[data-testid="custom"]').exists()).toBe(true)
+  })
+})
+
+describe('BreadcrumbEllipsis', () => {
+  it('renders as list item', () => {
+    const wrapper = mount(BreadcrumbEllipsis)
+    expect(wrapper.find('li').exists()).toBe(true)
+  })
+
+  it('renders static ellipsis without items', () => {
+    const wrapper = mount(BreadcrumbEllipsis)
+    expect(wrapper.find('.ui-breadcrumb__ellipsis-static').exists()).toBe(true)
+  })
+
+  it('renders dropdown trigger with items', () => {
+    const wrapper = mount(BreadcrumbEllipsis, {
+      props: {
+        items: [
+          { label: 'Products', href: '/products' },
+          { label: 'Category', href: '/products/category' }
+        ]
+      }
+    })
+    expect(wrapper.find('.ui-breadcrumb__ellipsis').exists()).toBe(true)
+  })
+
+  it('has aria-label on ellipsis button', () => {
+    const wrapper = mount(BreadcrumbEllipsis, {
+      props: {
+        items: [{ label: 'Products', href: '/products' }]
+      }
+    })
+    expect(wrapper.find('.ui-breadcrumb__ellipsis').attributes('aria-label')).toBe('Show more breadcrumbs')
+  })
+})
+
+describe('Breadcrumb composition', () => {
+  it('renders full breadcrumb structure', () => {
+    const wrapper = mount(BreadcrumbRoot, {
+      slots: {
+        default: () => h(BreadcrumbList, {}, () => [
+          h(BreadcrumbItem, {}, () => h(BreadcrumbLink, { href: '/' }, () => 'Home')),
+          h(BreadcrumbSeparator),
+          h(BreadcrumbItem, {}, () => h(BreadcrumbLink, { href: '/products' }, () => 'Products')),
+          h(BreadcrumbSeparator),
+          h(BreadcrumbItem, {}, () => h(BreadcrumbPage, {}, () => 'Widget'))
+        ])
+      }
+    })
+
+    expect(wrapper.find('nav').exists()).toBe(true)
+    expect(wrapper.find('ol').exists()).toBe(true)
+    expect(wrapper.findAll('li').length).toBe(5)
+    expect(wrapper.findAll('.ui-breadcrumb__link').length).toBe(2)
+    expect(wrapper.find('.ui-breadcrumb__page').exists()).toBe(true)
+    expect(wrapper.findAll('.ui-breadcrumb__separator').length).toBe(2)
+  })
+
+  it('renders with custom separator', () => {
+    const ChevronIcon = {
+      template: '<svg data-testid="chevron">→</svg>'
+    }
+
+    const wrapper = mount(BreadcrumbRoot, {
+      props: { separator: ChevronIcon },
+      slots: {
+        default: () => h(BreadcrumbList, {}, () => [
+          h(BreadcrumbItem, {}, () => h(BreadcrumbLink, { href: '/' }, () => 'Home')),
+          h(BreadcrumbSeparator),
+          h(BreadcrumbItem, {}, () => h(BreadcrumbPage, {}, () => 'Current'))
+        ])
+      }
+    })
+
+    expect(wrapper.find('[data-testid="chevron"]').exists()).toBe(true)
+  })
+
+  it('renders with ellipsis for collapsed items', () => {
+    const wrapper = mount(BreadcrumbRoot, {
+      slots: {
+        default: () => h(BreadcrumbList, {}, () => [
+          h(BreadcrumbItem, {}, () => h(BreadcrumbLink, { href: '/' }, () => 'Home')),
+          h(BreadcrumbSeparator),
+          h(BreadcrumbEllipsis, {
+            items: [
+              { label: 'Products', href: '/products' },
+              { label: 'Category', href: '/products/category' }
+            ]
+          }),
+          h(BreadcrumbSeparator),
+          h(BreadcrumbItem, {}, () => h(BreadcrumbPage, {}, () => 'Widget'))
+        ])
+      }
+    })
+
+    expect(wrapper.find('.ui-breadcrumb__ellipsis').exists()).toBe(true)
+    expect(wrapper.find('.ui-breadcrumb__page').text()).toBe('Widget')
+  })
+})
+
+describe('Breadcrumb accessibility', () => {
+  it('has proper landmark role', () => {
+    const wrapper = mount(BreadcrumbRoot)
+    expect(wrapper.find('nav').exists()).toBe(true)
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Breadcrumb')
+  })
+
+  it('uses ordered list for semantic structure', () => {
+    const wrapper = mount(BreadcrumbList)
+    expect(wrapper.find('ol').exists()).toBe(true)
+  })
+
+  it('current page has aria-current', () => {
+    const wrapper = mount(BreadcrumbPage, {
+      slots: { default: 'Current' }
+    })
+    expect(wrapper.find('[aria-current="page"]').exists()).toBe(true)
+  })
+
+  it('separators are hidden from screen readers', () => {
+    const wrapper = mount(BreadcrumbSeparator)
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+  })
+})

package/src/components/Breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { Dropdown, DropdownItem } from '../Dropdown'
+
+export interface BreadcrumbEllipsisItem {
+  /** Display label */
+  label: string
+  /** URL for standard anchor */
+  href?: string
+  /** Route location for vue-router (string or route object) */
+  to?: string | Record<string, unknown>
+}
+
+export interface BreadcrumbEllipsisProps {
+  /** Hidden breadcrumb items to show in dropdown */
+  items?: BreadcrumbEllipsisItem[]
+}
+
+const props = withDefaults(defineProps<BreadcrumbEllipsisProps>(), {
+  items: () => []
+})
+</script>
+
+<template>
+  <li class="ui-breadcrumb__item">
+    <Dropdown v-if="items.length > 0" placement="bottom-start">
+      <template #trigger>
+        <button
+          type="button"
+          class="ui-breadcrumb__ellipsis"
+          aria-label="Show more breadcrumbs"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="1.5" />
+            <circle cx="6" cy="12" r="1.5" />
+            <circle cx="18" cy="12" r="1.5" />
+          </svg>
+        </button>
+      </template>
+
+      <DropdownItem
+        v-for="(item, index) in items"
+        :key="index"
+        :href="item.href"
+        :to="item.to"
+      >
+        {{ item.label }}
+      </DropdownItem>
+    </Dropdown>
+
+    <span v-else class="ui-breadcrumb__ellipsis-static" aria-hidden="true">
+      <slot>…</slot>
+    </span>
+  </li>
+</template>
+
+<style scoped>
+.ui-breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--breadcrumb-ellipsis, var(--text-secondary));
+  cursor: pointer;
+  transition:
+    color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-breadcrumb__ellipsis:hover {
+  color: var(--breadcrumb-ellipsis-hover, var(--text-primary));
+  background-color: var(--breadcrumb-ellipsis-bg-hover, var(--surface-hover));
+}
+
+.ui-breadcrumb__ellipsis:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-breadcrumb__ellipsis-static {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1);
+  color: var(--breadcrumb-ellipsis, var(--text-secondary));
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <li class="ui-breadcrumb__item">
+    <slot />
+  </li>
+</template>
+
+<style scoped>
+.ui-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+
+export interface BreadcrumbLinkProps {
+  /** URL for standard anchor */
+  href?: string
+  /** Route location for vue-router (string or route object) */
+  to?: string | Record<string, unknown>
+  /** Custom component to render as */
+  as?: string | Component
+}
+
+const props = defineProps<BreadcrumbLinkProps>()
+
+const componentType = computed(() => {
+  if (props.as) return props.as
+  if (props.to) return 'router-link'
+  if (props.href) return 'a'
+  return 'a'
+})
+
+const linkProps = computed(() => {
+  if (props.to) {
+    return { to: props.to }
+  }
+  if (props.href) {
+    return { href: props.href }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    v-bind="linkProps"
+    class="ui-breadcrumb__link"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.ui-breadcrumb__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  margin: calc(var(--space-1) * -1);
+  color: var(--breadcrumb-link, var(--text-secondary));
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition:
+    color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-breadcrumb__link:hover {
+  color: var(--breadcrumb-link-hover, var(--text-primary));
+  text-decoration: underline;
+}
+
+.ui-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <ol class="ui-breadcrumb__list">
+    <slot />
+  </ol>
+</template>
+
+<style scoped>
+.ui-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    class="ui-breadcrumb__page"
+  >
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.ui-breadcrumb__page {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  margin: calc(var(--space-1) * -1);
+  color: var(--breadcrumb-current, var(--text-primary));
+  font-weight: var(--font-medium);
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbRoot.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { provide, useSlots } from 'vue'
+import { BreadcrumbKey } from './keys'
+import type { Component, VNode } from 'vue'
+
+export interface BreadcrumbRootProps {
+  /** Custom separator component or string */
+  separator?: Component | string | (() => VNode)
+}
+
+const props = withDefaults(defineProps<BreadcrumbRootProps>(), {
+  separator: '/'
+})
+
+defineSlots<{
+  default?(): unknown
+  separator?(): unknown
+}>()
+
+const slots = useSlots()
+
+provide(BreadcrumbKey, {
+  separator: (slots as Record<string, unknown>).separator
+    ? () => (slots as { separator: () => VNode[] }).separator()
+    : props.separator
+})
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" class="ui-breadcrumb">
+    <slot />
+  </nav>
+</template>
+
+<style scoped>
+.ui-breadcrumb {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+}
+</style>

package/src/components/Breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { inject, useSlots, h, isVNode } from 'vue'
+import type { Component, VNode } from 'vue'
+import { BreadcrumbKey } from './keys'
+
+defineSlots<{
+  default(): unknown
+}>()
+
+const breadcrumb = inject(BreadcrumbKey)
+const slots = useSlots() as { default?: () => VNode[] }
+
+function renderSeparator(): VNode | string {
+  if (slots.default) {
+    return slots.default()[0]
+  }
+
+  if (!breadcrumb) {
+    return '/'
+  }
+
+  const sep = breadcrumb.separator
+
+  if (typeof sep === 'string') {
+    return sep
+  }
+
+  if (typeof sep === 'function') {
+    const result = (sep as () => VNode | VNode[])()
+    if (isVNode(result)) {
+      return result
+    }
+    if (Array.isArray(result) && result.length > 0) {
+      return result[0]
+    }
+  }
+
+  return h(sep as Component)
+}
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    class="ui-breadcrumb__separator"
+  >
+    <component :is="() => renderSeparator()" />
+  </li>
+</template>
+
+<style scoped>
+.ui-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumb-separator, var(--text-tertiary));
+}
+
+.ui-breadcrumb__separator :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,13 @@
+export { default as BreadcrumbRoot } from './BreadcrumbRoot.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+
+export type { BreadcrumbRootProps } from './BreadcrumbRoot.vue'
+export type { BreadcrumbLinkProps } from './BreadcrumbLink.vue'
+export type { BreadcrumbEllipsisProps, BreadcrumbEllipsisItem } from './BreadcrumbEllipsis.vue'
+export type { BreadcrumbContext } from './keys'
+export { BreadcrumbKey } from './keys'

package/src/components/Breadcrumb/keys.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Component, VNode } from 'vue'
+
+export interface BreadcrumbContext {
+  separator: Component | string | (() => VNode)
+}
+
+export const BreadcrumbKey: InjectionKey<BreadcrumbContext> = Symbol('breadcrumb')