@db-ux/wc-core-components 4.10.2 → 4.11.1

package/dist/types/components/table-row/table-row.d.ts

@@ -0,0 +1,24 @@
+import { DBTableHeaderCellProps } from "../table-header-cell/model";
+import { DBTableRowCell, DBTableRowProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBTableRow {
+    rootElement: HTMLElement;
+    private _ref;
+    id: DBTableRowProps["id"];
+    className: DBTableRowProps["className"];
+    interactive: DBTableRowProps["interactive"];
+    subHeaderEmphasis: DBTableRowProps["subHeaderEmphasis"];
+    cells: DBTableRowProps["cells"];
+    getHeaderCell(cell: DBTableRowCell): DBTableHeaderCellProps;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/tabs/tabs.d.ts

@@ -28,12 +28,14 @@ export declare class DBTabs {
     showScrollRight: boolean;
     scrollContainer: any;
     _resizeObserver: any;
+    observer: any;
     convertTabs(): any;
     evaluateScrollButtons(tList: Element): void;
     scroll(left?: boolean): void;
     initTabList(): void;
     initTabs(init?: boolean): void;
     handleChange(event: InputEvent<HTMLElement>): void;
+    setupObserver(element: HTMLElement | null): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components/tag/tag.d.ts

@@ -22,8 +22,10 @@ export declare class DBTag {
     overflow: DBTagProps["overflow"];
     text: DBTagProps["text"];
     behavior: DBTagProps["behavior"];
+    observer: any;
     handleRemove(event?: ClickEvent<HTMLButtonElement> | void): void;
     getRemoveButtonText(): string;
+    setupObserver(element: HTMLElement | null): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -31,5 +33,6 @@ export declare class DBTag {
      */
     private enableAttributePassing;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/textarea/textarea.d.ts

@@ -55,6 +55,7 @@ export declare class DBTextarea {
     _value: string;
     _voiceOverFallback: string;
     abortController: any;
+    observer: any;
     hasValidState(): boolean;
     handleValidation(): void;
     handleInput(event: InputEvent<HTMLTextAreaElement>, reset?: boolean): void;
@@ -62,6 +63,7 @@ export declare class DBTextarea {
     handleBlur(event: InteractionEvent<HTMLTextAreaElement> | any): void;
     handleFocus(event: InteractionEvent<HTMLTextAreaElement> | any): void;
     resetIds(): void;
+    setupObserver(element: HTMLElement | null): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components/tooltip/model.d.ts

@@ -16,5 +16,14 @@ export type DBTooltipDefaultProps = {
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps & TextProps;
 export type DBTooltipDefaultState = {
     getParent: () => HTMLElement;
+    _attachedParent?: HTMLElement;
+    _attachedId?: string;
+    _activeTriggerCount?: number;
+    _boundListeners?: {
+        parent: HTMLElement;
+        type: string;
+        fn: (event: any) => void;
+    }[];
+    _detachListeners: () => void;
 };
 export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState & ResetIdState;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -23,6 +23,11 @@ export declare class DBTooltip {
     initialized: boolean;
     _documentScrollListenerCallbackId: any;
     _observer: any;
+    _attachedParent: any;
+    _attachedId: any;
+    _activeTriggerCount: number;
+    _boundListeners: any[];
+    observer: any;
     handleClick(event: ClickEvent<HTMLElement>): void;
     handleEscape(event: any): void;
     getParent(): any;
@@ -31,6 +36,8 @@ export declare class DBTooltip {
     handleLeave(): void;
     handleEnter(parent?: HTMLElement): void;
     resetIds(): void;
+    _detachListeners(): void;
+    setupObserver(element: HTMLElement | null): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -42,5 +49,6 @@ export declare class DBTooltip {
     watch1Fn(): void;
     watch1(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -38,6 +38,14 @@ import { DBSwitchProps } from "./components/switch/model";
 import { DBTabItemProps } from "./components/tab-item/model";
 import { DBTabListProps } from "./components/tab-list/model";
 import { DBTabPanelProps } from "./components/tab-panel/model";
+import { DBTableProps } from "./components/table/model";
+import { DBTableBodyProps } from "./components/table-body/model";
+import { DBTableCaptionProps } from "./components/table-caption/model";
+import { DBTableDataCellProps } from "./components/table-data-cell/model";
+import { DBTableFooterProps } from "./components/table-footer/model";
+import { DBTableHeadProps } from "./components/table-head/model";
+import { DBTableHeaderCellProps } from "./components/table-header-cell/model";
+import { DBTableRowProps } from "./components/table-row/model";
 import { DBTabsProps } from "./components/tabs/model";
 import { DBTagProps } from "./components/tag/model";
 import { DBTextareaProps } from "./components/textarea/model";
@@ -75,6 +83,14 @@ export { DBSwitchProps } from "./components/switch/model";
 export { DBTabItemProps } from "./components/tab-item/model";
 export { DBTabListProps } from "./components/tab-list/model";
 export { DBTabPanelProps } from "./components/tab-panel/model";
+export { DBTableProps } from "./components/table/model";
+export { DBTableBodyProps } from "./components/table-body/model";
+export { DBTableCaptionProps } from "./components/table-caption/model";
+export { DBTableDataCellProps } from "./components/table-data-cell/model";
+export { DBTableFooterProps } from "./components/table-footer/model";
+export { DBTableHeadProps } from "./components/table-head/model";
+export { DBTableHeaderCellProps } from "./components/table-header-cell/model";
+export { DBTableRowProps } from "./components/table-row/model";
 export { DBTabsProps } from "./components/tabs/model";
 export { DBTagProps } from "./components/tag/model";
 export { DBTextareaProps } from "./components/textarea/model";
@@ -586,6 +602,71 @@ export namespace Components {
         "id": DBTabPanelProps["id"];
         "propOverrides": DBTabPanelProps["propOverrides"];
     }
+    interface DbTable {
+        "captionPlain": DBTableProps["captionPlain"];
+        "className": DBTableProps["className"];
+        "columnSizes": DBTableProps["columnSizes"];
+        "data": DBTableProps["data"];
+        "divider": DBTableProps["divider"];
+        "id": DBTableProps["id"];
+        "mobileVariant": DBTableProps["mobileVariant"];
+        "showCaption": DBTableProps["showCaption"];
+        "size": DBTableProps["size"];
+        "stickyHeader": DBTableProps["stickyHeader"];
+        "variant": DBTableProps["variant"];
+        "width": DBTableProps["width"];
+    }
+    interface DbTableBody {
+        "className": DBTableBodyProps["className"];
+        "id": DBTableBodyProps["id"];
+        "rows": DBTableBodyProps["rows"];
+    }
+    interface DbTableCaption {
+        "className": DBTableCaptionProps["className"];
+        "id": DBTableCaptionProps["id"];
+    }
+    interface DbTableDataCell {
+        "className": DBTableDataCellProps["className"];
+        "colSpan": DBTableDataCellProps["colSpan"];
+        "colspan": DBTableDataCellProps["colspan"];
+        "headers": DBTableDataCellProps["headers"];
+        "horizontalAlignment": DBTableDataCellProps["horizontalAlignment"];
+        "id": DBTableDataCellProps["id"];
+        "rowSpan": DBTableDataCellProps["rowSpan"];
+        "rowspan": DBTableDataCellProps["rowspan"];
+        "verticalAlignment": DBTableDataCellProps["verticalAlignment"];
+    }
+    interface DbTableFooter {
+        "className": DBTableFooterProps["className"];
+        "id": DBTableFooterProps["id"];
+        "rows": DBTableFooterProps["rows"];
+    }
+    interface DbTableHead {
+        "className": DBTableHeadProps["className"];
+        "id": DBTableHeadProps["id"];
+        "rows": DBTableHeadProps["rows"];
+    }
+    interface DbTableHeaderCell {
+        "abbr": DBTableHeaderCellProps["abbr"];
+        "className": DBTableHeaderCellProps["className"];
+        "colSpan": DBTableHeaderCellProps["colSpan"];
+        "colspan": DBTableHeaderCellProps["colspan"];
+        "headers": DBTableHeaderCellProps["headers"];
+        "horizontalAlignment": DBTableHeaderCellProps["horizontalAlignment"];
+        "id": DBTableHeaderCellProps["id"];
+        "noText": DBTableHeaderCellProps["noText"];
+        "rowSpan": DBTableHeaderCellProps["rowSpan"];
+        "rowspan": DBTableHeaderCellProps["rowspan"];
+        "scope": DBTableHeaderCellProps["scope"];
+        "verticalAlignment": DBTableHeaderCellProps["verticalAlignment"];
+    }
+    interface DbTableRow {
+        "cells": DBTableRowProps["cells"];
+        "className": DBTableRowProps["className"];
+        "id": DBTableRowProps["id"];
+        "interactive": DBTableRowProps["interactive"];
+        "subHeaderEmphasis": DBTableRowProps["subHeaderEmphasis"];
+    }
     interface DbTabs {
         "alignment": DBTabsProps["alignment"];
         "arrowScrollDistance": DBTabsProps["arrowScrollDistance"];
@@ -1119,6 +1200,54 @@ declare global {
         prototype: HTMLDbTabPanelElement;
         new (): HTMLDbTabPanelElement;
     };
+    interface HTMLDbTableElement extends Components.DbTable, HTMLStencilElement {
+    }
+    var HTMLDbTableElement: {
+        prototype: HTMLDbTableElement;
+        new (): HTMLDbTableElement;
+    };
+    interface HTMLDbTableBodyElement extends Components.DbTableBody, HTMLStencilElement {
+    }
+    var HTMLDbTableBodyElement: {
+        prototype: HTMLDbTableBodyElement;
+        new (): HTMLDbTableBodyElement;
+    };
+    interface HTMLDbTableCaptionElement extends Components.DbTableCaption, HTMLStencilElement {
+    }
+    var HTMLDbTableCaptionElement: {
+        prototype: HTMLDbTableCaptionElement;
+        new (): HTMLDbTableCaptionElement;
+    };
+    interface HTMLDbTableDataCellElement extends Components.DbTableDataCell, HTMLStencilElement {
+    }
+    var HTMLDbTableDataCellElement: {
+        prototype: HTMLDbTableDataCellElement;
+        new (): HTMLDbTableDataCellElement;
+    };
+    interface HTMLDbTableFooterElement extends Components.DbTableFooter, HTMLStencilElement {
+    }
+    var HTMLDbTableFooterElement: {
+        prototype: HTMLDbTableFooterElement;
+        new (): HTMLDbTableFooterElement;
+    };
+    interface HTMLDbTableHeadElement extends Components.DbTableHead, HTMLStencilElement {
+    }
+    var HTMLDbTableHeadElement: {
+        prototype: HTMLDbTableHeadElement;
+        new (): HTMLDbTableHeadElement;
+    };
+    interface HTMLDbTableHeaderCellElement extends Components.DbTableHeaderCell, HTMLStencilElement {
+    }
+    var HTMLDbTableHeaderCellElement: {
+        prototype: HTMLDbTableHeaderCellElement;
+        new (): HTMLDbTableHeaderCellElement;
+    };
+    interface HTMLDbTableRowElement extends Components.DbTableRow, HTMLStencilElement {
+    }
+    var HTMLDbTableRowElement: {
+        prototype: HTMLDbTableRowElement;
+        new (): HTMLDbTableRowElement;
+    };
     interface HTMLDbTabsElementEventMap {
         "indexChange": any;
         "tabSelect": any;
@@ -1214,6 +1343,14 @@ declare global {
         "db-tab-item": HTMLDbTabItemElement;
         "db-tab-list": HTMLDbTabListElement;
         "db-tab-panel": HTMLDbTabPanelElement;
+        "db-table": HTMLDbTableElement;
+        "db-table-body": HTMLDbTableBodyElement;
+        "db-table-caption": HTMLDbTableCaptionElement;
+        "db-table-data-cell": HTMLDbTableDataCellElement;
+        "db-table-footer": HTMLDbTableFooterElement;
+        "db-table-head": HTMLDbTableHeadElement;
+        "db-table-header-cell": HTMLDbTableHeaderCellElement;
+        "db-table-row": HTMLDbTableRowElement;
         "db-tabs": HTMLDbTabsElement;
         "db-tag": HTMLDbTagElement;
         "db-textarea": HTMLDbTextareaElement;
@@ -1759,6 +1896,71 @@ declare namespace LocalJSX {
         "id"?: DBTabPanelProps["id"];
         "propOverrides"?: DBTabPanelProps["propOverrides"];
     }
+    interface DbTable {
+        "captionPlain"?: DBTableProps["captionPlain"];
+        "className"?: DBTableProps["className"];
+        "columnSizes"?: DBTableProps["columnSizes"];
+        "data"?: DBTableProps["data"];
+        "divider"?: DBTableProps["divider"];
+        "id"?: DBTableProps["id"];
+        "mobileVariant"?: DBTableProps["mobileVariant"];
+        "showCaption"?: DBTableProps["showCaption"];
+        "size"?: DBTableProps["size"];
+        "stickyHeader"?: DBTableProps["stickyHeader"];
+        "variant"?: DBTableProps["variant"];
+        "width"?: DBTableProps["width"];
+    }
+    interface DbTableBody {
+        "className"?: DBTableBodyProps["className"];
+        "id"?: DBTableBodyProps["id"];
+        "rows"?: DBTableBodyProps["rows"];
+    }
+    interface DbTableCaption {
+        "className"?: DBTableCaptionProps["className"];
+        "id"?: DBTableCaptionProps["id"];
+    }
+    interface DbTableDataCell {
+        "className"?: DBTableDataCellProps["className"];
+        "colSpan"?: DBTableDataCellProps["colSpan"];
+        "colspan"?: DBTableDataCellProps["colspan"];
+        "headers"?: DBTableDataCellProps["headers"];
+        "horizontalAlignment"?: DBTableDataCellProps["horizontalAlignment"];
+        "id"?: DBTableDataCellProps["id"];
+        "rowSpan"?: DBTableDataCellProps["rowSpan"];
+        "rowspan"?: DBTableDataCellProps["rowspan"];
+        "verticalAlignment"?: DBTableDataCellProps["verticalAlignment"];
+    }
+    interface DbTableFooter {
+        "className"?: DBTableFooterProps["className"];
+        "id"?: DBTableFooterProps["id"];
+        "rows"?: DBTableFooterProps["rows"];
+    }
+    interface DbTableHead {
+        "className"?: DBTableHeadProps["className"];
+        "id"?: DBTableHeadProps["id"];
+        "rows"?: DBTableHeadProps["rows"];
+    }
+    interface DbTableHeaderCell {
+        "abbr"?: DBTableHeaderCellProps["abbr"];
+        "className"?: DBTableHeaderCellProps["className"];
+        "colSpan"?: DBTableHeaderCellProps["colSpan"];
+        "colspan"?: DBTableHeaderCellProps["colspan"];
+        "headers"?: DBTableHeaderCellProps["headers"];
+        "horizontalAlignment"?: DBTableHeaderCellProps["horizontalAlignment"];
+        "id"?: DBTableHeaderCellProps["id"];
+        "noText"?: DBTableHeaderCellProps["noText"];
+        "rowSpan"?: DBTableHeaderCellProps["rowSpan"];
+        "rowspan"?: DBTableHeaderCellProps["rowspan"];
+        "scope"?: DBTableHeaderCellProps["scope"];
+        "verticalAlignment"?: DBTableHeaderCellProps["verticalAlignment"];
+    }
+    interface DbTableRow {
+        "cells"?: DBTableRowProps["cells"];
+        "className"?: DBTableRowProps["className"];
+        "id"?: DBTableRowProps["id"];
+        "interactive"?: DBTableRowProps["interactive"];
+        "subHeaderEmphasis"?: DBTableRowProps["subHeaderEmphasis"];
+    }
     interface DbTabs {
         "alignment"?: DBTabsProps["alignment"];
         "arrowScrollDistance"?: DBTabsProps["arrowScrollDistance"];
@@ -2302,6 +2504,66 @@ declare namespace LocalJSX {
         "id": DBTabPanelProps["id"];
         "content": DBTabPanelProps["content"];
     }
+    interface DbTableAttributes {
+        "data": DBTableProps["data"];
+        "mobileVariant": DBTableProps["mobileVariant"];
+        "className": DBTableProps["className"];
+        "width": DBTableProps["width"];
+        "size": DBTableProps["size"];
+        "divider": DBTableProps["divider"];
+        "variant": DBTableProps["variant"];
+        "showCaption": string;
+        "stickyHeader": DBTableProps["stickyHeader"];
+        "id": DBTableProps["id"];
+        "captionPlain": DBTableProps["captionPlain"];
+    }
+    interface DbTableBodyAttributes {
+        "id": DBTableBodyProps["id"];
+        "className": DBTableBodyProps["className"];
+    }
+    interface DbTableCaptionAttributes {
+        "id": DBTableCaptionProps["id"];
+        "className": DBTableCaptionProps["className"];
+    }
+    interface DbTableDataCellAttributes {
+        "id": DBTableDataCellProps["id"];
+        "className": DBTableDataCellProps["className"];
+        "horizontalAlignment": DBTableDataCellProps["horizontalAlignment"];
+        "verticalAlignment": DBTableDataCellProps["verticalAlignment"];
+        "colSpan": string;
+        "colspan": string;
+        "rowSpan": string;
+        "rowspan": string;
+        "headers": DBTableDataCellProps["headers"];
+    }
+    interface DbTableFooterAttributes {
+        "id": DBTableFooterProps["id"];
+        "className": DBTableFooterProps["className"];
+    }
+    interface DbTableHeadAttributes {
+        "id": DBTableHeadProps["id"];
+        "className": DBTableHeadProps["className"];
+    }
+    interface DbTableHeaderCellAttributes {
+        "id": DBTableHeaderCellProps["id"];
+        "className": DBTableHeaderCellProps["className"];
+        "horizontalAlignment": DBTableHeaderCellProps["horizontalAlignment"];
+        "verticalAlignment": DBTableHeaderCellProps["verticalAlignment"];
+        "noText": string;
+        "scope": DBTableHeaderCellProps["scope"];
+        "colSpan": string;
+        "colspan": string;
+        "rowSpan": string;
+        "rowspan": string;
+        "headers": DBTableHeaderCellProps["headers"];
+        "abbr": DBTableHeaderCellProps["abbr"];
+    }
+    interface DbTableRowAttributes {
+        "id": DBTableRowProps["id"];
+        "className": DBTableRowProps["className"];
+        "interactive": string;
+        "subHeaderEmphasis": DBTableRowProps["subHeaderEmphasis"];
+    }
     interface DbTabsAttributes {
         "name": DBTabsProps["name"];
         "tabs": DBTabsProps["tabs"];
@@ -2412,6 +2674,14 @@ declare namespace LocalJSX {
         "db-tab-item": Omit<DbTabItem, keyof DbTabItemAttributes> & { [K in keyof DbTabItem & keyof DbTabItemAttributes]?: DbTabItem[K] } & { [K in keyof DbTabItem & keyof DbTabItemAttributes as `attr:${K}`]?: DbTabItemAttributes[K] } & { [K in keyof DbTabItem & keyof DbTabItemAttributes as `prop:${K}`]?: DbTabItem[K] };
         "db-tab-list": Omit<DbTabList, keyof DbTabListAttributes> & { [K in keyof DbTabList & keyof DbTabListAttributes]?: DbTabList[K] } & { [K in keyof DbTabList & keyof DbTabListAttributes as `attr:${K}`]?: DbTabListAttributes[K] } & { [K in keyof DbTabList & keyof DbTabListAttributes as `prop:${K}`]?: DbTabList[K] };
         "db-tab-panel": Omit<DbTabPanel, keyof DbTabPanelAttributes> & { [K in keyof DbTabPanel & keyof DbTabPanelAttributes]?: DbTabPanel[K] } & { [K in keyof DbTabPanel & keyof DbTabPanelAttributes as `attr:${K}`]?: DbTabPanelAttributes[K] } & { [K in keyof DbTabPanel & keyof DbTabPanelAttributes as `prop:${K}`]?: DbTabPanel[K] };
+        "db-table": Omit<DbTable, keyof DbTableAttributes> & { [K in keyof DbTable & keyof DbTableAttributes]?: DbTable[K] } & { [K in keyof DbTable & keyof DbTableAttributes as `attr:${K}`]?: DbTableAttributes[K] } & { [K in keyof DbTable & keyof DbTableAttributes as `prop:${K}`]?: DbTable[K] };
+        "db-table-body": Omit<DbTableBody, keyof DbTableBodyAttributes> & { [K in keyof DbTableBody & keyof DbTableBodyAttributes]?: DbTableBody[K] } & { [K in keyof DbTableBody & keyof DbTableBodyAttributes as `attr:${K}`]?: DbTableBodyAttributes[K] } & { [K in keyof DbTableBody & keyof DbTableBodyAttributes as `prop:${K}`]?: DbTableBody[K] };
+        "db-table-caption": Omit<DbTableCaption, keyof DbTableCaptionAttributes> & { [K in keyof DbTableCaption & keyof DbTableCaptionAttributes]?: DbTableCaption[K] } & { [K in keyof DbTableCaption & keyof DbTableCaptionAttributes as `attr:${K}`]?: DbTableCaptionAttributes[K] } & { [K in keyof DbTableCaption & keyof DbTableCaptionAttributes as `prop:${K}`]?: DbTableCaption[K] };
+        "db-table-data-cell": Omit<DbTableDataCell, keyof DbTableDataCellAttributes> & { [K in keyof DbTableDataCell & keyof DbTableDataCellAttributes]?: DbTableDataCell[K] } & { [K in keyof DbTableDataCell & keyof DbTableDataCellAttributes as `attr:${K}`]?: DbTableDataCellAttributes[K] } & { [K in keyof DbTableDataCell & keyof DbTableDataCellAttributes as `prop:${K}`]?: DbTableDataCell[K] };
+        "db-table-footer": Omit<DbTableFooter, keyof DbTableFooterAttributes> & { [K in keyof DbTableFooter & keyof DbTableFooterAttributes]?: DbTableFooter[K] } & { [K in keyof DbTableFooter & keyof DbTableFooterAttributes as `attr:${K}`]?: DbTableFooterAttributes[K] } & { [K in keyof DbTableFooter & keyof DbTableFooterAttributes as `prop:${K}`]?: DbTableFooter[K] };
+        "db-table-head": Omit<DbTableHead, keyof DbTableHeadAttributes> & { [K in keyof DbTableHead & keyof DbTableHeadAttributes]?: DbTableHead[K] } & { [K in keyof DbTableHead & keyof DbTableHeadAttributes as `attr:${K}`]?: DbTableHeadAttributes[K] } & { [K in keyof DbTableHead & keyof DbTableHeadAttributes as `prop:${K}`]?: DbTableHead[K] };
+        "db-table-header-cell": Omit<DbTableHeaderCell, keyof DbTableHeaderCellAttributes> & { [K in keyof DbTableHeaderCell & keyof DbTableHeaderCellAttributes]?: DbTableHeaderCell[K] } & { [K in keyof DbTableHeaderCell & keyof DbTableHeaderCellAttributes as `attr:${K}`]?: DbTableHeaderCellAttributes[K] } & { [K in keyof DbTableHeaderCell & keyof DbTableHeaderCellAttributes as `prop:${K}`]?: DbTableHeaderCell[K] };
+        "db-table-row": Omit<DbTableRow, keyof DbTableRowAttributes> & { [K in keyof DbTableRow & keyof DbTableRowAttributes]?: DbTableRow[K] } & { [K in keyof DbTableRow & keyof DbTableRowAttributes as `attr:${K}`]?: DbTableRowAttributes[K] } & { [K in keyof DbTableRow & keyof DbTableRowAttributes as `prop:${K}`]?: DbTableRow[K] };
         "db-tabs": Omit<DbTabs, keyof DbTabsAttributes> & { [K in keyof DbTabs & keyof DbTabsAttributes]?: DbTabs[K] } & { [K in keyof DbTabs & keyof DbTabsAttributes as `attr:${K}`]?: DbTabsAttributes[K] } & { [K in keyof DbTabs & keyof DbTabsAttributes as `prop:${K}`]?: DbTabs[K] };
         "db-tag": Omit<DbTag, keyof DbTagAttributes> & { [K in keyof DbTag & keyof DbTagAttributes]?: DbTag[K] } & { [K in keyof DbTag & keyof DbTagAttributes as `attr:${K}`]?: DbTagAttributes[K] } & { [K in keyof DbTag & keyof DbTagAttributes as `prop:${K}`]?: DbTag[K] };
         "db-textarea": Omit<DbTextarea, keyof DbTextareaAttributes> & { [K in keyof DbTextarea & keyof DbTextareaAttributes]?: DbTextarea[K] } & { [K in keyof DbTextarea & keyof DbTextareaAttributes as `attr:${K}`]?: DbTextareaAttributes[K] } & { [K in keyof DbTextarea & keyof DbTextareaAttributes as `prop:${K}`]?: DbTextarea[K] };
@@ -2455,6 +2725,14 @@ declare module "@stencil/core" {
             "db-tab-item": LocalJSX.IntrinsicElements["db-tab-item"] & JSXBase.HTMLAttributes<HTMLDbTabItemElement>;
             "db-tab-list": LocalJSX.IntrinsicElements["db-tab-list"] & JSXBase.HTMLAttributes<HTMLDbTabListElement>;
             "db-tab-panel": LocalJSX.IntrinsicElements["db-tab-panel"] & JSXBase.HTMLAttributes<HTMLDbTabPanelElement>;
+            "db-table": LocalJSX.IntrinsicElements["db-table"] & JSXBase.HTMLAttributes<HTMLDbTableElement>;
+            "db-table-body": LocalJSX.IntrinsicElements["db-table-body"] & JSXBase.HTMLAttributes<HTMLDbTableBodyElement>;
+            "db-table-caption": LocalJSX.IntrinsicElements["db-table-caption"] & JSXBase.HTMLAttributes<HTMLDbTableCaptionElement>;
+            "db-table-data-cell": LocalJSX.IntrinsicElements["db-table-data-cell"] & JSXBase.HTMLAttributes<HTMLDbTableDataCellElement>;
+            "db-table-footer": LocalJSX.IntrinsicElements["db-table-footer"] & JSXBase.HTMLAttributes<HTMLDbTableFooterElement>;
+            "db-table-head": LocalJSX.IntrinsicElements["db-table-head"] & JSXBase.HTMLAttributes<HTMLDbTableHeadElement>;
+            "db-table-header-cell": LocalJSX.IntrinsicElements["db-table-header-cell"] & JSXBase.HTMLAttributes<HTMLDbTableHeaderCellElement>;
+            "db-table-row": LocalJSX.IntrinsicElements["db-table-row"] & JSXBase.HTMLAttributes<HTMLDbTableRowElement>;
             "db-tabs": LocalJSX.IntrinsicElements["db-tabs"] & JSXBase.HTMLAttributes<HTMLDbTabsElement>;
             "db-tag": LocalJSX.IntrinsicElements["db-tag"] & JSXBase.HTMLAttributes<HTMLDbTagElement>;
             "db-textarea": LocalJSX.IntrinsicElements["db-textarea"] & JSXBase.HTMLAttributes<HTMLDbTextareaElement>;

package/dist/types/index.d.ts

@@ -64,6 +64,22 @@ export * from './components/tab-list';
 export * from './components/tab-list/model';
 export * from './components/tab-panel';
 export * from './components/tab-panel/model';
+export * from './components/table';
+export * from './components/table-body';
+export * from './components/table-body/model';
+export * from './components/table-caption';
+export * from './components/table-caption/model';
+export * from './components/table-data-cell';
+export * from './components/table-data-cell/model';
+export * from './components/table-footer';
+export * from './components/table-footer/model';
+export * from './components/table-head';
+export * from './components/table-head/model';
+export * from './components/table-header-cell';
+export * from './components/table-header-cell/model';
+export * from './components/table-row';
+export * from './components/table-row/model';
+export * from './components/table/model';
 export * from './components/tabs';
 export * from './components/tabs/model';
 export * from './components/tag';

package/dist/types/shared/figma.d.ts

@@ -1,12 +1,24 @@
+/** Base for all Figma prop definitions. */
+export type FigmaBaseProp = {
+    /** The prop type discriminator. */
+    type: string;
+    /**
+     * Optional layer name substring to resolve this prop from a nested subcomponent instance
+     * instead of the root instance (e.g. 'Custom Select Form Field').
+     * When set, the plugin searches _ccLayers for an instance whose name includes this string
+     * and reads the property from that instance.
+     */
+    layer?: string;
+};
 /** A nested Figma instance swap prop (e.g. icon components). */
-export type FigmaInstanceProp = {
+export type FigmaInstanceProp = FigmaBaseProp & {
     /** Use 'instance' for generic instance swaps, 'iconSwap' for icon instances that resolve to a string name. */
     type: 'instance' | 'iconSwap';
     /** The Figma property key of the instance swap (e.g. '🔄 Icon Small'). */
     key: string;
 };
 /** An enum prop mapping Figma variant values to code values. */
-export type FigmaEnumProp = {
+export type FigmaEnumProp = FigmaBaseProp & {
     type: 'enum';
     /** The Figma property key (e.g. 'Size', '💻 Variant'). */
     key: string;
@@ -20,7 +32,7 @@ export type FigmaEnumProp = {
     guardKey?: string;
 };
 /** A simple scalar prop. */
-export type FigmaSimpleProp = {
+export type FigmaSimpleProp = FigmaBaseProp & {
     /**
      * - 'string': maps to instance.getString()
      * - 'boolean': maps to instance.getBoolean()
@@ -30,14 +42,12 @@ export type FigmaSimpleProp = {
     type: 'string' | 'boolean' | 'children' | 'textContent';
     /** The Figma property key (e.g. '✏️ Text', '✏️ Label'). */
     key: string;
-};
-/** Reads a text property from a named nested instance via instance.findInstance(layerName)?.getString(key). */
-export type FigmaNestedTextProp = {
-    type: 'nestedText';
-    /** The exact Figma layer name of the nested instance to find. */
-    layerName: string;
-    /** The Figma property key on the nested instance (e.g. '✏️ Text'). */
-    key: string;
+    /**
+     * Optional Figma boolean property keys that guard this prop.
+     * When set, the prop value is only emitted if at least one of the guard keys is true.
+     * Useful for conditionally showing labels, timestamps, etc.
+     */
+    guardKeys?: string[];
 };
 /**
  * Reads a text property from the first code-connected child instance.
@@ -46,7 +56,7 @@ export type FigmaNestedTextProp = {
  *   .filter((node) => !!node.properties[key])[0]
  *   .getString(key)
  */
-export type FigmaConnectedTextProp = {
+export type FigmaConnectedTextProp = FigmaBaseProp & {
     type: 'connectedText';
     /** The Figma property key to read from each connected instance (e.g. '✏️ Text'). */
     key: string;
@@ -60,7 +70,7 @@ export type FigmaConnectedTextProp = {
  * @example
  * validationMessage: { type: 'validationMessage', key: '✏️ Text', conditionProp: 'validation', map: { 'invalid': 'invalidMessage', 'valid': 'validMessage', default: 'message' } }
  */
-export type FigmaValidationMessageProp = {
+export type FigmaValidationMessageProp = FigmaBaseProp & {
     type: 'validationMessage';
     /** The Figma property key to read from the connected instance (e.g. '✏️ Text'). */
     key: string;
@@ -72,10 +82,16 @@ export type FigmaValidationMessageProp = {
 /**
  * Renders all direct code-connected child instances as children.
  * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
- *   .map((child) => child.executeTemplate().example)
+ *   .flatMap((child) => child.executeTemplate().example)
+ *
+ * When `filter` is provided, only instances whose **name** includes the filter string
+ * are included. Note: this differs from `nestedConnectedInstances` where filter matches
+ * against nestedImports.
  */
-export type FigmaConnectedInstancesProp = {
+export type FigmaConnectedInstancesProp = FigmaBaseProp & {
     type: 'connectedInstances';
+    /** Instance name substring to filter by (e.g. 'Navigation'). Only instances whose node name includes this string are included. When omitted, all connected instances are included. */
+    filter?: string;
 };
 /**
  * Renders code-connected child instances recursively, filtered by a nestedImports string.
@@ -90,16 +106,45 @@ export type FigmaConnectedInstancesProp = {
  *       .some((section) => section.nestedImports?.some((i) => i.includes('DBAccordionItem'))))
  *     .map((child) => child.executeTemplate().example)
  */
-export type FigmaNestedConnectedInstancesProp = {
+export type FigmaNestedConnectedInstancesProp = FigmaBaseProp & {
     type: 'nestedConnectedInstances';
     /** Import string to filter by (e.g. 'DBAccordionItem'). Only instances whose template nestedImports contain this string are included. When omitted, all connected instances are included. */
     filter?: string;
 };
+/**
+ * Maps multiple boolean Figma properties to a single enum code value.
+ * The first property whose value is `true` wins; if none match, the prop is omitted.
+ *
+ * @example
+ * linkVariant: { type: 'booleanToEnum', map: [{ key: '(Def) Link Variant: Block', value: 'block' }, { key: '↳ OR Link Variant: Inline', value: 'inline' }] }
+ */
+export type FigmaBooleanToEnumProp = FigmaBaseProp & {
+    type: 'booleanToEnum';
+    /** Ordered list of Figma boolean keys and the code value to emit when that key is true. */
+    map: Array<{
+        key: string;
+        value: string;
+    }>;
+};
+/**
+ * Finds all nested instances matching a filter and maps their properties to an array.
+ * Each matched instance produces one object in the array, with keys defined by `props`.
+ *
+ * @example
+ * options: { type: 'nestedInstancesToArray', filter: 'Custom Select List Item', props: { value: { type: 'string', key: '✏️ Value' }, label: { type: 'textContent', key: '✏️ Label' } } }
+ */
+export type FigmaNestedInstancesToArrayProp = FigmaBaseProp & {
+    type: 'nestedInstancesToArray';
+    /** Instance name substring to filter by (e.g. 'Custom Select List Item'). */
+    filter: string;
+    /** Map of output property names → Figma prop definitions to extract from each matched instance. */
+    props: Record<string, FigmaProp>;
+};
 /**
  * Wraps an iconSwap prop so it is only rendered when a boolean Figma property is enabled.
  * Generates: let icon = ''; if (getPropertyValue(guardKey) === true || getPropertyValue(guardKey) === 'True') { icon = `\n\t\ticon="${iconLeading}"` }
  */
-export type FigmaConditionalProp = {
+export type FigmaConditionalProp = FigmaBaseProp & {
     type: 'conditionalProp';
     /** The Figma property key of the icon instance swap. */
     key: string;
@@ -108,10 +153,17 @@ export type FigmaConditionalProp = {
     /** The attribute name to render (e.g. 'icon'). */
     attrName: string;
 };
-export type FigmaProp = FigmaEnumProp | FigmaInstanceProp | FigmaNestedTextProp | FigmaConnectedTextProp | FigmaValidationMessageProp | FigmaConditionalProp | FigmaConnectedInstancesProp | FigmaNestedConnectedInstancesProp | FigmaSimpleProp;
+export type FigmaProp = FigmaEnumProp | FigmaBooleanToEnumProp | FigmaInstanceProp | FigmaConnectedTextProp | FigmaValidationMessageProp | FigmaConditionalProp | FigmaConnectedInstancesProp | FigmaNestedConnectedInstancesProp | FigmaNestedInstancesToArrayProp | FigmaSimpleProp;
 export type FigmaCodeConnect = {
     /** Figma node URLs this component connects to. Use 'FIGMA_FILE' as placeholder for the file key. */
     urls: string[];
     /** Map of prop name → Figma prop definition. */
     props: Record<string, FigmaProp>;
+    /**
+     * Optional additional layer name substrings to include in the _ccLayers filter.
+     * Each entry adds an `|| n.name.includes('...')` condition to the findLayers predicate.
+     * Use when Code Connect properties live inside named subcomponent instances
+     * (e.g. 'Custom Select Form Field', 'Custom Select Dropdown').
+     */
+    ccLayerNames?: string[];
 };