@redseed/redseed-ui-vue3 6.7.1 → 7.0.0

package/docs/01-layout-components.md

@@ -10,7 +10,7 @@ Layout components provide the structural foundation for organizing content on pa
 ```vue
 <template>
   <SingleColumnLayout>
-    <div class="bg-rsui-grey-200 text-center p-8">
+    <div class="bg-grey-200 text-center p-8">
       Content max width is 768px
     </div>
   </SingleColumnLayout>
@@ -24,12 +24,12 @@ Layout components provide the structural foundation for organizing content on pa
 <template>
   <TwoColumnLayout>
     <template #main>
-      <div class="bg-rsui-grey-200 text-center p-8">
+      <div class="bg-grey-200 text-center p-8">
         Main content
       </div>
     </template>
     <template #aside>
-      <div class="bg-rsui-grey-200 text-center p-8">
+      <div class="bg-grey-200 text-center p-8">
         Aside content
       </div>
     </template>
@@ -130,7 +130,7 @@ Layout components provide the structural foundation for organizing content on pa
         </template>
       </SectionHeader>
     </template>
-    
+
     <ButtonCard>
       <template #icon>
         <FaceSmileIcon />
@@ -156,4 +156,4 @@ Layout components provide the structural foundation for organizing content on pa
 
 - Layout components include proper semantic HTML structure
 - Screen readers can navigate through the layout hierarchy
-- Focus management is handled appropriately for keyboard navigation 
+- Focus management is handled appropriately for keyboard navigation

package/docs/07-interactive-components.md

@@ -1,22 +1,38 @@
 # Interactive Components
 
-Interactive components provide user interface elements that respond to user actions and enable dynamic interactions. They include modals, dropdowns, toggles, and other interactive elements.
+Interactive components provide user interface elements that respond to user actions and enable dynamic interactions. They include modals, dropdowns, toggles, disclosures, progress indicators, loaders, empty states, and interactive links.
 
 ## Modals
 
 ### Modal
-**When to use:** For displaying important information, forms, or actions that require user attention and should appear above the current page content.
-**Implementation:**
+**When to use:** For displaying important information, forms, or actions that require user attention and should appear above the current page content.  
+**Key props:** `show` controls visibility, `closeable` toggles dismissal, size flags (`sm`, `md`, `lg`), and positional flags (`top`, `center`, `bottom`). The `footer-start` prop left-aligns footer actions.  
+**Slots:** `header` and `footer` receive a `close` function in their slot scope; the default slot renders the main content.
+
 ```vue
+<script setup>
+import { ref } from 'vue'
+
+const isModalOpen = ref(false)
+
+function confirmAction() {
+  // handle confirm logic
+  isModalOpen.value = false
+}
+</script>
+
 <template>
-  <ButtonPrimary @click="showModal = true">Open Modal</ButtonPrimary>
-  <Modal :show="showModal">
+  <ButtonPrimary @click="isModalOpen = true">Open Modal</ButtonPrimary>
+
+  <Modal :show="isModalOpen" @close="isModalOpen = false" lg>
     <template #header>
       Modal Title
     </template>
+
     <p>Are you sure you want to perform this action?</p>
-    <template #footer>
-      <ButtonSecondary @click="showModal = false">Cancel</ButtonSecondary>
+
+    <template #footer="{ close }">
+      <ButtonSecondary @click="close">Cancel</ButtonSecondary>
       <ButtonPrimary @click="confirmAction">Confirm</ButtonPrimary>
     </template>
   </Modal>
@@ -26,26 +42,48 @@ Interactive components provide user interface elements that respond to user acti
 ## Dropdowns
 
 ### DropdownMenu
-**When to use:** For displaying a list of options or actions that appear when triggered, such as user menus, action menus, or selection dropdowns.
-**Implementation:**
+**When to use:** For displaying a list of actions or options that appear when triggered, such as user menus or contextual actions.  
+**Key props:** `left` and `right` set menu alignment (defaults to left). The default trigger is a tertiary button; use the `trigger` slot to supply a custom activator.
+
 ```vue
+<script setup>
+function handleEdit() {
+  // edit logic
+}
+function handleDelete() {
+  // delete logic
+}
+function handleShare() {
+  // share logic
+}
+</script>
+
 <template>
-  <DropdownMenu>
-    <template #trigger-label>Dropdown Menu</template>
+  <DropdownMenu right>
+    <template #trigger="{ open }">
+      <ButtonTertiary @click="open">Dropdown Menu</ButtonTertiary>
+    </template>
+
     <DropdownOption @click="handleEdit">Edit</DropdownOption>
-    <DropdownOption @click="handleDelete">Delete</DropdownOption>
     <DropdownOption @click="handleShare">Share</DropdownOption>
+    <DropdownOption @click="handleDelete">Delete</DropdownOption>
   </DropdownMenu>
 </template>
 ```
 
 ### DropdownOption
