@baklavue/mcp 1.0.0

package/dist/docs/components/stepper.md

@@ -0,0 +1,337 @@
+# Stepper
+
+A Vue UI kit component for Baklava's `bl-stepper` web component for step indicators. Displays progress through a sequence of steps. Use the `steps` prop for declarative configuration or the default slot for custom step content.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<StepperBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <p>Current step: {{ currentStep + 1 }}</p>
+    <BvStepper v-model:current-step="currentStep" :steps="steps" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(0);
+const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];
+</script>
+```
+
+## With Steps Prop
+
+Use the `steps` prop with objects to define labels, completed state, and disabled state for each step.
+
+<div class="component-demo">
+
+<StepperWithStepsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper v-model:current-step="currentStep" :steps="steps" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(1);
+const steps = [
+  { label: "Account", completed: true },
+  { label: "Profile", completed: false },
+  { label: "Preferences", completed: false },
+  { label: "Review", completed: false },
+];
+</script>
+```
+
+## With Descriptions
+
+Add optional descriptions to each step for additional context.
+
+<div class="component-demo">
+
+<StepperDescriptionDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper v-model:current-step="currentStep" :steps="steps" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(1);
+const steps = [
+  { label: "Account", description: "Create your account" },
+  { label: "Profile", description: "Add your details" },
+  { label: "Preferences", description: "Set your preferences" },
+  { label: "Review", description: "Review and submit" },
+];
+</script>
+```
+
+## Disabled Steps
+
+Disable specific steps to prevent users from navigating to them. Disabled steps are not clickable.
+
+<div class="component-demo">
+
+<StepperDisabledDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper v-model:current-step="currentStep" :steps="steps" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(1);
+const steps = [
+  { label: "Step 1" },
+  { label: "Step 2", disabled: true },
+  { label: "Step 3" },
+  { label: "Step 4", disabled: true },
+];
+</script>
+```
+
+## Error State
+
+Mark a step with an error state to indicate validation failures or issues that need attention.
+
+<div class="component-demo">
+
+<StepperErrorDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper v-model:current-step="currentStep" :steps="steps" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(1);
+const steps = [
+  { label: "Account", description: "Account created" },
+  { label: "Validation", description: "Please fix errors", error: true },
+  { label: "Review", description: "Final review" },
+];
+</script>
+```
+
+## Without Labels
+
+Hide step labels to show only the step indicators (dots). Useful for compact layouts.
+
+<div class="component-demo">
+
+<StepperNoLabelsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper v-model:current-step="currentStep" :steps="steps" :show-labels="false" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(1);
+const steps = [
+  { label: "Step 1" },
+  { label: "Step 2" },
+  { label: "Step 3" },
+  { label: "Step 4" },
+];
+</script>
+```
+
+## Step Change Event
+
+Listen to the `step-change` event to react when the user selects a different step.
+
+<div class="component-demo">
+
+<StepperChangeEventDemo />
+
+</div>
+
+```vue
+<template>
+  <BvStepper
+    v-model:current-step="currentStep"
+    :steps="steps"
+    @step-change="onStepChange"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(0);
+const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];
+
+const onStepChange = (event) => {
+  const { activeStep, totalSteps } = event.detail || {};
+  console.log(`Step ${activeStep + 1} of ${totalSteps} selected`);
+};
+</script>
+```
+
+## Form Wizard
+
+Use the stepper with Back/Next buttons for a multi-step form or wizard flow.
+
+<div class="component-demo">
+
+<StepperFormWizardDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <BvStepper v-model:current-step="currentStep" :steps="steps" />
+    <div style="margin-top: 1.5rem;">
+      <!-- Step content here -->
+      <BvButton variant="tertiary" :disabled="currentStep === 0" @click="goBack">
+        Back
+      </BvButton>
+      <BvButton variant="primary" @click="goNext">
+        {{ currentStep === steps.length - 1 ? "Submit" : "Next" }}
+      </BvButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvButton, BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(0);
+const steps = [
+  { label: "Personal", description: "Your details" },
+  { label: "Address", description: "Where you live" },
+  { label: "Confirm", description: "Review & submit" },
+];
+
+const goNext = () => {
+  if (currentStep.value < steps.length - 1) currentStep.value++;
+};
+
+const goBack = () => {
+  if (currentStep.value > 0) currentStep.value--;
+};
+</script>
+```
+
+## Orientation
+
+Control the stepper layout with the `orientation` prop.
+
+<div class="component-demo">
+
+<StepperOrientationDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <BvStepper
+      v-model:current-step="currentStep"
+      :steps="steps"
+      orientation="horizontal"
+    />
+    <BvStepper
+      v-model:current-step="currentStep"
+      :steps="steps"
+      orientation="vertical"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvStepper } from "@baklavue/ui";
+
+const currentStep = ref(0);
+const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];
+</script>
+```
+
+## Props
+
+| Prop          | Type                                                            | Default     | Description                                       |
+| ------------- | --------------------------------------------------------------- | ----------- | ------------------------------------------------- |
+| `currentStep` | `number`                                                        | `undefined` | Current step index (use with v-model:currentStep) |
+| `steps`       | `Array<{ label, description?, completed?, error?, disabled? }>` | `undefined` | Array of step configurations                      |
+| `orientation` | `string`                                                        | `undefined` | Layout direction (`horizontal`, `vertical`)       |
+| `showLabels`  | `boolean`                                                       | `undefined` | Whether to show step labels                       |
+
+## Events
+
+| Event                | Payload       | Description                                     |
+| -------------------- | ------------- | ----------------------------------------------- |
+| `update:currentStep` | `number`      | Emitted when the current step changes (v-model) |
+| `step-change`        | `CustomEvent` | Emitted when the user selects a different step  |
+
+## Slots
+
+| Slot      | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `default` | Custom step content (use when not using `steps` prop) |
+
+## Types
+
+```typescript
+import type { StepperProps } from "@baklavue/ui";
+
+interface StepperStep {
+  label: string;
+  description?: string;
+  completed?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+}
+
+interface StepperProps {
+  currentStep?: number;
+  steps?: StepperStep[];
+  orientation?: string;
+  showLabels?: boolean;
+}
+```
+
+## Usage Notes
+
+- **v-model:currentStep**: Use `v-model:current-step` for two-way binding of the current step index.
+- **Steps vs Slot**: When using the `steps` prop, steps are rendered as `bl-stepper-item` elements. Use the default slot for fully custom step markup.
+- **Orientation**: The `orientation` prop maps to Baklava's `direction` attribute (`horizontal` | `vertical`).
+- **Accessibility**: The component follows Baklava's accessibility guidelines for step navigation.

