Version 1.0.0

.github/workflows/npm-publish.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
         with:
-          bun-version: '1.3.7'
+          bun-version: "1.3.11"
       - run: bun install --frozen-lockfile
       - run: bun run lint:types
       - run: bun test
@@ -30,7 +30,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
         with:
-          bun-version: '1.3.7'
+          bun-version: "1.3.11"
       - run: bun install --frozen-lockfile
       - run: bun run build:docs
       - uses: actions/upload-pages-artifact@v3
@@ -48,7 +48,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
         with:
-          bun-version: '1.3.7'
+          bun-version: "1.3.11"
       - run: bun install --frozen-lockfile
       - run: bun run build
       - name: Publish to npm (Trusted Publisher)

.github/workflows/test.yml

@@ -6,7 +6,7 @@ permissions:
 on:
   push:
     branches:
-      - '**'
+      - "**"
   pull_request:
     branches:
       - main
@@ -25,7 +25,7 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
-          bun-version: '1.3.7'
+          bun-version: "1.3.11"
 
       - name: Install dependencies
         run: bun install --frozen-lockfile

docs/components/alert.md

@@ -57,26 +57,32 @@ The `bq-alert` component displays contextual feedback messages for user actions,
 
 ## 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 |
+| 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 |
+| Event      | Detail | Description                                            |
+| ---------- | ------ | ------------------------------------------------------ |
+| `bq-close` | —      | Fired when the alert is dismissed via the close button |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot        | Description        |
+| ----------- | ------------------ |
 | *(default)* | Alert body content |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
+| Part    | Description              |
+| ------- | ------------------------ |
 | `alert` | The main alert container |
+
+## Accessibility
+
+- Uses `role="alert"` for danger and warning variants, `role="status"` for info and success.
+- Dismissible alerts provide a close button with an accessible label.
+- Alert content is announced by screen readers when the element appears.

docs/components/badge.md

@@ -53,3 +53,8 @@ The `bq-badge` component is a small status or label indicator.
 | Part    | Description       |
 | ------- | ----------------- |
 | `badge` | The badge element |
+
+## Accessibility
+
+- Badges are purely presentational and should not convey critical information alone.
+- When a badge conveys status, pair it with an `aria-label` or visible text for screen readers.

docs/components/card.md

@@ -38,6 +38,17 @@ The `bq-card` component is a flexible container with optional header, body, and
 </bq-card>
 ```
 
+## Title with Custom Header Content
+
+The `title` prop and `header` slot can be combined. When both are provided, the title is rendered first followed by the slotted header content.
+
+```html
+<bq-card title="Settings">
+  <bq-button slot="header" size="sm" variant="ghost">Edit</bq-button>
+  <p>Card body content</p>
+</bq-card>
+```
+
 ## Padding Options
 
 ```html
@@ -49,25 +60,31 @@ The `bq-card` component is a flexible container with optional header, body, and
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | `string` | `''` | Renders a built-in card header title |
-| `elevated` | `boolean` | `true` | Enables the default card shadow |
-| `padding` | `none \| sm \| md \| lg` | `md` | Sets the body padding |
+| Property   | Type                     | Default | Description                          |
+| ---------- | ------------------------ | ------- | ------------------------------------ |
+| `title`    | `string`                 | `''`    | Renders a built-in card header title |
+| `elevated` | `boolean`                | `true`  | Enables the default card shadow      |
+| `padding`  | `none \| sm \| md \| lg` | `md`    | Sets the body padding                |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| *(default)* | Card body content |
-| `header` | Content in the card header |
-| `footer` | Content in the card footer |
+| Slot        | Description                |
+| ----------- | -------------------------- |
+| *(default)* | Card body content          |
+| `header`    | Content in the card header |
+| `footer`    | Content in the card footer |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
-| `card` | Outer card container |
-| `header` | Header section |
-| `body` | Body section |
-| `footer` | Footer section |
+| Part     | Description          |
+| -------- | -------------------- |
+| `card`   | Outer card container |
+| `header` | Header section       |
+| `body`   | Body section         |
+| `footer` | Footer section       |
+
+## Accessibility
+
+- Cards use semantic HTML with heading hierarchy (`<h3>` for the title).
+- Content is accessible via normal document flow.
+- Use the `title` prop or the `header` slot to provide a meaningful heading for the card.

