@brandsync/wc 0.0.12 → 0.1.0

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+ * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+ * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+ * input) is a structurally different composite widget and isn't covered by this component.
+ *
+ * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+ * where to collapse into `...` itself, the consumer never builds the button list by hand.
+ *
+ * ## When to use
+ * - Paging through a large, ordered result set (a table, a search results list) where jumping
+ *   directly to a specific page number is useful.
+ *
+ * ## When not to use
+ * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+ * - A huge page count where users realistically only ever go forward/back one page at a time --
+ *   plain prev/next controls (no numbers) are simpler there.
+ *
+ * @part list - The `<ul>` element.
+ * @part item - Each `<li>` in the list.
+ * @part prev - The previous-page button.
+ * @part next - The next-page button.
+ * @part page - Each page-number button.
+ * @part current - The current page's button (in addition to `page`).
+ * @part ellipsis - Each collapsed-range indicator.
+ */
+export declare class BsPagination {
+    /** Total number of pages. Must be a positive integer -- there's always at least one page. */
+    totalPages: number;
+    /** The active page (1-indexed). Mutable + reflected so clicking a page button updates it
+     * directly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for
+     * the consumer to react to (e.g. fetching that page's data). */
+    currentPage: number;
+    /** How many page numbers to show on each side of the current page before collapsing the rest
+     * into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows
+     * `1 2 3 ... 12`). */
+    siblingCount: number;
+    /** Accessible name for the previous-page button. */
+    previousLabel: string;
+    /** Accessible name for the next-page button. */
+    nextLabel: string;
+    /** Fires whenever the active page changes as a result of the user clicking a page/prev/next
+     * button -- not when `currentPage` is set programmatically from outside. */
+    bsPageChange: EventEmitter<number>;
+    private get safeTotalPages();
+    private get safeSiblingCount();
+    private goToPage;
+    private getPageList;
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsPaginationArgs {
+    totalPages: number;
+    currentPage: number;
+    siblingCount: number;
+}
+declare const meta: Meta<BsPaginationArgs>;
+export default meta;
+type Story = StoryObj<BsPaginationArgs>;
+export declare const Default: Story;
+export declare const MiddlePage: Story;
+export declare const LastPage: Story;
+export declare const FewPages: Story;
+export declare const WiderSiblingCount: Story;

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

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

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSnackbarVariant = 'default' | 'info' | 'warning' | 'success' | 'error';
+/**
+ * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+ * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+ * button.
+ *
+ * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+ * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+ * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+ * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+ *
+ * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+ * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+ * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+ * etc.) if the design updates to specify them.
+ *
+ * ## When to use
+ * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+ *   interrupting the user's flow.
+ *
+ * ## When not to use
+ * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+ * - For persistent, always-visible status -- a snackbar is inherently transient.
+ *
+ * @slot - Default slot: the message text.
+ * @part container - The outer bar.
+ * @part icon - The leading icon/spinner wrapper.
+ * @part message - The message text wrapper.
+ * @part action - The optional action button (only rendered when `actionLabel` is set).
+ * @part close - The close button.
+ */
+export declare class BsSnackbar {
+    /** Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as
+     * the baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens. */
+    variant: BsSnackbarVariant;
+    /** Replaces the checkmark icon with a spinning loading indicator, for a message describing
+     * in-progress work (e.g. "Uploading files...") rather than a completed result. */
+    loading: boolean;
+    /** Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to
+     * render no action button at all -- its presence, not a boolean flag, is what shows it. */
+    actionLabel?: string;
+    /** Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set. */
+    bsAction: EventEmitter<void>;
+    /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
+     * the consumer is expected to do that (or hide it) in response to this event. */
+    bsDismiss: EventEmitter<void>;
+    private onAction;
+    private onDismiss;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsSnackbarVariant } from './bs-snackbar';
+interface BsSnackbarArgs {
+    variant: BsSnackbarVariant;
+    loading: boolean;
+    actionLabel: string;
+    message: string;
+}
+declare const meta: Meta<BsSnackbarArgs>;
+export default meta;
+type Story = StoryObj<BsSnackbarArgs>;
+export declare const Default: Story;
+export declare const AllVariants: Story;
+export declare const Overflow: Story;
+export declare const Loading: Story;
+export declare const NoAction: Story;

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

@@ -6,7 +6,8 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * ## When to use
  * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
  *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
- *   already renders one).
+ *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+ *   a header that keeps its logo instead, see that prop's own docs).
  *
  * ## When not to use
  * - The top navigation bar itself -- use `bs-navigation-header` instead.
@@ -41,10 +42,11 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * @slot - Default slot: the scrollable list of nav items, typically one or more
  *   `bs-navigation-drawer-item` elements.
  * @part logo - The wrapper around the BrandSync brand mark. Two of these exist in the shadow DOM
- *   at once (one wrapping a `bs-logo variant="full"`, one wrapping a `bs-logo variant="mark"`),
- *   both carrying this same part name (the same "multiple elements, one shared part name"
- *   approach `bs-attachment`'s `star` part uses) -- only one is visible at a time, toggled by
- *   plain CSS on `collapsed` (see above), so `::part(logo)` always reaches whichever is showing.
+ *   at once while `showLogo` is `true` (one wrapping a `bs-logo variant="full"`, one wrapping a
+ *   `bs-logo variant="mark"`), both carrying this same part name (the same "multiple elements, one
+ *   shared part name" approach `bs-attachment`'s `star` part uses) -- only one is visible at a
+ *   time, toggled by plain CSS on `collapsed` (see above), so `::part(logo)` always reaches
+ *   whichever is showing. Neither renders at all while `showLogo` is `false`.
  * @part title - The "Main Menu" heading text wrapper.
  * @part collapse - The collapse toggle button.
  * @part search - The wrapper around the `search` slot.
@@ -82,6 +84,12 @@ export declare class BsNavigationDrawer {
      * `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's
      * background-agnostic). */
     logoBackground: 'auto' | 'light' | 'dark';
+    /** 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. */
+    showLogo: boolean;
     onCollapsedChange(collapsed: boolean): void;
     componentDidLoad(): void;
     /** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this

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

@@ -3,6 +3,7 @@ interface BsNavigationDrawerArgs {
     heading: string;
     collapsible: boolean;
     logoBackground: 'auto' | 'light' | 'dark';
+    showLogo: boolean;
 }
 declare const meta: Meta<BsNavigationDrawerArgs>;
 export default meta;
@@ -11,6 +12,8 @@ export declare const FixedSideNav: Story;
 export declare const FixedSideNavWithDivider: Story;
 export declare const FixedSideNavWithIcons: Story;
 export declare const Collapsed: Story;
+export declare const CollapsedWithHeader: Story;
 export declare const Dark: Story;
 export declare const WithoutSearch: Story;
 export declare const EmptyItems: Story;
+export declare const LargeItemList: Story;

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

@@ -19,3 +19,7 @@ export declare const HeaderBaseWithNavigationAndActionsNoLogo: Story;
 export declare const HeaderBaseWithNavigationAndActionsTabs: Story;
 export declare const HeaderBaseDark: Story;
 export declare const HeaderBaseWithSkipLink: Story;
+export declare const HeaderBaseWithActionsAndSwitcher: Story;
+export declare const HeaderBaseWithSideNav: Story;
+export declare const HeaderBaseWithNavigationActionsAndSideNav: Story;
+export declare const HeaderBaseWithSideNavHeaderLogo: Story;