@sabrenski/spire-ui 0.0.5 → 0.0.7

package/src/components/Modal/Modal.test.ts

@@ -2,6 +2,14 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Modal from './Modal.vue'
 
+const globalConfig = {
+  global: {
+    stubs: {
+      teleport: true
+    }
+  }
+}
+
 // Track open state per dialog element using WeakMap (module-level to persist across mocks)
 const openStates = new WeakMap<HTMLDialogElement, boolean>()
 
@@ -40,18 +48,33 @@ afterEach(() => {
 
 describe('Modal', () => {
   describe('Rendering', () => {
-    it('renders as a dialog element', () => {
-      const wrapper = mount(Modal)
+    it('renders as a dialog element when open', () => {
+      const wrapper = mount(Modal, {
+        ...globalConfig,
+        props: { modelValue: true }
+      })
       expect(wrapper.find('dialog').exists()).toBe(true)
     })
 
+    it('does not render dialog when closed', () => {
+      const wrapper = mount(Modal, {
+        ...globalConfig,
+        props: { modelValue: false }
+      })
+      expect(wrapper.find('dialog').exists()).toBe(false)
+    })
+
     it('renders with ui-modal class', () => {
-      const wrapper = mount(Modal)
+      const wrapper = mount(Modal, {
+        ...globalConfig,
+        props: { modelValue: true }
+      })
       expect(wrapper.find('.ui-modal').exists()).toBe(true)
     })
 
     it('renders slot content in body', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true },
         slots: {
           default: '<p>Modal content</p>'
@@ -62,6 +85,7 @@ describe('Modal', () => {
 
     it('renders title when provided', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'My Modal' }
       })
       expect(wrapper.find('.ui-modal__title').text()).toBe('My Modal')
@@ -69,6 +93,7 @@ describe('Modal', () => {
 
     it('does not render header when no title or header slot', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true }
       })
       expect(wrapper.find('.ui-modal__header').exists()).toBe(false)
@@ -76,6 +101,7 @@ describe('Modal', () => {
 
     it('renders header slot instead of title', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true },
         slots: {
           header: '<span class="custom-header">Custom Header</span>'
@@ -86,6 +112,7 @@ describe('Modal', () => {
 
     it('renders footer slot when provided', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true },
         slots: {
           footer: '<button>Save</button>'
@@ -97,6 +124,7 @@ describe('Modal', () => {
 
     it('does not render footer when no slot provided', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true }
       })
       expect(wrapper.find('.ui-modal__footer').exists()).toBe(false)
@@ -106,33 +134,40 @@ describe('Modal', () => {
   describe('Sizes', () => {
     it('applies sm size class', () => {
       const wrapper = mount(Modal, {
-        props: { size: 'sm' }
+        ...globalConfig,
+        props: { modelValue: true, size: 'sm' }
       })
       expect(wrapper.find('.ui-modal').classes()).toContain('ui-modal--sm')
     })
 
     it('applies md size class by default', () => {
-      const wrapper = mount(Modal)
+      const wrapper = mount(Modal, {
+        ...globalConfig,
+        props: { modelValue: true }
+      })
       expect(wrapper.find('.ui-modal').classes()).toContain('ui-modal--md')
     })
 
     it('applies lg size class', () => {
       const wrapper = mount(Modal, {
-        props: { size: 'lg' }
+        ...globalConfig,
+        props: { modelValue: true, size: 'lg' }
       })
       expect(wrapper.find('.ui-modal').classes()).toContain('ui-modal--lg')
     })
 
     it('applies xl size class', () => {
       const wrapper = mount(Modal, {
-        props: { size: 'xl' }
+        ...globalConfig,
+        props: { modelValue: true, size: 'xl' }
       })
       expect(wrapper.find('.ui-modal').classes()).toContain('ui-modal--xl')
     })
 
     it('applies full size class', () => {
       const wrapper = mount(Modal, {
-        props: { size: 'full' }
+        ...globalConfig,
+        props: { modelValue: true, size: 'full' }
       })
       expect(wrapper.find('.ui-modal').classes()).toContain('ui-modal--full')
     })
@@ -141,26 +176,30 @@ describe('Modal', () => {
   describe('Open/Close', () => {
     it('calls showModal when modelValue becomes true', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: false }
       })
 
       await wrapper.setProps({ modelValue: true })
+      await wrapper.vm.$nextTick()
 
       expect(showModalMock).toHaveBeenCalled()
     })
 
-    it('calls close when modelValue becomes false', async () => {
+    it('removes dialog from DOM when modelValue becomes false', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true }
       })
 
+      expect(wrapper.find('dialog').exists()).toBe(true)
       await wrapper.setProps({ modelValue: false })
-
-      expect(closeMock).toHaveBeenCalled()
+      expect(wrapper.find('dialog').exists()).toBe(false)
     })
 
     it('locks body scroll when opened', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: false }
       })
 
@@ -171,6 +210,7 @@ describe('Modal', () => {
 
     it('unlocks body scroll when closed', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true }
       })
 
@@ -183,6 +223,7 @@ describe('Modal', () => {
   describe('Close button', () => {
     it('renders close button when header is visible', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
       expect(wrapper.find('.ui-modal__close').exists()).toBe(true)
@@ -190,6 +231,7 @@ describe('Modal', () => {
 
     it('emits update:modelValue false when close button clicked', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -200,6 +242,7 @@ describe('Modal', () => {
 
     it('has aria-label', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
       expect(wrapper.find('.ui-modal__close').attributes('aria-label')).toBe('Close modal')
@@ -209,6 +252,7 @@ describe('Modal', () => {
   describe('Backdrop click', () => {
     it('emits update:modelValue false when backdrop clicked', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -221,6 +265,7 @@ describe('Modal', () => {
 
     it('does not close when content clicked', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -231,6 +276,7 @@ describe('Modal', () => {
 
     it('does not close on backdrop click when persistent', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test', persistent: true }
       })
 
@@ -244,6 +290,7 @@ describe('Modal', () => {
   describe('Escape key', () => {
     it('emits update:modelValue false on cancel event', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -254,6 +301,7 @@ describe('Modal', () => {
 
     it('prevents default on cancel when persistent', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test', persistent: true }
       })
 
@@ -269,6 +317,7 @@ describe('Modal', () => {
   describe('Close event', () => {
     it('emits close event on dialog close', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -279,6 +328,7 @@ describe('Modal', () => {
 
     it('syncs modelValue on dialog close', async () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
 
@@ -289,13 +339,17 @@ describe('Modal', () => {
   })
 
   describe('Accessibility', () => {
-    it('uses native dialog element', () => {
-      const wrapper = mount(Modal)
+    it('uses native dialog element when open', () => {
+      const wrapper = mount(Modal, {
+        ...globalConfig,
+        props: { modelValue: true }
+      })
       expect(wrapper.find('dialog').exists()).toBe(true)
     })
 
     it('close button has aria-label', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
       expect(wrapper.find('.ui-modal__close').attributes('aria-label')).toBe('Close modal')
@@ -303,6 +357,7 @@ describe('Modal', () => {
 
     it('close button icon is aria-hidden', () => {
       const wrapper = mount(Modal, {
+        ...globalConfig,
         props: { modelValue: true, title: 'Test' }
       })
       expect(wrapper.find('.ui-modal__close svg').attributes('aria-hidden')).toBe('true')

package/src/components/Modal/Modal.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, useSlots } from 'vue'
+import { ref, computed, watch, onMounted, nextTick, useSlots } from 'vue'
 import { useScrollLock } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
 
 export interface ModalProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Controls visibility (v-model) */
   modelValue?: boolean
   /** Optional header title */
@@ -57,27 +60,23 @@ function handleClose() {
   emit('close')
 }
 
-function syncDialogState(open: boolean) {
-  const dialog = dialogRef.value
-  if (!dialog) return
-
-  if (open && !dialog.open) {
-    dialog.showModal()
-  } else if (!open && dialog.open) {
-    dialog.close()
-  }
+async function openDialog() {
+  await nextTick()
+  dialogRef.value?.showModal()
 }
 
 onMounted(() => {
   if (props.modelValue) {
-    syncDialogState(true)
+    openDialog()
   }
 })
 
 watch(
   () => props.modelValue,
   (open) => {
-    syncDialogState(open)
+    if (open) {
+      openDialog()
+    }
   }
 )
 
@@ -85,48 +84,50 @@ const hasHeader = () => props.title || slots.header
 </script>
 
 <template>
-  <dialog
-    ref="dialogRef"
-    class="ui-modal"
-    :class="[`ui-modal--${size}`]"
-    @click="handleBackdropClick"
-    @cancel="handleCancel"
-    @close="handleClose"
-  >
-    <div class="ui-modal__box">
-      <header v-if="hasHeader()" class="ui-modal__header">
-        <slot name="header">
-          <h3 class="ui-modal__title">{{ title }}</h3>
-        </slot>
-        <button
-          type="button"
-          class="ui-modal__close"
-          aria-label="Close modal"
-          @click="close"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
+  <Teleport to="body">
+    <dialog
+      v-if="modelValue"
+      ref="dialogRef"
+      :class="[props.class, 'ui-modal', `ui-modal--${size}`]"
+      @click="handleBackdropClick"
+      @cancel="handleCancel"
+      @close="handleClose"
+    >
+      <div class="ui-modal__box">
+        <header v-if="hasHeader()" class="ui-modal__header">
+          <slot name="header">
+            <h3 class="ui-modal__title">{{ title }}</h3>
+          </slot>
+          <button
+            type="button"
+            class="ui-modal__close"
+            aria-label="Close modal"
+            @click="close"
           >
-            <path d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </header>
-
-      <div class="ui-modal__body">
-        <slot />
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </header>
+
+        <div class="ui-modal__body">
+          <slot />
+        </div>
+
+        <footer v-if="$slots.footer" class="ui-modal__footer">
+          <slot name="footer" />
+        </footer>
       </div>
-
-      <footer v-if="$slots.footer" class="ui-modal__footer">
-        <slot name="footer" />
-      </footer>
-    </div>
-  </dialog>
+    </dialog>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -283,54 +284,56 @@ const hasHeader = () => props.title || slots.header
 </style>
 
 <style>
-.ui-modal {
-  transition:
-    opacity var(--duration-slow) var(--ease-default),
-    transform var(--duration-slow) var(--ease-out-expo),
-    overlay var(--duration-slow) var(--ease-default) allow-discrete,
-    display var(--duration-slow) var(--ease-default) allow-discrete;
-}
-
-.ui-modal::backdrop {
-  background-color: transparent;
-  backdrop-filter: blur(0px);
-  transition:
-    background-color var(--duration-slow) var(--ease-default),
-    backdrop-filter var(--duration-slow) var(--ease-default),
-    overlay var(--duration-slow) allow-discrete,
-    display var(--duration-slow) allow-discrete;
-}
-
-.ui-modal[open]::backdrop {
-  background-color: var(--modal-backdrop);
-  backdrop-filter: blur(2px);
-}
+@layer spire-components {
+  .ui-modal {
+    transition:
+      opacity var(--duration-slow) var(--ease-default),
+      transform var(--duration-slow) var(--ease-out-expo),
+      overlay var(--duration-slow) var(--ease-default) allow-discrete,
+      display var(--duration-slow) var(--ease-default) allow-discrete;
+  }
 
-@starting-style {
-  .ui-modal[open]::backdrop {
+  .ui-modal::backdrop {
     background-color: transparent;
     backdrop-filter: blur(0px);
+    transition:
+      background-color var(--duration-slow) var(--ease-default),
+      backdrop-filter var(--duration-slow) var(--ease-default),
+      overlay var(--duration-slow) allow-discrete,
+      display var(--duration-slow) allow-discrete;
   }
-}
-
-.ui-modal .ui-modal__box {
-  opacity: 0;
-  transform: scale(0.95) translateY(10px);
 
-  transition:
-    opacity var(--duration-slow) var(--ease-default),
-    transform var(--duration-slow) var(--ease-out-expo);
-}
+  .ui-modal[open]::backdrop {
+    background-color: var(--modal-backdrop);
+    backdrop-filter: blur(2px);
+  }
 
-.ui-modal[open] .ui-modal__box {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
+  @starting-style {
+    .ui-modal[open]::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(0px);
+    }
+  }
 
-@starting-style {
-  .ui-modal[open] .ui-modal__box {
+  .ui-modal .ui-modal__box {
     opacity: 0;
     transform: scale(0.95) translateY(10px);
+
+    transition:
+      opacity var(--duration-slow) var(--ease-default),
+      transform var(--duration-slow) var(--ease-out-expo);
+  }
+
+  .ui-modal[open] .ui-modal__box {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  @starting-style {
+    .ui-modal[open] .ui-modal__box {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
   }
 }
 </style>

package/src/components/Pagination/Pagination.vue

@@ -3,11 +3,14 @@ import { computed } from 'vue'
 import Button from '../Button/Button.vue'
 import { useInternalIcon } from '../../config/icons'
 import { generatePageRange, type PageItem } from './utils'
+import type { ClassValue } from '../../types/common'
 
 const ChevronLeftIcon = useInternalIcon('chevronLeft')
 const ChevronRightIcon = useInternalIcon('chevronRight')
 
 export interface PaginationProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current active page (v-model) */
   modelValue: number
   /** Total count of items */
@@ -86,8 +89,9 @@ const buttonSize = computed(() => {
 
 <template>
   <nav
-    class="ui-pagination"
     :class="[
+      props.class,
+      'ui-pagination',
       `ui-pagination--${size}`,
       { 'ui-pagination--disabled': disabled }
     ]"

package/src/components/Popover/Popover.vue

@@ -8,6 +8,7 @@ import {
   onUnmounted
 } from 'vue'
 import { useId, useScrollLock } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export type PopoverPlacement =
   | 'top' | 'top-start' | 'top-end'
@@ -16,6 +17,8 @@ export type PopoverPlacement =
   | 'right' | 'right-start' | 'right-end'
 
 export interface PopoverProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Popover placement relative to trigger */
   placement?: PopoverPlacement
   /** Offset from trigger (px) */
@@ -305,7 +308,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="ui-popover">
+  <div :class="[props.class, 'ui-popover']">
     <div
       ref="triggerRef"
       class="ui-popover__trigger"

package/src/components/Progress/Progress.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type ProgressVariant = 'linear' | 'circular'
 export type ProgressSize = 'sm' | 'md' | 'lg'
 export type ProgressColor = 'primary' | 'success' | 'warning' | 'error'
 
 export interface ProgressProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current progress value (0-100) */
   value?: number
   /** Display variant */
@@ -42,6 +45,7 @@ const props = withDefaults(defineProps<ProgressProps>(), {
 const clampedValue = computed(() => Math.min(100, Math.max(0, props.value)))
 
 const linearClasses = computed(() => [
+  props.class,
   'ui-progress-linear',
   `ui-progress-linear--${props.size}`,
   `ui-progress-linear--${props.color}`,
@@ -53,6 +57,7 @@ const linearClasses = computed(() => [
 ])
 
 const circularClasses = computed(() => [
+  props.class,
   'ui-progress-circular',
   `ui-progress-circular--${props.size}`,
   `ui-progress-circular--${props.color}`,

package/src/components/Radio/Radio.test.ts

@@ -213,4 +213,92 @@ describe('Radio', () => {
       expect(wrapper.find('.ui-radio__box').attributes('aria-hidden')).toBe('true')
     })
   })
+
+  describe('Pill variant', () => {
+    it('renders pill structure when variant is pill', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill').exists()).toBe(true)
+      expect(wrapper.find('.ui-radio').exists()).toBe(false)
+    })
+
+    it('renders default structure when variant is default', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'default' }
+      })
+      expect(wrapper.find('.ui-radio').exists()).toBe(true)
+      expect(wrapper.find('.ui-radio-pill').exists()).toBe(false)
+    })
+
+    it('defaults to default variant', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio').exists()).toBe(true)
+      expect(wrapper.find('.ui-radio-pill').exists()).toBe(false)
+    })
+
+    it('renders pill label', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill__label').text()).toBe('Option A')
+    })
+
+    it('renders pill check indicator', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill__indicator').exists()).toBe(true)
+      expect(wrapper.find('.ui-radio-pill__check').exists()).toBe(true)
+    })
+
+    it('applies checked class when checked', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', modelValue: 'a', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill').classes()).toContain('ui-radio-pill--checked')
+    })
+
+    it('does not apply checked class when unchecked', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', modelValue: 'b', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill').classes()).not.toContain('ui-radio-pill--checked')
+    })
+
+    it('applies disabled class when disabled', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'pill', label: 'Option A', disabled: true }
+      })
+      expect(wrapper.find('.ui-radio-pill').classes()).toContain('ui-radio-pill--disabled')
+    })
+
+    it('emits events on pill change', async () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', modelValue: 'b', variant: 'pill', label: 'Option A' }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['a'])
+      expect(wrapper.emitted('change')?.[0]).toEqual(['a'])
+    })
+
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach(size => {
+      it(`applies ${size} size class to pill`, () => {
+        const wrapper = mount(Radio, {
+          props: { value: 'a', variant: 'pill', label: 'Option A', size }
+        })
+        expect(wrapper.find('.ui-radio-pill').classes()).toContain(`ui-radio-pill--${size}`)
+      })
+    })
+
+    it('pill indicator has aria-hidden', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio-pill__indicator').attributes('aria-hidden')).toBe('true')
+    })
+  })
 })