@orangelogic/design-system 2.142.0 → 2.144.0

package/library/components/typography.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as a } from "../chunks/typography.DJC_UXgs.js";
+import { C as a } from "../chunks/typography.IqHbnd3C.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/lit-element.jLBm65_O.js";
 export {

package/library/components/video.js

@@ -1,14 +1,14 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.B3vsXGrN.js";
+import { C as Cb } from "../chunks/image.DVbY2O89.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as kb } from "../chunks/i18n.DeUAP8n2.js";
-import { w as Ki } from "../chunks/watch.CThbualB.js";
+import { L as kb } from "../chunks/i18n.DYXys45m.js";
+import { w as Ki } from "../chunks/watch.K-dbDP6P.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { r as yn } from "../chunks/state.CSDxrqLd.js";

package/library/css/ol-base.css

@@ -82,9 +82,9 @@
    */
 
   /* Buttons */
-  --cx-button-border-radius-large      : var(--cx-border-radius-medium);
-  --cx-button-border-radius-medium     : var(--cx-border-radius-medium);
-  --cx-button-border-radius-small      : var(--cx-border-radius-medium);
+  --cx-button-border-radius-large      : var(--cx-border-radius-large);
+  --cx-button-border-radius-medium     : var(--cx-border-radius-large);
+  --cx-button-border-radius-small      : var(--cx-border-radius-large);
   --cx-button-font-size-large          : var(--cx-font-size-medium);
   --cx-button-font-size-medium         : var(--cx-font-size-small);
   --cx-button-font-size-small          : var(--cx-font-size-x-small);

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.142.0",
+  "version": "2.144.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/header/header.d.ts

@@ -71,7 +71,7 @@ export default class CxHeader extends CortexElement {
     addSlotElement(): void;
     handleHeadingChange(): void;
     private handleCopyButtonClick;
-    renderHeading(content: TemplateResult): TemplateResult;
+    renderHeading(): TemplateResult;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/atoms/src/components/tree/tree.d.ts

@@ -114,6 +114,19 @@ export default class CxTree extends CortexElement {
     private handleKeyDown;
     private handleClick;
     handleMouseDown(event: MouseEvent): void;
+    /**
+     * A `mousedown` whose real, non-retargeted origin (`composedPath()[0]`) is
+     * the tree host itself is only reachable by clicking the host's own
+     * scrollbar/gutter — shadow content otherwise fills the box, so a content
+     * click's real origin is always a descendant. The browser's default action
+     * for that mousedown focuses the host, and since the host is itself the
+     * scrollable element (`overflow: auto`), focusing it resets its own
+     * scrollTop natively — before any of our JS runs, so `preventScroll` on a
+     * later `this.focusItem(...)` call can't undo it. Cancel that default
+     * action outright; it doesn't affect the scrollbar's own drag/track
+     * behavior, only whether the mousedown also focuses the element.
+     */
+    private handleHostMouseDown;
     private handleFocusOut;
     private handleFocusIn;
     private expandToItem;

package/library/packages/events/src/cx-board-change.d.ts

@@ -0,0 +1,12 @@
+export type CxBoardChangeEvent = CustomEvent<{
+    id: string;
+    isMultiDrag?: boolean;
+    items: string[];
+    newIndex?: number;
+    type: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-board-change': CxBoardChangeEvent;
+    }
+}

package/library/packages/events/src/cx-board-selected-change.d.ts

@@ -0,0 +1,10 @@
+export type CxBoardSelectedChangeEvent = CustomEvent<{
+    id: string;
+    items: string[];
+    type?: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-board-selected-change': CxBoardSelectedChangeEvent;
+    }
+}

package/library/packages/events/src/cx-font-picker-change.d.ts

@@ -0,0 +1,9 @@
+export type CxFontPickerChangeEvent = CustomEvent<{
+    family: string;
+    style: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-font-picker-change': CxFontPickerChangeEvent;
+    }
+}

package/library/packages/events/src/cx-multi-select-change.d.ts

@@ -0,0 +1,11 @@
+import { BoardItem } from '../../types/src/board';
+
+export type CxMultiSelectChangeEvent = CustomEvent<{
+    id: string;
+    items: BoardItem[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-multi-select-change': CxMultiSelectChangeEvent;
+    }
+}