-**When to use:** For individual options within a DropdownMenu.
-**Implementation:**
+**When to use:** For individual options within a `DropdownMenu`. Emits `click` when selected and renders arbitrary slot content (including icons when provided).
+
 ```vue
+<script setup>
+function handleAction() {
+  // option handling
+}
+</script>
+
 <template>
   <DropdownOption @click="handleAction">
-    {{ optionLabel }}
+    Share
   </DropdownOption>
 </template>
 ```
@@ -53,68 +91,84 @@ Interactive components provide user interface elements that respond to user acti
 ## Toggles and Switches
 
 ### Toggle
-**When to use:** For binary on/off states, such as feature toggles, settings, or boolean preferences.
-**Implementation:**
+**When to use:** For binary on/off states, such as feature toggles, settings, or boolean preferences.  
+**Slots:** `label`, `help`, and `error` provide contextual messaging.
+
 ```vue
+<script setup>
+import { ref } from 'vue'
+
+const isEnabled = ref(false)
+
+function handleToggleChange(value) {
+  // update setting
+  console.log(value)
+}
+</script>
+
 <template>
   <Toggle v-model="isEnabled" @update="handleToggleChange">
     <template #label>Enable notifications</template>
+    <template #help>Send me updates about new features</template>
   </Toggle>
 </template>
 ```
 
 ### Switcher
-**When to use:** For switching between multiple options or states, such as view modes, themes, or filter options.
-**Implementation:**
-```vue
-<template>
-  <Switcher 
-    :items="switcherItems"
-    @change="handleViewChange"
-  />
-</template>
+**When to use:** For switching between multiple options, such as view modes or filters.  
+**Key props:** `items` accepts an array of `{ id, label, active?, icon? }`. Use `full` to stretch items across the container. Emits `change` with the selected item.
 
+```vue
 <script setup>
