@orangelogic/design-system 2.0.0-29DUO2-beta-2 → 2.0.0-29IORR-beta-1

package/library/packages/atoms/src/components/table/tabulator-tables/modules/GroupRows/Group.d.ts

@@ -1,4 +1,5 @@
 import { default as CxIconButton } from '../../../../icon-button/icon-button.ts';
+import { GroupLoadMoreEventPayload, GroupLoadMoreState } from '../../../../../../../types/src/table';
 import { default as Row } from '../../core/row/Row';
 import { default as GroupComponent } from './GroupComponent';
 import { default as GroupRows } from './GroupRows';
@@ -34,6 +35,8 @@ export default class Group {
     visible: boolean | ((key: any, count: number, data: any[], component: GroupComponent) => boolean);
     component: GroupComponent | null;
     addBindingsFlag?: boolean;
+    private _loadMoreRow;
+    private _loadMoreStateKey;
     constructor(groupManager: GroupRows, parent: Group | false, level: number, key: any, field: string | false, generator: GroupGenerator, oldGroup: Group | false);
     wipe(elementsOnly?: boolean): void;
     createElements(): void;
@@ -51,6 +54,11 @@ export default class Group {
     conformRowData(data: Record<string, any>): Record<string, any>;
     removeRow(row: Row): void;
     removeGroup(group: Group): void;
+    getPathKey(): string;
+    getLoadMoreState(): GroupLoadMoreState | undefined;
+    getGroupLoadMoreEventPayload(): GroupLoadMoreEventPayload;
+    generateLoadMoreRow(): Row | false;
+    private applyGroupIndent;
     getHeadersAndRows(): Array<Group | Row>;
     getData(visible?: boolean, transform?: string): any[];
     getRowCount(): number;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/GroupRows/GroupComponent.d.ts

@@ -1,4 +1,4 @@
-import { IGroupComponent, ITabulator, ScrollToRowPosition } from '../../../../../../../types/src/table';
+import { GroupLoadMorePathSegment, IGroupComponent, ITabulator, ScrollToRowPosition } from '../../../../../../../types/src/table';
 import { default as Group } from './Group';
 
 export default class GroupComponent implements IGroupComponent {
@@ -11,6 +11,8 @@ export default class GroupComponent implements IGroupComponent {
     getRows(): any[];
     getSubGroups(): any[];
     getParentGroup(): GroupComponent | false;
+    getPath(): GroupLoadMorePathSegment[];
+    getPathKey(): string;
     isVisible(): boolean;
     show(): void;
     hide(): void;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/GroupRows/GroupLoadMore.d.ts

@@ -0,0 +1,7 @@
+import { GroupLoadMoreEventPayload, GroupLoadMoreMeta, GroupLoadMorePathSegment, GroupLoadMoreState } from '../../../../../../../types/src/table';
+import { default as Group } from './Group';
+
+export declare function getGroupPath(group: Group): GroupLoadMorePathSegment[];
+export declare function getGroupPathKey(path: GroupLoadMorePathSegment[]): string;
+export declare function getGroupLoadMoreState(meta: GroupLoadMoreMeta | undefined, pathKey: string): GroupLoadMoreState | undefined;
+export declare function getGroupLoadMoreEventPayload(group: Group): GroupLoadMoreEventPayload;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/GroupRows/GroupRows.d.ts

@@ -1,3 +1,4 @@
+import { GroupLoadMoreMeta } from '../../../../../../../types/src/table';
 import { default as Module } from '../../core/Module';
 import { default as Row } from '../../core/row/Row';
 import { default as RowComponent } from '../../core/row/RowComponent';
@@ -38,6 +39,7 @@ export default class GroupRows extends Module {
     setGroupStartOpen(values: GroupStartOpen | GroupStartOpen[]): void;
     private updateGroupVisibility;
     setGroupHeader(values: GroupHeaderGenerator | GroupHeaderGenerator[] | false): void;
+    setGroupLoadMoreMeta(meta: GroupLoadMoreMeta | undefined): void;
     userGetGroups(_values?: boolean): GroupComponent[];
     userGetGroup(key: any): GroupComponent | false;
     private findGroupByKey;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Page/Page.d.ts

@@ -4,7 +4,7 @@ import { default as Module } from '../../core/Module';
 import { default as Tabulator } from '../../core/Tabulator';
 
 export default class Page extends Module implements IPage {
-    static moduleName: string;
+    static readonly moduleName = "page";
     paginationElement: CxPagination;
     element: HTMLElement | null;
     size: number | true;
@@ -44,7 +44,7 @@ export default class Page extends Module implements IPage {
     /**
      * Pagination is mounted on `table.toolbar` (outside Tabulator's root element).
      * Tabulator.destroy() only clears the table element, so we must detach on destroy
-     * or a full re-init (e.g. paginationSizeSelector change) leaves duplicate cx-pagination nodes.
+     * or a full re-init (e.g. pageSizeOptions change) leaves duplicate cx-pagination nodes.
      */
     cleanup(): void;
     initializePaginator(): void;

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

@@ -1,4 +1,5 @@
 import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TextareaRows } from '../../../../types/src/textarea';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -20,6 +21,8 @@ import { CSSResultGroup } from 'lit';
  * @csspart base - The component's base wrapper.
  * @csspart textarea - The internal `<textarea>` control.
  * @csspart character-count - The container that wraps the character count.
+ *
+ * @typedef {number | 'max'} TextareaRows - Use a number for a fixed row count. Use `'max'` to fill the parent container height (parent must have a definite height). With `'max'`, `resize="vertical"` and `resize="none"` work; `resize="auto"` does not (it is disabled).
  */
 export default class CxTextarea extends CortexElement implements CortexFormControl {
     static styles: CSSResultGroup;
@@ -27,6 +30,7 @@ export default class CxTextarea extends CortexElement implements CortexFormContr
     private readonly hasSlotController;
     private resizeObserver;
     input: HTMLTextAreaElement;
+    private formControlRoot;
     private hasFocus;
     title: string;
     /** The name of the textarea, submitted as a name/value pair with form data. */
@@ -43,9 +47,17 @@ export default class CxTextarea extends CortexElement implements CortexFormContr
     helpText: string;
     /** Placeholder text to show as a hint when the input is empty. */
     placeholder: string;
-    /** The number of rows to display by default. */
-    rows: number;
-    /** Controls how the textarea can be resized. */
+    /**
+     * The number of rows to display by default.
+     * Set to `"max"` (or `TextareaRows.Max`) to make the textarea fill its parent container height.
+     * The parent element must have a definite height (e.g. via flex, grid, or an explicit `height`) for `"max"` to take effect.
+     * With `"max"`, `resize="vertical"` (default) and `resize="none"` are supported; `resize="auto"` is not (fill height and auto-grow conflict, so auto resize is disabled).
+     */
+    rows: number | TextareaRows;
+    /**
+     * Controls how the textarea can be resized.
+     * When `rows` is `"max"`, `auto` is ignored; use `vertical` or `none`.
+     */
     resize: 'none' | 'vertical' | 'auto';
     /** Disables the textarea. */
     disabled: boolean;
@@ -87,13 +99,16 @@ export default class CxTextarea extends CortexElement implements CortexFormContr
     inputMode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     /** The default value of the form control. Primarily used for resetting the form control. */
     defaultValue: string;
+    /** Tracks the px height applied by fill-mode so we can distinguish a host resize (recalculate) from a user drag (preserve). */
+    private _fillHeightPx;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
-    connectedCallback(): void;
+    connectedUpdatedCallback(): void;
     runFirstUpdated(): void;
     disconnectedCallback(): void;
+    private updateResizeObserver;
     private handleBlur;
     private handleChange;
     private handleFocus;

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

@@ -96,6 +96,7 @@ export default class CxVideo extends ResizableElement {
     videoHeight: number;
     protected autoPlayTimeout: number | null;
     parsedName: string;
+    formattedPoster: string;
     /**
      * The current time of the video.
      */
@@ -130,7 +131,7 @@ export default class CxVideo extends ResizableElement {
     protected addVideoEventListeners(): void;
     protected removeVideoEventListeners(): void;
     attachSeekbar(): void;
-    protected setupVideoJsPlayer(): void;
+    protected setupVideoJsPlayer(src?: string): void;
     handleLoopChange(): Promise<void>;
     handleMutedChange(): Promise<void>;
     handleControlsChange(): Promise<void>;
@@ -138,6 +139,7 @@ export default class CxVideo extends ResizableElement {
     handleDisableRemotePlaybackChange(): Promise<void>;
     handleDisableVolumePanelChange(): Promise<void>;
     handlePosterChange(): Promise<void>;
+    handleFormattedPosterChange(): Promise<void>;
     handleSrcChange(): Promise<void>;
     handleParsedNameChange(): Promise<void>;
     private handleSizeChange;

package/library/packages/events/src/cx-asset-transformation-dialog-cancel.d.ts

@@ -0,0 +1,6 @@
+export type CxAssetTransformationDialogCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-cancel': CxAssetTransformationDialogCancelEvent;
+    }
+}

package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts

@@ -0,0 +1,11 @@
+import { Transformation } from '../../types/src/asset-link-format';
+
+export type CxAssetTransformationDialogConfirmEvent = CustomEvent<{
+    format: string;
+    transformations: Transformation[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-confirm': CxAssetTransformationDialogConfirmEvent;
+    }
+}

package/library/packages/events/src/cx-asset-transformation-dialog-delete.d.ts

@@ -0,0 +1,6 @@
+export type CxAssetTransformationDialogDeleteEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-delete': CxAssetTransformationDialogDeleteEvent;
+    }
+}

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

@@ -0,0 +1,9 @@
+export type CxBentoRangeChangeEvent = CustomEvent<{
+    first: number;
+    last: number;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-bento-range-change': CxBentoRangeChangeEvent;
+    }
+}

package/library/packages/events/src/cx-content-builder-gallery-fetched.d.ts

@@ -0,0 +1,10 @@
+import { Image } from '../../types/src/gallery-config';
+
+export type CxContentBuilderGalleryFetchedEvent = CustomEvent<{
+    data: Image[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-content-builder-gallery-fetched': CxContentBuilderGalleryFetchedEvent;
+    }
+}

package/library/packages/events/src/cx-lightbox-close.d.ts

@@ -0,0 +1,6 @@
+export type CxLightboxCloseEvent = CustomEvent<Record<PropertyKey, unknown>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-lightbox-close': CxLightboxCloseEvent;
+    }
+}

package/library/packages/events/src/cx-lightbox-download.d.ts

@@ -0,0 +1,11 @@
+import { GalleryItem } from '../../types/src/gallery-item';
+
+export type CxLightboxDownloadEvent = CustomEvent<{
+    index: number;
+    item: GalleryItem;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-lightbox-download': CxLightboxDownloadEvent;
+    }
+}

package/library/packages/events/src/cx-unauthorized.d.ts

@@ -0,0 +1,10 @@
+export type CxUnauthorizedEvent = CustomEvent<CxUnauthorizedDetail>;
+export type CxUnauthorizedDetail = {
+    status: number;
+    url: string;
+};
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-unauthorized': CxUnauthorizedEvent;
+    }
+}

