@brandsync/wc 1.8.0 → 1.10.0

package/dist/types/components/bs-timepicker/bs-timepicker.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-timepicker/bs-timepicker.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsTimepickerChange {
+    /** The confirmed time as 24-hour `HH:mm`, whatever `format` is displayed. */
+    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.
+ *
+ * @part container - The outer card.
+ * @part header - The title row.
+ * @part title - The heading text.
+ * @part format-toggle - The 24h switch.
+ * @part selector - The row of spinners.
+ * @part spinner - Each hour/minute column.
+ * @part step - Each up/down caret button.
+ * @part value - Each hour/minute value (a `spinbutton`).
+ * @part separator - The colon between hours and minutes.
+ * @part period - The AM/PM dropdown (12h only).
+ * @part footer - The Cancel/Confirm row.
+ * @part cancel - The Cancel button.
+ * @part confirm - The Confirm button.
+ */
+export declare class BsTimepicker {
+    el: HTMLElement;
+    internals: ElementInternals;
+    private initialValue;
+    private typed;
+    /** The `name` the confirmed value is submitted under in a surrounding `<form>`. */
+    name?: 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. */
+    value: 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. */
+    format: '12h' | '24h';
+    /** Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained. */
+    minuteStep: number;
+    /** Heading text. */
+    heading: string;
+    /** Label of the 24h switch. */
+    formatLabel: string;
+    /** Label of the Confirm button. */
+    confirmLabel: string;
+    /** Label of the Cancel button. */
+    cancelLabel: string;
+    /** Accessible name of the hour spinner. */
+    hourLabel: string;
+    /** Accessible name of the minute spinner. */
+    minuteLabel: string;
+    /** Accessible name of the AM/PM dropdown. */
+    periodLabel: string;
+    /** Fires when the user presses Confirm: `{ value }` as 24-hour `HH:mm`. Not fired when `value` is
+     * set programmatically. */
+    bsChange: EventEmitter<BsTimepickerChange>;
+    /** Fires when the user presses Cancel. The draft is reset to `value`. */
+    bsCancel: EventEmitter<void>;
+    /** Draft hour, 0-23. */
+    hour: number;
+    /** Draft minute, 0-59. */
+    minute: number;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    onNameChange(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    private resetDraft;
+    private syncFormValue;
+    private get step();
+    private get is12h();
+    private get isPm();
+    /** The number shown in a column. In 12h mode the hour reads 1-12. */
+    private shown;
+    private bounds;
+    private setShown;
+    private stepBy;
+    private onKeyDown;
+    private confirm;
+    private cancel;
+    private renderColumn;
+    render(): any;
+}

package/dist/types/components/bs-timepicker/bs-timepicker.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTimepickerArgs {
+    value: string;
+    format: '12h' | '24h';
+    minuteStep: number;
+    heading: string;
+}
+declare const meta: Meta<BsTimepickerArgs>;
+export default meta;
+type Story = StoryObj<BsTimepickerArgs>;
+export declare const Default: Story;
+export declare const TwentyFourHour: Story;
+export declare const WithValue: Story;
+export declare const FifteenMinuteStep: Story;

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts

@@ -37,6 +37,14 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * 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.
+ *
  * @slot search - Reserved for a search field, e.g. a `bs-input type="search"`. This component
  *   does not build one itself. Hidden while `collapsed` (see above).
  * @slot - Default slot: the scrollable list of nav items, typically one or more
@@ -52,6 +60,7 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * @part search - The wrapper around the `search` slot.
  * @part search-trigger - The compact search button shown instead of the `search` slot while `collapsed`.
  * @part items - The wrapper around the default (items) slot.
+ * @part backdrop - The scrim behind the overlay (small screens only; clicking it closes the overlay).
  */
 export declare class BsNavigationDrawer {
     el: HTMLElement;
@@ -90,8 +99,48 @@ export declare class BsNavigationDrawer {
      * 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. */
     showLogo: boolean;
-    onCollapsedChange(collapsed: boolean): 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. */
+    open: boolean;
+    /** 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. */
+    bsClose: EventEmitter<void>;
+    /** Whether the viewport is in the small-screen range (<= 768px), tracked with `matchMedia`. */
+    mobile: boolean;
+    private mediaQuery?;
+    private focusPending;
+    private navRef?;
+    private previouslyFocused?;
+    private bodyOverflowBefore?;
+    private get overlayOpen();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onMediaChange;
+    onCollapsedChange(): void;
+    onMobileChange(): void;
+    onOpenChange(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
+    /** Focus is moved only after the render that makes the panel visible -- focusing earlier races the
+     * re-render (the panel is still `visibility: hidden`), and a hidden element can't take focus. */
+    private flushFocus;
+    /** In the small-screen overlay the items always use their expanded layout -- the collapsed
+     * (icon-above-caption) layout is for the desktop rail, and would clip labels in a full-width
+     * panel and hide nested items. */
+    private syncItems;
+    /** Scroll lock, focus entry and focus return for the overlay, mirroring `bs-dialog`: the focus
+     * move is deferred a frame because focusing right after the panel becomes visible does not
+     * reliably land. */
+    private applyOverlayState;
+    private unlockScroll;
+    private requestClose;
+    onDocumentKeydown(ev: KeyboardEvent): void;
+    /** Keeps focus inside the open overlay: focus that lands anywhere outside this component is
+     * pulled back in. `composedPath()` is used so this works across shadow-DOM boundaries (same
+     * approach as `bs-dialog`). */
+    onDocumentFocusIn(ev: FocusEvent): void;
     /** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this
      * component's own -- same direct-children-prop-sync approach `bs-tabs` uses for `selected`
      * across its `bs-tab` children. Only direct children (top-level items): Figma's collapsed rail

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.d.ts

@@ -17,3 +17,5 @@ export declare const Dark: Story;
 export declare const WithoutSearch: Story;
 export declare const EmptyItems: Story;
 export declare const LargeItemList: Story;
+export declare const MobileOverlay: Story;
+export declare const MobileOverlayPage: Story;