@baklavue/mcp 1.0.0

package/dist/docs/components/alert.md

@@ -0,0 +1,233 @@
+# Alert
+
+A Vue UI kit component for Baklava's `bl-alert` component for displaying alert messages.
+
+## Basic Alert
+
+Use the Alert component with the `description` prop for simple alert messages.
+
+<div class="component-demo">
+
+<BvAlert variant="info" description="This is an info alert" />
+
+</div>
+
+```vue
+<template>
+  <BvAlert variant="info" description="This is an info alert" />
+</template>
+
+<script setup>
+import { BvAlert } from "@baklavue/ui";
+</script>
+```
+
+## Variants
+
+The Alert component supports four variants: info, success, warning, and danger.
+
+<div class="component-demo" style="display: flex; flex-direction: column; gap: 1rem">
+
+<BvAlert variant="info" description="Info message" />
+
+<BvAlert variant="success" description="Success message" />
+
+<BvAlert variant="warning" description="Warning message" />
+
+<BvAlert variant="danger" description="Danger message" />
+
+</div>
+
+```vue
+<template>
+  <BvAlert variant="info" description="Info message" />
+  <BvAlert variant="success" description="Success message" />
+  <BvAlert variant="warning" description="Warning message" />
+  <BvAlert variant="danger" description="Danger message" />
+</template>
+
+<script setup>
+import { BvAlert } from "@baklavue/ui";
+</script>
+```
+
+## With Icon
+
+Add an icon to the alert using the `icon` prop. Use a boolean to show the default variant icon, or pass a specific icon name.
+
+<div class="component-demo" style="display: flex; flex-direction: column; gap: 1rem">
+
+<BvAlert variant="info" description="Alert with default icon" :icon="true" />
+<BvAlert variant="success" description="Alert with settings icon" icon="settings" />
+
+</div>
+
+```vue
+<template>
+  <BvAlert variant="info" description="Alert with default icon" :icon="true" />
+  <BvAlert
+    variant="success"
+    description="Alert with settings icon"
+    icon="settings"
+  />
+</template>
+
+<script setup>
+import { BvAlert } from "@baklavue/ui";
+</script>
+```
+
+## With Caption
+
+Add a caption (title) to the alert using the `caption` prop.
+
+<div class="component-demo">
+
+<BvAlert
+  variant="info"
+  caption="Important notice"
+  description="Please review the terms and conditions before proceeding."
+/>
+
+</div>
+
+```vue
+<template>
+  <BvAlert
+    variant="info"
+    caption="Important notice"
+    description="Please review the terms and conditions before proceeding."
+  />
+</template>
+
+<script setup>
+import { BvAlert } from "@baklavue/ui";
+</script>
+```
+
+## Closable
+
+Display a close button on the alert using the `closable` prop. Listen to the `close` event to handle when the user dismisses the alert.
+
+<div class="component-demo">
+
+<ClosableAlertDemo />
+
+</div>
+
+```vue
+<template>
+  <BvAlert
+    variant="info"
+    description="This alert can be closed"
+    closable
+    @close="handleClose"
+  />
+</template>
+
+<script setup>
+import { BvAlert } from "@baklavue/ui";
+
+const handleClose = () => {
+  console.log("Alert closed");
+};
+</script>
+```
+
+## Custom Content with Slots
+
+Use the `#default`, `#caption`, or `#action` slots to customize the alert content. The default slot provides custom content in place of the `description` prop. The caption slot overrides the `caption` prop. The action slot adds content to the action area.
+
+<div class="component-demo">
+
+<BvAlert variant="info" caption="Custom Slots">
+  <template #default>
+    <p style="color: black">This content is rendered via the default slot instead of the description prop.</p>
+  </template>
+  <template #action>
+    <BvButton size="small">Learn more</BvButton>
+  </template>
+</BvAlert>
+
+</div>
+
+```vue
+<template>
+  <BvAlert variant="info" caption="Custom Slots">
+    <template #default>
+      <p>
+        This content is rendered via the default slot instead of the description
+        prop.
+      </p>
+    </template>
+    <template #action>
+      <BvButton variant="tertiary" size="small">Learn more</BvButton>
+    </template>
+  </BvAlert>
+</template>
+
+<script setup>
+import { BvAlert, BvButton } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop          | Type                     | Default     | Description                                                              |
+| ------------- | ------------------------ | ----------- | ------------------------------------------------------------------------ |
+| `variant`     | `AlertVariant`           | `'info'`    | Alert variant (info, success, warning, danger)                           |
+| `description` | `string`                 | `undefined` | Alert message text                                                       |
+| `icon`        | `boolean \| BaklavaIcon` | `undefined` | Icon configuration - boolean to show default icon, or specific icon name |
+| `closable`    | `boolean`                | `false`     | Show close button                                                        |
+| `caption`     | `string`                 | `undefined` | Optional caption (title) for the alert                                   |
+| `closed`      | `boolean`                | `false`     | Whether the alert is closed/hidden. Use with programmatic control.       |
+
+## Events
+
+| Event   | Payload | Description                              |
+| ------- | ------- | ---------------------------------------- |
+| `close` | `void`  | Emitted when the close button is clicked |
+
+## Methods
+
+Access these methods via template refs:
+
+| Method    | Description                       |
+| --------- | --------------------------------- |
+| `open()`  | Opens the alert programmatically  |
+| `close()` | Closes the alert programmatically |
+
+## Slots
+
+| Slot      | Props | Description                                        |
+| --------- | ----- | -------------------------------------------------- |
+| `default` | -     | Custom content (alternative to `description` prop) |
+| `caption` | -     | Custom caption (alternative to `caption` prop)     |
+| `action`  | -     | Action area content (e.g. buttons, links)          |
+
+## Types
+
+```typescript
+import type { AlertProps } from "@baklavue/ui";
+
+// AlertVariant: "info" | "success" | "warning" | "danger"
+
+interface AlertProps {
+  variant?: AlertVariant;
+  description?: string;
+  icon?: boolean | BaklavaIcon;
+  closable?: boolean;
+  caption?: string;
+  closed?: boolean;
+}
+```
+
+## Usage Notes
+
+- **Description vs Default Slot**: Use the `description` prop for simple text alerts. Use the `#default` slot when you need custom markup (e.g. links, formatted text, or multiple paragraphs).
+
+- **Programmatic Control**: Use the `closed` prop to control visibility, and call `open()` or `close()` via a template ref. Sync state by listening to the `close` event when the user clicks the close button.
+
+- **Accessibility**: The component follows Baklava's accessibility guidelines and includes proper ARIA attributes for screen readers.
+
+- **Styling**: The component uses Baklava's default styling. Custom styling can be applied through CSS variables or by overriding the component styles.