package/dist/docs/components/switch.md

@@ -0,0 +1,144 @@
+# Switch
+
+A Vue UI kit component for Baklava's `bl-switch` web component with v-model support. A toggle switch for boolean states. Use `v-model:checked` for two-way binding.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<SwitchBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <p>Notifications: {{ enabled ? "On" : "Off" }}</p>
+    <BvSwitch v-model:checked="enabled" label="Enable notifications" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSwitch } from "@baklavue/ui";
+
+const enabled = ref(false);
+</script>
+```
+
+## Disabled State
+
+Disable the switch to prevent user interaction.
+
+<div class="component-demo">
+
+<SwitchDisabledDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSwitch :checked="true" :disabled="true" label="Disabled (checked)" />
+  <BvSwitch :checked="false" :disabled="true" label="Disabled (unchecked)" />
+</template>
+
+<script setup>
+import { BvSwitch } from "@baklavue/ui";
+</script>
+```
+
+## Sizes
+
+Control the switch size using the `size` prop.
+
+<div class="component-demo">
+
+<SwitchSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <BvSwitch v-model:checked="small" size="small" label="Small" />
+    <BvSwitch v-model:checked="medium" size="medium" label="Medium" />
+    <BvSwitch v-model:checked="large" size="large" label="Large" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSwitch } from "@baklavue/ui";
+
+const small = ref(false);
+const medium = ref(false);
+const large = ref(false);
+</script>
+```
+
+## Multiple Switches
+
+Use multiple switches for settings or preferences.
+
+```vue
+<template>
+  <div>
+    <BvSwitch v-model:checked="settings.email" label="Email notifications" />
+    <BvSwitch v-model:checked="settings.sms" label="SMS notifications" />
+    <BvSwitch v-model:checked="settings.push" label="Push notifications" />
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { BvSwitch } from "@baklavue/ui";
+
+const settings = reactive({
+  email: true,
+  sms: false,
+  push: true,
+});
+</script>
+```
+
+## Props
+
+| Prop       | Type      | Default     | Description                        |
+| ---------- | --------- | ----------- | ---------------------------------- |
+| `checked`  | `boolean` | `undefined` | Checked state (use with v-model:checked) |
+| `disabled` | `boolean` | `undefined` | Whether the switch is disabled     |
+| `label`    | `string`  | `undefined` | Label for the switch               |
+| `size`     | `string`  | `undefined` | Switch size (`small`, `medium`, `large`) |
+
+## Events
+
+| Event             | Payload       | Description                              |
+| ----------------- | ------------- | ---------------------------------------- |
+| `update:checked`  | `boolean`     | Emitted when checked state changes (v-model) |
+| `change`          | `CustomEvent` | Emitted when the user toggles the switch |
+| `input`           | `CustomEvent` | Emitted on user input (mirrors native)   |
+
+## Slots
+
+| Slot      | Description                              |
+| --------- | ---------------------------------------- |
+| `default` | Switch label (falls back to `label` prop) |
+
+## Types
+
+```typescript
+import type { SwitchProps } from "@baklavue/ui";
+
+interface SwitchProps {
+  checked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  size?: string;
+}
+```
+
+## Usage Notes
+
+- **v-model:checked**: Use `v-model:checked` for two-way binding of the toggle state.
+- **Accessibility**: The `label` prop or default slot provides accessible text for the switch.
+- **Styling**: Custom colors can be applied via CSS variables (`--bl-switch-color-on`, `--bl-switch-color-off`, `--bl-switch-animation-duration`).

package/dist/docs/components/tab.md

@@ -0,0 +1,140 @@
+# Tab
+
+A Vue UI kit component for Baklava's `bl-tabs` (bl-tab-group / bl-tab / bl-tab-panel) components for tab navigation. Use the `tabs` prop for declarative configuration or the default slot for custom tab content and panels.
+
+## Basic Usage
+
+Use the `tabs` prop with `v-model:activeTab` for two-way binding of the active tab.
+
+<div class="component-demo">
+
+<TabBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <p>Active tab: {{ activeTab }}</p>
+    <BvTab v-model:activeTab="activeTab" :tabs="tabs">
+      <div v-if="activeTab === 'tab1'">Content for Tab 1</div>
+      <div v-if="activeTab === 'tab2'">Content for Tab 2</div>
+      <div v-if="activeTab === 'tab3'">Content for Tab 3</div>
+    </BvTab>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTab } from "@baklavue/ui";
+
+const activeTab = ref("tab1");
+const tabs = [
+  { label: "Tab 1", value: "tab1" },
+  { label: "Tab 2", value: "tab2" },
+  { label: "Tab 3", value: "tab3" },
+];
+</script>
+```
+
+## With Slots
+
+Use the default slot to provide panel content. Match `v-if` conditions to the tab `value` to show the correct content.
+
+<div class="component-demo">
+
+<TabWithSlotsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvTab v-model:activeTab="activeTab" :tabs="tabOptions">
+    <div v-if="activeTab === 'overview'">Overview content</div>
+    <div v-if="activeTab === 'profile'">Profile content</div>
+    <div v-if="activeTab === 'settings'">Settings content</div>
+  </BvTab>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTab } from "@baklavue/ui";
+
+const activeTab = ref("profile");
+const tabOptions = [
+  { label: "Overview", value: "overview" },
+  { label: "Profile", value: "profile" },
+  { label: "Settings", value: "settings" },
+];
+</script>
+```
+
+## Disabled Tabs
+
+Disable specific tabs by setting `disabled: true` in the tab option.
+
+```vue
+<template>
+  <BvTab v-model:activeTab="activeTab" :tabs="[
+    { label: 'Enabled', value: 'enabled' },
+    { label: 'Disabled', value: 'disabled', disabled: true },
+  ]">
+    <div v-if="activeTab === 'enabled'">Enabled content</div>
+    <div v-if="activeTab === 'disabled'">Disabled content</div>
+  </BvTab>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvTab } from "@baklavue/ui";
+
+const activeTab = ref("enabled");
+</script>
+```
+
+## Props
+
+| Prop         | Type          | Default     | Description                                        |
+| ------------ | ------------- | ----------- | -------------------------------------------------- |
+| `activeTab`  | `string`      | `undefined` | Currently active tab value (use with v-model:activeTab) |
+| `tabs`       | `TabOption[]` | `undefined` | Array of tab options. When provided, tabs are rendered from this array. |
+| `variant`    | `string`      | `undefined` | Tab variant (passed to bl-tabs)                    |
+| `orientation`| `string`      | `undefined` | Tab orientation: horizontal or vertical            |
+
+## Events
+
+| Event               | Payload    | Description                                       |
+| ------------------- | ---------- | ------------------------------------------------- |
+| `update:activeTab`  | `string`   | Emitted when the active tab changes (v-model)     |
+| `tab-change`       | `CustomEvent` | Emitted when tab selection changes (raw event) |
+
+## Slots
+
+| Slot      | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `default` | Panel content. Use v-if to show content per active tab.  |
+
+## Types
+
+```typescript
+import type { TabProps, TabOption } from "@baklavue/ui";
+
+interface TabOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface TabProps {
+  activeTab?: string;
+  tabs?: TabOption[];
+  variant?: string;
+  orientation?: string;
+}
+```
+
+## Usage Notes
+
+- **tabs prop**: When `tabs` is provided, the component renders a `bl-tab` for each item. Content for each panel is provided via the default slot; use `v-if="activeTab === 'value'"` to show the correct panel.
+- **v-model:activeTab**: Use `v-model:activeTab` for two-way binding of the active tab value.
+- **Accessibility**: The component follows Baklava's accessibility guidelines for tab navigation.