package/library/packages/events/src/cx-multi-select-configure.d.ts

@@ -0,0 +1,8 @@
+export type CxMultiSelectConfigureEvent = CustomEvent<{
+    id: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-multi-select-configure': CxMultiSelectConfigureEvent;
+    }
+}

package/library/packages/events/src/cx-table-column-editor-apply.d.ts

@@ -0,0 +1,8 @@
+export type CxTableColumnEditorApplyEvent = CustomEvent<{
+    visibleFields: string[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-column-editor-apply': CxTableColumnEditorApplyEvent;
+    }
+}

package/library/packages/events/src/cx-table-column-editor-cancel.d.ts

@@ -0,0 +1,6 @@
+export type CxTableColumnEditorCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-column-editor-cancel': CxTableColumnEditorCancelEvent;
+    }
+}

package/library/packages/events/src/cx-table-column-visibility-change.d.ts

@@ -0,0 +1,9 @@
+export type CxTableColumnVisibilityChangeEvent = CustomEvent<{
+    field: string;
+    visible: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-column-visibility-change': CxTableColumnVisibilityChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-columns-change.d.ts

@@ -0,0 +1,8 @@
+export type CxTableColumnsChangeEvent = CustomEvent<{
+    visibleFields: string[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-columns-change': CxTableColumnsChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-edit-columns.d.ts

@@ -0,0 +1,8 @@
+export type CxTableEditColumnsEvent = CustomEvent<{
+    field: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-edit-columns': CxTableEditColumnsEvent;
+    }
+}

package/library/packages/events/src/cx-table-header-menu-close.d.ts

@@ -0,0 +1,6 @@
+export type CxTableHeaderMenuCloseEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-header-menu-close': CxTableHeaderMenuCloseEvent;
+    }
+}

package/library/packages/events/src/cx-table-header-menu-select.d.ts