docs/components/dialog.md

@@ -63,34 +63,41 @@ The `bq-dialog` component is a modal dialog overlay used for confirmations, form
 
 ## 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 |
+| 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 |
+| 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 |
+| 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 |
+| 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                                       |
+
+## Accessibility
+
+- Uses `role="dialog"` and `aria-modal="true"` for proper screen reader semantics.
+- Title is linked via `aria-labelledby` so the dialog is announced by name.
+- Focus is trapped within the dialog while open and restored to the trigger on close.
+- Press `Escape` to dismiss the dialog.

docs/components/divider.md

@@ -24,6 +24,8 @@ The `bq-divider` component renders a horizontal or vertical visual separator wit
 </div>
 ```
 
+Vertical dividers can also render a label, which is laid out vertically to stay legible in narrow spaces.
+
 ## Variants
 
 ```html

docs/components/drawer.md

@@ -68,34 +68,42 @@ The `bq-drawer` component is a slide-in side panel used for navigation menus, de
 
 ## 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 |
+| 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 |
+| 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 |
+| 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 |
+| 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                                       |
+
+## Accessibility
+
+- Uses `role="dialog"` and `aria-modal="true"` for proper screen reader semantics.
+- Title is linked via `aria-labelledby` so the drawer is announced by name.
+- Focus is trapped within the drawer while open and restored to the trigger on close.
+- Press `Escape` to dismiss the drawer.
+- Close button has a localized `aria-label`.

docs/components/progress.md

@@ -58,4 +58,8 @@ The `bq-progress` component is a determinate or indeterminate progress bar.
 
 ## Accessibility
 
-The component uses a native `<progress>` element or appropriate ARIA roles to communicate progress to assistive technology. The `label` prop provides a screen-reader-friendly description.
+The component exposes `role="progressbar"` on the visual track element.
+
+- Determinate progress sets `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, and a localized `aria-valuetext`.
+- Indeterminate progress omits the numeric value and instead uses `aria-busy="true"` with localized loading text.
+- The `label` prop provides the accessible name. When omitted, a localized fallback label is used.

docs/components/radio.md

@@ -33,6 +33,12 @@ The `bq-radio` component is a radio button form control with label and hint text
 <bq-radio name="plan" value="legacy" label="Legacy" disabled></bq-radio>
 ```
 
+## Required
+
+```html
+<bq-radio name="plan" value="pro" label="Pro plan" required></bq-radio>
+```
+
 ## Properties
 
 | Property   | Type      | Default | Description                   |
@@ -42,6 +48,7 @@ The `bq-radio` component is a radio button form control with label and hint text
 | `value`    | `string`  | —       | Radio value                   |
 | `checked`  | `boolean` | `false` | Whether the radio is selected |
 | `disabled` | `boolean` | `false` | Disables the radio            |
+| `required` | `boolean` | `false` | Marks the radio as required   |
 | `hint`     | `string`  | —       | Helper text below the label   |
 
 ## Events
@@ -63,3 +70,9 @@ The `bq-radio` component is a radio button form control with label and hint text
 ## Form Participation
 
 The component creates a hidden input proxy for native `<form>` submission. The proxy carries the `name` and `value` when checked.
+
+## Accessibility
+
+- Each radio renders a native `<input type="radio">` inside the shadow DOM for full keyboard support.
+- The label is associated with the input via a wrapping `<label>` element.
+- Use the `required` prop to mark mandatory radio fields; the required indicator is rendered visually and conveyed through the native `required` attribute on the internal radio input.