@brandsync/wc 1.7.0 → 1.9.0

package/dist/types/components.d.ts

@@ -494,7 +494,7 @@ export namespace Components {
          */
         "size": BsButtonSize;
         /**
-          * Native `<button>` type.
+          * Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation runs); `reset` resets it; `button` (default) does nothing on its own.
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
@@ -874,11 +874,25 @@ export namespace Components {
           * @default false
          */
         "indeterminate": boolean;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
+        /**
+          * Marks the checkbox as required: the surrounding form fails validation while unchecked.
+          * @default false
+         */
+        "required": boolean;
         /**
           * Sizing scale. Controls the box's width/height and border width; corner radius is constant across all sizes.
           * @default 'lg'
          */
         "size": BsCheckboxSize;
+        /**
+          * The value submitted when checked (native checkbox default: `"on"`).
+          * @default 'on'
+         */
+        "value": string;
     }
     /**
      * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
@@ -1173,7 +1187,7 @@ export namespace Components {
      */
     interface BsDataTable {
         /**
-          * Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value.
+          * Optional custom cell renderer, for rich cells such as a status badge, a link or an actions column. It returns an **HTML string** that is inserted into the cell as real markup (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.  **When set it renders every cell, not just the special ones** -- return the plain value for ordinary columns too. And **the returned string is not escaped or sanitized** (same trust model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are rendered as escaped text.  The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the table itself).  Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value (as escaped text) when unset.
          */
         "cellRenderer"?: (row: BsDataTableRow, column: BsDataTableColumn) => string;
         /**
@@ -1374,7 +1388,7 @@ export namespace Components {
          */
         "size": BsIconButtonSize;
         /**
-          * Native `<button>` type.
+          * Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation runs); `reset` resets it; `button` (default) does nothing on its own.
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
@@ -1422,6 +1436,14 @@ export namespace Components {
           * @default false
          */
         "selected": boolean;
+        /**
+          * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
+         */
+        "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
@@ -1480,6 +1502,10 @@ export namespace Components {
           * Minimum value for `type="number"`'s stepper buttons.
          */
         "min"?: number;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
         /**
           * Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu` of `bs-menu-item`s is rendered below the field.
           * @default false
@@ -1658,6 +1684,13 @@ export namespace Components {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * 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.
      */
     interface BsNavigationDrawer {
         /**
@@ -1680,6 +1713,11 @@ export namespace Components {
           * @default 'auto'
          */
         "logoBackground": 'auto' | 'light' | 'dark';
+        /**
+          * 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.
+          * @default false
+         */
+        "open": boolean;
         /**
           * 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.
           * @default true
@@ -1847,6 +1885,11 @@ export namespace Components {
      *   weight of a ring.
      */
     interface BsProgress {
+        /**
+          * Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech -- a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`.
+          * @default null
+         */
+        "ariaLabel": string | null;
         /**
           * Shows the `${value}%` label below the ring. Only takes effect for `type="determinate"` -- `indeterminate` never shows a label regardless of this prop, since there's no percentage to show. Defaults to `true`.
           * @default true
@@ -1936,7 +1979,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The native radio input's `name` attribute. Passed straight through to the native input inside. NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">` mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend across separate `bs-radio` instances sharing the same `name` -- checking one will not natively uncheck another. Within a single instance this still behaves like a normal radio input. See bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group` wrapper exists.
+          * The native radio input's `name` attribute. Passed straight through to the native input inside. Also the group key: `bs-radio` elements sharing a `name` within the same root (document or shadow root) behave as one radio group -- checking one unchecks the others, arrow keys move between them, and only one is in the tab order. Native grouping can't cross each radio's own shadow root, so this component implements it itself.
          */
         "name": string;
         /**
@@ -1985,6 +2028,10 @@ export namespace Components {
           * @default 0
          */
         "min": number;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type="range"` submits two entries under this name: the start value, then the end value.
+         */
+        "name"?: string;
         /**
           * Number of equal divisions marked by tick lines along the track, for `type="segmented"` only. The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the tick spacing math consistent while not visually doubling up with the track's own start edge -- this matches the design spec, not a bug.
           * @default 10
@@ -2221,11 +2268,20 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
         /**
           * Sizing scale. Controls the track's width/height and the knob's diameter.
           * @default 'lg'
          */
         "size": BsSwitchSize;
+        /**
+          * The value submitted when on (native checkbox default: `"on"`).
+          * @default 'on'
+         */
+        "value": string;
     }
     /**
      * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
@@ -2266,6 +2322,14 @@ export namespace Components {
           * @default false
          */
         "selected": boolean;
+        /**
+          * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
+         */
+        "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
@@ -2295,6 +2359,10 @@ export namespace Components {
           * @default 'bs-tab'
          */
         "type": BsTabsType;
+        /**
+          * The selected tab's `value`. Mutable and reflected: it follows the user's selection, and setting it from outside (attribute or property) selects the matching tab -- without emitting `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop, or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...). If unset, it is read from whichever tab is already `selected` once the group loads.
+         */
+        "value"?: string;
     }
     /**
      * A transient status message for confirming the result of an action (e.g. "Files uploaded
@@ -2354,6 +2422,14 @@ export interface BsAttachmentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsAttachmentElement;
 }
+export interface BsBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsBreadcrumbElement;
+}
+export interface BsBreadcrumbOverflowCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsBreadcrumbOverflowElement;
+}
 export interface BsCarouselCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsCarouselElement;
@@ -2462,6 +2538,10 @@ export interface BsTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsTabElement;
 }
+export interface BsTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTabsElement;
+}
 export interface BsToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsToastElement;
@@ -2681,6 +2761,9 @@ declare global {
         prototype: HTMLBsBadgeElement;
         new (): HTMLBsBadgeElement;
     };
+    interface HTMLBsBreadcrumbElementEventMap {
+        "bsNavigate": { href: string };
+    }
     /**
      * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
      * plain text, or the current-page label, depending on `current`/`href`.
@@ -2698,11 +2781,22 @@ declare global {
      *   first-child-aware separator hiding depend on that parent structure.
      */
     interface HTMLBsBreadcrumbElement extends Components.BsBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbElement, ev: BsBreadcrumbCustomEvent<HTMLBsBreadcrumbElementEventMap[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 HTMLBsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbElement, ev: BsBreadcrumbCustomEvent<HTMLBsBreadcrumbElementEventMap[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 HTMLBsBreadcrumbElement: {
         prototype: HTMLBsBreadcrumbElement;
         new (): HTMLBsBreadcrumbElement;
     };
+    interface HTMLBsBreadcrumbOverflowElementEventMap {
+        "bsNavigate": { href: string };
+    }
     /**
      * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
      * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
@@ -2729,6 +2823,14 @@ declare global {
      * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
      */
     interface HTMLBsBreadcrumbOverflowElement extends Components.BsBreadcrumbOverflow, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsBreadcrumbOverflowElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbOverflowElement, ev: BsBreadcrumbOverflowCustomEvent<HTMLBsBreadcrumbOverflowElementEventMap[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 HTMLBsBreadcrumbOverflowElementEventMap>(type: K, listener: (this: HTMLBsBreadcrumbOverflowElement, ev: BsBreadcrumbOverflowCustomEvent<HTMLBsBreadcrumbOverflowElementEventMap[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 HTMLBsBreadcrumbOverflowElement: {
         prototype: HTMLBsBreadcrumbOverflowElement;
@@ -3696,6 +3798,7 @@ declare global {
     interface HTMLBsNavigationDrawerElementEventMap {
         "bsCollapse": boolean;
         "bsSearchClick": void;
+        "bsClose": void;
     }
     /**
      * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
@@ -3730,6 +3833,13 @@ declare global {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * 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.
      */
     interface HTMLBsNavigationDrawerElement extends Components.BsNavigationDrawer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBsNavigationDrawerElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerElement, ev: BsNavigationDrawerCustomEvent<HTMLBsNavigationDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4138,6 +4248,9 @@ declare global {
         prototype: HTMLBsTabElement;
         new (): HTMLBsTabElement;
     };
+    interface HTMLBsTabsElementEventMap {
+        "bsChange": { value: string };
+    }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
      * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
@@ -4156,6 +4269,14 @@ declare global {
      *   directly.
      */
     interface HTMLBsTabsElement extends Components.BsTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTabsElementEventMap>(type: K, listener: (this: HTMLBsTabsElement, ev: BsTabsCustomEvent<HTMLBsTabsElementEventMap[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 HTMLBsTabsElementEventMap>(type: K, listener: (this: HTMLBsTabsElement, ev: BsTabsCustomEvent<HTMLBsTabsElementEventMap[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 HTMLBsTabsElement: {
         prototype: HTMLBsTabsElement;
@@ -4584,6 +4705,10 @@ declare namespace LocalJSX {
           * Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
          */
         "href"?: string;
+        /**
+          * Fires when the crumb's link is clicked, before the browser navigates. **Cancelable**: call `event.preventDefault()` to stop the native navigation and route it yourself (an SPA router). Detail is `{ href }`. Only a plain primary-button click emits it -- ctrl/cmd/shift/alt-clicks and middle-clicks (open in a new tab/window) are left to the browser. Bubbles and is composed, so one listener on the surrounding `<bs-breadcrumbs>` covers every crumb.
+         */
+        "onBsNavigate"?: (event: BsBreadcrumbCustomEvent<{ href: string }>) => void;
         /**
           * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom properties can't carry an enum that switches rules on their own. Can also be set directly on a standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`.
           * @default 'md'
@@ -4621,6 +4746,10 @@ declare namespace LocalJSX {
           * @default []
          */
         "items"?: BsBreadcrumbOverflowItem[];
+        /**
+          * Fires when one of the popup's links is clicked, before the browser navigates. **Cancelable** -- see `bs-breadcrumb`'s `bsNavigate`, which this mirrors (same detail, same modified-click rule). Detail is `{ href }`.
+         */
+        "onBsNavigate"?: (event: BsBreadcrumbOverflowCustomEvent<{ href: string }>) => void;
         /**
           * Accessible name (`aria-label`) for the icon-only ellipsis trigger button.
           * @default 'Show hidden breadcrumbs'
@@ -4697,13 +4826,21 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
         /**
           * Sizing scale.
           * @default 'md'
          */
         "size"?: BsButtonSize;
         /**
-          * Native `<button>` type.
+          * Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation runs); `reset` resets it; `button` (default) does nothing on its own.
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
@@ -5154,20 +5291,38 @@ declare namespace LocalJSX {
           * @default false
          */
         "error"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * Whether the checkbox is in the indeterminate ("partially selected") state -- shows a minus icon instead of a check, and takes visual precedence over `checked`. Unlike `checked`, native checkboxes have no `indeterminate` HTML attribute; it can only be set as a JS property on the element. This `@Prop` still works as an attribute for the *host* (`<bs-checkbox>`) since that's this component's own reflected state, not the native control's -- the native `<input>` inside has its `.indeterminate` property set imperatively in `componentDidLoad`/`componentDidUpdate`.
           * @default false
          */
         "indeterminate"?: boolean;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
         /**
           * Emitted when the checked state changes via user interaction, with the new `checked` value.
          */
         "onBsChange"?: (event: BsCheckboxCustomEvent<boolean>) => void;
+        /**
+          * Marks the checkbox as required: the surrounding form fails validation while unchecked.
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * Sizing scale. Controls the box's width/height and border width; corner radius is constant across all sizes.
           * @default 'lg'
          */
         "size"?: BsCheckboxSize;
+        /**
+          * The value submitted when checked (native checkbox default: `"on"`).
+          * @default 'on'
+         */
+        "value"?: string;
     }
     /**
      * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
@@ -5506,7 +5661,7 @@ declare namespace LocalJSX {
      */
     interface BsDataTable {
         /**
-          * Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value.
+          * Optional custom cell renderer, for rich cells such as a status badge, a link or an actions column. It returns an **HTML string** that is inserted into the cell as real markup (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.  **When set it renders every cell, not just the special ones** -- return the plain value for ordinary columns too. And **the returned string is not escaped or sanitized** (same trust model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are rendered as escaped text.  The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the table itself).  Function props are JS-property-only, same as array props -- there is no attribute equivalent. Falls back to the raw cell value (as escaped text) when unset.
          */
         "cellRenderer"?: (row: BsDataTableRow, column: BsDataTableColumn) => string;
         /**
@@ -5716,13 +5871,21 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
         /**
           * Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact chip/tag "remove" controls, not just a smaller toolbar button -- verified against a separate Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were built against.
           * @default 'md'
          */
         "size"?: BsIconButtonSize;
         /**
-          * Native `<button>` type.
+          * Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation runs); `reset` resets it; `button` (default) does nothing on its own.
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
@@ -5774,6 +5937,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "selected"?: boolean;
+        /**
+          * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
+         */
+        "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
@@ -5813,6 +5984,10 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "error"?: string;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` -- `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and Stencil warns against shadowing it with a component `@Prop`.
           * @default ''
@@ -5832,6 +6007,10 @@ declare namespace LocalJSX {
           * Minimum value for `type="number"`'s stepper buttons.
          */
         "min"?: number;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
         "onBsChange"?: (event: BsInputCustomEvent<string>) => void;
         /**
           * Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`.
@@ -6036,6 +6215,13 @@ declare namespace LocalJSX {
      * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
      * 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.
      */
     interface BsNavigationDrawer {
         /**
@@ -6058,6 +6244,10 @@ declare namespace LocalJSX {
           * @default 'auto'
          */
         "logoBackground"?: 'auto' | 'light' | 'dark';
+        /**
+          * 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.
+         */
+        "onBsClose"?: (event: BsNavigationDrawerCustomEvent<void>) => void;
         /**
           * Fires with the new `collapsed` value when the collapse toggle button is clicked.
          */
@@ -6066,6 +6256,11 @@ declare namespace LocalJSX {
           * Fires when the compact search-trigger button (shown instead of the `search` slot while `collapsed`) is clicked -- e.g. to open a full search overlay. This component has no visibility into what the `search` slot actually contains, so it can't drive a real search itself once shrunk to icon size.
          */
         "onBsSearchClick"?: (event: BsNavigationDrawerCustomEvent<void>) => 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.
+          * @default false
+         */
+        "open"?: boolean;
         /**
           * 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.
           * @default true
@@ -6245,6 +6440,11 @@ declare namespace LocalJSX {
      *   weight of a ring.
      */
     interface BsProgress {
+        /**
+          * Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech -- a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
         /**
           * Shows the `${value}%` label below the ring. Only takes effect for `type="determinate"` -- `indeterminate` never shows a label regardless of this prop, since there's no percentage to show. Defaults to `true`.
           * @default true
@@ -6334,11 +6534,15 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The native radio input's `name` attribute. Passed straight through to the native input inside. NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">` mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend across separate `bs-radio` instances sharing the same `name` -- checking one will not natively uncheck another. Within a single instance this still behaves like a normal radio input. See bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group` wrapper exists.
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The native radio input's `name` attribute. Passed straight through to the native input inside. Also the group key: `bs-radio` elements sharing a `name` within the same root (document or shadow root) behave as one radio group -- checking one unchecks the others, arrow keys move between them, and only one is in the tab order. Native grouping can't cross each radio's own shadow root, so this component implements it itself.
          */
         "name"?: string;
         /**
-          * Emitted with this radio's own `value` when it becomes checked via user interaction. Since native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc), a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in response to this event -- there's no automatic un-checking to rely on here.
+          * Emitted with this radio's own `value` when it becomes checked via user interaction. Since native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc), a consumer wiring up a group of `bs-radio`s does not need to un-check the others itself.
          */
         "onBsChange"?: (event: BsRadioCustomEvent<string>) => void;
         /**
@@ -6372,6 +6576,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * Label text shown above the track when `showLabel` is set.
           * @default 'Label'
@@ -6387,6 +6595,10 @@ declare namespace LocalJSX {
           * @default 0
          */
         "min"?: number;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type="range"` submits two entries under this name: the start value, then the end value.
+         */
+        "name"?: string;
         /**
           * Emitted when `value` changes via user interaction (dragging the thumb, or committing the value field), with the new value. Only fires for `type="default"`/`type="segmented"`.
          */
@@ -6643,6 +6855,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The `name` the value is submitted under in a surrounding `<form>`'s `FormData`.
+         */
+        "name"?: string;
         /**
           * Emitted when the checked state changes via user interaction, with the new `checked` value.
          */
@@ -6652,6 +6872,11 @@ declare namespace LocalJSX {
           * @default 'lg'
          */
         "size"?: BsSwitchSize;
+        /**
+          * The value submitted when on (native checkbox default: `"on"`).
+          * @default 'on'
+         */
+        "value"?: string;
     }
     /**
      * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
@@ -6696,6 +6921,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "selected"?: boolean;
+        /**
+          * Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays a normal tab stop.
+         */
+        "tabbable"?: boolean;
+        /**
+          * Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its zero-based position in the group (`"0"`, `"1"`...).
+         */
+        "value"?: string;
     }
     /**
      * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
@@ -6715,6 +6948,10 @@ declare namespace LocalJSX {
      *   directly.
      */
     interface BsTabs {
+        /**
+          * Fires when the user selects a different tab (click, or arrow/Home/End), with the new `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab still fires as before.
+         */
+        "onBsChange"?: (event: BsTabsCustomEvent<{ value: string }>) => void;
         /**
           * Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and switches `flex-direction`.
           * @default 'horizontal'
@@ -6725,6 +6962,10 @@ declare namespace LocalJSX {
           * @default 'bs-tab'
          */
         "type"?: BsTabsType;
+        /**
+          * The selected tab's `value`. Mutable and reflected: it follows the user's selection, and setting it from outside (attribute or property) selects the matching tab -- without emitting `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop, or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...). If unset, it is read from whichever tab is already `selected` once the group loads.
+         */
+        "value"?: string;
     }
     /**
      * A transient status message for confirming the result of an action (e.g. "Files uploaded
@@ -6879,6 +7120,9 @@ declare namespace LocalJSX {
         "disabled": boolean;
     }
     interface BsCheckboxAttributes {
+        "name": string;
+        "value": string;
+        "required": boolean;
         "size": BsCheckboxSize;
         "checked": boolean;
         "indeterminate": boolean;
@@ -6964,8 +7208,11 @@ declare namespace LocalJSX {
         "selected": boolean;
         "disabled": boolean;
         "ariaLabel": string | null;
+        "value": string;
+        "tabbable": boolean;
     }
     interface BsInputAttributes {
+        "name": string;
         "value": string;
         "type": | 'text'
     | 'email'
@@ -7010,6 +7257,7 @@ declare namespace LocalJSX {
         "collapsed": boolean;
         "logoBackground": 'auto' | 'light' | 'dark';
         "showLogo": boolean;
+        "open": boolean;
     }
     interface BsNavigationDrawerItemAttributes {
         "selected": boolean;
@@ -7039,6 +7287,7 @@ declare namespace LocalJSX {
         "strokeWidth": BsProgressStrokeWidth;
         "value": number;
         "showLabel": boolean;
+        "ariaLabel": string | null;
     }
     interface BsProgressLinearAttributes {
         "type": BsProgressLinearType;
@@ -7055,6 +7304,7 @@ declare namespace LocalJSX {
     }
     interface BsSliderAttributes {
         "type": BsSliderType;
+        "name": string;
         "showLabel": boolean;
         "label": string;
         "min": number;
@@ -7094,6 +7344,8 @@ declare namespace LocalJSX {
         "showDescription": boolean;
     }
     interface BsSwitchAttributes {
+        "name": string;
+        "value": string;
         "size": BsSwitchSize;
         "checked": boolean;
         "disabled": boolean;
@@ -7104,10 +7356,13 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "iconPosition": BsTabIconPosition;
         "ariaLabel": string | null;
+        "value": string;
+        "tabbable": boolean;
     }
     interface BsTabsAttributes {
         "type": BsTabsType;
         "orientation": BsTabsOrientation;
+        "value": string;
     }
     interface BsToastAttributes {
         "state": BsToastState;
@@ -8002,6 +8257,13 @@ declare module "@stencil/core" {
              * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
              * 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.
              */
             "bs-navigation-drawer": LocalJSX.IntrinsicElements["bs-navigation-drawer"] & JSXBase.HTMLAttributes<HTMLBsNavigationDrawerElement>;
             /**