@@ -0,0 +1,11 @@
+import { TableHeaderMenuAction } from '../../types/src/table';
+
+export type CxTableHeaderMenuSelectEvent = CustomEvent<{
+    action: TableHeaderMenuAction;
+    field: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-header-menu-select': CxTableHeaderMenuSelectEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -23,6 +23,8 @@ export * from './cx-bento-range-change';
 export * from './cx-bento-resize';
 export * from './cx-bicolor-picker-change';
 export * from './cx-blur';
+export * from './cx-board-change';
+export * from './cx-board-selected-change';
 export * from './cx-book-reader-event';
 export * from './cx-border-input-group-change';
 export * from './cx-cancel';
@@ -83,6 +85,7 @@ export * from './cx-focus';
 export * from './cx-folder-select-children-loaded';
 export * from './cx-folder-select-search-term-change';
 export * from './cx-folder-select-selection-seeded';
+export * from './cx-font-picker-change';
 export * from './cx-gallery-chunk-request';
 export * from './cx-gallery-config-save';
 export * from './cx-gallery-item-click';
@@ -122,6 +125,8 @@ export * from './cx-marker-create';
 export * from './cx-marker-delete';
 export * from './cx-masonry-select';
 export * from './cx-mount-request-asset';
+export * from './cx-multi-select-change';
+export * from './cx-multi-select-configure';
 export * from './cx-mutation';
 export * from './cx-open-cache-location';
 export * from './cx-open-drive';
@@ -189,10 +194,17 @@ export * from './cx-swatch-add';
 export * from './cx-tab-hide';
 export * from './cx-tab-show';
 export * from './cx-table-advanced-search-click';
+export * from './cx-table-column-editor-apply';
+export * from './cx-table-column-editor-cancel';
+export * from './cx-table-column-visibility-change';
+export * from './cx-table-columns-change';
 export * from './cx-table-data-load';
 export * from './cx-table-dropdown-filter-change';
+export * from './cx-table-edit-columns';
 export * from './cx-table-export';
 export * from './cx-table-group-by-change';
+export * from './cx-table-header-menu-close';
+export * from './cx-table-header-menu-select';
 export * from './cx-table-row-action-click';
 export * from './cx-table-save-search-select';
 export * from './cx-table-select-all-change';

package/library/packages/hybrid/book-reader/src/react/constant.d.ts

@@ -60,6 +60,7 @@ export declare const API_ENDPOINT: {
     SEARCH_TEXT: string;
 };
 export declare const MAX_WHEEL_DISTANCE = 50;
+export declare const ARROW_KEY_SCROLL_STEP = 80;
 export declare const PASSWORD_REASON: {
     INCORRECT_PASSWORD: number;
     NEED_PASSWORD: number;

package/library/packages/hybrid/book-reader/src/react/hooks/useBookEvents.d.ts

@@ -9,5 +9,5 @@ type ShortcutCallback = {
     onZoomOut: () => void;
     toggleFullscreen: () => void;
 };
-export declare const useBookEvents: (element: HTMLDivElement | null, totalPages: number, { onNextPage, onOpenSearchBox, onPageChange, onPreviousPage, onScaleChange, onScaleOptionChange, onZoomIn, onZoomOut, toggleFullscreen, }: ShortcutCallback) => void;
+export declare const useBookEvents: (element: HTMLDivElement | null, totalPages: number, { onNextPage, onOpenSearchBox, onPageChange, onPreviousPage, onScaleChange, onScaleOptionChange, onZoomIn, onZoomOut, toggleFullscreen, }: ShortcutCallback, scrollElement?: HTMLElement | null) => void;
 export {};

package/library/packages/hybrid/book-reader/src/react/hooks/useRestoreFocusOnClose.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a ref for the control that opened a panel/menu (e.g. the search or sidebar toggle).
+ * When `open` flips from true to false (the panel just closed), focus is returned to that control
+ * so keyboard users keep their place instead of losing focus to the body
+ * (WCAG 2.4.3 Focus Order / 2.4.7 Focus Visible).
+ */
+export declare const useRestoreFocusOnClose: <T extends HTMLElement>(open: boolean) => import('react').RefObject<T | null>;
+export default useRestoreFocusOnClose;

package/library/packages/hybrid/table-core/src/table/components/index.d.ts

@@ -1,3 +1,5 @@
+export { default as CxTableColumnEditor } from './table-column-editor/table-column-editor';
 export { default as CxTableFooter } from './table-footer/table-footer';
+export { default as CxTableHeaderMenu } from './table-header-menu/table-header-menu';
 export { default as CxTableRowActions } from './table-row-actions/table-row-actions';
 export { default as CxTableToolbar } from './table-toolbar/table-toolbar';

package/library/packages/hybrid/table-core/src/table/components/table-column-editor/table-column-editor.d.ts

@@ -0,0 +1,45 @@
+import { default as CxButton } from '../../../../../../atoms/src/components/button/button.ts';
+import { default as CxDialog } from '../../../../../../atoms/src/components/dialog/dialog.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { default as CxMultiSelect } from '../../../../../../molecules/src/multi-select/multi-select.ts';
+import { TableColumnEditorEntry } from '../../../../../../types/src/table-column-editor';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Bulk "Edit columns" editor for `cx-table`. Opens a modal dialog containing a
+ * `cx-multi-select`: left list is available (hidden) columns, right list is visible columns,
+ * reorderable via drag. Frozen columns are shown locked and pinned first in the visible list.
+ *
+ * @event {{ visibleFields: string[] }} cx-table-column-editor-apply - Emitted when the user confirms a new visible column set/order.
+ * @event cx-table-column-editor-cancel - Emitted when the user dismisses the editor without applying.
+ */
+export default class CxTableColumnEditor extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-dialog': typeof CxDialog;
+        'cx-multi-select': typeof CxMultiSelect;
+    };
+    private readonly localize;
+    private readonly dialogEl;
+    /** Whether the editor dialog is open. */
+    open: boolean;
+    /** Snapshot of columns (in current render order) to edit. Set by `cx-table`. */
+    entries: TableColumnEditorEntry[];
+    private firstColumnData;
+    private secondColumnData;
+    /** Current order of the visible ("selected") board, including frozen fields. */
+    private visibleFields;
+    private get canApply();
+    handleEntriesChange(): void;
+    private handleMultiSelectChange;
+    private handleApply;
+    private handleCancel;
+    private handleDialogRequestClose;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table-column-editor': CxTableColumnEditor;
+    }
+}

package/library/packages/hybrid/table-core/src/table/components/table-column-editor/table-column-editor.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/hybrid/table-core/src/table/components/table-header-menu/table-header-menu.d.ts

