@orangelogic/design-system 2.111.0 → 2.112.0

package/library/components/video.js

@@ -1,13 +1,13 @@
 import { _ as Bd, 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.DKB6yEQO.js";
+import { C as Cb } from "../chunks/image.Cx4hbc4L.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.DpK0TTP5.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/debounce.CIEhztrj.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as kb } from "../chunks/i18n.D6AYDPK-.js";
+import { L as kb } from "../chunks/i18n.BcD4Ohsq.js";
 import { w as gn } from "../chunks/watch.CThbualB.js";
 import { i as Bb, x as Kc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as ki } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

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

package/library/packages/atoms/src/components/date-calendar/date-calendar.d.ts

@@ -0,0 +1,61 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as CxIconButton } from '../icon-button/icon-button';
+
+/**
+ * @summary A standalone calendar grid for picking a single date.
+ *
+ * @event {{ value: string }} cx-date-select - Emitted when the user selects a date. Value is always YYYY-MM-DD.
+ *
+ * @csspart base - The component's outer container.
+ * @csspart header - The month/year navigation header.
+ * @csspart grid - The date cell grid.
+ * @csspart cell - An individual date cell button.
+ *
+ * @cssproperty [--cell-size=30px] - Width and height of each date cell.
+ * @cssproperty [--cell-border-radius=0] - Border radius of date cells. Set to 50% for circular cells.
+ * @cssproperty [--cell-selected-background=var(--cx-color-neutral-300)] - Background of the selected date cell.
+ * @cssproperty [--cell-selected-color=var(--cx-color-neutral-0)] - Text color of the selected date cell.
+ * @cssproperty [--cell-today-background=var(--cx-color-primary-200)] - Background highlight for today's date.
+ * @cssproperty [--cell-hover-background=var(--cx-color-primary-50)] - Background on cell hover.
+ * @cssproperty [--header-background=var(--cx-color-neutral-100)] - Background of the month/year header.
+ */
+export default class CxDateCalendar extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon-button': typeof CxIconButton;
+    };
+    /** Today's CalendarDate — computed once at construction, used to highlight today's cell. */
+    private readonly today;
+    /** Derived grid cells — recomputed in willUpdate before every render. */
+    private cells;
+    /** Normalized selected date (YYYY-MM-DD). Empty string means no selection. */
+    private selectedDate;
+    /** Year of the currently displayed month. */
+    private viewYear;
+    /** 1-based month of the currently displayed month. */
+    private viewMonth;
+    /**
+     * The selected date. Accepts YYYY-MM-DD or ISO UTC datetime (2026-06-05T00:00:00.000Z).
+     * ISO datetimes are converted to the browser's local date.
+     */
+    value: string;
+    /** Minimum selectable date in YYYY-MM-DD format. */
+    min: string;
+    /** Maximum selectable date in YYYY-MM-DD format. */
+    max: string;
+    willUpdate(changedProperties: PropertyValues): void;
+    private syncViewDate;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private handleGridClick;
+    private renderHeader;
+    private renderWeekdays;
+    private renderCell;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-date-calendar': CxDateCalendar;
+    }
+}

package/library/packages/atoms/src/components/date-calendar/date-calendar.styles.d.ts

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

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

@@ -26,6 +26,7 @@ import { default as CxIcon } from '../icon/icon';
  *
  * @cssproperty --details-background-color - The background color of the details.
  * @cssproperty --details-border - The border of the details.
