@brandsync/wc 1.9.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 {
     /**
@@ -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`.
@@ -2364,6 +2461,79 @@ export namespace Components {
          */
         "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
      * successfully.") -- a state-specific icon, a message, and a close button.
@@ -2478,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;
@@ -2542,6 +2716,10 @@ 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;
@@ -3511,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;
     }
@@ -4282,6 +4496,41 @@ declare global {
         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;
     }
@@ -4369,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;
@@ -4393,6 +4643,7 @@ declare global {
         "bs-switch": HTMLBsSwitchElement;
         "bs-tab": HTMLBsTabElement;
         "bs-tabs": HTMLBsTabsElement;
+        "bs-timepicker": HTMLBsTimepickerElement;
         "bs-toast": HTMLBsToastElement;
         "bs-tooltip": HTMLBsTooltipElement;
     }
@@ -5686,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`.
@@ -6967,6 +7323,95 @@ declare namespace LocalJSX {
          */
         "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
      * successfully.") -- a state-specific icon, a message, and a close button.
@@ -7170,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;
@@ -7364,6 +7826,19 @@ declare namespace LocalJSX {
         "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;
     }
@@ -7400,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] };
@@ -7424,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] };
     }
@@ -8059,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`.
@@ -8521,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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandsync/wc",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "publishConfig": {
     "access": "public"
   },

package/dist/brandsync-wc/p-7b00dd36.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,h as s}from"./p-AgoOSYvW.js";const n=class{constructor(s){e(this,s),this.bsSelect=i(this,"bsSelect")}disabled=!1;hasIcon=!1;bsSelect;onIconSlotchange=e=>{this.hasIcon=e.target.assignedNodes().length>0};onClick=()=>{this.disabled||this.bsSelect.emit()};render(){return s("button",{key:"02e1255e64ab0bd0b283927f1321fb5e660c78b6",type:"button",part:"item",role:"menuitem",class:"bs-menu-item "+(this.disabled?"bs-menu-item--disabled":""),disabled:this.disabled,"aria-disabled":this.disabled?"true":void 0,onClick:this.onClick},s("span",{key:"fb36594dd48bd601a26d9debda9fb1c9bde37f88",part:"icon",class:"bs-menu-item__icon "+(this.hasIcon?"bs-menu-item__icon--has-content":"")},s("slot",{key:"19049f5f1f79e6136cd9cc8bcb3669ff97d79c18",name:"icon",onSlotchange:this.onIconSlotchange})),s("span",{key:"6ac351a3d3a07bea5bbb5f69bd58c1a7189283fe",part:"label",class:"bs-menu-item__label"},s("slot",{key:"04215578eb545d824c090cb72f1e493474dca409"})))}};n.style=":host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}";export{n as bs_menu_item}