@brandsync/wc 1.8.0 → 1.10.0

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-inpu
 import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 import { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
+import { BsDatepickerChange } from "./components/bs-datepicker/bs-datepicker";
 import { BsDialogSize } from "./components/bs-dialog/bs-dialog";
 import { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
 import { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
@@ -39,6 +40,7 @@ import { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState }
 import { BsSwitchSize } from "./components/bs-switch/bs-switch";
 import { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
 import { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
+import { BsTimepickerChange } from "./components/bs-timepicker/bs-timepicker";
 import { BsToastState } from "./components/bs-toast/bs-toast";
 export { BsAccordionSize } from "./components/bs-accordion/bs-accordion";
 export { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
@@ -59,6 +61,7 @@ export { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-inpu
 export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
+export { BsDatepickerChange } from "./components/bs-datepicker/bs-datepicker";
 export { BsDialogSize } from "./components/bs-dialog/bs-dialog";
 export { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
 export { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
@@ -74,6 +77,7 @@ export { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState }
 export { BsSwitchSize } from "./components/bs-switch/bs-switch";
 export { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
 export { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
+export { BsTimepickerChange } from "./components/bs-timepicker/bs-timepicker";
 export { BsToastState } from "./components/bs-toast/bs-toast";
 export namespace Components {
     /**
@@ -1187,7 +1191,7 @@ export namespace Components {
      */
     interface BsDataTable {
         /**
-          * Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value.
+          * Optional custom cell renderer, for rich cells such as a status badge, a link or an actions column. It returns an **HTML string** that is inserted into the cell as real markup (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.  **When set it renders every cell, not just the special ones** -- return the plain value for ordinary columns too. And **the returned string is not escaped or sanitized** (same trust model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are rendered as escaped text.  The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the table itself).  Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value (as escaped text) when unset.
          */
         "cellRenderer"?: (row: BsDataTableRow, column: BsDataTableColumn) => string;
         /**
@@ -1214,6 +1218,99 @@ export namespace Components {
          */
         "sortDirection": 'asc' | 'desc';
     }
+    /**
+     * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+     * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+     * "Range" (start and end date fields above the grid, with the days between highlighted).
+     * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+     * ISO timestamps -- so a date can't shift by a day across time zones.
+     * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+     * `bs-menu` or your own overlay.
+     * ## When to use
+     * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+     *   deadline, a report window).
+     * - Picking a period (`range`) such as a start and end date.
+     * ## When not to use
+     * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+     *   is faster there.
+     * ## Keyboard
+     * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+     * month (with Shift, by year), Enter/Space select the focused day.
+     */
+    interface BsDatepicker {
+        /**
+          * The range end (`YYYY-MM-DD`) in `range` mode.
+          * @default ''
+         */
+        "end": string;
+        /**
+          * Label above the end field in `range` mode.
+          * @default 'End date'
+         */
+        "endLabel": string;
+        /**
+          * First column of the grid: `0` for Sunday (the Figma spec), `1` for Monday, ... `6`.
+          * @default 0
+         */
+        "firstDayOfWeek": number;
+        /**
+          * BCP 47 locale used for month names, weekday names and the title.
+          * @default 'en-GB'
+         */
+        "locale": string;
+        /**
+          * Latest selectable date (`YYYY-MM-DD`). Later days render disabled.
+         */
+        "max"?: string;
+        /**
+          * Earliest selectable date (`YYYY-MM-DD`). Earlier days render disabled.
+         */
+        "min"?: string;
+        /**
+          * Accessible name for the month dropdown (single mode).
+          * @default 'Month'
+         */
+        "monthLabel": string;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`. In `range` mode the dates are submitted as `<name>-start` and `<name>-end`.
+         */
+        "name"?: string;
+        /**
+          * Accessible name for the next-month button.
+          * @default 'Next month'
+         */
+        "nextLabel": string;
+        /**
+          * Accessible name for the previous-month button.
+          * @default 'Previous month'
+         */
+        "previousLabel": string;
+        /**
+          * Select a start/end range instead of a single date.
+          * @default false
+         */
+        "range": boolean;
+        /**
+          * The range start (`YYYY-MM-DD`) in `range` mode.
+          * @default ''
+         */
+        "start": string;
+        /**
+          * Label above the start field in `range` mode.
+          * @default 'Start date'
+         */
+        "startLabel": string;
+        /**
+          * The selected date (`YYYY-MM-DD`) in single mode. Mutable so a click updates it directly; `bsChange` still fires for the consumer to react. Ignored when `range` is set.
+          * @default ''
+         */
+        "value": string;
+        /**
+          * Accessible name for the year dropdown (single mode).
+          * @default 'Year'
+         */
+        "yearLabel": string;
+    }
     /**
      * An overlay dialog that interrupts the current flow for a focused task or confirmation.
      * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -1440,6 +1537,10 @@ export namespace Components {
           * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
          */
         "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
@@ -1680,6 +1781,13 @@ export namespace Components {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
      * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+     * **Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:
+     * the drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully
+     * expanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and
+     * emits `bsClose`; focus moves into it on open and back to whatever opened it on close. The
+     * collapse toggle and the compact search trigger are not shown in this mode (nothing sits behind
+     * them). The drawer has no trigger of its own -- put a button in your header and set `open` from it.
+     * On wider screens `open` is ignored and nothing changes.
      */
     interface BsNavigationDrawer {
         /**
@@ -1702,6 +1810,11 @@ export namespace Components {
           * @default 'auto'
          */
         "logoBackground": 'auto' | 'light' | 'dark';
+        /**
+          * Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and reflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or the backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in the page flow. There is no built-in trigger: set this from your own button.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the one that owns the logo when paired with a `bs-navigation-header` (that header's own `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this drawer set to `showLogo={false}`, so the brand mark only ever appears once.
           * @default true
@@ -2310,6 +2423,10 @@ export namespace Components {
           * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
          */
         "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
@@ -2339,6 +2456,83 @@ export namespace Components {
           * @default 'bs-tab'
          */
         "type": BsTabsType;
+        /**
+          * The selected tab's `value`. Mutable and reflected: it follows the user's selection, and setting it from outside (attribute or property) selects the matching tab -- without emitting `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop, or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...). If unset, it is read from whichever tab is already `selected` once the group loads.
+         */
+        "value"?: string;
+    }
+    /**
+     * An inline time picker: hour and minute spinners (up/down carets, or the arrow keys on the value),
+     * an AM/PM dropdown in 12-hour mode, a 24h switch, and Cancel/Confirm buttons. Matches the Figma
+     * "Time picker" component's two formats (12h with AM/PM, and 24h).
+     * The picker works on a draft: nothing is committed until the user presses Confirm, which updates
+     * `value` and fires `bsChange`. Cancel discards the draft and fires `bsCancel`.
+     * `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
+     * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
+     * and close that overlay from `bsChange`/`bsCancel`.
+     * ## When to use
+     * - Picking a time of day where the user steps through hours and minutes.
+     * ## When not to use
+     * - A time the user can type faster than step to -- a plain `bs-input` is quicker.
+     * ## Keyboard
+     * Tab to the hour or minute value, then ArrowUp/ArrowDown step it (wrapping), Home/End jump to the
+     * first/last value, and typing digits sets it directly.
+     */
+    interface BsTimepicker {
+        /**
+          * Label of the Cancel button.
+          * @default 'Cancel'
+         */
+        "cancelLabel": string;
+        /**
+          * Label of the Confirm button.
+          * @default 'Confirm'
+         */
+        "confirmLabel": string;
+        /**
+          * Display format: `12h` (with an AM/PM dropdown) or `24h`. The user can switch it with the 24h switch. Does not change `value`, which is always 24-hour.
+          * @default '12h'
+         */
+        "format": '12h' | '24h';
+        /**
+          * Label of the 24h switch.
+          * @default '24h'
+         */
+        "formatLabel": string;
+        /**
+          * Heading text.
+          * @default 'Select Time'
+         */
+        "heading": string;
+        /**
+          * Accessible name of the hour spinner.
+          * @default 'Hour'
+         */
+        "hourLabel": string;
+        /**
+          * Accessible name of the minute spinner.
+          * @default 'Minute'
+         */
+        "minuteLabel": string;
+        /**
+          * Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained.
+          * @default 1
+         */
+        "minuteStep": number;
+        /**
+          * The `name` the confirmed value is submitted under in a surrounding `<form>`.
+         */
+        "name"?: string;
+        /**
+          * Accessible name of the AM/PM dropdown.
+          * @default 'AM/PM'
+         */
+        "periodLabel": string;
+        /**
+          * The confirmed time, 24-hour `HH:mm`. Empty means no time chosen yet (the picker opens on 00:00). Mutable so Confirm updates it directly; `bsChange` still fires.
+          * @default ''
+         */
+        "value": string;
     }
     /**
      * A transient status message for confirming the result of an action (e.g. "Files uploaded
@@ -2398,6 +2592,14 @@ export interface BsAttachmentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsAttachmentElement;
 }
+export interface BsBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsBreadcrumbElement;
+}
+export interface BsBreadcrumbOverflowCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsBreadcrumbOverflowElement;
+}
 export interface BsCarouselCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsCarouselElement;
@@ -2446,6 +2648,10 @@ export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsDataTableElement;
 }
+export interface BsDatepickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsDatepickerElement;
+}
 export interface BsDialogCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsDialogElement;
@@ -2506,6 +2712,14 @@ export interface BsTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsTabElement;
 }
+export interface BsTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTabsElement;
+}
+export interface BsTimepickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTimepickerElement;
+}
 export interface BsToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsToastElement;
@@ -2725,6 +2939,9 @@ declare global {
         prototype: HTMLBsBadgeElement;
         new (): HTMLBsBadgeElement;
     };
+    interface HTMLBsBreadcrumbElementEventMap {
+        "bsNavigate": { href: string };
+    }
     /**
      * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
      * plain text, or the current-page label, depending on `current`/`href`.
@@ -2742,11 +2959,22 @@ declare global {
      *   first-child-aware separator hiding depend on that parent structure.
      */
     interface HTMLBsBreadcrumbElement extends Components.BsBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbElement, ev: BsBreadcrumbCustomEvent<HTMLBsBreadcrumbElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbElement, ev: BsBreadcrumbCustomEvent<HTMLBsBreadcrumbElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLBsBreadcrumbElement: {
         prototype: HTMLBsBreadcrumbElement;
         new (): HTMLBsBreadcrumbElement;
     };
+    interface HTMLBsBreadcrumbOverflowElementEventMap {
+        "bsNavigate": { href: string };
+    }
     /**
      * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
      * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
@@ -2773,6 +3001,14 @@ declare global {
      * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
      */
     interface HTMLBsBreadcrumbOverflowElement extends Components.BsBreadcrumbOverflow, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsBreadcrumbOverflowElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbOverflowElement, ev: BsBreadcrumbOverflowCustomEvent<HTMLBsBreadcrumbOverflowElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsBreadcrumbOverflowElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbOverflowElement, ev: BsBreadcrumbOverflowCustomEvent<HTMLBsBreadcrumbOverflowElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLBsBreadcrumbOverflowElement: {
         prototype: HTMLBsBreadcrumbOverflowElement;
@@ -3453,6 +3689,42 @@ declare global {
         prototype: HTMLBsDataTableElement;
         new (): HTMLBsDataTableElement;
     };
+    interface HTMLBsDatepickerElementEventMap {
+        "bsChange": BsDatepickerChange;
+    }
+    /**
+     * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+     * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+     * "Range" (start and end date fields above the grid, with the days between highlighted).
+     * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+     * ISO timestamps -- so a date can't shift by a day across time zones.
+     * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+     * `bs-menu` or your own overlay.
+     * ## When to use
+     * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+     *   deadline, a report window).
+     * - Picking a period (`range`) such as a start and end date.
+     * ## When not to use
+     * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+     *   is faster there.
+     * ## Keyboard
+     * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+     * month (with Shift, by year), Enter/Space select the focused day.
+     */
+    interface HTMLBsDatepickerElement extends Components.BsDatepicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsDatepickerElementEventMap>(type: K, listener: (this: HTMLBsDatepickerElement, ev: BsDatepickerCustomEvent<HTMLBsDatepickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsDatepickerElementEventMap>(type: K, listener: (this: HTMLBsDatepickerElement, ev: BsDatepickerCustomEvent<HTMLBsDatepickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsDatepickerElement: {
+        prototype: HTMLBsDatepickerElement;
+        new (): HTMLBsDatepickerElement;
+    };
     interface HTMLBsDialogElementEventMap {
         "bsClose": void;
     }
@@ -3740,6 +4012,7 @@ declare global {
     interface HTMLBsNavigationDrawerElementEventMap {
         "bsCollapse": boolean;
         "bsSearchClick": void;
+        "bsClose": void;
     }
     /**
      * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
@@ -3774,6 +4047,13 @@ declare global {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
      * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+     * **Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:
+     * the drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully
+     * expanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and
+     * emits `bsClose`; focus moves into it on open and back to whatever opened it on close. The
+     * collapse toggle and the compact search trigger are not shown in this mode (nothing sits behind
+     * them). The drawer has no trigger of its own -- put a button in your header and set `open` from it.
+     * On wider screens `open` is ignored and nothing changes.
      */
     interface HTMLBsNavigationDrawerElement extends Components.BsNavigationDrawer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBsNavigationDrawerElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerElement, ev: BsNavigationDrawerCustomEvent<HTMLBsNavigationDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4182,6 +4462,9 @@ declare global {
         prototype: HTMLBsTabElement;
         new (): HTMLBsTabElement;
     };
+    interface HTMLBsTabsElementEventMap {
+        "bsChange": { value: string };
+    }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
      * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
@@ -4200,11 +4483,54 @@ declare global {
      *   directly.
      */
     interface HTMLBsTabsElement extends Components.BsTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTabsElementEventMap>(type: K, listener: (this: HTMLBsTabsElement, ev: BsTabsCustomEvent<HTMLBsTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsTabsElementEventMap>(type: K, listener: (this: HTMLBsTabsElement, ev: BsTabsCustomEvent<HTMLBsTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLBsTabsElement: {
         prototype: HTMLBsTabsElement;
         new (): HTMLBsTabsElement;
     };
+    interface HTMLBsTimepickerElementEventMap {
+        "bsChange": BsTimepickerChange;
+        "bsCancel": void;
+    }
+    /**
+     * An inline time picker: hour and minute spinners (up/down carets, or the arrow keys on the value),
+     * an AM/PM dropdown in 12-hour mode, a 24h switch, and Cancel/Confirm buttons. Matches the Figma
+     * "Time picker" component's two formats (12h with AM/PM, and 24h).
+     * The picker works on a draft: nothing is committed until the user presses Confirm, which updates
+     * `value` and fires `bsChange`. Cancel discards the draft and fires `bsCancel`.
+     * `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
+     * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
+     * and close that overlay from `bsChange`/`bsCancel`.
+     * ## When to use
+     * - Picking a time of day where the user steps through hours and minutes.
+     * ## When not to use
+     * - A time the user can type faster than step to -- a plain `bs-input` is quicker.
+     * ## Keyboard
+     * Tab to the hour or minute value, then ArrowUp/ArrowDown step it (wrapping), Home/End jump to the
+     * first/last value, and typing digits sets it directly.
+     */
+    interface HTMLBsTimepickerElement extends Components.BsTimepicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTimepickerElementEventMap>(type: K, listener: (this: HTMLBsTimepickerElement, ev: BsTimepickerCustomEvent<HTMLBsTimepickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsTimepickerElementEventMap>(type: K, listener: (this: HTMLBsTimepickerElement, ev: BsTimepickerCustomEvent<HTMLBsTimepickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsTimepickerElement: {
+        prototype: HTMLBsTimepickerElement;
+        new (): HTMLBsTimepickerElement;
+    };
     interface HTMLBsToastElementEventMap {
         "bsDismiss": void;
     }
@@ -4292,6 +4618,7 @@ declare global {
         "bs-composer": HTMLBsComposerElement;
         "bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
         "bs-data-table": HTMLBsDataTableElement;
+        "bs-datepicker": HTMLBsDatepickerElement;
         "bs-dialog": HTMLBsDialogElement;
         "bs-file-upload": HTMLBsFileUploadElement;
         "bs-file-upload-item": HTMLBsFileUploadItemElement;
@@ -4316,6 +4643,7 @@ declare global {
         "bs-switch": HTMLBsSwitchElement;
         "bs-tab": HTMLBsTabElement;
         "bs-tabs": HTMLBsTabsElement;
+        "bs-timepicker": HTMLBsTimepickerElement;
         "bs-toast": HTMLBsToastElement;
         "bs-tooltip": HTMLBsTooltipElement;
     }
@@ -4628,6 +4956,10 @@ declare namespace LocalJSX {
           * Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
          */
         "href"?: string;
+        /**
+          * Fires when the crumb's link is clicked, before the browser navigates. **Cancelable**: call `event.preventDefault()` to stop the native navigation and route it yourself (an SPA router). Detail is `{ href }`. Only a plain primary-button click emits it -- ctrl/cmd/shift/alt-clicks and middle-clicks (open in a new tab/window) are left to the browser. Bubbles and is composed, so one listener on the surrounding `<bs-breadcrumbs>` covers every crumb.
+         */
+        "onBsNavigate"?: (event: BsBreadcrumbCustomEvent<{ href: string }>) => void;
         /**
           * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom properties can't carry an enum that switches rules on their own. Can also be set directly on a standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`.
           * @default 'md'
@@ -4665,6 +4997,10 @@ declare namespace LocalJSX {
           * @default []
          */
         "items"?: BsBreadcrumbOverflowItem[];
+        /**
+          * Fires when one of the popup's links is clicked, before the browser navigates. **Cancelable** -- see `bs-breadcrumb`'s `bsNavigate`, which this mirrors (same detail, same modified-click rule). Detail is `{ href }`.
+         */
+        "onBsNavigate"?: (event: BsBreadcrumbOverflowCustomEvent<{ href: string }>) => void;
         /**
           * Accessible name (`aria-label`) for the icon-only ellipsis trigger button.
           * @default 'Show hidden breadcrumbs'
@@ -5576,7 +5912,7 @@ declare namespace LocalJSX {
      */
     interface BsDataTable {
         /**
-          * Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value.
+          * Optional custom cell renderer, for rich cells such as a status badge, a link or an actions column. It returns an **HTML string** that is inserted into the cell as real markup (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.  **When set it renders every cell, not just the special ones** -- return the plain value for ordinary columns too. And **the returned string is not escaped or sanitized** (same trust model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are rendered as escaped text.  The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the table itself).  Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value (as escaped text) when unset.
          */
         "cellRenderer"?: (row: BsDataTableRow, column: BsDataTableColumn) => string;
         /**
@@ -5601,6 +5937,111 @@ declare namespace LocalJSX {
          */
         "sortDirection"?: 'asc' | 'desc';
     }
+    /**
+     * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+     * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+     * "Range" (start and end date fields above the grid, with the days between highlighted).
+     * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+     * ISO timestamps -- so a date can't shift by a day across time zones.
+     * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+     * `bs-menu` or your own overlay.
+     * ## When to use
+     * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+     *   deadline, a report window).
+     * - Picking a period (`range`) such as a start and end date.
+     * ## When not to use
+     * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+     *   is faster there.
+     * ## Keyboard
+     * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+     * month (with Shift, by year), Enter/Space select the focused day.
+     */
+    interface BsDatepicker {
+        /**
+          * If `true`, the user cannot interact with the element.
+         */
+        "disabled"?: boolean;
+        /**
+          * The range end (`YYYY-MM-DD`) in `range` mode.
+          * @default ''
+         */
+        "end"?: string;
+        /**
+          * Label above the end field in `range` mode.
+          * @default 'End date'
+         */
+        "endLabel"?: string;
+        /**
+          * First column of the grid: `0` for Sunday (the Figma spec), `1` for Monday, ... `6`.
+          * @default 0
+         */
+        "firstDayOfWeek"?: number;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * BCP 47 locale used for month names, weekday names and the title.
+          * @default 'en-GB'
+         */
+        "locale"?: string;
+        /**
+          * Latest selectable date (`YYYY-MM-DD`). Later days render disabled.
+         */
+        "max"?: string;
+        /**
+          * Earliest selectable date (`YYYY-MM-DD`). Earlier days render disabled.
+         */
+        "min"?: string;
+        /**
+          * Accessible name for the month dropdown (single mode).
+          * @default 'Month'
+         */
+        "monthLabel"?: string;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`. In `range` mode the dates are submitted as `<name>-start` and `<name>-end`.
+         */
+        "name"?: string;
+        /**
+          * Accessible name for the next-month button.
+          * @default 'Next month'
+         */
+        "nextLabel"?: string;
+        /**
+          * Fires when the user changes the selection. Single mode: `{ value }`. Range mode: `{ start, end }` -- fired once for the first click (with an empty `end`) and again when the range is completed. Not fired when the props are set programmatically.
+         */
+        "onBsChange"?: (event: BsDatepickerCustomEvent<BsDatepickerChange>) => void;
+        /**
+          * Accessible name for the previous-month button.
+          * @default 'Previous month'
+         */
+        "previousLabel"?: string;
+        /**
+          * Select a start/end range instead of a single date.
+          * @default false
+         */
+        "range"?: boolean;
+        /**
+          * The range start (`YYYY-MM-DD`) in `range` mode.
+          * @default ''
+         */
+        "start"?: string;
+        /**
+          * Label above the start field in `range` mode.
+          * @default 'Start date'
+         */
+        "startLabel"?: string;
+        /**
+          * The selected date (`YYYY-MM-DD`) in single mode. Mutable so a click updates it directly; `bsChange` still fires for the consumer to react. Ignored when `range` is set.
+          * @default ''
+         */
+        "value"?: string;
+        /**
+          * Accessible name for the year dropdown (single mode).
+          * @default 'Year'
+         */
+        "yearLabel"?: string;
+    }
     /**
      * An overlay dialog that interrupts the current flow for a focused task or confirmation.
      * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -5856,6 +6297,10 @@ declare namespace LocalJSX {
           * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
          */
         "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
@@ -6126,6 +6571,13 @@ declare namespace LocalJSX {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
      * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+     * **Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:
+     * the drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully
+     * expanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and
+     * emits `bsClose`; focus moves into it on open and back to whatever opened it on close. The
+     * collapse toggle and the compact search trigger are not shown in this mode (nothing sits behind
+     * them). The drawer has no trigger of its own -- put a button in your header and set `open` from it.
+     * On wider screens `open` is ignored and nothing changes.
      */
     interface BsNavigationDrawer {
         /**
@@ -6148,6 +6600,10 @@ declare namespace LocalJSX {
           * @default 'auto'
          */
         "logoBackground"?: 'auto' | 'light' | 'dark';
+        /**
+          * Fires when the user dismisses the overlay (Escape, or a click on the backdrop), after `open` has been set back to `false`. Does not fire when you set `open = false` yourself.
+         */
+        "onBsClose"?: (event: BsNavigationDrawerCustomEvent<void>) => void;
         /**
           * Fires with the new `collapsed` value when the collapse toggle button is clicked.
          */
@@ -6156,6 +6612,11 @@ declare namespace LocalJSX {
           * Fires when the compact search-trigger button (shown instead of the `search` slot while `collapsed`) is clicked -- e.g. to open a full search overlay. This component has no visibility into what the `search` slot actually contains, so it can't drive a real search itself once shrunk to icon size.
          */
         "onBsSearchClick"?: (event: BsNavigationDrawerCustomEvent<void>) => void;
+        /**
+          * Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and reflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or the backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in the page flow. There is no built-in trigger: set this from your own button.
+          * @default false
+         */
+        "open"?: boolean;
         /**
           * Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the one that owns the logo when paired with a `bs-navigation-header` (that header's own `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this drawer set to `showLogo={false}`, so the brand mark only ever appears once.
           * @default true
@@ -6820,6 +7281,10 @@ declare namespace LocalJSX {
           * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
          */
         "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
@@ -6839,6 +7304,10 @@ declare namespace LocalJSX {
      *   directly.
      */
     interface BsTabs {
+        /**
+          * Fires when the user selects a different tab (click, or arrow/Home/End), with the new `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab still fires as before.
+         */
+        "onBsChange"?: (event: BsTabsCustomEvent<{ value: string }>) => void;
         /**
           * Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and switches `flex-direction`.
           * @default 'horizontal'
@@ -6849,6 +7318,99 @@ declare namespace LocalJSX {
           * @default 'bs-tab'
          */
         "type"?: BsTabsType;
+        /**
+          * The selected tab's `value`. Mutable and reflected: it follows the user's selection, and setting it from outside (attribute or property) selects the matching tab -- without emitting `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop, or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...). If unset, it is read from whichever tab is already `selected` once the group loads.
+         */
+        "value"?: string;
+    }
+    /**
+     * An inline time picker: hour and minute spinners (up/down carets, or the arrow keys on the value),
+     * an AM/PM dropdown in 12-hour mode, a 24h switch, and Cancel/Confirm buttons. Matches the Figma
+     * "Time picker" component's two formats (12h with AM/PM, and 24h).
+     * The picker works on a draft: nothing is committed until the user presses Confirm, which updates
+     * `value` and fires `bsChange`. Cancel discards the draft and fires `bsCancel`.
+     * `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
+     * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
+     * and close that overlay from `bsChange`/`bsCancel`.
+     * ## When to use
+     * - Picking a time of day where the user steps through hours and minutes.
+     * ## When not to use
+     * - A time the user can type faster than step to -- a plain `bs-input` is quicker.
+     * ## Keyboard
+     * Tab to the hour or minute value, then ArrowUp/ArrowDown step it (wrapping), Home/End jump to the
+     * first/last value, and typing digits sets it directly.
+     */
+    interface BsTimepicker {
+        /**
+          * Label of the Cancel button.
+          * @default 'Cancel'
+         */
+        "cancelLabel"?: string;
+        /**
+          * Label of the Confirm button.
+          * @default 'Confirm'
+         */
+        "confirmLabel"?: string;
+        /**
+          * If `true`, the user cannot interact with the element.
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Display format: `12h` (with an AM/PM dropdown) or `24h`. The user can switch it with the 24h switch. Does not change `value`, which is always 24-hour.
+          * @default '12h'
+         */
+        "format"?: '12h' | '24h';
+        /**
+          * Label of the 24h switch.
+          * @default '24h'
+         */
+        "formatLabel"?: string;
+        /**
+          * Heading text.
+          * @default 'Select Time'
+         */
+        "heading"?: string;
+        /**
+          * Accessible name of the hour spinner.
+          * @default 'Hour'
+         */
+        "hourLabel"?: string;
+        /**
+          * Accessible name of the minute spinner.
+          * @default 'Minute'
+         */
+        "minuteLabel"?: string;
+        /**
+          * Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained.
+          * @default 1
+         */
+        "minuteStep"?: number;
+        /**
+          * The `name` the confirmed value is submitted under in a surrounding `<form>`.
+         */
+        "name"?: string;
+        /**
+          * Fires when the user presses Cancel. The draft is reset to `value`.
+         */
+        "onBsCancel"?: (event: BsTimepickerCustomEvent<void>) => void;
+        /**
+          * Fires when the user presses Confirm: `{ value }` as 24-hour `HH:mm`. Not fired when `value` is set programmatically.
+         */
+        "onBsChange"?: (event: BsTimepickerCustomEvent<BsTimepickerChange>) => void;
+        /**
+          * Accessible name of the AM/PM dropdown.
+          * @default 'AM/PM'
+         */
+        "periodLabel"?: string;
+        /**
+          * The confirmed time, 24-hour `HH:mm`. Empty means no time chosen yet (the picker opens on 00:00). Mutable so Confirm updates it directly; `bsChange` still fires.
+          * @default ''
+         */
+        "value"?: string;
     }
     /**
      * A transient status message for confirming the result of an action (e.g. "Files uploaded
@@ -7053,6 +7615,23 @@ declare namespace LocalJSX {
         "sortDirection": 'asc' | 'desc';
         "selectable": boolean;
     }
+    interface BsDatepickerAttributes {
+        "name": string;
+        "range": boolean;
+        "value": string;
+        "start": string;
+        "end": string;
+        "min": string;
+        "max": string;
+        "locale": string;
+        "firstDayOfWeek": number;
+        "startLabel": string;
+        "endLabel": string;
+        "monthLabel": string;
+        "yearLabel": string;
+        "previousLabel": string;
+        "nextLabel": string;
+    }
     interface BsDialogAttributes {
         "open": boolean;
         "heading": string;
@@ -7091,6 +7670,7 @@ declare namespace LocalJSX {
         "selected": boolean;
         "disabled": boolean;
         "ariaLabel": string | null;
+        "value": string;
         "tabbable": boolean;
     }
     interface BsInputAttributes {
@@ -7139,6 +7719,7 @@ declare namespace LocalJSX {
         "collapsed": boolean;
         "logoBackground": 'auto' | 'light' | 'dark';
         "showLogo": boolean;
+        "open": boolean;
     }
     interface BsNavigationDrawerItemAttributes {
         "selected": boolean;
@@ -7237,11 +7818,26 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "iconPosition": BsTabIconPosition;
         "ariaLabel": string | null;
+        "value": string;
         "tabbable": boolean;
     }
     interface BsTabsAttributes {
         "type": BsTabsType;
         "orientation": BsTabsOrientation;
+        "value": string;
+    }
+    interface BsTimepickerAttributes {
+        "name": string;
+        "value": string;
+        "format": '12h' | '24h';
+        "minuteStep": number;
+        "heading": string;
+        "formatLabel": string;
+        "confirmLabel": string;
+        "cancelLabel": string;
+        "hourLabel": string;
+        "minuteLabel": string;
+        "periodLabel": string;
     }
     interface BsToastAttributes {
         "state": BsToastState;
@@ -7279,6 +7875,7 @@ declare namespace LocalJSX {
         "bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
         "bs-composer-status-banner": Omit<BsComposerStatusBanner, keyof BsComposerStatusBannerAttributes> & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes]?: BsComposerStatusBanner[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `attr:${K}`]?: BsComposerStatusBannerAttributes[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `prop:${K}`]?: BsComposerStatusBanner[K] };
         "bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
+        "bs-datepicker": Omit<BsDatepicker, keyof BsDatepickerAttributes> & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes]?: BsDatepicker[K] } & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes as `attr:${K}`]?: BsDatepickerAttributes[K] } & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes as `prop:${K}`]?: BsDatepicker[K] };
         "bs-dialog": Omit<BsDialog, keyof BsDialogAttributes> & { [K in keyof BsDialog & keyof BsDialogAttributes]?: BsDialog[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `attr:${K}`]?: BsDialogAttributes[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `prop:${K}`]?: BsDialog[K] };
         "bs-file-upload": Omit<BsFileUpload, keyof BsFileUploadAttributes> & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes]?: BsFileUpload[K] } & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes as `attr:${K}`]?: BsFileUploadAttributes[K] } & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes as `prop:${K}`]?: BsFileUpload[K] };
         "bs-file-upload-item": Omit<BsFileUploadItem, keyof BsFileUploadItemAttributes> & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes]?: BsFileUploadItem[K] } & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes as `attr:${K}`]?: BsFileUploadItemAttributes[K] } & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes as `prop:${K}`]?: BsFileUploadItem[K] };
@@ -7303,6 +7900,7 @@ declare namespace LocalJSX {
         "bs-switch": Omit<BsSwitch, keyof BsSwitchAttributes> & { [K in keyof BsSwitch & keyof BsSwitchAttributes]?: BsSwitch[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `attr:${K}`]?: BsSwitchAttributes[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `prop:${K}`]?: BsSwitch[K] };
         "bs-tab": Omit<BsTab, keyof BsTabAttributes> & { [K in keyof BsTab & keyof BsTabAttributes]?: BsTab[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `attr:${K}`]?: BsTabAttributes[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `prop:${K}`]?: BsTab[K] };
         "bs-tabs": Omit<BsTabs, keyof BsTabsAttributes> & { [K in keyof BsTabs & keyof BsTabsAttributes]?: BsTabs[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `attr:${K}`]?: BsTabsAttributes[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `prop:${K}`]?: BsTabs[K] };
+        "bs-timepicker": Omit<BsTimepicker, keyof BsTimepickerAttributes> & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes]?: BsTimepicker[K] } & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes as `attr:${K}`]?: BsTimepickerAttributes[K] } & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes as `prop:${K}`]?: BsTimepicker[K] };
         "bs-toast": Omit<BsToast, keyof BsToastAttributes> & { [K in keyof BsToast & keyof BsToastAttributes]?: BsToast[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `attr:${K}`]?: BsToastAttributes[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `prop:${K}`]?: BsToast[K] };
         "bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
     }
@@ -7938,6 +8536,26 @@ declare module "@stencil/core" {
              * - Deeply nested/hierarchical data — this component renders one flat row per record.
              */
             "bs-data-table": LocalJSX.IntrinsicElements["bs-data-table"] & JSXBase.HTMLAttributes<HTMLBsDataTableElement>;
+            /**
+             * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+             * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+             * "Range" (start and end date fields above the grid, with the days between highlighted).
+             * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+             * ISO timestamps -- so a date can't shift by a day across time zones.
+             * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+             * `bs-menu` or your own overlay.
+             * ## When to use
+             * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+             *   deadline, a report window).
+             * - Picking a period (`range`) such as a start and end date.
+             * ## When not to use
+             * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+             *   is faster there.
+             * ## Keyboard
+             * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+             * month (with Shift, by year), Enter/Space select the focused day.
+             */
+            "bs-datepicker": LocalJSX.IntrinsicElements["bs-datepicker"] & JSXBase.HTMLAttributes<HTMLBsDatepickerElement>;
             /**
              * An overlay dialog that interrupts the current flow for a focused task or confirmation.
              * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
@@ -8136,6 +8754,13 @@ declare module "@stencil/core" {
              * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
              * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
              * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+             * **Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:
+             * the drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully
+             * expanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and
+             * emits `bsClose`; focus moves into it on open and back to whatever opened it on close. The
+             * collapse toggle and the compact search trigger are not shown in this mode (nothing sits behind
+             * them). The drawer has no trigger of its own -- put a button in your header and set `open` from it.
+             * On wider screens `open` is ignored and nothing changes.
              */
             "bs-navigation-drawer": LocalJSX.IntrinsicElements["bs-navigation-drawer"] & JSXBase.HTMLAttributes<HTMLBsNavigationDrawerElement>;
             /**
@@ -8393,6 +9018,24 @@ declare module "@stencil/core" {
              *   directly.
              */
             "bs-tabs": LocalJSX.IntrinsicElements["bs-tabs"] & JSXBase.HTMLAttributes<HTMLBsTabsElement>;
+            /**
+             * An inline time picker: hour and minute spinners (up/down carets, or the arrow keys on the value),
+             * an AM/PM dropdown in 12-hour mode, a 24h switch, and Cancel/Confirm buttons. Matches the Figma
+             * "Time picker" component's two formats (12h with AM/PM, and 24h).
+             * The picker works on a draft: nothing is committed until the user presses Confirm, which updates
+             * `value` and fires `bsChange`. Cancel discards the draft and fires `bsCancel`.
+             * `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
+             * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
+             * and close that overlay from `bsChange`/`bsCancel`.
+             * ## When to use
+             * - Picking a time of day where the user steps through hours and minutes.
+             * ## When not to use
+             * - A time the user can type faster than step to -- a plain `bs-input` is quicker.
+             * ## Keyboard
+             * Tab to the hour or minute value, then ArrowUp/ArrowDown step it (wrapping), Home/End jump to the
+             * first/last value, and typing digits sets it directly.
+             */
+            "bs-timepicker": LocalJSX.IntrinsicElements["bs-timepicker"] & JSXBase.HTMLAttributes<HTMLBsTimepickerElement>;
             /**
              * A transient status message for confirming the result of an action (e.g. "Files uploaded
              * successfully.") -- a state-specific icon, a message, and a close button.