From 6320ba4eb8c665a889cb31e3a4ebca951ae88415 Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:59:55 +0100
Subject: [PATCH 01/17] feat: enhance accessibility and improve components

- Added accessibility features to `bq-table`, including keyboard navigation for sortable columns and aria attributes for better screen reader support.
- Updated `bq-tooltip` to automatically link trigger elements with `aria-describedby` for improved accessibility.
- Enhanced `bq-progress` to include localized aria-labels and value text for better screen reader support.
- Improved `bq-select` to handle dynamic options and maintain accessibility with proper aria attributes.
- Added tests for accessibility features in `bq-tooltip`, `bq-select`, and `bq-progress`.
- Updated documentation for `bq-table` and `bq-tooltip` to reflect new accessibility features.
---
 docs/components/progress.md               |   6 +-
 docs/components/select.md                 |  58 +++++++----
 docs/components/table.md                  |  52 +++++-----
 docs/components/tooltip.md                |   1 +
 src/components/pagination/BqPagination.ts |   3 +-
 src/components/progress/BqProgress.ts     |  71 ++++++++++---
 src/components/select/BqSelect.ts         | 119 ++++++++++++++++++++--
 src/components/slider/BqSlider.ts         |   3 +
 src/components/table/BqTable.ts           | 107 +++++++++++++------
 src/components/tooltip/BqTooltip.ts       |  90 +++++++++++++++-
 src/i18n/en.ts                            |   3 +
 stories/select.stories.ts                 |  37 +++++--
 stories/table.stories.ts                  |  33 ++++--
 tests/progress.test.ts                    |  49 +++++++++
 tests/select.test.ts                      |  80 +++++++++++++++
 tests/slider-pagination.test.ts           |  11 ++
 tests/tabs-tooltip.test.ts                |  24 ++++-
 17 files changed, 622 insertions(+), 125 deletions(-)
 create mode 100644 tests/progress.test.ts
 create mode 100644 tests/select.test.ts

diff --git a/docs/components/progress.md b/docs/components/progress.md
index 86b914f..cc9527f 100644
--- a/docs/components/progress.md
+++ b/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.
diff --git a/docs/components/select.md b/docs/components/select.md
index e263e69..295ce1a 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -1,6 +1,6 @@
 # Select
 
-The `bq-select` component is a dropdown selection input with label, error state, and size options.
+The `bq-select` component is a dropdown selection input with label, hint text, error state, form participation, and size options.
 
 ## Basic Usage
 
@@ -35,6 +35,16 @@ The `bq-select` component is a dropdown selection input with label, error state,
 </bq-select>
 ```
 
+## Preselected Value
+
+```html
+<bq-select label="Plan" value="pro" hint="You can change this later.">
+  <option value="free">Free</option>
+  <option value="pro">Pro</option>
+  <option value="enterprise">Enterprise</option>
+</bq-select>
+```
+
 ## Disabled
 
 ```html
@@ -63,34 +73,42 @@ The `bq-select` component is a dropdown selection input with label, error state,
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `label` | `string` | — | Select label |
-| `value` | `string` | — | Currently selected value |
-| `placeholder` | `string` | — | Placeholder text when no option is selected |
-| `name` | `string` | — | Form field name |
-| `disabled` | `boolean` | `false` | Disables the select |
-| `required` | `boolean` | `false` | Marks the field as required |
-| `error` | `string` | — | Error message displayed below the select |
-| `size` | `sm \| md \| lg` | `md` | Select size |
+| Property      | Type             | Default | Description                                     |
+| ------------- | ---------------- | ------- | ----------------------------------------------- |
+| `label`       | `string`         | —       | Select label                                    |
+| `value`       | `string`         | —       | Currently selected value                        |
+| `placeholder` | `string`         | —       | Placeholder text when no option is selected     |
+| `name`        | `string`         | —       | Form field name                                 |
+| `disabled`    | `boolean`        | `false` | Disables the select                             |
+| `required`    | `boolean`        | `false` | Marks the field as required                     |
+| `error`       | `string`         | —       | Error message displayed below the select        |
+| `hint`        | `string`         | —       | Helpful supporting text shown below the control |
+| `size`        | `sm \| md \| lg` | `md`    | Select size                                     |
 
 ## Events
 
-| Event | Detail | Description |
-|-------|--------|-------------|
+| Event       | Detail              | Description                           |
+| ----------- | ------------------- | ------------------------------------- |
 | `bq-change` | `{ value: string }` | Fired when the selected value changes |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot        | Description                               |
+| ----------- | ----------------------------------------- |
 | *(default)* | `<option>` elements for the dropdown list |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
-| `field` | The outer field wrapper |
-| `label` | Label text element |
+| Part     | Description               |
+| -------- | ------------------------- |
+| `field`  | The outer field wrapper   |
+| `label`  | Label text element        |
 | `select` | The native select control |
-| `error` | Error message element |
+| `hint`   | Supporting hint text      |
+| `error`  | Error message element     |
+
+## Accessibility
+
+- The native `<select>` is associated with its visible label through `for` / `id`.
+- Hint and error text are linked with `aria-describedby` when present.
+- The `value` prop now stays synchronized with the rendered native control and the hidden form proxy.
diff --git a/docs/components/table.md b/docs/components/table.md
index c3b6bf8..52ccf7f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -55,37 +55,43 @@ The `bq-table` component renders data tables with sortable columns, striped rows
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `columns` | `string` (JSON) | — | JSON array of column definitions (`{ key, label, sortable? }`) |
-| `rows` | `string` (JSON) | — | JSON array of row data objects |
-| `sort-key` | `string` | — | Key of the currently sorted column |
-| `sort-dir` | `asc \| desc` | — | Current sort direction |
-| `striped` | `boolean` | `false` | Alternates row background colors |
-| `bordered` | `boolean` | `false` | Adds borders to cells |
-| `hover` | `boolean` | `false` | Highlights rows on hover |
-| `loading` | `boolean` | `false` | Shows a loading indicator |
+| Property   | Type            | Default | Description                                                    |
+| ---------- | --------------- | ------- | -------------------------------------------------------------- |
+| `columns`  | `string` (JSON) | —       | JSON array of column definitions (`{ key, label, sortable? }`) |
+| `rows`     | `string` (JSON) | —       | JSON array of row data objects                                 |
+| `sort-key` | `string`        | —       | Key of the currently sorted column                             |
+| `sort-dir` | `asc \| desc`   | —       | Current sort direction                                         |
+| `striped`  | `boolean`       | `false` | Alternates row background colors                               |
+| `bordered` | `boolean`       | `false` | Adds borders to cells                                          |
+| `hover`    | `boolean`       | `false` | Highlights rows on hover                                       |
+| `loading`  | `boolean`       | `false` | Shows a loading indicator                                      |
 
 ## Events
 
-| Event | Detail | Description |
-|-------|--------|-------------|
+| Event     | Detail                         | Description                                                                         |
+| --------- | ------------------------------ | ----------------------------------------------------------------------------------- |
 | `bq-sort` | `{ key: string, dir: string }` | Fired when a sortable column header is activated by click or keyboard (Enter/Space) |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot     | Description                                          |
+| -------- | ---------------------------------------------------- |
 | *(none)* | This component does not currently expose named slots |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
-| `table` | The `<table>` element |
-| `thead` | Table header section |
-| `header-row` | The table header row |
-| `th` | A header cell |
-| `tbody` | Table body section |
-| `row` | A table row |
-| `td` | A table body cell |
+| Part         | Description           |
+| ------------ | --------------------- |
+| `table`      | The `<table>` element |
+| `thead`      | Table header section  |
+| `header-row` | The table header row  |
+| `th`         | A header cell         |
+| `tbody`      | Table body section    |
+| `row`        | A table row           |
+| `td`         | A table body cell     |
+
+## Accessibility
+
+- The component preserves native `<table>` semantics for rows, headers, and cells.
+- Sortable headers are keyboard-activatable with `Enter` and `Space`.
+- Loading and empty states use localized copy from the i18n layer.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 06aa563..1a3d870 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -50,6 +50,7 @@ The `bq-tooltip` component shows a contextual popup on hover or focus of its tri
 ## Accessibility
 
 - The tooltip has `role="tooltip"`.
+- The trigger element is automatically linked to the tooltip with `aria-describedby`.
 - The tooltip is hidden with `opacity: 0` by default and becomes visible on hover/focus.
 - Pressing `Escape` dismisses the tooltip.
 - The animation respects `prefers-reduced-motion`.
diff --git a/src/components/pagination/BqPagination.ts b/src/components/pagination/BqPagination.ts
index 76d403a..6246806 100644
--- a/src/components/pagination/BqPagination.ts
+++ b/src/components/pagination/BqPagination.ts
@@ -107,7 +107,8 @@ const definition: ComponentDefinition<BqPaginationProps> = {
     const nextDisabled = page >= total || props.disabled;
     const pageItems = pages
       .map((p) => {
-        if (p === '...') return '<span class="ellipsis">&#8230;</span>';
+        if (p === '...')
+          return '<span class="ellipsis" aria-hidden="true">&#8230;</span>';
         return `<button class="page-btn" data-page="${p}" data-current="${p === page ? 'true' : 'false'}" ${p === page ? 'aria-current="page"' : ''} type="button">${p}</button>`;
       })
       .join('');
diff --git a/src/components/progress/BqProgress.ts b/src/components/progress/BqProgress.ts
index da7340b..dad14c2 100644
--- a/src/components/progress/BqProgress.ts
+++ b/src/components/progress/BqProgress.ts
@@ -8,21 +8,29 @@
  * @prop {boolean} indeterminate - Indeterminate/loading state
  * @prop {string}  label         - Accessible label
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
+import { t } from '../../i18n/index.js';
 import { getBaseStyles } from '../../utils/styles.js';
 
-type BqProgressProps = { value: number; max: number; size: string; variant: string; indeterminate: boolean; label: string };
+type BqProgressProps = {
+  value: number;
+  max: number;
+  size: string;
+  variant: string;
+  indeterminate: boolean;
+  label: string;
+};
 
 const definition: ComponentDefinition<BqProgressProps> = {
   props: {
-    value:         { type: Number, default: 0 },
-    max:           { type: Number, default: 100 },
-    size:          { type: String, default: 'md' },
-    variant:       { type: String, default: 'primary' },
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    size: { type: String, default: 'md' },
+    variant: { type: String, default: 'primary' },
     indeterminate: { type: Boolean, default: false },
-    label:         { type: String, default: '' },
+    label: { type: String, default: '' },
   },
   styles: `
     ${getBaseStyles()}
@@ -55,17 +63,48 @@ const definition: ComponentDefinition<BqProgressProps> = {
     }
   `,
   render({ props }) {
-    const pct = props.indeterminate ? 0 : Math.min(100, Math.max(0, (props.value / props.max) * 100));
+    const max = props.max > 0 ? props.max : 100;
+    const value = Math.min(max, Math.max(0, props.value));
+    const pct = props.indeterminate
+      ? 0
+      : Math.min(100, Math.max(0, (value / max) * 100));
+    const accessibleLabel =
+      props.label ||
+      (props.indeterminate ? t('common.loading') : t('progress.ariaLabel'));
+    const valueText = props.indeterminate
+      ? t('common.loading')
+      : `${Math.round(pct)}%`;
     return html`
-      ${props.label ? `<div class="label" part="label">${escapeHtml(props.label)}</div>` : ''}
-      <div part="track" class="track" data-size="${escapeHtml(props.size)}"
-        role="progressbar" aria-valuenow="${props.indeterminate ? '' : String(props.value)}"
-        aria-valuemin="0" aria-valuemax="${String(props.max)}"
-        aria-label="${escapeHtml(props.label || 'Progress')}">
-        <div part="bar" class="bar" data-variant="${escapeHtml(props.variant)}" data-value="${String(Math.round(pct))}"
-          style="width:${String(Math.round(pct))}%"></div>
+      ${props.label
+        ? `<div class="label" part="label">${escapeHtml(props.label)}</div>`
+        : ''}
+      <div
+        part="track"
+        class="track"
+        data-size="${escapeHtml(props.size)}"
+        role="progressbar"
+        ${props.indeterminate
+          ? `aria-busy="true" aria-valuetext="${escapeHtml(valueText)}"`
+          : `aria-valuenow="${String(value)}" aria-valuemin="0" aria-valuemax="${String(max)}" aria-valuetext="${escapeHtml(valueText)}"`}
+        aria-label="${escapeHtml(accessibleLabel)}"
+      >
+        <div
+          part="bar"
+          class="bar"
+          data-variant="${escapeHtml(props.variant)}"
+          data-value="${String(Math.round(pct))}"
+          style="width:${String(Math.round(pct))}%"
+        ></div>
       </div>
-      <span class="sr-only">${escapeHtml(props.label ? `${props.label}: ${Math.round(pct)}%` : `${Math.round(pct)}%`)}</span>
+      <span class="sr-only"
+        >${escapeHtml(
+          props.indeterminate
+            ? accessibleLabel
+            : props.label
+              ? `${props.label}: ${Math.round(pct)}%`
+              : `${Math.round(pct)}%`
+        )}</span
+      >
     `;
   },
 };
diff --git a/src/components/select/BqSelect.ts b/src/components/select/BqSelect.ts
index 3406df1..ad1bd44 100644
--- a/src/components/select/BqSelect.ts
+++ b/src/components/select/BqSelect.ts
@@ -31,7 +31,85 @@ type BqSelectProps = {
   hint: string;
   size: string;
 };
-type BqSelectState = { uid: string };
+type BqSelectState = { uid: string; optionsMarkup: string };
+
+const serializeOption = (
+  option: Element,
+  selectedValue: string,
+  hasExplicitValue: boolean
+): string => {
+  const optionValue =
+    option.getAttribute('value') ?? option.textContent?.trim() ?? '';
+  const attrs = [`value="${escapeHtml(optionValue)}"`];
+  if (option.hasAttribute('disabled')) attrs.push('disabled');
+  if (
+    hasExplicitValue
+      ? optionValue === selectedValue
+      : option.hasAttribute('selected')
+  ) {
+    attrs.push('selected');
+  }
+  return `<option ${attrs.join(' ')}>${escapeHtml(option.textContent?.trim() ?? '')}</option>`;
+};
+
+const serializeOptGroup = (
+  group: Element,
+  selectedValue: string,
+  hasExplicitValue: boolean
+): string => {
+  const optionsMarkup = Array.from(group.children)
+    .filter((child) => child.tagName.toLowerCase() === 'option')
+    .map((option) => serializeOption(option, selectedValue, hasExplicitValue))
+    .join('');
+  const disabled = group.hasAttribute('disabled') ? ' disabled' : '';
+  return `<optgroup label="${escapeHtml(group.getAttribute('label') ?? '')}"${disabled}>${optionsMarkup}</optgroup>`;
+};
+
+const buildOptionsMarkup = (host: HTMLElement, placeholder: string): string => {
+  const selectedValue = host.getAttribute('value') ?? '';
+  const hasExplicitValue = host.hasAttribute('value');
+  const placeholderMarkup = placeholder
+    ? `<option value="" ${!selectedValue ? 'selected' : ''} disabled>${escapeHtml(placeholder)}</option>`
+    : '';
+  const childrenMarkup = Array.from(host.children)
+    .map((child) => {
+      if (child.tagName.toLowerCase() === 'option') {
+        return serializeOption(child, selectedValue, hasExplicitValue);
+      }
+      if (child.tagName.toLowerCase() === 'optgroup') {
+        return serializeOptGroup(child, selectedValue, hasExplicitValue);
+      }
+      return '';
+    })
+    .join('');
+  return `${placeholderMarkup}${childrenMarkup}`;
+};
+
+const syncSelectValue = (host: HTMLElement): void => {
+  const select = host.shadowRoot?.querySelector(
+    'select'
+  ) as HTMLSelectElement | null;
+  if (!select) return;
+
+  const attrValue = host.getAttribute('value');
+  const options = Array.from(select.options);
+  const hasMatchingValue =
+    attrValue !== null && options.some((option) => option.value === attrValue);
+
+  if (hasMatchingValue) {
+    select.value = attrValue;
+  }
+
+  const normalizedValue = select.value;
+  if ((attrValue ?? '') !== normalizedValue) {
+    host.setAttribute('value', normalizedValue);
+  }
+
+  const proxy = (host as unknown as Record<string, unknown>)['_formProxy'] as
+    | FormProxy
+    | undefined;
+  proxy?.setValue(normalizedValue);
+};
 
 const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
   props: {
@@ -47,6 +125,7 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
   },
   state: {
     uid: '',
+    optionsMarkup: '',
   },
   styles: `
     ${getBaseStyles()}
@@ -80,12 +159,22 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
   `,
   connected() {
     type BQEl = HTMLElement & {
-      setState(k: 'uid', v: string): void;
+      setState(k: 'uid' | 'optionsMarkup', v: string): void;
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
     if (!self.getState<string>('uid'))
       self.setState('uid', uniqueId('bq-select'));
+    const syncOptions = () => {
+      const markup = buildOptionsMarkup(
+        self,
+        self.getAttribute('placeholder') ?? ''
+      );
+      if (self.getState<string>('optionsMarkup') !== markup) {
+        self.setState('optionsMarkup', markup);
+      }
+      requestAnimationFrame(() => syncSelectValue(self));
+    };
 
     // Form proxy for native <form> participation
     const name = self.getAttribute('name') ?? '';
@@ -108,13 +197,31 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
         );
       }
     };
+    const syncValue = () => syncSelectValue(self);
+    const observer = new MutationObserver(() => {
+      syncOptions();
+    });
+    observer.observe(self, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ['disabled', 'label', 'selected', 'value'],
+    });
+
     (self as unknown as Record<string, unknown>)['_handler'] = handler;
+    (self as unknown as Record<string, unknown>)['_syncValue'] = syncValue;
+    (self as unknown as Record<string, unknown>)['_syncOptions'] = syncOptions;
+    (self as unknown as Record<string, unknown>)['_observer'] = observer;
     self.shadowRoot?.addEventListener('change', handler);
+    syncOptions();
   },
   disconnected() {
     const s = this as unknown as Record<string, unknown>;
     const h = s['_handler'] as EventListener | undefined;
     if (h) this.shadowRoot?.removeEventListener('change', h);
+    const observer = s['_observer'] as MutationObserver | undefined;
+    observer?.disconnect();
     (s['_formProxy'] as FormProxy | undefined)?.cleanup();
   },
   updated() {
@@ -125,11 +232,14 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
       proxy.setValue(this.getAttribute('value') ?? '');
       proxy.setDisabled(this.hasAttribute('disabled'));
     }
+    (s['_syncOptions'] as (() => void) | undefined)?.();
+    (s['_syncValue'] as (() => void) | undefined)?.();
   },
   render({ props, state }) {
     const hasError = Boolean(props.error);
     const hasHint = Boolean(props.hint) && !hasError;
     const uid = state.uid || 'bq-select';
+    const optionsMarkup = state.optionsMarkup || '';
     const describedParts: string[] = [];
     if (hasError) describedParts.push(`${uid}-err`);
     if (hasHint) describedParts.push(`${uid}-hint`);
@@ -149,10 +259,7 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
             aria-invalid="${hasError ? 'true' : 'false'}"
             ${describedBy ? `aria-describedby="${describedBy}"` : ''}
           >
-            ${props.placeholder
-              ? `<option value="" ${!props.value ? 'selected' : ''} disabled>${escapeHtml(props.placeholder)}</option>`
-              : ''}
-            <slot></slot>
+            ${optionsMarkup}
           </select>
           <span class="arrow" aria-hidden="true">&#9660;</span>
         </div>
diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 6e05c04..5b938b9 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -135,6 +135,9 @@ const definition: ComponentDefinition<BqSliderProps> = {
           aria-valuemin="${String(props.min)}"
           aria-valuemax="${String(props.max)}"
           aria-valuenow="${String(props.value)}"
+          aria-valuetext="${escapeHtml(
+            t('slider.valueText', { value: props.value })
+          )}"
         />
       </div>
     `;
diff --git a/src/components/table/BqTable.ts b/src/components/table/BqTable.ts
index a63e5a7..c9b4095 100644
--- a/src/components/table/BqTable.ts
+++ b/src/components/table/BqTable.ts
@@ -11,25 +11,34 @@
  * @prop {boolean} loading
  * @fires bq-sort - { key: string, dir: string }
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
-import { getBaseStyles } from '../../utils/styles.js';
 import { t } from '../../i18n/index.js';
+import { getBaseStyles } from '../../utils/styles.js';
 
 type ColDef = { key: string; label: string; sortable?: boolean };
-type BqTableProps = { columns: string; rows: string; 'sort-key': string; 'sort-dir': string; striped: boolean; bordered: boolean; hover: boolean; loading: boolean };
+type BqTableProps = {
+  columns: string;
+  rows: string;
+  'sort-key': string;
+  'sort-dir': string;
+  striped: boolean;
+  bordered: boolean;
+  hover: boolean;
+  loading: boolean;
+};
 
 const definition: ComponentDefinition<BqTableProps> = {
   props: {
-    columns:    { type: String, default: '[]' },
-    rows:       { type: String, default: '[]' },
+    columns: { type: String, default: '[]' },
+    rows: { type: String, default: '[]' },
     'sort-key': { type: String, default: '' },
     'sort-dir': { type: String, default: 'asc' },
-    striped:    { type: Boolean, default: false },
-    bordered:   { type: Boolean, default: false },
-    hover:      { type: Boolean, default: false },
-    loading:    { type: Boolean, default: false },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    hover: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
   },
   styles: `
     ${getBaseStyles()}