-const switcherItems = [
-  { id: 'list', label: 'List View' },
+const viewOptions = [
+  { id: 'list', label: 'List View', active: true },
   { id: 'grid', label: 'Grid View' },
-  { id: 'table', label: 'Table View' }
+  { id: 'table', label: 'Table View' },
 ]
+
+function handleViewChange(item) {
+  console.log(item.id)
+}
 </script>
-```
 
-### SwitcherItem
-**When to use:** For individual options within a Switcher component (used internally by Switcher).
-**Implementation:**
-```vue
 <template>
-  <!-- SwitcherItem is used internally by Switcher component -->
-  <!-- Define items as an array of objects with id and label properties -->
-  <Switcher :items="items" @change="handleChange" />
+  <Switcher :items="viewOptions" @change="handleViewChange" />
 </template>
-
-<script setup>
-const items = [
-  { id: 'option1', label: 'Option 1' },
-  { id: 'option2', label: 'Option 2' },
-  { id: 'option3', label: 'Option 3' }
-]
-</script>
 ```
 
+### SwitcherItem
+**When to use:** `SwitcherItem` is consumed internally by `Switcher`. Configure options through the `items` prop instead of rendering `SwitcherItem` directly.
+
 ## Disclosure
 
 ### Disclosure
-**When to use:** For expandable/collapsible content sections, such as FAQs, accordions, or collapsible panels.
-**Implementation:**
+**When to use:** For expandable or collapsible content sections such as FAQs or accordions.  
+**Key props:** `open` sets the initial state. Emits `click` with `{ open }` whenever the disclosure toggles.  
+**Slots:** Provide layout via the required `child` slot, which exposes `triggerId`, `contentId`, `handleTrigger`, and `isOpen`. Use the `trigger` slot for a custom activator or rely on the default tertiary button.
+
 ```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+
+function handleDisclosure(event) {
+  isOpen.value = event.open
+}
+</script>
+
 <template>
-  <Disclosure 
-    :isOpen="isExpanded"
-    @toggle="toggleExpansion"
-    title="Section Title"
-  >
-    <p>This content can be expanded or collapsed.</p>
+  <Disclosure :open="isOpen" @click="handleDisclosure">
+    <template #child="{ triggerId, contentId }">
+      <div>
+        <div :id="triggerId"></div>
+        <div :id="contentId"></div>
+      </div>
+    </template>
+
+    <template #content>
+      <p>This content can be expanded or collapsed.</p>
+    </template>
   </Disclosure>
 </template>
 ```
@@ -122,99 +176,170 @@ const items = [
 ## Progress Indicators
 
 ### ProgressCircle
-**When to use:** For displaying progress in a circular format, such as upload progress, completion percentages, or loading states.
-**Implementation:**
+**When to use:** For displaying progress in a circular format, such as upload progress or completion percentages.  
+**Key props:** `percentage` (0–100) with optional size flags (`sm`, `md`, `lg`). Slot content is centered inside the circle.
+
 ```vue
 <template>
-  <ProgressCircle 
-    :progress="75"
-    :size="100"
-    :strokeWidth="8"
-    label="75% Complete"
-  />
+  <ProgressCircle :percentage="75" md>
+    75%
+  </ProgressCircle>
 </template>
 ```
 
 ### ProgressTracker
-**When to use:** For multi-step processes or workflows where users need to see their progress through a series of steps.
-**Implementation:**
+**When to use:** For multi-step processes where users need to see their progress through a series of steps.  
+**Key props:** `steps` is an array of step objects (e.g. `{ label: 'Step 1', active: true, completed: false }`). Use `clickable` and `skippable` to allow direct navigation. Emits `change` with the selected step.
+
 ```vue
+<script setup>
+import { reactive } from 'vue'
+
+const onboardingSteps = reactive([
+  { label: 'Details', active: true, completed: false },
+  { label: 'Schedule', active: false, completed: false },
+  { label: 'Publish', active: false, completed: false },
+])
+
+function handleStepChange(step) {
+  console.log(step.label)
+}
+</script>
+
 <template>
-  <ProgressTracker :currentStep="2" :totalSteps="5">
-    <ProgressTrackerStep 
-      v-for="step in steps" 
-      :key="step.id"
-      :step="step"
-      :isActive="step.id === currentStep"
-      :isCompleted="step.id < currentStep"
-    />
-  </ProgressTracker>
+  <ProgressTracker
+    :steps="onboardingSteps"
+    clickable
+    skippable
+    @change="handleStepChange"
+  />
 </template>
 ```
 
 ### ProgressTrackerStep
-**When to use:** For individual steps within a ProgressTracker.
-**Implementation:**
+**When to use:** For custom layouts inside `ProgressTracker`. The default slot of `ProgressTracker` exposes `internalSteps` so you can render `ProgressTrackerStep` manually when extra decoration is needed.
+
 ```vue
+<script setup>
+import { reactive } from 'vue'
+
+const steps = reactive([
+  { label: 'Details', active: true, completed: false },
+  { label: 'Content', active: false, completed: false },
+  { label: 'Review', active: false, completed: false },
+])
+
+function handleStepChange(step) {
+  console.log(step.label)
+}
+</script>
+
 <template>
-  <ProgressTrackerStep 
-    :step="step"
-    :isActive="isActive"
-    :isCompleted="isCompleted"
-  />
+  <ProgressTracker :steps="steps">
+    <template #default="{ internalSteps }">
+      <ProgressTrackerStep
+        v-for="(step, index) in internalSteps"
+        :key="step.label"
+        :step="step"
+        :active="step.active"
+        :completed="step.completed"
+        clickable
+        @click="handleStepChange"
+      >
+        <template #indicator>
+          {{ index + 1 }}
+        </template>
+        {{ step.label }}
+      </ProgressTrackerStep>
+    </template>
+  </ProgressTracker>
 </template>
 ```
 
 ## Loaders
 
 ### Loader
-**When to use:** For indicating loading states, such as when data is being fetched, forms are being submitted, or content is being processed.
-**Implementation:**
+**When to use:** For indicating loading states, such as when data is being fetched or content is processing.  
+**Key props:** Boolean flags `primary`, `secondary`, and `white` adjust the palette. The loader inherits size from its container.
+
 ```vue
+<script setup>
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+
+function completeLoading() {
+  isLoading.value = false
+}
+</script>
+
 <template>
-  <Loader 
-    :isLoading="isLoading"
-    message="Loading data..."
-    size="md"
-  />
+  <ButtonPrimary @click="completeLoading">Finish</ButtonPrimary>
+
+  <Loader v-if="isLoading" primary />
 </template>
 ```
 
 ## Empty States
 
 ### Empty
-**When to use:** For displaying empty states when there's no data to show, such as empty lists, search results, or content areas.
-**Implementation:**
+**When to use:** For displaying empty states when there is no data to show, such as empty lists, search results, or content areas.  
+**Key props:** `showImage` toggles the default illustration. Emits `clickPrimaryAction`, `clickSecondaryAction`, and `clickTertiaryAction` when the corresponding default buttons are used.  
+**Slots:** `image`, `title`, default (description), `primary-action-label`, `secondary-action-label`, `tertiary-action-label`, or the full `actions` slot.
+
 ```vue
+<script setup>
+function handleCreate() {
+  // start creation flow
+}
+function handleLearnMore() {
+  // open documentation
+}
+</script>
+
 <template>
-  <Empty 
-    title="No items found"
-    description="Try adjusting your search criteria or create a new item."
-    :showAction="true"
-    actionLabel="Create Item"
-    @action="handleCreate"
-  />
+  <Empty
+    @clickPrimaryAction="handleCreate"
+    @clickSecondaryAction="handleLearnMore"
+  >
+    <template #title>No items found</template>
+    Try adjusting your search criteria or create a new item.
+    <template #primary-action-label>Create Item</template>
+    <template #secondary-action-label>Learn more</template>
+  </Empty>
 </template>
 ```
 
 ## Links
 
 ### LinkPrimary
-**When to use:** For primary navigation links that should stand out, such as main navigation items or important links.
-**Implementation:**
+**When to use:** For primary navigation links or calls to action that should stand out.  
+**Key props:** Size flags (`sm`, `md`, `lg`) and `disabled`. The `icon` slot renders a leading icon.
+
 ```vue
 <template>
-  <LinkPrimary href="/dashboard">Dashboard</LinkPrimary>
+  <LinkPrimary href="/dashboard">
+    <template #icon>
+      <ArrowRightIcon />
+    </template>
+    Dashboard
+  </LinkPrimary>
 </template>
 ```
 
 ### LinkSlot
-**When to use:** For custom link components with flexible content structure.
-**Implementation:**
+**When to use:** For composing custom link treatments while keeping RedSeed link styling. Supports the same sizing and disabled props as `LinkPrimary` and emits a `click` event.
+
 ```vue
+<script setup>
+function handleLinkClick(event) {
+  event.preventDefault()
+  // custom routing
+}
+</script>
+
 <template>
-  <LinkSlot href="/custom-page" class="custom-link">
-    <Icon name="arrow-right" />
+  <LinkSlot href="/custom-page" lg @click="handleLinkClick">
     Custom Link Text
   </LinkSlot>
 </template>
@@ -222,94 +347,135 @@ const items = [
 
 ## Best Practices
 
-1. **User Feedback:** Provide clear visual feedback for all interactive elements (hover, focus, active states).
-2. **Accessibility:** All interactive components include proper ARIA attributes and keyboard navigation.
-3. **Consistent Behavior:** Maintain consistent interaction patterns across similar components.
-4. **Loading States:** Show appropriate loading indicators for actions that take time.
-5. **Error Handling:** Provide clear error messages and recovery options for failed interactions.
-6. **Mobile Responsiveness:** Ensure all interactive elements work well on touch devices.
-7. **Performance:** Optimize interactions to feel responsive and smooth.
+- Provide clear visual feedback for all interactive states (hover, focus, active, disabled).
+- Preserve accessibility when customizing slots: keep semantic elements, aria attributes, and keyboard support intact.
+- Maintain consistent interaction patterns across similar components (e.g. dropdowns should all close on outside click).
+- Surface loading indicators quickly when operations take time.
+- Offer descriptive error messaging and recovery actions.
+- Test on mobile to ensure touch targets remain usable.
+- Monitor performance for complex composites such as nested disclosures or large progress trackers.
 
 ## Common Use Cases
 
 ### User Settings Modal
 ```vue
+<script setup>
+import { reactive, ref } from 'vue'
+
+const showSettings = ref(false)
+const userName = ref('')
+const notifications = ref(true)
+const themeOptions = reactive([
+  { id: 'light', label: 'Light Theme', active: true },
+  { id: 'dark', label: 'Dark Theme', active: false },
+])
+
+function saveSettings() {
+  showSettings.value = false
+}
+
+function handleThemeChange(theme) {
+  themeOptions.forEach(item => {
+    item.active = item.id === theme.id
+  })
+}
+</script>
+
 <template>
   <ButtonPrimary @click="showSettings = true">Open Settings</ButtonPrimary>
-  <Modal :show="showSettings">
+
+  <Modal :show="showSettings" @close="showSettings = false" md>
     <template #header>User Settings</template>
+
     <FormWrapperBuild @submit="saveSettings">
-      <FormFieldText v-model="userName" label="Display Name" />
+      <FormFieldText v-model="userName">
+        <template #label>Display Name</template>
+      </FormFieldText>
+
       <Toggle v-model="notifications">
         <template #label>Enable notifications</template>
       </Toggle>
+
       <Switcher :items="themeOptions" @change="handleThemeChange" />
     </FormWrapperBuild>
-    <template #footer>
-      <ButtonSecondary @click="showSettings = false">Cancel</ButtonSecondary>
+
+    <template #footer="{ close }">
+      <ButtonSecondary @click="close">Cancel</ButtonSecondary>
       <ButtonPrimary type="submit">Save Changes</ButtonPrimary>
     </template>
   </Modal>
 </template>
-
-<script setup>
-const themeOptions = [
-  { id: 'light', label: 'Light Theme' },
-  { id: 'dark', label: 'Dark Theme' }
-]
-</script>
 ```
 
 ### Action Menu
 ```vue
+<script setup>
+function handleEdit() {}
+function handleDuplicate() {}
+function handleDelete() {}
+</script>
+
 <template>
   <DropdownMenu>
-    <template #trigger-label>Actions</template>
+    <template #trigger="{ open }">
+      <ButtonTertiary @click="open">Actions</ButtonTertiary>
+    </template>
+
     <DropdownOption @click="handleEdit">Edit</DropdownOption>
     <DropdownOption @click="handleDuplicate">Duplicate</DropdownOption>
-    <DropdownOption @click="handleDelete" class="text-red-600">Delete</DropdownOption>
+    <DropdownOption @click="handleDelete">Delete</DropdownOption>
   </DropdownMenu>
 </template>
 ```
 
 ### Multi-step Form
 ```vue
+<script setup>
+import { reactive, ref } from 'vue'
+
+const steps = reactive([
+  { label: 'Details', active: true, completed: false },
+  { label: 'Content', active: false, completed: false },
+  { label: 'Review', active: false, completed: false },
+])
+
+const activeStepIndex = ref(0)
+
+function goToPrevious() {
+  if (activeStepIndex.value === 0) return
+  steps[activeStepIndex.value].active = false
+  activeStepIndex.value--
+  steps[activeStepIndex.value].active = true
+}
+
+function goToNext() {
+  if (activeStepIndex.value === steps.length - 1) return
+  steps[activeStepIndex.value].active = false
+  steps[activeStepIndex.value].completed = true
+  activeStepIndex.value++
+  steps[activeStepIndex.value].active = true
+}
+</script>
+
 <template>
-  <div class="multi-step-form">
-    <ProgressTracker :currentStep="currentStep" :totalSteps="3">
-      <ProgressTrackerStep 
-        v-for="step in steps" 
-        :key="step.id"
-        :step="step"
-        :isActive="step.id === currentStep"
-        :isCompleted="step.id < currentStep"
-      />
-    </ProgressTracker>
-    
-    <div class="form-content">
-      <!-- Step content here -->
-    </div>
-    
-    <div class="form-actions">
-      <ButtonSecondary 
-        v-if="currentStep > 1" 
-        @click="previousStep"
-      >
-        Previous
-      </ButtonSecondary>
-      <ButtonPrimary @click="nextStep">
-        {{ currentStep === 3 ? 'Submit' : 'Next' }}
-      </ButtonPrimary>
-    </div>
-  </div>
+  <ProgressTracker :steps="steps" />
+
+  <ButtonSecondary :disabled="activeStepIndex === 0" @click="goToPrevious">
+    Previous
+  </ButtonSecondary>
+  <ButtonPrimary
+    :disabled="activeStepIndex === steps.length - 1"
+    @click="goToNext"
+  >
+    Next
+  </ButtonPrimary>
 </template>
 ```
 
 ## Accessibility
 
-- All interactive components are keyboard accessible
-- Proper ARIA labels and roles are included
-- Focus management is handled appropriately
-- Screen readers can navigate through interactive elements
-- Color contrast meets accessibility standards
-- Touch targets are appropriately sized for mobile devices 
+- All interactive components are keyboard accessible by default; ensure custom slot content keeps focus order intact.
+- Provide descriptive labels or aria attributes when replacing default triggers or buttons.
+- Manage focus when opening and closing modals or disclosures to avoid trapping keyboard users.
+- Ensure sufficient color contrast when composing custom content.
+- Keep touch targets at least 44px in height for comfortable mobile interactions.

package/index.js

@@ -1,5 +1,3 @@
-import '@redseed/redseed-ui-tailwindcss/index.css'
-
 import _ from 'lodash'
 import lottie from 'lottie-web'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.7.1",
+  "version": "7.0.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",