@brandsync/wc 1.7.0 → 1.9.0

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;