@@ -56,22 +65,33 @@ const definition: ComponentDefinition<BqTableProps> = {
       const key = th.getAttribute('data-sort-key') ?? '';
       const curDir = self.getAttribute('sort-dir') ?? 'asc';
       const curKey = self.getAttribute('sort-key') ?? '';
-      const newDir = (key === curKey && curDir === 'asc') ? 'desc' : 'asc';
+      const newDir = key === curKey && curDir === 'asc' ? 'desc' : 'asc';
       self.setAttribute('sort-key', key);
       self.setAttribute('sort-dir', newDir);
-      self.dispatchEvent(new CustomEvent('bq-sort', { detail: { key, dir: newDir }, bubbles: true, composed: true }));
+      self.dispatchEvent(
+        new CustomEvent('bq-sort', {
+          detail: { key, dir: newDir },
+          bubbles: true,
+          composed: true,
+        })
+      );
     };
     const handler = (e: Event) => {
-      const th = (e.target as Element).closest('th.sortable') as HTMLElement | null;
+      const th = (e.target as Element).closest(
+        'th.sortable'
+      ) as HTMLElement | null;
       if (!th) return;
       sortHandler(th);
     };
     const keyHandler = (e: Event) => {
       const ke = e as KeyboardEvent;
-      const th = (ke.target as Element).closest('th.sortable') as HTMLElement | null;
+      const th = (ke.target as Element).closest(
+        'th.sortable'
+      ) as HTMLElement | null;
       if (!th) return;
       const isSpaceKeydown = ke.type === 'keydown' && ke.key === ' ';
-      const isEnterKeydown = ke.type === 'keydown' && ke.key === 'Enter' && !ke.repeat;
+      const isEnterKeydown =
+        ke.type === 'keydown' && ke.key === 'Enter' && !ke.repeat;
       const isSpaceKeyup = ke.type === 'keyup' && ke.key === ' ';
       if (isSpaceKeydown) {
         e.preventDefault();
@@ -98,27 +118,50 @@ const definition: ComponentDefinition<BqTableProps> = {
   render({ props }) {
     let cols: ColDef[] = [];
     let rows: Record<string, unknown>[] = [];
-    try { cols = JSON.parse(props.columns) as ColDef[]; } catch { cols = []; }
-    try { rows = JSON.parse(props.rows) as Record<string, unknown>[]; } catch { rows = []; }
+    try {
+      cols = JSON.parse(props.columns) as ColDef[];
+    } catch {
+      cols = [];
+    }
+    try {
+      rows = JSON.parse(props.rows) as Record<string, unknown>[];
+    } catch {
+      rows = [];
+    }
     const sortKey = props['sort-key'];
     const sortDir = props['sort-dir'];
-    const theads = cols.map(col => {
-      const isSorted = col.key === sortKey;
-      const sortIcon = col.sortable
-        ? `<span class="sort-icon" data-active="${isSorted ? 'true' : 'false'}" aria-hidden="true">${isSorted && sortDir === 'desc' ? '&#9650;' : '&#9660;'}</span>`
-        : '';
-      const sortableAttrs = col.sortable
-        ? `class="sortable" data-sort-key="${escapeHtml(col.key)}" tabindex="0" aria-sort="${isSorted ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}"`
-        : '';
-      return `<th part="th" role="columnheader" ${sortableAttrs}>${escapeHtml(col.label)}${sortIcon}</th>`;
-    }).join('');
-    const tbodies = props.loading ? `<tr><td colspan="${cols.length}" class="loading-overlay">${escapeHtml(t('table.loading'))}</td></tr>`
-      : rows.length === 0 ? `<tr class="empty-row"><td colspan="${cols.length}">${escapeHtml(t('table.noData'))}</td></tr>`
-      : rows.map(row => `<tr part="row">${cols.map(col => `<td part="td">${escapeHtml(String(row[col.key] ?? ''))}</td>`).join('')}</tr>`).join('');
+    const theads = cols
+      .map((col) => {
+        const isSorted = col.key === sortKey;
+        const sortIcon = col.sortable
+          ? `<span class="sort-icon" data-active="${isSorted ? 'true' : 'false'}" aria-hidden="true">${isSorted && sortDir === 'desc' ? '&#9650;' : '&#9660;'}</span>`
+          : '';
+        const sortableAttrs = col.sortable
+          ? `class="sortable" data-sort-key="${escapeHtml(col.key)}" tabindex="0" aria-sort="${isSorted ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}"`
+          : '';
+        return `<th part="th" role="columnheader" ${sortableAttrs}>${escapeHtml(col.label)}${sortIcon}</th>`;
+      })
+      .join('');
+    const tbodies = props.loading
+      ? `<tr><td colspan="${cols.length}" class="loading-overlay">${escapeHtml(t('table.loading'))}</td></tr>`
+      : rows.length === 0
+        ? `<tr class="empty-row"><td colspan="${cols.length}">${escapeHtml(t('table.noData'))}</td></tr>`
+        : rows
+            .map(
+              (row) =>
+                `<tr part="row">${cols.map((col) => `<td part="td">${escapeHtml(String(row[col.key] ?? ''))}</td>`).join('')}</tr>`
+            )
+            .join('');
     return html`
-      <table part="table" role="grid">
-        <thead part="thead"><tr part="header-row">${theads}</tr></thead>
-        <tbody part="tbody">${tbodies}</tbody>
+      <table part="table">
+        <thead part="thead">
+          <tr part="header-row">
+            ${theads}
+          </tr>
+        </thead>
+        <tbody part="tbody">
+          ${tbodies}
+        </tbody>
       </table>
     `;
   },
diff --git a/src/components/tooltip/BqTooltip.ts b/src/components/tooltip/BqTooltip.ts
index bc3f88d..3233f8f 100644
--- a/src/components/tooltip/BqTooltip.ts
+++ b/src/components/tooltip/BqTooltip.ts
@@ -9,17 +9,39 @@
 import type { ComponentDefinition } from '@bquery/bquery/component';
 import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
+import { uniqueId } from '../../utils/dom.js';
 import { getBaseStyles } from '../../utils/styles.js';
 
 type BqTooltipProps = { content: string; placement: string; delay: number };
+type BqTooltipState = { visible: boolean; uid: string };
 
-const definition: ComponentDefinition<BqTooltipProps> = {
+function addDescribedBy(element: HTMLElement, tooltipId: string): void {
+  const current = element.getAttribute('aria-describedby');
+  const tokens = new Set((current ?? '').split(/\s+/).filter(Boolean));
+  tokens.add(tooltipId);
+  element.setAttribute('aria-describedby', Array.from(tokens).join(' '));
+}
+
+function removeDescribedBy(element: HTMLElement, tooltipId: string): void {
+  const current = element.getAttribute('aria-describedby');
+  if (!current) return;
+  const tokens = current
+    .split(/\s+/)
+    .filter((token) => token && token !== tooltipId);
+  if (tokens.length > 0) {
+    element.setAttribute('aria-describedby', tokens.join(' '));
+    return;
+  }
+  element.removeAttribute('aria-describedby');
+}
+
+const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
   props: {
     content: { type: String, default: '' },
     placement: { type: String, default: 'top' },
     delay: { type: Number, default: 200 },
   },
-  state: { visible: false },
+  state: { visible: false, uid: '' },
   styles: `
     ${getBaseStyles()}
     :host { display: inline-block; position: relative; }
@@ -42,10 +64,13 @@ const definition: ComponentDefinition<BqTooltipProps> = {
   `,
   connected() {
     type BQEl = HTMLElement & {
-      setState(k: string, v: unknown): void;
+      setState(k: 'visible' | 'uid', v: unknown): void;
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
+    if (!self.getState<string>('uid')) {
+      self.setState('uid', uniqueId('bq-tooltip'));
+    }
     let timer: ReturnType<typeof setTimeout> | null = null;
     const show = () => {
       const d = parseInt(self.getAttribute('delay') ?? '200', 10);
@@ -58,34 +83,91 @@ const definition: ComponentDefinition<BqTooltipProps> = {
     const kh = (e: Event) => {
       if ((e as KeyboardEvent).key === 'Escape') hide();
     };
+    const syncTrigger = () => {
+      const state = self as unknown as Record<string, unknown>;
+      const tooltipId = self.getState<string>('uid');
+      const previous =
+        (state['_triggerElements'] as HTMLElement[] | undefined) ?? [];
+      previous.forEach((element) => removeDescribedBy(element, tooltipId));
+
+      const slot = self.shadowRoot?.querySelector(
+        'slot'
+      ) as HTMLSlotElement | null;
+      if (!slot) {
+        state['_triggerElements'] = [];
+        return;
+      }
+
+      const content = self.getAttribute('content')?.trim() ?? '';
+      const next = slot
+        .assignedElements({ flatten: true })
+        .filter(
+          (element): element is HTMLElement => element instanceof HTMLElement
+        );
+
+      if (content) {
+        next.forEach((element) => addDescribedBy(element, tooltipId));
+      }
+      state['_triggerElements'] = next;
+    };
     (self as unknown as Record<string, unknown>)['_show'] = show;
     (self as unknown as Record<string, unknown>)['_hide'] = hide;
     (self as unknown as Record<string, unknown>)['_kh'] = kh;
+    (self as unknown as Record<string, unknown>)['_syncTrigger'] = syncTrigger;
     self.addEventListener('mouseenter', show);
     self.addEventListener('mouseleave', hide);
     self.addEventListener('focusin', show);
     self.addEventListener('focusout', hide);
     document.addEventListener('keydown', kh);
+    queueMicrotask(() => {
+      const slot = self.shadowRoot?.querySelector(
+        'slot'
+      ) as HTMLSlotElement | null;
+      if (!slot) return;
+      slot.addEventListener('slotchange', syncTrigger);
+      (self as unknown as Record<string, unknown>)['_slot'] = slot;
+      syncTrigger();
+    });
   },
   disconnected() {
     const self = this as unknown as Record<string, unknown>;
     const show = self['_show'] as EventListener;
     const hide = self['_hide'] as EventListener;
     const kh = self['_kh'] as EventListener;
+    const slot = self['_slot'] as HTMLSlotElement | undefined;
+    const syncTrigger = self['_syncTrigger'] as EventListener | undefined;
+    const triggerElements =
+      (self['_triggerElements'] as HTMLElement[] | undefined) ?? [];
+    const tooltipId =
+      (this as unknown as { getState?<T>(key: string): T }).getState?.<string>(
+        'uid'
+      ) ?? this.id;
     this.removeEventListener('mouseenter', show);
     this.removeEventListener('mouseleave', hide);
     this.removeEventListener('focusin', show);
     this.removeEventListener('focusout', hide);
     document.removeEventListener('keydown', kh);
+    if (slot && syncTrigger)
+      slot.removeEventListener('slotchange', syncTrigger);
+    triggerElements.forEach((element) => removeDescribedBy(element, tooltipId));
+  },
+  updated() {
+    const syncTrigger = (this as unknown as Record<string, unknown>)[
+      '_syncTrigger'
+    ] as (() => void) | undefined;
+    syncTrigger?.();
   },
   render({ props, state }) {
     const visible = Boolean(state['visible']);
+    const uid = state['uid'] || 'bq-tooltip';
     return html`
       <slot></slot>
       <div
+        id="${escapeHtml(uid)}"
         part="tooltip"
         class="tip"
         role="tooltip"
+        aria-hidden="${visible ? 'false' : 'true'}"
         data-placement="${escapeHtml(props.placement)}"
         data-visible="${visible ? 'true' : 'false'}"
       >
@@ -95,4 +177,4 @@ const definition: ComponentDefinition<BqTooltipProps> = {
   },
 };
 
-component<BqTooltipProps>('bq-tooltip', definition);
+component<BqTooltipProps, BqTooltipState>('bq-tooltip', definition);
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index c146c99..d9a8515 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -61,6 +61,9 @@ export const en = {
     loading: 'Loading data…',
     rowsPerPage: 'Rows per page',
   },
+  progress: {
+    ariaLabel: 'Progress',
+  },
   accordion: {
     expand: 'Expand',
     collapse: 'Collapse',
diff --git a/stories/select.stories.ts b/stories/select.stories.ts
index 018d4ea..25436f6 100644
--- a/stories/select.stories.ts
+++ b/stories/select.stories.ts
@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Select',
   tags: ['autodocs'],
   render: (args) => storyHtml`
-    <bq-select label=${args.label} placeholder=${args.placeholder} size=${args.size} ?disabled=${args.disabled} ?required=${args.required} error=${args.error}>
+    <bq-select label=${args.label} value=${args.value} placeholder=${args.placeholder} size=${args.size} hint=${args.hint} ?disabled=${args.disabled} ?required=${args.required} error=${args.error}>
       <option value="react">React</option>
       <option value="vue">Vue</option>
       <option value="angular">Angular</option>
@@ -13,18 +13,33 @@ const meta: Meta = {
     </bq-select>
   `,
   argTypes: {
-    label:      { control: 'text' },
-    placeholder:{ control: 'text' },
-    size:       { control: 'select', options: ['sm','md','lg'] },
-    disabled:   { control: 'boolean' },
-    required:   { control: 'boolean' },
-    error:      { control: 'text' },
+    label: { control: 'text' },
+    value: {
+      control: 'select',
+      options: ['', 'react', 'vue', 'angular', 'svelte'],
+    },
+    placeholder: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    hint: { control: 'text' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    error: { control: 'text' },
+  },
+  args: {
+    label: 'Framework',
+    value: '',
+    placeholder: 'Select a framework',
+    size: 'md',
+    hint: 'Used for generated examples and docs snippets.',
+    disabled: false,
+    required: false,
+    error: '',
   },
-  args: { label: 'Framework', placeholder: 'Select a framework', size: 'md', disabled: false, required: false, error: '' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const WithError:Story = { args: { error: 'Please select an option' } };
+export const Default: Story = {};
+export const WithError: Story = { args: { error: 'Please select an option' } };
 export const Disabled: Story = { args: { disabled: true } };
+export const Selected: Story = { args: { value: 'vue' } };
diff --git a/stories/table.stories.ts b/stories/table.stories.ts
index 100cb0c..13c7090 100644
--- a/stories/table.stories.ts
+++ b/stories/table.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const columns = JSON.stringify([
   { key: 'name', label: 'Name', sortable: true },
@@ -15,20 +15,33 @@ const rows = JSON.stringify([
 const meta: Meta = {
   title: 'Data/Table',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-table columns=${columns} rows=${rows} ?striped=${args.striped} ?bordered=${args.bordered} ?hover=${args.hover} ?loading=${args.loading}></bq-table>`,
+  render: (args) =>
+    storyHtml`<bq-table columns=${columns} rows=${rows} sort-key=${args.sortKey} sort-dir=${args.sortDir} ?striped=${args.striped} ?bordered=${args.bordered} ?hover=${args.hover} ?loading=${args.loading}></bq-table>`,
   argTypes: {
-    striped:  { control: 'boolean' },
+    sortKey: { control: 'select', options: ['', 'name', 'role'] },
+    sortDir: { control: 'select', options: ['asc', 'desc'] },
+    striped: { control: 'boolean' },
     bordered: { control: 'boolean' },
-    hover:    { control: 'boolean' },
-    loading:  { control: 'boolean' },
+    hover: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+  args: {
+    sortKey: '',
+    sortDir: 'asc',
+    striped: false,
+    bordered: false,
+    hover: false,
+    loading: false,
   },
-  args: { striped: false, bordered: false, hover: false, loading: false },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const Striped:  Story = { args: { striped: true } };
+export const Default: Story = {};
+export const Striped: Story = { args: { striped: true } };
 export const Bordered: Story = { args: { bordered: true } };
-export const Hoverable:Story = { args: { hover: true } };
-export const Loading:  Story = { args: { loading: true } };
+export const Hoverable: Story = { args: { hover: true } };
+export const Loading: Story = { args: { loading: true } };
+export const SortedByName: Story = {
+  args: { sortKey: 'name', sortDir: 'asc' },
+};
diff --git a/tests/progress.test.ts b/tests/progress.test.ts
new file mode 100644
index 0000000..bf83cff
--- /dev/null
+++ b/tests/progress.test.ts
@@ -0,0 +1,49 @@
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
+
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
+const doc = win.document as unknown as Document;
+
+describe('BqProgress', () => {
+  beforeAll(async () => {
+    await import('../src/components/progress/index.js');
+  });
+
+  afterEach(() => {
+    doc.body.innerHTML = '';
+  });
+
+  it('should use a localized default aria-label for determinate progress', () => {
+    const el = doc.createElement('bq-progress');
+    doc.body.appendChild(el);
+
+    const track = el.shadowRoot?.querySelector('.track');
+    expect(track?.getAttribute('aria-label')).toBe('Progress');
+    expect(track?.getAttribute('aria-valuetext')).toBe('0%');
+  });
+
+  it('should expose busy semantics for indeterminate progress', () => {
+    const el = doc.createElement('bq-progress');
+    el.setAttribute('indeterminate', '');
+    doc.body.appendChild(el);
+
+    const track = el.shadowRoot?.querySelector('.track');
+    expect(track?.getAttribute('aria-busy')).toBe('true');
+    expect(track?.hasAttribute('aria-valuenow')).toBe(false);
+    expect(track?.getAttribute('aria-valuetext')).toBe('Loading');
+  });
+
+  it('should clamp invalid max values to a safe fallback', () => {
+    const el = doc.createElement('bq-progress');
+    el.setAttribute('value', '50');
+    el.setAttribute('max', '0');
+    doc.body.appendChild(el);
+
+    const track = el.shadowRoot?.querySelector('.track');
+    const bar = el.shadowRoot?.querySelector('.bar');
+    expect(track?.getAttribute('aria-valuemax')).toBe('100');
+    expect(track?.getAttribute('aria-valuenow')).toBe('50');
+    expect(bar?.getAttribute('data-value')).toBe('50');
+  });
+});
diff --git a/tests/select.test.ts b/tests/select.test.ts
new file mode 100644
index 0000000..6f21af8
--- /dev/null
+++ b/tests/select.test.ts
@@ -0,0 +1,80 @@
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
+import { waitForFrame } from './helpers.js';
+
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
+const doc = win.document as unknown as Document;
+
+describe('BqSelect', () => {
+  beforeAll(async () => {
+    await import('../src/components/select/index.js');
+  });
+
+  afterEach(() => {
+    doc.body.innerHTML = '';
+  });
+
+  it('should select the matching option when value is provided', async () => {
+    const el = doc.createElement('bq-select');
+    el.setAttribute('label', 'Plan');
+    el.setAttribute('value', 'pro');
+    el.setAttribute('name', 'plan');
+    el.innerHTML = `
+      <option value="free">Free</option>
+      <option value="pro">Pro</option>
+      <option value="enterprise">Enterprise</option>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const select = el.shadowRoot?.querySelector(
+      'select'
+    ) as HTMLSelectElement | null;
+    const proxy = el.nextElementSibling as HTMLInputElement | null;
+
+    expect(select?.value).toBe('pro');
+    expect(el.getAttribute('value')).toBe('pro');
+    expect(proxy?.value).toBe('pro');
+  });
+
+  it('should sync the host value to the native default selection when no value is provided', async () => {
+    const el = doc.createElement('bq-select');
+    el.setAttribute('name', 'framework');
+    el.innerHTML = `
+      <option value="react">React</option>
+      <option value="vue">Vue</option>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const select = el.shadowRoot?.querySelector(
+      'select'
+    ) as HTMLSelectElement | null;
+    const proxy = el.nextElementSibling as HTMLInputElement | null;
+
+    expect(select?.value).toBe('react');
+    expect(el.getAttribute('value')).toBe('react');
+    expect(proxy?.value).toBe('react');
+  });
+
+  it('should update the selected option when slotted options arrive after connection', async () => {
+    const el = doc.createElement('bq-select');
+    el.setAttribute('value', 'angular');
+    doc.body.appendChild(el);
+
+    el.innerHTML = `
+      <option value="react">React</option>
+      <option value="angular">Angular</option>
+    `;
+
+    await waitForFrame(2);
+
+    const select = el.shadowRoot?.querySelector(
+      'select'
+    ) as HTMLSelectElement | null;
+    expect(select?.value).toBe('angular');
+  });
+});
diff --git a/tests/slider-pagination.test.ts b/tests/slider-pagination.test.ts
index 49a9862..e0e592b 100644
--- a/tests/slider-pagination.test.ts
+++ b/tests/slider-pagination.test.ts
@@ -69,6 +69,7 @@ describe('BqSlider', () => {
     expect(input?.getAttribute('aria-valuemin')).toBe('10');
     expect(input?.getAttribute('aria-valuemax')).toBe('90');
     expect(input?.getAttribute('aria-valuenow')).toBe('50');
+    expect(input?.getAttribute('aria-valuetext')).toBe('Value: 50');
   });
 
   it('should create form proxy hidden input', () => {
@@ -161,4 +162,14 @@ describe('BqPagination', () => {
     page2?.click();
     expect(firedPage).toBe(2);
   });
+
+  it('should hide pagination ellipses from assistive technology', () => {
+    const el = doc.createElement('bq-pagination');
+    el.setAttribute('total', '12');
+    el.setAttribute('page', '6');
+    doc.body.appendChild(el);
+
+    const ellipsis = el.shadowRoot?.querySelector('.ellipsis');
+    expect(ellipsis?.getAttribute('aria-hidden')).toBe('true');
+  });
 });
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index 52e1d32..db195e1 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -1,4 +1,5 @@
-import { beforeAll, describe, expect, it } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
+import { waitForFrame } from './helpers.js';
 
 const win = (globalThis as unknown as Record<string, unknown>)[
   'window'
@@ -98,6 +99,10 @@ describe('BqTooltip', () => {
     await import('../src/components/tooltip/index.js');
   });
 
+  afterEach(() => {
+    doc.body.innerHTML = '';
+  });
+
   it('should define bq-tooltip as a custom element', () => {
     expect(win.customElements.get('bq-tooltip')).toBeDefined();
   });
@@ -148,4 +153,21 @@ describe('BqTooltip', () => {
     const tip = el.shadowRoot?.querySelector('.tip');
     expect(tip?.getAttribute('data-visible')).toBe('false');
   });
+
+  it('should link the trigger element to the tooltip via aria-describedby', async () => {
+    const el = doc.createElement('bq-tooltip');
+    el.setAttribute('content', 'Helpful hint');
+    el.innerHTML = '<button type="button">Hover me</button>';
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const trigger = el.querySelector('button');
+    const tip = el.shadowRoot?.querySelector('.tip');
+
+    expect(trigger?.getAttribute('aria-describedby')).toBe(
+      tip?.getAttribute('id')
+    );
+    expect(tip?.getAttribute('aria-hidden')).toBe('true');
+  });
 });

From 91ecdd649e914491c7f8e64a7b27391f28062847 Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 19:45:43 +0100
Subject: [PATCH 02/17] feat: enhance components with accessibility
 improvements and styling updates

- BqCard: Added support for empty header and footer slots, improved header rendering logic.
- BqDivider: Introduced vertical label support and improved styling for vertical orientation.
- BqInput: Enhanced password visibility toggle logic, added aria-required attribute for required inputs.
- BqRadio: Added required prop and visual indication for required fields.
- BqSegmentedControl: Improved button synchronization and accessibility attributes.
- BqSelect: Added aria-required attribute for required selects.
- BqSkeleton: Implemented dimension sanitization to prevent unsafe styles.
- BqStatCard: Improved rendering logic and added visual feedback for trends.
- BqTable: Added accessible caption support and improved header attributes.
- BqTabs: Enhanced tab panel accessibility with proper roles and attributes.
- BqTextarea: Improved rendering logic and added aria-required attribute.
- Stories: Updated stories for Divider, Radio, Table with new props and examples.
- Tests: Added tests for new features and improved existing tests for overlay components.
---
 docs/components/card.md                       | 43 +++++++----
 docs/components/divider.md                    |  2 +
 docs/components/radio.md                      |  7 ++
 docs/components/skeleton.md                   | 14 ++--
 docs/components/table.md                      | 16 +++-
 src/components/card/BqCard.ts                 | 20 +++--
 src/components/divider/BqDivider.ts           | 27 +++++--
 src/components/input/BqInput.ts               | 31 +++++---
 src/components/radio/BqRadio.ts               |  7 +-
 .../segmented-control/BqSegmentedControl.ts   | 27 ++++---
 src/components/select/BqSelect.ts             |  1 +
 src/components/skeleton/BqSkeleton.ts         | 52 ++++++++++---
 src/components/stat-card/BqStatCard.ts        | 36 +++++----
 src/components/table/BqTable.ts               |  9 ++-
 src/components/tabs/BqTabs.ts                 |  7 +-
 src/components/textarea/BqTextarea.ts         | 36 ++++++---
 stories/divider.stories.ts                    | 26 +++++--
 stories/radio.stories.ts                      | 28 +++++--
 stories/table.stories.ts                      |  7 +-
 tests/badge.test.ts                           | 10 +++
 tests/empty-state-spinner.test.ts             | 74 +++++++++++++++++++
 tests/overlay-components.test.ts              | 68 +++++++++++++----
 22 files changed, 415 insertions(+), 133 deletions(-)
 create mode 100644 tests/empty-state-spinner.test.ts

diff --git a/docs/components/card.md b/docs/components/card.md
index 2e78995..41e0462 100644
--- a/docs/components/card.md
+++ b/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,25 @@ 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       |
diff --git a/docs/components/divider.md b/docs/components/divider.md
index 8dafe61..622ee4d 100644
--- a/docs/components/divider.md
+++ b/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
diff --git a/docs/components/radio.md b/docs/components/radio.md
index ba99628..c687576 100644
--- a/docs/components/radio.md
+++ b/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
diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md
index 6733d39..7ece433 100644
--- a/docs/components/skeleton.md
+++ b/docs/components/skeleton.md
@@ -31,12 +31,12 @@ The `bq-skeleton` component renders a shimmer loading placeholder in various sha
 
 ## Properties
 
-| Property  | Type     | Default  | Description                                 |
-| --------- | -------- | -------- | ------------------------------------------- |
-| `variant` | `string` | `'text'` | `text` \| `circle` \| `rect` \| `card`      |
-| `width`   | `string` | `'100%'` | CSS width value                             |
-| `height`  | `string` | —        | CSS height value                            |
-| `lines`   | `number` | `1`      | Number of text lines (for `variant="text"`) |
+| Property  | Type     | Default  | Description                                                                        |
+| --------- | -------- | -------- | ---------------------------------------------------------------------------------- |
+| `variant` | `string` | `'text'` | `text` \| `circle` \| `rect` \| `card`                                             |
+| `width`   | `string` | `'100%'` | A single CSS width expression such as `240px`, `100%`, `clamp(...)`, or `var(...)` |
+| `height`  | `string` | —        | A single CSS height expression such as `3rem`, `40vh`, `calc(...)`, or `var(...)`  |
+| `lines`   | `number` | `1`      | Number of text lines (for `variant="text"`)                                        |
 
 ## CSS Parts
 
@@ -48,3 +48,5 @@ The `bq-skeleton` component renders a shimmer loading placeholder in various sha
 ## Accessibility
 
 The skeleton uses `prefers-reduced-motion` to disable the shimmer animation when the user requests reduced motion.
+
+For safety, `width` and `height` are treated as a single dimension expression. Values that try to inject additional CSS declarations are ignored.
diff --git a/docs/components/table.md b/docs/components/table.md
index 52ccf7f..6117d42 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -59,6 +59,7 @@ The `bq-table` component renders data tables with sortable columns, striped rows
 | ---------- | --------------- | ------- | -------------------------------------------------------------- |
 | `columns`  | `string` (JSON) | —       | JSON array of column definitions (`{ key, label, sortable? }`) |
 | `rows`     | `string` (JSON) | —       | JSON array of row data objects                                 |
+| `caption`  | `string`        | —       | Accessible table caption                                       |
 | `sort-key` | `string`        | —       | Key of the currently sorted column                             |
 | `sort-dir` | `asc \| desc`   | —       | Current sort direction                                         |
 | `striped`  | `boolean`       | `false` | Alternates row background colors                               |
@@ -72,11 +73,18 @@ The `bq-table` component renders data tables with sortable columns, striped rows
 | --------- | ------------------------------ | ----------------------------------------------------------------------------------- |
 | `bq-sort` | `{ key: string, dir: string }` | Fired when a sortable column header is activated by click or keyboard (Enter/Space) |
 
-## Slots
+## CSS Parts
 
-| Slot     | Description                                          |
-| -------- | ---------------------------------------------------- |
-| *(none)* | This component does not currently expose named slots |
+| Part         | Description          |
+| ------------ | -------------------- |
+| `table`      | The table element    |
+| `caption`    | Table caption        |
+| `thead`      | Table header section |
+| `header-row` | Header row           |
+| `th`         | Header cell          |
+| `tbody`      | Table body section   |
+| `row`        | Body row             |
+| `td`         | Body cell            |
 
 ## CSS Parts
 
diff --git a/src/components/card/BqCard.ts b/src/components/card/BqCard.ts
index 9815381..dbb4dbc 100644
--- a/src/components/card/BqCard.ts
+++ b/src/components/card/BqCard.ts
@@ -8,8 +8,8 @@
  * @slot header  - Custom header
  * @slot footer  - Card footer
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { getBaseStyles } from '../../utils/styles.js';
 
@@ -17,9 +17,9 @@ type BqCardProps = { title: string; elevated: boolean; padding: string };
 
 const definition: ComponentDefinition<BqCardProps> = {
   props: {
-    title:    { type: String, default: '' },
+    title: { type: String, default: '' },
     elevated: { type: Boolean, default: true },
-    padding:  { type: String, default: 'md' },
+    padding: { type: String, default: 'md' },
   },
   styles: `
     ${getBaseStyles()}
@@ -36,6 +36,7 @@ const definition: ComponentDefinition<BqCardProps> = {
       padding: var(--bq-space-5,1.25rem) var(--bq-space-6,1.5rem);
       border-bottom: 1px solid var(--bq-border-base,#e2e8f0);
     }
+    .card-header:empty { display: none; }
     .card-title { font-size: var(--bq-font-size-lg,1.125rem); font-weight: var(--bq-font-weight-semibold,600); color: var(--bq-text-base,#0f172a); margin: 0; }
     .card-body[data-padding="none"] { padding: 0; }
     .card-body[data-padding="sm"]   { padding: var(--bq-space-3,0.75rem); }
@@ -49,12 +50,17 @@ const definition: ComponentDefinition<BqCardProps> = {
     .card-footer:empty { display: none; }
   `,
   render({ props }) {
-    const headerSlot = '<slot name="header"></slot>';
-    const title = props.title ? `<div class="card-header" part="header"><h3 class="card-title">${escapeHtml(props.title)}</h3></div>` : headerSlot;
+    const headerContent = props.title
+      ? `<div class="card-header" part="header"><h3 class="card-title">${escapeHtml(props.title)}</h3><slot name="header"></slot></div>`
+      : '<slot name="header"></slot>';
     return html`
       <article part="card" class="card">
-        ${title}
-        <div part="body" class="card-body" data-padding="${escapeHtml(props.padding)}">
+        ${headerContent}
+        <div
+          part="body"
+          class="card-body"
+          data-padding="${escapeHtml(props.padding)}"
+        >
           <slot></slot>
         </div>
         <div part="footer" class="card-footer"><slot name="footer"></slot></div>
diff --git a/src/components/divider/BqDivider.ts b/src/components/divider/BqDivider.ts
index b2dfe51..846fe0a 100644
--- a/src/components/divider/BqDivider.ts
+++ b/src/components/divider/BqDivider.ts
@@ -5,8 +5,8 @@
  * @prop {string} variant     - solid | dashed | dotted
  * @prop {string} label       - Optional center label
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { getBaseStyles } from '../../utils/styles.js';
 
@@ -15,8 +15,8 @@ type BqDividerProps = { orientation: string; variant: string; label: string };
 const definition: ComponentDefinition<BqDividerProps> = {
   props: {
     orientation: { type: String, default: 'horizontal' },
-    variant:     { type: String, default: 'solid' },
-    label:       { type: String, default: '' },
+    variant: { type: String, default: 'solid' },
+    label: { type: String, default: '' },
   },
   styles: `
     ${getBaseStyles()}
@@ -34,13 +34,26 @@ const definition: ComponentDefinition<BqDividerProps> = {
     .divider[data-variant="dotted"] .line { border-top-style: dotted; }
     :host([orientation="vertical"]) .divider { flex-direction: column; height: 100%; width: fit-content; }
     :host([orientation="vertical"]) .line { flex: 1; border-top: none; border-left: 1px solid var(--bq-border-base,#e2e8f0); width: 0; }
+    :host([orientation="vertical"]) [part="label"] {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+      line-height: 1;
+      white-space: nowrap;
+    }
   `,
   render({ props }) {
-    const label = props.label ? `<span part="label">${escapeHtml(props.label)}</span>` : '';
-    return html`<div part="divider" class="divider" data-variant="${escapeHtml(props.variant)}" role="separator" aria-orientation="${escapeHtml(props.orientation)}">
+    const label = props.label
+      ? `<span part="label">${escapeHtml(props.label)}</span>`
+      : '';
+    return html`<div
+      part="divider"
+      class="divider"
+      data-variant="${escapeHtml(props.variant)}"
+      role="separator"
+      aria-orientation="${escapeHtml(props.orientation)}"
+    >
       <hr class="line" part="line" />
-      ${label}
-      ${props.label ? '<hr class="line" part="line" />' : ''}
+      ${label} ${props.label ? '<hr class="line" part="line" />' : ''}
     </div>`;
   },
 };
diff --git a/src/components/input/BqInput.ts b/src/components/input/BqInput.ts
index 80d9ea9..9fd1ccb 100644
--- a/src/components/input/BqInput.ts
+++ b/src/components/input/BqInput.ts
@@ -167,7 +167,8 @@ const definition: ComponentDefinition<BqInputProps, BqInputState> = {
     };
     // Password visibility toggle
     const pwToggle = (e: Event) => {
-      if (self.hasAttribute('disabled') || self.hasAttribute('readonly')) return;
+      if (self.hasAttribute('disabled') || self.hasAttribute('readonly'))
+        return;
       if ((e.target as Element)?.closest('.password-toggle')) {
         const current = self.getState<boolean>('passwordVisible');
         self.setState('passwordVisible', !current);
@@ -220,7 +221,8 @@ const definition: ComponentDefinition<BqInputProps, BqInputState> = {
     const hasError = Boolean(props.error);
     const uid = state.uid || 'bq-input';
     const isPassword = props.type === 'password';
-    const effectiveType = isPassword && state.passwordVisible ? 'text' : props.type;
+    const effectiveType =
+      isPassword && state.passwordVisible ? 'text' : props.type;
     const maxLen = props.maxlength ? parseInt(props.maxlength, 10) : 0;
     const showCounter = props['show-counter'] && maxLen > 0;
     const charCount = props.value.length;
@@ -254,6 +256,7 @@ const definition: ComponentDefinition<BqInputProps, BqInputState> = {
             ${props.readonly ? 'readonly' : ''}
             ${props.required ? 'required' : ''}
             aria-invalid="${hasError ? 'true' : 'false'}"
+            ${props.required ? 'aria-required="true"' : ''}
             ${describedBy ? `aria-describedby="${describedBy}"` : ''}
           />
           ${isPassword
@@ -268,16 +271,22 @@ const definition: ComponentDefinition<BqInputProps, BqInputState> = {
         ${hasFooter
           ? `<div class="footer" part="footer">
               <span>
-                ${hasError
-                  ? `<span class="error-msg" id="${uid}-err" role="alert" part="error">${escapeHtml(props.error)}</span>`
-                  : ''}
-                ${props.hint && !hasError
-                  ? `<span class="hint" id="${uid}-hint" part="hint">${escapeHtml(props.hint)}</span>`
-                  : ''}
+                ${
+                  hasError
+                    ? `<span class="error-msg" id="${uid}-err" role="alert" part="error">${escapeHtml(props.error)}</span>`
+                    : ''
+                }
+                ${
+                  props.hint && !hasError
+                    ? `<span class="hint" id="${uid}-hint" part="hint">${escapeHtml(props.hint)}</span>`
+                    : ''
+                }
               </span>
-              ${showCounter
-                ? `<span class="counter" id="${uid}-counter" part="counter" data-over="${isOver ? 'true' : 'false'}" aria-live="polite">${escapeHtml(t('input.characterCount', { count: charCount, max: maxLen }))}</span>`
-                : ''}
+              ${
+                showCounter
+                  ? `<span class="counter" id="${uid}-counter" part="counter" data-over="${isOver ? 'true' : 'false'}" aria-live="polite">${escapeHtml(t('input.characterCount', { count: charCount, max: maxLen }))}</span>`
+                  : ''
+              }
             </div>`
           : ''}
       </div>
diff --git a/src/components/radio/BqRadio.ts b/src/components/radio/BqRadio.ts
index 06a5da8..d1f52e3 100644
--- a/src/components/radio/BqRadio.ts
+++ b/src/components/radio/BqRadio.ts
@@ -6,6 +6,7 @@
  * @prop {string}  value    - Input value
  * @prop {boolean} checked
  * @prop {boolean} disabled
+ * @prop {boolean} required
  * @prop {string}  hint
  * @fires bq-change - { value: string, checked: boolean }
  */
@@ -21,6 +22,7 @@ type BqRadioProps = {
   value: string;
   checked: boolean;
   disabled: boolean;
+  required: boolean;
   hint: string;
 };
 
@@ -31,6 +33,7 @@ const definition: ComponentDefinition<BqRadioProps> = {
     value: { type: String, default: '' },
     checked: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
     hint: { type: String, default: '' },
   },
   styles: `
@@ -48,6 +51,7 @@ const definition: ComponentDefinition<BqRadioProps> = {
     }
     input[type="radio"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }
     .label-text { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-base,#0f172a); font-family: var(--bq-font-family-sans); line-height: 1.5; }
+    .required-mark { color: var(--bq-color-danger-600,#dc2626); }
     .hint { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); font-family: var(--bq-font-family-sans); padding-left: 1.75rem; }
   `,
   connected() {
@@ -115,9 +119,10 @@ const definition: ComponentDefinition<BqRadioProps> = {
             value="${escapeHtml(props.value)}"
             ${props.checked ? 'checked' : ''}
             ${props.disabled ? 'disabled' : ''}
+            ${props.required ? 'required' : ''}
           />
           ${props.label
-            ? `<span class="label-text" part="label">${escapeHtml(props.label)}</span>`
+            ? `<span class="label-text" part="label">${escapeHtml(props.label)}${props.required ? '<span class="required-mark" aria-hidden="true"> *</span>' : ''}</span>`
             : ''}
         </label>
         ${props.hint
diff --git a/src/components/segmented-control/BqSegmentedControl.ts b/src/components/segmented-control/BqSegmentedControl.ts
index 9fd3905..e1ac673 100644
--- a/src/components/segmented-control/BqSegmentedControl.ts
+++ b/src/components/segmented-control/BqSegmentedControl.ts
@@ -202,8 +202,12 @@ const definition: ComponentDefinition<
       );
       if (selectedButton) return currentValue;
 
-      const fallbackButton = buttons.find((button) => !isButtonDisabled(button));
-      const fallbackValue = fallbackButton ? getButtonValue(fallbackButton) : '';
+      const fallbackButton = buttons.find(
+        (button) => !isButtonDisabled(button)
+      );
+      const fallbackValue = fallbackButton
+        ? getButtonValue(fallbackButton)
+        : '';
 
       if (fallbackValue && fallbackValue !== currentValue) {
         self.setAttribute('value', fallbackValue);
@@ -217,9 +221,12 @@ const definition: ComponentDefinition<
     const syncButtons = () => {
       const buttons = getButtons();
       const selectedValue = ensureSelectedValue();
-      const enabledButtons = buttons.filter((button) => !isButtonDisabled(button));
+      const enabledButtons = buttons.filter(
+        (button) => !isButtonDisabled(button)
+      );
       const focusValue =
-        selectedValue || (enabledButtons[0] ? getButtonValue(enabledButtons[0]) : '');
+        selectedValue ||
+        (enabledButtons[0] ? getButtonValue(enabledButtons[0]) : '');
 
       buttons.forEach((button) => {
         const value = getButtonValue(button);
@@ -411,7 +418,9 @@ const definition: ComponentDefinition<
     if (clickHandler) this.removeEventListener('click', clickHandler);
     if (keyHandler) {
       const buttons = this.querySelectorAll('button');
-      buttons.forEach((button) => button.removeEventListener('keydown', keyHandler));
+      buttons.forEach((button) =>
+        button.removeEventListener('keydown', keyHandler)
+      );
     }
     if (slotChangeHandler) {
       this.shadowRoot
@@ -423,9 +432,9 @@ const definition: ComponentDefinition<
     proxy?.cleanup();
   },
   updated() {
-    const syncButtons = (this as unknown as Record<string, unknown>)['_syncButtons'] as
-      | (() => void)
-      | undefined;
+    const syncButtons = (this as unknown as Record<string, unknown>)[
+      '_syncButtons'
+    ] as (() => void) | undefined;
     syncButtons?.();
   },
   render({ props, state }) {
@@ -437,7 +446,7 @@ const definition: ComponentDefinition<
       ? `aria-labelledby="${labelId}"`
       : props['aria-label']
         ? `aria-label="${escapeHtml(props['aria-label'])}"`
-        : '';
+        : `aria-label="${escapeHtml(props.name || 'Options')}"`;
 
     const descriptionAttribute = props.hint
       ? `aria-describedby="${hintId}"`
diff --git a/src/components/select/BqSelect.ts b/src/components/select/BqSelect.ts
index ad1bd44..606116c 100644
--- a/src/components/select/BqSelect.ts
+++ b/src/components/select/BqSelect.ts
@@ -257,6 +257,7 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
             ${props.disabled ? 'disabled' : ''}
             ${props.required ? 'required' : ''}
             aria-invalid="${hasError ? 'true' : 'false'}"
+            ${props.required ? 'aria-required="true"' : ''}
             ${describedBy ? `aria-describedby="${describedBy}"` : ''}
           >
             ${optionsMarkup}
diff --git a/src/components/skeleton/BqSkeleton.ts b/src/components/skeleton/BqSkeleton.ts
index bb15916..ca69648 100644
--- a/src/components/skeleton/BqSkeleton.ts
+++ b/src/components/skeleton/BqSkeleton.ts
@@ -6,18 +6,41 @@
  * @prop {string}  height   - CSS height value
  * @prop {number}  lines    - Number of text lines
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { getBaseStyles } from '../../utils/styles.js';
 
-type BqSkeletonProps = { variant: string; width: string; height: string; lines: number };
+type BqSkeletonProps = {
+  variant: string;
+  width: string;
+  height: string;
+  lines: number;
+};
+
+const DISALLOWED_DIMENSION_PATTERN =
+  /[;{}]|(?:url\s*\(|expression\s*\(|javascript:|data:|@import)|[\r\n]/i;
+
+const sanitizeDimension = (value: string): string => {
+  const trimmed = value.trim();
+
+  if (!trimmed) return '';
+  if (DISALLOWED_DIMENSION_PATTERN.test(trimmed)) return '';
+
+  return trimmed;
+};
 
-const getStyleAttribute = (width: string, height: string, widthOverride?: string): string => {
+const getStyleAttribute = (
+  width: string,
+  height: string,
+  widthOverride?: string
+): string => {
   const styles: string[] = [];
+  const safeWidth = sanitizeDimension(widthOverride ?? width);
+  const safeHeight = sanitizeDimension(height);
 
-  if (width) styles.push(`width:${widthOverride ?? width}`);
-  if (height) styles.push(`height:${height}`);
+  if (safeWidth) styles.push(`width:${safeWidth}`);
+  if (safeHeight) styles.push(`height:${safeHeight}`);
 
   return styles.join(';');
 };
@@ -25,9 +48,9 @@ const getStyleAttribute = (width: string, height: string, widthOverride?: string
 const definition: ComponentDefinition<BqSkeletonProps> = {
   props: {
     variant: { type: String, default: 'text' },
-    width:   { type: String, default: '100%' },
-    height:  { type: String, default: '' },
-    lines:   { type: Number, default: 1 },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '' },
+    lines: { type: Number, default: 1 },
   },
   sanitize: {
     allowAttributes: ['style'],
@@ -57,12 +80,19 @@ const definition: ComponentDefinition<BqSkeletonProps> = {
   render({ props }) {
     if (props.variant === 'text' && props.lines > 1) {
       const lineStyle = getStyleAttribute(props.width, props.height);
-      const items = Array.from({ length: props.lines }, (_, i) =>
-        `<div class="skeleton" data-variant="text" part="skeleton" style="${escapeHtml(i === props.lines - 1 ? getStyleAttribute(props.width, props.height, '70%') : lineStyle)}"></div>`
+      const items = Array.from(
+        { length: props.lines },
+        (_, i) =>
+          `<div class="skeleton" data-variant="text" part="skeleton" style="${escapeHtml(i === props.lines - 1 ? getStyleAttribute(props.width, props.height, '70%') : lineStyle)}"></div>`
       ).join('');
       return html`<div class="lines" part="lines">${items}</div>`;
     }
-    return html`<div part="skeleton" class="skeleton" data-variant="${escapeHtml(props.variant)}" style="${escapeHtml(getStyleAttribute(props.width, props.height))}"></div>`;
+    return html`<div
+      part="skeleton"
+      class="skeleton"
+      data-variant="${escapeHtml(props.variant)}"
+      style="${escapeHtml(getStyleAttribute(props.width, props.height))}"
+    ></div>`;
   },
 };
 
diff --git a/src/components/stat-card/BqStatCard.ts b/src/components/stat-card/BqStatCard.ts
index 94d16f9..f376d16 100644
--- a/src/components/stat-card/BqStatCard.ts
+++ b/src/components/stat-card/BqStatCard.ts
@@ -11,8 +11,8 @@
  * @slot        - Additional supporting content rendered below the hint
  * @slot icon   - Optional icon or badge for the metric
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { t } from '../../i18n/index.js';
 import { uniqueId } from '../../utils/dom.js';
@@ -40,12 +40,12 @@ function getSize(size: string): 'sm' | 'md' {
 
 const definition: ComponentDefinition<BqStatCardProps, BqStatCardState> = {
   props: {
-    label:   { type: String, default: '' },
-    value:   { type: String, default: '' },
-    change:  { type: String, default: '' },
-    hint:    { type: String, default: '' },
-    trend:   { type: String, default: 'neutral' },
-    size:    { type: String, default: 'md' },
+    label: { type: String, default: '' },
+    value: { type: String, default: '' },
+    change: { type: String, default: '' },
+    hint: { type: String, default: '' },
+    trend: { type: String, default: 'neutral' },
+    size: { type: String, default: 'md' },
     loading: { type: Boolean, default: false },
   },
   state: {
@@ -128,10 +128,12 @@ const definition: ComponentDefinition<BqStatCardProps, BqStatCardState> = {
       color: var(--bq-text-muted,#475569);
     }
     .change[data-trend="up"] {
+      background: rgba(34, 197, 94, 0.14);
       background: color-mix(in srgb, var(--bq-color-success-500,#22c55e) 14%, transparent);
       color: var(--bq-color-success-700,#15803d);
     }
     .change[data-trend="down"] {
+      background: rgba(239, 68, 68, 0.14);
       background: color-mix(in srgb, var(--bq-color-danger-500,#ef4444) 14%, transparent);
       color: var(--bq-color-danger-700,#b91c1c);
     }
@@ -176,7 +178,8 @@ const definition: ComponentDefinition<BqStatCardProps, BqStatCardState> = {
       getState<T>(k: string): T;
     };
     const self = this as unknown as BqStatCardElement;
-    if (!self.getState<string>('uid')) self.setState('uid', uniqueId('bq-stat-card'));
+    if (!self.getState<string>('uid'))
+      self.setState('uid', uniqueId('bq-stat-card'));
   },
   render({ props, state }) {
     const label = props.label.trim();
@@ -189,11 +192,7 @@ const definition: ComponentDefinition<BqStatCardProps, BqStatCardState> = {
     const labelId = `${uid}-label`;
     const hintId = `${uid}-hint`;
     const statusId = `${uid}-status`;
-    const describedByIds = props.loading
-      ? statusId
-      : hint
-        ? hintId
-        : '';
+    const describedByIds = props.loading ? statusId : hint ? hintId : '';
     const describedBy = describedByIds
       ? ` aria-describedby="${escapeHtml(describedByIds)}"`
       : '';
@@ -219,9 +218,16 @@ const definition: ComponentDefinition<BqStatCardProps, BqStatCardState> = {
       `;
 
     return html`
-      <article part="card" class="card" data-size="${size}"${labelledBy}${describedBy}${busy}>
+      <article
+        part="card"
+        class="card"
+        data-size="${size}"
+        ${labelledBy}${describedBy}${busy}
+      >
         <div class="header" part="header">
-          ${label ? `<p class="label" id="${escapeHtml(labelId)}" part="label">${escapeHtml(label)}</p>` : '<span></span>'}
+          ${label
+            ? `<p class="label" id="${escapeHtml(labelId)}" part="label">${escapeHtml(label)}</p>`
+            : '<span></span>'}
           <div class="icon-slot"><slot name="icon"></slot></div>
         </div>
         ${body}
diff --git a/src/components/table/BqTable.ts b/src/components/table/BqTable.ts
index c9b4095..30044da 100644
--- a/src/components/table/BqTable.ts
+++ b/src/components/table/BqTable.ts
@@ -3,6 +3,7 @@
  * @element bq-table
  * @prop {string}  columns  - JSON array of { key, label, sortable? }
  * @prop {string}  rows     - JSON array of row objects
+ * @prop {string}  caption  - Accessible table caption
  * @prop {string}  sort-key
  * @prop {string}  sort-dir - asc | desc
  * @prop {boolean} striped
@@ -21,6 +22,7 @@ type ColDef = { key: string; label: string; sortable?: boolean };
 type BqTableProps = {
   columns: string;
   rows: string;
+  caption: string;
   'sort-key': string;
   'sort-dir': string;
   striped: boolean;
@@ -33,6 +35,7 @@ const definition: ComponentDefinition<BqTableProps> = {
   props: {
     columns: { type: String, default: '[]' },
     rows: { type: String, default: '[]' },
+    caption: { type: String, default: '' },
     'sort-key': { type: String, default: '' },
     'sort-dir': { type: String, default: 'asc' },
     striped: { type: Boolean, default: false },
@@ -47,6 +50,7 @@ const definition: ComponentDefinition<BqTableProps> = {
     table { width: 100%; border-collapse: collapse; font-family: var(--bq-font-family-sans); font-size: var(--bq-font-size-sm,0.875rem); }
     :host([bordered]) table { border: 1px solid var(--bq-border-base,#e2e8f0); }
     th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--bq-border-base,#e2e8f0); }
+    caption { caption-side: top; text-align: left; font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); padding: 0.5rem 1rem; font-family: var(--bq-font-family-sans); }
     :host([bordered]) th, :host([bordered]) td { border: 1px solid var(--bq-border-base,#e2e8f0); }
     th { background: var(--bq-bg-subtle,#f8fafc); font-weight: var(--bq-font-weight-semibold,600); color: var(--bq-text-base,#0f172a); white-space: nowrap; }
     td { color: var(--bq-text-muted,#475569); }
@@ -139,7 +143,7 @@ const definition: ComponentDefinition<BqTableProps> = {
         const sortableAttrs = col.sortable
           ? `class="sortable" data-sort-key="${escapeHtml(col.key)}" tabindex="0" aria-sort="${isSorted ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}"`
           : '';
-        return `<th part="th" role="columnheader" ${sortableAttrs}>${escapeHtml(col.label)}${sortIcon}</th>`;
+        return `<th part="th" scope="col" role="columnheader" ${sortableAttrs}>${escapeHtml(col.label)}${sortIcon}</th>`;
       })
       .join('');
     const tbodies = props.loading
@@ -154,6 +158,9 @@ const definition: ComponentDefinition<BqTableProps> = {
             .join('');
     return html`
       <table part="table">
+        ${props.caption
+          ? `<caption part="caption">${escapeHtml(props.caption)}</caption>`
+          : ''}
         <thead part="thead">
           <tr part="header-row">
             ${theads}
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index 4eadf0c..1d1dc41 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -148,9 +148,11 @@ const definition: ComponentDefinition<BqTabsProps> = {
     // Sync panel visibility after each render
     const active = this.getAttribute('active-tab') ?? '';
     this.querySelectorAll<HTMLElement>('[data-tab]').forEach((panel) => {
-      panel.hidden = panel.getAttribute('data-tab') !== active;
+      const tabId = panel.getAttribute('data-tab') ?? '';
+      panel.hidden = tabId !== active;
       panel.setAttribute('role', 'tabpanel');
       panel.setAttribute('tabindex', '0');
+      panel.setAttribute('aria-labelledby', `tab-${tabId}`);
     });
   },
   render({ props, state }) {
@@ -163,8 +165,9 @@ const definition: ComponentDefinition<BqTabsProps> = {
       .map(
         (tab) => `
       <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
-        role="tab" data-tab-id="${escapeHtml(tab.id)}"
+        role="tab" id="tab-${escapeHtml(tab.id)}" data-tab-id="${escapeHtml(tab.id)}"
         aria-selected="${tab.id === active ? 'true' : 'false'}"
+        aria-controls="${escapeHtml(tab.id)}"
         tabindex="${tab.id === active ? '0' : '-1'}"
         ${tab.disabled ? 'disabled aria-disabled="true"' : ''}
       >${escapeHtml(tab.label)}</button>
diff --git a/src/components/textarea/BqTextarea.ts b/src/components/textarea/BqTextarea.ts
index 1f86f0d..d98aa2b 100644
--- a/src/components/textarea/BqTextarea.ts
+++ b/src/components/textarea/BqTextarea.ts
@@ -208,23 +208,35 @@ const definition: ComponentDefinition<BqTextareaProps, BqTextareaState> = {
           ${props.readonly ? 'readonly' : ''}
           ${props.required ? 'required' : ''}
           aria-invalid="${hasError ? 'true' : 'false'}"
+          ${props.required ? 'aria-required="true"' : ''}
           ${describedBy ? `aria-describedby="${describedBy}"` : ''}
-        >${escapeHtml(props.value)}</textarea>
+        >
+${escapeHtml(props.value)}</textarea
+        >
         ${hasFooter
           ? `<div class="footer" part="footer">
               <span>
-                ${hasError
-                  ? `<span class="error-msg" id="${uid}-err" role="alert" part="error">${escapeHtml(props.error)}</span>`
-                  : ''}
-                ${props.hint && !hasError
-                  ? `<span class="hint" id="${uid}-hint" part="hint">${escapeHtml(props.hint)}</span>`
-                  : ''}
+                ${
+                  hasError
+                    ? `<span class="error-msg" id="${uid}-err" role="alert" part="error">${escapeHtml(props.error)}</span>`
+                    : ''
+                }
+                ${
+                  props.hint && !hasError
+                    ? `<span class="hint" id="${uid}-hint" part="hint">${escapeHtml(props.hint)}</span>`
+                    : ''
+                }
               </span>
-              ${showCounter
-                ? `<span class="counter" id="${uid}-counter" part="counter" data-over="${isOver ? 'true' : 'false'}" aria-live="polite">${escapeHtml(
-                    t('input.characterCount', { count: charCount, max: maxLen }),
-                  )}</span>`
-                : ''}
+              ${
+                showCounter
+                  ? `<span class="counter" id="${uid}-counter" part="counter" data-over="${isOver ? 'true' : 'false'}" aria-live="polite">${escapeHtml(
+                      t('input.characterCount', {
+                        count: charCount,
+                        max: maxLen,
+                      })
+                    )}</span>`
+                  : ''
+              }
             </div>`
           : ''}
       </div>
diff --git a/stories/divider.stories.ts b/stories/divider.stories.ts
index 0b214c9..e26f965 100644
--- a/stories/divider.stories.ts
+++ b/stories/divider.stories.ts
@@ -1,20 +1,30 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Layout/Divider',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-divider orientation=${args.orientation} variant=${args.variant} label=${args.label}></bq-divider>`,
+  render: (args) =>
+    storyHtml`<bq-divider orientation=${args.orientation} variant=${args.variant} label=${args.label}></bq-divider>`,
   argTypes: {
-    orientation: { control: 'select', options: ['horizontal','vertical'] },
-    variant:     { control: 'select', options: ['solid','dashed','dotted'] },
-    label:       { control: 'text' },
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+    variant: { control: 'select', options: ['solid', 'dashed', 'dotted'] },
+    label: { control: 'text' },
   },
   args: { orientation: 'horizontal', variant: 'solid', label: '' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:     Story = {};
-export const WithLabel:   Story = { args: { label: 'OR' } };
-export const Dashed:      Story = { args: { variant: 'dashed' } };
+export const Default: Story = {};
+export const WithLabel: Story = { args: { label: 'OR' } };
+export const Dashed: Story = { args: { variant: 'dashed' } };
+export const VerticalWithLabel: Story = {
+  render: () => storyHtml`
+    <div style="display:flex;align-items:center;gap:1rem;height:10rem">
+      <span>Before</span>
+      <bq-divider orientation="vertical" label="STEP"></bq-divider>
+      <span>After</span>
+    </div>
+  `,
+};
diff --git a/stories/radio.stories.ts b/stories/radio.stories.ts
index 0d28cb0..57532a4 100644
--- a/stories/radio.stories.ts
+++ b/stories/radio.stories.ts
@@ -1,17 +1,27 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Radio',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-radio label=${args.label} name="demo" value=${args.value} ?checked=${args.checked} ?disabled=${args.disabled}></bq-radio>`,
+  render: (args) =>
+    storyHtml`<bq-radio label=${args.label} name="demo" value=${args.value} ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required} hint=${args.hint}></bq-radio>`,
   argTypes: {
-    label:    { control: 'text' },
-    value:    { control: 'text' },
-    checked:  { control: 'boolean' },
+    label: { control: 'text' },
+    value: { control: 'text' },
+    checked: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    hint: { control: 'text' },
+  },
+  args: {
+    label: 'Option A',
+    value: 'a',
+    checked: false,
+    disabled: false,
+    required: false,
+    hint: '',
   },
-  args: { label: 'Option A', value: 'a', checked: false, disabled: false },
 };
 export default meta;
 type Story = StoryObj;
@@ -27,3 +37,9 @@ export const Group: Story = {
     </div>
   `,
 };
+export const Required: Story = {
+  args: { required: true, label: 'Accept terms' },
+};
+export const WithHint: Story = {
+  args: { label: 'Premium', hint: 'Includes priority support' },
+};
diff --git a/stories/table.stories.ts b/stories/table.stories.ts
index 13c7090..f4e9355 100644
--- a/stories/table.stories.ts
+++ b/stories/table.stories.ts
@@ -16,8 +16,9 @@ const meta: Meta = {
   title: 'Data/Table',
   tags: ['autodocs'],
   render: (args) =>
-    storyHtml`<bq-table columns=${columns} rows=${rows} sort-key=${args.sortKey} sort-dir=${args.sortDir} ?striped=${args.striped} ?bordered=${args.bordered} ?hover=${args.hover} ?loading=${args.loading}></bq-table>`,
+    storyHtml`<bq-table columns=${columns} rows=${rows} caption=${args.caption} sort-key=${args.sortKey} sort-dir=${args.sortDir} ?striped=${args.striped} ?bordered=${args.bordered} ?hover=${args.hover} ?loading=${args.loading}></bq-table>`,
   argTypes: {
+    caption: { control: 'text' },
     sortKey: { control: 'select', options: ['', 'name', 'role'] },
     sortDir: { control: 'select', options: ['asc', 'desc'] },
     striped: { control: 'boolean' },
@@ -26,6 +27,7 @@ const meta: Meta = {
     loading: { control: 'boolean' },
   },
   args: {
+    caption: '',
     sortKey: '',
     sortDir: 'asc',
     striped: false,
@@ -45,3 +47,6 @@ export const Loading: Story = { args: { loading: true } };
 export const SortedByName: Story = {
   args: { sortKey: 'name', sortDir: 'asc' },
 };
+export const WithCaption: Story = {
+  args: { caption: 'Team members and their roles' },
+};
diff --git a/tests/badge.test.ts b/tests/badge.test.ts
index b35f22e..345f446 100644
--- a/tests/badge.test.ts
+++ b/tests/badge.test.ts
@@ -43,4 +43,14 @@ describe('BqBadge', () => {
     const badge = el.shadowRoot?.querySelector('.badge');
     expect(badge?.getAttribute('data-size')).toBe('sm');
   });
+
+  it('should support the pill host attribute for rounded badge styling', () => {
+    const el = doc.createElement('bq-badge');
+    el.setAttribute('pill', '');
+    doc.body.appendChild(el);
+
+    const styles = el.shadowRoot?.querySelector('style');
+    expect(el.hasAttribute('pill')).toBe(true);
+    expect(styles?.textContent).toContain(':host([pill]) .badge');
+  });
 });
diff --git a/tests/empty-state-spinner.test.ts b/tests/empty-state-spinner.test.ts
new file mode 100644
index 0000000..b6cdd30
--- /dev/null
+++ b/tests/empty-state-spinner.test.ts
@@ -0,0 +1,74 @@
+import { beforeAll, describe, expect, it } from 'bun:test';
+
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
+const doc = win.document as unknown as Document;
+
+describe('BqEmptyState', () => {
+  beforeAll(async () => {
+    await import('../src/components/empty-state/index.js');
+  });
+
+  it('should define bq-empty-state as a custom element', () => {
+    expect(win.customElements.get('bq-empty-state')).toBeDefined();
+  });
+
+  it('should render icon, title, description, and slotted actions', async () => {
+    const el = doc.createElement('bq-empty-state');
+    el.setAttribute('icon', '📭');
+    el.setAttribute('title', 'No messages');
+    el.setAttribute('description', 'Inbox zero is real.');
+    el.innerHTML = '<button type="button">Refresh</button>';
+    doc.body.appendChild(el);
+
+    await Promise.resolve();
+
+    const icon = el.shadowRoot?.querySelector('.icon');
+    const title = el.shadowRoot?.querySelector('.title');
+    const description = el.shadowRoot?.querySelector('.description');
+    const actionsSlot = el.shadowRoot?.querySelector(
+      '.actions slot'
+    ) as HTMLSlotElement | null;
+    const assignedActions =
+      actionsSlot?.assignedElements({ flatten: true }) ?? [];
+
+    expect(icon?.textContent).toBe('📭');
+    expect(title?.textContent).toBe('No messages');
+    expect(description?.textContent).toBe('Inbox zero is real.');
+    expect(assignedActions).toHaveLength(1);
+    expect(assignedActions[0]?.textContent).toContain('Refresh');
+  });
+});
+
+describe('BqSpinner', () => {
+  beforeAll(async () => {
+    await import('../src/components/spinner/index.js');
+  });
+
+  it('should define bq-spinner as a custom element', () => {
+    expect(win.customElements.get('bq-spinner')).toBeDefined();
+  });
+
+  it('should render the requested size and variant', () => {
+    const el = doc.createElement('bq-spinner');
+    el.setAttribute('size', 'lg');
+    el.setAttribute('variant', 'success');
+    doc.body.appendChild(el);
+
+    const spinner = el.shadowRoot?.querySelector('.spinner');
+    expect(spinner?.getAttribute('data-size')).toBe('lg');
+    expect(spinner?.getAttribute('data-variant')).toBe('success');
+  });
+
+  it('should expose the accessible label in both aria-label and sr-only text', () => {
+    const el = doc.createElement('bq-spinner');
+    el.setAttribute('label', 'Loading reports');
+    doc.body.appendChild(el);
+
+    const root = el.shadowRoot?.querySelector('.spinner-root');
+    const srOnly = el.shadowRoot?.querySelector('.sr-only');
+    expect(root?.getAttribute('aria-label')).toBe('Loading reports');
+    expect(srOnly?.textContent).toBe('Loading reports');
+  });
+});
diff --git a/tests/overlay-components.test.ts b/tests/overlay-components.test.ts
index f2f789f..afeed61 100644
--- a/tests/overlay-components.test.ts
+++ b/tests/overlay-components.test.ts
@@ -1,8 +1,10 @@
 // DOM environment is provided by tests/setup.ts (preloaded via bunfig.toml)
-import { describe, it, expect, beforeAll, afterEach } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
 import { waitForFrame } from './helpers.js';
 
-const win = (globalThis as unknown as Record<string, unknown>)['window'] as Window & typeof globalThis;
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
 const doc = win.document as unknown as Document;
 
 describe('overlay and utility component fixes', () => {
@@ -62,8 +64,11 @@ describe('overlay and utility component fixes', () => {
     dialog.setAttribute('open', '');
     await waitForFrame(2);
 
-    const closeButton = dialog.shadowRoot?.querySelector('.close-btn') as HTMLButtonElement | null;
-    const activeWithinDialog = dialog.shadowRoot?.activeElement as Element | null;
+    const closeButton = dialog.shadowRoot?.querySelector(
+      '.close-btn'
+    ) as HTMLButtonElement | null;
+    const activeWithinDialog = dialog.shadowRoot
+      ?.activeElement as Element | null;
 
     expect(closeButton).toBeTruthy();
     expect(activeWithinDialog).toBe(closeButton);
@@ -89,8 +94,11 @@ describe('overlay and utility component fixes', () => {
     dialog.setAttribute('open', '');
     await waitForFrame(2);
 
-    const dialogSurface = dialog.shadowRoot?.querySelector('.dialog') as HTMLElement | null;
-    const activeWithinDialog = dialog.shadowRoot?.activeElement as Element | null;
+    const dialogSurface = dialog.shadowRoot?.querySelector(
+      '.dialog'
+    ) as HTMLElement | null;
+    const activeWithinDialog = dialog.shadowRoot
+      ?.activeElement as Element | null;
 
     expect(dialogSurface).toBeTruthy();
     expect(activeWithinDialog).toBe(dialogSurface);
@@ -139,7 +147,9 @@ describe('overlay and utility component fixes', () => {
     dialog.setAttribute('open', '');
     await waitForFrame(2);
 
-    const insideButton = dialog.querySelector('#inside-dialog') as HTMLButtonElement | null;
+    const insideButton = dialog.querySelector(
+      '#inside-dialog'
+    ) as HTMLButtonElement | null;
     expect(insideButton).toBeTruthy();
 
     insideButton?.focus();
@@ -164,8 +174,11 @@ describe('overlay and utility component fixes', () => {
     drawer.setAttribute('open', '');
     await waitForFrame(2);
 
-    const closeButton = drawer.shadowRoot?.querySelector('.close-btn') as HTMLButtonElement | null;
-    const activeWithinDrawer = drawer.shadowRoot?.activeElement as Element | null;
+    const closeButton = drawer.shadowRoot?.querySelector(
+      '.close-btn'
+    ) as HTMLButtonElement | null;
+    const activeWithinDrawer = drawer.shadowRoot
+      ?.activeElement as Element | null;
 
     expect(closeButton).toBeTruthy();
     expect(activeWithinDrawer).toBe(closeButton);
@@ -192,8 +205,11 @@ describe('overlay and utility component fixes', () => {
     closeButton?.remove();
     await waitForFrame(2);
 
-    const drawerSurface = drawer.shadowRoot?.querySelector('.drawer') as HTMLElement | null;
-    const activeWithinDrawer = drawer.shadowRoot?.activeElement as Element | null;
+    const drawerSurface = drawer.shadowRoot?.querySelector(
+      '.drawer'
+    ) as HTMLElement | null;
+    const activeWithinDrawer = drawer.shadowRoot
+      ?.activeElement as Element | null;
 
     expect(drawerSurface).toBeTruthy();
     expect(drawerSurface?.getAttribute('tabindex')).toBe('-1');
@@ -243,7 +259,9 @@ describe('overlay and utility component fixes', () => {
     drawer.setAttribute('open', '');
     await waitForFrame(2);
 
-    const insideButton = drawer.querySelector('#inside-drawer') as HTMLButtonElement | null;
+    const insideButton = drawer.querySelector(
+      '#inside-drawer'
+    ) as HTMLButtonElement | null;
     expect(insideButton).toBeTruthy();
 
     insideButton?.focus();
@@ -258,15 +276,20 @@ describe('overlay and utility component fixes', () => {
   it('renders breadcrumb separators from the separator prop', async () => {
     const el = doc.createElement('bq-breadcrumbs');
     el.setAttribute('separator', '>');
-    el.innerHTML = '<a href="/">Home</a><a href="/docs">Docs</a><a href="/api">API</a>';
+    el.innerHTML =
+      '<a href="/">Home</a><a href="/docs">Docs</a><a href="/api">API</a>';
     doc.body.appendChild(el);
     await Promise.resolve();
 
-    const separators = Array.from(el.querySelectorAll('[data-bq-breadcrumb-separator]'));
+    const separators = Array.from(
+      el.querySelectorAll('[data-bq-breadcrumb-separator]')
+    );
 
     expect(separators).toHaveLength(2);
     expect(separators.map((item) => item.textContent)).toEqual(['>', '>']);
-    expect(el.querySelector('a:last-of-type')?.getAttribute('aria-current')).toBe('page');
+    expect(
+      el.querySelector('a:last-of-type')?.getAttribute('aria-current')
+    ).toBe('page');
   });
 
   it('applies width and height styles to single skeleton variants', () => {
@@ -289,10 +312,23 @@ describe('overlay and utility component fixes', () => {
     el.setAttribute('height', '18px');
     doc.body.appendChild(el);
 
-    const lines = Array.from(el.shadowRoot?.querySelectorAll('.skeleton') ?? []);
+    const lines = Array.from(
+      el.shadowRoot?.querySelectorAll('.skeleton') ?? []
+    );
     expect(lines).toHaveLength(2);
     expect(lines[0]?.getAttribute('style')).toContain('width:320px');
     expect(lines[0]?.getAttribute('style')).toContain('height:18px');
     expect(lines[1]?.getAttribute('style')).toContain('width:70%');
   });
+
+  it('ignores unsafe skeleton dimension values instead of emitting extra CSS declarations', () => {
+    const el = doc.createElement('bq-skeleton');
+    el.setAttribute('variant', 'rect');
+    el.setAttribute('width', '240px;background:red');
+    el.setAttribute('height', '120px;position:absolute');
+    doc.body.appendChild(el);
+
+    const skeleton = el.shadowRoot?.querySelector('.skeleton');
+    expect(skeleton?.getAttribute('style')).toBe('');
+  });
 });

From bac8303d2400ed627391d3bf13687e1b5b5d0621 Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 20:06:40 +0100
Subject: [PATCH 03/17] Enhance documentation and accessibility for various
 components

- Updated drawer.md to improve property, event, slot, and CSS parts formatting; added accessibility section.
- Added accessibility details to radio.md and switch.md.
- Removed redundant CSS parts section from table.md.
- Enhanced tabs.md with accessibility information and improved formatting.
- Updated toast.md to include accessibility considerations.
- Improved tooltip component by clearing pending show-delay timer in BqTooltip.ts.
- Refined accordion, breadcrumbs, checkbox, chip, dialog, drawer, input, segmented control, select, slider, switch, tabs, textarea, and toast stories for better organization and clarity.
- Added new stories for various states and configurations across components, including accessibility features and visual variations.
---
 docs/components/alert.md             | 30 +++++++++------
 docs/components/badge.md             |  5 +++
 docs/components/card.md              |  6 +++
 docs/components/dialog.md            | 51 ++++++++++++++-----------
 docs/components/drawer.md            | 52 ++++++++++++++-----------
 docs/components/radio.md             |  6 +++
 docs/components/switch.md            |  6 +++
 docs/components/table.md             | 12 ------
 docs/components/tabs.md              | 35 ++++++++++-------
 docs/components/toast.md             | 34 ++++++++++-------
 src/components/tooltip/BqTooltip.ts  |  2 +
 stories/accordion.stories.ts         | 26 ++++++++-----
 stories/breadcrumbs.stories.ts       | 49 ++++++++++++++++++++++--
 stories/checkbox.stories.ts          | 33 +++++++++++-----
 stories/chip.stories.ts              | 54 +++++++++++++++++++++-----
 stories/dialog.stories.ts            | 47 ++++++++++++++++++++---
 stories/drawer.stories.ts            | 26 ++++++++++---
 stories/input.stories.ts             | 57 ++++++++++++++++++++++------
 stories/segmented-control.stories.ts | 14 ++++++-
 stories/select.stories.ts            | 36 ++++++++++++++++++
 stories/slider.stories.ts            | 38 ++++++++++++++-----
 stories/switch.stories.ts            | 25 ++++++++----
 stories/tabs.stories.ts              | 38 +++++++++++++++++--
 stories/textarea.stories.ts          | 49 +++++++++++++++++-------
 stories/toast.stories.ts             | 40 ++++++++++++++-----
 25 files changed, 577 insertions(+), 194 deletions(-)

diff --git a/docs/components/alert.md b/docs/components/alert.md
index 8eef6f9..ba2dfd7 100644
--- a/docs/components/alert.md
+++ b/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.
diff --git a/docs/components/badge.md b/docs/components/badge.md
index a89b6fe..662a7c4 100644
--- a/docs/components/badge.md
+++ b/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.
diff --git a/docs/components/card.md b/docs/components/card.md
index 41e0462..dbdd36d 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -82,3 +82,9 @@ The `title` prop and `header` slot can be combined. When both are provided, the
 | `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.
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index e1203e0..6e5647d 100644
--- a/docs/components/dialog.md
+++ b/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.
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index 34001fe..42265e3 100644
--- a/docs/components/drawer.md
+++ b/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`.
diff --git a/docs/components/radio.md b/docs/components/radio.md
index c687576..f7048d7 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -70,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 via `aria-required`.
diff --git a/docs/components/switch.md b/docs/components/switch.md
index cd89864..1e7245c 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -57,3 +57,9 @@ The `bq-switch` component is a toggle switch form control.
 ## Form Participation
 
 The component creates a hidden input proxy for native `<form>` submission. The proxy submits `"on"` when checked and is empty when unchecked.
+
+## Accessibility
+
+- Uses a native `<input type="checkbox" role="switch">` for full keyboard and screen reader support.
+- The toggle state is conveyed via `aria-checked`.
+- The label is associated with the input via a wrapping `<label>` element.
diff --git a/docs/components/table.md b/docs/components/table.md
index 6117d42..acd8d4b 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -86,18 +86,6 @@ The `bq-table` component renders data tables with sortable columns, striped rows
 | `row`        | Body row             |
 | `td`         | Body cell            |
 
-## CSS Parts
-
-| Part         | Description           |
-| ------------ | --------------------- |
-| `table`      | The `<table>` element |
-| `thead`      | Table header section  |
-| `header-row` | The table header row  |
-| `th`         | A header cell         |
-| `tbody`      | Table body section    |
-| `row`        | A table row           |
-| `td`         | A table body cell     |
-
 ## Accessibility
 
 - The component preserves native `<table>` semantics for rows, headers, and cells.
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 21dd23d..f3383e2 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -70,28 +70,35 @@ Tabs added or removed at runtime are automatically detected:
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `active-tab` | `string` | `''` | ID of the currently active tab |
-| `variant` | `default \| pills \| underline` | `default` | Visual style of the tab list |
+| Property     | Type                            | Default   | Description                    |
+| ------------ | ------------------------------- | --------- | ------------------------------ |
+| `active-tab` | `string`                        | `''`      | ID of the currently active tab |
+| `variant`    | `default \| pills \| underline` | `default` | Visual style of the tab list   |
 
 ## Events
 
-| Event | Detail | Description |
-|-------|--------|-------------|
+| Event           | Detail              | Description                       |
+| --------------- | ------------------- | --------------------------------- |
 | `bq-tab-change` | `{ tabId: string }` | Fired when the active tab changes |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot        | Description                                                 |
+| ----------- | ----------------------------------------------------------- |
 | *(default)* | Tab items (`[data-tab-item]`) and tab panels (`[data-tab]`) |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
-| `tabs` | Main tabs container |
-| `tablist` | Tab list / navigation area |
-| `tab` | Individual tab button |
-| `panels` | Container for tab panel content |
+| Part      | Description                     |
+| --------- | ------------------------------- |
+| `tabs`    | Main tabs container             |
+| `tablist` | Tab list / navigation area      |
+| `tab`     | Individual tab button           |
+| `panels`  | Container for tab panel content |
+
+## Accessibility
+
+- Uses `role="tablist"`, `role="tab"`, and `role="tabpanel"` for correct ARIA semantics.
+- Arrow keys navigate between tabs; `Home` and `End` jump to the first and last tab.
+- Tab panels are linked to their tab buttons via `aria-labelledby` and `aria-controls`.
+- Disabled tabs are skipped during keyboard navigation.
diff --git a/docs/components/toast.md b/docs/components/toast.md
index 4232894..56a7035 100644
--- a/docs/components/toast.md
+++ b/docs/components/toast.md
@@ -60,28 +60,34 @@ showToast({ variant: 'info', message: 'Update available.' });
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `variant` | `success \| error \| warning \| info` | `info` | Visual style of the toast |
-| `message` | `string` | — | Text content of the toast |
-| `duration` | `number` | `4000` | Auto-dismiss delay in milliseconds |
-| `dismissible` | `boolean` | `true` | Shows a close button for manual dismissal |
+| Property      | Type                                  | Default | Description                               |
+| ------------- | ------------------------------------- | ------- | ----------------------------------------- |
+| `variant`     | `success \| error \| warning \| info` | `info`  | Visual style of the toast                 |
+| `message`     | `string`                              | —       | Text content of the toast                 |
+| `duration`    | `number`                              | `4000`  | Auto-dismiss delay in milliseconds        |
+| `dismissible` | `boolean`                             | `true`  | Shows a close button for manual dismissal |
 
 ## Events
 
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `bq-close` | — | Fired when the toast is dismissed (auto or manual) |
+| Event      | Detail | Description                                        |
+| ---------- | ------ | -------------------------------------------------- |
+| `bq-close` | —      | Fired when the toast is dismissed (auto or manual) |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot        | Description                                |
+| ----------- | ------------------------------------------ |
 | *(default)* | Optional custom content for the toast body |
 
 ## CSS Parts
 
-| Part | Description |
-|------|-------------|
-| `toast` | The toast container |
+| Part      | Description                 |
+| --------- | --------------------------- |
+| `toast`   | The toast container         |
 | `content` | The toast content container |
+
+## Accessibility
+
+- Toasts use `role="status"` and `aria-live="polite"` so screen readers announce them without interrupting the user.
+- Dismissible toasts provide a close button with a localized `aria-label`.
+- Auto-dismiss duration can be set to `0` for persistent toasts that require manual dismissal.
diff --git a/src/components/tooltip/BqTooltip.ts b/src/components/tooltip/BqTooltip.ts
index 3233f8f..feecea3 100644
--- a/src/components/tooltip/BqTooltip.ts
+++ b/src/components/tooltip/BqTooltip.ts
@@ -142,6 +142,8 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
       (this as unknown as { getState?<T>(key: string): T }).getState?.<string>(
         'uid'
       ) ?? this.id;
+    // Clear any pending show-delay timer to prevent setState on a disconnected element
+    (hide as () => void)?.();
     this.removeEventListener('mouseenter', show);
     this.removeEventListener('mouseleave', hide);
     this.removeEventListener('focusin', show);
diff --git a/stories/accordion.stories.ts b/stories/accordion.stories.ts
index 2d3eeab..0b78f1d 100644
--- a/stories/accordion.stories.ts
+++ b/stories/accordion.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Layout/Accordion',
@@ -10,21 +10,29 @@ const meta: Meta = {
     </bq-accordion>
   `,
   argTypes: {
-    label:    { control: 'text' },
-    open:     { control: 'boolean' },
+    label: { control: 'text' },
+    open: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    variant:  { control: 'select', options: ['default','bordered','flush'] },
-    content:  { control: 'text' },
+    variant: { control: 'select', options: ['default', 'bordered', 'flush'] },
+    content: { control: 'text' },
+  },
+  args: {
+    label: 'What is bQuery?',
+    open: false,
+    disabled: false,
+    variant: 'default',
+    content: 'bQuery is a modern, lightweight web component library.',
   },
-  args: { label: 'What is bQuery?', open: false, disabled: false, variant: 'default', content: 'bQuery is a modern, lightweight web component library.' },
 };
 export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {};
-export const Open:    Story = { args: { open: true } };
-export const Bordered:Story = { args: { variant: 'bordered' } };
-export const Multiple:Story = {
+export const Open: Story = { args: { open: true } };
+export const Bordered: Story = { args: { variant: 'bordered' } };
+export const Disabled: Story = { args: { disabled: true } };
+export const Flush: Story = { args: { variant: 'flush' } };
+export const Multiple: Story = {
   render: () => storyHtml`
     <div style="display:flex;flex-direction:column;gap:0.5rem">
       <bq-accordion variant="bordered" label="Section 1">Content for section 1.</bq-accordion>
diff --git a/stories/breadcrumbs.stories.ts b/stories/breadcrumbs.stories.ts
index 57b763a..2f4499b 100644
--- a/stories/breadcrumbs.stories.ts
+++ b/stories/breadcrumbs.stories.ts
@@ -1,19 +1,62 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Navigation/Breadcrumbs',
   tags: ['autodocs'],
-  render: () => storyHtml`
-    <bq-breadcrumbs>
+  render: (args) => storyHtml`
+    <bq-breadcrumbs separator=${args.separator}>
       <a href="#">Home</a>
       <a href="#">Products</a>
       <a href="#">Category</a>
       <a href="#">Item</a>
     </bq-breadcrumbs>
   `,
+  argTypes: {
+    separator: { control: 'text' },
+  },
+  args: { separator: '/' },
 };
 export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {};
+
+export const CustomSeparator: Story = {
+  args: { separator: '›' },
+};
+
+export const ChevronSeparator: Story = {
+  args: { separator: '»' },
+};
+
+export const SingleItem: Story = {
+  render: () => storyHtml`
+    <bq-breadcrumbs>
+      <a href="#">Home</a>
+    </bq-breadcrumbs>
+  `,
+};
+
+export const ManyItems: Story = {
+  render: () => storyHtml`
+    <bq-breadcrumbs>
+      <a href="#">Home</a>
+      <a href="#">Electronics</a>
+      <a href="#">Computers</a>
+      <a href="#">Laptops</a>
+      <a href="#">Gaming</a>
+      <a href="#">Under $1000</a>
+    </bq-breadcrumbs>
+  `,
+};
+
+export const WithCurrentPage: Story = {
+  render: () => storyHtml`
+    <bq-breadcrumbs separator="/">
+      <a href="#">Home</a>
+      <a href="#">Documentation</a>
+      <span>Getting Started</span>
+    </bq-breadcrumbs>
+  `,
+};
diff --git a/stories/checkbox.stories.ts b/stories/checkbox.stories.ts
index 69ac076..9fb5dba 100644
--- a/stories/checkbox.stories.ts
+++ b/stories/checkbox.stories.ts
@@ -1,23 +1,38 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Checkbox',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-checkbox label=${args.label} ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required} hint=${args.hint}></bq-checkbox>`,
+  render: (args) =>
+    storyHtml`<bq-checkbox label=${args.label} ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required} hint=${args.hint}></bq-checkbox>`,
   argTypes: {
-    label:    { control: 'text' },
-    checked:  { control: 'boolean' },
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
-    hint:     { control: 'text' },
+    hint: { control: 'text' },
+  },
+  args: {
+    label: 'Accept terms and conditions',
+    checked: false,
+    disabled: false,
+    required: false,
+    hint: '',
   },
-  args: { label: 'Accept terms and conditions', checked: false, disabled: false, required: false, hint: '' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const Checked:  Story = { args: { checked: true } };
+export const Default: Story = {};
+export const Checked: Story = { args: { checked: true } };
 export const Disabled: Story = { args: { disabled: true } };
-export const WithHint: Story = { args: { hint: 'You must accept to continue', required: true } };
+export const WithHint: Story = {
+  args: { hint: 'You must accept to continue', required: true },
+};
+
+export const Indeterminate: Story = {
+  render: () => storyHtml`
+    <bq-checkbox label="Select all" indeterminate></bq-checkbox>
+  `,
+};
diff --git a/stories/chip.stories.ts b/stories/chip.stories.ts
index fef5dbc..711c2ad 100644
--- a/stories/chip.stories.ts
+++ b/stories/chip.stories.ts
@@ -1,26 +1,62 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Components/Chip',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-chip variant=${args.variant} size=${args.size} ?removable=${args.removable} ?selected=${args.selected} ?disabled=${args.disabled}>${args.label}</bq-chip>`,
+  render: (args) =>
+    storyHtml`<bq-chip variant=${args.variant} size=${args.size} ?removable=${args.removable} ?selected=${args.selected} ?disabled=${args.disabled}>${args.label}</bq-chip>`,
   argTypes: {
-    variant:  { control: 'select', options: ['primary','secondary','success','danger','warning','info'] },
-    size:     { control: 'select', options: ['sm','md','lg'] },
-    removable:{ control: 'boolean' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'],
+    },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    removable: { control: 'boolean' },
     selected: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    label:    { control: 'text' },
+    label: { control: 'text' },
+  },
+  args: {
+    variant: 'primary',
+    size: 'md',
+    removable: false,
+    selected: false,
+    disabled: false,
+    label: 'React',
   },
-  args: { variant: 'primary', size: 'md', removable: false, selected: false, disabled: false, label: 'React' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const Removable:Story = { args: { removable: true } };
+export const Default: Story = {};
+export const Removable: Story = { args: { removable: true } };
 export const Selected: Story = { args: { selected: true } };
+export const Disabled: Story = { args: { disabled: true } };
+
+export const AllSizes: Story = {
+  render: () => storyHtml`
+    <div style="display:flex;gap:0.5rem;align-items:center">
+      <bq-chip variant="primary" size="sm">Small</bq-chip>
+      <bq-chip variant="primary" size="md">Medium</bq-chip>
+      <bq-chip variant="primary" size="lg">Large</bq-chip>
+    </div>
+  `,
+};
+
+export const AllVariants: Story = {
+  render: () => storyHtml`
+    <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
+      <bq-chip variant="primary">Primary</bq-chip>
+      <bq-chip variant="secondary">Secondary</bq-chip>
+      <bq-chip variant="success">Success</bq-chip>
+      <bq-chip variant="danger">Danger</bq-chip>
+      <bq-chip variant="warning">Warning</bq-chip>
+      <bq-chip variant="info">Info</bq-chip>
+    </div>
+  `,
+};
+
 export const Tags: Story = {
   render: () => storyHtml`
     <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
diff --git a/stories/dialog.stories.ts b/stories/dialog.stories.ts
index e361543..fb9e560 100644
--- a/stories/dialog.stories.ts
+++ b/stories/dialog.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Overlays/Dialog',
@@ -23,17 +23,52 @@ const meta: Meta = {
     </script>
   `,
   argTypes: {
-    title:      { control: 'text' },
-    size:       { control: 'select', options: ['sm','md','lg','xl'] },
-    dismissible:{ control: 'boolean' },
-    content:    { control: 'text' },
+    title: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
+    dismissible: { control: 'boolean' },
+    content: { control: 'text' },
+  },
+  args: {
+    title: 'Confirm action',
+    size: 'md',
+    dismissible: true,
+    content: 'Are you sure you want to proceed? This action cannot be undone.',
   },
-  args: { title: 'Confirm action', size: 'md', dismissible: true, content: 'Are you sure you want to proceed? This action cannot be undone.' },
 };
 export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {};
+
+export const SmallDialog: Story = {
+  render: () => storyHtml`
+    <bq-dialog open title="Quick confirm" size="sm" dismissible>
+      <p>Are you sure?</p>
+      <div slot="footer"><bq-button variant="primary">Yes</bq-button></div>
+    </bq-dialog>
+  `,
+};
+
+export const LargeDialog: Story = {
+  render: () => storyHtml`
+    <bq-dialog open title="Detailed view" size="lg" dismissible>
+      <p>This is a large dialog with more space for content, forms, or complex layouts.</p>
+      <div slot="footer">
+        <bq-button variant="ghost">Cancel</bq-button>
+        <bq-button variant="primary">Save</bq-button>
+      </div>
+    </bq-dialog>
+  `,
+};
+
+export const ExtraLargeDialog: Story = {
+  render: () => storyHtml`
+    <bq-dialog open title="Full content" size="xl" dismissible>
+      <p>Extra-large dialogs are suitable for dashboards, previews, and multi-step flows.</p>
+    </bq-dialog>
+  `,
+};
+
 export const OpenByDefault: Story = {
   render: () => storyHtml`
     <bq-dialog open title="Welcome" size="sm">
diff --git a/stories/drawer.stories.ts b/stories/drawer.stories.ts
index 9dfca88..0442e25 100644
--- a/stories/drawer.stories.ts
+++ b/stories/drawer.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Overlays/Drawer',
@@ -22,17 +22,31 @@ const meta: Meta = {
     </script>
   `,
   argTypes: {
-    title:     { control: 'text' },
-    placement: { control: 'select', options: ['right','left','top','bottom'] },
-    size:      { control: 'select', options: ['sm','md','lg','full'] },
+    title: { control: 'text' },
+    placement: {
+      control: 'select',
+      options: ['right', 'left', 'top', 'bottom'],
+    },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'full'] },
   },
   args: { title: 'Settings', placement: 'right', size: 'md' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const LeftSide: Story = { args: { placement: 'left', title: 'Navigation' } };
+export const Default: Story = {};
+export const LeftSide: Story = {
+  args: { placement: 'left', title: 'Navigation' },
+};
+export const BottomSheet: Story = {
+  args: { placement: 'bottom', title: 'Options', size: 'sm' },
+};
+export const TopPanel: Story = {
+  args: { placement: 'top', title: 'Search', size: 'sm' },
+};
+export const FullWidth: Story = {
+  args: { placement: 'right', title: 'Full Drawer', size: 'full' },
+};
 export const OpenByDefault: Story = {
   render: () => storyHtml`
     <bq-drawer open title="Notifications" placement="right" size="sm">
diff --git a/stories/input.stories.ts b/stories/input.stories.ts
index d45afff..73c404c 100644
--- a/stories/input.stories.ts
+++ b/stories/input.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 /**
  * Text input field with label, hint, error, and slot support.
@@ -15,25 +15,46 @@ const meta: Meta = {
     ></bq-input>
   `,
   argTypes: {
-    label:      { control: 'text' },
-    type:       { control: 'select', options: ['text','email','password','number','tel','url','search'] },
-    placeholder:{ control: 'text' },
-    size:       { control: 'select', options: ['sm','md','lg'] },
-    disabled:   { control: 'boolean' },
-    required:   { control: 'boolean' },
-    error:      { control: 'text' },
-    hint:       { control: 'text' },
+    label: { control: 'text' },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],
+    },
+    placeholder: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    error: { control: 'text' },
+    hint: { control: 'text' },
+  },
+  args: {
+    label: 'Email address',
+    type: 'email',
+    placeholder: 'you@example.com',
+    size: 'md',
+    disabled: false,
+    required: false,
+    error: '',
+    hint: "We'll never share your email.",
   },
-  args: { label: 'Email address', type: 'email', placeholder: 'you@example.com', size: 'md', disabled: false, required: false, error: '', hint: "We'll never share your email." },
 };
 export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {};
-export const WithError: Story = { args: { error: 'Invalid email address', hint: '' } };
+export const WithError: Story = {
+  args: { error: 'Invalid email address', hint: '' },
+};
 export const Disabled: Story = { args: { disabled: true } };
 export const Required: Story = { args: { required: true } };
-export const Password: Story = { args: { label: 'Password', type: 'password', placeholder: 'Enter password', hint: '' } };
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password',
+    hint: '',
+  },
+};
 export const AllSizes: Story = {
   render: () => storyHtml`
     <div style="display:flex;flex-direction:column;gap:1rem;max-width:28rem">
@@ -43,3 +64,15 @@ export const AllSizes: Story = {
     </div>
   `,
 };
+
+export const CharacterCounter: Story = {
+  render: () => storyHtml`
+    <bq-input label="Username" placeholder="Choose a username" maxlength="20" show-counter hint="Max 20 characters"></bq-input>
+  `,
+};
+
+export const Readonly: Story = {
+  render: () => storyHtml`
+    <bq-input label="API Key" value="sk-1234-abcd-5678" readonly></bq-input>
+  `,
+};
diff --git a/stories/segmented-control.stories.ts b/stories/segmented-control.stories.ts
index 3e8c88a..32ec090 100644
--- a/stories/segmented-control.stories.ts
+++ b/stories/segmented-control.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Segmented Control',
@@ -36,3 +36,15 @@ type Story = StoryObj;
 export const Default: Story = {};
 export const Large: Story = { args: { size: 'lg' } };
 export const FullWidth: Story = { args: { fullWidth: true } };
+
+export const WithDisabledOption: Story = {
+  render: () => storyHtml`
+    <bq-segmented-control label="Status" name="status" value="active" size="md">
+      <button value="active">Active</button>
+      <button value="pending" disabled>Pending</button>
+      <button value="archived">Archived</button>
+    </bq-segmented-control>
+  `,
+};
+
+export const Small: Story = { args: { size: 'sm' } };
diff --git a/stories/select.stories.ts b/stories/select.stories.ts
index 25436f6..897df7f 100644
--- a/stories/select.stories.ts
+++ b/stories/select.stories.ts
@@ -43,3 +43,39 @@ export const Default: Story = {};
 export const WithError: Story = { args: { error: 'Please select an option' } };
 export const Disabled: Story = { args: { disabled: true } };
 export const Selected: Story = { args: { value: 'vue' } };
+
+export const AllSizes: Story = {
+  render: () => storyHtml`
+    <div style="display:flex;flex-direction:column;gap:1rem;max-width:28rem">
+      <bq-select label="Small" size="sm" placeholder="Choose…">
+        <option value="a">Option A</option>
+        <option value="b">Option B</option>
+      </bq-select>
+      <bq-select label="Medium" size="md" placeholder="Choose…">
+        <option value="a">Option A</option>
+        <option value="b">Option B</option>
+      </bq-select>
+      <bq-select label="Large" size="lg" placeholder="Choose…">
+        <option value="a">Option A</option>
+        <option value="b">Option B</option>
+      </bq-select>
+    </div>
+  `,
+};
+
+export const WithOptGroup: Story = {
+  render: () => storyHtml`
+    <bq-select label="Programming Language" placeholder="Select a language" hint="Group by paradigm">
+      <optgroup label="Object-oriented">
+        <option value="java">Java</option>
+        <option value="csharp">C#</option>
+      </optgroup>
+      <optgroup label="Functional">
+        <option value="haskell">Haskell</option>
+        <option value="elixir">Elixir</option>
+      </optgroup>
+    </bq-select>
+  `,
+};
+
+export const Required: Story = { args: { required: true } };
diff --git a/stories/slider.stories.ts b/stories/slider.stories.ts
index 35eaac1..b318f05 100644
--- a/stories/slider.stories.ts
+++ b/stories/slider.stories.ts
@@ -1,22 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Slider',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-slider label=${args.label} value=${args.value} min=${args.min} max=${args.max} step=${args.step} ?disabled=${args.disabled} show-value="true"></bq-slider>`,
+  render: (args) =>
+    storyHtml`<bq-slider label=${args.label} value=${args.value} min=${args.min} max=${args.max} step=${args.step} ?disabled=${args.disabled} show-value="true"></bq-slider>`,
   argTypes: {
-    label:    { control: 'text' },
-    value:    { control: 'number' },
-    min:      { control: 'number' },
-    max:      { control: 'number' },
-    step:     { control: 'number' },
+    label: { control: 'text' },
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
     disabled: { control: 'boolean' },
   },
-  args: { label: 'Volume', value: 60, min: 0, max: 100, step: 1, disabled: false },
+  args: {
+    label: 'Volume',
+    value: 60,
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+  },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
+export const Default: Story = {};
 export const Disabled: Story = { args: { disabled: true } };
+
+export const CustomRange: Story = {
+  render: () => storyHtml`
+    <bq-slider label="Temperature" value="22" min="16" max="30" step="0.5" show-value></bq-slider>
+  `,
+};
+
+export const WithoutLabel: Story = {
+  render: () => storyHtml`
+    <bq-slider value="50" min="0" max="100" show-value></bq-slider>
+  `,
+};
diff --git a/stories/switch.stories.ts b/stories/switch.stories.ts
index ae5e3db..a767129 100644
--- a/stories/switch.stories.ts
+++ b/stories/switch.stories.ts
@@ -1,21 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Switch',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-switch label=${args.label} ?checked=${args.checked} ?disabled=${args.disabled} size=${args.size}></bq-switch>`,
+  render: (args) =>
+    storyHtml`<bq-switch label=${args.label} ?checked=${args.checked} ?disabled=${args.disabled} size=${args.size}></bq-switch>`,
   argTypes: {
-    label:    { control: 'text' },
-    checked:  { control: 'boolean' },
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    size:     { control: 'select', options: ['sm','md','lg'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
   },
   args: { label: 'Dark mode', checked: false, disabled: false, size: 'md' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:  Story = {};
-export const On:       Story = { args: { checked: true } };
+export const Default: Story = {};
+export const On: Story = { args: { checked: true } };
 export const Disabled: Story = { args: { disabled: true } };
+
+export const AllSizes: Story = {
+  render: () => storyHtml`
+    <div style="display:flex;flex-direction:column;gap:1rem">
+      <bq-switch label="Small" size="sm"></bq-switch>
+      <bq-switch label="Medium" size="md"></bq-switch>
+      <bq-switch label="Large" size="lg"></bq-switch>
+    </div>
+  `,
+};
diff --git a/stories/tabs.stories.ts b/stories/tabs.stories.ts
index cec8ff2..6f1c3e4 100644
--- a/stories/tabs.stories.ts
+++ b/stories/tabs.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Navigation/Tabs',
@@ -15,13 +15,43 @@ const meta: Meta = {
     </bq-tabs>
   `,
   argTypes: {
-    variant: { control: 'select', options: ['default','pills','underline'] },
+    variant: { control: 'select', options: ['default', 'pills', 'underline'] },
   },
   args: { variant: 'default' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:   Story = {};
-export const Pills:     Story = { args: { variant: 'pills' } };
+export const Default: Story = {};
+export const Pills: Story = { args: { variant: 'pills' } };
 export const Underline: Story = { args: { variant: 'underline' } };
+
+export const DisabledTab: Story = {
+  render: () => storyHtml`
+    <bq-tabs active-tab="tab1" variant="default">
+      <span id="tab1" data-tab-item label="Overview"></span>
+      <span id="tab2" data-tab-item label="Features" disabled></span>
+      <span id="tab3" data-tab-item label="Pricing"></span>
+      <div data-tab="tab1"><p>Overview content</p></div>
+      <div data-tab="tab2"><p>Features content (disabled)</p></div>
+      <div data-tab="tab3"><p>Pricing content</p></div>
+    </bq-tabs>
+  `,
+};
+
+export const ManyTabs: Story = {
+  render: () => storyHtml`
+    <bq-tabs active-tab="t1" variant="default">
+      <span id="t1" data-tab-item label="Tab 1"></span>
+      <span id="t2" data-tab-item label="Tab 2"></span>
+      <span id="t3" data-tab-item label="Tab 3"></span>
+      <span id="t4" data-tab-item label="Tab 4"></span>
+      <span id="t5" data-tab-item label="Tab 5"></span>
+      <div data-tab="t1"><p>Content 1</p></div>
+      <div data-tab="t2"><p>Content 2</p></div>
+      <div data-tab="t3"><p>Content 3</p></div>
+      <div data-tab="t4"><p>Content 4</p></div>
+      <div data-tab="t5"><p>Content 5</p></div>
+    </bq-tabs>
+  `,
+};
diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts
index 92adfee..92d5109 100644
--- a/stories/textarea.stories.ts
+++ b/stories/textarea.stories.ts
@@ -1,24 +1,47 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Forms/Textarea',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-textarea label=${args.label} placeholder=${args.placeholder} rows=${args.rows} ?disabled=${args.disabled} ?required=${args.required} error=${args.error} hint=${args.hint}></bq-textarea>`,
+  render: (args) =>
+    storyHtml`<bq-textarea label=${args.label} placeholder=${args.placeholder} rows=${args.rows} ?disabled=${args.disabled} ?required=${args.required} error=${args.error} hint=${args.hint}></bq-textarea>`,
   argTypes: {
-    label:      { control: 'text' },
-    placeholder:{ control: 'text' },
-    rows:       { control: 'number' },
-    disabled:   { control: 'boolean' },
-    required:   { control: 'boolean' },
-    error:      { control: 'text' },
-    hint:       { control: 'text' },
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    rows: { control: 'number' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    error: { control: 'text' },
+    hint: { control: 'text' },
+  },
+  args: {
+    label: 'Message',
+    placeholder: 'Write your message…',
+    rows: 4,
+    disabled: false,
+    required: false,
+    error: '',
+    hint: 'Max 500 characters',
   },
-  args: { label: 'Message', placeholder: 'Write your message…', rows: 4, disabled: false, required: false, error: '', hint: 'Max 500 characters' },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Default:   Story = {};
-export const WithError: Story = { args: { error: 'Message is required', hint: '' } };
-export const Disabled:  Story = { args: { disabled: true } };
+export const Default: Story = {};
+export const WithError: Story = {
+  args: { error: 'Message is required', hint: '' },
+};
+export const Disabled: Story = { args: { disabled: true } };
+
+export const CharacterCounter: Story = {
+  render: () => storyHtml`
+    <bq-textarea label="Bio" placeholder="Tell us about yourself…" maxlength="200" show-counter hint="Max 200 characters"></bq-textarea>
+  `,
+};
+
+export const Readonly: Story = {
+  render: () => storyHtml`
+    <bq-textarea label="Terms" value="These are the terms of service. They cannot be edited." readonly rows="3"></bq-textarea>
+  `,
+};
diff --git a/stories/toast.stories.ts b/stories/toast.stories.ts
index 70d25eb..791f831 100644
--- a/stories/toast.stories.ts
+++ b/stories/toast.stories.ts
@@ -1,24 +1,38 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Feedback/Toast',
   tags: ['autodocs'],
-  render: (args) => storyHtml`<bq-toast variant=${args.variant} message=${args.message} duration="0" ?dismissible=${args.dismissible}></bq-toast>`,
+  render: (args) =>
+    storyHtml`<bq-toast variant=${args.variant} message=${args.message} duration="0" ?dismissible=${args.dismissible}></bq-toast>`,
   argTypes: {
-    variant:    { control: 'select', options: ['info','success','error','warning'] },
-    message:    { control: 'text' },
-    dismissible:{ control: 'boolean' },
+    variant: {
+      control: 'select',
+      options: ['info', 'success', 'error', 'warning'],
+    },
+    message: { control: 'text' },
+    dismissible: { control: 'boolean' },
+  },
+  args: {
+    variant: 'info',
+    message: 'This is a notification',
+    dismissible: true,
   },
-  args: { variant: 'info', message: 'This is a notification', dismissible: true },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Info:    Story = {};
-export const Success: Story = { args: { variant: 'success', message: 'Changes saved successfully!' } };
-export const Error:   Story = { args: { variant: 'error',   message: 'Failed to save changes.' } };
-export const Warning: Story = { args: { variant: 'warning', message: 'Disk space is running low.' } };
+export const Info: Story = {};
+export const Success: Story = {
+  args: { variant: 'success', message: 'Changes saved successfully!' },
+};
+export const Error: Story = {
+  args: { variant: 'error', message: 'Failed to save changes.' },
+};
+export const Warning: Story = {
+  args: { variant: 'warning', message: 'Disk space is running low.' },
+};
 export const AllVariants: Story = {
   render: () => storyHtml`
     <div style="display:flex;flex-direction:column;gap:0.75rem">
@@ -29,3 +43,9 @@ export const AllVariants: Story = {
     </div>
   `,
 };
+
+export const NonDismissible: Story = {
+  render: () => storyHtml`
+    <bq-toast variant="info" message="This notification cannot be dismissed." duration="0" dismissible="false"></bq-toast>
+  `,
+};

From 55f0db4b8132790f2dad94b9aacf527c34db6f8e Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:23:01 +0100
Subject: [PATCH 04/17] feat: enhance accessibility and improve UI components

- BqSpinner: Adjusted styles for better visual consistency and accessibility.
- BqTable: Added sort labels for better screen reader support.
- BqTabs: Improved panel ID generation and aria attributes for better accessibility.
- i18n: Added default label for segmented control in English locale.
- Dialog stories: Refactored to use a reusable render function for better maintainability.
- Drawer stories: Implemented a reusable render function for drawer component stories.
- Dropdown Menu: Introduced new stories for dropdown menus with links and disabled states.
- Toast: Updated non-dismissible toast to use boolean attribute syntax.
- Tooltip: Fixed button element in tooltip story for better semantics.
- Tests: Added tests for avatar rendering with CJK names and multi-word non-Latin names.
- Tests: Improved dropdown menu tests for better readability and reliability.
- Tests: Enhanced segmented control tests to verify localized default labels.
- Tests: Added tests for tab buttons linking to generated panels and managing focus.
---
 docs/components/segmented-control.md          |  55 +++---
 docs/components/tabs.md                       |   3 +-
 package.json                                  |   2 +-
 src/components/accordion/BqAccordion.ts       | 156 ++++++------------
 src/components/avatar/BqAvatar.ts             |  78 +++++++--
 src/components/checkbox/BqCheckbox.ts         |   2 +-
 src/components/chip/BqChip.ts                 |   8 +
 src/components/dialog/BqDialog.ts             |  27 ++-
 src/components/drawer/BqDrawer.ts             |  33 +++-
 .../dropdown-menu/BqDropdownMenu.ts           |  89 ++++++----
 src/components/pagination/BqPagination.ts     |  10 +-
 src/components/progress/BqProgress.ts         |   4 +
 src/components/radio/BqRadio.ts               |   2 +-
 .../segmented-control/BqSegmentedControl.ts   |   4 +-
 src/components/slider/BqSlider.ts             |  10 +-
 src/components/spinner/BqSpinner.ts           |  35 ++--
 src/components/table/BqTable.ts               |   9 +-
 src/components/tabs/BqTabs.ts                 |  21 ++-
 src/i18n/en.ts                                |   3 +
 stories/dialog.stories.ts                     | 140 +++++++++++-----
 stories/drawer.stories.ts                     |  76 ++++++---
 stories/dropdown-menu.stories.ts              |  96 +++++++++++
 stories/toast.stories.ts                      |   2 +-
 stories/tooltip.stories.ts                    |  19 ++-
 tests/accordion-enhancements.test.ts          | 110 ++++++------
 tests/avatar.test.ts                          |  16 ++
 tests/dropdown-menu.test.ts                   |  91 +++++++---
 tests/segmented-control.test.ts               |  32 +++-
 tests/tabs-tooltip.test.ts                    |  26 +++
 29 files changed, 787 insertions(+), 372 deletions(-)
 create mode 100644 stories/dropdown-menu.stories.ts

diff --git a/docs/components/segmented-control.md b/docs/components/segmented-control.md
index efa9ad8..4a68a7a 100644
--- a/docs/components/segmented-control.md
+++ b/docs/components/segmented-control.md
@@ -73,52 +73,53 @@ The host can disable the entire control, and individual segment buttons can also
 
 ## Properties
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `label` | `string` | `''` | Visible group label. Also used to label the radiogroup. |
-| `hint` | `string` | `''` | Supporting copy rendered below the control and linked with `aria-describedby`. |
-| `name` | `string` | `''` | Form field name used for the hidden proxy input. |
-| `value` | `string` | `''` | Selected segment value. Falls back to the first enabled segment when omitted. |
-| `size` | `sm \| md \| lg` | `md` | Controls the segment button sizing. |
-| `full-width` | `boolean` | `false` | Expands the control and evenly distributes each segment. |
-| `disabled` | `boolean` | `false` | Disables the entire control. |
-| `aria-label` | `string` | `''` | Accessible label when you do not render a visible `label`. |
+| Property     | Type             | Default | Description                                                                    |
+| ------------ | ---------------- | ------- | ------------------------------------------------------------------------------ |
+| `label`      | `string`         | `''`    | Visible group label. Also used to label the radiogroup.                        |
+| `hint`       | `string`         | `''`    | Supporting copy rendered below the control and linked with `aria-describedby`. |
+| `name`       | `string`         | `''`    | Form field name used for the hidden proxy input.                               |
+| `value`      | `string`         | `''`    | Selected segment value. Falls back to the first enabled segment when omitted.  |
+| `size`       | `sm \| md \| lg` | `md`    | Controls the segment button sizing.                                            |
+| `full-width` | `boolean`        | `false` | Expands the control and evenly distributes each segment.                       |
+| `disabled`   | `boolean`        | `false` | Disables the entire control.                                                   |
+| `aria-label` | `string`         | `''`    | Accessible label when you do not render a visible `label`.                     |
 
 ## Events
 
-| Event | Detail | Description |
-| --- | --- | --- |
+| Event       | Detail              | Description                              |
+| ----------- | ------------------- | ---------------------------------------- |
 | `bq-change` | `{ value: string }` | Fired when the selected segment changes. |
 
 ## Slots
 
-| Slot | Description |
-| --- | --- |
+| Slot        | Description                                                                                                               |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
 | *(default)* | Segment buttons. Use native `<button value="...">...</button>` elements for the best accessibility and keyboard behavior. |
 
 ## CSS Parts
 
-| Part | Description |
-| --- | --- |
-| `field` | Wrapper around label, control, and hint |
-| `label` | Visible group label |
-| `control` | Segmented control track |
-| `hint` | Supporting text |
+| Part      | Description                             |
+| --------- | --------------------------------------- |
+| `field`   | Wrapper around label, control, and hint |
+| `label`   | Visible group label                     |
+| `control` | Segmented control track                 |
+| `hint`    | Supporting text                         |
 
 ## Keyboard Interactions
 
-| Key | Action |
-| --- | --- |
-| `ArrowRight` / `ArrowDown` | Moves to the next enabled segment and selects it |
-| `ArrowLeft` / `ArrowUp` | Moves to the previous enabled segment and selects it |
-| `Home` | Selects the first enabled segment |
-| `End` | Selects the last enabled segment |
-| `Enter` / `Space` | Selects the focused segment |
+| Key                        | Action                                               |
+| -------------------------- | ---------------------------------------------------- |
+| `ArrowRight` / `ArrowDown` | Moves to the next enabled segment and selects it     |
+| `ArrowLeft` / `ArrowUp`    | Moves to the previous enabled segment and selects it |
+| `Home`                     | Selects the first enabled segment                    |
+| `End`                      | Selects the last enabled segment                     |
+| `Enter` / `Space`          | Selects the focused segment                          |
 
 ## Accessibility Notes
 
 - The control uses `role="radiogroup"` and each slotted button receives `role="radio"` with `aria-checked`.
 - A visible `label` is preferred. If the UI should stay label-free, pass a localizable `aria-label`.
+- When neither `label` nor `aria-label` is provided, the radiogroup falls back to a localized generic label so it never becomes unnamed.
 - The selected segment keeps `tabindex="0"` while inactive or disabled items move to `tabindex="-1"` to support roving focus.
 - Arrow-key behavior follows the WAI-ARIA radio-group pattern and respects RTL layouts for horizontal navigation.
 
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index f3383e2..156961d 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -100,5 +100,6 @@ Tabs added or removed at runtime are automatically detected:
 
 - Uses `role="tablist"`, `role="tab"`, and `role="tabpanel"` for correct ARIA semantics.
 - Arrow keys navigate between tabs; `Home` and `End` jump to the first and last tab.
-- Tab panels are linked to their tab buttons via `aria-labelledby` and `aria-controls`.
+- Tab panels are linked to their tab buttons via `aria-labelledby` and generated `id` / `aria-controls` pairs.
+- Only the active panel remains in the tab order; inactive panels move to `tabindex="-1"` and are hidden from assistive tech.
 - Disabled tabs are skipped during keyboard navigation.
diff --git a/package.json b/package.json
index 4d536f2..05f295e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bquery/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Production-grade web component library for the bQuery project",
   "type": "module",
   "main": "./dist/index.cjs",
diff --git a/src/components/accordion/BqAccordion.ts b/src/components/accordion/BqAccordion.ts
index 413e1b0..1b0c0ce 100644
--- a/src/components/accordion/BqAccordion.ts
+++ b/src/components/accordion/BqAccordion.ts
@@ -51,11 +51,15 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
     .trigger[disabled] { opacity: 0.5; cursor: not-allowed; }
     .trigger:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }
     .icon { flex-shrink: 0; font-size: 1rem; color: var(--bq-text-muted,#475569); transition: transform var(--bq-duration-fast) var(--bq-easing-standard); }
-    :host([open]) .icon { transform: rotate(180deg); }
-    .panel { overflow: hidden; height: 0; transition: height var(--bq-duration-slow,300ms) var(--bq-easing-standard); }
-    .panel-inner { padding: 0 var(--bq-space-4,1rem) var(--bq-space-4,1rem); color: var(--bq-text-muted,#475569); font-size: var(--bq-font-size-sm,0.875rem); line-height: var(--bq-line-height-relaxed,1.625); }
+    :host([open]:not([data-closing])) .icon { transform: rotate(180deg); }
+    .panel { display: grid; grid-template-rows: 0fr; overflow: hidden; }
+    .panel-inner { overflow: hidden; min-height: 0; padding: 0 var(--bq-space-4,1rem) var(--bq-space-4,1rem); color: var(--bq-text-muted,#475569); font-size: var(--bq-font-size-sm,0.875rem); line-height: var(--bq-line-height-relaxed,1.625); }
+    :host([open]:not([data-closing])) .panel { grid-template-rows: 1fr; animation: panel-open var(--bq-duration-slow,300ms) var(--bq-easing-standard); }
+    :host([data-closing]) .panel { grid-template-rows: 1fr; animation: panel-close var(--bq-duration-slow,300ms) var(--bq-easing-standard) forwards; }
+    @keyframes panel-open { from { grid-template-rows: 0fr; } }
+    @keyframes panel-close { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
     @media (prefers-reduced-motion: reduce) {
-      .panel { transition: none; }
+      .panel { animation: none !important; }
       .icon { transition: none; }
       .trigger { transition: none; }
     }
@@ -66,77 +70,54 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
-    if (!self.getState<string>('uid'))
-      self.setState('uid', uniqueId('bq-acc'));
+    if (!self.getState<string>('uid')) self.setState('uid', uniqueId('bq-acc'));
 
-    const syncPanelHeight = () => {
-      const panel = self.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-      if (!panel) return;
-      const inner = panel.querySelector('.panel-inner') as HTMLElement | null;
-      const hasActiveHeightTransition = () => {
-        const styles = panel.ownerDocument?.defaultView?.getComputedStyle(panel);
-        if (!styles) return false;
-        const properties = styles.transitionProperty
-          .split(',')
-          .map((value) => value.trim());
-        const durations = styles.transitionDuration
-          .split(',')
-          .map((value) => value.trim());
-        const transitionsHeight = properties.some(
-          (value) => value === 'all' || value === 'height'
-        );
-        const hasDuration = durations.some((value) => parseFloat(value) > 0);
-        return transitionsHeight && hasDuration;
-      };
-      if (self.hasAttribute('open')) {
-        if (inner) {
-          panel.style.height = `${inner.scrollHeight}px`;
-          if (!hasActiveHeightTransition()) {
-            panel.style.height = 'auto';
-          }
-        }
-      } else {
-        if (panel.style.height === 'auto' && inner) {
-          panel.style.height = `${inner.scrollHeight}px`;
-          void panel.offsetHeight;
-        }
-        panel.style.height = '0px';
-      }
-    };
-
-    const onPanelTransitionEnd = (e: Event) => {
-      const te = e as TransitionEvent;
-      if (te.propertyName !== 'height') return;
-      const panel = self.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-      if (!panel || te.target !== panel) return;
-      if (self.hasAttribute('open')) {
-        panel.style.height = 'auto';
-      }
-    };
-
-    const slotChangeHandler = () => {
-      const panel = self.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-      if (self.hasAttribute('open') && panel && panel.style.height !== 'auto') {
-        syncPanelHeight();
-      }
-    };
+    const ANIM_DURATION = 300;
 
     const handler = (e: Event) => {
       if ((e.target as Element).closest('.trigger')) {
-        if (self.hasAttribute('disabled')) return;
-        const newOpen = !self.hasAttribute('open');
-        if (newOpen) self.setAttribute('open', '');
-        else self.removeAttribute('open');
-
-        syncPanelHeight();
-
-        self.dispatchEvent(
-          new CustomEvent('bq-toggle', {
-            detail: { open: newOpen },
-            bubbles: true,
-            composed: true,
-          })
-        );
+        if (self.hasAttribute('disabled') || self.hasAttribute('data-closing'))
+          return;
+        const isOpen = self.hasAttribute('open');
+        if (isOpen) {
+          // Close with animation via data-closing (no re-render, CSS animation on existing DOM)
+          const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
+            '(prefers-reduced-motion: reduce)'
+          )?.matches;
+          if (reducedMotion) {
+            self.removeAttribute('open');
+            self.dispatchEvent(
+              new CustomEvent('bq-toggle', {
+                detail: { open: false },
+                bubbles: true,
+                composed: true,
+              })
+            );
+          } else {
+            self.setAttribute('data-closing', '');
+            setTimeout(() => {
+              self.removeAttribute('data-closing');
+              self.removeAttribute('open');
+              self.dispatchEvent(
+                new CustomEvent('bq-toggle', {
+                  detail: { open: false },
+                  bubbles: true,
+                  composed: true,
+                })
+              );
+            }, ANIM_DURATION);
+          }
+        } else {
+          // Open — setting open triggers re-render, CSS animation plays on new DOM
+          self.setAttribute('open', '');
+          self.dispatchEvent(
+            new CustomEvent('bq-toggle', {
+              detail: { open: true },
+              bubbles: true,
+              composed: true,
+            })
+          );
+        }
       }
     };
 
@@ -154,48 +135,15 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
     const s = self as unknown as Record<string, unknown>;
     s['_handler'] = handler;
     s['_kh'] = kh;
-    s['_syncHeight'] = syncPanelHeight;
-    s['_onPanelTransitionEnd'] = onPanelTransitionEnd;
-    s['_slotChangeHandler'] = slotChangeHandler;
     self.shadowRoot?.addEventListener('click', handler);
     self.shadowRoot?.addEventListener('keydown', kh);
-    self.shadowRoot?.addEventListener('transitionend', onPanelTransitionEnd);
-    self.shadowRoot
-      ?.querySelector('slot')
-      ?.addEventListener('slotchange', slotChangeHandler);
-
-    // Sync panel height on initial render
-    requestAnimationFrame(syncPanelHeight);
   },
   disconnected() {
     const self = this as unknown as Record<string, unknown>;
     const h = self['_handler'] as EventListener | undefined;
     const kh = self['_kh'] as EventListener | undefined;
-    const onPanelTransitionEnd = self['_onPanelTransitionEnd'] as
-      | EventListener
-      | undefined;
-    const slotChangeHandler = self['_slotChangeHandler'] as
-      | EventListener
-      | undefined;
     if (h) this.shadowRoot?.removeEventListener('click', h);
     if (kh) this.shadowRoot?.removeEventListener('keydown', kh);
-    if (onPanelTransitionEnd)
-      this.shadowRoot?.removeEventListener('transitionend', onPanelTransitionEnd);
-    if (slotChangeHandler)
-      this.shadowRoot
-        ?.querySelector('slot')
-        ?.removeEventListener('slotchange', slotChangeHandler);
-  },
-  updated() {
-    // Only recalculate height when the open attribute changes
-    const s = this as unknown as Record<string, unknown>;
-    const wasOpen = s['_wasOpen'] as boolean | undefined;
-    const isOpen = this.hasAttribute('open');
-    if (wasOpen !== isOpen) {
-      s['_wasOpen'] = isOpen;
-      const syncHeight = s['_syncHeight'] as (() => void) | undefined;
-      if (syncHeight) syncHeight();
-    }
   },
   render({ props, state }) {
     const uid = state.uid || 'bq-acc';
diff --git a/src/components/avatar/BqAvatar.ts b/src/components/avatar/BqAvatar.ts
index 018faf4..151e899 100644
--- a/src/components/avatar/BqAvatar.ts
+++ b/src/components/avatar/BqAvatar.ts
@@ -8,26 +8,73 @@
  * @prop {string} status - online | away | busy | offline | ""
  * @slot - Custom content
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { getBaseStyles } from '../../utils/styles.js';
 
-type BqAvatarProps = { src: string; alt: string; size: string; shape: string; status: string };
+type BqAvatarProps = {
+  src: string;
+  alt: string;
+  size: string;
+  shape: string;
+  status: string;
+};
+
+type GraphemeSegment = { segment: string };
+type GraphemeSegmenter = {
+  segment(input: string): Iterable<GraphemeSegment>;
+};
+
+function getGraphemes(value: string): string[] {
+  if (!value) return [];
+
+  const intlWithSegmenter = Intl as typeof Intl & {
+    Segmenter?: new (
+      locales?: string | string[],
+      options?: { granularity: 'grapheme' }
+    ) => GraphemeSegmenter;
+  };
+
+  if (intlWithSegmenter.Segmenter) {
+    const segmenter = new intlWithSegmenter.Segmenter(undefined, {
+      granularity: 'grapheme',
+    });
+    return Array.from(segmenter.segment(value), (part) => part.segment);
+  }
+
+  return Array.from(value);
+}
 
 function getInitials(alt: string): string {
-  const words = alt.trim().split(/\s+/);
+  const words = alt.trim().split(/\s+/).filter(Boolean);
   if (!words.length || !words[0]) return '?';
-  if (words.length === 1) return (words[0]?.[0] ?? '').toUpperCase();
-  return ((words[0]?.[0] ?? '') + (words[words.length - 1]?.[0] ?? '')).toUpperCase();
+
+  if (words.length === 1) {
+    const word = words[0];
+    const graphemes = getGraphemes(word);
+    if (!graphemes.length) return '?';
+
+    const isLatinLike = /[\p{Script=Latin}\p{Number}]/u.test(word);
+    const initials = isLatinLike
+      ? (graphemes[0] ?? '')
+      : graphemes.slice(0, 2).join('');
+    return initials ? initials.toLocaleUpperCase() : '?';
+  }
+
+  const firstWord = words[0] ?? '';
+  const lastWord = words[words.length - 1] ?? firstWord;
+  const first = getGraphemes(firstWord)[0] ?? '';
+  const last = getGraphemes(lastWord)[0] ?? '';
+  return `${first}${last}`.toLocaleUpperCase();
 }
 
 const definition: ComponentDefinition<BqAvatarProps> = {
   props: {
-    src:    { type: String, default: '' },
-    alt:    { type: String, default: '' },
-    size:   { type: String, default: 'md' },
-    shape:  { type: String, default: 'circle' },
+    src: { type: String, default: '' },
+    alt: { type: String, default: '' },
+    size: { type: String, default: 'md' },
+    shape: { type: String, default: 'circle' },
     status: { type: String, default: '' },
   },
   styles: `
@@ -66,10 +113,19 @@ const definition: ComponentDefinition<BqAvatarProps> = {
       ? `<img src="${escapeHtml(props.src)}" alt="${escapeHtml(props.alt)}" />`
       : `<slot>${escapeHtml(getInitials(props.alt))}</slot>`;
     const statusEl = props.status
-      ? `<span part="status" class="status" data-status="${escapeHtml(props.status)}" title="${escapeHtml(props.status)}" aria-label="${escapeHtml(props.status)}"></span>`
+      ? `<span part="status" class="status" data-status="${escapeHtml(props.status)}" role="img" aria-label="${escapeHtml(props.status)}"></span>`
       : '';
     return html`
-      <div part="avatar" class="avatar" data-size="${escapeHtml(props.size)}" data-shape="${escapeHtml(props.shape)}" role="img" aria-label="${escapeHtml(props.alt)}">${content}</div>
+      <div
+        part="avatar"
+        class="avatar"
+        data-size="${escapeHtml(props.size)}"
+        data-shape="${escapeHtml(props.shape)}"
+        role="img"
+        aria-label="${escapeHtml(props.alt)}"
+      >
+        ${content}
+      </div>
       ${statusEl}
     `;
   },
diff --git a/src/components/checkbox/BqCheckbox.ts b/src/components/checkbox/BqCheckbox.ts
index cca0fb8..d4e80b9 100644
--- a/src/components/checkbox/BqCheckbox.ts
+++ b/src/components/checkbox/BqCheckbox.ts
@@ -56,7 +56,7 @@ const definition: ComponentDefinition<BqCheckboxProps> = {
     }
     input[type="checkbox"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }
     .label-text { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-base,#0f172a); font-family: var(--bq-font-family-sans); line-height: 1.5; }
-    .hint { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); font-family: var(--bq-font-family-sans); padding-left: 1.75rem; }
+    .hint { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); font-family: var(--bq-font-family-sans); padding-inline-start: 1.75rem; }
   `,
   connected() {
     const self = this;
diff --git a/src/components/chip/BqChip.ts b/src/components/chip/BqChip.ts
index cb175e5..dc4d16f 100644
--- a/src/components/chip/BqChip.ts
+++ b/src/components/chip/BqChip.ts
@@ -96,6 +96,14 @@ const definition: ComponentDefinition<BqChipProps> = {
       }
       if (!isEnterKeydown && !isSpaceKeyup) return;
       e.preventDefault();
+      // Handle remove button activation via keyboard
+      const focusedTarget = ke.target as HTMLElement | null;
+      if (focusedTarget?.closest('.remove-btn')) {
+        self.dispatchEvent(
+          new CustomEvent('bq-remove', { bubbles: true, composed: true })
+        );
+        return;
+      }
       self.dispatchEvent(
         new CustomEvent('bq-click', { bubbles: true, composed: true })
       );
diff --git a/src/components/dialog/BqDialog.ts b/src/components/dialog/BqDialog.ts
index 935ed62..3488b5f 100644
--- a/src/components/dialog/BqDialog.ts
+++ b/src/components/dialog/BqDialog.ts
@@ -60,6 +60,10 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
       font-family: var(--bq-font-family-sans); overflow: hidden;
     }
     @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+    :host([data-closing]) .overlay { animation: dlgFadeOut var(--bq-duration-normal,200ms) var(--bq-easing-accelerate) forwards; }
+    :host([data-closing]) .dialog { animation: dlgScaleOut var(--bq-duration-normal,200ms) var(--bq-easing-accelerate) forwards; }
+    @keyframes dlgFadeOut { to { opacity: 0; } }
+    @keyframes dlgScaleOut { to { transform: scale(0.95); opacity: 0; } }
     .dialog[data-size="sm"] { max-width: 28rem; }
     .dialog[data-size="md"] { max-width: 36rem; }
     .dialog[data-size="lg"] { max-width: 48rem; }
@@ -73,7 +77,7 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     .body { padding: var(--bq-space-6,1.5rem); overflow-y: auto; flex: 1; color: var(--bq-text-muted,#475569); font-size: var(--bq-font-size-md,1rem); line-height: var(--bq-line-height-relaxed,1.625); }
     .footer { padding: var(--bq-space-4,1rem) var(--bq-space-6,1.5rem); border-top: 1px solid var(--bq-border-base,#e2e8f0); display: flex; align-items: center; justify-content: flex-end; gap: var(--bq-space-3,0.75rem); flex-shrink: 0; background: var(--bq-bg-subtle,#f8fafc); }
     @media (prefers-reduced-motion: reduce) {
-      .overlay, .dialog { animation: none; }
+      .overlay, .dialog { animation: none !important; }
       .close-btn { transition: none; }
     }
   `,
@@ -95,10 +99,23 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
       if ((e.target as Element).classList.contains('overlay')) close();
     };
     const close = () => {
-      self.removeAttribute('open');
-      self.dispatchEvent(
-        new CustomEvent('bq-close', { bubbles: true, composed: true })
-      );
+      if (self.hasAttribute('data-closing')) return;
+      const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
+        '(prefers-reduced-motion: reduce)'
+      )?.matches;
+      const finalize = () => {
+        self.removeAttribute('data-closing');
+        self.removeAttribute('open');
+        self.dispatchEvent(
+          new CustomEvent('bq-close', { bubbles: true, composed: true })
+        );
+      };
+      if (reducedMotion) {
+        finalize();
+      } else {
+        self.setAttribute('data-closing', '');
+        setTimeout(finalize, 200);
+      }
     };
     const ch = (e: Event) => {
       if ((e.target as Element).closest('.close-btn')) close();
diff --git a/src/components/drawer/BqDrawer.ts b/src/components/drawer/BqDrawer.ts
index 8464937..c73318f 100644
--- a/src/components/drawer/BqDrawer.ts
+++ b/src/components/drawer/BqDrawer.ts
@@ -71,6 +71,16 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     @keyframes slideInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
     @keyframes slideInTop    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
     @keyframes slideInBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+    :host([data-closing]) .backdrop { animation: drwFadeOut var(--bq-duration-normal) var(--bq-easing-accelerate) forwards; }
+    :host([data-closing]) .drawer[data-placement="right"]  { animation: slideOutRight var(--bq-duration-normal) var(--bq-easing-accelerate) forwards; }
+    :host([data-closing]) .drawer[data-placement="left"]   { animation: slideOutLeft var(--bq-duration-normal) var(--bq-easing-accelerate) forwards; }
+    :host([data-closing]) .drawer[data-placement="top"]    { animation: slideOutTop var(--bq-duration-normal) var(--bq-easing-accelerate) forwards; }
+    :host([data-closing]) .drawer[data-placement="bottom"] { animation: slideOutBottom var(--bq-duration-normal) var(--bq-easing-accelerate) forwards; }
+    @keyframes drwFadeOut { to { opacity: 0; } }
+    @keyframes slideOutRight  { to { transform: translateX(100%); } }
+    @keyframes slideOutLeft   { to { transform: translateX(-100%); } }
+    @keyframes slideOutTop    { to { transform: translateY(-100%); } }
+    @keyframes slideOutBottom { to { transform: translateY(100%); } }
     .header { display: flex; align-items: center; justify-content: space-between; padding: var(--bq-space-5,1.25rem) var(--bq-space-6,1.5rem); border-bottom: 1px solid var(--bq-border-base,#e2e8f0); flex-shrink: 0; }
     .title { font-size: var(--bq-font-size-lg,1.125rem); font-weight: var(--bq-font-weight-semibold,600); color: var(--bq-text-base,#0f172a); margin: 0; flex: 1; }
     .close-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: none; border: none; cursor: pointer; color: var(--bq-text-muted,#475569); border-radius: var(--bq-radius-md,0.375rem); font-size: 1rem; transition: background var(--bq-duration-fast); }
@@ -79,7 +89,7 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     .body { padding: var(--bq-space-6,1.5rem); overflow-y: auto; flex: 1; }
     .footer { padding: var(--bq-space-4,1rem) var(--bq-space-6,1.5rem); border-top: 1px solid var(--bq-border-base,#e2e8f0); display: flex; gap: var(--bq-space-3,0.75rem); justify-content: flex-end; flex-shrink: 0; background: var(--bq-bg-subtle,#f8fafc); }
     @media (prefers-reduced-motion: reduce) {
-      .backdrop, .drawer { animation: none; }
+      .backdrop, .drawer { animation: none !important; }
       .close-btn { transition: none; }
     }
   `,
@@ -92,10 +102,23 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     if (!self.getState<string>('titleId'))
       self.setState('titleId', uniqueId('bq-drawer-title'));
     const close = () => {
-      self.removeAttribute('open');
-      self.dispatchEvent(
-        new CustomEvent('bq-close', { bubbles: true, composed: true })
-      );
+      if (self.hasAttribute('data-closing')) return;
+      const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
+        '(prefers-reduced-motion: reduce)'
+      )?.matches;
+      const finalize = () => {
+        self.removeAttribute('data-closing');
+        self.removeAttribute('open');
+        self.dispatchEvent(
+          new CustomEvent('bq-close', { bubbles: true, composed: true })
+        );
+      };
+      if (reducedMotion) {
+        finalize();
+      } else {
+        self.setAttribute('data-closing', '');
+        setTimeout(finalize, 200);
+      }
     };
     const kh = (e: Event) => {
       if ((e as KeyboardEvent).key === 'Escape' && self.hasAttribute('open'))
diff --git a/src/components/dropdown-menu/BqDropdownMenu.ts b/src/components/dropdown-menu/BqDropdownMenu.ts
index 1427cc5..221e8d6 100644
--- a/src/components/dropdown-menu/BqDropdownMenu.ts
+++ b/src/components/dropdown-menu/BqDropdownMenu.ts
@@ -51,8 +51,10 @@ const definition: ComponentDefinition<
       padding: var(--bq-space-1,0.25rem) 0; font-family: var(--bq-font-family-sans);
       animation: menuFadeIn var(--bq-duration-fast,150ms) var(--bq-easing-decelerate);
     }
-    :host([open]) .menu { display: block; }
+    :host([open]:not([data-closing])) .menu { display: block; }
+    :host([open][data-closing]) .menu { display: block; animation: menuFadeOut var(--bq-duration-fast,150ms) var(--bq-easing-accelerate) forwards; }
     @keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes menuFadeOut { to { opacity: 0; transform: translateY(-4px); } }
     :host([placement="bottom-start"]) .menu { top: 100%; left: 0; margin-top: 0.25rem; }
     :host([placement="bottom-end"]) .menu { top: 100%; right: 0; margin-top: 0.25rem; }
     :host([placement="top-start"]) .menu { bottom: 100%; left: 0; margin-bottom: 0.25rem; }
@@ -76,7 +78,7 @@ const definition: ComponentDefinition<
     ::slotted(a[aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
     ::slotted(hr) { border: none; border-top: 1px solid var(--bq-border-base,#e2e8f0); margin: 0.25rem 0; }
     @media (prefers-reduced-motion: reduce) {
-      .menu { animation: none; }
+      .menu { animation: none !important; }
       ::slotted(button),
       ::slotted(a) { transition: none; }
     }
@@ -87,14 +89,14 @@ const definition: ComponentDefinition<
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
-    if (!self.getState<string>('uid'))
-      self.setState('uid', uniqueId('bq-dm'));
+    if (!self.getState<string>('uid')) self.setState('uid', uniqueId('bq-dm'));
 
     const getTrigger = (): HTMLElement | null =>
       self.querySelector('[slot="trigger"]') as HTMLElement | null;
 
     const isDisabledItem = (el: HTMLElement): boolean =>
-      el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true';
+      el.hasAttribute('disabled') ||
+      el.getAttribute('aria-disabled') === 'true';
 
     const getItemLabel = (el: HTMLElement): string =>
       (el.getAttribute('data-value') || el.textContent || '')
@@ -106,9 +108,9 @@ const definition: ComponentDefinition<
         'slot:not([name])'
       ) as HTMLSlotElement | null;
       if (!slot) return [];
-      return slot.assignedElements({ flatten: true }).filter(
-        (el): el is HTMLElement => el instanceof HTMLElement
-      );
+      return slot
+        .assignedElements({ flatten: true })
+        .filter((el): el is HTMLElement => el instanceof HTMLElement);
     };
 
     const syncTriggerA11y = () => {
@@ -158,22 +160,36 @@ const definition: ComponentDefinition<
       );
       // Focus first item
       requestAnimationFrame(() => {
-        if (!self.hasAttribute('open')) return;
+        if (!self.hasAttribute('open') || self.hasAttribute('data-closing'))
+          return;
         const items = getMenuItems();
         if (items.length > 0) items[0]!.focus();
       });
     };
-    const close = (
-      { restoreFocus = false }: { restoreFocus?: boolean } = {}
-    ) => {
-      if (!self.hasAttribute('open')) return;
-      self.removeAttribute('open');
+    const close = ({
+      restoreFocus = false,
+    }: { restoreFocus?: boolean } = {}) => {
+      if (!self.hasAttribute('open') || self.hasAttribute('data-closing'))
+        return;
       clearTypeaheadBuffer();
-      syncTriggerA11y();
-      self.dispatchEvent(
-        new CustomEvent('bq-close', { bubbles: true, composed: true })
-      );
-      if (restoreFocus) getTrigger()?.focus();
+      const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
+        '(prefers-reduced-motion: reduce)'
+      )?.matches;
+      const finalize = () => {
+        self.removeAttribute('data-closing');
+        self.removeAttribute('open');
+        syncTriggerA11y();
+        self.dispatchEvent(
+          new CustomEvent('bq-close', { bubbles: true, composed: true })
+        );
+        if (restoreFocus) getTrigger()?.focus();
+      };
+      if (reducedMotion) {
+        finalize();
+      } else {
+        self.setAttribute('data-closing', '');
+        setTimeout(finalize, 150);
+      }
     };
     const toggle = () => {
       if (self.hasAttribute('open')) close();
@@ -197,7 +213,10 @@ const definition: ComponentDefinition<
 
       const orderedItems =
         currentIndex >= 0
-          ? [...items.slice(currentIndex + 1), ...items.slice(0, currentIndex + 1)]
+          ? [
+              ...items.slice(currentIndex + 1),
+              ...items.slice(0, currentIndex + 1),
+            ]
           : items;
 
       const match = orderedItems.find((item) =>
@@ -209,14 +228,15 @@ const definition: ComponentDefinition<
     const getMenuItems = (): HTMLElement[] => {
       return getMenuRoots().filter(
         (el): el is HTMLElement =>
-          (el.tagName === 'BUTTON' || el.tagName === 'A') &&
-          !isDisabledItem(el)
+          (el.tagName === 'BUTTON' || el.tagName === 'A') && !isDisabledItem(el)
       );
     };
 
     // Trigger click
     const triggerHandler = (e: Event) => {
-      const triggerSlot = self.shadowRoot?.querySelector('slot[name="trigger"]') as HTMLSlotElement | null;
+      const triggerSlot = self.shadowRoot?.querySelector(
+        'slot[name="trigger"]'
+      ) as HTMLSlotElement | null;
       if (!triggerSlot) return;
       const assigned = triggerSlot.assignedElements({ flatten: true });
       const clickedTrigger = assigned.some(
@@ -267,7 +287,9 @@ const definition: ComponentDefinition<
       if (self.hasAttribute('disabled')) return;
 
       // On trigger: open on ArrowDown/Enter/Space
-      const triggerSlot = self.shadowRoot?.querySelector('slot[name="trigger"]') as HTMLSlotElement | null;
+      const triggerSlot = self.shadowRoot?.querySelector(
+        'slot[name="trigger"]'
+      ) as HTMLSlotElement | null;
       const triggerEls = triggerSlot?.assignedElements({ flatten: true }) ?? [];
       const isOnTrigger = triggerEls.some(
         (el) => el === ke.target || el.contains(ke.target as Node)
@@ -331,12 +353,7 @@ const definition: ComponentDefinition<
           break;
         }
         default: {
-          if (
-            ke.key.length === 1 &&
-            !ke.altKey &&
-            !ke.ctrlKey &&
-            !ke.metaKey
-          ) {
+          if (ke.key.length === 1 && !ke.altKey && !ke.ctrlKey && !ke.metaKey) {
             typeaheadBuffer = `${typeaheadBuffer}${ke.key.toLowerCase()}`;
             if (typeaheadTimeout) clearTimeout(typeaheadTimeout);
             typeaheadTimeout = window.setTimeout(() => {
@@ -402,7 +419,9 @@ const definition: ComponentDefinition<
   disconnected() {
     const s = this as unknown as Record<string, unknown>;
     const triggerHandler = s['_triggerHandler'] as EventListener | undefined;
-    const menuClickHandler = s['_menuClickHandler'] as EventListener | undefined;
+    const menuClickHandler = s['_menuClickHandler'] as
+      | EventListener
+      | undefined;
     const keyHandler = s['_keyHandler'] as EventListener | undefined;
     const outsideHandler = s['_outsideHandler'] as EventListener | undefined;
     const slotChangeHandler = s['_slotChangeHandler'] as
@@ -427,9 +446,13 @@ const definition: ComponentDefinition<
   },
   updated() {
     const s = this as unknown as Record<string, unknown>;
-    const syncOutsideListener = s['_syncOutsideListener'] as (() => void) | undefined;
+    const syncOutsideListener = s['_syncOutsideListener'] as
+      | (() => void)
+      | undefined;
     syncOutsideListener?.();
-    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    const trigger = this.querySelector(
+      '[slot="trigger"]'
+    ) as HTMLElement | null;
     if (trigger)
       trigger.setAttribute(
         'aria-expanded',
diff --git a/src/components/pagination/BqPagination.ts b/src/components/pagination/BqPagination.ts
index 6246806..6b67884 100644
--- a/src/components/pagination/BqPagination.ts
+++ b/src/components/pagination/BqPagination.ts
@@ -24,10 +24,12 @@ function buildPages(
   total: number,
   siblings: number
 ): Array<number | '...'> {
+  if (total <= 0) return [1];
+  const validPage = Math.max(1, Math.min(page, total));
   if (total <= 7 + siblings * 2)
     return Array.from({ length: total }, (_, i) => i + 1);
-  const left = Math.max(2, page - siblings);
-  const right = Math.min(total - 1, page + siblings);
+  const left = Math.max(2, validPage - siblings);
+  const right = Math.min(total - 1, validPage + siblings);
   const showLeft = left > 2;
   const showRight = right < total - 1;
   const pages: Array<number | '...'> = [1];
@@ -108,8 +110,8 @@ const definition: ComponentDefinition<BqPaginationProps> = {
     const pageItems = pages
       .map((p) => {
         if (p === '...')
-          return '<span class="ellipsis" aria-hidden="true">&#8230;</span>';
-        return `<button class="page-btn" data-page="${p}" data-current="${p === page ? 'true' : 'false'}" ${p === page ? 'aria-current="page"' : ''} type="button">${p}</button>`;
+          return '<span class="ellipsis" role="separator" aria-hidden="true">&#8230;</span>';
+        return `<button class="page-btn" data-page="${p}" data-current="${p === page ? 'true' : 'false'}" ${p === page ? 'aria-current="page"' : ''} type="button" aria-label="${t('pagination.page')} ${p}">${p}</button>`;
       })
       .join('');
     return html`
diff --git a/src/components/progress/BqProgress.ts b/src/components/progress/BqProgress.ts
index dad14c2..bd87983 100644
--- a/src/components/progress/BqProgress.ts
+++ b/src/components/progress/BqProgress.ts
@@ -32,6 +32,9 @@ const definition: ComponentDefinition<BqProgressProps> = {
     indeterminate: { type: Boolean, default: false },
     label: { type: String, default: '' },
   },
+  sanitize: {
+    allowAttributes: ['style'],
+  },
   styles: `
     ${getBaseStyles()}
     :host { display: block; }
@@ -53,6 +56,7 @@ const definition: ComponentDefinition<BqProgressProps> = {
     :host([indeterminate]) .bar {
       width: 40% !important;
       animation: indeterminate 1.4s linear infinite;
+      will-change: transform;
     }
     @keyframes indeterminate { 0% { transform: translateX(-150%); } 100% { transform: translateX(350%); } }
     .label { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); margin-bottom: 0.375rem; font-family: var(--bq-font-family-sans); }
diff --git a/src/components/radio/BqRadio.ts b/src/components/radio/BqRadio.ts
index d1f52e3..5300342 100644
--- a/src/components/radio/BqRadio.ts
+++ b/src/components/radio/BqRadio.ts
@@ -52,7 +52,7 @@ const definition: ComponentDefinition<BqRadioProps> = {
     input[type="radio"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }
     .label-text { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-base,#0f172a); font-family: var(--bq-font-family-sans); line-height: 1.5; }
     .required-mark { color: var(--bq-color-danger-600,#dc2626); }
-    .hint { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); font-family: var(--bq-font-family-sans); padding-left: 1.75rem; }
+    .hint { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-muted,#475569); font-family: var(--bq-font-family-sans); padding-inline-start: 1.75rem; }
   `,
   connected() {
     const self = this;
diff --git a/src/components/segmented-control/BqSegmentedControl.ts b/src/components/segmented-control/BqSegmentedControl.ts
index e1ac673..f9e449c 100644
--- a/src/components/segmented-control/BqSegmentedControl.ts
+++ b/src/components/segmented-control/BqSegmentedControl.ts
@@ -15,6 +15,7 @@
 import type { ComponentDefinition } from '@bquery/bquery/component';
 import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
+import { t } from '../../i18n/index.js';
 import { uniqueId } from '../../utils/dom.js';
 import { createFormProxy, type FormProxy } from '../../utils/form.js';
 import { getBaseStyles } from '../../utils/styles.js';
@@ -441,12 +442,13 @@ const definition: ComponentDefinition<
     const uid = state.uid || 'bq-segmented';
     const labelId = `${uid}-label`;
     const hintId = `${uid}-hint`;
+    const fallbackGroupLabel = t('segmentedControl.defaultLabel');
 
     const labelAttribute = props.label
       ? `aria-labelledby="${labelId}"`
       : props['aria-label']
         ? `aria-label="${escapeHtml(props['aria-label'])}"`
-        : `aria-label="${escapeHtml(props.name || 'Options')}"`;
+        : `aria-label="${escapeHtml(props.name || fallbackGroupLabel)}"`;
 
     const descriptionAttribute = props.hint
       ? `aria-describedby="${hintId}"`
diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 5b938b9..62710e5 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -67,8 +67,10 @@ const definition: ComponentDefinition<BqSliderProps> = {
       const input = e.target as HTMLInputElement | null;
       if (!input) return;
       const v = Number(input.value);
-      self.setAttribute('value', String(v));
+      // Update form proxy and value display directly without re-rendering (prevents jank during drag)
       proxy.setValue(String(v));
+      const valueSpan = self.shadowRoot?.querySelector('.value');
+      if (valueSpan) valueSpan.textContent = String(v);
       self.dispatchEvent(
         new CustomEvent('bq-input', {
           detail: { value: v },
@@ -80,9 +82,13 @@ const definition: ComponentDefinition<BqSliderProps> = {
     const ch = (e: Event) => {
       const input = e.target as HTMLInputElement | null;
       if (!input) return;
+      const v = Number(input.value);
+      // Commit value to attribute on change (drag end) — triggers one clean re-render
+      self.setAttribute('value', String(v));
+      proxy.setValue(String(v));
       self.dispatchEvent(
         new CustomEvent('bq-change', {
-          detail: { value: Number(input.value) },
+          detail: { value: v },
           bubbles: true,
           composed: true,
         })
diff --git a/src/components/spinner/BqSpinner.ts b/src/components/spinner/BqSpinner.ts
index 4f2d637..eb94bc0 100644
--- a/src/components/spinner/BqSpinner.ts
+++ b/src/components/spinner/BqSpinner.ts
@@ -5,8 +5,8 @@
  * @prop {string} variant - primary | secondary | danger | success | white
  * @prop {string} label   - Accessible label (sr-only)
  */
-import { component, html } from '@bquery/bquery/component';
 import type { ComponentDefinition } from '@bquery/bquery/component';
+import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
 import { t } from '../../i18n/index.js';
 import { getBaseStyles } from '../../utils/styles.js';
@@ -15,27 +15,27 @@ type BqSpinnerProps = { size: string; variant: string; label: string };
 
 const definition: ComponentDefinition<BqSpinnerProps> = {
   props: {
-    size:    { type: String, default: 'md' },
+    size: { type: String, default: 'md' },
     variant: { type: String, default: 'primary' },
-    label:   { type: String, default: '' },
+    label: { type: String, default: '' },
   },
   styles: `
     ${getBaseStyles()}
     :host { display: inline-flex; align-items: center; justify-content: center; }
     .spinner {
-      border-radius: 50%; animation: spin 0.7s linear infinite;
-      border-top-color: transparent;
+      border-radius: 50%; border-style: solid; border-width: 2.5px; border-color: transparent;
+      animation: spin 0.7s linear infinite;
     }
     .spinner[data-size="xs"] { width: 1rem;   height: 1rem;   border-width: 2px; }
     .spinner[data-size="sm"] { width: 1.25rem; height: 1.25rem; border-width: 2px; }
     .spinner[data-size="md"] { width: 1.75rem; height: 1.75rem; border-width: 2.5px; }
     .spinner[data-size="lg"] { width: 2.5rem; height: 2.5rem; border-width: 3px; }
     .spinner[data-size="xl"] { width: 3.5rem; height: 3.5rem; border-width: 4px; }
-    .spinner[data-variant="primary"]   { border: 2.5px solid var(--bq-color-primary-200,#bfdbfe); border-top-color: var(--bq-color-primary-600,#2563eb); }
-    .spinner[data-variant="secondary"] { border: 2.5px solid var(--bq-color-secondary-200,#e2e8f0); border-top-color: var(--bq-color-secondary-600,#475569); }
-    .spinner[data-variant="danger"]    { border: 2.5px solid var(--bq-color-danger-100,#fee2e2); border-top-color: var(--bq-color-danger-600,#dc2626); }
-    .spinner[data-variant="success"]   { border: 2.5px solid var(--bq-color-success-100,#dcfce7); border-top-color: var(--bq-color-success-600,#16a34a); }
-    .spinner[data-variant="white"]     { border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; }
+    .spinner[data-variant="primary"]   { border-color: var(--bq-color-primary-200,#bfdbfe); border-top-color: var(--bq-color-primary-600,#2563eb); }
+    .spinner[data-variant="secondary"] { border-color: var(--bq-color-secondary-200,#e2e8f0); border-top-color: var(--bq-color-secondary-600,#475569); }
+    .spinner[data-variant="danger"]    { border-color: var(--bq-color-danger-100,#fee2e2); border-top-color: var(--bq-color-danger-600,#dc2626); }
+    .spinner[data-variant="success"]   { border-color: var(--bq-color-success-100,#dcfce7); border-top-color: var(--bq-color-success-600,#16a34a); }
+    .spinner[data-variant="white"]     { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
     @keyframes spin { to { transform: rotate(360deg); } }
     @media (prefers-reduced-motion: reduce) {
       .spinner { animation: none; }
@@ -45,8 +45,19 @@ const definition: ComponentDefinition<BqSpinnerProps> = {
   render({ props }) {
     const trimmedLabel = props.label.trim();
     const label = trimmedLabel !== '' ? trimmedLabel : t('common.loading');
-    return html`<div class="spinner-root" role="status" aria-live="polite" aria-label="${escapeHtml(label)}">
-      <div part="spinner" class="spinner" data-size="${escapeHtml(props.size)}" data-variant="${escapeHtml(props.variant)}" aria-hidden="true"></div>
+    return html`<div
+      class="spinner-root"
+      role="status"
+      aria-live="polite"
+      aria-label="${escapeHtml(label)}"
+    >
+      <div
+        part="spinner"
+        class="spinner"
+        data-size="${escapeHtml(props.size)}"
+        data-variant="${escapeHtml(props.variant)}"
+        aria-hidden="true"
+      ></div>
       <span class="sr-only">${escapeHtml(label)}</span>
     </div>`;
   },
diff --git a/src/components/table/BqTable.ts b/src/components/table/BqTable.ts
index 30044da..b929b51 100644
--- a/src/components/table/BqTable.ts
+++ b/src/components/table/BqTable.ts
@@ -140,8 +140,15 @@ const definition: ComponentDefinition<BqTableProps> = {
         const sortIcon = col.sortable
           ? `<span class="sort-icon" data-active="${isSorted ? 'true' : 'false'}" aria-hidden="true">${isSorted && sortDir === 'desc' ? '&#9650;' : '&#9660;'}</span>`
           : '';
+        const sortLabel = col.sortable
+          ? isSorted
+            ? sortDir === 'asc'
+              ? t('table.sortDescending')
+              : t('table.sortAscending')
+            : t('table.sortAscending')
+          : '';
         const sortableAttrs = col.sortable
-          ? `class="sortable" data-sort-key="${escapeHtml(col.key)}" tabindex="0" aria-sort="${isSorted ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}"`
+          ? `class="sortable" data-sort-key="${escapeHtml(col.key)}" tabindex="0" aria-sort="${isSorted ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}" title="${escapeHtml(sortLabel)}"`
           : '';
         return `<th part="th" scope="col" role="columnheader" ${sortableAttrs}>${escapeHtml(col.label)}${sortIcon}</th>`;
       })
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index 1d1dc41..be05075 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -14,6 +14,10 @@ import { getBaseStyles } from '../../utils/styles.js';
 
 type BqTabsProps = { 'active-tab': string; variant: string };
 
+function getPanelId(tabId: string): string {
+  return `panel-${tabId}`;
+}
+
 const definition: ComponentDefinition<BqTabsProps> = {
   props: {
     'active-tab': { type: String, default: '' },
@@ -149,10 +153,21 @@ const definition: ComponentDefinition<BqTabsProps> = {
     const active = this.getAttribute('active-tab') ?? '';
     this.querySelectorAll<HTMLElement>('[data-tab]').forEach((panel) => {
       const tabId = panel.getAttribute('data-tab') ?? '';
-      panel.hidden = tabId !== active;
+      const isActive = tabId === active;
+      const panelId = panel.id || getPanelId(tabId);
+
+      panel.id = panelId;
+      panel.hidden = !isActive;
       panel.setAttribute('role', 'tabpanel');
-      panel.setAttribute('tabindex', '0');
+      panel.setAttribute('tabindex', isActive ? '0' : '-1');
       panel.setAttribute('aria-labelledby', `tab-${tabId}`);
+      panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+
+      const button = Array.from(
+        this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ??
+          []
+      ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
+      button?.setAttribute('aria-controls', panelId);
     });
   },
   render({ props, state }) {
@@ -167,7 +182,7 @@ const definition: ComponentDefinition<BqTabsProps> = {
       <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
         role="tab" id="tab-${escapeHtml(tab.id)}" data-tab-id="${escapeHtml(tab.id)}"
         aria-selected="${tab.id === active ? 'true' : 'false'}"
-        aria-controls="${escapeHtml(tab.id)}"
+        aria-controls="${escapeHtml(getPanelId(tab.id))}"
         tabindex="${tab.id === active ? '0' : '-1'}"
         ${tab.disabled ? 'disabled aria-disabled="true"' : ''}
       >${escapeHtml(tab.label)}</button>
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index d9a8515..0bbf37f 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -92,6 +92,9 @@ export const en = {
     open: 'Open menu',
     close: 'Close menu',
   },
+  segmentedControl: {
+    defaultLabel: 'Options',
+  },
 } as const;
 
 export type EnLocale = typeof en;
diff --git a/stories/dialog.stories.ts b/stories/dialog.stories.ts
index fb9e560..b01aa65 100644
--- a/stories/dialog.stories.ts
+++ b/stories/dialog.stories.ts
@@ -1,27 +1,64 @@
 import { storyHtml } from '@bquery/bquery/storybook';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+function renderDialogStory(args: {
+  title: string;
+  size: string;
+  dismissible: boolean;
+  content: string;
+  triggerLabel?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}): HTMLElement {
+  const container = document.createElement('div');
+  container.innerHTML = storyHtml`
+    <div style="display:flex;flex-direction:column;align-items:flex-start;gap:1rem">
+      <bq-button variant="primary">${args.triggerLabel ?? 'Open dialog'}</bq-button>
+      <bq-dialog title=${args.title} size=${args.size} ?dismissible=${args.dismissible}>
+        <p>${args.content}</p>
+        <div slot="footer">
+          <bq-button variant="ghost">${args.cancelLabel ?? 'Cancel'}</bq-button>
+          <bq-button variant="primary">${args.confirmLabel ?? 'Confirm'}</bq-button>
+        </div>
+      </bq-dialog>
+    </div>
+  `;
+
+  const [openButton, dialog] = Array.from(
+    container.querySelectorAll('bq-button, bq-dialog')
+  ) as [HTMLElement | undefined, HTMLElement | undefined];
+  const cancelButton = container.querySelector(
+    'bq-dialog [slot="footer"] bq-button[variant="ghost"]'
+  ) as HTMLElement | null;
+  const confirmButton = container.querySelector(
+    'bq-dialog [slot="footer"] bq-button[variant="primary"]'
+  ) as HTMLElement | null;
+
+  openButton?.addEventListener('bq-click', () => {
+    dialog?.setAttribute('open', '');
+  });
+
+  cancelButton?.addEventListener('bq-click', () => {
+    dialog?.removeAttribute('open');
+  });
+
+  confirmButton?.addEventListener('bq-click', () => {
+    dialog?.removeAttribute('open');
+  });
+
+  return container;
+}
+
 const meta: Meta = {
   title: 'Overlays/Dialog',
   tags: ['autodocs'],
-  render: (args) => storyHtml`
-    <bq-button variant="primary" id="open-dialog-btn">Open dialog</bq-button>
-    <bq-dialog id="demo-dialog" title=${args.title} size=${args.size} ?dismissible=${args.dismissible}>
-      <p>${args.content}</p>
-      <div slot="footer">
-        <bq-button variant="ghost" id="cancel-btn">Cancel</bq-button>
-        <bq-button variant="primary">Confirm</bq-button>
-      </div>
-    </bq-dialog>
-    <script>
-      document.getElementById('open-dialog-btn')?.addEventListener('bq-click', () => {
-        document.getElementById('demo-dialog')?.setAttribute('open', '');
-      });
-      document.getElementById('cancel-btn')?.addEventListener('bq-click', () => {
-        document.getElementById('demo-dialog')?.removeAttribute('open');
-      });
-    </script>
-  `,
+  render: (args) =>
+    renderDialogStory({
+      title: String(args.title ?? ''),
+      size: String(args.size ?? 'md'),
+      dismissible: Boolean(args.dismissible),
+      content: String(args.content ?? ''),
+    }),
   argTypes: {
     title: { control: 'text' },
     size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
@@ -41,39 +78,54 @@ type Story = StoryObj;
 export const Default: Story = {};
 
 export const SmallDialog: Story = {
-  render: () => storyHtml`
-    <bq-dialog open title="Quick confirm" size="sm" dismissible>
-      <p>Are you sure?</p>
-      <div slot="footer"><bq-button variant="primary">Yes</bq-button></div>
-    </bq-dialog>
-  `,
+  render: () =>
+    renderDialogStory({
+      title: 'Quick confirm',
+      size: 'sm',
+      dismissible: true,
+      content: 'Are you sure?',
+      triggerLabel: 'Open small dialog',
+      cancelLabel: 'No',
+      confirmLabel: 'Yes',
+    }),
 };
 
 export const LargeDialog: Story = {
-  render: () => storyHtml`
-    <bq-dialog open title="Detailed view" size="lg" dismissible>
-      <p>This is a large dialog with more space for content, forms, or complex layouts.</p>
-      <div slot="footer">
-        <bq-button variant="ghost">Cancel</bq-button>
-        <bq-button variant="primary">Save</bq-button>
-      </div>
-    </bq-dialog>
-  `,
+  render: () =>
+    renderDialogStory({
+      title: 'Detailed view',
+      size: 'lg',
+      dismissible: true,
+      content:
+        'This is a large dialog with more space for content, forms, or complex layouts.',
+      triggerLabel: 'Open large dialog',
+      confirmLabel: 'Save',
+    }),
 };
 
 export const ExtraLargeDialog: Story = {
-  render: () => storyHtml`
-    <bq-dialog open title="Full content" size="xl" dismissible>
-      <p>Extra-large dialogs are suitable for dashboards, previews, and multi-step flows.</p>
-    </bq-dialog>
-  `,
+  render: () =>
+    renderDialogStory({
+      title: 'Full content',
+      size: 'xl',
+      dismissible: true,
+      content:
+        'Extra-large dialogs are suitable for dashboards, previews, and multi-step flows.',
+      triggerLabel: 'Open extra-large dialog',
+      confirmLabel: 'Continue',
+    }),
 };
 
 export const OpenByDefault: Story = {
-  render: () => storyHtml`
-    <bq-dialog open title="Welcome" size="sm">
-      <p>This dialog is open by default in this story.</p>
-      <div slot="footer"><bq-button variant="primary">Got it</bq-button></div>
-    </bq-dialog>
-  `,
+  render: () =>
+    renderDialogStory({
+      title: 'Welcome',
+      size: 'sm',
+      dismissible: true,
+      content:
+        'This dialog can be opened immediately from the preview trigger.',
+      triggerLabel: 'Open welcome dialog',
+      cancelLabel: 'Close',
+      confirmLabel: 'Got it',
+    }),
 };
diff --git a/stories/drawer.stories.ts b/stories/drawer.stories.ts
index 0442e25..53b5815 100644
--- a/stories/drawer.stories.ts
+++ b/stories/drawer.stories.ts
@@ -1,26 +1,54 @@
 import { storyHtml } from '@bquery/bquery/storybook';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+function renderDrawerStory(args: {
+  title: string;
+  placement: string;
+  size: string;
+  triggerLabel?: string;
+  closeLabel?: string;
+  content?: string;
+}): HTMLElement {
+  const container = document.createElement('div');
+  container.innerHTML = storyHtml`
+    <div style="display:flex;flex-direction:column;align-items:flex-start;gap:1rem">
+      <bq-button variant="primary">${args.triggerLabel ?? 'Open drawer'}</bq-button>
+      <bq-drawer title=${args.title} placement=${args.placement} size=${args.size}>
+        <p>${args.content ?? 'Drawer content goes here.'}</p>
+        <div slot="footer">
+          <bq-button variant="ghost">${args.closeLabel ?? 'Close'}</bq-button>
+        </div>
+      </bq-drawer>
+    </div>
+  `;
+
+  const [openButton, drawer] = Array.from(
+    container.querySelectorAll('bq-button, bq-drawer')
+  ) as [HTMLElement | undefined, HTMLElement | undefined];
+  const closeButton = container.querySelector(
+    'bq-drawer [slot="footer"] bq-button'
+  ) as HTMLElement | null;
+
+  openButton?.addEventListener('bq-click', () => {
+    drawer?.setAttribute('open', '');
+  });
+
+  closeButton?.addEventListener('bq-click', () => {
+    drawer?.removeAttribute('open');
+  });
+
+  return container;
+}
+
 const meta: Meta = {
   title: 'Overlays/Drawer',
   tags: ['autodocs'],
-  render: (args) => storyHtml`
-    <bq-button variant="primary" id="open-drawer-btn">Open Drawer</bq-button>
-    <bq-drawer id="demo-drawer" title=${args.title} placement=${args.placement} size=${args.size}>
-      <p>Drawer content goes here.</p>
-      <div slot="footer">
-        <bq-button variant="ghost" id="close-drawer-btn">Close</bq-button>
-      </div>
-    </bq-drawer>
-    <script>
-      document.getElementById('open-drawer-btn')?.addEventListener('bq-click', () => {
-        document.getElementById('demo-drawer')?.setAttribute('open', '');
-      });
-      document.getElementById('close-drawer-btn')?.addEventListener('bq-click', () => {
-        document.getElementById('demo-drawer')?.removeAttribute('open');
-      });
-    </script>
-  `,
+  render: (args) =>
+    renderDrawerStory({
+      title: String(args.title ?? ''),
+      placement: String(args.placement ?? 'right'),
+      size: String(args.size ?? 'md'),
+    }),
   argTypes: {
     title: { control: 'text' },
     placement: {
@@ -48,9 +76,13 @@ export const FullWidth: Story = {
   args: { placement: 'right', title: 'Full Drawer', size: 'full' },
 };
 export const OpenByDefault: Story = {
-  render: () => storyHtml`
-    <bq-drawer open title="Notifications" placement="right" size="sm">
-      <p>You have 3 new notifications.</p>
-    </bq-drawer>
-  `,
+  render: () =>
+    renderDrawerStory({
+      title: 'Notifications',
+      placement: 'right',
+      size: 'sm',
+      triggerLabel: 'Open notifications drawer',
+      closeLabel: 'Dismiss',
+      content: 'You have 3 new notifications.',
+    }),
 };
diff --git a/stories/dropdown-menu.stories.ts b/stories/dropdown-menu.stories.ts
new file mode 100644
index 0000000..5373557
--- /dev/null
+++ b/stories/dropdown-menu.stories.ts
@@ -0,0 +1,96 @@
+import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+function renderDropdownLinkStory(): HTMLElement {
+  const container = document.createElement('div');
+  container.innerHTML = storyHtml`
+    <div style="padding:3rem;display:flex;justify-content:center">
+      <bq-dropdown-menu label="Navigation links" placement="bottom-start">
+        <button slot="trigger" type="button">Navigate</button>
+        <a href="#dashboard">Dashboard</a>
+        <a href="#reports">Reports</a>
+        <a href="#settings">Settings</a>
+      </bq-dropdown-menu>
+    </div>
+  `;
+
+  container.querySelectorAll('bq-dropdown-menu a').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      event.preventDefault();
+    });
+  });
+
+  return container;
+}
+
+const meta: Meta = {
+  title: 'Overlays/Dropdown Menu',
+  tags: ['autodocs'],
+  render: (args) => storyHtml`
+    <div style="padding:3rem;display:flex;justify-content:center">
+      <bq-dropdown-menu label=${args.label} placement=${args.placement} ?disabled=${args.disabled}>
+        <button slot="trigger" type="button">${args.triggerLabel}</button>
+        <button data-value="edit">Edit</button>
+        <button data-value="duplicate">Duplicate</button>
+        <hr />
+        <button data-value="archive">Archive</button>
+        <button data-value="delete">Delete</button>
+      </bq-dropdown-menu>
+    </div>
+  `,
+  argTypes: {
+    label: { control: 'text', description: 'Accessible label for the menu' },
+    triggerLabel: { control: 'text', description: 'Visible trigger text' },
+    placement: {
+      control: 'select',
+      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+      description: 'Preferred overlay placement',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the trigger and menu',
+    },
+  },
+  args: {
+    label: 'Row actions',
+    triggerLabel: 'Actions',
+    placement: 'bottom-start',
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const TopEnd: Story = {
+  args: {
+    placement: 'top-end',
+    triggerLabel: 'More actions',
+  },
+};
+
+export const WithLinks: Story = {
+  render: () => renderDropdownLinkStory(),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    triggerLabel: 'Unavailable',
+  },
+};
+
+export const OpenByDefault: Story = {
+  render: () => storyHtml`
+    <div style="padding:3rem;display:flex;justify-content:center">
+      <bq-dropdown-menu label="Quick actions" placement="bottom-end">
+        <button slot="trigger" type="button">Quick actions</button>
+        <button data-value="rename">Rename</button>
+        <button data-value="share">Share</button>
+        <button data-value="delete">Delete</button>
+      </bq-dropdown-menu>
+    </div>
+  `,
+};
diff --git a/stories/toast.stories.ts b/stories/toast.stories.ts
index 791f831..438c87f 100644
--- a/stories/toast.stories.ts
+++ b/stories/toast.stories.ts
@@ -46,6 +46,6 @@ export const AllVariants: Story = {
 
 export const NonDismissible: Story = {
   render: () => storyHtml`
-    <bq-toast variant="info" message="This notification cannot be dismissed." duration="0" dismissible="false"></bq-toast>
+    <bq-toast variant="info" message="This notification cannot be dismissed." duration="0" ?dismissible=${false}></bq-toast>
   `,
 };
diff --git a/stories/tooltip.stories.ts b/stories/tooltip.stories.ts
index 09137ca..dc0abfc 100644
--- a/stories/tooltip.stories.ts
+++ b/stories/tooltip.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { storyHtml } from '@bquery/bquery/storybook';
+import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Components/Tooltip',
@@ -7,21 +7,24 @@ const meta: Meta = {
   render: (args) => storyHtml`
     <div style="padding:4rem;display:inline-block">
       <bq-tooltip content=${args.content} placement=${args.placement} delay=${args.delay}>
-        <bq-button>Hover me</bq-button>
+        <button type="button">Hover me</button>
       </bq-tooltip>
     </div>
   `,
   argTypes: {
-    content:   { control: 'text' },
-    placement: { control: 'select', options: ['top','bottom','left','right'] },
-    delay:     { control: 'number' },
+    content: { control: 'text' },
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    delay: { control: 'number' },
   },
   args: { content: 'Tooltip text', placement: 'top', delay: 200 },
 };
 export default meta;
 type Story = StoryObj;
 
-export const Top:    Story = {};
+export const Top: Story = {};
 export const Bottom: Story = { args: { placement: 'bottom' } };
-export const Left:   Story = { args: { placement: 'left' } };
-export const Right:  Story = { args: { placement: 'right' } };
+export const Left: Story = { args: { placement: 'left' } };
+export const Right: Story = { args: { placement: 'right' } };
diff --git a/tests/accordion-enhancements.test.ts b/tests/accordion-enhancements.test.ts
index 45bb5ab..f4410f0 100644
--- a/tests/accordion-enhancements.test.ts
+++ b/tests/accordion-enhancements.test.ts
@@ -1,7 +1,9 @@
 // DOM environment is provided by tests/setup.ts (preloaded via bunfig.toml)
-import { describe, it, expect, beforeAll, afterEach } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
 
-const win = (globalThis as unknown as Record<string, unknown>)['window'] as Window & typeof globalThis;
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
 const doc = win.document as unknown as Document;
 
 describe('BqAccordion — accessibility improvements', () => {
@@ -44,14 +46,17 @@ describe('BqAccordion — accessibility improvements', () => {
     expect(panel?.getAttribute('role')).toBe('region');
   });
 
-  it('should set panel height to 0 when closed', async () => {
+  it('should collapse panel via CSS grid when closed', async () => {
     const el = doc.createElement('bq-accordion');
     el.setAttribute('label', 'Details');
     doc.body.appendChild(el);
-    // Wait for requestAnimationFrame to fire (polyfilled as setTimeout)
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-    expect(panel?.style.height).toBe('0px');
+    // Panel uses grid-template-rows: 0fr via CSS (no inline style needed)
+    expect(panel).not.toBeNull();
+    expect(el.hasAttribute('open')).toBe(false);
   });
 
   it('should have unique IDs for trigger and panel', () => {
@@ -69,77 +74,62 @@ describe('BqAccordion — accessibility improvements', () => {
     expect(trigger1?.getAttribute('id')).not.toBe(trigger2?.getAttribute('id'));
   });
 
-  it('should reset panel height to auto after expand transition completes', async () => {
+  it('should expand panel via CSS grid when open', async () => {
     const el = doc.createElement('bq-accordion');
     el.setAttribute('label', 'Details');
     el.setAttribute('open', '');
     doc.body.appendChild(el);
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-    const transitionEvent = new win.Event('transitionend', {
-      bubbles: true,
-    }) as Event & { propertyName?: string };
-    transitionEvent.propertyName = 'height';
-    panel?.dispatchEvent(transitionEvent);
-
-    expect(panel?.style.height).toBe('auto');
+    // Panel is expanded via :host([open]) .panel { grid-template-rows: 1fr }
+    expect(panel).not.toBeNull();
+    expect(el.hasAttribute('open')).toBe(true);
   });
 
-  it("should ignore bubbled descendant height transitionend events", async () => {
+  it('should use CSS grid animation approach for panel', async () => {
     const el = doc.createElement('bq-accordion');
     el.setAttribute('label', 'Details');
     el.setAttribute('open', '');
-    const content = doc.createElement('div');
-    content.textContent = 'Accordion content';
-    el.appendChild(content);
     doc.body.appendChild(el);
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-    const panelInner = el.shadowRoot?.querySelector('.panel-inner') as HTMLElement | null;
+    const panelInner = el.shadowRoot?.querySelector(
+      '.panel-inner'
+    ) as HTMLElement | null;
     expect(panel).not.toBeNull();
     expect(panelInner).not.toBeNull();
-    panel!.style.height = '123px';
-
-    const transitionEvent = new win.Event('transitionend', {
-      bubbles: true,
-    }) as Event & { propertyName?: string };
-    transitionEvent.propertyName = 'height';
-    panelInner?.dispatchEvent(transitionEvent);
-
-    expect(panel?.style.height).toBe('123px');
+    // Panel inner has overflow: hidden and min-height: 0 for grid collapse
+    expect(panel?.getAttribute('role')).toBe('region');
   });
 
-  it('should reset panel height to auto when transitions are disabled', async () => {
-    const originalGetComputedStyle = win.getComputedStyle.bind(win);
-    const reducedMotionGetComputedStyle = ((el: Element) => {
-      const styles = originalGetComputedStyle(el);
-      if ((el as HTMLElement).classList.contains('panel')) {
-        return new Proxy(styles, {
-          get(target, prop, receiver) {
-            if (prop === 'transitionProperty') return 'none';
-            if (prop === 'transitionDuration') return '0s';
-            return Reflect.get(target, prop, receiver);
-          },
-        }) as CSSStyleDeclaration;
-      }
-      return styles;
-    }) as typeof win.getComputedStyle;
-
-    win.getComputedStyle = reducedMotionGetComputedStyle;
-
-    try {
-      const el = doc.createElement('bq-accordion');
-      el.setAttribute('label', 'Details');
-      el.setAttribute('open', '');
-      doc.body.appendChild(el);
-      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-
-      const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement | null;
-      expect(panel?.style.height).toBe('auto');
-    } finally {
-      win.getComputedStyle = originalGetComputedStyle;
-    }
+  it('should set data-closing attribute during close animation', async () => {
+    const el = doc.createElement('bq-accordion');
+    el.setAttribute('label', 'Details');
+    el.setAttribute('open', '');
+    doc.body.appendChild(el);
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
+
+    // Click trigger to close
+    const trigger = el.shadowRoot?.querySelector(
+      '.trigger'
+    ) as HTMLElement | null;
+    trigger?.click();
+
+    // data-closing should be set during animation
+    expect(el.hasAttribute('data-closing')).toBe(true);
+    expect(el.hasAttribute('open')).toBe(true); // still open during animation
+
+    // After animation completes
+    await new Promise<void>((resolve) => setTimeout(resolve, 350));
+    expect(el.hasAttribute('data-closing')).toBe(false);
+    expect(el.hasAttribute('open')).toBe(false);
   });
 });
diff --git a/tests/avatar.test.ts b/tests/avatar.test.ts
index fa5c858..f2c9999 100644
--- a/tests/avatar.test.ts
+++ b/tests/avatar.test.ts
@@ -36,6 +36,22 @@ describe('BqAvatar', () => {
     expect(avatar?.textContent?.trim()).toBe('A');
   });
 
+  it('should render both graphemes for a single-token CJK name', () => {
+    const el = doc.createElement('bq-avatar');
+    el.setAttribute('alt', '张三');
+    doc.body.appendChild(el);
+    const avatar = el.shadowRoot?.querySelector('.avatar');
+    expect(avatar?.textContent?.trim()).toBe('张三');
+  });
+
+  it('should derive initials from multi-word non-Latin names', () => {
+    const el = doc.createElement('bq-avatar');
+    el.setAttribute('alt', 'محمد علي');
+    doc.body.appendChild(el);
+    const avatar = el.shadowRoot?.querySelector('.avatar');
+    expect(avatar?.textContent?.trim()).toBe('مع');
+  });
+
   it('should render img when src is set', () => {
     const el = doc.createElement('bq-avatar');
     el.setAttribute('src', 'photo.jpg');
diff --git a/tests/dropdown-menu.test.ts b/tests/dropdown-menu.test.ts
index ef081b9..a3c2257 100644
--- a/tests/dropdown-menu.test.ts
+++ b/tests/dropdown-menu.test.ts
@@ -1,7 +1,9 @@
 // DOM environment is provided by tests/setup.ts (preloaded via bunfig.toml)
-import { describe, it, expect, beforeAll, afterEach } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
 
-const win = (globalThis as unknown as Record<string, unknown>)['window'] as Window & typeof globalThis;
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
 const doc = win.document as unknown as Document;
 
 describe('BqDropdownMenu', () => {
@@ -81,7 +83,9 @@ describe('BqDropdownMenu', () => {
     el.appendChild(btn);
     doc.body.appendChild(el);
     // Wait for requestAnimationFrame to fire
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     expect(btn.getAttribute('aria-haspopup')).toBe('menu');
   });
 
@@ -98,26 +102,38 @@ describe('BqDropdownMenu', () => {
     let removeCount = 0;
     const originalAdd = doc.addEventListener.bind(doc);
     const originalRemove = doc.removeEventListener.bind(doc);
-    doc.addEventListener = ((type: string, listener: EventListenerOrEventListenerObject, options?: AddEventListenerOptions | boolean) => {
+    doc.addEventListener = ((
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: AddEventListenerOptions | boolean
+    ) => {
       if (type === 'click') addCount += 1;
       return originalAdd(type, listener, options);
     }) as Document['addEventListener'];
-    doc.removeEventListener = ((type: string, listener: EventListenerOrEventListenerObject, options?: EventListenerOptions | boolean) => {
+    doc.removeEventListener = ((
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: EventListenerOptions | boolean
+    ) => {
       if (type === 'click') removeCount += 1;
       return originalRemove(type, listener, options);
     }) as Document['removeEventListener'];
 
     try {
       doc.body.appendChild(el);
-      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      await new Promise<void>((resolve) =>
+        requestAnimationFrame(() => resolve())
+      );
       expect(addCount).toBe(0);
 
       trigger.click();
-      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      await new Promise<void>((resolve) =>
+        requestAnimationFrame(() => resolve())
+      );
       expect(addCount).toBe(1);
 
       trigger.click();
-      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      await new Promise<void>((resolve) => setTimeout(resolve, 200));
       expect(removeCount).toBe(1);
     } finally {
       doc.addEventListener = originalAdd;
@@ -132,7 +148,9 @@ describe('BqDropdownMenu', () => {
     btn.textContent = 'Trigger';
     el.appendChild(btn);
     doc.body.appendChild(el);
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     expect(btn.getAttribute('aria-expanded')).toBe('false');
   });
 
@@ -144,7 +162,9 @@ describe('BqDropdownMenu', () => {
     btn.textContent = 'Trigger';
     el.appendChild(btn);
     doc.body.appendChild(el);
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     expect(btn.getAttribute('aria-disabled')).toBe('true');
     expect(btn.hasAttribute('disabled')).toBe(true);
@@ -160,7 +180,9 @@ describe('BqDropdownMenu', () => {
     el.append(trigger, item);
     doc.body.appendChild(el);
 
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     expect(item.getAttribute('role')).toBe('menuitem');
     expect(item.getAttribute('tabindex')).toBe('-1');
@@ -176,7 +198,9 @@ describe('BqDropdownMenu', () => {
     el.append(trigger, item);
     doc.body.appendChild(el);
 
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     expect(item.getAttribute('type')).toBe('button');
   });
@@ -193,7 +217,9 @@ describe('BqDropdownMenu', () => {
     el.append(trigger, item);
     doc.body.appendChild(el);
 
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     expect(item.getAttribute('role')).toBe('menuitem');
     expect(item.getAttribute('aria-disabled')).toBe('true');
@@ -216,7 +242,9 @@ describe('BqDropdownMenu', () => {
     });
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
 
     expect(selected).toBe(0);
     expect(el.hasAttribute('open')).toBe(true);
@@ -235,12 +263,15 @@ describe('BqDropdownMenu', () => {
     el.append(trigger, item);
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     item.focus();
 
     item.dispatchEvent(
       new win.KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
     );
+    await new Promise<void>((resolve) => setTimeout(resolve, 200));
 
     expect(el.hasAttribute('open')).toBe(false);
     expect(doc.activeElement).not.toBe(trigger);
@@ -258,9 +289,12 @@ describe('BqDropdownMenu', () => {
     el.append(trigger, item);
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     item.focus();
     outside.dispatchEvent(new win.MouseEvent('click', { bubbles: true }));
+    await new Promise<void>((resolve) => setTimeout(resolve, 200));
 
     expect(el.hasAttribute('open')).toBe(false);
     expect(doc.activeElement).toBe(trigger);
@@ -278,7 +312,7 @@ describe('BqDropdownMenu', () => {
 
     trigger.click();
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) => setTimeout(resolve, 200));
 
     expect(el.hasAttribute('open')).toBe(false);
     expect(doc.activeElement).not.toBe(item);
@@ -300,11 +334,14 @@ describe('BqDropdownMenu', () => {
     });
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     item.focus();
     item.dispatchEvent(
       new win.KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
     );
+    await new Promise<void>((resolve) => setTimeout(resolve, 200));
 
     expect(selected).toBe('Edit');
     expect(el.hasAttribute('open')).toBe(false);
@@ -327,11 +364,14 @@ describe('BqDropdownMenu', () => {
     });
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     item.focus();
     item.dispatchEvent(
       new win.KeyboardEvent('keydown', { key: ' ', bubbles: true })
     );
+    await new Promise<void>((resolve) => setTimeout(resolve, 200));
 
     expect(selected).toBe('Details');
     expect(el.hasAttribute('open')).toBe(false);
@@ -352,7 +392,9 @@ describe('BqDropdownMenu', () => {
     doc.body.appendChild(el);
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
     archive.focus();
     archive.dispatchEvent(
       new win.KeyboardEvent('keydown', { key: 'd', bubbles: true })
@@ -379,8 +421,13 @@ describe('BqDropdownMenu', () => {
     });
 
     trigger.click();
-    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-    const clickEvent = new win.MouseEvent('click', { bubbles: true, cancelable: true });
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
+    const clickEvent = new win.MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
     item.dispatchEvent(clickEvent);
 
     expect(selected).toBe(0);
diff --git a/tests/segmented-control.test.ts b/tests/segmented-control.test.ts
index 300f7d7..7c21d09 100644
--- a/tests/segmented-control.test.ts
+++ b/tests/segmented-control.test.ts
@@ -1,9 +1,11 @@
 // DOM environment is provided by tests/setup.ts (preloaded via bunfig.toml)
 import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
+import { resetLocale, setLocale } from '../src/i18n/index.js';
 import { waitForFrame } from './helpers.ts';
 
-const win = (globalThis as unknown as Record<string, unknown>)['window'] as
-  Window & typeof globalThis;
+const win = (globalThis as unknown as Record<string, unknown>)[
+  'window'
+] as Window & typeof globalThis;
 const doc = win.document as unknown as Document;
 
 describe('BqSegmentedControl', () => {
@@ -13,6 +15,7 @@ describe('BqSegmentedControl', () => {
 
   afterEach(() => {
     doc.body.innerHTML = '';
+    resetLocale();
   });
 
   const createControl = (
@@ -98,7 +101,8 @@ describe('BqSegmentedControl', () => {
   it('should not register a host keydown listener', async () => {
     let hostKeydownRegistrations = 0;
     createControl(({ el: control }) => {
-      const originalHostAddEventListener = control.addEventListener.bind(control);
+      const originalHostAddEventListener =
+        control.addEventListener.bind(control);
       control.addEventListener = ((type, listener, options) => {
         if (type === 'keydown') hostKeydownRegistrations += 1;
         return originalHostAddEventListener(type, listener, options);
@@ -152,4 +156,26 @@ describe('BqSegmentedControl', () => {
     const group = el.shadowRoot?.querySelector('[role="radiogroup"]');
     expect(group?.getAttribute('aria-label')).toBe('Display density');
   });
+
+  it('should fall back to the localized default label when no label props are provided', async () => {
+    setLocale({ segmentedControl: { defaultLabel: 'Optionen' } });
+
+    const el = doc.createElement('bq-segmented-control');
+
+    const compact = doc.createElement('button');
+    compact.setAttribute('value', 'compact');
+    compact.textContent = 'Compact';
+
+    const comfortable = doc.createElement('button');
+    comfortable.setAttribute('value', 'comfortable');
+    comfortable.textContent = 'Comfortable';
+
+    el.append(compact, comfortable);
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const group = el.shadowRoot?.querySelector('[role="radiogroup"]');
+    expect(group?.getAttribute('aria-label')).toBe('Optionen');
+  });
 });
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index db195e1..2654da0 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -92,6 +92,32 @@ describe('BqTabs', () => {
     const inactive = el.shadowRoot?.querySelector('[data-tab-id="y"]');
     expect(inactive?.getAttribute('tabindex')).toBe('-1');
   });
+
+  it('should link tab buttons to generated panels and keep only the active panel tabbable', async () => {
+    const el = doc.createElement('bq-tabs');
+    el.setAttribute('active-tab', 'two');
+    el.innerHTML = `
+      <div data-tab-item id="one" label="One"></div>
+      <div data-tab-item id="two" label="Two"></div>
+      <div data-tab="one">Panel one</div>
+      <div data-tab="two">Panel two</div>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const tabTwo = el.shadowRoot?.querySelector('[data-tab-id="two"]');
+    const panelOne = el.querySelector('[data-tab="one"]');
+    const panelTwo = el.querySelector('[data-tab="two"]');
+
+    expect(tabTwo?.getAttribute('aria-controls')).toBe('panel-two');
+    expect(panelOne?.id).toBe('panel-one');
+    expect(panelOne?.getAttribute('tabindex')).toBe('-1');
+    expect(panelOne?.getAttribute('aria-hidden')).toBe('true');
+    expect(panelTwo?.id).toBe('panel-two');
+    expect(panelTwo?.getAttribute('tabindex')).toBe('0');
+    expect(panelTwo?.getAttribute('aria-hidden')).toBe('false');
+  });
 });
 
 describe('BqTooltip', () => {

From 58a5d7c571c402ad51bff224413d517341c9e509 Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:25:39 +0100
Subject: [PATCH 05/17] chore: bump version to 1.0.0 and update dependencies

---
 .github/workflows/npm-publish.yml |   6 +-
 .github/workflows/test.yml        |   4 +-
 bun.lock                          | 122 +++++++++++-------------------
 package.json                      |  18 ++---
 4 files changed, 58 insertions(+), 92 deletions(-)

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index bdb95f7..c361f83 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.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)
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3eaa727..7af02ef 100644
--- a/.github/workflows/test.yml
+++ b/.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
diff --git a/bun.lock b/bun.lock
index a4c4c68..14df71e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -169,41 +169,39 @@
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
 
-    "@oxc-project/runtime": ["@oxc-project/runtime@0.115.0", "", {}, "sha512-Rg8Wlt5dCbXhQnsXPrkOjL1DTSvXLgb2R/KYfnf1/K+R0k6UMLEmbQXPM+kwrWqSmWA2t0B1EtHy2/3zikQpvQ=="],
+    "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
 
-    "@oxc-project/types": ["@oxc-project/types@0.115.0", "", {}, "sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw=="],
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.11", "", { "os": "android", "cpu": "arm64" }, "sha512-SJ+/g+xNnOh6NqYxD0V3uVN4W3VfnrGsC9/hoglicgTNfABFG9JjISvkkU0dNY84MNHLWyOgxP9v9Y9pX4S7+A=="],
 
-    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.9", "", { "os": "android", "cpu": "arm64" }, "sha512-lcJL0bN5hpgJfSIz/8PIf02irmyL43P+j1pTCfbD1DbLkmGRuFIA4DD3B3ZOvGqG0XiVvRznbKtN0COQVaKUTg=="],
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.11", "", { "os": "darwin", "cpu": "arm64" }, "sha512-7WQgR8SfOPwmDZGFkThUvsmd/nwAWv91oCO4I5LS7RKrssPZmOt7jONN0cW17ydGC1n/+puol1IpoieKqQidmg=="],
 
-    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.9", "", { "os": "darwin", "cpu": "arm64" }, "sha512-J7Zk3kLYFsLtuH6U+F4pS2sYVzac0qkjcO5QxHS7OS7yZu2LRs+IXo+uvJ/mvpyUljDJ3LROZPoQfgBIpCMhdQ=="],
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.11", "", { "os": "darwin", "cpu": "x64" }, "sha512-39Ks6UvIHq4rEogIfQBoBRusj0Q0nPVWIvqmwBLaT6aqQGIakHdESBVOPRRLacy4WwUPIx4ZKzfZ9PMW+IeyUQ=="],
 
-    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.9", "", { "os": "darwin", "cpu": "x64" }, "sha512-iwtmmghy8nhfRGeNAIltcNXzD0QMNaaA5U/NyZc1Ia4bxrzFByNMDoppoC+hl7cDiUq5/1CnFthpT9n+UtfFyg=="],
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.11", "", { "os": "freebsd", "cpu": "x64" }, "sha512-jfsm0ZHfhiqrvWjJAmzsqiIFPz5e7mAoCOPBNTcNgkiid/LaFKiq92+0ojH+nmJmKYkre4t71BWXUZDNp7vsag=="],
 
-    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.9", "", { "os": "freebsd", "cpu": "x64" }, "sha512-DLFYI78SCiZr5VvdEplsVC2Vx53lnA4/Ga5C65iyldMVaErr86aiqCoNBLl92PXPfDtUYjUh+xFFor40ueNs4Q=="],
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.11", "", { "os": "linux", "cpu": "arm" }, "sha512-zjQaUtSyq1nVe3nxmlSCuR96T1LPlpvmJ0SZy0WJFEsV4kFbXcq2u68L4E6O0XeFj4aex9bEauqjW8UQBeAvfQ=="],
 
-    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.9", "", { "os": "linux", "cpu": "arm" }, "sha512-CsjTmTwd0Hri6iTw/DRMK7kOZ7FwAkrO4h8YWKoX/kcj833e4coqo2wzIFywtch/8Eb5enQ/lwLM7w6JX1W5RQ=="],
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-WMW1yE6IOnehTcFE9eipFkm3XN63zypWlrJQ2iF7NrQ9b2LDRjumFoOGJE8RJJTJCTBAdmLMnJ8uVitACUUo1Q=="],
 
-    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-2x9O2JbSPxpxMDhP9Z74mahAStibTlrBMW0520+epJH5sac7/LwZW5Bmg/E6CXuEF53JJFW509uP+lSedaUNxg=="],
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-jfndI9tsfm4APzjNt6QdBkYwre5lRPUgHeDHoI7ydKUuJvz3lZeCfMsI56BZj+7BYqiKsJm7cfd/6KYV7ubrBg=="],
 
-    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-JA1QRW31ogheAIRhIg9tjMfsYbglXXYGNPLdPEYrwFxdbkQCAzvpSCSHCDWNl4hTtrol8WeboCSEpjdZK8qrCg=="],
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.11", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ZlFgw46NOAGMgcdvdYwAGu2Q+SLFA9LzbJLW+iyMOJyhj5wk6P3KEE9Gct4xWwSzFoPI7JCdYmYMzVtlgQ+zfw=="],
 
-    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.9", "", { "os": "linux", "cpu": "ppc64" }, "sha512-aOKU9dJheda8Kj8Y3w9gnt9QFOO+qKPAl8SWd7JPHP+Cu0EuDAE5wokQubLzIDQWg2myXq2XhTpOVS07qqvT+w=="],
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.11", "", { "os": "linux", "cpu": "s390x" }, "sha512-hIOYmuT6ofM4K04XAZd3OzMySEO4K0/nc9+jmNcxNAxRi6c5UWpqfw3KMFV4MVFWL+jQsSh+bGw2VqmaPMTLyw=="],
 
-    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.9", "", { "os": "linux", "cpu": "s390x" }, "sha512-OalO94fqj7IWRn3VdXWty75jC5dk4C197AWEuMhIpvVv2lw9fiPhud0+bW2ctCxb3YoBZor71QHbY+9/WToadA=="],
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.11", "", { "os": "linux", "cpu": "x64" }, "sha512-qXBQQO9OvkjjQPLdUVr7Nr2t3QTZI7s4KZtfw7HzBgjbmAPSFwSv4rmET9lLSgq3rH/ndA3ngv3Qb8l2njoPNA=="],
 
-    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.9", "", { "os": "linux", "cpu": "x64" }, "sha512-cVEl1vZtBsBZna3YMjGXNvnYYrOJ7RzuWvZU0ffvJUexWkukMaDuGhUXn0rjnV0ptzGVkvc+vW9Yqy6h8YX4pg=="],
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.11", "", { "os": "linux", "cpu": "x64" }, "sha512-/tpFfoSTzUkH9LPY+cYbqZBDyyX62w5fICq9qzsHLL8uTI6BHip3Q9Uzft0wylk/i8OOwKik8OxW+QAhDmzwmg=="],
 
-    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.9", "", { "os": "linux", "cpu": "x64" }, "sha512-UzYnKCIIc4heAKgI4PZ3dfBGUZefGCJ1TPDuLHoCzgrMYPb5Rv6TLFuYtyM4rWyHM7hymNdsg5ik2C+UD9VDbA=="],
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.11", "", { "os": "none", "cpu": "arm64" }, "sha512-mcp3Rio2w72IvdZG0oQ4bM2c2oumtwHfUfKncUM6zGgz0KgPz4YmDPQfnXEiY5t3+KD/i8HG2rOB/LxdmieK2g=="],
 
-    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.9", "", { "os": "none", "cpu": "arm64" }, "sha512-+6zoiF+RRyf5cdlFQP7nm58mq7+/2PFaY2DNQeD4B87N36JzfF/l9mdBkkmTvSYcYPE8tMh/o3cRlsx1ldLfog=="],
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.11", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-LXk5Hii1Ph9asuGRjBuz8TUxdc1lWzB7nyfdoRgI0WGPZKmCxvlKk8KfYysqtr4MfGElu/f/pEQRh8fcEgkrWw=="],
 
-    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.9", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-rgFN6sA/dyebil3YTlL2evvi/M+ivhfnyxec7AccTpRPccno/rPoNlqybEZQBkcbZu8Hy+eqNJCqfBR8P7Pg8g=="],
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.11", "", { "os": "win32", "cpu": "arm64" }, "sha512-dDwf5otnx0XgRY1yqxOC4ITizcdzS/8cQ3goOWv3jFAo4F+xQYni+hnMuO6+LssHHdJW7+OCVL3CoU4ycnh35Q=="],
 
-    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.9", "", { "os": "win32", "cpu": "arm64" }, "sha512-lHVNUG/8nlF1IQk1C0Ci574qKYyty2goMiPlRqkC5R+3LkXDkL5Dhx8ytbxq35m+pkHVIvIxviD+TWLdfeuadA=="],
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.11", "", { "os": "win32", "cpu": "x64" }, "sha512-LN4/skhSggybX71ews7dAj6r2geaMJfm3kMbK2KhFMg9B10AZXnKoLCVVgzhMHL0S+aKtr4p8QbAW8k+w95bAA=="],
 
-    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.9", "", { "os": "win32", "cpu": "x64" }, "sha512-G0oA4+w1iY5AGi5HcDTxWsoxF509hrFIPB2rduV5aDqS9FtDg1CAfa7V34qImbjfhIcA8C+RekocJZA96EarwQ=="],
-
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.9", "", {}, "sha512-w6oiRWgEBl04QkFZgmW+jnU1EC9b57Oihi2ot3HNWIQRqgHp5PnYDia5iZ5FF7rpa4EQdiqMDXjlqKGXBhsoXw=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.11", "", {}, "sha512-xQO9vbwBecJRv9EUcQ/y0dzSTJgA7Q6UVN7xp6B81+tBGSLVAK03yJ9NkJaUA7JFD91kbjxRSC/mDnmvXzbHoQ=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
 
@@ -283,51 +281,51 @@
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
-    "@storybook/addon-docs": ["@storybook/addon-docs@10.2.19", "", { "dependencies": { "@mdx-js/react": "^3.0.0", "@storybook/csf-plugin": "10.2.19", "@storybook/icons": "^2.0.1", "@storybook/react-dom-shim": "10.2.19", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.2.19" } }, "sha512-tXugthdzjX5AkGWDSP4pnRgA/CWlOaEKp/+y9JOGXHLQmm1GHjW+4brNvNkKbjBl06LALXwlcTOyU4lyVRDLAw=="],
+    "@storybook/addon-docs": ["@storybook/addon-docs@10.3.3", "", { "dependencies": { "@mdx-js/react": "^3.0.0", "@storybook/csf-plugin": "10.3.3", "@storybook/icons": "^2.0.1", "@storybook/react-dom-shim": "10.3.3", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.3.3" } }, "sha512-trJQTpOtuOEuNv1Rn8X2Sopp5hSPpb0u0soEJ71BZAbxe4d2Y1d/1MYcxBdRKwncum6sCTsnxTpqQ/qvSJKlTQ=="],
 
-    "@storybook/builder-vite": ["@storybook/builder-vite@10.2.19", "", { "dependencies": { "@storybook/csf-plugin": "10.2.19", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.2.19", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-a59xALzM9GeYh6p+wzAeBbDyIe+qyrC4nxS3QNzb5i2ZOhrq1iIpvnDaOWe80NC8mV3IlqUEGY8Uawkf//1Rmg=="],
+    "@storybook/builder-vite": ["@storybook/builder-vite@10.3.3", "", { "dependencies": { "@storybook/csf-plugin": "10.3.3", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.3.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-awspKCTZvXyeV3KabL0id62mFbxR5u/5yyGQultwCiSb2/yVgBfip2MAqLyS850pvTiB6QFVM9deOyd2/G/bEA=="],
 
-    "@storybook/csf-plugin": ["@storybook/csf-plugin@10.2.19", "", { "dependencies": { "unplugin": "^2.3.5" }, "peerDependencies": { "esbuild": "*", "rollup": "*", "storybook": "^10.2.19", "vite": "*", "webpack": "*" }, "optionalPeers": ["esbuild", "rollup", "vite", "webpack"] }, "sha512-BpjYIOdyQn/Rm6MjUAc5Gl8HlARZrskD/OhUNShiOh2fznb523dHjiE5mbU1kKM/+L1uvRlEqqih40rTx+xCrg=="],
+    "@storybook/csf-plugin": ["@storybook/csf-plugin@10.3.3", "", { "dependencies": { "unplugin": "^2.3.5" }, "peerDependencies": { "esbuild": "*", "rollup": "*", "storybook": "^10.3.3", "vite": "*", "webpack": "*" }, "optionalPeers": ["esbuild", "rollup", "vite", "webpack"] }, "sha512-Utlh7zubm+4iOzBBfzLW4F4vD99UBtl2Do4edlzK2F7krQIcFvR2ontjAE8S1FQVLZAC3WHalCOS+Ch8zf3knA=="],
 
     "@storybook/global": ["@storybook/global@5.0.0", "", {}, "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="],
 
     "@storybook/icons": ["@storybook/icons@2.0.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-/smVjw88yK3CKsiuR71vNgWQ9+NuY2L+e8X7IMrFjexjm6ZR8ULrV2DRkTA61aV6ryefslzHEGDInGpnNeIocg=="],
 
-    "@storybook/react-dom-shim": ["@storybook/react-dom-shim@10.2.19", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.2.19" } }, "sha512-BXCEfBGVBRYBTYeBeH/PJsy0Bq5MERe/HiaylR+ah/XrvIr2Z9bkne1J8yYiXCjiyq5HQa7Bj11roz0+vyUaEw=="],
+    "@storybook/react-dom-shim": ["@storybook/react-dom-shim@10.3.3", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.3.3" } }, "sha512-lkhuh4G3UTreU9M3Iz5Dt32c6U+l/4XuvqLtbe1sDHENZH6aPj7y0b5FwnfHyvuTvYRhtbo29xZrF5Bp9kCC0w=="],
 
-    "@storybook/web-components": ["@storybook/web-components@10.2.19", "", { "dependencies": { "@storybook/global": "^5.0.0", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0" }, "peerDependencies": { "lit": "^2.0.0 || ^3.0.0", "storybook": "^10.2.19" } }, "sha512-EIsOxi9hxney//ctw4/UvsSRSc8kmWlLRPwZBEs3cPgOenejtFPmt7cmC9JF86g7JOB/gsYJsPBLFIYEz220Dg=="],
+    "@storybook/web-components": ["@storybook/web-components@10.3.3", "", { "dependencies": { "@storybook/global": "^5.0.0", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0" }, "peerDependencies": { "lit": "^2.0.0 || ^3.0.0", "storybook": "^10.3.3" } }, "sha512-PShIqrNyJpUOZK13Heha3R24+SwN4UcxOWqSYOad4hcjp3OL6NVBhg7swXFnGfvW2vGmdfIGFlV4FpKMSi5eKQ=="],
 
-    "@storybook/web-components-vite": ["@storybook/web-components-vite@10.2.19", "", { "dependencies": { "@storybook/builder-vite": "10.2.19", "@storybook/web-components": "10.2.19" }, "peerDependencies": { "storybook": "^10.2.19" } }, "sha512-aq9Dm5YlglprMExaXxabck0apyLpd+Uv8apw4VEytCqSkWz+D54E+8QPAbOiGmN8XSEwcUgr7ANWw1+XJn10Lw=="],
+    "@storybook/web-components-vite": ["@storybook/web-components-vite@10.3.3", "", { "dependencies": { "@storybook/builder-vite": "10.3.3", "@storybook/web-components": "10.3.3" }, "peerDependencies": { "storybook": "^10.3.3" } }, "sha512-67pfcDuQFIs7sdkiCE/PWJMaf3oab1TLDhaApdCmnUMC3BBTjc0M69UX/t1OimFFy77to0lvifhaYAQiLD03zg=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.2.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.31.1", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.1" } }, "sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.2.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.2" } }, "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.1", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.1", "@tailwindcss/oxide-darwin-arm64": "4.2.1", "@tailwindcss/oxide-darwin-x64": "4.2.1", "@tailwindcss/oxide-freebsd-x64": "4.2.1", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.1", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.1", "@tailwindcss/oxide-linux-arm64-musl": "4.2.1", "@tailwindcss/oxide-linux-x64-gnu": "4.2.1", "@tailwindcss/oxide-linux-x64-musl": "4.2.1", "@tailwindcss/oxide-wasm32-wasi": "4.2.1", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.1", "@tailwindcss/oxide-win32-x64-msvc": "4.2.1" } }, "sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.2", "@tailwindcss/oxide-darwin-arm64": "4.2.2", "@tailwindcss/oxide-darwin-x64": "4.2.2", "@tailwindcss/oxide-freebsd-x64": "4.2.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2", "@tailwindcss/oxide-linux-arm64-musl": "4.2.2", "@tailwindcss/oxide-linux-x64-gnu": "4.2.2", "@tailwindcss/oxide-linux-x64-musl": "4.2.2", "@tailwindcss/oxide-wasm32-wasi": "4.2.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2", "@tailwindcss/oxide-win32-x64-msvc": "4.2.2" } }, "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.1", "", { "os": "android", "cpu": "arm64" }, "sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.2", "", { "os": "android", "cpu": "arm64" }, "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1", "", { "os": "linux", "cpu": "arm" }, "sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2", "", { "os": "linux", "cpu": "arm" }, "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.1", "", { "os": "linux", "cpu": "x64" }, "sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.1", "", { "os": "linux", "cpu": "x64" }, "sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.1", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.2", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.1", "", { "os": "win32", "cpu": "x64" }, "sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.2", "", { "os": "win32", "cpu": "x64" }, "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.1", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "postcss": "^8.5.6", "tailwindcss": "4.2.1" } }, "sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.2", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "postcss": "^8.5.6", "tailwindcss": "4.2.2" } }, "sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ=="],
 
     "@testing-library/dom": ["@testing-library/dom@10.4.1", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "picocolors": "1.1.1", "pretty-format": "^27.0.2" } }, "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg=="],
 
@@ -463,7 +461,7 @@
 
     "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
 
-    "bun-types": ["bun-types@1.3.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-tcpfCCl6XWo6nCVnpcVrxQ+9AYN1iqMIzgrSKYMB/fjLtV2eyAVEg7AxQJuCq/26R6HpKWykQXuSOq/21RYcbg=="],
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
 
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
@@ -549,7 +547,7 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
-    "happy-dom": ["happy-dom@20.8.4", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.18.3" } }, "sha512-GKhjq4OQCYB4VLFBzv8mmccUadwlAusOZOI7hC1D9xDIT5HhzkJK17c4el2f6R6C715P9xB4uiMxeKUa2nHMwQ=="],
+    "happy-dom": ["happy-dom@20.8.7", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.18.3" } }, "sha512-7wfBi+UqulQlyLcis+9a+hTK0A/fMO4QKP6w6J9HnadXVkRdOvGf/N5G4XVpfgCYfnY7oKazlOSdWmsfatNSLQ=="],
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
 
@@ -719,7 +717,7 @@
 
     "rfdc": ["rfdc@1.4.1", "", {}, "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="],
 
-    "rolldown": ["rolldown@1.0.0-rc.9", "", { "dependencies": { "@oxc-project/types": "=0.115.0", "@rolldown/pluginutils": "1.0.0-rc.9" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.9", "@rolldown/binding-darwin-arm64": "1.0.0-rc.9", "@rolldown/binding-darwin-x64": "1.0.0-rc.9", "@rolldown/binding-freebsd-x64": "1.0.0-rc.9", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.9", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.9", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.9", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.9", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.9", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.9", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.9", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.9", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.9", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.9", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.9" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-9EbgWge7ZH+yqb4d2EnELAntgPTWbfL8ajiTW+SyhJEC4qhBbkCKbqFV4Ge4zmu5ziQuVbWxb/XwLZ+RIO7E8Q=="],
+    "rolldown": ["rolldown@1.0.0-rc.11", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.11" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.11", "@rolldown/binding-darwin-arm64": "1.0.0-rc.11", "@rolldown/binding-darwin-x64": "1.0.0-rc.11", "@rolldown/binding-freebsd-x64": "1.0.0-rc.11", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.11", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.11", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.11", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.11", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.11", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.11", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.11", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.11", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.11", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.11", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.11" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-NRjoKMusSjfRbSYiH3VSumlkgFe7kYAa3pzVOsVYVFY3zb5d7nS+a3KGQ7hJKXuYWbzJKPVQ9Wxq2UvyK+ENpw=="],
 
     "rollup": ["rollup@4.59.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.59.0", "@rollup/rollup-android-arm64": "4.59.0", "@rollup/rollup-darwin-arm64": "4.59.0", "@rollup/rollup-darwin-x64": "4.59.0", "@rollup/rollup-freebsd-arm64": "4.59.0", "@rollup/rollup-freebsd-x64": "4.59.0", "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", "@rollup/rollup-linux-arm-musleabihf": "4.59.0", "@rollup/rollup-linux-arm64-gnu": "4.59.0", "@rollup/rollup-linux-arm64-musl": "4.59.0", "@rollup/rollup-linux-loong64-gnu": "4.59.0", "@rollup/rollup-linux-loong64-musl": "4.59.0", "@rollup/rollup-linux-ppc64-gnu": "4.59.0", "@rollup/rollup-linux-ppc64-musl": "4.59.0", "@rollup/rollup-linux-riscv64-gnu": "4.59.0", "@rollup/rollup-linux-riscv64-musl": "4.59.0", "@rollup/rollup-linux-s390x-gnu": "4.59.0", "@rollup/rollup-linux-x64-gnu": "4.59.0", "@rollup/rollup-linux-x64-musl": "4.59.0", "@rollup/rollup-openbsd-x64": "4.59.0", "@rollup/rollup-openharmony-arm64": "4.59.0", "@rollup/rollup-win32-arm64-msvc": "4.59.0", "@rollup/rollup-win32-ia32-msvc": "4.59.0", "@rollup/rollup-win32-x64-gnu": "4.59.0", "@rollup/rollup-win32-x64-msvc": "4.59.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg=="],
 
@@ -743,7 +741,7 @@
 
     "sprintf-js": ["sprintf-js@1.0.3", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
 
-    "storybook": ["storybook@10.2.19", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.1", "@testing-library/jest-dom": "^6.6.3", "@testing-library/user-event": "^14.6.1", "@vitest/expect": "3.2.4", "@vitest/spy": "3.2.4", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0", "open": "^10.2.0", "recast": "^0.23.5", "semver": "^7.7.3", "use-sync-external-store": "^1.5.0", "ws": "^8.18.0" }, "peerDependencies": { "prettier": "^2 || ^3" }, "optionalPeers": ["prettier"], "bin": "./dist/bin/dispatcher.js" }, "sha512-UUm5eGSm6BLhkcFP0WbxkmAHJZfVN2ViLpIZOqiIPS++q32VYn+CLFC0lrTYTDqYvaG7i4BK4uowXYujzE4NdQ=="],
+    "storybook": ["storybook@10.3.3", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/user-event": "^14.6.1", "@vitest/expect": "3.2.4", "@vitest/spy": "3.2.4", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0", "open": "^10.2.0", "recast": "^0.23.5", "semver": "^7.7.3", "use-sync-external-store": "^1.5.0", "ws": "^8.18.0" }, "peerDependencies": { "prettier": "^2 || ^3" }, "optionalPeers": ["prettier"], "bin": "./dist/bin/dispatcher.js" }, "sha512-tMoRAts9EVqf+mEMPLC6z1DPyHbcPe+CV1MhLN55IKsl0HxNjvVGK44rVPSePbltPE6vIsn4bdRj6CCUt8SJwQ=="],
 
     "string-argv": ["string-argv@0.3.2", "", {}, "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q=="],
 
@@ -761,7 +759,7 @@
 
     "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
 
-    "tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="],
+    "tailwindcss": ["tailwindcss@4.2.2", "", {}, "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="],
 
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
 
@@ -807,7 +805,7 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
-    "vite": ["vite@8.0.0", "", { "dependencies": { "@oxc-project/runtime": "0.115.0", "lightningcss": "^1.32.0", "picomatch": "^4.0.3", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.9", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.0.0-alpha.31", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-fPGaRNj9Zytaf8LEiBhY7Z6ijnFKdzU/+mL8EFBaKr7Vw1/FWcTBAMW0wLPJAGMPX38ZPVCVgLceWiEqeoqL2Q=="],
+    "vite": ["vite@8.0.2", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.3", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.11", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-1gFhNi+bHhRE/qKZOJXACm6tX4bA3Isy9KuKF15AgSRuRazNBOJfdDemPBU16/mpMxApDPrWvZ08DcLPEoRnuA=="],
 
     "vite-plugin-dts": ["vite-plugin-dts@4.5.4", "", { "dependencies": { "@microsoft/api-extractor": "^7.50.1", "@rollup/pluginutils": "^5.1.4", "@volar/typescript": "^2.4.11", "@vue/language-core": "2.2.0", "compare-versions": "^6.1.1", "debug": "^4.4.0", "kolorist": "^1.8.0", "local-pkg": "^1.0.0", "magic-string": "^0.30.17" }, "peerDependencies": { "typescript": "*", "vite": "*" }, "optionalPeers": ["vite"] }, "sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg=="],
 
@@ -835,8 +833,6 @@
 
     "@rushstack/node-core-library/semver": ["semver@7.5.4", "", { "dependencies": { "lru-cache": "^6.0.0" }, "bin": { "semver": "bin/semver.js" } }, "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA=="],
 
-    "@tailwindcss/node/lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],
-
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.9.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.9.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-QN75eB0IH2ywSpRpNddCRfQIhmJYBCJ1x5Lb3IscKAL8bMnVAKnRg8dCoXbHzVLLH7P38N2Z3mtulB7W0J0FKw=="],
@@ -857,44 +853,14 @@
 
     "@vue/language-core/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "bun-types/@types/node": ["@types/node@20.19.37", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw=="],
-
-    "happy-dom/@types/node": ["@types/node@20.19.37", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw=="],
-
     "mlly/pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
 
     "vitepress/vite": ["vite@5.4.21", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
 
-    "@tailwindcss/node/lightningcss/lightningcss-android-arm64": ["lightningcss-android-arm64@1.31.1", "", { "os": "android", "cpu": "arm64" }, "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.31.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.31.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.31.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.31.1", "", { "os": "linux", "cpu": "arm" }, "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.31.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.31.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.31.1", "", { "os": "linux", "cpu": "x64" }, "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.31.1", "", { "os": "linux", "cpu": "x64" }, "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.31.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w=="],
-
-    "@tailwindcss/node/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.31.1", "", { "os": "win32", "cpu": "x64" }, "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw=="],
-
     "@types/ws/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
-    "bun-types/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
-
-    "happy-dom/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
-
     "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
     "@vue/language-core/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
diff --git a/package.json b/package.json
index 05f295e..d3ef944 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bquery/ui",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Production-grade web component library for the bQuery project",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -71,18 +71,18 @@
   },
   "devDependencies": {
     "@bquery/bquery": "^1.6.0",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/web-components-vite": "^10.2.19",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/web-components-vite": "^10.3.3",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/node": "^25.5.0",
     "autoprefixer": "^10.4.27",
-    "bun-types": "^1.3.10",
-    "happy-dom": "^20.8.4",
+    "bun-types": "^1.3.11",
+    "happy-dom": "^20.8.7",
     "postcss": "^8.5.8",
-    "storybook": "^10.2.19",
-    "tailwindcss": "^4.2.1",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^8.0.0",
+    "vite": "^8.0.2",
     "vite-plugin-dts": "^4.5.4",
     "vitepress": "^1.6.4"
   }

From 98d1bb2802643656e2b1bfb1d0c1f39d5e5224a7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:03:21 +0000
Subject: [PATCH 06/17] Initial plan


From c68fc8df65f43d04103cf74162b89bb5f14a18c5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:25:49 +0000
Subject: [PATCH 07/17] fix review feedback for slider tabs and radio docs

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
---
 docs/components/radio.md          |  2 +-
 src/components/slider/BqSlider.ts |  6 ++++
 src/components/tabs/BqTabs.ts     | 59 ++++++++++++++++++++++---------
 tests/slider-pagination.test.ts   | 18 ++++++++++
 tests/tabs-tooltip.test.ts        | 38 ++++++++++++++++++++
 5 files changed, 105 insertions(+), 18 deletions(-)

diff --git a/docs/components/radio.md b/docs/components/radio.md
index f7048d7..edb36a0 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -75,4 +75,4 @@ The component creates a hidden input proxy for native `<form>` submission. The p
 
 - 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 via `aria-required`.
+- 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.
diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 62710e5..09d5769 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -55,6 +55,10 @@ const definition: ComponentDefinition<BqSliderProps> = {
   `,
   connected() {
     const self = this;
+    const syncInputAccessibility = (input: HTMLInputElement, value: number) => {
+      input.setAttribute('aria-valuenow', String(value));
+      input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
+    };
 
     // Form proxy for native <form> participation
     const name = self.getAttribute('name') ?? '';
@@ -69,6 +73,7 @@ const definition: ComponentDefinition<BqSliderProps> = {
       const v = Number(input.value);
       // Update form proxy and value display directly without re-rendering (prevents jank during drag)
       proxy.setValue(String(v));
+      syncInputAccessibility(input, v);
       const valueSpan = self.shadowRoot?.querySelector('.value');
       if (valueSpan) valueSpan.textContent = String(v);
       self.dispatchEvent(
@@ -86,6 +91,7 @@ const definition: ComponentDefinition<BqSliderProps> = {
       // Commit value to attribute on change (drag end) — triggers one clean re-render
       self.setAttribute('value', String(v));
       proxy.setValue(String(v));
+      syncInputAccessibility(input, v);
       self.dispatchEvent(
         new CustomEvent('bq-change', {
           detail: { value: v },
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index be05075..4f5882b 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -14,8 +14,19 @@ import { getBaseStyles } from '../../utils/styles.js';
 
 type BqTabsProps = { 'active-tab': string; variant: string };
 
-function getPanelId(tabId: string): string {
-  return `panel-${tabId}`;
+function getAriaIdPart(tabId: string): string | null {
+  const trimmed = tabId.trim();
+  return trimmed ? encodeURIComponent(trimmed) : null;
+}
+
+function getTabButtonId(tabId: string): string | null {
+  const ariaIdPart = getAriaIdPart(tabId);
+  return ariaIdPart ? `tab-${ariaIdPart}` : null;
+}
+
+function getPanelId(tabId: string): string | null {
+  const ariaIdPart = getAriaIdPart(tabId);
+  return ariaIdPart ? `panel-${ariaIdPart}` : null;
 }
 
 const definition: ComponentDefinition<BqTabsProps> = {
@@ -155,19 +166,31 @@ const definition: ComponentDefinition<BqTabsProps> = {
       const tabId = panel.getAttribute('data-tab') ?? '';
       const isActive = tabId === active;
       const panelId = panel.id || getPanelId(tabId);
+      const button = Array.from(
+        this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ?? []
+      ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
+      const labelledBy =
+        button && button.id ? button.id : button ? getTabButtonId(tabId) : null;
 
-      panel.id = panelId;
+      if (panelId) {
+        panel.id = panelId;
+      }
       panel.hidden = !isActive;
       panel.setAttribute('role', 'tabpanel');
       panel.setAttribute('tabindex', isActive ? '0' : '-1');
-      panel.setAttribute('aria-labelledby', `tab-${tabId}`);
+      if (labelledBy) {
+        panel.setAttribute('aria-labelledby', labelledBy);
+      } else {
+        panel.removeAttribute('aria-labelledby');
+      }
       panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
-
-      const button = Array.from(
-        this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ??
-          []
-      ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
-      button?.setAttribute('aria-controls', panelId);
+      if (button) {
+        if (panelId) {
+          button.setAttribute('aria-controls', panelId);
+        } else {
+          button.removeAttribute('aria-controls');
+        }
+      }
     });
   },
   render({ props, state }) {
@@ -177,17 +200,19 @@ const definition: ComponentDefinition<BqTabsProps> = {
         | undefined) ?? [];
     const active = props['active-tab'] || items[0]?.id || '';
     const tabsHtml = items
-      .map(
-        (tab) => `
-      <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
-        role="tab" id="tab-${escapeHtml(tab.id)}" data-tab-id="${escapeHtml(tab.id)}"
+      .map((tab) => {
+        const buttonId = getTabButtonId(tab.id);
+        const panelId = getPanelId(tab.id);
+        return `
+       <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
+        role="tab" ${buttonId ? `id="${escapeHtml(buttonId)}"` : ''} data-tab-id="${escapeHtml(tab.id)}"
         aria-selected="${tab.id === active ? 'true' : 'false'}"
-        aria-controls="${escapeHtml(getPanelId(tab.id))}"
+        ${panelId ? `aria-controls="${escapeHtml(panelId)}"` : ''}
         tabindex="${tab.id === active ? '0' : '-1'}"
         ${tab.disabled ? 'disabled aria-disabled="true"' : ''}
       >${escapeHtml(tab.label)}</button>
-    `
-      )
+    `;
+      })
       .join('');
     return html`
       <div class="tabs" part="tabs">
diff --git a/tests/slider-pagination.test.ts b/tests/slider-pagination.test.ts
index e0e592b..5e2c354 100644
--- a/tests/slider-pagination.test.ts
+++ b/tests/slider-pagination.test.ts
@@ -72,6 +72,24 @@ describe('BqSlider', () => {
     expect(input?.getAttribute('aria-valuetext')).toBe('Value: 50');
   });
 
+  it('should update live value and ARIA state during input without re-rendering', () => {
+    const el = doc.createElement('bq-slider');
+    el.setAttribute('show-value', '');
+    el.setAttribute('value', '40');
+    doc.body.appendChild(el);
+
+    const input = el.shadowRoot?.querySelector('input') as HTMLInputElement;
+    const valueEl = el.shadowRoot?.querySelector('.value');
+
+    input.value = '65';
+    input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+
+    expect(el.getAttribute('value')).toBe('40');
+    expect(valueEl?.textContent).toBe('65');
+    expect(input.getAttribute('aria-valuenow')).toBe('65');
+    expect(input.getAttribute('aria-valuetext')).toBe('Value: 65');
+  });
+
   it('should create form proxy hidden input', () => {
     const el = doc.createElement('bq-slider');
     el.setAttribute('name', 'volume');
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index 2654da0..01b0842 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -118,6 +118,44 @@ describe('BqTabs', () => {
     expect(panelTwo?.getAttribute('tabindex')).toBe('0');
     expect(panelTwo?.getAttribute('aria-hidden')).toBe('false');
   });
+
+  it('should avoid invalid generated aria ids when a tab item has no id', async () => {
+    const el = doc.createElement('bq-tabs');
+    el.innerHTML = `
+      <div data-tab-item label="One"></div>
+      <div data-tab="one">Panel one</div>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const tab = el.shadowRoot?.querySelector('[role="tab"]');
+    const panel = el.querySelector('[data-tab="one"]');
+
+    expect(tab?.getAttribute('id')).toBeNull();
+    expect(tab?.getAttribute('aria-controls')).toBeNull();
+    expect(panel?.getAttribute('aria-labelledby')).toBeNull();
+  });
+
+  it('should generate encoded aria ids for tab values that include spaces', async () => {
+    const el = doc.createElement('bq-tabs');
+    el.setAttribute('active-tab', 'needs space');
+    el.innerHTML = `
+      <div data-tab-item id="needs space" label="Needs Space"></div>
+      <div data-tab="needs space">Panel</div>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const tab = el.shadowRoot?.querySelector('[role="tab"]');
+    const panel = el.querySelector('[data-tab="needs space"]');
+
+    expect(tab?.getAttribute('id')).toBe('tab-needs%20space');
+    expect(tab?.getAttribute('aria-controls')).toBe('panel-needs%20space');
+    expect(panel?.id).toBe('panel-needs%20space');
+    expect(panel?.getAttribute('aria-labelledby')).toBe('tab-needs%20space');
+  });
 });
 
 describe('BqTooltip', () => {

From df04bdb21abf1cbf24c42b402a1d8bbf9edeccff Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:33:00 +0000
Subject: [PATCH 08/17] refine review follow-up helpers

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
---
 src/components/slider/BqSlider.ts | 9 +++++----
 src/components/tabs/BqTabs.ts     | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 09d5769..6f6d72c 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -28,6 +28,11 @@ type BqSliderProps = {
   'show-value': boolean;
 };
 
+function syncInputAccessibility(input: HTMLInputElement, value: number): void {
+  input.setAttribute('aria-valuenow', String(value));
+  input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
+}
+
 const definition: ComponentDefinition<BqSliderProps> = {
   props: {
     value: { type: Number, default: 50 },
@@ -55,10 +60,6 @@ const definition: ComponentDefinition<BqSliderProps> = {
   `,
   connected() {
     const self = this;
-    const syncInputAccessibility = (input: HTMLInputElement, value: number) => {
-      input.setAttribute('aria-valuenow', String(value));
-      input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
-    };
 
     // Form proxy for native <form> participation
     const name = self.getAttribute('name') ?? '';
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index 4f5882b..c6cc78e 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -169,8 +169,7 @@ const definition: ComponentDefinition<BqTabsProps> = {
       const button = Array.from(
         this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ?? []
       ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
-      const labelledBy =
-        button && button.id ? button.id : button ? getTabButtonId(tabId) : null;
+      const labelledBy = button?.id || (button ? getTabButtonId(tabId) : null);
 
       if (panelId) {
         panel.id = panelId;

From 1cfabce243a04d846d683c102ad7f2d476ec1e9c Mon Sep 17 00:00:00 2001
From: JonasPfalzgraf <20913954+JosunLP@users.noreply.github.com>
Date: Tue, 24 Mar 2026 23:10:02 +0100
Subject: [PATCH 09/17] feat: enhance BqAccordion and BqTooltip with animation
 duration handling and improve tests for accessibility and behavior

---
 src/components/accordion/BqAccordion.ts | 175 ++++++++++++++++++------
 src/components/tooltip/BqTooltip.ts     |  35 +++--
 tests/accordion-enhancements.test.ts    |  94 ++++++++++++-
 tests/overlay-components.test.ts        |   2 +-
 tests/select.test.ts                    |   2 +-
 tests/tabs-tooltip.test.ts              |   2 +-
 6 files changed, 252 insertions(+), 58 deletions(-)

diff --git a/src/components/accordion/BqAccordion.ts b/src/components/accordion/BqAccordion.ts
index 1b0c0ce..92417fc 100644
--- a/src/components/accordion/BqAccordion.ts
+++ b/src/components/accordion/BqAccordion.ts
@@ -22,6 +22,42 @@ type BqAccordionProps = {
 };
 type BqAccordionState = { uid: string };
 
+const DEFAULT_SLOW_DURATION = '300ms';
+
+const parseTimeValueToMs = (value: string): number => {
+  const trimmed = value.trim();
+  if (!trimmed) return 0;
+  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed);
+  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000;
+  return Number.parseFloat(trimmed) || 0;
+};
+
+const getAnimationTimeoutMs = (el: Element): number => {
+  const view = el.ownerDocument.defaultView;
+  if (!view?.getComputedStyle) return parseTimeValueToMs(DEFAULT_SLOW_DURATION);
+
+  const styles = view.getComputedStyle(el);
+  const durations = styles.animationDuration
+    .split(',')
+    .map((value) => parseTimeValueToMs(value));
+  const delays = styles.animationDelay
+    .split(',')
+    .map((value) => parseTimeValueToMs(value));
+  const count = Math.max(durations.length, delays.length);
+
+  let longest = 0;
+  for (let i = 0; i < count; i += 1) {
+    const duration = durations[i] ?? durations[durations.length - 1] ?? 0;
+    const delay = delays[i] ?? delays[delays.length - 1] ?? 0;
+    longest = Math.max(longest, duration + delay);
+  }
+
+  if (longest > 0) return longest;
+
+  const variableDuration = styles.getPropertyValue('--bq-duration-slow');
+  return parseTimeValueToMs(variableDuration || DEFAULT_SLOW_DURATION);
+};
+
 const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
   props: {
     label: { type: String, default: '' },
@@ -54,8 +90,8 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
     :host([open]:not([data-closing])) .icon { transform: rotate(180deg); }
     .panel { display: grid; grid-template-rows: 0fr; overflow: hidden; }
     .panel-inner { overflow: hidden; min-height: 0; padding: 0 var(--bq-space-4,1rem) var(--bq-space-4,1rem); color: var(--bq-text-muted,#475569); font-size: var(--bq-font-size-sm,0.875rem); line-height: var(--bq-line-height-relaxed,1.625); }
-    :host([open]:not([data-closing])) .panel { grid-template-rows: 1fr; animation: panel-open var(--bq-duration-slow,300ms) var(--bq-easing-standard); }
-    :host([data-closing]) .panel { grid-template-rows: 1fr; animation: panel-close var(--bq-duration-slow,300ms) var(--bq-easing-standard) forwards; }
+    :host([open]:not([data-closing])) .panel { grid-template-rows: 1fr; animation: panel-open var(--bq-duration-slow,${DEFAULT_SLOW_DURATION}) var(--bq-easing-standard); }
+    :host([data-closing]) .panel { grid-template-rows: 1fr; animation: panel-close var(--bq-duration-slow,${DEFAULT_SLOW_DURATION}) var(--bq-easing-standard) forwards; }
     @keyframes panel-open { from { grid-template-rows: 0fr; } }
     @keyframes panel-close { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
     @media (prefers-reduced-motion: reduce) {
@@ -69,56 +105,87 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
       setState(k: 'uid', v: string): void;
       getState<T>(k: string): T;
     };
+
     const self = this as unknown as BQEl;
+    const record = self as unknown as Record<string, unknown>;
+
     if (!self.getState<string>('uid')) self.setState('uid', uniqueId('bq-acc'));
 
-    const ANIM_DURATION = 300;
+    const clearCloseFallback = () => {
+      const timeoutId = record['_closeTimeout'] as
+        | ReturnType<typeof setTimeout>
+        | undefined;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        delete record['_closeTimeout'];
+      }
+    };
+
+    const finishClose = () => {
+      if (!self.hasAttribute('data-closing')) return;
+      clearCloseFallback();
+      self.removeAttribute('data-closing');
+    };
 
     const handler = (e: Event) => {
-      if ((e.target as Element).closest('.trigger')) {
-        if (self.hasAttribute('disabled') || self.hasAttribute('data-closing'))
-          return;
-        const isOpen = self.hasAttribute('open');
-        if (isOpen) {
-          // Close with animation via data-closing (no re-render, CSS animation on existing DOM)
-          const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
-            '(prefers-reduced-motion: reduce)'
-          )?.matches;
-          if (reducedMotion) {
-            self.removeAttribute('open');
-            self.dispatchEvent(
-              new CustomEvent('bq-toggle', {
-                detail: { open: false },
-                bubbles: true,
-                composed: true,
-              })
-            );
-          } else {
-            self.setAttribute('data-closing', '');
-            setTimeout(() => {
-              self.removeAttribute('data-closing');
-              self.removeAttribute('open');
-              self.dispatchEvent(
-                new CustomEvent('bq-toggle', {
-                  detail: { open: false },
-                  bubbles: true,
-                  composed: true,
-                })
-              );
-            }, ANIM_DURATION);
-          }
-        } else {
-          // Open — setting open triggers re-render, CSS animation plays on new DOM
-          self.setAttribute('open', '');
+      if (!(e.target as Element).closest('.trigger')) return;
+      if (self.hasAttribute('disabled') || self.hasAttribute('data-closing')) {
+        return;
+      }
+
+      const isOpen = self.hasAttribute('open');
+      if (isOpen) {
+        // Close with animation via data-closing (no re-render, CSS animation on existing DOM)
+        const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
+          '(prefers-reduced-motion: reduce)'
+        )?.matches;
+
+        if (reducedMotion) {
+          self.removeAttribute('open');
           self.dispatchEvent(
             new CustomEvent('bq-toggle', {
-              detail: { open: true },
+              detail: { open: false },
               bubbles: true,
               composed: true,
             })
           );
+          return;
+        }
+
+        self.setAttribute('data-closing', '');
+        self.removeAttribute('open');
+        self.dispatchEvent(
+          new CustomEvent('bq-toggle', {
+            detail: { open: false },
+            bubbles: true,
+            composed: true,
+          })
+        );
+        clearCloseFallback();
+
+        const panel = self.shadowRoot?.querySelector('.panel');
+        const timeoutMs = panel ? getAnimationTimeoutMs(panel) : 0;
+
+        if (timeoutMs <= 0) {
+          finishClose();
+        } else {
+          record['_closeTimeout'] = setTimeout(
+            finishClose,
+            Math.ceil(timeoutMs) + 20
+          );
         }
+        return;
       }
+
+      // Open — setting open triggers re-render, CSS animation plays on new DOM
+      self.setAttribute('open', '');
+      self.dispatchEvent(
+        new CustomEvent('bq-toggle', {
+          detail: { open: true },
+          bubbles: true,
+          composed: true,
+        })
+      );
     };
 
     const kh = (e: Event) => {
@@ -132,18 +199,42 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
       }
     };
 
-    const s = self as unknown as Record<string, unknown>;
-    s['_handler'] = handler;
-    s['_kh'] = kh;
+    const ah = (e: Event) => {
+      const target = e.target as Element | null;
+      const animationName = (e as Event & { animationName?: string })
+        .animationName;
+
+      if (
+        !self.hasAttribute('data-closing') ||
+        !target?.classList.contains('panel') ||
+        animationName !== 'panel-close'
+      ) {
+        return;
+      }
+
+      finishClose();
+    };
+
+    record['_handler'] = handler;
+    record['_kh'] = kh;
+    record['_ah'] = ah;
+
     self.shadowRoot?.addEventListener('click', handler);
     self.shadowRoot?.addEventListener('keydown', kh);
+    self.shadowRoot?.addEventListener('animationend', ah);
   },
   disconnected() {
     const self = this as unknown as Record<string, unknown>;
     const h = self['_handler'] as EventListener | undefined;
     const kh = self['_kh'] as EventListener | undefined;
+    const ah = self['_ah'] as EventListener | undefined;
+    const closeTimeout = self['_closeTimeout'] as
+      | ReturnType<typeof setTimeout>
+      | undefined;
     if (h) this.shadowRoot?.removeEventListener('click', h);
     if (kh) this.shadowRoot?.removeEventListener('keydown', kh);
+    if (ah) this.shadowRoot?.removeEventListener('animationend', ah);
+    if (closeTimeout) clearTimeout(closeTimeout);
   },
   render({ props, state }) {
     const uid = state.uid || 'bq-acc';
diff --git a/src/components/tooltip/BqTooltip.ts b/src/components/tooltip/BqTooltip.ts
index feecea3..efcf2fb 100644
--- a/src/components/tooltip/BqTooltip.ts
+++ b/src/components/tooltip/BqTooltip.ts
@@ -68,16 +68,30 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
+    const internalState = self as unknown as Record<string, unknown>;
     if (!self.getState<string>('uid')) {
       self.setState('uid', uniqueId('bq-tooltip'));
     }
-    let timer: ReturnType<typeof setTimeout> | null = null;
+    const clearShowTimer = () => {
+      const timer = internalState['_showTimer'] as
+        | ReturnType<typeof setTimeout>
+        | null
+        | undefined;
+      if (timer) {
+        clearTimeout(timer);
+      }
+      internalState['_showTimer'] = null;
+    };
     const show = () => {
+      clearShowTimer();
       const d = parseInt(self.getAttribute('delay') ?? '200', 10);
-      timer = setTimeout(() => self.setState('visible', true), d);
+      internalState['_showTimer'] = setTimeout(() => {
+        internalState['_showTimer'] = null;
+        self.setState('visible', true);
+      }, d);
     };
     const hide = () => {
-      if (timer) clearTimeout(timer);
+      clearShowTimer();
       self.setState('visible', false);
     };
     const kh = (e: Event) => {
@@ -110,10 +124,11 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
       }
       state['_triggerElements'] = next;
     };
-    (self as unknown as Record<string, unknown>)['_show'] = show;
-    (self as unknown as Record<string, unknown>)['_hide'] = hide;
-    (self as unknown as Record<string, unknown>)['_kh'] = kh;
-    (self as unknown as Record<string, unknown>)['_syncTrigger'] = syncTrigger;
+    internalState['_show'] = show;
+    internalState['_hide'] = hide;
+    internalState['_kh'] = kh;
+    internalState['_syncTrigger'] = syncTrigger;
+    internalState['_clearShowTimer'] = clearShowTimer;
     self.addEventListener('mouseenter', show);
     self.addEventListener('mouseleave', hide);
     self.addEventListener('focusin', show);
@@ -125,7 +140,7 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
       ) as HTMLSlotElement | null;
       if (!slot) return;
       slot.addEventListener('slotchange', syncTrigger);
-      (self as unknown as Record<string, unknown>)['_slot'] = slot;
+      internalState['_slot'] = slot;
       syncTrigger();
     });
   },
@@ -136,14 +151,14 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
     const kh = self['_kh'] as EventListener;
     const slot = self['_slot'] as HTMLSlotElement | undefined;
     const syncTrigger = self['_syncTrigger'] as EventListener | undefined;
+    const clearShowTimer = self['_clearShowTimer'] as (() => void) | undefined;
     const triggerElements =
       (self['_triggerElements'] as HTMLElement[] | undefined) ?? [];
     const tooltipId =
       (this as unknown as { getState?<T>(key: string): T }).getState?.<string>(
         'uid'
       ) ?? this.id;
-    // Clear any pending show-delay timer to prevent setState on a disconnected element
-    (hide as () => void)?.();
+    clearShowTimer?.();
     this.removeEventListener('mouseenter', show);
     this.removeEventListener('mouseleave', hide);
     this.removeEventListener('focusin', show);
diff --git a/tests/accordion-enhancements.test.ts b/tests/accordion-enhancements.test.ts
index f4410f0..469cb71 100644
--- a/tests/accordion-enhancements.test.ts
+++ b/tests/accordion-enhancements.test.ts
@@ -125,11 +125,99 @@ describe('BqAccordion — accessibility improvements', () => {
 
     // data-closing should be set during animation
     expect(el.hasAttribute('data-closing')).toBe(true);
-    expect(el.hasAttribute('open')).toBe(true); // still open during animation
+    expect(el.hasAttribute('open')).toBe(false);
+
+    const triggerAfterClose = el.shadowRoot?.querySelector(
+      '.trigger'
+    ) as HTMLElement | null;
+    const panelAfterClose = el.shadowRoot?.querySelector(
+      '.panel'
+    ) as HTMLElement | null;
+    expect(triggerAfterClose?.getAttribute('aria-expanded')).toBe('false');
+    expect(panelAfterClose?.getAttribute('aria-hidden')).toBe('true');
+
+    const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement | null;
+    expect(panel).not.toBeNull();
+
+    const animationEvent = new Event('animationend', { bubbles: true });
+    Object.defineProperty(animationEvent, 'animationName', {
+      value: 'panel-close',
+    });
+    panel?.dispatchEvent(animationEvent);
 
-    // After animation completes
-    await new Promise<void>((resolve) => setTimeout(resolve, 350));
     expect(el.hasAttribute('data-closing')).toBe(false);
     expect(el.hasAttribute('open')).toBe(false);
   });
+
+  it('should dispatch bq-toggle synchronously when closing', async () => {
+    const el = doc.createElement('bq-accordion');
+    el.setAttribute('label', 'Details');
+    el.setAttribute('open', '');
+    doc.body.appendChild(el);
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
+
+    const events: boolean[] = [];
+    el.addEventListener('bq-toggle', (event) => {
+      const customEvent = event as CustomEvent<{ open: boolean }>;
+      events.push(customEvent.detail.open);
+    });
+
+    const trigger = el.shadowRoot?.querySelector(
+      '.trigger'
+    ) as HTMLElement | null;
+    trigger?.click();
+
+    expect(events).toEqual([false]);
+    expect(el.hasAttribute('open')).toBe(false);
+    expect(el.hasAttribute('data-closing')).toBe(true);
+  });
+
+  it('should derive the close fallback timeout from computed animation styles', async () => {
+    const el = doc.createElement('bq-accordion');
+    el.setAttribute('label', 'Details');
+    el.setAttribute('open', '');
+    doc.body.appendChild(el);
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
+
+    const originalGetComputedStyle = win.getComputedStyle.bind(win);
+    const mockedGetComputedStyle = ((node: Element) => {
+      const styles = originalGetComputedStyle(node);
+      if (node.classList.contains('panel')) {
+        return {
+          ...styles,
+          animationDuration: '600ms',
+          animationDelay: '0s',
+        } as CSSStyleDeclaration;
+      }
+      return styles;
+    }) as typeof win.getComputedStyle;
+
+    win.getComputedStyle = mockedGetComputedStyle;
+    (globalThis as unknown as Record<string, unknown>)['getComputedStyle'] =
+      mockedGetComputedStyle;
+
+    try {
+      const trigger = el.shadowRoot?.querySelector(
+        '.trigger'
+      ) as HTMLElement | null;
+      trigger?.click();
+
+      await new Promise<void>((resolve) => setTimeout(resolve, 350));
+      expect(el.hasAttribute('data-closing')).toBe(true);
+      expect(el.hasAttribute('open')).toBe(false);
+
+      await new Promise<void>((resolve) => setTimeout(resolve, 320));
+      expect(el.hasAttribute('data-closing')).toBe(false);
+      expect(el.hasAttribute('open')).toBe(false);
+    } finally {
+      win.getComputedStyle =
+        originalGetComputedStyle as typeof win.getComputedStyle;
+      (globalThis as unknown as Record<string, unknown>)['getComputedStyle'] =
+        originalGetComputedStyle;
+    }
+  });
 });
diff --git a/tests/overlay-components.test.ts b/tests/overlay-components.test.ts
index afeed61..37d0ea2 100644
--- a/tests/overlay-components.test.ts
+++ b/tests/overlay-components.test.ts
@@ -1,6 +1,6 @@
 // DOM environment is provided by tests/setup.ts (preloaded via bunfig.toml)
 import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
-import { waitForFrame } from './helpers.js';
+import { waitForFrame } from './helpers';
 
 const win = (globalThis as unknown as Record<string, unknown>)[
   'window'
diff --git a/tests/select.test.ts b/tests/select.test.ts
index 6f21af8..2208bd4 100644
--- a/tests/select.test.ts
+++ b/tests/select.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
-import { waitForFrame } from './helpers.js';
+import { waitForFrame } from './helpers';
 
 const win = (globalThis as unknown as Record<string, unknown>)[
   'window'
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index 01b0842..14d5c0a 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, describe, expect, it } from 'bun:test';
-import { waitForFrame } from './helpers.js';
+import { waitForFrame } from './helpers';
 
 const win = (globalThis as unknown as Record<string, unknown>)[
   'window'

From d30c858b26da80ad145c968432864696a526fa11 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 22:16:20 +0000
Subject: [PATCH 10/17] Initial plan


From fdfb0732549abcdc7e405c024a7797522a2d446a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 22:20:12 +0000
Subject: [PATCH 11/17] Fix follow-up review feedback

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/c5a423e6-fdec-4d0e-8f0b-7330cee6f36f
---
 src/components/accordion/BqAccordion.ts       | 40 ++----------------
 src/components/dialog/BqDialog.ts             | 25 ++++++++++-
 src/components/drawer/BqDrawer.ts             | 25 ++++++++++-
 .../dropdown-menu/BqDropdownMenu.ts           | 24 ++++++++++-
 src/components/pagination/BqPagination.ts     |  2 +-
 src/components/select/BqSelect.ts             |  1 -
 src/components/textarea/BqTextarea.ts         |  4 +-
 src/components/tooltip/BqTooltip.ts           |  1 +
 src/utils/dom.ts                              | 34 +++++++++++++++
 tests/dropdown-menu.test.ts                   | 26 ++++++++++++
 tests/overlay-components.test.ts              | 42 +++++++++++++++++++
 tests/slider-pagination.test.ts               | 22 ++++++++++
 tests/tabs-tooltip.test.ts                    | 13 ++++++
 13 files changed, 214 insertions(+), 45 deletions(-)

diff --git a/src/components/accordion/BqAccordion.ts b/src/components/accordion/BqAccordion.ts
index 92417fc..a717ac4 100644
--- a/src/components/accordion/BqAccordion.ts
+++ b/src/components/accordion/BqAccordion.ts
@@ -11,7 +11,7 @@
 import type { ComponentDefinition } from '@bquery/bquery/component';
 import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
-import { uniqueId } from '../../utils/dom.js';
+import { getAnimationTimeoutMs, uniqueId } from '../../utils/dom.js';
 import { getBaseStyles } from '../../utils/styles.js';
 
 type BqAccordionProps = {
@@ -24,40 +24,6 @@ type BqAccordionState = { uid: string };
 
 const DEFAULT_SLOW_DURATION = '300ms';
 
-const parseTimeValueToMs = (value: string): number => {
-  const trimmed = value.trim();
-  if (!trimmed) return 0;
-  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed);
-  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000;
-  return Number.parseFloat(trimmed) || 0;
-};
-
-const getAnimationTimeoutMs = (el: Element): number => {
-  const view = el.ownerDocument.defaultView;
-  if (!view?.getComputedStyle) return parseTimeValueToMs(DEFAULT_SLOW_DURATION);
-
-  const styles = view.getComputedStyle(el);
-  const durations = styles.animationDuration
-    .split(',')
-    .map((value) => parseTimeValueToMs(value));
-  const delays = styles.animationDelay
-    .split(',')
-    .map((value) => parseTimeValueToMs(value));
-  const count = Math.max(durations.length, delays.length);
-
-  let longest = 0;
-  for (let i = 0; i < count; i += 1) {
-    const duration = durations[i] ?? durations[durations.length - 1] ?? 0;
-    const delay = delays[i] ?? delays[delays.length - 1] ?? 0;
-    longest = Math.max(longest, duration + delay);
-  }
-
-  if (longest > 0) return longest;
-
-  const variableDuration = styles.getPropertyValue('--bq-duration-slow');
-  return parseTimeValueToMs(variableDuration || DEFAULT_SLOW_DURATION);
-};
-
 const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
   props: {
     label: { type: String, default: '' },
@@ -164,7 +130,9 @@ const definition: ComponentDefinition<BqAccordionProps, BqAccordionState> = {
         clearCloseFallback();
 
         const panel = self.shadowRoot?.querySelector('.panel');
-        const timeoutMs = panel ? getAnimationTimeoutMs(panel) : 0;
+        const timeoutMs = panel
+          ? getAnimationTimeoutMs(panel, DEFAULT_SLOW_DURATION)
+          : 0;
 
         if (timeoutMs <= 0) {
           finishClose();
diff --git a/src/components/dialog/BqDialog.ts b/src/components/dialog/BqDialog.ts
index 3488b5f..dcb794f 100644
--- a/src/components/dialog/BqDialog.ts
+++ b/src/components/dialog/BqDialog.ts
@@ -16,6 +16,7 @@ import { t } from '../../i18n/index.js';
 import type { OverlayFocusState } from '../../utils/dom.js';
 import {
   cleanupOverlayFocus,
+  getAnimationTimeoutMs,
   uniqueId,
   updateOverlayFocus,
 } from '../../utils/dom.js';
@@ -28,6 +29,7 @@ type BqDialogProps = {
   dismissible: boolean;
 };
 type BqDialogState = { titleId: string };
+const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
   props: {
@@ -87,6 +89,7 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
+    const record = self as unknown as Record<string, unknown>;
     if (!self.getState<string>('titleId'))
       self.setState('titleId', uniqueId('bq-dlg-title'));
     // Escape key handler
@@ -100,10 +103,20 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     };
     const close = () => {
       if (self.hasAttribute('data-closing')) return;
+      const clearCloseTimer = () => {
+        const closeTimer = record['_closeTimer'] as
+          | ReturnType<typeof setTimeout>
+          | undefined;
+        if (closeTimer) {
+          clearTimeout(closeTimer);
+          delete record['_closeTimer'];
+        }
+      };
       const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
         '(prefers-reduced-motion: reduce)'
       )?.matches;
       const finalize = () => {
+        clearCloseTimer();
         self.removeAttribute('data-closing');
         self.removeAttribute('open');
         self.dispatchEvent(
@@ -114,7 +127,15 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
         finalize();
       } else {
         self.setAttribute('data-closing', '');
-        setTimeout(finalize, 200);
+        const overlay = self.shadowRoot?.querySelector('.overlay');
+        const timeoutMs = overlay
+          ? getAnimationTimeoutMs(overlay, NORMAL_DURATION)
+          : 0;
+        if (timeoutMs <= 0) {
+          finalize();
+        } else {
+          record['_closeTimer'] = setTimeout(finalize, Math.ceil(timeoutMs) + 20);
+        }
       }
     };
     const ch = (e: Event) => {
@@ -136,6 +157,8 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     if (oh) this.shadowRoot?.removeEventListener('click', oh);
     const ch = s['_ch'] as EventListener | undefined;
     if (ch) this.shadowRoot?.removeEventListener('click', ch);
+    const closeTimer = s['_closeTimer'] as ReturnType<typeof setTimeout> | undefined;
+    if (closeTimer) clearTimeout(closeTimer);
   },
   updated() {
     updateOverlayFocus(this, this as unknown as OverlayFocusState, '.dialog');
diff --git a/src/components/drawer/BqDrawer.ts b/src/components/drawer/BqDrawer.ts
index c73318f..ed521c9 100644
--- a/src/components/drawer/BqDrawer.ts
+++ b/src/components/drawer/BqDrawer.ts
@@ -16,6 +16,7 @@ import { t } from '../../i18n/index.js';
 import type { OverlayFocusState } from '../../utils/dom.js';
 import {
   cleanupOverlayFocus,
+  getAnimationTimeoutMs,
   uniqueId,
   updateOverlayFocus,
 } from '../../utils/dom.js';
@@ -28,6 +29,7 @@ type BqDrawerProps = {
   size: string;
 };
 type BqDrawerState = { titleId: string };
+const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
   props: {
@@ -99,14 +101,25 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
+    const record = self as unknown as Record<string, unknown>;
     if (!self.getState<string>('titleId'))
       self.setState('titleId', uniqueId('bq-drawer-title'));
     const close = () => {
       if (self.hasAttribute('data-closing')) return;
+      const clearCloseTimer = () => {
+        const closeTimer = record['_closeTimer'] as
+          | ReturnType<typeof setTimeout>
+          | undefined;
+        if (closeTimer) {
+          clearTimeout(closeTimer);
+          delete record['_closeTimer'];
+        }
+      };
       const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
         '(prefers-reduced-motion: reduce)'
       )?.matches;
       const finalize = () => {
+        clearCloseTimer();
         self.removeAttribute('data-closing');
         self.removeAttribute('open');
         self.dispatchEvent(
@@ -117,7 +130,15 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
         finalize();
       } else {
         self.setAttribute('data-closing', '');
-        setTimeout(finalize, 200);
+        const drawer = self.shadowRoot?.querySelector('.drawer');
+        const timeoutMs = drawer
+          ? getAnimationTimeoutMs(drawer, NORMAL_DURATION)
+          : 0;
+        if (timeoutMs <= 0) {
+          finalize();
+        } else {
+          record['_closeTimer'] = setTimeout(finalize, Math.ceil(timeoutMs) + 20);
+        }
       }
     };
     const kh = (e: Event) => {
@@ -147,6 +168,8 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     if (bh) this.shadowRoot?.removeEventListener('click', bh);
     const ch = s['_ch'] as EventListener | undefined;
     if (ch) this.shadowRoot?.removeEventListener('click', ch);
+    const closeTimer = s['_closeTimer'] as ReturnType<typeof setTimeout> | undefined;
+    if (closeTimer) clearTimeout(closeTimer);
   },
   updated() {
     updateOverlayFocus(this, this as unknown as OverlayFocusState, '.drawer');
diff --git a/src/components/dropdown-menu/BqDropdownMenu.ts b/src/components/dropdown-menu/BqDropdownMenu.ts
index 221e8d6..afa34e0 100644
--- a/src/components/dropdown-menu/BqDropdownMenu.ts
+++ b/src/components/dropdown-menu/BqDropdownMenu.ts
@@ -14,7 +14,7 @@
 import type { ComponentDefinition } from '@bquery/bquery/component';
 import { component, html } from '@bquery/bquery/component';
 import { escapeHtml } from '@bquery/bquery/security';
-import { uniqueId } from '../../utils/dom.js';
+import { getAnimationTimeoutMs, uniqueId } from '../../utils/dom.js';
 import { getBaseStyles } from '../../utils/styles.js';
 
 type BqDropdownMenuProps = {
@@ -24,6 +24,7 @@ type BqDropdownMenuProps = {
   disabled: boolean;
 };
 type BqDropdownMenuState = { uid: string };
+const FAST_DURATION = '150ms';
 
 const definition: ComponentDefinition<
   BqDropdownMenuProps,
@@ -89,6 +90,7 @@ const definition: ComponentDefinition<
       getState<T>(k: string): T;
     };
     const self = this as unknown as BQEl;
+    const record = self as unknown as Record<string, unknown>;
     if (!self.getState<string>('uid')) self.setState('uid', uniqueId('bq-dm'));
 
     const getTrigger = (): HTMLElement | null =>
@@ -172,10 +174,20 @@ const definition: ComponentDefinition<
       if (!self.hasAttribute('open') || self.hasAttribute('data-closing'))
         return;
       clearTypeaheadBuffer();
+      const clearCloseTimer = () => {
+        const closeTimer = record['_closeTimer'] as
+          | ReturnType<typeof setTimeout>
+          | undefined;
+        if (closeTimer) {
+          clearTimeout(closeTimer);
+          delete record['_closeTimer'];
+        }
+      };
       const reducedMotion = self.ownerDocument.defaultView?.matchMedia?.(
         '(prefers-reduced-motion: reduce)'
       )?.matches;
       const finalize = () => {
+        clearCloseTimer();
         self.removeAttribute('data-closing');
         self.removeAttribute('open');
         syncTriggerA11y();
@@ -188,7 +200,13 @@ const definition: ComponentDefinition<
         finalize();
       } else {
         self.setAttribute('data-closing', '');
-        setTimeout(finalize, 150);
+        const menu = self.shadowRoot?.querySelector('.menu');
+        const timeoutMs = menu ? getAnimationTimeoutMs(menu, FAST_DURATION) : 0;
+        if (timeoutMs <= 0) {
+          finalize();
+        } else {
+          record['_closeTimer'] = setTimeout(finalize, Math.ceil(timeoutMs) + 20);
+        }
       }
     };
     const toggle = () => {
@@ -430,11 +448,13 @@ const definition: ComponentDefinition<
     const clearTypeaheadBuffer = s['_clearTypeaheadBuffer'] as
       | (() => void)
       | undefined;
+    const closeTimer = s['_closeTimer'] as ReturnType<typeof setTimeout> | undefined;
     if (triggerHandler) this.removeEventListener('click', triggerHandler);
     if (menuClickHandler) this.removeEventListener('click', menuClickHandler);
     if (keyHandler) this.removeEventListener('keydown', keyHandler);
     if (outsideHandler) document.removeEventListener('click', outsideHandler);
     clearTypeaheadBuffer?.();
+    if (closeTimer) clearTimeout(closeTimer);
     if (slotChangeHandler) {
       this.shadowRoot
         ?.querySelector('slot[name="trigger"]')
diff --git a/src/components/pagination/BqPagination.ts b/src/components/pagination/BqPagination.ts
index 6b67884..af67811 100644
--- a/src/components/pagination/BqPagination.ts
+++ b/src/components/pagination/BqPagination.ts
@@ -101,7 +101,7 @@ const definition: ComponentDefinition<BqPaginationProps> = {
     if (h) this.shadowRoot?.removeEventListener('click', h);
   },
   render({ props }) {
-    const page = props.page;
+    const page = Math.max(1, Math.min(props.page, props.total || 1));
     const total = props.total;
     const siblings = props['sibling-count'];
     const pages = buildPages(page, total, siblings);
diff --git a/src/components/select/BqSelect.ts b/src/components/select/BqSelect.ts
index 606116c..d654774 100644
--- a/src/components/select/BqSelect.ts
+++ b/src/components/select/BqSelect.ts
@@ -233,7 +233,6 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
       proxy.setDisabled(this.hasAttribute('disabled'));
     }
     (s['_syncOptions'] as (() => void) | undefined)?.();
-    (s['_syncValue'] as (() => void) | undefined)?.();
   },
   render({ props, state }) {
     const hasError = Boolean(props.error);
diff --git a/src/components/textarea/BqTextarea.ts b/src/components/textarea/BqTextarea.ts
index d98aa2b..f7988ac 100644
--- a/src/components/textarea/BqTextarea.ts
+++ b/src/components/textarea/BqTextarea.ts
@@ -210,9 +210,7 @@ const definition: ComponentDefinition<BqTextareaProps, BqTextareaState> = {
           aria-invalid="${hasError ? 'true' : 'false'}"
           ${props.required ? 'aria-required="true"' : ''}
           ${describedBy ? `aria-describedby="${describedBy}"` : ''}
-        >
-${escapeHtml(props.value)}</textarea
-        >
+        >${escapeHtml(props.value)}</textarea>
         ${hasFooter
           ? `<div class="footer" part="footer">
               <span>
diff --git a/src/components/tooltip/BqTooltip.ts b/src/components/tooltip/BqTooltip.ts
index efcf2fb..d79583f 100644
--- a/src/components/tooltip/BqTooltip.ts
+++ b/src/components/tooltip/BqTooltip.ts
@@ -135,6 +135,7 @@ const definition: ComponentDefinition<BqTooltipProps, BqTooltipState> = {
     self.addEventListener('focusout', hide);
     document.addEventListener('keydown', kh);
     queueMicrotask(() => {
+      if (!self.isConnected) return;
       const slot = self.shadowRoot?.querySelector(
         'slot'
       ) as HTMLSlotElement | null;
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 35b79e9..371eae7 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -84,6 +84,40 @@ export function uniqueId(prefix = 'bq'): string {
   return `${prefix}-${++_counter}`;
 }
 
+function parseTimeValueToMs(value: string): number {
+  const trimmed = value.trim();
+  if (!trimmed) return 0;
+  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed);
+  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000;
+  return Number.parseFloat(trimmed) || 0;
+}
+
+export function getAnimationTimeoutMs(
+  el: Element,
+  fallbackDuration = '0ms'
+): number {
+  const view = el.ownerDocument.defaultView;
+  if (!view?.getComputedStyle) return parseTimeValueToMs(fallbackDuration);
+
+  const styles = view.getComputedStyle(el);
+  const durations = styles.animationDuration
+    .split(',')
+    .map((value) => parseTimeValueToMs(value));
+  const delays = styles.animationDelay
+    .split(',')
+    .map((value) => parseTimeValueToMs(value));
+  const count = Math.max(durations.length, delays.length);
+
+  let longest = 0;
+  for (let i = 0; i < count; i += 1) {
+    const duration = durations[i] ?? durations[durations.length - 1] ?? 0;
+    const delay = delays[i] ?? delays[delays.length - 1] ?? 0;
+    longest = Math.max(longest, duration + delay);
+  }
+
+  return longest > 0 ? longest : parseTimeValueToMs(fallbackDuration);
+}
+
 /**
  * Manages focus trapping, initial focus, and focus restoration for overlay
  * components (Dialog, Drawer). Call from `updated()`.
diff --git a/tests/dropdown-menu.test.ts b/tests/dropdown-menu.test.ts
index a3c2257..a6b09bd 100644
--- a/tests/dropdown-menu.test.ts
+++ b/tests/dropdown-menu.test.ts
@@ -433,4 +433,30 @@ describe('BqDropdownMenu', () => {
     expect(selected).toBe(0);
     expect(clickEvent.defaultPrevented).toBe(true);
   });
+
+  it('should clear a pending close timer when disconnected', async () => {
+    const el = doc.createElement('bq-dropdown-menu');
+    const trigger = doc.createElement('button');
+    trigger.setAttribute('slot', 'trigger');
+    trigger.textContent = 'Trigger';
+    const item = doc.createElement('button');
+    item.textContent = 'Edit';
+    el.append(trigger, item);
+    doc.body.appendChild(el);
+
+    let closed = 0;
+    el.addEventListener('bq-close', () => {
+      closed += 1;
+    });
+
+    trigger.click();
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => resolve())
+    );
+    trigger.click();
+    el.remove();
+    await new Promise<void>((resolve) => setTimeout(resolve, 220));
+
+    expect(closed).toBe(0);
+  });
 });
diff --git a/tests/overlay-components.test.ts b/tests/overlay-components.test.ts
index 37d0ea2..26b1162 100644
--- a/tests/overlay-components.test.ts
+++ b/tests/overlay-components.test.ts
@@ -161,6 +161,27 @@ describe('overlay and utility component fixes', () => {
     expect(doc.activeElement).toBe(insideButton);
   });
 
+  it('clears a pending dialog close timer on disconnect', async () => {
+    const dialog = doc.createElement('bq-dialog');
+    dialog.setAttribute('title', 'Example');
+    dialog.setAttribute('open', '');
+    doc.body.appendChild(dialog);
+
+    let closed = 0;
+    dialog.addEventListener('bq-close', () => {
+      closed += 1;
+    });
+
+    const closeButton = dialog.shadowRoot?.querySelector(
+      '.close-btn'
+    ) as HTMLButtonElement | null;
+    closeButton?.click();
+    dialog.remove();
+    await new Promise<void>((resolve) => setTimeout(resolve, 260));
+
+    expect(closed).toBe(0);
+  });
+
   it('moves focus into the drawer on open and restores it on close', async () => {
     const trigger = doc.createElement('button');
     trigger.textContent = 'Open drawer';
@@ -273,6 +294,27 @@ describe('overlay and utility component fixes', () => {
     expect(doc.activeElement).toBe(insideButton);
   });
 
+  it('clears a pending drawer close timer on disconnect', async () => {
+    const drawer = doc.createElement('bq-drawer');
+    drawer.setAttribute('title', 'Example');
+    drawer.setAttribute('open', '');
+    doc.body.appendChild(drawer);
+
+    let closed = 0;
+    drawer.addEventListener('bq-close', () => {
+      closed += 1;
+    });
+
+    const closeButton = drawer.shadowRoot?.querySelector(
+      '.close-btn'
+    ) as HTMLButtonElement | null;
+    closeButton?.click();
+    drawer.remove();
+    await new Promise<void>((resolve) => setTimeout(resolve, 260));
+
+    expect(closed).toBe(0);
+  });
+
   it('renders breadcrumb separators from the separator prop', async () => {
     const el = doc.createElement('bq-breadcrumbs');
     el.setAttribute('separator', '>');
diff --git a/tests/slider-pagination.test.ts b/tests/slider-pagination.test.ts
index 5e2c354..5ae4cd9 100644
--- a/tests/slider-pagination.test.ts
+++ b/tests/slider-pagination.test.ts
@@ -190,4 +190,26 @@ describe('BqPagination', () => {
     const ellipsis = el.shadowRoot?.querySelector('.ellipsis');
     expect(ellipsis?.getAttribute('aria-hidden')).toBe('true');
   });
+
+  it('should clamp out-of-range page values when rendering controls', () => {
+    const el = doc.createElement('bq-pagination');
+    el.setAttribute('total', '5');
+    el.setAttribute('page', '99');
+    doc.body.appendChild(el);
+
+    const current = el.shadowRoot?.querySelector('[aria-current="page"]');
+    const prevButton = el.shadowRoot?.querySelector(
+      '.page-btn[data-page="4"]'
+    ) as HTMLButtonElement | null;
+    const nextButton = el.shadowRoot?.querySelector(
+      '.page-btn[aria-label]'
+    )?.parentElement?.querySelector('.page-btn:last-child') as
+      | HTMLButtonElement
+      | null;
+
+    expect(current?.textContent?.trim()).toBe('5');
+    expect(prevButton).toBeTruthy();
+    expect(nextButton?.getAttribute('data-page')).toBe('6');
+    expect(nextButton?.hasAttribute('disabled')).toBe(true);
+  });
 });
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index 14d5c0a..a00b765 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -234,4 +234,17 @@ describe('BqTooltip', () => {
     );
     expect(tip?.getAttribute('aria-hidden')).toBe('true');
   });
+
+  it('should not attach aria-describedby after disconnecting before the microtask runs', async () => {
+    const el = doc.createElement('bq-tooltip');
+    el.setAttribute('content', 'Helpful hint');
+    el.innerHTML = '<button type="button">Hover me</button>';
+    doc.body.appendChild(el);
+
+    const trigger = el.querySelector('button');
+    el.remove();
+    await Promise.resolve();
+
+    expect(trigger?.hasAttribute('aria-describedby')).toBe(false);
+  });
 });

From e2bc112200b8677d30298e43de9ac122f3299dcf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 07:16:10 +0000
Subject: [PATCH 12/17] Reset pending close state on disconnect

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/4fc6490e-33d3-41ae-b7c5-f770d1b456ae
---
 src/components/dialog/BqDialog.ts              | 8 +++++++-
 src/components/drawer/BqDrawer.ts              | 8 +++++++-
 src/components/dropdown-menu/BqDropdownMenu.ts | 8 +++++++-
 tests/dropdown-menu.test.ts                    | 2 ++
 tests/overlay-components.test.ts               | 4 ++++
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/BqDialog.ts b/src/components/dialog/BqDialog.ts
index dcb794f..a9bce91 100644
--- a/src/components/dialog/BqDialog.ts
+++ b/src/components/dialog/BqDialog.ts
@@ -158,7 +158,13 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     const ch = s['_ch'] as EventListener | undefined;
     if (ch) this.shadowRoot?.removeEventListener('click', ch);
     const closeTimer = s['_closeTimer'] as ReturnType<typeof setTimeout> | undefined;
-    if (closeTimer) clearTimeout(closeTimer);
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      delete s['_closeTimer'];
+      this.removeAttribute('data-closing');
+      (this as unknown as { open?: boolean }).open = false;
+      this.removeAttribute('open');
+    }
   },
   updated() {
     updateOverlayFocus(this, this as unknown as OverlayFocusState, '.dialog');
diff --git a/src/components/drawer/BqDrawer.ts b/src/components/drawer/BqDrawer.ts
index ed521c9..90ccbda 100644
--- a/src/components/drawer/BqDrawer.ts
+++ b/src/components/drawer/BqDrawer.ts
@@ -169,7 +169,13 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     const ch = s['_ch'] as EventListener | undefined;
     if (ch) this.shadowRoot?.removeEventListener('click', ch);
     const closeTimer = s['_closeTimer'] as ReturnType<typeof setTimeout> | undefined;
-    if (closeTimer) clearTimeout(closeTimer);
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      delete s['_closeTimer'];
+      this.removeAttribute('data-closing');
+      (this as unknown as { open?: boolean }).open = false;
+      this.removeAttribute('open');
+    }
   },
   updated() {
     updateOverlayFocus(this, this as unknown as OverlayFocusState, '.drawer');
diff --git a/src/components/dropdown-menu/BqDropdownMenu.ts b/src/components/dropdown-menu/BqDropdownMenu.ts
index afa34e0..0e658e9 100644
--- a/src/components/dropdown-menu/BqDropdownMenu.ts
+++ b/src/components/dropdown-menu/BqDropdownMenu.ts
@@ -454,7 +454,13 @@ const definition: ComponentDefinition<
     if (keyHandler) this.removeEventListener('keydown', keyHandler);
     if (outsideHandler) document.removeEventListener('click', outsideHandler);
     clearTypeaheadBuffer?.();
-    if (closeTimer) clearTimeout(closeTimer);
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      delete s['_closeTimer'];
+      this.removeAttribute('data-closing');
+      (this as unknown as { open?: boolean }).open = false;
+      this.removeAttribute('open');
+    }
     if (slotChangeHandler) {
       this.shadowRoot
         ?.querySelector('slot[name="trigger"]')
diff --git a/tests/dropdown-menu.test.ts b/tests/dropdown-menu.test.ts
index a6b09bd..9660729 100644
--- a/tests/dropdown-menu.test.ts
+++ b/tests/dropdown-menu.test.ts
@@ -458,5 +458,7 @@ describe('BqDropdownMenu', () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 220));
 
     expect(closed).toBe(0);
+    expect(el.hasAttribute('open')).toBe(false);
+    expect(el.hasAttribute('data-closing')).toBe(false);
   });
 });
diff --git a/tests/overlay-components.test.ts b/tests/overlay-components.test.ts
index 26b1162..7a7ccbd 100644
--- a/tests/overlay-components.test.ts
+++ b/tests/overlay-components.test.ts
@@ -180,6 +180,8 @@ describe('overlay and utility component fixes', () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 260));
 
     expect(closed).toBe(0);
+    expect(dialog.hasAttribute('open')).toBe(false);
+    expect(dialog.hasAttribute('data-closing')).toBe(false);
   });
 
   it('moves focus into the drawer on open and restores it on close', async () => {
@@ -313,6 +315,8 @@ describe('overlay and utility component fixes', () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 260));
 
     expect(closed).toBe(0);
+    expect(drawer.hasAttribute('open')).toBe(false);
+    expect(drawer.hasAttribute('data-closing')).toBe(false);
   });
 
   it('renders breadcrumb separators from the separator prop', async () => {

From 120247b378ca3041771db5870bb5095b90498140 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 07:17:06 +0000
Subject: [PATCH 13/17] Tidy disconnect state host typing

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/4fc6490e-33d3-41ae-b7c5-f770d1b456ae
---
 src/components/dialog/BqDialog.ts              | 8 +++++---
 src/components/drawer/BqDrawer.ts              | 8 +++++---
 src/components/dropdown-menu/BqDropdownMenu.ts | 8 +++++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/dialog/BqDialog.ts b/src/components/dialog/BqDialog.ts
index a9bce91..d4d6335 100644
--- a/src/components/dialog/BqDialog.ts
+++ b/src/components/dialog/BqDialog.ts
@@ -29,6 +29,7 @@ type BqDialogProps = {
   dismissible: boolean;
 };
 type BqDialogState = { titleId: string };
+type BqDialogHost = HTMLElement & { open?: boolean };
 const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
@@ -149,6 +150,7 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     self.shadowRoot?.addEventListener('click', ch);
   },
   disconnected() {
+    const host = this as BqDialogHost;
     const s = this as unknown as Record<string, unknown>;
     cleanupOverlayFocus(s as unknown as OverlayFocusState);
     const kh = s['_kh'] as EventListener | undefined;
@@ -161,9 +163,9 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      this.removeAttribute('data-closing');
-      (this as unknown as { open?: boolean }).open = false;
-      this.removeAttribute('open');
+      host.removeAttribute('data-closing');
+      host.open = false;
+      host.removeAttribute('open');
     }
   },
   updated() {
diff --git a/src/components/drawer/BqDrawer.ts b/src/components/drawer/BqDrawer.ts
index 90ccbda..9eeeaef 100644
--- a/src/components/drawer/BqDrawer.ts
+++ b/src/components/drawer/BqDrawer.ts
@@ -29,6 +29,7 @@ type BqDrawerProps = {
   size: string;
 };
 type BqDrawerState = { titleId: string };
+type BqDrawerHost = HTMLElement & { open?: boolean };
 const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
@@ -160,6 +161,7 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     self.shadowRoot?.addEventListener('click', ch);
   },
   disconnected() {
+    const host = this as BqDrawerHost;
     const s = this as unknown as Record<string, unknown>;
     cleanupOverlayFocus(s as unknown as OverlayFocusState);
     const kh = s['_kh'] as EventListener | undefined;
@@ -172,9 +174,9 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      this.removeAttribute('data-closing');
-      (this as unknown as { open?: boolean }).open = false;
-      this.removeAttribute('open');
+      host.removeAttribute('data-closing');
+      host.open = false;
+      host.removeAttribute('open');
     }
   },
   updated() {
diff --git a/src/components/dropdown-menu/BqDropdownMenu.ts b/src/components/dropdown-menu/BqDropdownMenu.ts
index 0e658e9..0429fa8 100644
--- a/src/components/dropdown-menu/BqDropdownMenu.ts
+++ b/src/components/dropdown-menu/BqDropdownMenu.ts
@@ -24,6 +24,7 @@ type BqDropdownMenuProps = {
   disabled: boolean;
 };
 type BqDropdownMenuState = { uid: string };
+type BqDropdownMenuHost = HTMLElement & { open?: boolean };
 const FAST_DURATION = '150ms';
 
 const definition: ComponentDefinition<
@@ -435,6 +436,7 @@ const definition: ComponentDefinition<
     });
   },
   disconnected() {
+    const host = this as BqDropdownMenuHost;
     const s = this as unknown as Record<string, unknown>;
     const triggerHandler = s['_triggerHandler'] as EventListener | undefined;
     const menuClickHandler = s['_menuClickHandler'] as
@@ -457,9 +459,9 @@ const definition: ComponentDefinition<
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      this.removeAttribute('data-closing');
-      (this as unknown as { open?: boolean }).open = false;
-      this.removeAttribute('open');
+      host.removeAttribute('data-closing');
+      host.open = false;
+      host.removeAttribute('open');
     }
     if (slotChangeHandler) {
       this.shadowRoot

From 6e58bb40e9f19921ebd5e90920d93e0fd298f515 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 07:17:56 +0000
Subject: [PATCH 14/17] Remove redundant disconnect state writes

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/4fc6490e-33d3-41ae-b7c5-f770d1b456ae
---
 src/components/dialog/BqDialog.ts              | 7 ++-----
 src/components/drawer/BqDrawer.ts              | 7 ++-----
 src/components/dropdown-menu/BqDropdownMenu.ts | 7 ++-----
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/dialog/BqDialog.ts b/src/components/dialog/BqDialog.ts
index d4d6335..5bbf2bd 100644
--- a/src/components/dialog/BqDialog.ts
+++ b/src/components/dialog/BqDialog.ts
@@ -29,7 +29,6 @@ type BqDialogProps = {
   dismissible: boolean;
 };
 type BqDialogState = { titleId: string };
-type BqDialogHost = HTMLElement & { open?: boolean };
 const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
@@ -150,7 +149,6 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     self.shadowRoot?.addEventListener('click', ch);
   },
   disconnected() {
-    const host = this as BqDialogHost;
     const s = this as unknown as Record<string, unknown>;
     cleanupOverlayFocus(s as unknown as OverlayFocusState);
     const kh = s['_kh'] as EventListener | undefined;
@@ -163,9 +161,8 @@ const definition: ComponentDefinition<BqDialogProps, BqDialogState> = {
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      host.removeAttribute('data-closing');
-      host.open = false;
-      host.removeAttribute('open');
+      this.removeAttribute('data-closing');
+      this.removeAttribute('open');
     }
   },
   updated() {
diff --git a/src/components/drawer/BqDrawer.ts b/src/components/drawer/BqDrawer.ts
index 9eeeaef..b785d0f 100644
--- a/src/components/drawer/BqDrawer.ts
+++ b/src/components/drawer/BqDrawer.ts
@@ -29,7 +29,6 @@ type BqDrawerProps = {
   size: string;
 };
 type BqDrawerState = { titleId: string };
-type BqDrawerHost = HTMLElement & { open?: boolean };
 const NORMAL_DURATION = '200ms';
 
 const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
@@ -161,7 +160,6 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     self.shadowRoot?.addEventListener('click', ch);
   },
   disconnected() {
-    const host = this as BqDrawerHost;
     const s = this as unknown as Record<string, unknown>;
     cleanupOverlayFocus(s as unknown as OverlayFocusState);
     const kh = s['_kh'] as EventListener | undefined;
@@ -174,9 +172,8 @@ const definition: ComponentDefinition<BqDrawerProps, BqDrawerState> = {
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      host.removeAttribute('data-closing');
-      host.open = false;
-      host.removeAttribute('open');
+      this.removeAttribute('data-closing');
+      this.removeAttribute('open');
     }
   },
   updated() {
diff --git a/src/components/dropdown-menu/BqDropdownMenu.ts b/src/components/dropdown-menu/BqDropdownMenu.ts
index 0429fa8..dcca995 100644
--- a/src/components/dropdown-menu/BqDropdownMenu.ts
+++ b/src/components/dropdown-menu/BqDropdownMenu.ts
@@ -24,7 +24,6 @@ type BqDropdownMenuProps = {
   disabled: boolean;
 };
 type BqDropdownMenuState = { uid: string };
-type BqDropdownMenuHost = HTMLElement & { open?: boolean };
 const FAST_DURATION = '150ms';
 
 const definition: ComponentDefinition<
@@ -436,7 +435,6 @@ const definition: ComponentDefinition<
     });
   },
   disconnected() {
-    const host = this as BqDropdownMenuHost;
     const s = this as unknown as Record<string, unknown>;
     const triggerHandler = s['_triggerHandler'] as EventListener | undefined;
     const menuClickHandler = s['_menuClickHandler'] as
@@ -459,9 +457,8 @@ const definition: ComponentDefinition<
     if (closeTimer) {
       clearTimeout(closeTimer);
       delete s['_closeTimer'];
-      host.removeAttribute('data-closing');
-      host.open = false;
-      host.removeAttribute('open');
+      this.removeAttribute('data-closing');
+      this.removeAttribute('open');
     }
     if (slotChangeHandler) {
       this.shadowRoot

From 90967bbeb9259115de274ad67e9897b498c7dac0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 08:21:37 +0000
Subject: [PATCH 15/17] Remove unused select sync state

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/c5806ac5-914b-4ba5-af38-b97bca44f7df
---
 src/components/select/BqSelect.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/select/BqSelect.ts b/src/components/select/BqSelect.ts
index d654774..229301c 100644
--- a/src/components/select/BqSelect.ts
+++ b/src/components/select/BqSelect.ts
@@ -197,7 +197,6 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
         );
       }
     };
-    const syncValue = () => syncSelectValue(self);
     const observer = new MutationObserver(() => {
       syncOptions();
     });
@@ -210,7 +209,6 @@ const definition: ComponentDefinition<BqSelectProps, BqSelectState> = {
     });
 
     (self as unknown as Record<string, unknown>)['_handler'] = handler;
-    (self as unknown as Record<string, unknown>)['_syncValue'] = syncValue;
     (self as unknown as Record<string, unknown>)['_syncOptions'] = syncOptions;
     (self as unknown as Record<string, unknown>)['_observer'] = observer;
     self.shadowRoot?.addEventListener('change', handler);

From c221caa35c2d641ace916d5d6e19763dbee776de Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 09:12:04 +0000
Subject: [PATCH 16/17] Fix zero-duration animation timeout fallback

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/632cae1e-162b-4168-ae82-7c2a4e7e2276
---
 src/utils/dom.ts    | 28 +++++++++++++------
 tests/utils.test.ts | 67 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 371eae7..e09482f 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -96,16 +96,28 @@ export function getAnimationTimeoutMs(
   el: Element,
   fallbackDuration = '0ms'
 ): number {
+  const fallbackMs = parseTimeValueToMs(fallbackDuration);
   const view = el.ownerDocument.defaultView;
-  if (!view?.getComputedStyle) return parseTimeValueToMs(fallbackDuration);
+  if (!view?.getComputedStyle) return fallbackMs;
 
   const styles = view.getComputedStyle(el);
-  const durations = styles.animationDuration
-    .split(',')
-    .map((value) => parseTimeValueToMs(value));
-  const delays = styles.animationDelay
-    .split(',')
-    .map((value) => parseTimeValueToMs(value));
+  const animationDuration = styles.animationDuration || '';
+  const animationDelay = styles.animationDelay || '';
+  const animationName = styles.animationName || '';
+  const durationValues = animationDuration.split(',');
+  const delayValues = animationDelay.split(',');
+  const hasTimingValues =
+    durationValues.some((value) => value.trim() !== '') ||
+    delayValues.some((value) => value.trim() !== '');
+  const hasRealAnimationName = animationName.split(',').some((name) => {
+    const trimmed = name.trim();
+    return trimmed !== '' && trimmed !== 'none';
+  });
+
+  if (!hasTimingValues) return fallbackMs;
+
+  const durations = durationValues.map((value) => parseTimeValueToMs(value));
+  const delays = delayValues.map((value) => parseTimeValueToMs(value));
   const count = Math.max(durations.length, delays.length);
 
   let longest = 0;
@@ -115,7 +127,7 @@ export function getAnimationTimeoutMs(
     longest = Math.max(longest, duration + delay);
   }
 
-  return longest > 0 ? longest : parseTimeValueToMs(fallbackDuration);
+  return longest > 0 || hasRealAnimationName ? longest : fallbackMs;
 }
 
 /**
diff --git a/tests/utils.test.ts b/tests/utils.test.ts
index ad9e7a1..ebbdcdd 100644
--- a/tests/utils.test.ts
+++ b/tests/utils.test.ts
@@ -1,8 +1,13 @@
-import { describe, it, expect, beforeEach } from 'bun:test';
+import { describe, it, expect, beforeEach, afterEach } from 'bun:test';
 import { cn } from '../src/utils/cn.js';
+import { getAnimationTimeoutMs } from '../src/utils/dom.js';
 import { setLocale, getLocale, resetLocale, t } from '../src/i18n/index.js';
 import { en } from '../src/i18n/en.js';
 
+const win = (globalThis as unknown as Record<string, unknown>)['window'] as Window &
+  typeof globalThis;
+const doc = win.document as unknown as Document;
+
 describe('cn utility', () => {
   it('should join string classes', () => {
     expect(cn('foo', 'bar')).toBe('foo bar');
@@ -106,3 +111,63 @@ describe('design tokens', () => {
     expect(css).toContain('--bq-radius-md');
   });
 });
+
+describe('dom utilities', () => {
+  afterEach(() => {
+    doc.body.innerHTML = '';
+  });
+
+  it('should respect explicit 0ms animations instead of using the fallback timeout', () => {
+    const el = doc.createElement('div');
+    doc.body.appendChild(el);
+
+    const originalGetComputedStyle = win.getComputedStyle.bind(win);
+    const mockedGetComputedStyle = ((node: Element) => {
+      const styles = originalGetComputedStyle(node);
+      if (node === el) {
+        return {
+          ...styles,
+          animationName: 'fade-out',
+          animationDuration: '0s',
+          animationDelay: '0s',
+        } as CSSStyleDeclaration;
+      }
+      return styles;
+    }) as typeof win.getComputedStyle;
+
+    win.getComputedStyle = mockedGetComputedStyle;
+
+    try {
+      expect(getAnimationTimeoutMs(el, '200ms')).toBe(0);
+    } finally {
+      win.getComputedStyle = originalGetComputedStyle as typeof win.getComputedStyle;
+    }
+  });
+
+  it('should use the fallback timeout when no animation name is present', () => {
+    const el = doc.createElement('div');
+    doc.body.appendChild(el);
+
+    const originalGetComputedStyle = win.getComputedStyle.bind(win);
+    const mockedGetComputedStyle = ((node: Element) => {
+      const styles = originalGetComputedStyle(node);
+      if (node === el) {
+        return {
+          ...styles,
+          animationName: 'none',
+          animationDuration: '0s',
+          animationDelay: '0s',
+        } as CSSStyleDeclaration;
+      }
+      return styles;
+    }) as typeof win.getComputedStyle;
+
+    win.getComputedStyle = mockedGetComputedStyle;
+
+    try {
+      expect(getAnimationTimeoutMs(el, '200ms')).toBe(200);
+    } finally {
+      win.getComputedStyle = originalGetComputedStyle as typeof win.getComputedStyle;
+    }
+  });
+});

From 3870698bb4c61bdb34625e11cd4db672bb2f1286 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 09:36:46 +0000
Subject: [PATCH 17/17] Fix animation-name none timeout fallback

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/50f1c1d0-7fe3-49f3-9dd3-cb1614d65271
---
 src/utils/dom.ts                     | 3 ++-
 tests/accordion-enhancements.test.ts | 1 +
 tests/utils.test.ts                  | 4 ++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index e09482f..e14d855 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -127,7 +127,8 @@ export function getAnimationTimeoutMs(
     longest = Math.max(longest, duration + delay);
   }
 
-  return longest > 0 || hasRealAnimationName ? longest : fallbackMs;
+  if (!hasRealAnimationName) return fallbackMs;
+  return longest;
 }
 
 /**
diff --git a/tests/accordion-enhancements.test.ts b/tests/accordion-enhancements.test.ts
index 469cb71..fe999d4 100644
--- a/tests/accordion-enhancements.test.ts
+++ b/tests/accordion-enhancements.test.ts
@@ -189,6 +189,7 @@ describe('BqAccordion — accessibility improvements', () => {
       if (node.classList.contains('panel')) {
         return {
           ...styles,
+          animationName: 'panel-close',
           animationDuration: '600ms',
           animationDelay: '0s',
         } as CSSStyleDeclaration;
diff --git a/tests/utils.test.ts b/tests/utils.test.ts
index ebbdcdd..68a8db0 100644
--- a/tests/utils.test.ts
+++ b/tests/utils.test.ts
@@ -155,8 +155,8 @@ describe('dom utilities', () => {
         return {
           ...styles,
           animationName: 'none',
-          animationDuration: '0s',
-          animationDelay: '0s',
+          animationDuration: '600ms',
+          animationDelay: '25ms',
         } as CSSStyleDeclaration;
       }
       return styles;