@bfrs/agentic-components 0.3.4 → 0.3.6

package/BFRS_AGENTIC_COMPONENTS.md

@@ -115,11 +115,54 @@ Use native Angular DOM event bindings for interactions. Do not pass React-style
 <bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
 ```
 
-Registered tags cover the documented component surface: `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, and `bfrs-step-progress-card`.
+Registered tags cover the documented component surface, including
+`bfrs-button-group`, `bfrs-toast-provider`, `bfrs-table-toolbar`,
+`bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
+`bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
+`bfrs-table-column-visibility` in addition to the existing component tags.
+Existing form and pattern tags include `bfrs-date-range-picker`,
+`bfrs-multi-select`, `bfrs-step-progress-card`, `bfrs-data-table`,
+`bfrs-modal`, `bfrs-tabs`, and the rest of the documented `bfrs-*` surface.
+
+ReactNode-based composition is exposed through native named slots. Angular
+components placed in these slots remain live across the Shadow DOM boundary:
+
+```html
+<bfrs-page-header title="Orders">
+  <bfrs-breadcrumbs slot="breadcrumb" [props]="{ items: breadcrumbs }"></bfrs-breadcrumbs>
+  <bfrs-button slot="secondary-actions" variant="outline">Export</bfrs-button>
+  <bfrs-button slot="actions">Create order</bfrs-button>
+</bfrs-page-header>
+
+<bfrs-modal title="Edit order" [attr.open]="open || null">
+  <app-order-form></app-order-form>
+  <app-modal-actions slot="footer"></app-modal-actions>
+</bfrs-modal>
+```
+
+Supported composition slots include `left-icon`, `right-icon`, `label`,
+`helper-text`, `error-message`, `prefix`, `suffix`, `trigger`, `title`,
+`description`, `footer`, `actions`, `primary-action`, `secondary-actions`,
+`search-input`, `filter-trigger`, `breadcrumb`, `header`, `sidebar`, `brand`,
+`tabs`, `search`, `icon`, `empty-state`, `error`, and `row-actions-header`.
+
+`bfrs-tabs` uses item-specific slots named `tab-{value}-label`,
+`tab-{value}-badge`, and `tab-{value}-content`. Menu and navigation item
+schemas additionally accept `iconName`, `iconSlot`, `labelSlot`, `badgeSlot`,
+and related slot-name fields.
+
+The React compound tabs API is available as `bfrs-tabs-list`,
+`bfrs-tabs-trigger`, and `bfrs-tabs-content`. The parent `bfrs-tabs` coordinates
+their selected state and emits `value-change`.
+
+Mount `bfrs-toast-provider` once when Angular needs the equivalent of
+`ToastProvider` and `useToast`. The element exposes `toast()`, `success()`,
+`warning()`, `danger()`, `info()`, `dismiss()`, and `clear()` methods, and emits
+`toast-change`, `toast-action`, `dismiss`, and `clear`.
 
 Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `error-text`, `helper-text`, `prefix`, `suffix`, `min`, `max`, `step`, and `value`. Use `[props]` or the `props` JSON attribute for structured props like `options`, palette arrays, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
 
-Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(reveal-change)`, `(copy)`, `(copy-error)`, `(close)`, `(confirm)`, `(cancel)`, `(cell-action)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
+Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(reveal-change)`, `(copy)`, `(copy-error)`, `(close)`, `(confirm)`, `(cancel)`, `(cell-action)`, `(cell-event)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
 
 For validated forms, keep client validation, API validation, and submit side effects in the consuming app. In React, pass field errors through `FormField errorText` and set `Input error`. In Angular, use `bfrs-input` with `[attr.error]` and `[attr.error-message]`, listen to `(value-change)`, and manage success/failure notifications with `bfrs-toast-manager`.
 
