bQuery · JosunLP · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -28,9 +28,17 @@ export default defineConfig({
         text: 'Components',
         items: [
           { text: 'Catalog', link: '/components/' },
+          { text: 'Alert', link: '/components/alert' },
           { text: 'Button', link: '/components/button' },
-          { text: 'Input', link: '/components/input' },
           { text: 'Card', link: '/components/card' },
+          { text: 'Checkbox', link: '/components/checkbox' },
+          { text: 'Dialog', link: '/components/dialog' },
+          { text: 'Drawer', link: '/components/drawer' },
+          { text: 'Input', link: '/components/input' },
+          { text: 'Select', link: '/components/select' },
+          { text: 'Table', link: '/components/table' },
+          { text: 'Tabs', link: '/components/tabs' },
+          { text: 'Toast', link: '/components/toast' },
         ],
       },
     ],

diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -0,0 +1,82 @@
+# Alert
+
+The `bq-alert` component displays contextual feedback messages for user actions, such as success confirmations, warnings, and error notifications.
+
+## Basic Usage
+
+```html
+<bq-alert variant="info" title="Information">
+  This is an informational message.
+</bq-alert>
+```
+
+## Variants
+
+```html
+<bq-alert variant="info" title="Info">
+  This is an informational alert.
+</bq-alert>
+
+<bq-alert variant="success" title="Success">
+  Operation completed successfully.
+</bq-alert>
+
+<bq-alert variant="warning" title="Warning">
+  Please review the following issues.
+</bq-alert>
+
+<bq-alert variant="danger" title="Error">
+  Something went wrong. Please try again.
+</bq-alert>
+```
+
+## Dismissible
+
+```html
+<bq-alert variant="success" title="Saved" dismissible>
+  Your changes have been saved.
+</bq-alert>
+```
+
+## With Custom Content
+
+```html
+<bq-alert variant="warning" title="Storage Almost Full" dismissible>
+  <p>You have used <strong>90%</strong> of your storage.</p>
+  <bq-button size="sm" variant="outline">Upgrade Plan</bq-button>
+</bq-alert>
+```
+
+## Without Title
+
+```html
+<bq-alert variant="info">
+  A simple informational message without a title.
+</bq-alert>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `info \| success \| warning \| danger` | `info` | Visual style indicating the alert type |
+| `title` | `string` | `''` | Alert heading text |
+| `dismissible` | `boolean` | `false` | Shows a close button to dismiss the alert |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `bq-close` | — | Fired when the alert is dismissed via the close button |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Alert body content |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `alert` | The main alert container |
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
@@ -0,0 +1,71 @@
+# Checkbox
+
+The `bq-checkbox` component is an accessible checkbox input supporting checked, indeterminate, and disabled states with optional hint text.
+
+## Basic Usage
+
+```html
+<bq-checkbox label="Accept terms and conditions"></bq-checkbox>
+```
+
+## Checked
+
+```html
+<bq-checkbox label="Receive notifications" checked></bq-checkbox>
+```
+
+## Indeterminate
+
+```html
+<bq-checkbox label="Select all" indeterminate></bq-checkbox>
+```
+
+## With Hint
+
+```html
+<bq-checkbox
+  label="Marketing emails"
+  hint="We'll send you updates about new features and promotions."
+></bq-checkbox>
+```
+
+## Disabled
+
+```html
+<bq-checkbox label="Inactive option" disabled></bq-checkbox>
+<bq-checkbox label="Locked selection" checked disabled></bq-checkbox>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `label` | `string` | — | Checkbox label text |
+| `checked` | `boolean` | `false` | Whether the checkbox is checked |
+| `indeterminate` | `boolean` | `false` | Displays the indeterminate (mixed) state |
+| `disabled` | `boolean` | `false` | Disables the checkbox |
+| `name` | `string` | — | Form field name |
+| `value` | `string` | — | Value submitted with the form |
+| `hint` | `string` | — | Helper text displayed below the label |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `bq-change` | `{ checked: boolean }` | Fired when the checked state changes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Custom label content (overrides the `label` property) |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `wrapper` | The outer checkbox wrapper |
+| `control` | The checkbox input control |
+| `input` | The native checkbox input |
+| `label` | Label text element |
+| `hint` | Hint text element |
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
@@ -0,0 +1,96 @@
+# Dialog
+
+The `bq-dialog` component is a modal dialog overlay used for confirmations, forms, and focused interactions. It traps focus and supports keyboard dismissal.
+
+## Basic Usage
+
+```html
+<bq-button onclick="document.querySelector('#my-dialog').open = true">
+  Open Dialog
+</bq-button>
+
+<bq-dialog id="my-dialog" title="Confirm Action">
+  <p>Are you sure you want to continue?</p>
+</bq-dialog>
+```
+
+## Sizes
+
+```html
+<bq-dialog title="Small Dialog" size="sm">
+  <p>Compact dialog for simple messages.</p>
+</bq-dialog>
+
+<bq-dialog title="Medium Dialog" size="md">
+  <p>Default size, suitable for most use cases.</p>
+</bq-dialog>
+
+<bq-dialog title="Large Dialog" size="lg">
+  <p>Large dialog for complex content.</p>
+</bq-dialog>
+
+<bq-dialog title="Extra Large Dialog" size="xl">
+  <p>Extra-large dialog for data-heavy views.</p>
+</bq-dialog>
+
+<bq-dialog title="Full Screen" size="full">
+  <p>Full-screen dialog for immersive experiences.</p>
+</bq-dialog>
+```
+
+## Non-Dismissible
+
+```html
+<bq-dialog title="Required Action" dismissible="false">
+  <p>You must complete this action before continuing.</p>
+  <div slot="footer">
+    <bq-button>Acknowledge</bq-button>
+  </div>
+</bq-dialog>
+```
+
+## With Footer
+
+```html
+<bq-dialog title="Save Changes?">
+  <p>You have unsaved changes. Do you want to save before leaving?</p>
+  <div slot="footer">
+    <bq-button variant="ghost">Discard</bq-button>
+    <bq-button variant="primary">Save</bq-button>
+  </div>
+</bq-dialog>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `open` | `boolean` | `false` | Controls visibility of the dialog |
+| `title` | `string` | — | Dialog heading text |
+| `size` | `sm \| md \| lg \| xl \| full` | `md` | Width preset for the dialog |
+| `dismissible` | `boolean` | `true` | Allows closing via overlay click, Escape key, and close button |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `bq-close` | — | Fired when the dialog is dismissed |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Dialog body content |
+| `footer` | Footer area, typically used for action buttons |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `overlay` | Background overlay behind the dialog |
+| `dialog` | The dialog container |
+| `header` | Header section containing the title and close button |
+| `title` | Title text element |
+| `close` | Close / dismiss button |
+| `body` | Body content area |
+| `footer` | Footer section |
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
@@ -0,0 +1,101 @@
+# Drawer
+
+The `bq-drawer` component is a slide-in side panel used for navigation menus, detail views, and supplementary content.
+
+## Basic Usage
+
+```html
+<bq-button onclick="document.querySelector('#my-drawer').open = true">
+  Open Drawer
+</bq-button>
+
+<bq-drawer id="my-drawer" title="Settings">
+  <p>Drawer body content goes here.</p>
+</bq-drawer>
+```
+
+## Placement Variants
+
+```html
+<bq-drawer title="Right (default)" placement="right">
+  <p>Slides in from the right.</p>
+</bq-drawer>
+
+<bq-drawer title="Left" placement="left">
+  <p>Slides in from the left.</p>
+</bq-drawer>
+
+<bq-drawer title="Top" placement="top">
+  <p>Slides in from the top.</p>
+</bq-drawer>
+
+<bq-drawer title="Bottom" placement="bottom">
+  <p>Slides in from the bottom.</p>
+</bq-drawer>
+```
+
+## Sizes
+
+```html
+<bq-drawer title="Small Drawer" size="sm">
+  <p>Narrow side panel.</p>
+</bq-drawer>
+
+<bq-drawer title="Medium Drawer" size="md">
+  <p>Default width panel.</p>
+</bq-drawer>
+
+<bq-drawer title="Large Drawer" size="lg">
+  <p>Wide panel for detailed content.</p>
+</bq-drawer>
+
+<bq-drawer title="Full Drawer" size="full">
+  <p>Full-width panel.</p>
+</bq-drawer>
+```
+
+## With Footer
+
+```html
+<bq-drawer title="Edit Profile">
+  <p>Update your profile information below.</p>
+  <div slot="footer">
+    <bq-button variant="ghost">Cancel</bq-button>
+    <bq-button variant="primary">Save</bq-button>
+  </div>
+</bq-drawer>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `open` | `boolean` | `false` | Controls visibility of the drawer |
+| `title` | `string` | — | Drawer heading text |
+| `placement` | `right \| left \| top \| bottom` | `right` | Edge from which the drawer slides in |
+| `size` | `sm \| md \| lg \| full` | `md` | Width (or height for top/bottom) of the drawer |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `bq-close` | — | Fired when the drawer is dismissed |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Drawer body content |
+| `footer` | Footer area, typically used for action buttons |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `backdrop` | Background overlay behind the drawer |
+| `drawer` | The drawer container |
+| `header` | Header section containing the title and close button |
+| `title` | Title text element |
+| `close` | Close / dismiss button |
+| `body` | Body content area |
+| `footer` | Footer section |