@@ -0,0 +1,55 @@
+import { default as CxIcon } from '../../../../../../atoms/src/components/icon/icon.ts';
+import { default as CxMenu } from '../../../../../../atoms/src/components/menu/menu.ts';
+import { default as CxMenuItem } from '../../../../../../atoms/src/components/menu-item/menu-item.ts';
+import { default as CxPopup } from '../../../../../../atoms/src/components/popup/popup.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Right-click context menu for `cx-table` column headers, offering "Edit columns" (extension point) and
+ * "Hide column" actions.
+ *
+ * @description Anchored to the cursor position via a `VirtualElement`. Dismisses on outside click, a second
+ * right-click outside the menu, or `Escape`.
+ *
+ * @event {{ action: TableHeaderMenuAction, field: string }} cx-table-header-menu-select - Emitted when a menu item is selected.
+ * @event cx-table-header-menu-close - Emitted when the menu should be closed (outside interaction or Escape).
+ */
+export default class CxTableHeaderMenu extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-icon': typeof CxIcon;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-popup': typeof CxPopup;
+    };
+    private readonly localize;
+    private readonly virtualAnchor;
+    private readonly firstMenuItem;
+    /** Whether the menu is open. */
+    open: boolean;
+    /** The cursor's x position (viewport coordinates) the menu is anchored to. */
+    pointX: number;
+    /** The cursor's y position (viewport coordinates) the menu is anchored to. */
+    pointY: number;
+    /** The field of the column the menu was opened for. */
+    field: string;
+    /** Disables the "Hide column" item, e.g. when only one visible data column remains. */
+    hideDisabled: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleOpenChange(): void;
+    private handlePopupOpened;
+    private removeDocumentListeners;
+    private handleDocumentMouseDown;
+    private handleDocumentKeyDown;
+    private emitClose;
+    private handleMenuSelect;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table-header-menu': CxTableHeaderMenu;
+    }
+}

package/library/packages/hybrid/table-core/src/table/components/table-header-menu/table-header-menu.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/hybrid/table-core/src/table/controllers/filter-controller.d.ts