@@ -1318,6 +1361,72 @@ Custom-element DataTable action cells must be declarative because Angular/HTML c
 </bfrs-data-table>
 ```
 
+Angular/HTML consumers can also render framework-neutral rich cells with
+`cellType: "text" | "chip" | "chips" | "badge" | "badges" | "image" |
+"avatar" | "link" | "custom-element"`. Configure them through the serializable
+`cellConfig` object:
+
+```ts
+columns = [
+  {
+    id: "status",
+    header: "Status",
+    accessorKey: "status",
+    cellType: "chip",
+    cellConfig: {
+      caption: "Current status",
+      labelKey: "status",
+      toneKey: "statusTone"
+    }
+  },
+  {
+    id: "tags",
+    header: "Tags",
+    cellType: "chips",
+    cellConfig: {
+      itemsKey: "tags",
+      itemLabelKey: "label",
+      itemToneKey: "tone"
+    }
+  },
+  {
+    id: "channel",
+    header: "Channel",
+    cellType: "image",
+    cellConfig: {
+      srcKey: "channel.logo",
+      altKey: "channel.name",
+      width: 32,
+      height: 32
+    }
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    cellType: "custom-element",
+    cellConfig: {
+      tagName: "customer-summary",
+      attributeMap: {
+        name: "customer.name",
+        email: "customer.email"
+      },
+      propertyMap: {
+        customerId: "customer.id"
+      },
+      events: ["open", "change"]
+    }
+  }
+];
+```
+
+`caption`/`captionKey` adds a small label above any rich cell. Key fields
+support dot-separated row paths. For custom elements, register the hyphenated
+tag before the table renders. `attributeMap` sets scalar attributes,
+`propertyMap` assigns JavaScript properties, and `rowProperty` can pass the
+complete row when the nested custom element explicitly supports it. Raw HTML is
+not rendered. Listed custom-element events are re-emitted as `cell-event` with
+`{ eventName, detail, columnId, row, rowId, rowIndex }`.
+
 ---
 
 ### Navigation

package/README.md

@@ -150,7 +150,119 @@ orderColumns = [
 ];
 ```
 
-Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, and `bfrs-step-progress-card`.
+Rich Angular/HTML cells use the same serializable column approach. Supported
+`cellType` values are `text`, `chip`, `chips`, `badge`, `badges`, `image`,
+`avatar`, `link`, `custom-element`, `button`, `buttons`, and `actions`.
+
+```ts
+orderColumns = [
+  {
+    id: "status",
+    header: "Status",
+    accessorKey: "status",
+    cellType: "chip",
+    cellConfig: { caption: "Current status", labelKey: "status", toneKey: "statusTone" }
+  },
+  {
+    id: "channel",
+    header: "Channel",
+    cellType: "image",
+    cellConfig: { srcKey: "channelLogo", altKey: "channelName", width: 32, height: 32 }
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    cellType: "custom-element",
+    cellConfig: {
+      tagName: "customer-summary",
+      attributeMap: { name: "customer.name", email: "customer.email" },
+      events: ["open"]
+    }
+  }
+];
+```
+
+Registered custom-element events are re-emitted by `bfrs-data-table` as
+`cell-event` with `{ eventName, detail, columnId, row, rowId, rowIndex }`.
+
+ReactNode props are exposed to Angular as native named slots. Slotted Angular
+components remain live; they are not converted to static HTML:
+
+```html
+<bfrs-page-header title="Orders">
+  <bfrs-breadcrumbs slot="breadcrumb" [props]="{ items: breadcrumbs }"></bfrs-breadcrumbs>
+  <bfrs-button slot="secondary-actions" variant="outline">Export</bfrs-button>
+  <bfrs-button slot="actions">Create order</bfrs-button>
+</bfrs-page-header>
+
+<bfrs-workspace-header toggle (toggle-sidebar)="toggleSidebar()">
+  <app-brand slot="brand"></app-brand>
+  <app-workspace-tabs slot="tabs"></app-workspace-tabs>
+  <app-global-search slot="search"></app-global-search>
+  <app-user-actions slot="actions"></app-user-actions>
+</bfrs-workspace-header>
+```
+
+Common named slots include `left-icon`, `right-icon`, `label`, `helper-text`,
+`error-message`, `trigger`, `title`, `description`, `footer`, `actions`,
+`primary-action`, `secondary-actions`, `search-input`, `filter-trigger`,
+`breadcrumb`, `header`, `sidebar`, `brand`, `tabs`, `search`, `icon`,
+`empty-state`, `error`, and `row-actions-header`.
+
+Tabs accept serializable items and live slots using the convention
+`tab-{value}-label`, `tab-{value}-badge`, and `tab-{value}-content`:
+
+```html
+<bfrs-tabs [props]="{ items: [{ value: 'open', label: 'Open' }, { value: 'closed', label: 'Closed' }] }">
+  <bfrs-badge slot="tab-open-badge" count="4"></bfrs-badge>
+  <app-open-orders slot="tab-open-content"></app-open-orders>
+  <app-closed-orders slot="tab-closed-content"></app-closed-orders>
+</bfrs-tabs>
+```
+
+Angular can also use the compound API directly:
+
+```html
+<bfrs-tabs value="open" (value-change)="activeTab = $event.detail.value">
+  <bfrs-tabs-list>
+    <bfrs-tabs-trigger value="open">Open <bfrs-badge slot="badge" count="4"></bfrs-badge></bfrs-tabs-trigger>
+    <bfrs-tabs-trigger value="closed">Closed</bfrs-tabs-trigger>
+  </bfrs-tabs-list>
+  <bfrs-tabs-content value="open"><app-open-orders></app-open-orders></bfrs-tabs-content>
+  <bfrs-tabs-content value="closed"><app-closed-orders></app-closed-orders></bfrs-tabs-content>
+</bfrs-tabs>
+```
+
+For imperative notifications, mount one provider and call its public methods
+through `ViewChild`:
+
+```html
+<bfrs-toast-provider #toasts placement="bottom-center"
+  (toast-action)="handleToastAction($event.detail)">
+</bfrs-toast-provider>
+```
+
+```ts
+@ViewChild("toasts") toasts!: ElementRef<HTMLElement & {
+  success(input: string | { title: string; description?: string }): string;
+  danger(input: string | { title: string; description?: string }): string;
+  dismiss(id: string): void;
+  clear(): void;
+}>;
+
+save() {
+  this.toasts.nativeElement.success("Order saved");
+}
+```
+
+DataTable also accepts declarative `leadingColumn`, `rowActions`,
+`rowClassRules`, `rowIdKey`, `accessorPath`, and `sortValueKey` configuration.
+The standalone helpers are available as `bfrs-table-toolbar`,
+`bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
+`bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
+`bfrs-table-column-visibility`.
+
+Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, and `bfrs-step-progress-card`.
 
 ## Theme Overrides
 

package/dist/components/data-display/DataTable/DataTable.d.ts

@@ -1,2 +1,2 @@
 import { DataTableProps } from './DataTable.types';