+ * @cssproperty --expand-icon-size - The size of the expand/collapse icon.
  */
 export default class CxDetails extends CortexElement {
     static styles: CSSResultGroup;

package/library/packages/atoms/src/components/faceted-filter/components/facet/facet.d.ts

@@ -0,0 +1,58 @@
+import { default as CxButton } from '../../../button/button.ts';
+import { default as CxDetails } from '../../../details/details.ts';
+import { default as CxIcon } from '../../../icon/icon.ts';
+import { default as CxSpace } from '../../../space/space.ts';
+import { default as CxSpinner } from '../../../spinner/spinner.ts';
+import { default as CxTree } from '../../../tree/tree.ts';
+import { default as CxTreeItem } from '../../../tree-item/tree-item.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { FacetSelectionMode, FacetValue } from '../../../../../../types/src/faceted-filter';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Internal facet section for cx-faceted-filter. Renders one collapsible
+ * filter group with a multi-select tree supporting hierarchical values ("parent>>child").
+ *
+ * @event cx-selection-change - Bubbles from the internal cx-tree when selection changes.
+ */
+export default class CxFacetedFilterFacet extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-details': typeof CxDetails;
+        'cx-icon': typeof CxIcon;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-tree': typeof CxTree;
+        'cx-tree-item': typeof CxTreeItem;
+    };
+    private readonly localize;
+    private static readonly itemsPerPage;
+    /** Whether the facet is loading new values from the API. */
+    loading: boolean;
+    /** Human-readable label shown in the collapsible header. */
+    displayName: string;
+    /** Facet field name — used as data-facet on cx-tree so the parent can identify which facet changed. */
+    type: string;
+    /** Available filter options with counts. */
+    values: FacetValue[];
+    /** Currently selected values for this facet. */
+    collections: string[];
+    /** Whether the facet allows single or multi-select. */
+    selection: FacetSelectionMode;
+    /** Hierarchical structure: { parent: { child: count, all: totalCount } } */
+    private mappedSubtypes;
+    /** Maps raw value → display name for all parent and child entries. */
+    private mappedDisplayNames;
+    /** Current pagination page — incremented by "Load more". */
+    private page;
+    private static parseFacetValue;
+    handleValuesChange(): void;
+    private loadMore;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-faceted-filter-facet': CxFacetedFilterFacet;
+    }
+}

package/library/packages/atoms/src/components/faceted-filter/components/facet/facet.styles.d.ts

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

package/library/packages/atoms/src/components/faceted-filter/faceted-filter.d.ts

@@ -0,0 +1,71 @@
+import { default as CxBadge } from '../badge/badge.ts';
+import { default as CxButton } from '../button/button.ts';
+import { default as CxDetails } from '../details/details.ts';
+import { default as CxDropdown } from '../dropdown/dropdown.ts';
+import { default as CxIcon } from '../icon/icon.ts';
+import { default as CxIconButton } from '../icon-button/icon-button.ts';
+import { default as CxSpace } from '../space/space.ts';
+import { default as CxSpinner } from '../spinner/spinner.ts';
+import { default as CxTag } from '../tag/tag.ts';
+import { default as CxTooltip } from '../tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { Facet, FacetDetails, FacetSelectionMode, SelectedFacets } from '../../../../types/src/faceted-filter';
+import { CSSResultGroup } from 'lit';
+import { default as CxFacetedFilterFacet } from './components/facet/facet';
+
+/**
+ * @summary Filter icon button that opens a dropdown panel with collapsible facet groups.
+ * Applied filters are shown as removable tags with a "Clear" action.
+ *
+ * @event {{ selection: SelectedFacets }} cx-faceted-filter-change - Fired whenever
+ * the user changes a selection, removes a tag, or clears all filters.
+ */
+export default class CxFacetedFilter extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-badge': typeof CxBadge;
+        'cx-button': typeof CxButton;
+        'cx-details': typeof CxDetails;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-faceted-filter-facet': typeof CxFacetedFilterFacet;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-tag': typeof CxTag;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    /** Active facets with their metadata and available option values. */
+    facets: Facet[];
+    /** Ordered list of facets to display. Controls which facets render and in what order. */
+    availableFacets: FacetDetails[];
+    /** Currently selected filter values. See `SelectedFacets` type. Can be set to reset selection. */
+    selectedFacets: SelectedFacets;
+    /** Default selection mode for all facets. Per-facet selection in FacetDetails takes precedence. */
+    selection: FacetSelectionMode;
+    /** Whether the current selection is being applied by the consumer. */
+    loading: boolean;
+    /** Total count of selected filter values that have a matching display name. */
+    private appliedFiltersCount;
+    /** Internal selection state maintained by the component. */
+    private internalSelection;
+    /** Maps facetFieldName → (value → displayValue) for rendering applied-filter tags. */
+    private mappedDisplayNames;
+    handleFacetsChange(): void;
+    handleSelectedFacetsChange(): void;
+    handleInternalSelectionChange(): void;
+    private updateAppliedFiltersCount;
+    private getFacetSelectionMode;
+    private handleSelectionChange;
+    private handleRemove;
+    private handleClearAllClick;
+    private renderAppliedFilters;
+    private renderFooter;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-faceted-filter': CxFacetedFilter;
+    }
+}

