@orangelogic/design-system 3.20.0 → 3.22.0

package/library/packages/organisms/src/color-swatch-group/color-swatch-group.d.ts

@@ -3,21 +3,56 @@ import { default as CxTypography } from '../../../atoms/src/components/typograph
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { default as CxColorSwatch } from '../../../molecules/src/color-swatch/color-swatch.ts';
 import { default as CxTable } from '../../../hybrid/table-core/src/index.ts';
-import { ColorSwatchData } from '../../../types/src/color-swatch';
-import { CxColorSwatchGroupVariant } from '../../../types/src/color-swatch-group';
-import { CSSResultGroup } from 'lit';
+import { ColorSwatchData, CxColorSwatchCodeAlignment, CxColorSwatchCodeSeparator, CxColorSwatchHexFormat } from '../../../types/src/color-swatch';
+import { ColorSwatchCustomColumn, CxColorSwatchGroupColumnAlignment, CxColorSwatchGroupColumnWidthMode, CxColorSwatchGroupElement, CxColorSwatchGroupVariant } from '../../../types/src/color-swatch-group';
+import { CSSResultGroup, PropertyValues } from 'lit';
 
 /**
  * @summary Color Swatch Group is used to display a group of color swatches.
  *
  * @cssproperty [--padding=0] - Padding of the container
- * @cssproperty [--grid-gap=var(--cx-spacing-medium)] - Gap size for Grid variant (horizontal & vertical)
- * @cssproperty [--swatch-group-horizontal-gap=-50px] - Gap size for Circle variant (horizontal) (use negative value for overlapping)
+ * @cssproperty [--grid-gap=var(--cx-spacing-medium)] - Gap size for Grid variant, used as the fallback for both axes below
+ * @cssproperty [--grid-column-gap=var(--grid-gap)] - Horizontal gap between cards in the Grid variant
+ * @cssproperty [--grid-row-gap=var(--grid-gap)] - Vertical gap between cards in the Grid variant
+ * @cssproperty [--swatch-min-height=50px] - Minimum height of a Grid variant card
+ * @cssproperty [--swatch-border=light-dark(transparent, transparent) 0px] - Border of a Grid variant card
+ * @cssproperty [--swatch-border-radius=var(--cx-border-radius-x-large)] - Corner radius of a Grid variant card
+ * @cssproperty [--swatch-box-shadow=0px 0px 0px 0px light-dark(transparent, transparent)] - Shadow of a Grid variant card
+ * @cssproperty [--swatch-content-justify=space-between] - Vertical alignment of the content inside a Grid variant card
+ * @cssproperty [--swatch-content-margin=var(--cx-spacing-medium)] - Padding around the content inside a Grid variant card
+ * @cssproperty [--swatch-group-horizontal-gap=-100px] - Gap size for Circle variant (horizontal) (use negative value for overlapping)
+ * @cssproperty [--swatch-circle-size=350px] - Size of a Circle variant swatch
+ * @cssproperty [--swatch-circle-border-radius=1000px] - Corner radius of a Circle variant swatch
+ * @cssproperty [--swatch-circle-content-align=center] - Horizontal alignment of the content inside a Circle variant swatch
+ * @cssproperty [--swatch-circle-content-justify=center] - Vertical alignment of the content inside a Circle variant swatch
+ * @cssproperty [--swatch-circle-content-margin=0px] - Margin around the content inside a Circle variant swatch
  * @cssproperty [--swatch-group-vertical-gap=-50px] - Gap size for Circle variant (vertical) (use negative value for overlapping)
- * @cssproperty --swatch-font-family - Font family for swatch names/keys/values and, in table mode, the palette title
- * @cssproperty [--swatch-font-style=normal] - Font style for swatch names/keys/values and, in table mode, the palette title
- * @cssproperty --swatch-font-weight - Font weight for swatch names/keys/values and, in table mode, the palette title
- * @cssproperty [--swatch-font-size=var(--cx-font-size-medium)] - Font size for swatch names/keys/values and, in table mode, the palette title
+ * @cssproperty --swatch-font-family - Font family for swatch names/keys/values and, in table mode, the cell content
+ * @cssproperty [--swatch-font-style=normal] - Font style for swatch names/keys/values and, in table mode, the cell content
+ * @cssproperty --swatch-font-weight - Font weight for swatch names/keys/values and, in table mode, the cell content
+ * @cssproperty [--swatch-font-size=var(--cx-font-size-large)] - Font size for swatch names/keys/values and, in table mode, the cell content
+ * @cssproperty [--swatch-text-color=light-dark(#000000, #ffffff)] - Text color of the table cell content (Table variant only; grid/circle swatches derive their text color from the swatch color)
+ * @cssproperty [--table-width=100%] - Width of the tables in the Table variant
+ * @cssproperty --row-padding - Padding shorthand for table rows. Split into the four longhands below by the block settings
+ * @cssproperty [--row-padding-top=var(--cx-spacing-2x-small)] - Top padding of table rows
+ * @cssproperty [--row-padding-right=var(--cx-spacing-2x-small)] - Right padding of table rows
+ * @cssproperty [--row-padding-bottom=var(--cx-spacing-2x-small)] - Bottom padding of table rows
+ * @cssproperty [--row-padding-left=var(--cx-spacing-2x-small)] - Left padding of table rows, also used as the column-title padding so titles line up with their cells
+ * @cssproperty [--name-swatch-width=64px] - Width of the color chip inside the Name cell (Table variant)
+ * @cssproperty [--name-swatch-height=32px] - Height of the color chip inside the Name cell (Table variant)
+ * @cssproperty [--name-swatch-border-radius=0] - Corner radius of the color chip inside the Name cell (Table variant)
+ * @cssproperty [--table-row-gap=0] - Vertical space between table rows
+ * @cssproperty [--table-column-gap=0px] - Horizontal space between table columns
+ * @cssproperty --palette-title-font-family - Font family of the palette titles (Table variant)
+ * @cssproperty --palette-title-font-style - Font style of the palette titles (Table variant)
+ * @cssproperty --palette-title-font-weight - Font weight of the palette titles (Table variant)
+ * @cssproperty [--palette-title-font-size=var(--cx-font-size-x-large)] - Font size of the palette titles (Table variant)
+ * @cssproperty [--palette-title-color=light-dark(#000000, #ffffff)] - Text color of the palette titles (Table variant)
+ * @cssproperty --column-title-font-family - Font family of the column titles (Table variant)
+ * @cssproperty --column-title-font-style - Font style of the column titles (Table variant)
+ * @cssproperty --column-title-font-weight - Font weight of the column titles (Table variant)
+ * @cssproperty [--column-title-font-size=var(--cx-font-size-large)] - Font size of the column titles (Table variant)
+ * @cssproperty [--column-title-color=light-dark(#000000, #ffffff)] - Text color of the column titles (Table variant)
  *
  * @csspart base - The component's base wrapper.
  *
@@ -45,6 +80,10 @@ export default class CxColorSwatchGroup extends CortexElement {
      */
     containerEl: HTMLDivElement;
     tableEls: NodeListOf<CxTable>;
