@bridge-ui/vue 0.4.0 → 0.5.0

package/docs/components/Drawer.md

@@ -134,4 +134,4 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
 
 ## Related components
 
-Card, useDialogAction, useDrawerAction, useModalAction
+Card, Sidebar, useDialogAction, useDrawerAction, useModalAction

package/docs/components/EmptyState.md

@@ -0,0 +1,125 @@
+# EmptyState
+
+Placeholder when a list, table, or view has no data. Title, description, optional media, and actions. Pass illustration through the `media` slot or `icon` — Bridge does not ship a stock set.
+
+Does not set `role` by default. Pass `role="status"` when the empty state is a live update.
+
+## Import
+
+```ts
+import { EmptyState } from "@bridge-ui/vue/Components/EmptyState";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<EmptyState
+  icon="search"
+  title="No projects yet"
+  description="Create your first project to get started."
+>
+  <template #action>
+    <Button color="primary">New project</Button>
+  </template>
+</EmptyState>
+```
+
+### Compact
+
+```vue
+<EmptyState size="sm" title="No results" description="Try another filter." />
+```
+
+### Alignment
+
+```vue
+<EmptyState
+  align="start"
+  title="No files"
+  description="Drop a file here to get started."
+/>
+```
+
+### Heading
+
+Use `title-as` when the page outline needs a heading. The default is `p` so the block is safe inside tables and lists.
+
+```vue
+<EmptyState title-as="h2" title="No projects yet" />
+```
+
+### Media slot
+
+```vue
+<EmptyState
+  title="No projects yet"
+  description="Create your first project to get started."
+>
+  <template #media>
+    <Icon icon="search" />
+  </template>
+  <template #action>
+    <Button color="primary">New project</Button>
+    <Button variant="flat">Learn more</Button>
+  </template>
+</EmptyState>
+```
+
+### DataTable
+
+Override the DataTable default with a richer `EmptyState` via `#empty`.
+
+```vue
+<DataTable :rows="[]" :columns="columns">
+  <template #empty>
+    <EmptyState
+      size="sm"
+      title="No users"
+      description="Invite a teammate to get started."
+    >
+      <template #action>
+        <Button size="sm">Invite</Button>
+      </template>
+    </EmptyState>
+  </template>
+</DataTable>
+```
+
+### customProps
+
+```vue
+<EmptyState
+  title="No results"
+  description="Try another filter."
+  :custom-props="{
+    title: { id: 'empty-title' },
+    media: { 'aria-hidden': true },
+    root: { id: 'empty-root', role: 'status' },
+    description: { 'aria-describedby': 'empty-title' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                    | Default    | Description                                                                                                                   |
+| ----------------- | ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `align`           | `EmptyStateAlign`       | `"center"` | Horizontal alignment of the stack (`start`, `center`, `end`).                                                                 |
+| `classes`         | `EmptyStateClasses`     | —          | Part classes (`root`, `media`, `title`, `description`, `actions`, `icon`).                                                    |
+| `customProps`     | `EmptyStateCustomProps` | —          | Extra props for internal parts (`media`, `title`, `description`, etc.). Root HTML attributes stay on the component top level. |
+| `description`     | `string`                | —          | Supporting copy below the title.                                                                                              |
+| `icon`            | `IconSource`            | —          | Default media icon. Use the `media` slot to replace it.                                                                       |
+| `mediaDecorative` | `boolean`               | `true`     | When true, the media wrapper is hidden from assistive tech.                                                                   |
+| `size`            | `EmptyStateSize`        | `"md"`     | Spacing and typography scale (`sm`, `md`, `lg`).                                                                              |
+| `title`           | `string`                | —          | Primary heading copy.                                                                                                         |
+| `titleAs`         | `"p" \| "h1"` … `"h6"`  | `"p"`      | Element used to render `title`.                                                                                               |
+
+## Accessibility
+
+Keep default media decorative (`media-decorative`). Set `media-decorative` to `false` when the illustration conveys meaning that is not in the title or description. Use `title-as` with a heading level when the empty state is the main content of the view. For live updates after a filter or fetch, pass `role="status"`.
+
+## Related components
+
+Alert, Card, DataTable, Icon, List, Skeleton, Table

package/docs/components/List.md

@@ -164,4 +164,4 @@ With the default `as="li"`, sticky styles apply on the section root. The list (o
 
 ## Related components
 
-Menu, Select
+Menu, Select, Sidebar

package/docs/components/Sidebar.md

@@ -0,0 +1,281 @@
+# Sidebar
+
+Persistent app-shell rail. Mount `SidebarProvider` around `Sidebar` and `SidebarInset` as siblings. Put `SidebarList` / `Accordion` in the default slot. On small viewports the panel opens as a `Drawer`.
+
+## Import
+
+```ts
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@bridge-ui/vue/Components/Sidebar";
+```
+
+## Prerequisites
+
+Mount `SidebarProvider` around the app shell (`Sidebar` and `SidebarInset` as siblings) before using `SidebarTrigger` or `useSidebar`.
+
+`BridgeUIProvider` still holds theme, tokens, and `defaultProps`. It does not own instance `open` state.
+
+## Examples
+
+### Usage
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+      <SidebarListItem interactive primary="Settings" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Header and footer
+
+Put brand and account rows in `#header` / `#footer`. `SidebarList` collapses those rows to the start avatar. The end chevron hides while collapsed. Header and footer lists use `classes.root` `p-0` because those slots are already padded.
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem interactive primary="Acme Inc" secondary="Enterprise">
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="A" color="primary" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem
+      interactive
+      primary="Ada Lovelace"
+      secondary="ada@example.com"
+    >
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="AL" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Icon collapse
+
+Use `SidebarList` / `SidebarListItem` when `collapsible="icon"`. Collapsed items keep `primary` as an `aria-label` and show it in a `Tooltip` on the whole item. Nested `SidebarList` is hidden. The mobile drawer keeps labels.
+
+```vue
+<template>
+  <SidebarList>
+    <ListSection title="Application" />
+    <SidebarListItem interactive primary="Home">
+      <template #start>
+        <Icon icon="user" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <Nav />
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Controlled
+
+```vue
+<SidebarProvider v-model="open">
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Right side
+
+```vue
+<SidebarProvider>
+  <Sidebar side="right">
+    <SidebarList>
+      <SidebarListItem interactive primary="Inbox" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Inset variant
+
+```vue
+<SidebarProvider>
+  <Sidebar variant="inset">
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Collapsible groups
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <Accordion variant="plain">
+      <AccordionItem title="Projects" value="projects">
+        <SidebarList :classes="{ root: 'p-0' }">
+          <SidebarListItem interactive primary="Alpha" />
+          <SidebarListItem interactive primary="Beta" />
+        </SidebarList>
+      </AccordionItem>
+    </Accordion>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## Props (`SidebarProvider`)
+
+| Prop               | Type                         | Default | Description                                  |
+| ------------------ | ---------------------------- | ------- | -------------------------------------------- |
+| `classes`          | `SidebarProviderClasses`     | —       | Part classes (`root`).                       |
+| `customProps`      | `SidebarProviderCustomProps` | —       | Extra props for the layout wrapper.          |
+| `defaultOpen`      | `boolean`                    | `true`  | Uncontrolled initial desktop expanded state. |
+| `v-model`          | `boolean`                    | —       | Controlled desktop expanded state.           |
+| `v-on:open-change` | `(open: boolean)`            | —       | Emitted when desktop `open` should change.   |
+
+## Props (`Sidebar`)
+
+| Prop          | Type                              | Default       | Description                                            |
+| ------------- | --------------------------------- | ------------- | ------------------------------------------------------ |
+| `ariaLabel`   | `string`                          | `"Sidebar"`   | Accessible name for the `aside` and the mobile drawer. |
+| `classes`     | `SidebarClasses`                  | —             | Part classes (`root`, `header`, `content`, …).         |
+| `collapsible` | `"icon" \| "none" \| "offcanvas"` | `"offcanvas"` | How the desktop rail hides.                            |
+| `customProps` | `SidebarCustomProps`              | —             | Extra props for internal parts.                        |
+| `side`        | `"left" \| "right"`               | `"left"`      | Edge the rail docks to.                                |
+| `variant`     | `"inset" \| "sidebar"`            | `"sidebar"`   | Flush rail or padded main column.                      |
+
+## Slots (`Sidebar`)
+
+| Slot      | Description                                 |
+| --------- | ------------------------------------------- |
+| `default` | Rail content (`SidebarList` / `Accordion`). |
+| `footer`  | Sticky footer.                              |
+| `header`  | Sticky header.                              |
+
+## Props (`SidebarInset`)
+
+| Prop          | Type                      | Default | Description                     |
+| ------------- | ------------------------- | ------- | ------------------------------- |
+| `classes`     | `SidebarInsetClasses`     | —       | Part classes (`root`).          |
+| `customProps` | `SidebarInsetCustomProps` | —       | Extra props for the inset root. |
+
+## Props (`SidebarTrigger`)
+
+Renders a `Button`. Forwards native button attributes. Default accessible name is `Toggle sidebar`.
+
+## Props (`SidebarList`)
+
+Same as `List`, plus `icon-only`. Sets `icon-only` when the icon rail is collapsed on desktop. Applies stacked nav chrome (gap, compact rows, nested guide). Override with `icon-only`. Nested `SidebarList` is hidden while collapsed. `ListSection` labels are hidden while collapsed.
+
+## Props (`SidebarListItem`)
+
+Same as `ListItem`, plus `tooltip` / `tooltip-placement`. Applies compact nav chrome. Tooltips only show while the icon rail is collapsed (`primary`, or `tooltip` to override).
+
+## `useSidebar`
+
+Must be called under `SidebarProvider`. Returns a computed context object (`sidebar.value.open`, …).
+
+| Field           | Type                              | Description                                    |
+| --------------- | --------------------------------- | ---------------------------------------------- |
+| `collapsible`   | `"icon" \| "none" \| "offcanvas"` | Mode from the nearest `Sidebar`.               |
+| `isMobile`      | `boolean`                         | Viewport is below `md` (desktop rail CSS).     |
+| `open`          | `boolean`                         | Desktop expanded state.                        |
+| `openMobile`    | `boolean`                         | Mobile drawer visibility.                      |
+| `setOpen`       | `(open: boolean) => void`         | Sets desktop `open`.                           |
+| `setOpenMobile` | `(open: boolean) => void`         | Sets mobile drawer visibility.                 |
+| `side`          | `"left" \| "right"`               | Dock edge.                                     |
+| `state`         | `"collapsed" \| "expanded"`       | Desktop visual state.                          |
+| `toggleSidebar` | `() => void`                      | Toggles desktop `open` or mobile `openMobile`. |
+| `variant`       | `"inset" \| "sidebar"`            | Visual variant.                                |
+
+## Accessibility
+
+- Desktop panel is an `aside` with `aria-label`
+- Offcanvas collapsed panel is `inert` (out of the tab order)
+- Mobile uses `Drawer` (dialog, overlay, Escape)
+- Trigger sets `aria-expanded` and `aria-controls`
+- `SidebarListItem` copies string `primary` to `aria-label` when collapsed
+
+## Related components
+
+Accordion, Avatar, Button, Drawer, List, ListItem, ListSection, Tooltip