-export declare function DataTable<Row>({ data, columns, getRowId, loading, error, emptyState, emptyTitle, emptyDescription, pagination, enableSorting, sorting, defaultSorting, onSortingChange, visibleColumnIds, columnOrder, defaultColumnOrder, onColumnOrderChange, enableColumnPinning, pinnedColumnCount, defaultPinnedColumnCount, onPinnedColumnCountChange, pinLeadingColumn, defaultPinLeadingColumn, onPinLeadingColumnChange, enableColumnReordering, resetKey, showSortIcon, leadingColumn, rowActions, rowActionsHeader, rowActionsWidth, stickyRowActions, selection, selectedRowIds, onSelectedRowIdsChange, stickyHeader, minWidth, density, className, tableClassName, headerClassName, rowClassName, cellClassName, onRowClick, "aria-label": ariaLabel }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ data, columns, getRowId, loading, error, emptyState, emptyTitle, emptyDescription, pagination, enableSorting, sorting, defaultSorting, onSortingChange, visibleColumnIds, columnOrder, defaultColumnOrder, onColumnOrderChange, enableColumnPinning, pinnedColumnCount, defaultPinnedColumnCount, onPinnedColumnCountChange, pinLeadingColumn, defaultPinLeadingColumn, onPinLeadingColumnChange, enableColumnReordering, resetKey, showSortIcon, leadingColumn, rowActions, rowActionsHeader, rowActionsWidth, stickyRowActions, selection, selectedRowIds, onSelectedRowIdsChange, stickyHeader, minWidth, maxHeight, density, className, tableClassName, headerClassName, rowClassName, cellClassName, onRowClick, "aria-label": ariaLabel }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/DataTable/DataTable.types.d.ts

