@brandsync/wc 1.13.0 → 1.15.0

package/dist/types/components.d.ts

@@ -23,13 +23,16 @@ import { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-c
 import { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
 import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
+import { BsContainerSize } from "./components/bs-container/bs-container";
 import { BsCookieCategory, BsCookieChoices, BsCookieConsentType } from "./components/bs-cookie-consent/bs-cookie-consent";
 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 { BsDividerInset, BsDividerOrientation, BsDividerVariant } from "./components/bs-divider/bs-divider";
 import { BsErrorPageType } from "./components/bs-error-page/bs-error-page";
 import { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
 import { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
+import { BsGridAlign } from "./components/bs-grid/bs-grid";
 import { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
 import { BsIconTileIntent, BsIconTileSize } from "./components/bs-icon-tile/bs-icon-tile";
 import { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
@@ -47,6 +50,8 @@ import { BsSkeletonVariant } from "./components/bs-skeleton/bs-skeleton";
 import { BsSliderType } from "./components/bs-slider/bs-slider";
 import { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
 import { BsSpinnerSize } from "./components/bs-spinner/bs-spinner";
+import { BsSplitPaneOrientation } from "./components/bs-split-pane/bs-split-pane";
+import { BsStackAlign, BsStackDirection, BsStackJustify } from "./components/bs-stack/bs-stack";
 import { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 import { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 import { BsSwitchSize } from "./components/bs-switch/bs-switch";
@@ -76,13 +81,16 @@ export { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-c
 export { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
 export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
+export { BsContainerSize } from "./components/bs-container/bs-container";
 export { BsCookieCategory, BsCookieChoices, BsCookieConsentType } from "./components/bs-cookie-consent/bs-cookie-consent";
 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 { BsDividerInset, BsDividerOrientation, BsDividerVariant } from "./components/bs-divider/bs-divider";
 export { BsErrorPageType } from "./components/bs-error-page/bs-error-page";
 export { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
 export { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
+export { BsGridAlign } from "./components/bs-grid/bs-grid";
 export { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
 export { BsIconTileIntent, BsIconTileSize } from "./components/bs-icon-tile/bs-icon-tile";
 export { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
@@ -100,6 +108,8 @@ export { BsSkeletonVariant } from "./components/bs-skeleton/bs-skeleton";
 export { BsSliderType } from "./components/bs-slider/bs-slider";
 export { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
 export { BsSpinnerSize } from "./components/bs-spinner/bs-spinner";
+export { BsSplitPaneOrientation } from "./components/bs-split-pane/bs-split-pane";
+export { BsStackAlign, BsStackDirection, BsStackJustify } from "./components/bs-stack/bs-stack";
 export { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 export { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 export { BsSwitchSize } from "./components/bs-switch/bs-switch";
@@ -251,6 +261,34 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+     * with CSS grid. The main column scrolls independently of the header and the side columns.
+     * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+     * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+     * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+     * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+     * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+     * auto track follows the drawer's width on its own.
+     * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+     * `banner` and `navigation` roles.
+     * ## When to use
+     * - The outer frame of an application page with a header and side navigation.
+     * ## When not to use
+     * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+     * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+     * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+     * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+     * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+     */
+    interface BsAppShell {
+        /**
+          * When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`.
+          * @default true
+         */
+        "fullHeight": boolean;
+    }
     /**
      * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
      * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
@@ -1482,6 +1520,28 @@ export namespace Components {
          */
         "type": BsComposerStatusBannerType;
     }
+    /**
+     * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+     * ## When to use
+     * - Constraining page or section content to a readable, consistent maximum width.
+     * ## When not to use
+     * - Arranging children relative to each other (use `bs-stack`).
+     * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+     * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+     * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+     */
+    interface BsContainer {
+        /**
+          * Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`.
+          * @default '300'
+         */
+        "padding": string;
+        /**
+          * Maximum width, taken from the breakpoint tokens. `fluid` removes the limit.
+          * @default 'xl'
+         */
+        "size": BsContainerSize;
+    }
     /**
      * A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
      * - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
@@ -1757,6 +1817,39 @@ export namespace Components {
          */
         "size": BsDialogSize;
     }
+    /**
+     * A thin line that separates content, horizontally or vertically.
+     * ## When to use
+     * - Separating groups of related content in a list, menu, toolbar or card.
+     * ## When not to use
+     * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+     * - Drawing a border around a surface (use `bs-card`).
+     * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+     * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+     * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+     */
+    interface BsDivider {
+        /**
+          * Purely visual: hides the divider from assistive technology instead of exposing a separator.
+          * @default false
+         */
+        "decorative": boolean;
+        /**
+          * Indents the line from its start edge, or from both edges.
+          * @default 'none'
+         */
+        "inset": BsDividerInset;
+        /**
+          * Direction of the line. A vertical divider stretches to the height of its container.
+          * @default 'horizontal'
+         */
+        "orientation": BsDividerOrientation;
+        /**
+          * Visual weight of the line.
+          * @default 'default'
+         */
+        "variant": BsDividerVariant;
+    }
     /**
      * A full-block page for when the user can't get to what they asked for: page not found (404), a server
      * error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
@@ -1912,6 +2005,53 @@ export namespace Components {
          */
         "thumbnailSrc"?: string;
     }
+    /**
+     * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+     * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+     * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+     * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+     * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+     * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+     * unknown names fall back to `100`.
+     * ## When to use
+     * - Card grids, form field grids and dashboards where items share equal column tracks.
+     * - Responsive galleries via `minColumnWidth`.
+     * ## When not to use
+     * - A single row or column of items with no wrapping (plain flex).
+     * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+     * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+     * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+     * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+     */
+    interface BsGrid {
+        /**
+          * Block-axis alignment of items within their cell.
+          * @default 'stretch'
+         */
+        "align": BsGridAlign;
+        /**
+          * Spacing token name for the column gap; overrides `gap` for columns.
+         */
+        "columnGap"?: string;
+        /**
+          * A number of equal columns (`"3"`), or a raw `grid-template-columns` value. Ignored when `minColumnWidth` is set.
+          * @default '1'
+         */
+        "columns": string;
+        /**
+          * Spacing token name for the gap on both axes, e.g. `"200"` for `--bs-spacing-200`.
+          * @default '100'
+         */
+        "gap": string;
+        /**
+          * CSS length (e.g. `240px`). Switches to auto-fit columns at least this wide and overrides `columns`.
+         */
+        "minColumnWidth"?: string;
+        /**
+          * Spacing token name for the row gap; overrides `gap` for rows.
+         */
+        "rowGap"?: string;
+    }
     /**
      * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
      * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
@@ -3464,6 +3604,112 @@ export namespace Components {
          */
         "size": BsSpinnerSize;
     }
+    /**
+     * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+     * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+     * and (optionally) `pane-3`; the pane count follows which slots have content.
+     * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+     * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+     * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+     * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+     * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+     * ## When to use
+     * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+     * ## When not to use
+     * - A temporary overlay panel (use `bs-side-panel`).
+     * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+     *   the dividers purely visual).
+     * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+     * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+     * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+     * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+     * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+     * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+     * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+     * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+     * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+     * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     */
+    interface BsSplitPane {
+        /**
+          * Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it.
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * Accessible name of each divider.
+          * @default 'Resize panes'
+         */
+        "dividerLabel": string;
+        /**
+          * `horizontal` = panes side by side, `vertical` = panes stacked.
+          * @default 'horizontal'
+         */
+        "orientation": BsSplitPaneOrientation;
+        /**
+          * Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators.
+          * @default true
+         */
+        "resizable": boolean;
+        /**
+          * Pixels moved per arrow-key press (Shift multiplies by 4).
+          * @default 16
+         */
+        "step": number;
+        /**
+          * Toggles `collapsed` and emits `bsCollapsedChange`.
+         */
+        "toggleCollapsed": () => Promise<void>;
+    }
+    /**
+     * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+     * drawing a divider between children.
+     * Built from: `bs-divider` (when `divider` is set).
+     * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+     * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+     * nodes are never moved; the attributes are removed again when `divider` is turned off.
+     * ## When to use
+     * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+     * ## When not to use
+     * - Two-dimensional grids (use CSS grid).
+     * - Resizable panes (use `bs-split-pane`).
+     * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+     */
+    interface BsStack {
+        /**
+          * Cross-axis alignment.
+          * @default 'stretch'
+         */
+        "align": BsStackAlign;
+        /**
+          * Main axis: `vertical` stacks children in a column, `horizontal` in a row.
+          * @default 'vertical'
+         */
+        "direction": BsStackDirection;
+        /**
+          * Renders a decorative `bs-divider` between each child.
+          * @default false
+         */
+        "divider": boolean;
+        /**
+          * Spacing token name (e.g. `200` => `--bs-spacing-200`). Invalid values fall back to `100`.
+          * @default '100'
+         */
+        "gap": string;
+        /**
+          * Main-axis distribution.
+          * @default 'start'
+         */
+        "justify": BsStackJustify;
+        /**
+          * Lets items wrap onto further lines.
+          * @default false
+         */
+        "wrap": boolean;
+    }
     /**
      * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
      * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
@@ -4196,6 +4442,10 @@ export interface BsSourceLinkCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsSourceLinkElement;
 }
+export interface BsSplitPaneCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsSplitPaneElement;
+}
 export interface BsSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsSwitchElement;
@@ -4351,6 +4601,33 @@ declare global {
         prototype: HTMLBsAiThinkingElement;
         new (): HTMLBsAiThinkingElement;
     };
+    /**
+     * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+     * with CSS grid. The main column scrolls independently of the header and the side columns.
+     * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+     * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+     * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+     * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+     * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+     * auto track follows the drawer's width on its own.
+     * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+     * `banner` and `navigation` roles.
+     * ## When to use
+     * - The outer frame of an application page with a header and side navigation.
+     * ## When not to use
+     * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+     * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+     * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+     * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+     * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+     */
+    interface HTMLBsAppShellElement extends Components.BsAppShell, HTMLStencilElement {
+    }
+    var HTMLBsAppShellElement: {
+        prototype: HTMLBsAppShellElement;
+        new (): HTMLBsAppShellElement;
+    };
     interface HTMLBsAttachmentElementEventMap {
         "bsRemove": void;
     }
@@ -5211,6 +5488,22 @@ declare global {
         prototype: HTMLBsComposerStatusBannerElement;
         new (): HTMLBsComposerStatusBannerElement;
     };
+    /**
+     * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+     * ## When to use
+     * - Constraining page or section content to a readable, consistent maximum width.
+     * ## When not to use
+     * - Arranging children relative to each other (use `bs-stack`).
+     * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+     * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+     * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+     */
+    interface HTMLBsContainerElement extends Components.BsContainer, HTMLStencilElement {
+    }
+    var HTMLBsContainerElement: {
+        prototype: HTMLBsContainerElement;
+        new (): HTMLBsContainerElement;
+    };
     interface HTMLBsCookieConsentElementEventMap {
         "bsAccept": { choices: BsCookieChoices };
         "bsReject": { choices: BsCookieChoices };
@@ -5357,6 +5650,23 @@ declare global {
         prototype: HTMLBsDialogElement;
         new (): HTMLBsDialogElement;
     };
+    /**
+     * A thin line that separates content, horizontally or vertically.
+     * ## When to use
+     * - Separating groups of related content in a list, menu, toolbar or card.
+     * ## When not to use
+     * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+     * - Drawing a border around a surface (use `bs-card`).
+     * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+     * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+     * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+     */
+    interface HTMLBsDividerElement extends Components.BsDivider, HTMLStencilElement {
+    }
+    var HTMLBsDividerElement: {
+        prototype: HTMLBsDividerElement;
+        new (): HTMLBsDividerElement;
+    };
     interface HTMLBsErrorPageElementEventMap {
         "bsPrimary": void;
         "bsSecondary": void;
@@ -5447,6 +5757,30 @@ declare global {
         prototype: HTMLBsFileUploadItemElement;
         new (): HTMLBsFileUploadItemElement;
     };
+    /**
+     * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+     * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+     * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+     * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+     * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+     * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+     * unknown names fall back to `100`.
+     * ## When to use
+     * - Card grids, form field grids and dashboards where items share equal column tracks.
+     * - Responsive galleries via `minColumnWidth`.
+     * ## When not to use
+     * - A single row or column of items with no wrapping (plain flex).
+     * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+     * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+     * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+     * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+     */
+    interface HTMLBsGridElement extends Components.BsGrid, HTMLStencilElement {
+    }
+    var HTMLBsGridElement: {
+        prototype: HTMLBsGridElement;
+        new (): HTMLBsGridElement;
+    };
     /**
      * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
      * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
@@ -6346,6 +6680,73 @@ declare global {
         prototype: HTMLBsSpinnerElement;
         new (): HTMLBsSpinnerElement;
     };
+    interface HTMLBsSplitPaneElementEventMap {
+        "bsResize": number[];
+        "bsCollapsedChange": boolean;
+    }
+    /**
+     * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+     * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+     * and (optionally) `pane-3`; the pane count follows which slots have content.
+     * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+     * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+     * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+     * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+     * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+     * ## When to use
+     * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+     * ## When not to use
+     * - A temporary overlay panel (use `bs-side-panel`).
+     * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+     *   the dividers purely visual).
+     * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+     * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+     * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+     * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+     * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+     * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+     * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+     * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+     * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+     * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     */
+    interface HTMLBsSplitPaneElement extends Components.BsSplitPane, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsSplitPaneElementEventMap>(type: K, listener: (this: HTMLBsSplitPaneElement, ev: BsSplitPaneCustomEvent<HTMLBsSplitPaneElementEventMap[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 HTMLBsSplitPaneElementEventMap>(type: K, listener: (this: HTMLBsSplitPaneElement, ev: BsSplitPaneCustomEvent<HTMLBsSplitPaneElementEventMap[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 HTMLBsSplitPaneElement: {
+        prototype: HTMLBsSplitPaneElement;
+        new (): HTMLBsSplitPaneElement;
+    };
+    /**
+     * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+     * drawing a divider between children.
+     * Built from: `bs-divider` (when `divider` is set).
+     * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+     * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+     * nodes are never moved; the attributes are removed again when `divider` is turned off.
+     * ## When to use
+     * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+     * ## When not to use
+     * - Two-dimensional grids (use CSS grid).
+     * - Resizable panes (use `bs-split-pane`).
+     * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+     */
+    interface HTMLBsStackElement extends Components.BsStack, HTMLStencilElement {
+    }
+    var HTMLBsStackElement: {
+        prototype: HTMLBsStackElement;
+        new (): HTMLBsStackElement;
+    };
     /**
      * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
      * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
@@ -6679,6 +7080,7 @@ declare global {
         "bs-ai-disclaimer": HTMLBsAiDisclaimerElement;
         "bs-ai-greeting": HTMLBsAiGreetingElement;
         "bs-ai-thinking": HTMLBsAiThinkingElement;
+        "bs-app-shell": HTMLBsAppShellElement;
         "bs-attachment": HTMLBsAttachmentElement;
         "bs-attachment-list": HTMLBsAttachmentListElement;
         "bs-avatar": HTMLBsAvatarElement;
@@ -6703,13 +7105,16 @@ declare global {
         "bs-citation-preview": HTMLBsCitationPreviewElement;
         "bs-composer": HTMLBsComposerElement;
         "bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
+        "bs-container": HTMLBsContainerElement;
         "bs-cookie-consent": HTMLBsCookieConsentElement;
         "bs-data-table": HTMLBsDataTableElement;
         "bs-datepicker": HTMLBsDatepickerElement;
         "bs-dialog": HTMLBsDialogElement;
+        "bs-divider": HTMLBsDividerElement;
         "bs-error-page": HTMLBsErrorPageElement;
         "bs-file-upload": HTMLBsFileUploadElement;
         "bs-file-upload-item": HTMLBsFileUploadItemElement;
+        "bs-grid": HTMLBsGridElement;
         "bs-icon-button": HTMLBsIconButtonElement;
         "bs-icon-tile": HTMLBsIconTileElement;
         "bs-inline-tab": HTMLBsInlineTabElement;
@@ -6737,6 +7142,8 @@ declare global {
         "bs-snackbar": HTMLBsSnackbarElement;
         "bs-source-link": HTMLBsSourceLinkElement;
         "bs-spinner": HTMLBsSpinnerElement;
+        "bs-split-pane": HTMLBsSplitPaneElement;
+        "bs-stack": HTMLBsStackElement;
         "bs-stepper": HTMLBsStepperElement;
         "bs-stepper-step": HTMLBsStepperStepElement;
         "bs-switch": HTMLBsSwitchElement;
@@ -6894,6 +7301,34 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    /**
+     * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+     * with CSS grid. The main column scrolls independently of the header and the side columns.
+     * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+     * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+     * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+     * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+     * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+     * auto track follows the drawer's width on its own.
+     * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+     * `banner` and `navigation` roles.
+     * ## When to use
+     * - The outer frame of an application page with a header and side navigation.
+     * ## When not to use
+     * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+     * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+     * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+     * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+     * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+     */
+    interface BsAppShell {
+        /**
+          * When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`.
+          * @default true
+         */
+        "fullHeight"?: boolean;
+    }
     /**
      * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
      * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
@@ -8277,6 +8712,28 @@ declare namespace LocalJSX {
          */
         "type"?: BsComposerStatusBannerType;
     }
+    /**
+     * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+     * ## When to use
+     * - Constraining page or section content to a readable, consistent maximum width.
+     * ## When not to use
+     * - Arranging children relative to each other (use `bs-stack`).
+     * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+     * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+     * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+     */
+    interface BsContainer {
+        /**
+          * Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`.
+          * @default '300'
+         */
+        "padding"?: string;
+        /**
+          * Maximum width, taken from the breakpoint tokens. `fluid` removes the limit.
+          * @default 'xl'
+         */
+        "size"?: BsContainerSize;
+    }
     /**
      * A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
      * - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
@@ -8591,6 +9048,39 @@ declare namespace LocalJSX {
          */
         "size"?: BsDialogSize;
     }
+    /**
+     * A thin line that separates content, horizontally or vertically.
+     * ## When to use
+     * - Separating groups of related content in a list, menu, toolbar or card.
+     * ## When not to use
+     * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+     * - Drawing a border around a surface (use `bs-card`).
+     * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+     * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+     * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+     */
+    interface BsDivider {
+        /**
+          * Purely visual: hides the divider from assistive technology instead of exposing a separator.
+          * @default false
+         */
+        "decorative"?: boolean;
+        /**
+          * Indents the line from its start edge, or from both edges.
+          * @default 'none'
+         */
+        "inset"?: BsDividerInset;
+        /**
+          * Direction of the line. A vertical divider stretches to the height of its container.
+          * @default 'horizontal'
+         */
+        "orientation"?: BsDividerOrientation;
+        /**
+          * Visual weight of the line.
+          * @default 'default'
+         */
+        "variant"?: BsDividerVariant;
+    }
     /**
      * A full-block page for when the user can't get to what they asked for: page not found (404), a server
      * error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
@@ -8770,6 +9260,53 @@ declare namespace LocalJSX {
          */
         "thumbnailSrc"?: string;
     }
+    /**
+     * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+     * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+     * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+     * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+     * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+     * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+     * unknown names fall back to `100`.
+     * ## When to use
+     * - Card grids, form field grids and dashboards where items share equal column tracks.
+     * - Responsive galleries via `minColumnWidth`.
+     * ## When not to use
+     * - A single row or column of items with no wrapping (plain flex).
+     * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+     * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+     * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+     * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+     */
+    interface BsGrid {
+        /**
+          * Block-axis alignment of items within their cell.
+          * @default 'stretch'
+         */
+        "align"?: BsGridAlign;
+        /**
+          * Spacing token name for the column gap; overrides `gap` for columns.
+         */
+        "columnGap"?: string;
+        /**
+          * A number of equal columns (`"3"`), or a raw `grid-template-columns` value. Ignored when `minColumnWidth` is set.
+          * @default '1'
+         */
+        "columns"?: string;
+        /**
+          * Spacing token name for the gap on both axes, e.g. `"200"` for `--bs-spacing-200`.
+          * @default '100'
+         */
+        "gap"?: string;
+        /**
+          * CSS length (e.g. `240px`). Switches to auto-fit columns at least this wide and overrides `columns`.
+         */
+        "minColumnWidth"?: string;
+        /**
+          * Spacing token name for the row gap; overrides `gap` for rows.
+         */
+        "rowGap"?: string;
+    }
     /**
      * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
      * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
@@ -10504,6 +11041,116 @@ declare namespace LocalJSX {
          */
         "size"?: BsSpinnerSize;
     }
+    /**
+     * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+     * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+     * and (optionally) `pane-3`; the pane count follows which slots have content.
+     * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+     * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+     * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+     * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+     * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+     * ## When to use
+     * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+     * ## When not to use
+     * - A temporary overlay panel (use `bs-side-panel`).
+     * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+     *   the dividers purely visual).
+     * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+     * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+     * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+     * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+     * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+     * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+     * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+     * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+     * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+     * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+     * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     */
+    interface BsSplitPane {
+        /**
+          * Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it.
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * Accessible name of each divider.
+          * @default 'Resize panes'
+         */
+        "dividerLabel"?: string;
+        /**
+          * Fires when `collapsed` changes through user interaction.
+         */
+        "onBsCollapsedChange"?: (event: BsSplitPaneCustomEvent<boolean>) => void;
+        /**
+          * Fires after a resize (pointer release or key press) with the pixel size of every pane except the last.
+         */
+        "onBsResize"?: (event: BsSplitPaneCustomEvent<number[]>) => void;
+        /**
+          * `horizontal` = panes side by side, `vertical` = panes stacked.
+          * @default 'horizontal'
+         */
+        "orientation"?: BsSplitPaneOrientation;
+        /**
+          * Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators.
+          * @default true
+         */
+        "resizable"?: boolean;
+        /**
+          * Pixels moved per arrow-key press (Shift multiplies by 4).
+          * @default 16
+         */
+        "step"?: number;
+    }
+    /**
+     * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+     * drawing a divider between children.
+     * Built from: `bs-divider` (when `divider` is set).
+     * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+     * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+     * nodes are never moved; the attributes are removed again when `divider` is turned off.
+     * ## When to use
+     * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+     * ## When not to use
+     * - Two-dimensional grids (use CSS grid).
+     * - Resizable panes (use `bs-split-pane`).
+     * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+     */
+    interface BsStack {
+        /**
+          * Cross-axis alignment.
+          * @default 'stretch'
+         */
+        "align"?: BsStackAlign;
+        /**
+          * Main axis: `vertical` stacks children in a column, `horizontal` in a row.
+          * @default 'vertical'
+         */
+        "direction"?: BsStackDirection;
+        /**
+          * Renders a decorative `bs-divider` between each child.
+          * @default false
+         */
+        "divider"?: boolean;
+        /**
+          * Spacing token name (e.g. `200` => `--bs-spacing-200`). Invalid values fall back to `100`.
+          * @default '100'
+         */
+        "gap"?: string;
+        /**
+          * Main-axis distribution.
+          * @default 'start'
+         */
+        "justify"?: BsStackJustify;
+        /**
+          * Lets items wrap onto further lines.
+          * @default false
+         */
+        "wrap"?: boolean;
+    }
     /**
      * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
      * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
@@ -11161,6 +11808,9 @@ declare namespace LocalJSX {
     interface BsAiThinkingAttributes {
         "label": string;
     }
+    interface BsAppShellAttributes {
+        "fullHeight": boolean;
+    }
     interface BsAttachmentAttributes {
         "uploadingLabel": string;
         "removeLabel": string;
@@ -11342,6 +11992,10 @@ declare namespace LocalJSX {
         "closeLabel": string;
         "allowClose": boolean;
     }
+    interface BsContainerAttributes {
+        "size": BsContainerSize;
+        "padding": string;
+    }
     interface BsCookieConsentAttributes {
         "type": BsCookieConsentType;
         "heading": string;
@@ -11388,6 +12042,12 @@ declare namespace LocalJSX {
         "size": BsDialogSize;
         "centered": boolean;
     }
+    interface BsDividerAttributes {
+        "orientation": BsDividerOrientation;
+        "variant": BsDividerVariant;
+        "inset": BsDividerInset;
+        "decorative": boolean;
+    }
     interface BsErrorPageAttributes {
         "type": BsErrorPageType;
         "code": string;
@@ -11419,6 +12079,14 @@ declare namespace LocalJSX {
         "cancelLabel": string;
         "removeLabel": string;
     }
+    interface BsGridAttributes {
+        "columns": string;
+        "gap": string;
+        "rowGap": string;
+        "columnGap": string;
+        "minColumnWidth": string;
+        "align": BsGridAlign;
+    }
     interface BsIconButtonAttributes {
         "variant": BsIconButtonVariant;
         "size": BsIconButtonSize;
@@ -11680,6 +12348,21 @@ declare namespace LocalJSX {
         "size": BsSpinnerSize;
         "label": string;
     }
+    interface BsSplitPaneAttributes {
+        "orientation": BsSplitPaneOrientation;
+        "collapsed": boolean;
+        "resizable": boolean;
+        "dividerLabel": string;
+        "step": number;
+    }
+    interface BsStackAttributes {
+        "direction": BsStackDirection;
+        "gap": string;
+        "align": BsStackAlign;
+        "justify": BsStackJustify;
+        "wrap": boolean;
+        "divider": boolean;
+    }
     interface BsStepperAttributes {
         "currentStep": number;
         "direction": BsStepperDirection;
@@ -11784,6 +12467,7 @@ declare namespace LocalJSX {
         "bs-ai-disclaimer": BsAiDisclaimer;
         "bs-ai-greeting": Omit<BsAiGreeting, keyof BsAiGreetingAttributes> & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes]?: BsAiGreeting[K] } & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes as `attr:${K}`]?: BsAiGreetingAttributes[K] } & { [K in keyof BsAiGreeting & keyof BsAiGreetingAttributes as `prop:${K}`]?: BsAiGreeting[K] };
         "bs-ai-thinking": Omit<BsAiThinking, keyof BsAiThinkingAttributes> & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes]?: BsAiThinking[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `attr:${K}`]?: BsAiThinkingAttributes[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `prop:${K}`]?: BsAiThinking[K] };
+        "bs-app-shell": Omit<BsAppShell, keyof BsAppShellAttributes> & { [K in keyof BsAppShell & keyof BsAppShellAttributes]?: BsAppShell[K] } & { [K in keyof BsAppShell & keyof BsAppShellAttributes as `attr:${K}`]?: BsAppShellAttributes[K] } & { [K in keyof BsAppShell & keyof BsAppShellAttributes as `prop:${K}`]?: BsAppShell[K] };
         "bs-attachment": Omit<BsAttachment, keyof BsAttachmentAttributes> & { [K in keyof BsAttachment & keyof BsAttachmentAttributes]?: BsAttachment[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `attr:${K}`]?: BsAttachmentAttributes[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `prop:${K}`]?: BsAttachment[K] };
         "bs-attachment-list": Omit<BsAttachmentList, keyof BsAttachmentListAttributes> & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes]?: BsAttachmentList[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `attr:${K}`]?: BsAttachmentListAttributes[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `prop:${K}`]?: BsAttachmentList[K] };
         "bs-avatar": Omit<BsAvatar, keyof BsAvatarAttributes> & { [K in keyof BsAvatar & keyof BsAvatarAttributes]?: BsAvatar[K] } & { [K in keyof BsAvatar & keyof BsAvatarAttributes as `attr:${K}`]?: BsAvatarAttributes[K] } & { [K in keyof BsAvatar & keyof BsAvatarAttributes as `prop:${K}`]?: BsAvatar[K] };
@@ -11808,13 +12492,16 @@ declare namespace LocalJSX {
         "bs-citation-preview": Omit<BsCitationPreview, keyof BsCitationPreviewAttributes> & { [K in keyof BsCitationPreview & keyof BsCitationPreviewAttributes]?: BsCitationPreview[K] } & { [K in keyof BsCitationPreview & keyof BsCitationPreviewAttributes as `attr:${K}`]?: BsCitationPreviewAttributes[K] } & { [K in keyof BsCitationPreview & keyof BsCitationPreviewAttributes as `prop:${K}`]?: BsCitationPreview[K] };
         "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-container": Omit<BsContainer, keyof BsContainerAttributes> & { [K in keyof BsContainer & keyof BsContainerAttributes]?: BsContainer[K] } & { [K in keyof BsContainer & keyof BsContainerAttributes as `attr:${K}`]?: BsContainerAttributes[K] } & { [K in keyof BsContainer & keyof BsContainerAttributes as `prop:${K}`]?: BsContainer[K] };
         "bs-cookie-consent": Omit<BsCookieConsent, keyof BsCookieConsentAttributes> & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes]?: BsCookieConsent[K] } & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes as `attr:${K}`]?: BsCookieConsentAttributes[K] } & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes as `prop:${K}`]?: BsCookieConsent[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-divider": Omit<BsDivider, keyof BsDividerAttributes> & { [K in keyof BsDivider & keyof BsDividerAttributes]?: BsDivider[K] } & { [K in keyof BsDivider & keyof BsDividerAttributes as `attr:${K}`]?: BsDividerAttributes[K] } & { [K in keyof BsDivider & keyof BsDividerAttributes as `prop:${K}`]?: BsDivider[K] };
         "bs-error-page": Omit<BsErrorPage, keyof BsErrorPageAttributes> & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes]?: BsErrorPage[K] } & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes as `attr:${K}`]?: BsErrorPageAttributes[K] } & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes as `prop:${K}`]?: BsErrorPage[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] };
+        "bs-grid": Omit<BsGrid, keyof BsGridAttributes> & { [K in keyof BsGrid & keyof BsGridAttributes]?: BsGrid[K] } & { [K in keyof BsGrid & keyof BsGridAttributes as `attr:${K}`]?: BsGridAttributes[K] } & { [K in keyof BsGrid & keyof BsGridAttributes as `prop:${K}`]?: BsGrid[K] };
         "bs-icon-button": Omit<BsIconButton, keyof BsIconButtonAttributes> & { [K in keyof BsIconButton & keyof BsIconButtonAttributes]?: BsIconButton[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `attr:${K}`]?: BsIconButtonAttributes[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `prop:${K}`]?: BsIconButton[K] };
         "bs-icon-tile": Omit<BsIconTile, keyof BsIconTileAttributes> & { [K in keyof BsIconTile & keyof BsIconTileAttributes]?: BsIconTile[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `attr:${K}`]?: BsIconTileAttributes[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `prop:${K}`]?: BsIconTile[K] };
         "bs-inline-tab": Omit<BsInlineTab, keyof BsInlineTabAttributes> & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes]?: BsInlineTab[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `attr:${K}`]?: BsInlineTabAttributes[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `prop:${K}`]?: BsInlineTab[K] };
@@ -11842,6 +12529,8 @@ declare namespace LocalJSX {
         "bs-snackbar": Omit<BsSnackbar, keyof BsSnackbarAttributes> & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes]?: BsSnackbar[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `attr:${K}`]?: BsSnackbarAttributes[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `prop:${K}`]?: BsSnackbar[K] };
         "bs-source-link": Omit<BsSourceLink, keyof BsSourceLinkAttributes> & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes]?: BsSourceLink[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `attr:${K}`]?: BsSourceLinkAttributes[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `prop:${K}`]?: BsSourceLink[K] };
         "bs-spinner": Omit<BsSpinner, keyof BsSpinnerAttributes> & { [K in keyof BsSpinner & keyof BsSpinnerAttributes]?: BsSpinner[K] } & { [K in keyof BsSpinner & keyof BsSpinnerAttributes as `attr:${K}`]?: BsSpinnerAttributes[K] } & { [K in keyof BsSpinner & keyof BsSpinnerAttributes as `prop:${K}`]?: BsSpinner[K] };
+        "bs-split-pane": Omit<BsSplitPane, keyof BsSplitPaneAttributes> & { [K in keyof BsSplitPane & keyof BsSplitPaneAttributes]?: BsSplitPane[K] } & { [K in keyof BsSplitPane & keyof BsSplitPaneAttributes as `attr:${K}`]?: BsSplitPaneAttributes[K] } & { [K in keyof BsSplitPane & keyof BsSplitPaneAttributes as `prop:${K}`]?: BsSplitPane[K] };
+        "bs-stack": Omit<BsStack, keyof BsStackAttributes> & { [K in keyof BsStack & keyof BsStackAttributes]?: BsStack[K] } & { [K in keyof BsStack & keyof BsStackAttributes as `attr:${K}`]?: BsStackAttributes[K] } & { [K in keyof BsStack & keyof BsStackAttributes as `prop:${K}`]?: BsStack[K] };
         "bs-stepper": Omit<BsStepper, keyof BsStepperAttributes> & { [K in keyof BsStepper & keyof BsStepperAttributes]?: BsStepper[K] } & { [K in keyof BsStepper & keyof BsStepperAttributes as `attr:${K}`]?: BsStepperAttributes[K] } & { [K in keyof BsStepper & keyof BsStepperAttributes as `prop:${K}`]?: BsStepper[K] };
         "bs-stepper-step": Omit<BsStepperStep, keyof BsStepperStepAttributes> & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes]?: BsStepperStep[K] } & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes as `attr:${K}`]?: BsStepperStepAttributes[K] } & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes as `prop:${K}`]?: BsStepperStep[K] };
         "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] };
@@ -11949,6 +12638,28 @@ declare module "@stencil/core" {
              * `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
              */
             "bs-ai-thinking": LocalJSX.IntrinsicElements["bs-ai-thinking"] & JSXBase.HTMLAttributes<HTMLBsAiThinkingElement>;
+            /**
+             * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+             * with CSS grid. The main column scrolls independently of the header and the side columns.
+             * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+             * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+             * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+             * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+             * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+             * auto track follows the drawer's width on its own.
+             * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+             * `banner` and `navigation` roles.
+             * ## When to use
+             * - The outer frame of an application page with a header and side navigation.
+             * ## When not to use
+             * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+             * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+             * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+             * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+             * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+             * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+             */
+            "bs-app-shell": LocalJSX.IntrinsicElements["bs-app-shell"] & JSXBase.HTMLAttributes<HTMLBsAppShellElement>;
             /**
              * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
              * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
@@ -12504,6 +13215,17 @@ declare module "@stencil/core" {
              * every `type`). Aliased to `--bs-color-neutral-container-hover`.
              */
             "bs-composer-status-banner": LocalJSX.IntrinsicElements["bs-composer-status-banner"] & JSXBase.HTMLAttributes<HTMLBsComposerStatusBannerElement>;
+            /**
+             * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+             * ## When to use
+             * - Constraining page or section content to a readable, consistent maximum width.
+             * ## When not to use
+             * - Arranging children relative to each other (use `bs-stack`).
+             * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+             * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+             * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+             */
+            "bs-container": LocalJSX.IntrinsicElements["bs-container"] & JSXBase.HTMLAttributes<HTMLBsContainerElement>;
             /**
              * A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
              * - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
@@ -12579,6 +13301,18 @@ declare module "@stencil/core" {
              * button in the header row next to the heading, same as before this addition.
              */
             "bs-dialog": LocalJSX.IntrinsicElements["bs-dialog"] & JSXBase.HTMLAttributes<HTMLBsDialogElement>;
+            /**
+             * A thin line that separates content, horizontally or vertically.
+             * ## When to use
+             * - Separating groups of related content in a list, menu, toolbar or card.
+             * ## When not to use
+             * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+             * - Drawing a border around a surface (use `bs-card`).
+             * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+             * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+             * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+             */
+            "bs-divider": LocalJSX.IntrinsicElements["bs-divider"] & JSXBase.HTMLAttributes<HTMLBsDividerElement>;
             /**
              * A full-block page for when the user can't get to what they asked for: page not found (404), a server
              * error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
@@ -12618,6 +13352,25 @@ declare module "@stencil/core" {
              * - Attaching files to a chat message -- use `bs-attachment`.
              */
             "bs-file-upload-item": LocalJSX.IntrinsicElements["bs-file-upload-item"] & JSXBase.HTMLAttributes<HTMLBsFileUploadItemElement>;
+            /**
+             * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+             * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+             * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+             * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+             * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+             * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+             * unknown names fall back to `100`.
+             * ## When to use
+             * - Card grids, form field grids and dashboards where items share equal column tracks.
+             * - Responsive galleries via `minColumnWidth`.
+             * ## When not to use
+             * - A single row or column of items with no wrapping (plain flex).
+             * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+             * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+             * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+             * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+             */
+            "bs-grid": LocalJSX.IntrinsicElements["bs-grid"] & JSXBase.HTMLAttributes<HTMLBsGridElement>;
             /**
              * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
              * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
@@ -13169,6 +13922,51 @@ declare module "@stencil/core" {
              * @prop --bs-spinner-duration - Rotation duration. Defaults to `0.8s`.
              */
             "bs-spinner": LocalJSX.IntrinsicElements["bs-spinner"] & JSXBase.HTMLAttributes<HTMLBsSpinnerElement>;
+            /**
+             * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+             * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+             * and (optionally) `pane-3`; the pane count follows which slots have content.
+             * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+             * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+             * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+             * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+             * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+             * ## When to use
+             * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+             * ## When not to use
+             * - A temporary overlay panel (use `bs-side-panel`).
+             * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+             *   the dividers purely visual).
+             * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+             * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+             * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+             * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+             * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+             * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+             * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+             * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+             * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+             * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+             * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+             * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+             * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+             */
+            "bs-split-pane": LocalJSX.IntrinsicElements["bs-split-pane"] & JSXBase.HTMLAttributes<HTMLBsSplitPaneElement>;
+            /**
+             * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+             * drawing a divider between children.
+             * Built from: `bs-divider` (when `divider` is set).
+             * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+             * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+             * nodes are never moved; the attributes are removed again when `divider` is turned off.
+             * ## When to use
+             * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+             * ## When not to use
+             * - Two-dimensional grids (use CSS grid).
+             * - Resizable panes (use `bs-split-pane`).
+             * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+             */
+            "bs-stack": LocalJSX.IntrinsicElements["bs-stack"] & JSXBase.HTMLAttributes<HTMLBsStackElement>;
             /**
              * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
              * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or