package/dist/docs/components/badge.md

@@ -0,0 +1,100 @@
+# Badge
+
+A Vue UI kit component for Baklava's `bl-badge` component for displaying status badges.
+
+## Basic Badge
+
+Use the Badge component with the default slot for simple badge content.
+
+<div class="component-demo">
+
+<BvBadge>New</BvBadge>
+
+</div>
+
+```vue
+<template>
+  <BvBadge>New</BvBadge>
+</template>
+
+<script setup>
+import { BvBadge } from "@baklavue/ui";
+</script>
+```
+
+## Sizes
+
+The Badge component supports three sizes: small, medium, and large.
+
+<div class="component-demo" style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap">
+
+<BvBadge size="small">Small</BvBadge>
+
+<BvBadge size="medium">Medium</BvBadge>
+
+<BvBadge size="large">Large</BvBadge>
+
+</div>
+
+```vue
+<template>
+  <BvBadge size="small">Small</BvBadge>
+  <BvBadge size="medium">Medium</BvBadge>
+  <BvBadge size="large">Large</BvBadge>
+</template>
+
+<script setup>
+import { BvBadge } from "@baklavue/ui";
+</script>
+```
+
+## With Icon
+
+Add an icon to the badge using the `icon` prop.
+
+<div class="component-demo" style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap">
+
+<BvBadge icon="notification">Updates</BvBadge>
+
+<BvBadge icon="settings" size="small">Settings</BvBadge>
+
+</div>
+
+```vue
+<template>
+  <BvBadge icon="notification">Updates</BvBadge>
+  <BvBadge icon="settings" size="small">Settings</BvBadge>
+</template>
+
+<script setup>
+import { BvBadge } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop   | Type                     | Default     | Description                        |
+| ------ | ------------------------ | ----------- | ---------------------------------- |
+| `size` | `BadgeSize`              | `'medium'`  | Badge size (small, medium, large)  |
+| `icon` | `BaklavaIcon \| undefined` | `undefined` | Optional icon name for the badge   |
+
+## Types
+
+```typescript
+import type { BadgeProps } from "@baklavue/ui";
+
+// BadgeSize: "small" | "medium" | "large"
+
+interface BadgeProps {
+  size?: BadgeSize;
+  icon?: BaklavaIcon;
+}
+```
+
+## Usage Notes
+
+- **Default Slot**: The badge content is provided via the default slot. Place text or simple content between the opening and closing tags.
+
+- **Styling**: The component uses Baklava's default styling. Custom colors can be applied through CSS variables (`--bl-badge-bg-color`, `--bl-badge-color`) or by overriding the component styles.
+
+- **Accessibility**: The component follows Baklava's accessibility guidelines and includes proper ARIA attributes for screen readers.

package/dist/docs/components/banner.md

@@ -0,0 +1,231 @@
+# Banner
+
+A full-width banner displayed at the top of a page to inform users about important information.
+
+## Basic
+
+Use the `title` prop for a simple banner message.
+
+<div class="component-demo">
+
+<BannerBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner title="This is a banner with an important message." />
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+</script>
+```
+
+## With Icon
+
+Add an icon next to the title using the `icon` prop.
+
+<div class="component-demo">
+
+<BannerWithIconDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner icon="info" title="This is a banner with an icon." />
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+</script>
+```
+
+## Color Variants
+
+Use the `color` prop to change the banner color. Supports primary, success, danger, warning, info, and neutral.
+
+<div class="component-demo" style="display: flex; flex-direction: column; gap: 0.5rem;">
+
+<BannerColorsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner color="primary" title="Primary banner" />
+  <BvBanner color="success" title="Success banner" />
+  <BvBanner color="info" icon="info" title="Info banner" />
+  <BvBanner color="warning" icon="warning" title="Warning banner" />
+  <BvBanner color="danger" icon="danger" title="Danger banner" />
+  <BvBanner color="neutral" title="Neutral banner" />
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+</script>
+```
+
+## Closable
+
+Display a close button using the `close` prop. Listen to the `close` event when the user dismisses the banner. Use the `id` prop to persist the dismissed state in localStorage across page reloads.
+
+<div class="component-demo">
+
+<BannerClosableDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner
+    id="example"
+    title="This is a closable banner."
+    close
+    @close="handleClose"
+  />
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+
+const handleClose = () => {
+  console.log("Banner closed");
+};
+</script>
+```
+
+## With Actions
+
+Use the `actions` prop to add action buttons to the banner.
+
+<div class="component-demo">
+
+<BannerWithActionsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner title="This is a banner with actions." :actions="actions" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvBanner } from "@baklavue/ui";
+
+const actions = ref([
+  {
+    label: "Action 1",
+    variant: "tertiary",
+    onClick: () => console.log("Action 1"),
+  },
+  {
+    label: "Action 2",
+    variant: "tertiary",
+    trailingIcon: "arrow_right",
+    onClick: () => console.log("Action 2"),
+  },
+]);
+</script>
+```
+
+## As Link
+
+Pass the `to` prop to make the banner a link. Useful for announcements that link to more information.
+
+<div class="component-demo">
+
+<BannerLinkDemo />
+
+</div>
+
+```vue
+<template>
+  <BvBanner
+    to="https://example.com"
+    target="_blank"
+    title="Learn more about our announcement"
+    color="primary"
+  />
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+</script>
+```
+
+## Usage in App Layout
+
+Use the Banner at the top of your app layout or main template.
+
+```vue
+<template>
+  <div class="app">
+    <BvBanner
+      icon="info"
+      title="Important announcement: Check out our new features!"
+      close
+      id="announcement-2024"
+    />
+    <header>...</header>
+    <main>...</main>
+  </div>
+</template>
+
+<script setup>
+import { BvBanner } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop        | Type             | Default     | Description                                                       |
+| ----------- | ---------------- | ----------- | ----------------------------------------------------------------- |
+| `title`     | `string`         | -           | Banner message text                                               |
+| `icon`      | `BaklavaIcon`    | -           | Icon name displayed next to the title                             |
+| `color`     | `BannerColor`    | `'primary'` | Color variant (primary, success, danger, warning, info, neutral)  |
+| `close`     | `boolean`        | `false`     | Show close button                                                 |
+| `closeIcon` | `BaklavaIcon`    | `'close'`   | Icon for the close button                                         |
+| `id`        | `string`         | -           | Unique ID for localStorage persistence (stores as `banner-${id}`) |
+| `to`        | `string`         | -           | Makes the banner a link (href)                                    |
+| `target`    | `string`         | -           | Link target (e.g. `_blank`)                                       |
+| `actions`   | `BannerAction[]` | -           | Action buttons (label, variant, onClick, icon, trailingIcon)      |
+
+## Events
+
+| Event   | Payload | Description                              |
+| ------- | ------- | ---------------------------------------- |
+| `close` | `void`  | Emitted when the close button is clicked |
+
+## Slots
+
+| Slot      | Props | Description                     |
+| --------- | ----- | ------------------------------- |
+| `leading` | -     | Custom content before the title |
+| `title`   | -     | Override title content          |
+| `actions` | -     | Custom action buttons           |
+| `close`   | -     | Custom close button             |
+
+## Types
+
+```typescript
+import type { BannerProps, BannerColor, BannerAction } from "@baklavue/ui";
+
+const props: BannerProps = {
+  title: "Banner message",
+  icon: "info",
+  color: "primary",
+  close: false,
+  actions: [{ label: "Learn more", variant: "tertiary", onClick: () => {} }],
+};
+```
+
+## Usage Notes
+
+- **localStorage persistence**: When `id` is set and `close` is true, the dismissed state is stored in localStorage as `banner-${id}`. The banner will not show again until the user clears storage or the key is removed.
+
+- **Link mode**: When `to` is provided, the banner content becomes a link. Action buttons inside the banner will not trigger navigation (clicks are stopped).
+
+- **Accessibility**: The component uses `role="banner"` and includes an accessible close button label.