+    /**
+     * Off-screen element used to size "Hug contents" columns from the data.
+     */
+    private readonly measureEl?;
     /**
      * Color swatch group variant
      */
@@ -67,6 +106,70 @@ export default class CxColorSwatchGroup extends CortexElement {
      */
     showCodes: string[];
     multiLanguage: boolean;
+    /**
+     * Whether a code's label and value share a line or stack on separate lines
+     */
+    codeAlignment: CxColorSwatchCodeAlignment;
+    /**
+     * Separator between the numeric parts of the RGB and CMYK codes
+     */
+    codeSeparator: CxColorSwatchCodeSeparator;
+    /**
+     * Which prefix the HEX code carries: `#`, `0x`, or none
+     */
+    hexFormat: CxColorSwatchHexFormat;
+    /**
+     * Optional table chrome to render (palette name, column titles, separator
+     * line). Table variant only; anything omitted from the list is hidden.
+     */
+    showElements: CxColorSwatchGroupElement[];
+    /**
+     * Whether the name column shares the table's free space or hugs its content
+     */
+    nameColumnWidthMode: CxColorSwatchGroupColumnWidthMode;
+    /**
+     * Applies the name column's min/max width constraints
+     */
+    nameColumnConstraints: boolean;
+    /**
+     * Minimum width (px) of the name column, applied while `name-column-constraints` is set
+     */
+    nameColumnMinWidth?: number;
+    /**
+     * Maximum width (px) of the name column, applied while `name-column-constraints` is set
+     */
+    nameColumnMaxWidth?: number;
+    /**
+     * Horizontal alignment of the name column. Unset keeps the built-in default.
+     */
+    nameColumnAlignment?: CxColorSwatchGroupColumnAlignment;
+    /**
+     * Whether the code columns share the table's free space or hug their content
+     */
+    codeColumnWidthMode: CxColorSwatchGroupColumnWidthMode;
+    /**
+     * Applies the code columns' min/max width constraints
+     */
+    codeColumnConstraints: boolean;
+    /**
+     * Minimum width (px) of each code column, applied while `code-column-constraints` is set
+     */
+    codeColumnMinWidth?: number;
+    /**
+     * Maximum width (px) of each code column, applied while `code-column-constraints` is set
+     */
+    codeColumnMaxWidth?: number;
+    /**
+     * Horizontal alignment of the code columns. Unset keeps the built-in default.
+     */
+    codeColumnAlignment?: CxColorSwatchGroupColumnAlignment;
+    /**
+     * Extra table columns, after the code columns. Each color holds its value in
+     * `metadata[column.id]`. Table variant only.
+     */
+    customColumns: ColorSwatchCustomColumn[];
+    /** Paints the Grid variant's cards as one color ramp across the row. */
+    gradientEffect: boolean;
     /**
      * Breakpoints for responsive design
      */
@@ -79,12 +182,30 @@ export default class CxColorSwatchGroup extends CortexElement {
      * Current total grid column
      */
     private currentCol;
+    /**
+     * `showElements` indexed for lookup: the template asks about each element
+     * once per render, so it is scanned once here instead.
+     */
+    private visibleElements;
+    /**
+     * Measured content width per field, used by columns set to "Hug contents".
+     *
+     * Only hugging fields are carried: a column set to fill never reads this, so
+     * measuring it would cost a layout pass for a width nothing applies.
+     *
+     * cx-table cannot supply this: its fit-content layouts (`fitData*`) size a
+     * column to its *header title* only — `Column.fitToData()` measures cells that
+     * have already collapsed inside the flex row — and they are table-wide, so
+     * they cannot be mixed with a column that fills. Measuring from the data here
+     * keeps hug honest, per column, and free of any feedback loop.
+     */
+    private hugWidths;
     private isFocused;
     canFocusContainer: boolean;
     isContainerFocused: boolean;
     constructor();
     runFirstUpdated(): void;
-    runConnectedCallback(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private handleWindowResize;
     /**
@@ -94,14 +215,93 @@ export default class CxColorSwatchGroup extends CortexElement {
     private handleKeyDown;
     private handleFocusIn;
     private handleFocusOut;
+    updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Re-measure after every render rather than from a `@watch`: the fonts and row
+     * paddings that decide a hug width arrive as CSS custom properties, which
+     * never appear in Lit's changed properties. Assigning only on a real change
+     * keeps the extra render from looping.
+     */
+    private syncHugWidths;
+    /** Whether a built-in column's shared width mode is "Hug contents". */
+    private hugsBuiltInColumn;
+    /**
+     * Widest rendered width per field, measured off-screen from the data: the
+     * column title in the header font, and every cell value in the content font,
+     * each inside a box that mirrors the real cell's padding and column gap.
+     *
+     * Skips columns set to fill: one hugging column used to drag every other
+     * column through a full measurement pass whose width nothing then read.
+     */
+    private measureHugWidths;
+    /**
+     * Lays one string out in the probe and returns its width. `inlineStyles`
+     * carries a custom column's own font, which no class can express.
+     */
+    private measureProbe;
+    /** Widest of the title and every stored value for a built-in column. */
+    private measureBuiltInColumn;
+    /**
+     * Widest of the title and every stored metadata value for a custom column.
+     * The title uses the shared column-title font: a column's own font styles its
+     * cells, not its header.
+     */
+    private measureCustomColumn;
+    /**
+     * A zero measurement means nothing was laid out (the block is hidden, or this
+     * is the render that created the probe). Leaving the field out keeps the
+     * column flexible for now instead of pinning it to a bogus width; the next
+     * render measures again.
+     */
+    private recordHugWidth;
+    /**
+     * The card at `index`'s slice of one ramp spanning the whole row.
+     *
+     * The ramp belongs to the row, not to each card: first color on the row's
+     * left edge, last on its right, the rest spread evenly between. A card
+     * reports the ramp at its own two edges plus any color falling inside it, so
+     * two cards at a seam sample the same position and agree on the color there.
+     *
+     * Anchoring colors to card centers instead leaves the halves before the first
+     * and after the last color flat, so the band stops short of the block's edges.
+     */
+    private gradientStopsFor;
+    /**
+     * The ramp's color at `position`, a fraction of the row. Both cards at a seam
+     * pass the same fraction, so they get the same string and the seam cannot show.
+     */
+    private sampleGradient;
+    /**
+     * Copies a color's metadata onto flat row keys so the table reads plain
+     * fields instead of a nested path. Columns with no value still get a key,
+     * which keeps the cell empty instead of showing the previous row's data.
+     */
+    private flattenMetadata;
+    /**
+     * Renders one stored code the way it is displayed. Used for the table cells,
+     * the text their copy buttons put on the clipboard, and the hug measurement,
+     * so all three stay in step.
+     */
+    private formatCode;
+    /**
+     * Overlay the block's width/constraint/alignment settings onto one of the
+     * built-in column definitions.
+     */
+    private applyColumnSettings;
     /**
      * Filter out the columns that are not in the showCodes
      */
     private getTableColumns;
+    /**
+     * Every input that feeds `getTableColumns`. Used as the `guard` dependency
+     * list so the cached table template is rebuilt whenever one of them changes.
+     */
+    private get columnGuardDependencies();
     /**
      * Categorize the color swatches by palette
      */
     private categorizeByPalette;
+    handleShowElementsChange(): void;
     handleIsFocusedChange(): void;
     /**
      * Get current direction of the color swatch group

package/library/packages/organisms/src/content-builder/blocks/font-kit-advanced/font-kit-advanced.utils.d.ts

@@ -0,0 +1,85 @@
+import { FontOutlinesFormat, Typeface } from '../../../../../types/src/font-kit';
+import { FontFamily } from '../../../../../types/src/font-picker';
+
+/** The parsed tables `toFontStyleAxis` reads, shaped as opentype.js exposes them. */
+type FontStyleTables = {
+    head?: {
+        macStyle?: number;
+    };
+    os2?: {
+        fsSelection?: number;
+    };
+    post?: {
+        italicAngle?: number;
+    };
+};
+/**
+ * Maps a typeface's style name onto the CSS font-style axis. `fontStyle` may
+ * hold a subfamily name such as `Bold Italic`, which is not a valid CSS
+ * font-style; the numeric weight carries the rest.
+ */
+export declare function toCssFontStyle(fontStyle: string): 'italic' | 'normal';
+/**
+ * opentype.js types `outlinesFormat` as a bare `string`; anything unrecognized
+ * resolves to `undefined` so the token stays empty rather than guessing.
+ */
+export declare function toFontOutlinesFormat(outlinesFormat: string | undefined): FontOutlinesFormat | undefined;
+/**
+ * A font with no OS/2 table, or a malformed value, resolves to `undefined` so
+ * the token stays empty instead of naming a width the file never declared.
+ */
+export declare function toFontWidthClass(usWidthClass: unknown): number | undefined;
+/**
+ * Reads the italic axis from the flags the font declares rather than from its
+ * subfamily name, which misses `Oblique` and anything not named in English.
+ * `fsSelection` is the authoritative one, `macStyle` its older duplicate, and
+ * a non-zero `italicAngle` catches a slanted face whose flags were never set.
+ * The name is used only when the font carries neither table.
+ */
+export declare function toFontStyleAxis(tables: FontStyleTables | undefined, fontSubfamily: string): 'italic' | 'normal';
+/** `italic` → `Italic`; anything off the axis passes through. */
+export declare function getFontStyleName(fontStyle: string): string;
+/**
+ * Returns the readable name for a numeric font weight (e.g. `700` → `Bold`),
+ * falling back to the raw value for non-standard weights.
+ */
+export declare function getFontWeightName(fontWeight: string): string;
+/**
+ * The kit's variants as font-picker options, for the "font kit default" entry.
+ * Deduped by weight and style: a kit built from several families holds the
+ * same face more than once, and the family is irrelevant here because the
+ * entry deliberately stores none.
+ */
+export declare function toContainerFontVariants(variants: Typeface[]): FontFamily[];
+/** Variants resolved without a font file carry no width class. */
+export declare function getFontWidthName(fontWidthClass: number | undefined): string;
+/** Variants resolved without a font file carry no outline format. */
+export declare function getFileFormatName(fontOutlinesFormat: FontOutlinesFormat | undefined): string;
+/**
+ * Replaces the supported `${token}` placeholders in a text with the given
+ * variant's values. Unknown tokens are left literal.
+ */
+export declare function resolveTokens(text: string, variant: Typeface): string;
+/**
+ * Resolves the supported `${token}` placeholders in every text node of a
+ * cloned row against the given variant.
+ */
+export declare function resolveTokensInTree(root: HTMLElement, variant: Typeface): void;
+/**
+ * Collects the CSS rules of the document that target elements inside the given
+ * blocks (the template row and the divider). GrapesJS writes per-block config
+ * styles as `#<component-id>` rules (and block-template styles as
+ * `.cls-<template-id>` rules) into the page stylesheet; those rules cannot
+ * reach the clones inside the component's shadow root, so the matching ones
+ * are re-injected next to the clones.
+ */
+export declare function collectBlockCssRules(roots: HTMLElement[]): string;
+/**
+ * Strips editor-only attributes (GrapesJS type markers, contenteditable) from
+ * a cloned row element and all of its descendants so the clone is inert,
+ * presentation-only DOM. The slot assignment is removed from the clone's root
+ * only, since the clone lives in the shadow DOM instead of a named slot;
+ * nested slot assignments (children of inner blocks) stay intact.
+ */
+export declare function sanitizeClone(clone: HTMLElement): void;
+export {};

package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts

@@ -5,7 +5,7 @@ import { Transformation } from '../../../../../types/src/asset-link-format';
 import { TeamSpace } from '../../../../../types/src/content-builder';
 import { ContentType } from '../../../../../types/src/gallery';
 import { HighlightableElementContentPosition } from '../../../../../types/src/highlightable-element';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 
 /**
  * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
@@ -25,7 +25,7 @@ import { TemplateResult } from 'lit';
  * @cssproperty --border-radius - The border-radius of the image.
  * @cssproperty --border - The border of the image.
  *
- * @event cx-load - Emitted when the image has loaded.
+ * @event cx-load - Emitted on each successful image load, including subsequent srcset candidate loads. May fire multiple times for the same block.
  * @event cx-error - Emitted when the image has failed to load.
  * @event cx-image-zoom-open - Emitted when the image zoom is opened.
  * @event cx-image-zoom-close - Emitted when the image zoom is closed.
@@ -96,6 +96,8 @@ export default class CxSbImage extends CxImage {
     manualFormat: boolean;
     /** Whether `formatDarkMode` was picked by hand. See `manualFormat`. */
     manualFormatDarkMode: boolean;
+    /** Saved intrinsic width / height for the dark image. */
+    aspectRatioDarkMode: number;
     /**
      * Asset transformations applied to the image.
      */
@@ -154,6 +156,7 @@ export default class CxSbImage extends CxImage {
      * alt text and overlay content instead.
      */
     fetchedAssetData: Record<string, unknown>;
+    private renderedImageSrc;
     /**
      * Indicates whether the image is currently zoomed.
      */
@@ -185,14 +188,14 @@ export default class CxSbImage extends CxImage {
      */
     private assetFileSize;
     /**
-     * Whether an asset fetch has reported back for the current record.
+     * The record id the cached extension, file size and proxy width describe.
      *
-     * Tracked separately from `assetExtension` because "no extension" is a legitimate
-     * answer — a missing asset or a record without the field both yield an empty string.
-     * Gating on the empty string alone would hold `srcset` back forever in those cases;
-     * gating on this flag releases it as soon as the answer is in, whatever it says.
+     * An identity rather than a flag because `currentRecordId` also changes on a theme
+     * switch, which alters no watched property: the light record's answer would otherwise
+     * stay marked resolved and release `.auto` for the dark record before its own
+     * extension lands, flattening a dark animated GIF. Empty until the first answer.
      */
-    private hasResolvedAssetExtension;
+    private resolvedExtensionRecordId;
     /**
      * Space list supplied by `cx-content-builder-viewer`, which fetches it once per
      * surface. The only source — this block never fetches the list itself.
@@ -218,7 +221,7 @@ export default class CxSbImage extends CxImage {
      * getters key off this single predicate so alt, recordId, transformations and
      * click handlers stay aligned with whichever image is actually being displayed.
      */
-    private get useDarkVariant();
+    get useDarkVariant(): boolean;
     get currentAltValue(): string;
     get currentRecordId(): string;
     get currentSrc(): string;
@@ -232,6 +235,22 @@ export default class CxSbImage extends CxImage {
      * consumer — the transformation URL and `srcset` alike — reads the same resolved value.
      */
     get currentFormat(): string;
+    /**
+     * Whether the delivery URL may carry the `.auto` marker yet.
+     *
+     * The marker asks the backend to pick a rendition, and the only thing that can
+     * veto that choice is the asset's own extension: an animated GIF served as the
+     * original file must keep its stored name or lose the animation. Applying the
+     * marker before the extension is known makes that veto unreachable, so an
+     * original GIF can be served as a single frame. Waiting costs the stored URL
+     * for one render; guessing costs the animation.
+     *
+     * Gated on the resolved flag rather than a non-empty extension, because "no
+     * extension" is a legitimate answer that must still release the marker.
+     */
+    private get canApplyAutoFormat();
+    /** Whether the cached extension describes the record actually being displayed. */
+    private get hasResolvedAssetExtension();
     /**
      * Fields the child `cx-asset-data-display` must fetch for this block.
      *
@@ -255,6 +274,7 @@ export default class CxSbImage extends CxImage {
         image: boolean;
         'image--hidden': boolean;
     };
+    protected get currentAspectRatio(): number;
     /**
      * Whether the image have zoom action.
      */
@@ -283,6 +303,8 @@ export default class CxSbImage extends CxImage {
      */
     handleRecordIdChangeForExtension(): void;
     handleFetchedAssetDataChange(): void;
+    protected update(changedProps: PropertyValues): void;
+    protected handleLoad(event: Event): void;
     /**
      * Support CMS5 click action for the image.
      */
@@ -317,6 +339,7 @@ export default class CxSbImage extends CxImage {
      */
     private recoverExpiredSources;
     private recoverExpiredSource;
+    private get renderedSrc();
     protected renderContent(): TemplateResult;
     render(): TemplateResult;
 }

package/library/packages/organisms/src/content-builder/components/block-picker/block-picker.d.ts

@@ -1,8 +1,12 @@
 import { default as CxCard } from '../../../../../atoms/src/components/card/card.ts';
 import { default as CxDialog } from '../../../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxDropdown } from '../../../../../atoms/src/components/dropdown/dropdown.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 CxIcon } from '../../../../../atoms/src/components/icon/icon.ts';
 import { default as CxLineClamp } from '../../../../../atoms/src/components/line-clamp/line-clamp.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 CxResizeObserver } from '../../../../../atoms/src/components/resize-observer/resize-observer.ts';
 import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
 import { default as CxSpinner } from '../../../../../atoms/src/components/spinner/spinner.ts';
@@ -11,6 +15,14 @@ import { default as CortexElement } from '../../../../../base/src/cortex-element
 import { BlockType } from '../../../../../types/src/content-builder';
 import { Component } from 'grapesjs';
 
+type BlockItem = {
+    description: string;
+    disabled: boolean;
+    displayName: string;
+    id: string;
+    name: string;
+    representative: string;
+};
 export type CxContentBuilderBlockSelectEvent = CustomEvent<{
     amount?: number;
     index?: number;
@@ -34,9 +46,13 @@ export default class CxBlockPicker extends CortexElement {
     static readonly dependencies: {
         'cx-card': typeof CxCard;
         'cx-dialog': typeof CxDialog;
+        'cx-dropdown': typeof CxDropdown;
         'cx-grid': typeof CxGrid;
         'cx-grid-item': typeof CxGridItem;
+        'cx-icon': typeof CxIcon;
         'cx-line-clamp': typeof CxLineClamp;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
         'cx-resize-observer': typeof CxResizeObserver;
         'cx-space': typeof CxSpace;
         'cx-spinner': typeof CxSpinner;
@@ -52,14 +68,7 @@ export default class CxBlockPicker extends CortexElement {
      * The `representative` image is displayed in the card.
      * The `disabled` state indicates whether the block is selectable or not.
      */
-    blocks: Array<{
-        description: string;
-        disabled: boolean;
-        displayName: string;
-        id: string;
-        name: string;
-        representative: string;
-    }>;
+    blocks: BlockItem[];
     /**
      * The templates available for selection.
      * Each template should have a unique `id`, a `name`, a `description`, a `representative` image URL, and a `type`.
@@ -120,9 +129,15 @@ export default class CxBlockPicker extends CortexElement {
     get blockName(): string;
     private resetState;
     private handleBlockSelect;
+    private handleVariantSelect;
+    private handleVariantsMouseEnter;
+    private handleVariantsMouseLeave;
+    private emitBlockSelect;
     private handleTemplateSelect;
     private handleCustomBlockSelect;
     private handleClose;
+    private renderBlockCard;
+    private renderBlockCardWithVariants;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {
@@ -134,3 +149,4 @@ declare global {
         'cx-content-builder-template-select': CxContentBuilderTemplateSelectEvent;
     }
 }
+export {};