package/library/packages/events/src/cx-video-format-picker-delete.d.ts

@@ -0,0 +1,6 @@
+export type CxVideoFormatPickerDeleteEvent = CustomEvent<Record<PropertyKey, unknown>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-video-format-delete': CxVideoFormatPickerDeleteEvent;
+    }
+}

package/library/packages/events/src/cx-video-format-picker-select.d.ts

@@ -0,0 +1,8 @@
+import { VideoFormatValue } from '../../types/src/video-format-picker';
+
+export type CxVideoFormatPickerSelectEvent = CustomEvent<VideoFormatValue>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-video-format-select': CxVideoFormatPickerSelectEvent;
+    }
+}

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

@@ -14,6 +14,10 @@ export * from './cx-asset-data-display-slot-change';
 export * from './cx-asset-picker-delete';
 export * from './cx-asset-picker-select';
 export * from './cx-asset-request-status';
+export * from './cx-asset-transformation-dialog-cancel';
+export * from './cx-asset-transformation-dialog-confirm';
+export * from './cx-asset-transformation-dialog-delete';
+export * from './cx-bento-range-change';
 export * from './cx-bento-resize';
 export * from './cx-bicolor-picker-change';
 export * from './cx-blur';
@@ -21,8 +25,8 @@ export * from './cx-border-input-group-change';
 export * from './cx-cancel';
 export * from './cx-cancel-connection';
 export * from './cx-cancel-upload';