@@ -20,10 +20,20 @@ export declare class FilterController implements ReactiveController {
     private readonly host;
     private readonly filters;
     private isConnected;
+    /**
+     * The filter set last pushed to Tabulator. Used to skip redundant `setFilter`
+     * calls: in remote filter mode every `setFilter` forces a server reload
+     * (`userSetFilter` → `refreshFilter` → `reloadData`), so re-applying an
+     * identical set — the empty no-op on `tableBuilt`, or the repeated sync calls
+     * fired during build — causes a duplicate fetch and a visible re-render.
+     * Compared with lodash `isEqual` (deep) rather than a serialized key.
+     */
+    private lastAppliedFilters;
     constructor(host: ReactiveControllerHost & CxTable);
     hostConnected(): void;
     hostDisconnected(): void;
     hostUpdated(): void;
+    resetAppliedFilterBaseline(): void;
     /**
      * Set filters for a specific source, replacing any existing filters for that source.
      * @param source - The filter source identifier

package/library/packages/hybrid/table-core/src/table/controllers/select-all-controller.d.ts

@@ -49,6 +49,18 @@ export declare class SelectAllController implements ReactiveController {
     private handleDataLoading;
     private handleRowSelectionChanged;
     private handleDataLoaded;
+    /**
+     * Row count for select-all mode. With remote pagination only the current page
+     * is in memory, so the count is derived from the server total:
+     * `totalCount − explicitly-deselected`. When the full dataset is in memory
+     * (local, or ajax without pagination), it is the number of rows actually
+     * selected (`fallbackSelectedCount`), which naturally excludes
+     * disabled/non-selectable rows since those are never selected.
+     *
+     * Also falls back to `fallbackSelectedCount` when the server total has not
+     * loaded yet (`remoteTotalCount === 0`), so the count never goes negative.
+     */
+    private getSelectAllCount;
     private clearTabulatorSelection;
     private purgeStaleSelectedRows;
     private findDisabledFn;

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -14,7 +14,7 @@ import { DateFilterCompareFormat, HoverMenuOptions, HttpMethod, PaginationPlacem
 import { SavedSearchItem, TableDropdownFilterData, TableGroupByOption } from '../../../../types/src/table-toolbar';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { RowComponent, TabulatorFull as Tabulator } from '../tabulator-tables';
-import { CxTableFooter, CxTableRowActions, CxTableToolbar } from './components';
+import { CxTableColumnEditor, CxTableFooter, CxTableHeaderMenu, CxTableRowActions, CxTableToolbar } from './components';
 
 /**
  * @summary Tables are used to display data in a structured format.
@@ -71,6 +71,8 @@ import { CxTableFooter, CxTableRowActions, CxTableToolbar } from './components';
  * @event {{ url: string, format: string, rowCount: number }} cx-table-data-load - Emitted when data is successfully loaded from dataUrl.
  * @event {{ url: string, error: unknown }} cx-table-data-load-error - Emitted when fetching or parsing data from dataUrl fails.
  * @event {{ invalidCellCount: number, invalidCells: ICellComponent[] }} cx-table-validation-change - Emitted when the set of cells failing column `validator` rules changes (edit, load validation, or programmatic validate).
+ * @event {{ field: string, visible: boolean }} cx-table-column-visibility-change - Emitted after a column's visibility changes via the header right-click "Hide column" action.
+ * @event {{ field: string }} cx-table-edit-columns - Emitted when "Edit columns" is chosen from the header right-click menu. Extension point for a future manage-columns panel; no built-in panel is shown.
  */
 export default class CxTable extends CortexElement {
     #private;
@@ -87,7 +89,9 @@ export default class CxTable extends CortexElement {
         'cx-select': typeof CxSelect;
         'cx-space': typeof CxSpace;
         'cx-spinner': typeof CxSpinner;
+        'cx-table-column-editor': typeof CxTableColumnEditor;
         'cx-table-footer': typeof CxTableFooter;
+        'cx-table-header-menu': typeof CxTableHeaderMenu;
         'cx-table-row-actions': typeof CxTableRowActions;
         'cx-table-toolbar': typeof CxTableToolbar;
         'cx-tooltip': typeof CxTooltip;
@@ -213,6 +217,11 @@ export default class CxTable extends CortexElement {
      * The columnDefaults option allows you to set default configs for all columns in the table.
      */
     columnDefaults: Partial<ColumnDefinition>;
+    /**
+     * Enables the right-click context menu on column headers, offering "Edit columns" and "Hide column" actions.
+     * Disabled by default.
+     */
+    headerContextMenu: boolean;
     /**
      * Whether to display a search box
      */
@@ -798,10 +807,36 @@ export default class CxTable extends CortexElement {
     private dataUrlRequestId;
     /** True when facets are available — either from facet-config or from an AJAX response. Controls toolbar visibility. */
     hasFacets: boolean;
+    /** Whether the column-header right-click context menu is open. */
+    private headerMenuOpen;
+    /** The field of the column the header context menu was opened for. */
+    private headerMenuField;
+    /** The cursor's x position (viewport coordinates) the header context menu is anchored to. */
+    private headerMenuPointX;
+    /** The cursor's y position (viewport coordinates) the header context menu is anchored to. */
+    private headerMenuPointY;
+    /** Whether "Hide column" is disabled because hiding it would leave no visible data columns. */
+    private headerMenuHideDisabled;
+    /** Whether the bulk "Edit columns" editor dialog is open. */
+    private columnEditorOpen;
+    /** Snapshot of columns (in current render order) handed to the editor when it opens. */
+    private columnEditorEntries;
     get initialized(): boolean | undefined;
     get searchValue(): string;
     get isBottomPlacement(): boolean;
     get showPaginationFooter(): boolean;
+    /**
+     * Whether data is loaded per page from the server, so only the current page's
+     * rows are in memory. True only when pagination is on AND the data source is
+     * remote — an `ajaxURL` (which forces the internal pagination mode to remote)
+     * or an explicit `paginationMode="remote"`. With pagination off, an ajax table
+     * still fetches the full dataset in one request, so this is false.
+     *
+     * Note: do not rely on `this.paginationMode` alone — the Ajax module forces the
+     * internal Tabulator option to remote without updating this Lit property, so
+     * the `ajaxURL` term is what catches the ajax case.
+     */
+    get isRemotePagination(): boolean;
     /**
      * Whether pagination alone should render the toolbar. A top-placed paginator
      * sits in the toolbar header row, and by default the empty header row is
@@ -827,6 +862,7 @@ export default class CxTable extends CortexElement {
     constructor();
     connectedCallback(): void;
     runFirstUpdated(): void;
+    private initTableWhenSized;
     /**
      * All logic that needs to run when the table is built should be placed here.
      */
@@ -899,6 +935,23 @@ export default class CxTable extends CortexElement {
     private handleTabulatorAjaxResponse;
     private renderToolbar;
     private renderPaginationFooter;
+    /** Opens the column-header right-click context menu, anchored to the cursor position. */
+    private handleHeaderContextMenu;
+    private handleHeaderMenuSelect;
+    private handleHeaderMenuClose;
+    private handleColumnEditorApply;
+    private handleColumnEditorCancel;
+    /** Counts visible data columns (columns with a `field`) to decide whether "Hide column" should be disabled. */
+    private getVisibleDataColumnCount;
+    /** Builds the "Edit columns" editor model from current data columns, in current render order. */
+    private getColumnEditorModel;
+    /**
+     * Applies the "Edit columns" editor result: shows/hides non-frozen data columns to match
+     * `orderedVisibleFields`, reorders them to match, then emits the public change event. Frozen
+     * columns are never hidden or moved — they stay pinned, matching the engine's own
+     * MoveColumns guard against dragging frozen columns.
+     */
+    applyColumnEditor(orderedVisibleFields: string[]): void;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/molecules/src/font-picker/font-picker.d.ts

@@ -0,0 +1,74 @@
+import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxMenuLabel } from '../../../atoms/src/components/menu-label/menu-label.ts';
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { FontPickerLayout, FontTypeface, FontTypefaceGroup } from '../../../types/src/font-picker';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * @summary A picker that allows selecting a typeface and its font family variant.
+ *
+ * @event {{ family: string; style: string }} cx-font-picker-change - Emitted when the selected typeface or font family changes.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart family - The typeface select.
+ * @csspart style - The font-family select.
+ *
+ */
+export default class CxFontPicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    private readonly localize;
+    static readonly dependencies: {
+        'cx-divider': typeof CxDivider;
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-menu-label': typeof CxMenuLabel;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+        'cx-space': typeof CxSpace;
+        'cx-typography': typeof CxTypography;
+    };
+    /** The list of available typefaces, each containing font family variants. */
+    fontTypefaces: FontTypeface[];
+    /** The list of typeface groups, each with a label and typefaces. Takes precedence over fontTypefaces when non-empty. */
+    fontTypefaceGroups: FontTypefaceGroup[];
+    /** The selected typeface value. */
+    familyValue: string;
+    /** The selected font family value. Empty string means no family selected. */
+    styleValue: string;
+    /** Controls how the two selects are arranged. */
+    layout: FontPickerLayout;
+    /** Label text for the typeface select. */
+    labelFamily: string;
+    /** Label text for the font family select. */
+    labelStyle: string;
+    /** Marks both selects as required for form validation. */
+    required: boolean;
+    /**
+     * Single normalized representation of the input: an ungrouped `fontTypefaces`
+     * list becomes one unlabeled group, so the template has a single render path.
+     * Grouped input (`fontTypefaceGroups`) takes precedence when provided.
+     */
+    private get typefaceGroups();
+    private get allTypefaces();
+    private get selectedTypeface();
+    private get availableFamilies();
+    /** Whether the selected typeface exposes any style/variant options. */
+    private get hasStyleOptions();
+    private handleFamilyChange;
+    private handleStyleChange;
+    private renderTypefaceOptions;
+    private renderFamilySelect;
+    private renderStyleSelect;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-font-picker': CxFontPicker;
+    }
+}

package/library/packages/molecules/src/font-picker/font-picker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/index.d.ts

@@ -20,6 +20,7 @@ export { default as CxFacetDateRange } from './faceted-filter/components/facet-d
 export { default as CxFacetedFilter } from './faceted-filter/faceted-filter';
 export { default as CxFacetedFilterFacet } from './faceted-filter/components/facet/facet';
 export { default as CxFolderSelect } from './folder-select/folder-select';
+export { default as CxFontPicker } from './font-picker/font-picker';
 export { default as CxGalleryItem } from './gallery-item/gallery-item';
 export { default as CxGraphView } from './graph-view/graph-view';
 export { default as CxIconPicker } from './icon-picker/icon-picker';