@duyluonganduin/acl-web-components 0.0.45 → 0.0.49

package/dist/react.d.ts

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { LitElement } from 'lit';
 import { nothing } from 'lit';
+import { PropertyValues } from 'lit';
 import { ReactWebComponent } from '@lit/react';
 import { TemplateResult } from 'lit-html';
 
@@ -57,6 +58,76 @@ declare class AnduinButton extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A single-month calendar grid with month/year pickers and full keyboard
+ * navigation.
+ *
+ * Used on its own for day selection, and composed by `anduin-date-range` — the
+ * range picker drives `range-start` / `range-end` to paint the range across two
+ * calendars.
+ *
+ * All date attributes take an ISO date string (`YYYY-MM-DD`). `value` doubles as
+ * the selected day and the month the calendar opens on.
+ *
+ * @example
+ * <anduin-calendar value="2026-07-15" min-date="2026-01-01"></anduin-calendar>
+ */
+declare class AnduinCalendar extends LitElement {
+    static styles: CSSResult;
+    /** Selected day, ISO `YYYY-MM-DD`. Also the month the calendar opens on. */
+    value: string;
+    /** Earliest selectable day, ISO `YYYY-MM-DD`. */
+    minDate: string;
+    /** Latest selectable day, ISO `YYYY-MM-DD`. */
+    maxDate: string;
+    /** First day of a painted range, ISO `YYYY-MM-DD`. Set by `anduin-date-range`. */
+    rangeStart: string;
+    /** Last day of a painted range, ISO `YYYY-MM-DD`. Set by `anduin-date-range`. */
+    rangeEnd: string;
+    /**
+     * Suppress the single-day selected marker so only the range markers express
+     * selection. Set by `anduin-date-range` on its panels, where `value` is just
+     * the month anchor and highlighting it would read as a stray selected day.
+     */
+    rangeMode: boolean;
+    /** Displayed month, 0-based. Tracks `value` until the user navigates. */
+    private _viewMonth;
+    private _viewYear;
+    /** Roving-tabindex target for keyboard navigation, ISO `YYYY-MM-DD`. */
+    private _focus;
+    private _openSelect;
+    /** Set once `value` has seeded the view, so later edits don't yank the month
+     *  back while the user is browsing. */
+    private _viewSeeded;
+    /** Set when a keyboard action moved focus, so we refocus after re-render. */
+    private _pendingFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
+    private _onOutsideClick;
+    private get _min();
+    private get _max();
+    private _isDisabled;
+    /** Clamp into [min, max] so keyboard navigation can't escape the range. */
+    private _clamp;
+    private _shiftMonth;
+    /** Move the roving focus, pulling the displayed month along with it. */
+    private _moveFocus;
+    private _onGridKeyDown;
+    private _pick;
+    private _emitHover;
+    /** The day that owns `tabindex="0"` when nothing has been focused yet. */
+    private _defaultFocusDate;
+    /** Years offered in the year picker — bounded by min/max when set, otherwise
+     *  a ±10-year window around the displayed year. */
+    private get _yearOptions();
+    private _selectMonth;
+    private _selectYear;
+    private _renderSelect;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinCallout extends LitElement {
     static styles: CSSResult;
     variant: string;
@@ -76,6 +147,238 @@ declare class AnduinCheckbox extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A formatted date input. Displays a pattern such as `MM/dd/yyyy` and lets users
+ * type digits into each segment; clicking a segment highlights it, and focus
+ * auto-advances once a segment is filled.
+ *
+ * Typing is committed per segment: when no valid completion remains (typing `5`
+ * into a month, since `50`–`59` all exceed `12`) the digit is zero-padded and
+ * focus moves on. Arrow keys step a segment's value, wrapping at its bounds.
+ *
+ * `anduin-date-input:change` fires once every segment is filled; `event.detail`
+ * is the formatted string.
+ *
+ * @example
+ * <anduin-date-input format="MM/dd/yyyy" value="03/15/2026"></anduin-date-input>
+ */
+declare class AnduinDateInput extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResult;
+    /** Pattern to display and type into, e.g. `MM/dd/yyyy`, `yyyy-MM-dd`, `dd.MM.yyyy`. */
+    format: string;
+    /** Current value, formatted to match `format`. Empty until every segment is filled. */
+    value: string;
+    size: DateInputSize;
+    disabled: boolean;
+    readonly: boolean;
+    /** `valid` | `invalid` | `warning` | `loading`. */
+    status: string;
+    startIcon: string;
+    /** Earliest allowed date, ISO `YYYY-MM-DD`. Completed dates below it are clamped up. */
+    minDate: string;
+    /** Latest allowed date, ISO `YYYY-MM-DD`. Completed dates above it are clamped down. */
+    maxDate: string;
+    /** Matches `anduin-field-label`'s `for` so clicking the label focuses this input. */
+    inputid: string;
+    /** Committed digits per segment, index-aligned with `_segments`. */
+    private _digits;
+    /** Index of the segment being typed into. */
+    private _active;
+    /** Digits typed into the active segment but not yet committed. */
+    private _buffer;
+    private _inputEl;
+    /** Selection we want after the next render, so re-renders don't drop the highlight. */
+    private _pendingSelection;
+    private _tokens;
+    private _segments;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onFieldLabelClick;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
+    /** Parse an incoming formatted string by reading each segment's slice. */
+    private _adoptValue;
+    /** The rendered string: committed digits, the in-progress buffer, or placeholders. */
+    private _display;
+    /** The formatted value, or `''` while any segment is still empty. */
+    private _composeValue;
+    private _setDigits;
+    private _indexOfType;
+    /**
+     * Clamp a completed date into [minDate, maxDate]. Only applies when the format
+     * carries a full date — a partial format like `MM/dd` has no year to compare.
+     */
+    private _clampToBounds;
+    private _focusSegment;
+    /** Which segment contains (or is nearest to) a caret offset. */
+    private _segmentAt;
+    /**
+     * Snap the caret to whole-segment selection. Handled synchronously: by `mouseup`
+     * the browser has already placed the caret, and deferring (rAF/timeout) would
+     * leave a bare caret visible for a frame — or never run at all in a background
+     * tab, where rAF is throttled.
+     */
+    private _onSelectionIntent;
+    /** Write digits into a segment, clamped to its valid range and zero-padded. */
+    private _writeSegment;
+    /** Commit any half-typed digits so they aren't stranded on blur or navigation. */
+    private _flushBuffer;
+    private _commitBuffer;
+    private _typeDigit;
+    private _step;
+    private _clearSegment;
+    private _onKeyDown;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A formatted date input paired with a calendar popover.
+ *
+ * Clicking the input opens the calendar; typing a date into the input moves the
+ * calendar to match; picking a day closes the popover and fills the input.
+ * `disabled` and `readonly` both prevent the popover from opening.
+ *
+ * Slot content into `actions` to add buttons below the calendar — the consumer
+ * owns that container's layout entirely.
+ *
+ * @example
+ * <anduin-date-picker format="MM/dd/yyyy" value="03/15/2026"></anduin-date-picker>
+ */
+declare class AnduinDatePicker extends LitElement {
+    static styles: CSSResult;
+    /** Pattern for the input, e.g. `MM/dd/yyyy`. `value` must match it. */
+    format: string;
+    /** Current value, formatted to match `format`. */
+    value: string;
+    size: DateInputSize;
+    disabled: boolean;
+    readonly: boolean;
+    /** `valid` | `invalid` | `warning` | `loading`. */
+    status: string;
+    startIcon: string;
+    /** Earliest selectable date, ISO `YYYY-MM-DD`. */
+    minDate: string;
+    /** Latest selectable date, ISO `YYYY-MM-DD`. */
+    maxDate: string;
+    /** Where the calendar opens relative to the input. */
+    placement: DatePickerPlacement;
+    /** Matches `anduin-field-label`'s `for` so clicking the label focuses the input. */
+    inputid: string;
+    /** Mirrors the popover's own state — the popover owns opening and closing. */
+    private _open;
+    private _inputEl;
+    private _popoverEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onPopoverOpenChange;
+    private _closePopover;
+    /** The current value as a `Date`, or `null` while it is incomplete. */
+    private get _date();
+    /** ISO form of the value, for driving the calendar. */
+    private get _isoValue();
+    private _emit;
+    /** Typing a complete date in the input moves the calendar to match. */
+    private _onInputChange;
+    /** Picking a day fills the input and dismisses the popover. */
+    private _onCalendarChange;
+    private _onKeyDown;
+    /**
+     * Swallow the trigger click when the field is locked, so it never reaches the
+     * popover's own toggle handler.
+     */
+    private _onTriggerClick;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Two side-by-side calendars for picking a date range.
+ *
+ * Selection is a two-click flow: the first click sets the start and clears any
+ * previous end, the second sets the end (swapping if it falls before the start).
+ * A third click begins a new selection. `anduin-date-range:change` fires only
+ * once a range is complete, and `start-date` / `end-date` reflect the last
+ * complete range.
+ *
+ * Use `anduin-date-range-default` for the standard side-by-side layout, or place
+ * `anduin-date-range-start` and `anduin-date-range-end` yourself for full
+ * control over what sits between them.
+ *
+ * @example
+ * <anduin-date-range start-date="2026-07-10" end-date="2026-07-20">
+ *   <anduin-date-range-default></anduin-date-range-default>
+ * </anduin-date-range>
+ */
+declare class AnduinDateRange extends LitElement {
+    static styles: CSSResult;
+    /** First day of the selected range, ISO `YYYY-MM-DD`. */
+    startDate: string;
+    /** Last day of the selected range, ISO `YYYY-MM-DD`. */
+    endDate: string;
+    /** Earliest selectable day, ISO `YYYY-MM-DD`. Forwarded to both calendars. */
+    minDate: string;
+    /** Latest selectable day, ISO `YYYY-MM-DD`. Forwarded to both calendars. */
+    maxDate: string;
+    /** First click of an in-progress selection, ISO `YYYY-MM-DD`. */
+    private _anchor;
+    /** Hovered day while a selection is in progress, for the range preview. */
+    private _hover;
+    private _panels;
+    /** Last `value` we pushed per panel. Mirrors Lit's "only write on change" so a
+     *  calendar the user has navigated isn't yanked back to our derived month. */
+    private _pushedValue;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /** Called by each panel once it has rendered its calendar. */
+    registerPanel(role: DateRangePanelRole, panel: AnduinDateRangePanel): void;
+    unregisterPanel(panel: AnduinDateRangePanel): void;
+    /** Push the derived range state down onto each registered panel's calendar. */
+    private _sync;
+    /** Which month each panel opens on: the start date on the left, the month
+     *  after it on the right. Falls back to today when there's no range yet. */
+    private _panelValue;
+    /** The range the calendars should paint — the live preview while selecting,
+     *  otherwise the committed range. */
+    private _displayedRange;
+    private _sorted;
+    private _onCalendarChange;
+    private _onCalendarHover;
+    render(): TemplateResult<1>;
+}
+
+/** The standard side-by-side layout: start calendar, 16px gap, end calendar. */
+declare class AnduinDateRangeDefault extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/** The right-hand calendar of a date range. */
+declare class AnduinDateRangeEnd extends AnduinDateRangePanel {
+    protected readonly panelRole: "end";
+}
+
+/**
+ * Base class for the two calendar panels. Renders one `anduin-calendar` and
+ * registers with the enclosing `anduin-date-range`, which then drives it.
+ */
+declare abstract class AnduinDateRangePanel extends LitElement {
+    static styles: CSSResult;
+    protected abstract readonly panelRole: DateRangePanelRole;
+    private _host;
+    /** The calendar this panel owns. Read by `anduin-date-range`. */
+    get calendar(): AnduinCalendar | null;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _findRangeHost;
+    render(): TemplateResult<1>;
+}
+
+/** The left-hand calendar of a date range. */
+declare class AnduinDateRangeStart extends AnduinDateRangePanel {
+    protected readonly panelRole: "start";
+}
+
 declare class AnduinDivider extends LitElement {
     static styles: CSSResult;
     direction: string;
@@ -720,6 +1023,229 @@ declare class AnduinTabContent extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * anduin-table — displays tabular data with sorting, frozen columns, row
+ * selection, tree data, grouping, and virtual scrolling.
+ *
+ * Columns and data are set as JS properties rather than attributes, because
+ * both are structured values:
+ *
+ * @example
+ * const table = document.querySelector('anduin-table')
+ * table.columns = [
+ *   { type: 'selection' },
+ *   { field: 'fullName', title: 'Full name', isSortable: true, isFrozen: true },
+ *   { field: 'email', title: 'Email address', width: 220 },
+ *   { field: 'address.city', title: 'City' },
+ * ]
+ * table.data = employees
+ *
+ * Layout, height, loading, and selection behaviour are plain attributes:
+ *
+ * @example
+ * <anduin-table layout="fit-columns" max-height="480px" selectable="selectable">
+ *   <div slot="empty">No employees found</div>
+ * </anduin-table>
+ */
+declare class AnduinTable extends LitElement {
+    static styles: CSSResult;
+    /** The columns to render, in display order. Set as a property, not an attribute. */
+    columns: TableAnyColumn<any>[];
+    /** The rows to render. Set as a property, not an attribute. */
+    data: any[];
+    /** How column widths are resolved. */
+    layout: TableLayout;
+    /** `virtual` only paints rows inside the viewport, and needs a bounded height. */
+    renderMode: TableRenderMode;
+    /** Row height in pixels. Virtual mode requires every row to be this tall. */
+    rowHeight: number;
+    /** CSS height for the table, e.g. `80vh`. */
+    height: string;
+    /** CSS max-height for the table, e.g. `600px`. */
+    maxHeight: string;
+    /** CSS min-height for the table. */
+    minHeight: string;
+    /**
+     * Let users drag a column's right edge to resize it, and double-click that
+     * edge to put the column back on automatic width. On by default, matching the
+     * reference table. Turn it off table-wide with `resizable-columns="false"`, or
+     * per column with `isResizable: false`.
+     */
+    resizableColumns: boolean;
+    /** Present the table as a plain list, with no column headings. */
+    hideHeader: boolean;
+    /** Cover the table with a loading indicator. Slot `loading` to replace it. */
+    loading: boolean;
+    /** How rows respond to being clicked. */
+    selectable: TableSelectableMode;
+    /** The field holding each row's unique id. Falls back to the row's position. */
+    indexColumn: string;
+    /** Table-wide horizontal alignment. A column's own `align` wins. */
+    columnAlign: TableAlign;
+    /** Table-wide vertical alignment. A column's own `verticalAlign` wins. */
+    columnVerticalAlign: TableVerticalAlign;
+    /** The field currently sorted by. Set it to sort the table initially. */
+    sortField: string;
+    /** Direction of the current sort. */
+    sortDirection: TableSortDirection;
+    /** Treat `data` as a tree, reading each row's children from `tree-children-field`. */
+    dataTree: boolean;
+    /** The field holding a row's child rows in tree mode. */
+    treeChildrenField: string;
+    /** Pixels of indentation per tree level. */
+    treeChildIndent: number;
+    /** Group rows by this field. Rows sharing a value are collected under a heading. */
+    groupBy: string;
+    /** The currently selected rows. Assign to control the selection from outside. */
+    selectedRows: any[];
+    /** Decides whether a row's checkbox is disabled. */
+    isRowDisabled?: (data: any) => boolean;
+    /** Decides whether a tree row starts out expanded. */
+    onStartExpanded?: (data: any) => boolean;
+    /**
+     * Extra tokens for a row, for highlighting rows by their data. They are added
+     * both as classes and as `part` names, so a consumer can reach them from
+     * outside the shadow root — including for hover and other states:
+     *
+     *   anduin-table::part(overdue) { background: var(--color-danger-1); }
+     *   anduin-table::part(overdue):hover { background: var(--color-danger-2); }
+     */
+    rowClass?: (data: any, index: number) => string;
+    /** Renders a group heading. Defaults to `value (count)`. */
+    renderGroupHeader?: (value: unknown, count: number, rows: any[]) => unknown;
+    /** Keys of the tree rows the user has expanded. */
+    private expandedKeys;
+    /** Keys of the groups the user has collapsed. Groups start expanded. */
+    private collapsedGroups;
+    /** Scroll offset driving the virtual window. Named to avoid HTMLElement.scrollTop. */
+    private virtualScrollTop;
+    /** Height of the virtual viewport, tracked so the window stays filled. */
+    private viewportHeight;
+    /** Whether the table is scrolled away from its left edge. */
+    private scrolledX;
+    /** Whether there is still content to the right of the viewport. */
+    private scrollableXEnd;
+    /** Widths the user has dragged columns to, keyed by column. */
+    private resizedWidths;
+    /** The column currently being dragged, for the handle's active styling. */
+    private resizingKey;
+    /** Anchor row for shift-click and shift-drag range selection. */
+    private rangeAnchorKey;
+    /** True while a shift-drag range selection is in progress. */
+    private isDraggingRange;
+    /** Rows selected when the current drag began, so the drag can be re-applied. */
+    private dragBaseKeys;
+    /** Whether the current drag is adding to or removing from the selection. */
+    private dragSelects;
+    private resizeObserver?;
+    /** Rows expanded automatically, so `onStartExpanded` only applies once per key. */
+    private autoExpandedKeys;
+    /** In-flight column drag: where it started and how wide the column was then. */
+    private resizeDrag;
+    /** rAF handle, so a drag repaints once per frame instead of once per pointer event. */
+    private resizeFrame;
+    /**
+     * Selection keys for the current render pass. Recomputing the set per cell
+     * would make rendering quadratic in the row count, which virtual mode exists
+     * to avoid. Refreshed in `willUpdate`.
+     */
+    private renderSelectedKeys;
+    /** Selectable rows for the current render pass, for the header's checkbox. */
+    private renderSelectableRows;
+    /** The sorted, flattened, grouped row list. Rebuilt only when its inputs change. */
+    private cachedRenderRows;
+    private rowsDirty;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * Scrolling a virtual table re-renders on every frame, but only the visible
+     * window changes — the row list itself does not. Rebuild it only when one of
+     * its actual inputs changes, so scrolling stays cheap at 10k+ rows.
+     */
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private get scrollEl();
+    /** A stable identity for a row, used for selection and expansion state. */
+    private keyFor;
+    private get selectedKeySet();
+    private rowIsDisabled;
+    /**
+     * Frozen columns stick to whichever edge they are nearest: a leading run of
+     * frozen columns pins left, a trailing run pins right. An explicit
+     * `isFrozen: 'left' | 'right'` overrides that.
+     */
+    private get frozenSides();
+    /** Measures header widths and pins each frozen column at the right offset. */
+    private applyFrozenOffsets;
+    private get sortedColumn();
+    private sortRows;
+    private onHeaderClick;
+    /** Sorts, flattens the tree, and inserts group headings. */
+    private buildRenderRows;
+    private buildFlatRows;
+    private buildGroupedRows;
+    private isExpanded;
+    private toggleTreeRow;
+    private toggleGroup;
+    /** Expands every tree row that has children. */
+    expandAll(): void;
+    /** Collapses every tree row. */
+    collapseAll(): void;
+    /** Every selectable row currently on screen, in visual order. */
+    private get selectableRows();
+    private commitSelection;
+    private setRowSelected;
+    private toggleAllRows;
+    /** Selects (or clears) every row between the anchor and `row`, inclusive. */
+    private selectRange;
+    private onRowMouseDown;
+    private onRowMouseEnter;
+    private onWindowMouseUp;
+    private onRowClick;
+    private onCellContextMenu;
+    private onScroll;
+    private syncHorizontalScrollState;
+    /**
+     * Sizing for one column's header and body cells.
+     *
+     * `fit-data-stretch` hands all the slack to the final column, so that one is
+     * given `width: 100%` instead of its own width. Everywhere else an explicit
+     * `width` is pinned with a matching max-width: under `table-layout: auto` a
+     * bare `width` is only a suggestion, and long content would blow past it.
+     */
+    /** A stable identity for a column, used to remember a dragged width. */
+    private columnKey;
+    /** The width to lay a column out at: a dragged width beats the configured one. */
+    private widthFor;
+    /**
+     * True for the final column under fit-data-stretch, which absorbs the slack.
+     * Dragging that column opts it out — the user asked for a specific width, and
+     * stretching would immediately overrule them.
+     */
+    private isStretchColumn;
+    /** Marks how a column is sized, so the layout CSS can treat the cases apart. */
+    private sizingClass;
+    private cellStyle;
+    private isColumnResizable;
+    private onResizeStart;
+    private onResizeMove;
+    private onResizeEnd;
+    /** Double-clicking the handle puts the column back on automatic width. */
+    private onResizeReset;
+    /** Clears every dragged width, putting all columns back on automatic sizing. */
+    resetColumnWidths(): void;
+    private alignClass;
+    private renderHeaderCell;
+    private renderCell;
+    private get firstDataColumnIndex();
+    private renderRow;
+    private renderGroupRow;
+    private get columnCount();
+    private renderPlaceholder;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinTabs extends LitElement {
     static styles: CSSResult;
     defaultValue: string;
@@ -988,6 +1514,13 @@ declare type ButtonSize = 'tiny' | 'extraSmall' | 'small' | 'medium' | 'large' |
 
 declare type ButtonVariant = 'gray0' | 'gray9' | 'primary' | 'danger' | 'success' | 'warning' | 'purple';
 
+export declare const Calendar: ReactWebComponent<AnduinCalendar, {
+onValueChange: string;
+}>;
+
+/** Fired when a day is picked. `event.detail` is the ISO date string (`YYYY-MM-DD`). */
+export declare const CALENDAR_CHANGE = "anduin-calendar:change";
+
 export declare const Callout: ReactWebComponent<AnduinCallout, {}>;
 
 export declare const Checkbox: ReactWebComponent<AnduinCheckbox, {
@@ -996,6 +1529,42 @@ onChange: string;
 
 export declare const CHECKBOX_CHANGE = "anduin-checkbox:change";
 
+/** Fired when every segment is filled. `event.detail` is the formatted date string. */
+export declare const DATE_INPUT_CHANGE = "anduin-date-input:change";
+
+/** Fired when a date is completed by typing or picked from the calendar. `event.detail` is the formatted string. */
+export declare const DATE_PICKER_CHANGE = "anduin-date-picker:change";
+
+/**
+ * Fired when the user completes a range selection (both ends picked).
+ * `event.detail` is `{ startDate, endDate }`, both ISO `YYYY-MM-DD`.
+ */
+export declare const DATE_RANGE_CHANGE = "anduin-date-range:change";
+
+export declare const DateInput: ReactWebComponent<AnduinDateInput, {
+onValueChange: string;
+}>;
+
+declare type DateInputSize = 'small' | 'default' | 'large';
+
+export declare const DatePicker: ReactWebComponent<AnduinDatePicker, {
+onValueChange: string;
+}>;
+
+declare type DatePickerPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';
+
+export declare const DateRange: ReactWebComponent<AnduinDateRange, {
+onChange: string;
+}>;
+
+export declare const DateRangeDefault: ReactWebComponent<AnduinDateRangeDefault, {}>;
+
+export declare const DateRangeEnd: ReactWebComponent<AnduinDateRangeEnd, {}>;
+
+declare type DateRangePanelRole = 'start' | 'end';
+
+export declare const DateRangeStart: ReactWebComponent<AnduinDateRangeStart, {}>;
+
 export declare const Divider: ReactWebComponent<AnduinDivider, {}>;
 
 export declare const Dot: ReactWebComponent<AnduinDot, {}>;
@@ -1108,7 +1677,12 @@ export declare const PaginationFirstPage: ReactWebComponent<AnduinPaginationFirs
 
 export declare const PaginationLastPage: ReactWebComponent<AnduinPaginationLastPage, {}>;
 
-export declare const Popover: ReactWebComponent<AnduinPopover, {}>;
+export declare const Popover: ReactWebComponent<AnduinPopover, {
+onOpenChange: string;
+}>;
+
+/** Fired whenever `open` changes, including self-initiated toggles and outside clicks. `event.detail` is the new state. */
+export declare const POPOVER_OPEN_CHANGE = "anduin-popover:open-change";
 
 export declare const PopoverClose: ReactWebComponent<AnduinPopoverClose, {}>;
 
@@ -1211,6 +1785,229 @@ export declare const TAB_CHANGE = "anduin-tab:change";
 
 export declare const TabContent: ReactWebComponent<AnduinTabContent, {}>;
 
+export declare const Table: ReactWebComponent<AnduinTable, {
+onSort: string;
+onColumnClick: string;
+onRowClick: string;
+onSelectionChange: string;
+onCellContextMenu: string;
+onRowExpand: string;
+onRowCollapse: string;
+onGroupToggle: string;
+onColumnResize: string;
+}>;
+
+/** Fired on right-click over a data cell, so consumers can open their own menu. */
+export declare const TABLE_CELL_CONTEXT_MENU = "anduin-table:cell-context-menu";
+
+/** Fired when any column header is clicked, sortable or not. */
+export declare const TABLE_COLUMN_CLICK = "anduin-table:column-click";
+
+/** Fired when a column is resized by dragging, or reset by double-click. */
+export declare const TABLE_COLUMN_RESIZE = "anduin-table:column-resize";
+
+/** Fired when a group header is expanded or collapsed. */
+export declare const TABLE_GROUP_TOGGLE = "anduin-table:group-toggle";
+
+/** Fired when a data row is clicked. */
+export declare const TABLE_ROW_CLICK = "anduin-table:row-click";
+
+/** Fired when a tree row is collapsed. */
+export declare const TABLE_ROW_COLLAPSE = "anduin-table:row-collapse";
+
+/** Fired when a tree row is expanded. */
+export declare const TABLE_ROW_EXPAND = "anduin-table:row-expand";
+
+/** Fired whenever the set of selected rows changes. */
+export declare const TABLE_SELECTION_CHANGE = "anduin-table:selection-change";
+
+/** Fired when a sortable column header is activated. */
+export declare const TABLE_SORT = "anduin-table:sort";
+
+/** Horizontal alignment of a column's content. */
+export declare type TableAlign = 'left' | 'center' | 'right';
+
+/** Any entry accepted by the `columns` property. */
+export declare type TableAnyColumn<T = unknown> = TableColumn<T> | TableSelectionColumn<T>;
+
+/** `detail` of `anduin-table:cell-context-menu`. */
+export declare interface TableCellContextMenuDetail<T = unknown> {
+    data: T;
+    key: string;
+    index: number;
+    column: TableColumn<T>;
+    /** Viewport coordinates of the click, for positioning a menu. */
+    x: number;
+    y: number;
+    originalEvent: MouseEvent;
+}
+
+/** What `renderCell` receives. */
+export declare interface TableCellRenderProps<T = unknown> {
+    /** The row's underlying model. */
+    data: T;
+    /** The value at `column.field`, resolved through dot notation. */
+    value: unknown;
+    /** Index of the row in the sorted, flattened row list. */
+    rowIndex: number;
+    /** The column being rendered. */
+    column: TableColumn<T>;
+}
+
+/**
+ * A column definition.
+ *
+ * `renderCell` / `renderHeader` may return anything Lit can render: a string, a
+ * number, a DOM `Node`, or a Lit `TemplateResult`. Returning a `Node` is the
+ * portable choice for consumers that are not using Lit themselves.
+ */
+export declare interface TableColumn<T = unknown> {
+    /** The model property this column shows. Supports dot notation (`address.city`). */
+    field: string;
+    /** The column heading. */
+    title?: string;
+    /** Column width in pixels. */
+    width?: number;
+    /** Lower bound for the column's width in pixels. */
+    minWidth?: number;
+    /** Show a sort control in the header and let users sort by this column. */
+    isSortable?: boolean;
+    /** Stick the column to the left or right edge while the table scrolls sideways. */
+    isFrozen?: TableFrozen;
+    /** Horizontal alignment for this column, overriding the table-wide default. */
+    align?: TableAlign;
+    /** Vertical alignment for this column, overriding the table-wide default. */
+    verticalAlign?: TableVerticalAlign;
+    /** Horizontal alignment for the header cell. Defaults to `align`. */
+    headerAlign?: TableAlign;
+    /** Hide the cell's content until its row is hovered, selected, or focused. */
+    showOnRowHover?: boolean;
+    /** Let users drag this column's edge to resize it. Defaults to the table's setting. */
+    isResizable?: boolean;
+    /** Renders the cell body. Defaults to the raw value at `field`. */
+    renderCell?: (props: TableCellRenderProps<T>) => unknown;
+    /** Renders the header body. Defaults to `title`. */
+    renderHeader?: (props: TableHeaderRenderProps<T>) => unknown;
+    /** Compares two rows. Return <0, 0, or >0. Defaults to comparing `field`. */
+    sortWith?: (sorter: TableColumnSorter<T>) => number;
+}
+
+/** `detail` of `anduin-table:column-resize`. */
+export declare interface TableColumnResizeDetail<T = unknown> {
+    column: TableAnyColumn<T>;
+    field: string;
+    /** The column's new width in pixels, or null when it was reset to automatic. */
+    width: number | null;
+}
+
+/** What a column's `sortWith` receives. Either side may be missing. */
+export declare interface TableColumnSorter<T = unknown> {
+    a: T | undefined;
+    b: T | undefined;
+}
+
+/** Which edge a frozen column sticks to. `true` picks the edge from its position. */
+export declare type TableFrozen = boolean | 'left' | 'right';
+
+/** `detail` of `anduin-table:group-toggle`. */
+export declare interface TableGroupToggleDetail<T = unknown> {
+    value: unknown;
+    rows: T[];
+    expanded: boolean;
+}
+
+/** What `renderHeader` receives. */
+export declare interface TableHeaderRenderProps<T = unknown> {
+    column: TableColumn<T>;
+    /** The column's current sort direction, or null when it is not sorted. */
+    sortDirection: TableSortDirection | null;
+}
+
+/**
+ * How column widths are resolved.
+ *   - `fit-data`          size columns to their content (default)
+ *   - `fit-columns`       size columns to divide up the table's width exactly
+ *   - `fit-data-fill`     size to content, but rows always span the full width
+ *   - `fit-data-stretch`  size to content, stretching the last column
+ *   - `fit-data-table`    size to content, shrinking the table to their total
+ */
+export declare type TableLayout = 'fit-data' | 'fit-columns' | 'fit-data-fill' | 'fit-data-stretch' | 'fit-data-table';
+
+/** Render mode. `virtual` only paints the rows inside the viewport. */
+export declare type TableRenderMode = 'basic' | 'virtual';
+
+/** `detail` of `anduin-table:row-click`. */
+export declare interface TableRowClickDetail<T = unknown> {
+    data: T;
+    key: string;
+    index: number;
+    originalEvent: MouseEvent;
+}
+
+/** `detail` of `anduin-table:row-expand` and `anduin-table:row-collapse`. */
+export declare interface TableRowExpandDetail<T = unknown> {
+    data: T;
+    key: string;
+    expanded: boolean;
+}
+
+/**
+ * How rows respond to being clicked.
+ *   - `unselectable`             rows cannot be selected
+ *   - `clickable`                rows report clicks but never select (default)
+ *   - `selectable`               clicking a row toggles its selection
+ *   - `selectable-by-clicking`   click, then shift-click, to select a range
+ *   - `selectable-by-dragging`   shift and drag across rows to select a range
+ */
+export declare type TableSelectableMode = 'unselectable' | 'clickable' | 'selectable' | 'selectable-by-clicking' | 'selectable-by-dragging';
+
+/** What the selection column's `renderCell` receives. */
+export declare interface TableSelectionCellRenderProps<T = unknown> {
+    data: T;
+    isChecked: boolean;
+    isDisabled: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+/** `detail` of `anduin-table:selection-change`. */
+export declare interface TableSelectionChangeDetail<T = unknown> {
+    selectedRows: T[];
+    selectedKeys: string[];
+}
+
+/**
+ * A checkbox column. Put it in `columns` wherever the checkboxes should appear —
+ * usually first. It carries the same layout options as a normal column.
+ */
+export declare interface TableSelectionColumn<T = unknown> extends Omit<TableColumn<T>, 'field' | 'renderCell' | 'renderHeader' | 'sortWith' | 'isSortable'> {
+    type: 'selection';
+    field?: string;
+    /** Replaces the row checkbox, e.g. with an anduin-switcher. */
+    renderCell?: (props: TableSelectionCellRenderProps<T>) => unknown;
+    /** Replaces the header checkbox, e.g. with a "Select all" button. */
+    renderHeader?: (props: TableSelectionHeaderRenderProps) => unknown;
+}
+
+/** What the selection column's `renderHeader` receives. */
+export declare interface TableSelectionHeaderRenderProps {
+    areAllRowsSelected: boolean;
+    hasSelectedRow: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+/** `detail` of `anduin-table:sort`. */
+export declare interface TableSortDetail<T = unknown> {
+    field: string;
+    direction: TableSortDirection | null;
+    column: TableColumn<T>;
+}
+
+/** Sort direction of the currently sorted column. */
+export declare type TableSortDirection = 'asc' | 'desc';
+
+/** Vertical alignment of a column's content within its row. */
+export declare type TableVerticalAlign = 'top' | 'middle' | 'bottom';
+
 export declare const Tabs: ReactWebComponent<AnduinTabs, {
 onChange: string;
 }>;