-export * from './cx-chart-plan-change';
 export * from './cx-change';
+export * from './cx-chart-plan-change';
 export * from './cx-clear';
 export * from './cx-clear-cache';
 export * from './cx-clear-upload';
@@ -38,6 +42,7 @@ export * from './cx-comment-mention-select';
 export * from './cx-connect';
 export * from './cx-connected';
 export * from './cx-content-builder-gallery-change';
+export * from './cx-content-builder-gallery-fetched';
 export * from './cx-content-builder-page-change';
 export * from './cx-content-builder-page-delete';
 export * from './cx-content-builder-translatable-value-change';
@@ -52,6 +57,8 @@ export * from './cx-dot-status-click';
 export * from './cx-download-format-picker-delete';
 export * from './cx-download-format-picker-select';
 export * from './cx-download-format-request-status';
+export * from './cx-video-format-picker-delete';
+export * from './cx-video-format-picker-select';
 export * from './cx-drag-end';
 export * from './cx-drag-start';
 export * from './cx-e-chart-drill-down';
@@ -88,6 +95,8 @@ export * from './cx-invoked';
 export * from './cx-keydown';
 export * from './cx-lazy-change';
 export * from './cx-lazy-load';
+export * from './cx-lightbox-close';
+export * from './cx-lightbox-download';
 export * from './cx-list-editor-change';
 export * from './cx-load';
 export * from './cx-mark-favorite';