package/library/packages/atoms/src/components/faceted-filter/faceted-filter.styles.d.ts

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

package/library/packages/atoms/src/components/icon/font-awesome-icons.d.ts

@@ -0,0 +1 @@
+export declare const fontAwesomeIconNames: readonly string[];

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

@@ -31,6 +31,7 @@ export default class CxIcon extends CortexElement {
     private customIconSrc;
     private customIconSvg;
     private loadingIconName;
+    private get effectiveVariant();
     protected runFirstUpdated(): void;
     handleNameChange(): Promise<void>;
     handleLabelChange(): void;

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

@@ -121,7 +121,7 @@ export default class CxImage extends ResizableElement {
     get currentAltValue(): string;
     get currentSrc(): string;
     get highlighterTabindex(): "0" | undefined;
-    get highlighterRole(): "img" | "button";
+    get highlighterRole(): "button" | "img";
     get highlighterClass(): {
         [x: string]: boolean;
         'highlightable-item': boolean;

package/library/packages/atoms/src/components/table/table-data-loader.d.ts

@@ -0,0 +1,13 @@
+import { ColumnDefinition, TableDataFormat } from '../../../../types/src/table';
+
+export type StreamChunkCallback = (rows: Array<Record<string, unknown>>) => Promise<void>;
+export declare function parseCsvStream(raw: string, onColumns: (columns: ColumnDefinition[]) => void, onChunk: StreamChunkCallback, chunkSize?: number): Promise<number>;
+export declare function parseJsonStream(raw: string, onColumns: (columns: ColumnDefinition[]) => void, onChunk: StreamChunkCallback, chunkSize?: number): Promise<number>;
+export interface ParsedTableData {
+    columns: ColumnDefinition[];
+    data: Array<Record<string, unknown>>;
+}
+export type DataParser = (raw: string) => ParsedTableData | Promise<ParsedTableData>;
+export declare const tableDataParsers: Record<Exclude<TableDataFormat, TableDataFormat.Auto>, DataParser>;
+export declare function detectTableDataFormat(url: string, contentType: string | null): Exclude<TableDataFormat, TableDataFormat.Auto>;
+export declare function resolveTableDataFormat(requested: TableDataFormat, url: string, contentType: string | null): Exclude<TableDataFormat, TableDataFormat.Auto>;

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

@@ -9,7 +9,7 @@ import { default as CxSpinner } from '../spinner/spinner.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { RowComponent, TabulatorFull as Tabulator } from '../../../../hybrid/table-core/src/index.ts';
 import { PaginationCounter } from '../../../../types/src/pagination';
-import { HoverMenuOptions, SavedSearchItem, TableClipboardAction, TableDropdownFilterData, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
+import { HoverMenuOptions, SavedSearchItem, TableClipboardAction, TableDropdownFilterData, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition, TableDataFormat } from '../../../../types/src/table';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { CxTableRowActions, CxTableToolbar } from './components';
 
@@ -61,6 +61,8 @@ import { CxTableRowActions, CxTableToolbar } from './components';
  * @event {{ args: any[] }} cx-table.[event_name] - Emitted when the event with such name is emitted on the table.
  * Must register the event listener on the table element to receive the event.
  * E.g: `cx-table.rowMoved` will fire when `rowMoved` event is emitted.
+ * @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.
  */
 export default class CxTable extends CortexElement {
     #private;
@@ -679,6 +681,10 @@ export default class CxTable extends CortexElement {
      * the externally set state, not the internal data fetch.
      */
     loading: boolean;
+    /** URL to fetch tabular data from. When set, the table fetches, parses, and populates columns and data. */
+    dataUrl: string;
+    /** Format of the data at dataUrl. Use 'auto' to detect from URL extension or Content-Type header. */
+    dataFormat: TableDataFormat;
     tabulatorInstance: Tabulator | null;
     /**
      * In case the table is re-initialized, we need to re-register the event listeners.
@@ -686,6 +692,8 @@ export default class CxTable extends CortexElement {
      */
     private readonly watchedEvents;
     private activeSearchValue;
+    /** Monotonic counter to discard responses from superseded dataUrl fetches. */
+    private dataUrlRequestId;
     get initialized(): boolean | undefined;
     get searchValue(): string;
     get showTableToolbar(): string | boolean;
@@ -729,8 +737,12 @@ export default class CxTable extends CortexElement {
     handleSearchFieldsChange(): void;
     handleSearchMatchAnyKeywordChange(): void;
     handleDropdownFiltersPropChange(): void;
+    handleDataUrlChange(): void;
     private handleTableExport;
     private handleDropdownFilterChange;
+    private streamCsvData;
+    private streamJsonData;
+    private loadFromDataUrl;
     render(): TemplateResult;
 }
 declare global {

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

@@ -14,6 +14,7 @@ export { default as CxCard } from './components/card/card';
 export { default as CxCheckbox } from './components/checkbox/checkbox';
 export { default as CxColorPicker } from './components/color-picker/color-picker';
 export { default as CxCopyButton } from './components/copy-button/copy-button';
+export { default as CxDateCalendar } from './components/date-calendar/date-calendar';
 export { default as CxDetails } from './components/details/details';
 export { default as CxDialog } from './components/dialog/dialog';
 export { default as CxDivider } from './components/divider/divider';
@@ -24,6 +25,7 @@ export { default as CxDrawer } from './components/drawer/drawer';
 export { default as CxDropdown } from './components/dropdown/dropdown';
 export { default as CxEChart } from './components/e-chart/e-chart';
 export { default as CxElementClamp } from './components/element-clamp/element-clamp';
+export { default as CxFacetedFilter } from './components/faceted-filter/faceted-filter';
 export { default as CxFormatBytes } from './components/format-bytes/format-bytes';
 export { default as CxFormatDate } from './components/format-date/format-date';
 export { default as CxFormatNumber } from './components/format-number/format-number';
@@ -85,3 +87,4 @@ export { default as CxVisuallyHidden } from './components/visually-hidden/visual
 export { getAnimationNames, getEasingNames } from './utilities/animation';
 export { default as componentStyles } from '../../styles/src/component.styles';
 export { getAnimation, setAnimation, setDefaultAnimation, } from './utilities/animation-registry';
+export { fontAwesomeIconNames } from './components/icon/font-awesome-icons';

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

@@ -0,0 +1,9 @@
+/** Emitted by cx-date-calendar when the user selects a date. Value is always YYYY-MM-DD. */
+export type CxDateSelectEvent = CustomEvent<{
+    value: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-date-select': CxDateSelectEvent;
+    }
+}

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

@@ -0,0 +1,8 @@
+export type CxFacetedFilterChangeEvent = CustomEvent<{
+    selection: Record<string, string[]>;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-faceted-filter-change': CxFacetedFilterChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-data-load.d.ts

@@ -0,0 +1,17 @@
+import { TableDataFormat } from '../../types/src/table';
+
+export type CxTableDataLoadEvent = CustomEvent<{
+    format: TableDataFormat;
+    rowCount: number;
+    url: string;
+}>;
+export type CxTableDataLoadErrorEvent = CustomEvent<{
+    error: unknown;
+    url: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-data-load': CxTableDataLoadEvent;
+        'cx-table-data-load-error': CxTableDataLoadErrorEvent;
+    }
+}

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

@@ -52,6 +52,7 @@ export * from './cx-copy';
 export * from './cx-corner-position-input-group-change';
 export * from './cx-dashboard-filter-change';
 export * from './cx-dashboard-table-load-more';
+export * from './cx-date-select';
 export * from './cx-disconnect';
 export * from './cx-document-viewer-open-asset';
 export * from './cx-dot-pagination-change';
@@ -69,6 +70,7 @@ export * from './cx-enter';
 export * from './cx-error';
 export * from './cx-expand';
 export * from './cx-export-settings';
+export * from './cx-faceted-filter-change';
 export * from './cx-file-on-demand-load-more';
 export * from './cx-file-on-demand-pin';
 export * from './cx-file-on-demand-unpin';
@@ -165,6 +167,7 @@ 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-data-load';
 export * from './cx-table-dropdown-filter-change';
 export * from './cx-table-export';
 export * from './cx-table-row-action-click';

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/ClickableCell/ClickableCell.d.ts

@@ -29,6 +29,10 @@ export declare const CLICKABLE_CELL_CLASS = "tabulator-clickable-cell";
  * order: column > row > table. The optional `clickableActionName` column
  * property targets a specific action by name; if no match is found the
  * activation is a no-op.
+ *
+ * `clickableEventName` bypasses hover menu resolution entirely: clicking fires
+ * `cx-table-row-action-click` with `detail.name` equal to the provided value.
+ * Takes priority over `clickableActionName` when both are set.
  */
 export default class ClickableCell extends Module {
     static readonly moduleName = "clickableCell";
@@ -39,6 +43,7 @@ export default class ClickableCell extends Module {
     handleCellClick(event: MouseEvent, cell: Cell): void;
     private emitCellAction;
     private getCxTableHost;
+    private resolveEmitName;
     private resolveAction;
     private pickAction;
 }

package/library/packages/molecules/src/asset-data-display/asset-data-display.d.ts

@@ -30,7 +30,7 @@ export default class CxAssetDataDisplay extends CortexElement {
     position: AssetDataDisplayPosition;
     fetchMode: AssetDataDisplayFetchMode;
     token: string;
-    cms5Token: string;
+    siteBuilderToken: string;
     recordId: string;
     headerSourceField: string;
     detailsSourceField: string;

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

@@ -10,6 +10,8 @@ import { Asset, AssetType, AssetTypeString } from '../../../types/src/content-bu
 /**
  * @summary The `cx-asset-picker` component lets users choose and clear assets for a trait/control.
  *
+ * @slot trigger - Custom element to use as the trigger instead of the default choose button.
+ *
  * @event cx-content-builder-asset-select - Emitted when an asset is selected.
  * @event cx-asset-request-status - Emitted when the asset request status changes.
  */

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

@@ -1,12 +1,20 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
 import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
+import { default as CxDropdown } from '../../../atoms/src/components/dropdown/dropdown.ts';
 import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxInput } from '../../../atoms/src/components/input/input.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 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 CortexElement } from '../../../base/src/cortex-element.ts';
 import { CxAssetPickerSelectEvent } from '../../../events/src/events.ts';
 import { default as CxAssetPicker } from '../asset-picker/asset-picker.ts';
+import { default as CxBicolorPicker } from '../bicolor-picker/bicolor-picker.ts';
 import { Asset, AssetTypeString } from '../../../types/src/content-builder';
+import { IconPickerValue, IconPickerVariant } from '../../../types/src/icon-picker';
 import { CSSResultGroup, nothing } from 'lit';
 
 type IconData = {
@@ -16,28 +24,66 @@ type IconData = {
 };
 /**
  * @summary <cx-icon-picker> is a component that allows the user to select an icon from a list of icons.
+ *
+ * @csspart base - The component's base select wrapper (select mode).
+ * @csspart option - Each icon option in the select list.
+ * @csspart prefix - The prefix icon shown in the select trigger.
+ * @csspart footer - The footer area of the select dropdown containing the custom option.
+ * @csspart footer-divider - The divider above the custom option in the select footer.
+ * @csspart custom-button - The custom icon option in the select footer.
+ * @csspart panel - The button-mode dropdown panel.
+ *
+ * @event cx-change - Emitted when the selected icon value changes.
+ * @event {{ value: [string, string] }} cx-bicolor-picker-change - Emitted when the embedded bicolor picker value changes (only when `show-bicolor-picker` is true).
  */
 export default class CxIconPicker extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-asset-picker': typeof CxAssetPicker;
+        'cx-bicolor-picker': typeof CxBicolorPicker;
+        'cx-button': typeof CxButton;
         'cx-divider': typeof CxDivider;
+        'cx-dropdown': typeof CxDropdown;
         'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
         'cx-option': typeof CxOption;
         'cx-select': typeof CxSelect;
         'cx-space': typeof CxSpace;
     };
     private readonly localize;
-    private select;
-    private customOption;
-    value: {
-        name: string;
-        src: string;
-    };
+    private readonly select;
+    private readonly customOption;
+    private readonly dropdown?;
+    value: IconPickerValue;
     /**
      * Adds a clear button when the select is not empty.
      */
     clearable: boolean;
+    /**
+     * Controls the visual variant of the icon picker.
+     * In 'select' mode a cx-select is rendered inline.
+     * In 'button' mode a cx-button trigger opens a cx-dropdown panel with a search input and icon list.
+     * @default 'select'
+     */
+    variant: IconPickerVariant;
+    /**
+     * When true, adds a Font Awesome section alongside the default Cortex icon library.
+     */
+    fontAwesome: boolean;
+    /**
+     * When true, renders a cx-bicolor-picker below the icon selector.
+     * @default false
+     */
+    showColorPicker: boolean;
+    /**
+     * Color value in light-dark() CSS format, managed by the embedded bicolor picker.
+     * Only relevant when show-bicolor-picker is true.
+     * @default ''
+     */
+    color: string;
     /**
      * Function to request an asset.
      * This is used to open the asset picker dialog when the user selects an asset from the DAM.
@@ -53,23 +99,37 @@ export default class CxIconPicker extends CortexElement {
      * Since the virtualizer have a defect that not re-render when the parent is hidden once
      */
     private showVirtualizer;
-    get filteredIcons(): IconData[];
+    private get filteredCortexIcons();
+    private get filteredFaIcons();
+    private get virtualListItems();
     constructor();
     runFirstUpdated(): void;
-    renderOption(icon: IconData): import('lit').TemplateResult<1> | typeof nothing;
-    handleSelectValueChange(): void;
-    handleSelectShow(): void;
-    handleSelectHide(): void;
+    handleVariantChange(): Promise<void>;
+    renderOption(item: IconData): import('lit').TemplateResult<1> | typeof nothing;
+    private renderMenuItem;
+    private handleSelectValueChange;
+    private handleClear;
+    private handleSelectShow;
+    private handleSelectHide;
+    private handleDropdownShow;
+    private handleDropdownHide;
     /**
      * Mount virtualizer when select is focused (before it opens)
      */
-    handleSelectFocus(): void;
+    private handleSelectFocus;
     handleContentBuilderAssetSelect(event: CxAssetPickerSelectEvent): Promise<void>;
     handleContentBuilderAssetDelete(): Promise<void>;
+    private handleSearchInput;
+    private handleMenuSelect;
+    private handleBicolorChange;
     setSelectOptionCurrent(option: HTMLElement, current?: boolean): void;
     selectGetOptionLabel(option: HTMLElement): string;
     selectFilterCallback(option: HTMLElement, value: string): boolean;
-    renderCustomIconPicker(): import('lit').TemplateResult<1>;
+    private renderIcon;
+    private renderCustomIconPickerMenuItem;
+    private renderCustomIconPicker;
+    private renderSelectMode;
+    private renderButtonMode;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -35,4 +35,6 @@ export { default as CxStorybook } from './storybook/storybook';
 export { default as CxTimeline } from './timeline/timeline';
 export { default as CxTypeface } from './typeface/typeface';
 export { default as CxAssetFormatPicker } from './asset-format-picker/asset-format-picker';
+export { default as CxInputDatePicker } from './input-date-picker/input-date-picker';
+export { default as CxInputDateRangePicker } from './input-date-range-picker/input-date-range-picker';
 export { default as CxViewAndSort } from './view-and-sort/view-and-sort';