package/docs/examples/icon-fontawesome.ts

@@ -110,6 +110,7 @@ const icons = {
   columns: faTableColumns,
   chevronUpDown: faUpDown,
   calendar: faCalendarDays,
+  panelLeft: faTableColumns,
   search: faMagnifyingGlass,
   alert: faCircleExclamation,
   chevronDown: faChevronDown,

package/docs/examples/icon-heroicons.ts

@@ -8,6 +8,7 @@
 import {
   ArrowDownTrayIcon,
   ArrowPathIcon,
+  Bars3Icon,
   BellIcon,
   CalendarDaysIcon,
   CheckCircleIcon,
@@ -51,6 +52,7 @@ const icons = {
   filter: FunnelIcon,
   palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
+  panelLeft: Bars3Icon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,
   chevronUp: ChevronUpIcon,

package/docs/examples/icon-lucide.ts

@@ -27,6 +27,7 @@ import {
   Loader2,
   Minus,
   Palette,
+  PanelLeft,
   Plus,
   Search,
   TriangleAlert,
@@ -60,6 +61,7 @@ const icons = {
   download: Download,
   success: CircleCheck,
   chevronUp: ChevronUp,
+  panelLeft: PanelLeft,
   warning: TriangleAlert,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,

package/docs/examples/icon-phosphor.ts

@@ -26,6 +26,7 @@ import {
   PhMinus,
   PhPalette,
   PhPlus,
+  PhSidebar,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -56,6 +57,7 @@ const icons = {
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,
+  panelLeft: PhSidebar,
   alert: PhWarningCircle,
   success: PhCheckCircle,
   chevronDown: PhCaretDown,

package/docs/examples/icon-tabler.ts

@@ -24,6 +24,7 @@ import {
   IconEyeOff,
   IconFilter,
   IconInfoCircle,
+  IconLayoutSidebar,
   IconLoader2,
   IconMinus,
   IconPalette,
@@ -62,6 +63,7 @@ const icons = {
   warning: IconAlertTriangle,
   chevronUpDown: IconSelector,
   calendar: IconCalendarMonth,
+  panelLeft: IconLayoutSidebar,
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -89,7 +89,7 @@
     }
   },
   "dependencies": {
-    "@bridge-ui/core": "^0.4.0",
+    "@bridge-ui/core": "^0.5.0",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"