@@ -138,6 +147,7 @@ export * from './cx-time-based-change';
 export * from './cx-time-update';
 export * from './cx-typeface-change';
 export * from './cx-typeface-download';
+export * from './cx-unauthorized';
 export * from './cx-unmark-favorite';
 export * from './cx-video-click';
 export * from './cx-video-editor-track-canvas-ready';

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

@@ -44,6 +44,8 @@ export default class CxCropper extends CortexElement {
     disabled: boolean;
     loadable: boolean;
     loading: boolean;
+    multiple: boolean;
+    useInternalLoading: boolean;
     private showLoading;
     private handleLoadingChange;
     render(): TemplateResult;

package/library/packages/molecules/src/cropper/react/Cropper.d.ts

@@ -26,6 +26,7 @@ type Props = {
     };
     loadable: boolean;
     loading: boolean;
+    multiple: boolean;
     resizer: {
         height: number;
         maxHeight: number;
@@ -33,6 +34,7 @@ type Props = {
         width: number;
     };
     rotation: number;
+    useInternalLoading?: boolean;
 };
 declare const CropPreviewer: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<unknown>>;
 export default CropPreviewer;

package/library/packages/molecules/src/estimated-reading-time/estimated-reading-time.d.ts

@@ -7,7 +7,8 @@ import { CSSResultGroup } from 'lit';
  * @summary Displays the estimated reading time for a target element's text content.
  *
  * @description Calculates reading time based on the visible text of a target element,
- * using an average reading speed of 238 words per minute.
+ * using an average reading speed of 238 words per minute. Rendered as `"<duration> read"`
+ * (e.g. "12 minutes read", "1 hour, 1 minute read"), with the duration formatted by `cx-format-time`.
  * `resolveTarget` is a JS-only property (no HTML attribute) since it accepts non-serialisable values.
  * If `resolveTarget` is not set, the component does nothing.
  *
@@ -30,7 +31,7 @@ export default class CxEstimatedReadingTime extends CortexElement {
     private observer;
     /** The target element to calculate reading time for. Accepts a raw HTMLElement or a function that returns one. */
     resolveTarget: HTMLElement | (() => HTMLElement | null) | null;
-    /** Display style for the formatted reading time. Defaults to "long". */
+    /** Display style forwarded to `cx-format-time`. Defaults to "long". */
     displayStyle: DisplayStyle;
     private durationMs;
     connectedCallback(): void;

package/library/packages/molecules/src/folder-select/components/folder-select-tree/folder-select-tree.d.ts

@@ -1,6 +1,8 @@
 import { default as CxButton } from '../../../../../atoms/src/components/button/button.ts';
 import { default as CxTree } from '../../../../../atoms/src/components/tree/tree.ts';
+import { default as CxTreeItem } from '../../../../../atoms/src/components/tree-item/tree-item.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { CxSelectionChangeEvent } from '../../../../../events/src/events.ts';
 import { Folder, FolderSelectApi } from '../../../../../types/src/folder-select';
 import { TemplateResult } from 'lit';
 import { default as CxFolderSelectTreeItem } from '../folder-select-tree-item/folder-select-tree-item';
@@ -22,6 +24,7 @@ export default class CxFolderSelectTree extends CortexElement {
     baseUrl: string;
     extraFolderId: string;
     extraFolderTitle: string;
+    extraFolderIcon: string;
     seeThru: boolean;
     extraFolderData: Folder | null;
     api?: FolderSelectApi;
@@ -30,6 +33,18 @@ export default class CxFolderSelectTree extends CortexElement {
     data: Folder[];
     hasMore: boolean;
     loading: boolean;
+    /**
+     * Selected folders encoded as `${path}-${id}`. Owned by this component
+     * and forwarded down to all cx-folder-select-tree-items so they can
+     * recompute their selected/indeterminate state declaratively.
+     */
+    currentRootIDsSet: Set<string>;
+    /**
+     * IDs (`${path}-${id}`) explicitly unselected while their ancestor was
+     * selected. Used so a selected ancestor renders as indeterminate when a
+     * descendant has been unchecked.
+     */
+    removedIDs: string[];
     get empty(): boolean;
     /**
      * This is used to render the cx-tree inside the cx-folder-select without the shadow root so that the cx-folder-select can query select the cx-tree inside
@@ -37,6 +52,17 @@ export default class CxFolderSelectTree extends CortexElement {
     createRenderRoot(): this;
     runFirstUpdated(): void;
     handleExtraFolderIdChange(): Promise<void>;
+    /**
+     * Update `currentRootIDsSet` from a tree-item's toggle. Per-folder
+     * selection: each folder is independent, so a click only adds/removes
+     * the clicked folder — never its ancestors or descendants. Parents
+     * showing an indeterminate hint is purely visual (computed in
+     * `cx-folder-select-tree-item.syncBoxes` from path-prefix matches),
+     * not a real selection.
+     *
+     * Only runs in multiple mode — single mode is still driven by `selectedValue`.
+     */
+    handleSelectedChange(event: CxSelectionChangeEvent<CxTreeItem>): Promise<void>;
     loadMore(event: MouseEvent): Promise<void>;
     handleFetchFolders(): Promise<void>;
     private fetchFolders;

package/library/packages/molecules/src/folder-select/components/folder-select-tree-item/folder-select-tree-item.d.ts

@@ -19,14 +19,45 @@ export default class CxFolderSelectTreeItem extends CortexElement {
         'cx-tree-item': typeof CxTreeItem;
     };
     role: string;
+    /**
+     * cx-tree's syncCheckboxes/syncAncestors machinery walks `parentElement`
+     * and treats anything with `role="treeitem"` as a CxTreeItem. We expose
+     * this wrapper as a treeitem (for ARIA + selection plumbing) but it
+     * isn't a real CxTreeItem — it has no `getChildrenItems`. Telling
+     * syncAncestors to skip past us prevents `treeItem.getChildrenItems is
+     * not a function` and matches our per-folder selection model where
+     * parent state isn't auto-synced from children.
+     */
+    disabledSyncCheckboxes: boolean;
     readonly treeItem: CxTreeItem;
     folderId: string;
     hasChildren: boolean;
+    selectable: boolean;
     fullPath: string;
     docType: MediaType;
     name: string;
     representativeAssetId: string;
     selectedValue: string;
+    /**
+     * Selection mode propagated from cx-folder-select-tree.
+     * When `'multiple'`, selection state is driven declaratively from
+     * `currentRootIDsSet` / `removedIDs` via `syncBoxes()` (file-on-demand pattern),
+     * so it survives data reloads (search filters) and parents can show
+     * indeterminate from selected descendants without those descendants
+     * being loaded yet. When `'single'`, the legacy `selectedValue === folderId`
+     * binding on the inner cx-tree-item is used.
+     */
+    selection: 'multiple' | 'single';
+    /**
+     * Set of selected root IDs encoded as `${path}-${id}`. The set is owned by
+     * cx-folder-select-tree and passed in; tree-items only read from it.
+     */
+    currentRootIDsSet: Set<string>;
+    /**
+     * IDs (`${path}-${id}`) explicitly unchecked while their ancestor was
+     * selected. Used to render `indeterminate` on a selected ancestor.
+     */
+    removedIDs: string[];
     token: string;
     bearerToken: string;
     baseUrl: string;
@@ -34,6 +65,8 @@ export default class CxFolderSelectTreeItem extends CortexElement {
     api?: FolderSelectApi;
     excludeVirtualFolders: boolean;
     url: string;
+    /** Overrides the default `folder` icon name when set. */
+    icon: string;
     data: Folder[] | null;
     hasMore: boolean;
     loading: boolean;
@@ -47,6 +80,19 @@ export default class CxFolderSelectTreeItem extends CortexElement {
     }): Promise<GetFolderResponse>;
     loadMore(event: MouseEvent): Promise<void>;
     private handleLazyLoad;
+    /**
+     * Recompute this tree-item's selected/indeterminate state from the
+     * top-level selection set, purely declaratively. This lets us:
+     * - Persist selection across data reloads (e.g. when the user types a
+     *   search term, items get re-rendered but their state is recomputed
+     *   from the same set).
+     * - Show a parent as indeterminate when a descendant 3-4 levels deep
+     *   is selected, even if the descendant isn't loaded yet — we only
+     *   need its path prefix to match.
+     *
+     * Mirrors `cx-folder-item.syncBoxes` from packages/organisms/file-on-demand.
+     */
+    syncBoxes(): Promise<void>;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/molecules/src/folder-select/folder-select.d.ts

@@ -1,6 +1,8 @@
 import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
 import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
+import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp/line-clamp.ts';
 import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CxTag } from '../../../atoms/src/components/tag/tag.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { Folder, FolderSelectApi, FolderSelectVariant } from '../../../types/src/folder-select';
 import { CSSResultGroup, TemplateResult } from 'lit';
@@ -13,7 +15,9 @@ export default class CxFolderSelect extends CortexElement {
         'cx-folder-select-tree': typeof CxFolderSelectTree;
         'cx-icon': typeof CxIcon;
         'cx-input': typeof CxInput;
+        'cx-line-clamp': typeof CxLineClamp;
         'cx-select': typeof CxSelect;
+        'cx-tag': typeof CxTag;
     };
     private readonly localize;
     selectEl?: CxSelect;
@@ -34,6 +38,7 @@ export default class CxFolderSelect extends CortexElement {
     excludeVirtualFolders: boolean;
     extraFolderId: string;
     extraFolderTitle: string;
+    extraFolderIcon: string;
     firstFetchCallback: ((data: Folder[]) => void) | null;
     searchTerm: string;
     constructor();
@@ -41,10 +46,30 @@ export default class CxFolderSelect extends CortexElement {
     handleSearchTermChange(): void;
     private handleSearchTermInputChange;
     private handleSearchTermSelectChange;
+    private handleSelectClear;
+    /**
+     * cx-select's selectedOptions cache (which drives the tag UI in
+     * `multiple` mode) is only recomputed during its own `selectionChanged`
+     * flow — that flow doesn't run in our setup because we no-op
+     * `selectSetOptionSelected` for multi-select (cx-tree owns selection).
+     * After the tree's selection change propagates through `syncBoxes` and
+     * lands on each tree-item's `.selected`, ask cx-select to re-read its
+     * options so the rendered tag list matches.
+     */
+    private handleTreeSelectedChange;
     selectGetOptionValue(option: HTMLElement): string;
     selectGetOptionLabel(option: HTMLElement): string;
     selectGetOptionSelected(option: HTMLElement): boolean | undefined;
     selectFilterCallback(option: HTMLElement): boolean;
+    /**
+     * Custom tag renderer for cx-select multi mode. Identical visuals to the
+     * default tag, but the X click goes through cx-tree's selection flow
+     * (`option.selected = false` → `cx-selected-change` →
+     * cx-folder-select-tree.handleSelectedChange) rather than
+     * cx-select.toggleOptionSelection (which our `selectSetOptionSelected`
+     * no-ops in multi mode, so the default X click would do nothing).
+     */
+    selectGetTag(option: HTMLElement): TemplateResult;
     selectSetOptionSelected(option: HTMLElement, selected: boolean): void;
     updateFunctionProps(): void;
     handleOpenChange(): void;

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

@@ -33,4 +33,5 @@ export { default as CxStepperWizard } from './stepper-wizard/stepper-wizard';
 export { default as CxStorybook } from './storybook/storybook';
 export { default as CxTimeline } from './timeline/timeline';
 export { default as CxTypeface } from './typeface/typeface';
+export { default as CxVideoFormatPicker } from './video-format-picker/video-format-picker';
 export { default as CxViewAndSort } from './view-and-sort/view-and-sort';