@sabrenski/spire-ui 0.0.1

package/src/components/Tabs/Tabs.test.ts

@@ -0,0 +1,363 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Tabs from './Tabs.vue'
+
+const defaultItems = [
+  { label: 'Tab 1', value: 'tab1' },
+  { label: 'Tab 2', value: 'tab2' },
+  { label: 'Tab 3', value: 'tab3' }
+]
+
+// Mock ResizeObserver
+class ResizeObserverMock {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+}
+
+beforeEach(() => {
+  global.ResizeObserver = ResizeObserverMock as any
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('Tabs', () => {
+  describe('Rendering', () => {
+    it('renders tab list with correct role', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
+    })
+
+    it('renders all tab buttons', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs).toHaveLength(3)
+    })
+
+    it('renders tab labels', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      expect(wrapper.text()).toContain('Tab 1')
+      expect(wrapper.text()).toContain('Tab 2')
+      expect(wrapper.text()).toContain('Tab 3')
+    })
+
+    it('renders magic line indicator', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      expect(wrapper.find('.ui-tabs__indicator').exists()).toBe(true)
+    })
+
+    it('renders tab panels', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+      expect(panels).toHaveLength(3)
+    })
+  })
+
+  describe('Active state', () => {
+    it('marks active tab with aria-selected true', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab2', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs[0].attributes('aria-selected')).toBe('false')
+      expect(tabs[1].attributes('aria-selected')).toBe('true')
+      expect(tabs[2].attributes('aria-selected')).toBe('false')
+    })
+
+    it('applies active class to active tab', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab2', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs[1].classes()).toContain('ui-tabs__tab--active')
+    })
+
+    it('shows only active panel', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab2', items: defaultItems },
+        slots: {
+          tab1: '<div>Content 1</div>',
+          tab2: '<div>Content 2</div>',
+          tab3: '<div>Content 3</div>'
+        }
+      })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+      // v-show uses display:none, check via style attribute
+      expect(panels[0].attributes('style')).toContain('display: none')
+      expect(panels[1].attributes('style')).toBeUndefined()
+      expect(panels[2].attributes('style')).toContain('display: none')
+    })
+  })
+
+  describe('Tab selection', () => {
+    it('emits update:modelValue when tab clicked', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[1].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab2']])
+    })
+
+    it('does not emit when disabled tab clicked', async () => {
+      const items = [
+        { label: 'Tab 1', value: 'tab1' },
+        { label: 'Tab 2', value: 'tab2', disabled: true }
+      ]
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[1].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Disabled tabs', () => {
+    it('applies disabled attribute to disabled tabs', () => {
+      const items = [
+        { label: 'Tab 1', value: 'tab1' },
+        { label: 'Tab 2', value: 'tab2', disabled: true }
+      ]
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs[0].attributes('disabled')).toBeUndefined()
+      expect(tabs[1].attributes('disabled')).toBeDefined()
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('moves focus right with ArrowRight', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[0].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab2']])
+      wrapper.unmount()
+    })
+
+    it('moves focus left with ArrowLeft', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab2', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[1].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab1']])
+      wrapper.unmount()
+    })
+
+    it('wraps around from last to first', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab3', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[2].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab1']])
+      wrapper.unmount()
+    })
+
+    it('wraps around from first to last', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[0].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab3']])
+      wrapper.unmount()
+    })
+
+    it('skips disabled tabs', async () => {
+      const items = [
+        { label: 'Tab 1', value: 'tab1' },
+        { label: 'Tab 2', value: 'tab2', disabled: true },
+        { label: 'Tab 3', value: 'tab3' }
+      ]
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[0].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab3']])
+      wrapper.unmount()
+    })
+
+    it('goes to first tab with Home key', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab3', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[2].trigger('keydown', { key: 'Home' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab1']])
+      wrapper.unmount()
+    })
+
+    it('goes to last tab with End key', async () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems },
+        attachTo: document.body
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      await tabs[0].trigger('keydown', { key: 'End' })
+      expect(wrapper.emitted('update:modelValue')).toEqual([['tab3']])
+      wrapper.unmount()
+    })
+  })
+
+  describe('Roving tabindex', () => {
+    it('only active tab has tabindex 0', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab2', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs[0].attributes('tabindex')).toBe('-1')
+      expect(tabs[1].attributes('tabindex')).toBe('0')
+      expect(tabs[2].attributes('tabindex')).toBe('-1')
+    })
+  })
+
+  describe('Variants', () => {
+    it('applies line variant class by default', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      expect(wrapper.find('.ui-tabs__list--line').exists()).toBe(true)
+    })
+
+    it('applies pill variant class', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems, variant: 'pill' }
+      })
+      expect(wrapper.find('.ui-tabs__list--pill').exists()).toBe(true)
+    })
+  })
+
+  describe('Block mode', () => {
+    it('applies block class when block prop is true', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems, block: true }
+      })
+      expect(wrapper.find('.ui-tabs__list--block').exists()).toBe(true)
+    })
+  })
+
+  describe('Slots', () => {
+    it('renders named slot content for active tab', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems },
+        slots: {
+          tab1: '<div class="custom-content">Custom Content</div>'
+        }
+      })
+      expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('slot name matches tab value', () => {
+      const items = [
+        { label: 'Account', value: 'account' },
+        { label: 'Settings', value: 'settings' }
+      ]
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'settings', items },
+        slots: {
+          account: '<div class="account-content">Account</div>',
+          settings: '<div class="settings-content">Settings</div>'
+        }
+      })
+      // Active panel has no display:none style, inactive has display:none
+      const settingsPanel = wrapper.find('#tabpanel-settings')
+      const accountPanel = wrapper.find('#tabpanel-account')
+      expect(settingsPanel.attributes('style')).toBeUndefined()
+      expect(accountPanel.attributes('style')).toContain('display: none')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('tabs have role="tab"', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      wrapper.findAll('button').forEach(btn => {
+        expect(btn.attributes('role')).toBe('tab')
+      })
+    })
+
+    it('panels have role="tabpanel"', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      wrapper.findAll('.ui-tabs__panel').forEach(panel => {
+        expect(panel.attributes('role')).toBe('tabpanel')
+      })
+    })
+
+    it('tabs have aria-controls linking to panels', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const tabs = wrapper.findAll('[role="tab"]')
+      expect(tabs[0].attributes('aria-controls')).toBe('tabpanel-tab1')
+      expect(tabs[1].attributes('aria-controls')).toBe('tabpanel-tab2')
+    })
+
+    it('panels have matching ids', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+      expect(panels[0].attributes('id')).toBe('tabpanel-tab1')
+      expect(panels[1].attributes('id')).toBe('tabpanel-tab2')
+    })
+
+    it('panels are focusable with tabindex', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+      panels.forEach(panel => {
+        expect(panel.attributes('tabindex')).toBe('0')
+      })
+    })
+
+    it('indicator is hidden from accessibility tree', () => {
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items: defaultItems }
+      })
+      expect(wrapper.find('.ui-tabs__indicator').attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Icons', () => {
+    it('renders icon when provided', () => {
+      const MockIcon = { template: '<svg class="mock-icon"></svg>' }
+      const items = [
+        { label: 'Tab 1', value: 'tab1', icon: MockIcon }
+      ]
+      const wrapper = mount(Tabs, {
+        props: { modelValue: 'tab1', items }
+      })
+      expect(wrapper.find('.ui-tabs__icon').exists()).toBe(true)
+    })
+  })
+})

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import type { IconInput } from '../Icon/Icon.vue'
+
+export interface TabItem {
+  /** Display label */
+  label: string
+  /** Unique value (used for v-model and slot name) */
+  value: string | number
+  /** Disable this tab */
+  disabled?: boolean
+  /** Optional icon */
+  icon?: IconInput
+}
+
+export interface TabsProps {
+  /** Currently active tab value (v-model) */
+  modelValue: string | number
+  /** Tab items configuration */
+  items: TabItem[]
+  /** Visual variant */
+  variant?: 'line' | 'pill'
+  /** Full width tabs */
+  block?: boolean
+}
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  variant: 'line',
+  block: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+}>()
+
+const tabListRef = ref<HTMLElement | null>(null)
+const tabRefs = ref<HTMLButtonElement[]>([])
+
+const lineStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+
+let resizeObserver: ResizeObserver | null = null
+
+/**
+ * Calculate and update the magic line position
+ */
+function updateLine() {
+  const activeIndex = props.items.findIndex(item => item.value === props.modelValue)
+  if (activeIndex === -1 || !tabRefs.value[activeIndex]) return
+
+  const activeTab = tabRefs.value[activeIndex]
+  const width = activeTab.offsetWidth
+  const left = activeTab.offsetLeft
+
+  lineStyle.value = {
+    width: `${width}px`,
+    transform: `translateX(${left}px)`
+  }
+}
+
+/**
+ * Select a tab
+ */
+function selectTab(item: TabItem) {
+  if (item.disabled) return
+  emit('update:modelValue', item.value)
+}
+
+/**
+ * Handle keyboard navigation (roving tabindex)
+ */
+function handleKeydown(e: KeyboardEvent, index: number) {
+  const isRight = e.key === 'ArrowRight'
+  const isLeft = e.key === 'ArrowLeft'
+  const isHome = e.key === 'Home'
+  const isEnd = e.key === 'End'
+
+  if (!isRight && !isLeft && !isHome && !isEnd) return
+
+  e.preventDefault()
+
+  let nextIndex: number
+
+  if (isHome) {
+    nextIndex = props.items.findIndex(item => !item.disabled)
+  } else if (isEnd) {
+    nextIndex = props.items.length - 1 - [...props.items].reverse().findIndex(item => !item.disabled)
+  } else {
+    const direction = isRight ? 1 : -1
+    nextIndex = index
+
+    do {
+      nextIndex = (nextIndex + direction + props.items.length) % props.items.length
+    } while (props.items[nextIndex].disabled && nextIndex !== index)
+  }
+
+  const nextItem = props.items[nextIndex]
+  if (!nextItem.disabled) {
+    tabRefs.value[nextIndex]?.focus()
+    emit('update:modelValue', nextItem.value)
+  }
+}
+
+/**
+ * Set tab ref at index
+ */
+function setTabRef(el: HTMLButtonElement | null, index: number) {
+  if (el) {
+    tabRefs.value[index] = el
+  }
+}
+
+watch(() => props.modelValue, async () => {
+  await nextTick()
+  updateLine()
+})
+
+onMounted(() => {
+  updateLine()
+
+  resizeObserver = new ResizeObserver(() => {
+    updateLine()
+  })
+
+  if (tabListRef.value) {
+    resizeObserver.observe(tabListRef.value)
+  }
+
+  window.addEventListener('resize', updateLine)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', updateLine)
+})
+</script>
+
+<template>
+  <div class="ui-tabs">
+    <div
+      ref="tabListRef"
+      class="ui-tabs__list"
+      :class="[
+        `ui-tabs__list--${variant}`,
+        { 'ui-tabs__list--block': block }
+      ]"
+      role="tablist"
+    >
+      <button
+        v-for="(item, index) in items"
+        :key="item.value"
+        :ref="(el) => setTabRef(el as HTMLButtonElement, index)"
+        type="button"
+        role="tab"
+        class="ui-tabs__tab"
+        :class="{ 'ui-tabs__tab--active': modelValue === item.value }"
+        :aria-selected="modelValue === item.value"
+        :aria-controls="`tabpanel-${item.value}`"
+        :disabled="item.disabled"
+        :tabindex="modelValue === item.value ? 0 : -1"
+        @click="selectTab(item)"
+        @keydown="handleKeydown($event, index)"
+      >
+        <Icon
+          v-if="item.icon"
+          :icon="item.icon"
+          size="sm"
+          class="ui-tabs__icon"
+        />
+        {{ item.label }}
+      </button>
+
+      <div
+        class="ui-tabs__indicator"
+        :style="lineStyle"
+        aria-hidden="true"
+      />
+    </div>
+
+    <div class="ui-tabs__panels">
+      <div
+        v-for="item in items"
+        :key="item.value"
+        v-show="modelValue === item.value"
+        :id="`tabpanel-${item.value}`"
+        role="tabpanel"
+        class="ui-tabs__panel"
+        :tabindex="0"
+      >
+        <slot :name="item.value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-tabs {
+  width: 100%;
+}
+
+.ui-tabs__list {
+  position: relative;
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--tabs-border);
+}
+
+.ui-tabs__list--block {
+  width: 100%;
+}
+
+.ui-tabs__list--block .ui-tabs__tab {
+  flex: 1;
+  justify-content: center;
+}
+
+.ui-tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: none;
+  border: none;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--tabs-text);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--duration-fast) var(--ease-default);
+  z-index: 2;
+}
+
+.ui-tabs__tab:hover:not(:disabled) {
+  color: var(--tabs-text-hover);
+}
+
+.ui-tabs__tab--active {
+  color: var(--tabs-text-active);
+}
+
+.ui-tabs__tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-tabs__tab:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.ui-tabs__icon {
+  flex-shrink: 0;
+}
+
+.ui-tabs__indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background-color: var(--tabs-indicator);
+  border-radius: 1px;
+  transition:
+    width var(--duration-normal) var(--ease-out-expo),
+    transform var(--duration-normal) var(--ease-out-expo);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.ui-tabs__list--pill {
+  border-bottom: none;
+  background-color: var(--tabs-pill-bg);
+  padding: var(--space-1);
+  border-radius: var(--radius-lg);
+  gap: var(--space-1);
+}
+
+.ui-tabs__list--pill .ui-tabs__tab {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  color: var(--tabs-text);
+}
+
+.ui-tabs__list--pill .ui-tabs__tab--active {
+  color: var(--tabs-text-active);
+}
+
+.ui-tabs__list--pill .ui-tabs__indicator {
+  top: var(--space-1);
+  bottom: var(--space-1);
+  height: auto;
+  background-color: var(--tabs-pill-indicator);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.ui-tabs__panels {
+  padding-top: var(--space-4);
+}
+
+.ui-tabs__panel {
+  outline: none;
+  animation: tabs-fade-in var(--duration-normal) var(--ease-default);
+}
+
+@keyframes tabs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs.vue'
+export type { TabsProps, TabItem } from './Tabs.vue'