@@ -60,7 +60,7 @@ export type DataTableProps<Row> = {
     emptyState?: ReactNode;
     emptyTitle?: ReactNode;
     emptyDescription?: ReactNode;
-    pagination?: DataTablePagination;
+    pagination?: TablePaginationProps;
     enableSorting?: boolean;
     sorting?: DataTableSorting | null;
     defaultSorting?: DataTableSorting | null;
@@ -89,6 +89,12 @@ export type DataTableProps<Row> = {
     onSelectedRowIdsChange?: (ids: string[]) => void;
     stickyHeader?: boolean;
     minWidth?: number | string;
+    /**
+     * Caps the height of the scrollable region so the body scrolls vertically
+     * while the sticky header stays fixed at the top. Pair with the `pagination`
+     * prop to keep the footer fixed below the scroll area.
+     */
+    maxHeight?: number | string;
     density?: TableDensity;
     className?: string;
     tableClassName?: string;
@@ -109,7 +115,10 @@ export type TableToolbarProps = {
     className?: string;
 };
 export type TablePaginationProps = DataTablePagination & {
-    itemLabel?: string;
+    /** Suffix shown after the count, e.g. "Orders" -> "15 Orders". Defaults to "items". */
+    itemLabel?: ReactNode;
+    /** Leading label for the page-size control. Defaults to "Items per page:". */
+    itemsPerPageLabel?: ReactNode;
     className?: string;
     /**
      * Page-size control presentation. "select" (default, unchanged) renders a

package/dist/components/data-display/DataTable/TablePagination.d.ts

@@ -1,2 +1,2 @@
 import { TablePaginationProps } from './DataTable.types';
-export declare function TablePagination({ page, totalPages, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, itemLabel, className, pageSizeControl, showPageNavigation }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function TablePagination({ page, totalPages, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, itemLabel, itemsPerPageLabel, className, pageSizeControl, showPageNavigation }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/primitives/Input/Input.d.ts

@@ -1,4 +1,4 @@
-export declare const Input: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size"> & {
+export declare const Input: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     size?: import('./Input.types').InputSize;
     label?: import('react').ReactNode;
     helperText?: import('react').ReactNode;

package/dist/components/primitives/Input/Input.types.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export type InputSize = "xs" | "sm" | "md" | "lg";
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     size?: InputSize;
     label?: ReactNode;
     helperText?: ReactNode;

package/dist/components/ui/feedback/Alert/Alert.d.ts

@@ -3,12 +3,12 @@ import { VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     tone?: "success" | "warning" | "danger" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & {
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof alertVariants> & {
     title?: ReactNode;
     action?: ReactNode;
     icon?: ReactNode;
 };
-export declare const Alert: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+export declare const Alert: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<(props?: ({
     tone?: "success" | "warning" | "danger" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     title?: ReactNode;

package/dist/custom-elements.d.ts

@@ -1,7 +1,124 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './components/primitives/Button';
+import { BadgeProps } from './components/primitives/Badge';
+import { ChipProps } from './components/primitives/Chip';
+import { AvatarProps } from './components/ui/data-display/Avatar';
 import { ColorSwatchValue } from './components/ui/forms/ColorSwatchGroup';
+import { TableEmptyState, TableErrorState, DataTableColumn, DataTableLeadingColumn } from './components/data-display/DataTable';
+import { ToastTone } from './components/feedback/Toast';
 import { BfrsColorScheme } from './components/ui/providers/BfrsProvider';
 type UnknownProps = Record<string, unknown>;
 type CheckedValue = boolean | "indeterminate";
+export type BfrsToastElementInput = string | {
+    id?: string;
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    duration?: number;
+    iconName?: string;
+    actionId?: string;
+    actionLabel?: string;
+    dismissible?: boolean;
+    className?: string;
+};
+export type DataTableElementRowClassRule = {
+    path: string;
+    className: string;
+    equals?: unknown;
+    notEquals?: unknown;
+    truthy?: boolean;
+};
+export type DataTableElementLeadingColumn = Omit<DataTableLeadingColumn<UnknownProps>, "cell" | "header"> & {
+    header?: string;
+    cellType?: DataTableElementCellType;
+    cellConfig?: DataTableElementCellConfig;
+    action?: DataTableElementCellAction;
+    actions?: DataTableElementCellAction[];
+    actionsDisplay?: "inline" | "menu";
+};
+export type DataTableElementCellAction = {
+    id?: string;
+    label?: string;
+    labelKey?: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    display?: "button" | "icon" | "menu";
+    iconName?: string;
+    iconNameKey?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    disabledKey?: string;
+    destructive?: boolean;
+};
+export type DataTableElementCellConfig = {
+    /** Optional small label rendered above the cell content. */
+    caption?: string;
+    captionKey?: string;
+    /** Main display value. Falls back to the column accessor value. */
+    label?: string;
+    labelKey?: string;
+    valueKey?: string;
+    secondary?: string;
+    secondaryKey?: string;
+    /** Chip / badge presentation. Dynamic keys are resolved from the row. */
+    tone?: BadgeProps["tone"] | ChipProps["tone"];
+    toneKey?: string;
+    variant?: BadgeProps["variant"] | ChipProps["variant"];
+    variantKey?: string;
+    size?: BadgeProps["size"] | ChipProps["size"] | AvatarProps["size"];
+    sizeKey?: string;
+    dot?: boolean;
+    dotKey?: string;
+    /** Use plural cell types with arrays of primitive values or objects. */
+    itemsKey?: string;
+    itemLabelKey?: string;
+    itemValueKey?: string;
+    itemToneKey?: string;
+    /** Image / avatar presentation. */
+    src?: string;
+    srcKey?: string;
+    alt?: string;
+    altKey?: string;
+    name?: string;
+    nameKey?: string;
+    status?: AvatarProps["status"];
+    statusKey?: string;
+    width?: number | string;
+    height?: number | string;
+    rounded?: boolean;
+    /** Link presentation. */
+    href?: string;
+    hrefKey?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    rel?: string;
+    /** Registered custom-element presentation. Native tags are intentionally rejected. */
+    tagName?: string;
+    properties?: UnknownProps;
+    propertyMap?: Record<string, string>;
+    attributes?: Record<string, unknown>;
+    attributeMap?: Record<string, string>;
+    text?: string;
+    textKey?: string;
+    events?: string[];
+    /** Optionally assign the complete row object to this property on the custom element. */
+    rowProperty?: string;
+};
+export type DataTableElementCellType = "text" | "chip" | "chips" | "badge" | "badges" | "image" | "avatar" | "link" | "custom-element" | "button" | "buttons" | "actions";
+export type DataTableElementColumn = DataTableColumn<UnknownProps> & {
+    accessorPath?: string;
+    sortValueKey?: string;
+    cellType?: DataTableElementCellType;
+    cellConfig?: DataTableElementCellConfig;
+    action?: DataTableElementCellAction;
+    actions?: DataTableElementCellAction[];
+    actionsDisplay?: "inline" | "menu";
+    actionId?: string;
+    actionLabel?: string;
+    actionVariant?: ButtonProps["variant"];
+    actionSize?: ButtonProps["size"];
+    iconName?: string;
+    ariaLabel?: string;
+};
 export type BfrsCustomElementRegistryOptions = {
     prefix?: string;
 };
@@ -14,6 +131,7 @@ declare abstract class ReactCustomElement extends HTMLElement {
     private hasCapturedInitialContent;
     private initialRenderQueued;
     private propertyProps;
+    private lightDomObserver;
     get props(): UnknownProps;
     set props(value: UnknownProps);
     connectedCallback(): void;
@@ -27,8 +145,13 @@ declare abstract class ReactCustomElement extends HTMLElement {
     protected colorSchemeAttribute(): BfrsColorScheme;
     protected slottedText(fallback?: string): string | undefined;
     protected htmlContent(fallback?: string): unknown;
+    protected hasSlot(name?: string): boolean;
+    protected slotNode(name?: string, fallback?: ReactNode): ReactNode;
+    protected defaultContentNode(fallback?: string): ReactNode;
     protected booleanAttribute(name: string, fallback?: boolean): boolean;
+    protected booleanValue(attributeName: string, propName: string, fallback?: boolean): boolean;
     protected numberAttribute(name: string): number | undefined;
+    protected numberValue(attributeName: string, propName: string): number | undefined;
     protected jsonAttribute<Value>(name: string, fallback: Value): Value;
     protected mergedProps(): {
         [x: string]: unknown;
@@ -38,6 +161,7 @@ declare abstract class ReactCustomElement extends HTMLElement {
     protected objectValue<Value extends UnknownProps>(name: string, fallback: Value): Value;
     protected emit(name: string, detail?: unknown): void;
     private applyDefaultDisplay;
+    private observeLightDom;
     private ensureMountNode;
     private scheduleInitialUpdate;
     private captureInitialContent;
@@ -53,6 +177,11 @@ export declare class BfrsButtonElement extends ReactCustomElement {
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsButtonGroupElement extends ReactCustomElement {
+    static readonly tagName = "button-group";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
 export declare class BfrsInputElement extends ReactCustomElement {
     static readonly tagName = "input";
     static get observedAttributes(): string[];
@@ -364,6 +493,21 @@ export declare class BfrsToastManagerElement extends ReactCustomElement {
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsToastProviderElement extends ReactCustomElement {
+    static readonly tagName = "toast-provider";
+    static get observedAttributes(): string[];
+    private toasts;
+    private idCounter;
+    protected defaultDisplay(): string;
+    toast(input: BfrsToastElementInput): string;
+    success(input: string | Omit<Exclude<BfrsToastElementInput, string>, "tone">): string;
+    warning(input: string | Omit<Exclude<BfrsToastElementInput, string>, "tone">): string;
+    danger(input: string | Omit<Exclude<BfrsToastElementInput, string>, "tone">): string;
+    info(input: string | Omit<Exclude<BfrsToastElementInput, string>, "tone">): string;
+    dismiss(id: string): void;
+    clear(): void;
+    protected renderElement(): unknown;
+}
 export declare class BfrsModalElement extends OpenCustomElement {
     static readonly tagName = "modal";
     static get observedAttributes(): string[];
@@ -418,12 +562,60 @@ export declare class BfrsTablePaginationElement extends ReactCustomElement {
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
 }
+export declare class BfrsTableToolbarElement extends ReactCustomElement {
+    static readonly tagName = "table-toolbar";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+declare abstract class BfrsTableStateElement extends ReactCustomElement {
+    protected abstract stateComponent(): typeof TableEmptyState | typeof TableErrorState;
+    protected abstract defaultTitle(): string;
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTableEmptyStateElement extends BfrsTableStateElement {
+    static readonly tagName = "table-empty-state";
+    protected stateComponent(): typeof TableEmptyState;
+    protected defaultTitle(): string;
+}
+export declare class BfrsTableErrorStateElement extends BfrsTableStateElement {
+    static readonly tagName = "table-error-state";
+    protected stateComponent(): typeof TableErrorState;
+    protected defaultTitle(): string;
+}
+export declare class BfrsTableSkeletonElement extends ReactCustomElement {
+    static readonly tagName = "table-skeleton";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTableRowActionsElement extends ReactCustomElement {
+    static readonly tagName = "table-row-actions";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsTableBulkActionsElement extends ReactCustomElement {
+    static readonly tagName = "table-bulk-actions";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTableColumnVisibilityElement extends ReactCustomElement {
+    static readonly tagName = "table-column-visibility";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
 export declare class BfrsDataTableElement extends ReactCustomElement {
     static readonly tagName = "data-table";
     static get observedAttributes(): string[];
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
     private normalizeColumn;
+    private cellConfigValue;
+    private renderCaptionedCell;
+    private renderRichCell;
     private dataTableRowId;
     private actionDisabled;
     private emitCellAction;
@@ -431,9 +623,29 @@ export declare class BfrsDataTableElement extends ReactCustomElement {
     private renderButtonGroupCell;
     private renderActionMenuCell;
 }
+export declare class BfrsTabsListElement extends ReactCustomElement {
+    static readonly tagName = "tabs-list";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTabsTriggerElement extends ReactCustomElement {
+    static readonly tagName = "tabs-trigger";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsTabsContentElement extends ReactCustomElement {
+    static readonly tagName = "tabs-content";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare class BfrsTabsElement extends ValueCustomElement {
     static readonly tagName = "tabs";
     static get observedAttributes(): string[];
+    private readonly handleTabSelect;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected renderElement(): unknown;
 }
 export declare class BfrsBreadcrumbsElement extends ReactCustomElement {
@@ -604,6 +816,7 @@ declare global {
         "bfrs-business-info-display-card": BfrsBusinessInfoDisplayCardElement;
         "bfrs-business-info-display-card-skeleton": BfrsBusinessInfoDisplayCardSkeletonElement;
         "bfrs-button": BfrsButtonElement;
+        "bfrs-button-group": BfrsButtonGroupElement;
         "bfrs-card": BfrsCardElement;
         "bfrs-card-content": BfrsCardContentElement;
         "bfrs-card-footer": BfrsCardFooterElement;
@@ -670,10 +883,21 @@ declare global {
         "bfrs-summary-bar": BfrsSummaryBarElement;
         "bfrs-switch": BfrsSwitchElement;
         "bfrs-table-pagination": BfrsTablePaginationElement;
+        "bfrs-table-toolbar": BfrsTableToolbarElement;
+        "bfrs-table-empty-state": BfrsTableEmptyStateElement;
+        "bfrs-table-error-state": BfrsTableErrorStateElement;
+        "bfrs-table-skeleton": BfrsTableSkeletonElement;
+        "bfrs-table-row-actions": BfrsTableRowActionsElement;
+        "bfrs-table-bulk-actions": BfrsTableBulkActionsElement;
+        "bfrs-table-column-visibility": BfrsTableColumnVisibilityElement;
         "bfrs-tabs": BfrsTabsElement;
+        "bfrs-tabs-list": BfrsTabsListElement;
+        "bfrs-tabs-trigger": BfrsTabsTriggerElement;
+        "bfrs-tabs-content": BfrsTabsContentElement;
         "bfrs-text": BfrsTextElement;
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
+        "bfrs-toast-provider": BfrsToastProviderElement;
         "bfrs-tip": BfrsTipElement;
         "bfrs-tooltip": BfrsTooltipElement;
         "bfrs-workspace-header": BfrsWorkspaceHeaderElement;