@jimka/typescript-ui 0.6.0 → 0.7.0

package/dist/lib/types/component/list/AbstractSelectableList.d.ts

@@ -1,11 +1,12 @@
 import { AbstractInput, AbstractInputOptions } from "../../component/input/AbstractInput.js";
-import { Component } from "../../core/Component.js";
+import { Component, ComponentOptions } from "../../core/Component.js";
 import type { Handle } from "../../core/DOM.js";
 import { Panel } from "../../core/Panel.js";
 import { Event } from "../../core/Event.js";
 import { AbstractStore } from "../../data/AbstractStore.js";
 import { ModelRecord } from "../../data/ModelRecord.js";
 import { ListItemRenderer } from "../../component/list/ListItemRenderer.js";
+import { type ClassStyleDefaults } from "../../core/ClassStyleRules.js";
 export interface SelectableListItem {
     key: string;
     label: string;
@@ -37,7 +38,7 @@ declare class SelectableListRow extends Component {
     private readonly _handlers;
     private _tooltipAttached;
     private _renderer;
-    constructor(handlers: RowHandlers, index: number, rendererFactory: () => ListItemRenderer);
+    constructor(handlers: RowHandlers, index: number, rendererFactory: () => ListItemRenderer, subclassDefaults?: Partial<ComponentOptions>);
     updateItem(item: SelectableListItem, index: number): this;
     private applyTooltip;
     getNaturalWidth(): number;
@@ -63,6 +64,7 @@ interface RowHandlers {
     onDblClick: (index: number, event: MouseEvent) => void;
 }
 declare abstract class AbstractSelectableList<TValue, TOptions extends AbstractSelectableListOptions = AbstractSelectableListOptions> extends AbstractInput<TValue, TOptions> {
+    protected static readonly ownClassStyleDefaults: ClassStyleDefaults;
     protected _items: Array<SelectableListItem>;
     protected _rowPool: Array<SelectableListRow>;
     protected _selectedSet: Set<number>;

package/dist/lib/types/component/table/Body.d.ts

@@ -3,13 +3,14 @@ import type { Handle } from "../../core/DOM.js";
 import { AbstractStore } from "../../data/AbstractStore.js";
 import { ModelRecord } from "../../data/ModelRecord.js";
 import { Row } from "../../component/table/Row.js";
+import type { ColumnWindowSlidePlan } from "../../component/table/Row.js";
 import { CellEditorPool } from "../../component/table/cell/editor/CellEditorPool.js";
 import { Event } from "../../core/Event.js";
 import { VirtualRowView } from "../../component/shared/VirtualRowView.js";
 import type { ColumnConfig } from "../../component/table/ColumnConfig.js";
 import { Column } from "../../component/table/Column.js";
 import type { TableHeader } from "../../component/table/Header.js";
-export type BodyEvent = "verticalscroll" | "horizontalscroll" | "selection" | "cellclick";
+export type BodyEvent = "verticalscroll" | "horizontalscroll" | "selection" | "cellclick" | "cellcontextmenu";
 export interface CellClickEvent {
     record: ModelRecord;
     field: string;
@@ -18,6 +19,19 @@ export interface CellClickEvent {
     rowIndex: number;
     event: MouseEvent;
 }
+export interface BodyViewState {
+    store: AbstractStore;
+    columns: Column[];
+    columnConfigs: Map<string, ColumnConfig>;
+    hiddenColumns: Set<string>;
+    rowReadOnly: ((record: ModelRecord) => boolean) | null;
+    rowVisible: ((record: ModelRecord) => boolean) | null;
+    rowSeparator: ((record: ModelRecord) => {
+        label: string;
+        color: string | null;
+    } | null) | null;
+    rowIndented: ((record: ModelRecord) => boolean) | null;
+}
 export declare function resolveClickedColumn(cells: Component[], target: Handle | null): number;
 export interface ColumnWindow {
     firstCol: number;
@@ -26,13 +40,6 @@ export interface ColumnWindow {
     lefts: number[];
 }
 export declare function computeColumnWindow(widths: number[], scrollX: number, viewportWidth: number): ColumnWindow;
-export declare function buildTsv(rows: string[][], startRow: number, startCol: number, startOffset: number | null, endRow: number, endCol: number, endOffset: number | null): string;
-export declare function locateCellInGrid(grid: Array<Array<{
-    element: Handle;
-}>>, target: Handle): {
-    row: number;
-    col: number;
-} | null;
 declare class Body extends VirtualRowView<Row> {
     private _store;
     private _hiddenColumns;
@@ -42,7 +49,6 @@ declare class Body extends VirtualRowView<Row> {
     private _rowVisible;
     private _rowSeparator;
     private _rowIndented;
-    private _cellGeom;
     private _lastBodyWidth;
     private _lastColumnWidths;
     private _lastAriaRowCount;
@@ -53,6 +59,10 @@ declare class Body extends VirtualRowView<Row> {
     private _selectedRecords;
     private _anchorRecord;
     private _focusedColIndex;
+    private _rangeAnchor;
+    private _rangeFocus;
+    private _contextMenuCell;
+    private _cellText;
     private _editorPool;
     private _header;
     private _listeners;
@@ -65,6 +75,7 @@ declare class Body extends VirtualRowView<Row> {
     private bindStore;
     protected onStoreChange(): void;
     protected getVisibleRecords(): ModelRecord[];
+    private computeVisibleFields;
     protected createRow(): Row;
     protected getTreeFieldName(): string | undefined;
     protected computeRowAria(row: Row, dataIndex: number): void;
@@ -74,8 +85,8 @@ declare class Body extends VirtualRowView<Row> {
     protected getHiddenColumns(): Set<string>;
     protected getColumnConfigs(): Map<string, ColumnConfig>;
     protected getRowPool(): Row[];
-    protected invalidateGeom(): void;
     setHiddenColumns(hidden: Set<string>): this;
+    private filterUnhideable;
     setColumns(columns: Column[]): this;
     setRowReadOnly(predicate: ((record: ModelRecord) => boolean) | null): this;
     setRowSeparator(predicate: ((record: ModelRecord) => {
@@ -88,6 +99,8 @@ declare class Body extends VirtualRowView<Row> {
     private registerComboEditors;
     private syncPoolCells;
     setStore(store: AbstractStore): this;
+    private rebindStore;
+    bindViewState(state: BodyViewState): this;
     protected init(element?: Handle): this;
     protected onScrollerTick(): void;
     private onFocus;
@@ -95,15 +108,26 @@ declare class Body extends VirtualRowView<Row> {
     protected destructor(): void;
     doLayout(): this;
     renderWindow(bodyWidth?: number, columnWidths?: number[]): void;
+    private computeColumnWindowSlidePlan;
     private renderWindowPass;
     private updateColumnWidthCache;
     private commitEditsOutsideWindow;
-    protected bindAndPositionRows(firstRow: number, windowSize: number, rowWidth: number, records: ModelRecord[], columns: ColumnWindow): void;
+    protected bindAndPositionRows(firstRow: number, windowSize: number, rowWidth: number, records: ModelRecord[], columns: ColumnWindow, slidePlan?: ColumnWindowSlidePlan): void;
     protected onSubtreeClick(e: MouseEvent): void;
     private onRowClick;
-    private onCopy;
-    private buildSelectionText;
-    private renderedCellGrid;
+    private locateCellFromTarget;
+    private getCellRangeBounds;
+    private isCellWithinBounds;
+    private refreshCellRangeHighlight;
+    private updateCellRangeVisualState;
+    private buildCopyText;
+    copySelectionToClipboard(): void;
+    copyContextMenuSelection(): void;
+    protected onCellMouseDown(e: MouseEvent): void;
+    protected onCellDragMove(e: MouseEvent): Event.ListenerResult;
+    protected onCellDragEnd(): Event.ListenerResult;
+    private onCellDragSelectStart;
+    protected onCellContextMenu(e: MouseEvent): Event.ListenerResult;
     selectRecord(record: ModelRecord | null): void;
     getSelectedRecord(): ModelRecord | null;
     getSelectedRecords(): ModelRecord[];
@@ -112,10 +136,12 @@ declare class Body extends VirtualRowView<Row> {
     on(event: "horizontalscroll", listener: (scrollLeft: number) => void): this;
     on(event: "selection", listener: (records: ModelRecord[]) => void): this;
     on(event: "cellclick", listener: (e: CellClickEvent) => void): this;
+    on(event: "cellcontextmenu", listener: (x: number, y: number) => void): this;
     off(event: BodyEvent, listener: Function): this;
     protected emit(event: "verticalscroll" | "horizontalscroll", offset: number): void;
     protected emit(event: "selection", records: ModelRecord[]): void;
     protected emit(event: "cellclick", detail: CellClickEvent): void;
+    protected emit(event: "cellcontextmenu", x: number, y: number): void;
     private notifySelectionChange;
     scrollToRecord(record: ModelRecord): void;
     private applyReadOnlyState;

package/dist/lib/types/component/table/Header.d.ts

@@ -27,7 +27,6 @@ declare class TableHeader extends Component {
     private _focusedCol;
     private _columnsDirty;
     private _geometry;
-    private _cellGeom;
     private _filterRowVisible;
     private _filterStates;
     private _filterCellsDirty;
@@ -80,6 +79,7 @@ declare class TableHeader extends Component {
     private wireFilterCell;
     private reconcileFilterCells;
     renderColumnWindow(geometry?: HeaderColumnGeometry): this;
+    private invalidateCellLayouts;
     private positionFilterCells;
     private positionColumnCells;
     private positionParentCells;

package/dist/lib/types/component/table/Row.d.ts

@@ -1,9 +1,20 @@
 import { Component } from "../../core/Component.js";
 import { AbstractModel } from "../../data/AbstractModel.js";
+import { Field } from "../../data/Field.js";
 import { ModelRecord } from "../../data/ModelRecord.js";
 import { Cell } from "../../component/table/cell/Cell.js";
 import type { ColumnConfig } from "../../component/table/ColumnConfig.js";
 import { LayoutConstraints } from "../../layout/LayoutConstraints.js";
+export interface ColumnWindowSlidePlan {
+    prevFirstCol: number;
+    prevLastCol: number;
+    delta: number;
+    enteringKeys: Map<number, string>;
+}
+export interface RetargetedCell {
+    cell: Cell<any>;
+    fieldName: string;
+}
 declare class Row extends Component {
     private _model?;
     private _data?;
@@ -16,12 +27,15 @@ declare class Row extends Component {
     private _windowFirst;
     private _cellKeys;
     private _fieldNames;
+    private _cellCache;
+    private _lastRetargeted;
     private _columnsDirty;
     private _separatorMode;
     constructor(model?: AbstractModel, data?: ModelRecord, hiddenColumns?: Set<string>, columnConfigs?: Map<string, ColumnConfig>, onCellCommit?: (record: ModelRecord) => void, treeFieldName?: string);
     getTreeCell(): Cell<any> | null;
     getColumnWindowStart(): number;
     getFieldNames(): string[];
+    getRetargetedCells(): RetargetedCell[];
     isSeparator(): boolean;
     setFieldIndent(indented: boolean): void;
     getData(): ModelRecord | undefined;
@@ -32,13 +46,17 @@ declare class Row extends Component {
     addComponent(cell: Cell<any>, constraints?: LayoutConstraints): this;
     setColumnFields(model: AbstractModel, hiddenColumns: Set<string>, columnConfigs: Map<string, ColumnConfig>, treeFieldName?: string): this;
     renderSeparator(label: string, color: string | null): void;
-    setColumnWindow(firstCol: number, lastCol: number): boolean;
+    setColumnWindow(firstCol: number, lastCol: number, plan?: ColumnWindowSlidePlan): boolean;
+    private reconcileWindowSlide;
     private commitCellValue;
-    private static cellKey;
+    static cellKey(field: Field, config: ColumnConfig | undefined, isTreeColumn: boolean): string;
     private cellKeyFor;
     private bindCell;
     private static createCellForField;
+    private retireCell;
+    private disposeCellCache;
     doLayout(): this;
+    protected destructor(): void;
 }
 declare const RowCallable: import("../../core/Callable.js").Callable<typeof Row>;
 type RowCallable = Row;

package/dist/lib/types/component/table/Table.d.ts

@@ -109,6 +109,7 @@ declare class Table extends Component<TableOptions> {
     private bindView;
     protected destructor(): void;
     private showColumnMenu;
+    private showCellMenu;
     private columnsInMenuOrder;
     private buildColumnMenuItems;
     private showColumnDialog;
@@ -119,6 +120,7 @@ declare class Table extends Component<TableOptions> {
     setExportMenuEnabled(enabled: boolean): this;
     exportCSV(options?: ExportOptions): void;
     exportJSON(options?: ExportOptions): void;
+    exportTSV(options?: ExportOptions): void;
     private getExportColumns;
     getCellText(field: string, record: ModelRecord): string;
     private onColumnResizeStart;

package/dist/lib/types/component/table/TableExporter.d.ts

@@ -9,7 +9,10 @@ export interface ExportOptions {
 export declare class TableExporter {
     static exportCSV(columns: Column[], records: ModelRecord[], columnConfigs: Map<string, ColumnConfig>, display: CellTextResolver, options?: ExportOptions): void;
     static exportJSON(columns: Column[], records: ModelRecord[], columnConfigs: Map<string, ColumnConfig>, display: CellTextResolver, options?: ExportOptions): void;
+    static exportTSV(columns: Column[], records: ModelRecord[], columnConfigs: Map<string, ColumnConfig>, display: CellTextResolver, options?: ExportOptions): void;
     static formatValue(column: Column, value: any, columnConfigs: Map<string, ColumnConfig>, display: CellTextResolver): any;
     private static escapeCSVField;
+    static buildRectangularTSV(rows: string[][]): string;
+    private static escapeTSVField;
     private static download;
 }

package/dist/lib/types/component/table/TablePanel.d.ts

@@ -19,6 +19,7 @@ declare class TablePanel extends Container {
     setExportMenuEnabled(enabled: boolean): this;
     exportCSV(options?: ExportOptions): void;
     exportJSON(options?: ExportOptions): void;
+    exportTSV(options?: ExportOptions): void;
     setPaginationBar(bar: PaginationBar): this;
     getPaginationBar(): PaginationBar | undefined;
 }

package/dist/lib/types/component/table/TreeTablePanel.d.ts

@@ -20,6 +20,7 @@ declare class TreeTablePanel extends Container {
     setExportMenuEnabled(enabled: boolean): this;
     exportCSV(options?: ExportOptions): void;
     exportJSON(options?: ExportOptions): void;
+    exportTSV(options?: ExportOptions): void;
     setPaginationBar(bar: PaginationBar): this;
     getPaginationBar(): PaginationBar | undefined;
 }

package/dist/lib/types/component/table/cell/Cell.d.ts

@@ -1,4 +1,5 @@
-import { Component } from "../../../core/Component.js";
+import { Component, ComponentOptions } from "../../../core/Component.js";
+import type { ClassStyleDefaults } from "../../../core/ClassStyleRules.js";
 import { ListenerBag } from "../../../core/ListenerBag.js";
 import { Card } from "../../../layout/Card.js";
 import { CellRenderer } from "../../../component/table/cell/renderer/CellRenderer.js";
@@ -8,8 +9,10 @@ import { CellEditorPool } from "../../../component/table/cell/editor/CellEditorP
 import { LayoutConstraints } from "../../../layout/LayoutConstraints.js";
 export type CellEvent = "commit" | "editend";
 export declare class Cell<T> extends Component {
+    protected static readonly ownClassStyleDefaults: ClassStyleDefaults;
     private _readOnly;
     private _requiredEmpty;
+    private _rangeSelected;
     private _baseBackground;
     private _renderer;
     private _editor;
@@ -17,8 +20,9 @@ export declare class Cell<T> extends Component {
     private _scrollIntoView;
     protected _activeEditor: CellEditor<T> | null;
     protected _listeners: ListenerBag<string>;
-    constructor(tag: string, renderer: CellRenderer<T>, editor?: CellEditor<T>, rendererConstraints?: LayoutConstraints, editorContraints?: LayoutConstraints);
+    constructor(tag: string, renderer: CellRenderer<T>, editor?: CellEditor<T>, rendererConstraints?: LayoutConstraints, editorContraints?: LayoutConstraints, subclassDefaults?: Partial<ComponentOptions>);
     protected clampsToContentSize(): boolean;
+    protected canSkipUnchangedLayout(): boolean;
     getEditorKey(): string | null;
     setEditorPool(pool: CellEditorPool | null): this;
     setScrollIntoViewHandler(handler: (() => void) | null): this;
@@ -30,6 +34,7 @@ export declare class Cell<T> extends Component {
     isReadOnly(): boolean;
     setReadOnly(value: boolean): this;
     setRequiredEmpty(value: boolean): this;
+    setRangeSelected(value: boolean): this;
     setBaseBackground(color: string | null): this;
     private _applyStateTint;
     onKeyDown(evnt: CustomEvent<ForwardedKeyDetail>): void;

package/dist/lib/types/component/table/cell/Default.d.ts

@@ -1,7 +1,7 @@
 import { StringRenderer } from "../../../component/table/cell/renderer/String.js";
 import { Cell } from "../../../component/table/cell/Cell.js";
 declare class DefaultCell extends Cell<String | null> {
-    constructor(tag?: string);
+    constructor(tag?: string, renderer?: StringRenderer);
     getRenderer(): StringRenderer;
     setValue(value: String | null): this;
 }

package/dist/lib/types/component/table/cell/Header.d.ts

@@ -14,6 +14,9 @@ declare class HeaderCell extends DefaultCell {
     private _headerGlyphInstance;
     private _columnFocused;
     private _required;
+    private _activeStyleRule?;
+    private get activeStyleRule();
+    protected getRestingExclusionSuffixes(): readonly string[];
     constructor(text: String, fieldName: string, headerGlyph?: string | null);
     protected init(element?: Handle): this;
     setFieldName(name: string): this;

package/dist/lib/types/component/table/cell/ResizeHandle.d.ts

@@ -11,7 +11,7 @@ interface ResizeHandleOptions extends ComponentOptions {
 declare const RESIZE_HANDLE_CURSOR = "var(--ts-ui-table-resize-handle-cursor, ew-resize)";
 declare class ResizeHandle extends Component<ResizeHandleOptions> {
     private _listeners;
-    constructor(options?: ResizeHandleOptions);
+    constructor(options?: ResizeHandleOptions, subclassDefaults?: Partial<ComponentOptions>);
     protected init(element?: Handle): this;
     on(event: "dragstart", listener: (e: MouseEvent) => void): this;
     on(event: "dragmove", listener: (clientX: number) => void): this;

package/dist/lib/types/component/table/cell/renderer/CellRenderer.d.ts

@@ -1,6 +1,6 @@
-import { Component } from "../../../../core/Component.js";
+import { Component, ComponentOptions } from "../../../../core/Component.js";
 export declare abstract class CellRenderer<T> extends Component {
-    constructor();
+    constructor(subclassDefaults?: Partial<ComponentOptions>);
     abstract getValue(): T;
     abstract setValue(t: T): void;
     getContentX(): number;

package/dist/lib/types/component/table/cell/renderer/String.d.ts

@@ -1,10 +1,12 @@
 import { CellRenderer } from "../../../../component/table/cell/renderer/CellRenderer.js";
+import { ComponentOptions } from "../../../../core/Component.js";
 import { Text } from "../../../../component/input/Text.js";
 declare class StringRenderer extends CellRenderer<String | null> {
     private _text;
     private _value;
     private _display;
-    constructor();
+    constructor(subclassDefaults?: Partial<ComponentOptions>);
+    protected createText(): Text;
     getText(): Text;
     getValue(): String | null;
     setValue(value: String | null): this;

package/dist/lib/types/component/table/index.d.ts

@@ -14,7 +14,7 @@ export type { ExportOptions } from '../../component/table/TableExporter.js';
 export { TableHeader } from '../../component/table/Header.js';
 export type { TableHeaderEvent, HeaderColumnGeometry } from '../../component/table/Header.js';
 export { Body } from '../../component/table/Body.js';
-export type { BodyEvent, CellClickEvent } from '../../component/table/Body.js';
+export type { BodyEvent, CellClickEvent, BodyViewState } from '../../component/table/Body.js';
 export { TreeBody } from '../../component/table/TreeBody.js';
 export type { FlatRecord, TreeBodySpec } from '../../component/table/TreeBody.js';
 export { FooterRow } from '../../component/table/Footer.js';

package/dist/lib/types/core/AnimatedDropdown.d.ts

@@ -1,4 +1,5 @@
 import { Component, ComponentOptions } from "../core/Component.js";
+import type { ClassStyleDefaults } from "../core/ClassStyleRules.js";
 import { DismissableLayer, LayerDismissMode } from "../core/LayerManager.js";
 import { type Rect, type Handle } from "../core/DOM.js";
 export interface AnimatedDropdownOptions extends ComponentOptions {
@@ -7,6 +8,7 @@ export interface AnimatedDropdownOptions extends ComponentOptions {
     translatePx?: number;
 }
 declare class AnimatedDropdown<TOptions extends AnimatedDropdownOptions = AnimatedDropdownOptions> extends Component<TOptions> implements DismissableLayer {
+    protected static readonly ownClassStyleDefaults: ClassStyleDefaults;
     private _dismissing;
     private _open;
     private _closeHandler;

package/dist/lib/types/core/ClassStyleRules.d.ts

@@ -1,5 +1,7 @@
+import { StyleRule } from "../core/StyleTarget.js";
+import { type BorderOptions } from "../primitive/Border.js";
 export declare const COMPONENT_CLASS = "ts-ui-component";
-interface ClassStyleDefaults {
+export interface ClassStyleDefaults {
     visible?: boolean | null;
     displayed?: boolean;
     minSize?: {
@@ -12,7 +14,48 @@ interface ClassStyleDefaults {
     } | null;
     overflow?: string | null;
     cursor?: string | null;
+    userSelect?: string | null;
+    outline?: string | null;
+    foregroundColor?: string | null;
+    font?: TextClassStyleDefaults | null;
+    backgroundColor?: string | null;
+    backgroundImage?: string | null;
+    shadow?: string | null;
+    borderRadius?: string | null;
+    border?: BorderOptions | string | null;
+}
+interface TextClassStyleDefaults {
+    fontFamily?: string | null;
+    fontKerning?: string | null;
+    fontSize?: string | null;
+    fontSizeAdjust?: string | null;
+    fontStretch?: string | null;
+    fontStyle?: string | null;
+    fontVariant?: string | null;
+    fontWeight?: string | null;
+    textAlign?: string | null;
+    textShadow?: string | null;
+    lineHeight?: string | null;
+    textOverflow?: string | null;
+}
+type ClassStyleBag = Readonly<Record<string, string | null>>;
+export declare function registerStyleChainRoot(ctor: Function): void;
+export declare function resolveDeclarations(defaults: ClassStyleDefaults): Record<string, string | null>;
+export declare function ensureClassStyleRule(rawCtor: Function, defaults: ClassStyleDefaults): ClassStyleBag | null;
+export declare function getStyleClassChain(rawCtor: Function): readonly string[];
+export declare function ensureClassStateRule(ctor: Function, suffix: string, declarations: Record<string, string | null>, extractorMethodName?: string): ClassStyleBag | null;
+export declare function styleGroupClassSuffix(group: string): string;
+export declare function ensureStyleGroupRule(ctor: Function, group: string, declarations: Record<string, string | null>): ClassStyleBag | null;
+export declare function writeClassStateDeclaration(rule: StyleRule, bag: ClassStyleBag | null, key: string, value: string | null): void;
+export declare function writeManyClassStateDeclarations(rule: StyleRule, bag: ClassStyleBag | null, values: Record<string, string | null>): void;
+export declare class StateStyleRule {
+    private readonly _rule;
+    private readonly _bag;
+    private readonly _hasElement;
+    constructor(ctor: Function, suffix: string, rule: StyleRule, resolveDefaults: () => Record<string, string | null>, hasElement: () => boolean, extractorMethodName?: string);
+    get classBag(): ClassStyleBag | null;
+    set(key: string, value: string | null): void;
+    setMany(values: Record<string, string | null>): void;
+    private _materialise;
 }
-type ClassStyleBag = Readonly<Record<string, string>>;
-export declare function ensureClassStyleRule(ctor: Function, defaults: ClassStyleDefaults): ClassStyleBag | null;
 export {};

package/dist/lib/types/core/Component.d.ts

@@ -9,6 +9,7 @@ import { Position } from "../primitive/Position.js";
 import { Aria } from "../core/Aria.js";
 import { Event } from "../core/Event.js";
 import { StyleRule } from "../core/StyleTarget.js";
+import { type ClassStyleDefaults, StateStyleRule } from "../core/ClassStyleRules.js";
 export interface Comparator<V, U> {
     (a: V, b: U): number;
 }
@@ -47,6 +48,7 @@ export interface ComponentOptions {
     shadow?: string;
     outline?: string;
     cursor?: string;
+    userSelect?: string;
     preferredSize?: Size;
     minSize?: Size;
     maxSize?: Size;
@@ -65,6 +67,7 @@ export interface ComponentOptions {
     attributes?: Record<string, string>;
     components?: Array<Component | ComponentFactory | ConstrainedComponent>;
     styleRules?: ComponentStyleRuleSpec[];
+    styleGroup?: string | null;
 }
 declare class Component<TOptions extends ComponentOptions = ComponentOptions> extends BaseObject {
     private _components;
@@ -80,6 +83,7 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     private _top;
     private _width;
     private _height;
+    private _layoutDirty;
     private _translateX;
     private _translateY;
     private _scrollLeft;
@@ -113,11 +117,11 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     private _layoutPaused;
     private _aria;
     private _whiteSpace;
-    private _userSelect;
     private _verticalAlign;
     private _styleRule;
     private _inlineStyle;
     private _inheritedStyleBag;
+    private _styleGroupBag;
     private _clipFrame;
     private _clipFrameStyle;
     private _contentFrame;
@@ -141,6 +145,7 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     protected getCSSRule(): CSSStyleRule;
     private ensureCSSRule;
     protected createStyleRule(selectorSuffix: string): StyleRule;
+    protected createStateStyleRule(selectorSuffix: string, resolveDefaults: () => Record<string, string | null>, extractorMethodName?: string): StateStyleRule;
     getElement(createIfMissing?: boolean): Handle | undefined;
     protected getScrollElement(): Handle | undefined;
     removeElement(): this;
@@ -172,6 +177,8 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     setId(id: string): this;
     getName(): string | null;
     setName(name: string | null): this;
+    getStyleGroup(): string | null;
+    setStyleGroup(group: string | null): this;
     getDataAttribute(key: string): string | undefined;
     setDataAttribute(key: string, value: string): this;
     delDataAttribute(key: string): this;
@@ -268,6 +275,10 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     setVerticalAlign(align: string): this;
     clearVerticalAlign(): this;
     setSize(size: Size): this;
+    setBounds(x: number, y: number, width: number, height: number): boolean;
+    applyBounds(x: number, y: number, width: number, height: number): this;
+    protected canSkipUnchangedLayout(): boolean;
+    private writeBounds;
     getWidth(): number;
     setWidth(width: number): this;
     protected clampsToContentSize(): boolean;
@@ -342,7 +353,20 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     clearUserSelect(): this;
     focus(preventScroll?: boolean): this;
     unfocus(): this;
-    private writeRuleDeclaration;
+    protected matchesClassStyle(key: string, value: string | null): boolean;
+    protected getRestingExclusionSuffixes(): readonly string[];
+    private get restingIsolationSuffix();
+    private _chromeIsolationEnabled?;
+    protected isChromeIsolationEnabled(): boolean;
+    protected setChromeIsolationEnabled(enabled: boolean): void;
+    protected isRestingChromeIsolated(): boolean;
+    protected _restingStyleRule?: StyleRule;
+    protected get restingStyleRule(): StyleRule;
+    protected materialiseRestingRule(): void;
+    protected writeRuleDeclaration(key: string, value: string | null): void;
+    protected reconcileRuleDeclaration(key: string, value: string | null): void;
+    protected setReconciledCSSRules(values: Style): this;
+    protected getClassStyleDefaults(): ClassStyleDefaults;
     applyStyle(element: Handle): this;
     private applyBoxAndVisibilityStyles;
     private replayGeometryStyles;
@@ -350,6 +374,8 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     private applyOverflowStyles;
     private applyChromeStyles;
     private applyMiscInlineStyles;
+    protected applySubclassStyles(): void;
+    private materialiseWhenNeeded;
     protected materialiseStyleRule(): void;
     private materialiseDeferredRules;
     sync(): void;
@@ -378,6 +404,8 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     doLayout(): this;
     onFirstLayout(callback: () => void): this;
     private runFirstLayoutCallbacks;
+    invalidateLayout(): this;
+    isLayoutDirty(): boolean;
     scheduleLayout(): this;
     notifyIntrinsicSizeChanged(): this;
     static afterNextLayout(callback: () => void): void;

package/dist/lib/types/core/DOM.d.ts

@@ -1,4 +1,4 @@
-import type { TextMeasureOptions, TextMetrics } from "../core/Util.js";
+import type { TextMeasureOptions, TextMeasureRequest, TextMetrics } from "../core/Util.js";
 import type { Size } from "../primitive/Size.js";
 import type { Component } from "../core/Component.js";
 export interface Rect {
@@ -83,6 +83,7 @@ export interface DOMSink {
     replaceLocationHash(hash: string): void;
     pushHistoryPath(url: string): void;
     replaceHistoryPath(url: string): void;
+    writeClipboardText(text: string): void;
     addListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | AddEventListenerOptions): void;
     removeListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | EventListenerOptions): void;
     dispatchEvent(target: Handle, event: Event): void;
@@ -118,6 +119,7 @@ export interface DOMSource {
     getElementRect(handle: Handle): Rect;
     measureText(text: string, options?: TextMeasureOptions): TextMetrics;
     measureTextWidths(texts: string[], options?: TextMeasureOptions): number[];
+    measureTexts(requests: TextMeasureRequest[]): TextMetrics[];
     resolveFontSizePx(fontSizeCSS: string): number;
     measureFontMetrics(): {
         ascent: number;
@@ -222,6 +224,7 @@ export declare class ProductionDOMSink implements DOMSink {
     replaceLocationHash(hash: string): void;
     pushHistoryPath(url: string): void;
     replaceHistoryPath(url: string): void;
+    writeClipboardText(text: string): void;
     addListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | AddEventListenerOptions): void;
     removeListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | EventListenerOptions): void;
     dispatchEvent(target: Handle, event: Event): void;
@@ -257,6 +260,7 @@ export declare class ProductionDOMSource implements DOMSource {
     getElementRect(handle: Handle): Rect;
     measureText(text: string, options?: TextMeasureOptions): TextMetrics;
     measureTextWidths(texts: string[], options?: TextMeasureOptions): number[];
+    measureTexts(requests: TextMeasureRequest[]): TextMetrics[];
     resolveFontSizePx(fontSizeCSS: string): number;
     measureFontMetrics(): {
         ascent: number;

package/dist/lib/types/core/LayerManager.d.ts

@@ -23,6 +23,7 @@ export declare namespace LayerManager {
     function unregister(layer: DismissableLayer): void;
     function containsAcrossLayers(layer: DismissableLayer, node: Handle | null): boolean;
     function getTopLayer(): DismissableLayer | null;
+    function isTopmostInputLayer(layer: DismissableLayer): boolean;
     function bringToFront(layer: DismissableLayer): void;
     function getZIndex(layer: DismissableLayer): number;
 }

package/dist/lib/types/core/StyleTarget.d.ts

@@ -9,6 +9,7 @@ declare abstract class StyleTarget<T> {
     flush(): void;
     isMaterialized(): boolean;
     hasQueuedWrites(): boolean;
+    hasQueuedDeclarations(): boolean;
     protected materialize(target: T): void;
     protected abstract writeStyle(key: string, value: string | null): void;
     protected abstract flushDirty(dirty: Record<string, string | null>): void;
@@ -16,6 +17,7 @@ declare abstract class StyleTarget<T> {
 export type StyleRuleScope = {
     scope: "class";
     name: string;
+    suffix?: string;
 } | {
     scope: "component";
     name: string;

package/dist/lib/types/core/Theme.d.ts

@@ -204,6 +204,7 @@ export interface Theme {
             padding: number;
             background: string;
             readonlyBackground: string;
+            rangeSelectedBackground: string;
             requiredEmptyOutlineColor: string;
             color: string;
             border: string;