@orangelogic/design-system 3.20.0 → 3.22.0

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

@@ -3,6 +3,7 @@ import { default as CxColorPicker } from '../../../../../atoms/src/components/co
 import { default as CxDialog } from '../../../../../atoms/src/components/dialog/dialog.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 CxIconButton } from '../../../../../atoms/src/components/icon-button/icon-button.ts';
 import { default as CxInput } from '../../../../../atoms/src/components/input/input.ts';
 import { default as CxOption } from '../../../../../atoms/src/components/option/option.ts';
@@ -13,6 +14,7 @@ import { default as CxTypography } from '../../../../../atoms/src/components/typ
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { default as CxTable } from '../../../../../hybrid/table-core/src/index.ts';
 import { ColorSwatchData } from '../../../../../types/src/color-swatch';
+import { ColorSwatchCustomColumn } from '../../../../../types/src/color-swatch-group';
 
 export type CxContentBuilderColorSwatchSelectEvent = CustomEvent<ColorSwatchData | ColorSwatchData[]>;
 export type CxContentBuilderColorSwatchDeleteEvent = CustomEvent<void>;
@@ -34,6 +36,7 @@ export default class CxColorSwatchPicker extends CortexElement {
         'cx-dialog': typeof CxDialog;
         'cx-grid': typeof CxGrid;
         'cx-grid-item': typeof CxGridItem;
+        'cx-icon': typeof CxIcon;
         'cx-icon-button': typeof CxIconButton;
         'cx-input': typeof CxInput;
         'cx-option': typeof CxOption;
@@ -68,6 +71,15 @@ export default class CxColorSwatchPicker extends CortexElement {
      * The default language of the content builder.
      */
     defaultLanguage: string;
+    /**
+     * The block's custom columns, one labelled input each in the color dialog.
+     */
+    customColumns: ColorSwatchCustomColumn[];
+    /**
+     * Shows the Meta data section. Off by default: a metadata field is a table
+     * column, which only the Table variant renders.
+     */
+    showMetadata: boolean;
     /**
      * The type of dialog to open since it can be either add new or edit from row selection.
      */
@@ -104,14 +116,34 @@ export default class CxColorSwatchPicker extends CortexElement {
      * The PMS color value.
      */
     private dialogPmsId;
+    /** Typed filter text, in state so the list re-renders as you type. */
+    private searchTerm;
+    /**
+     * Mounts the list only while the listbox is open: a virtualizer created
+     * against a hidden, zero-height parent settles on an empty range and stays
+     * blank, so it has to wait for `cx-after-show`.
+     */
+    private showVirtualizer;
     /**
      * The color value.
      */
     private dialogColor;
+    /**
+     * The value the edited color holds for each declared custom column, keyed by
+     * column id.
+     */
+    private dialogMetadata;
+    /**
+     * Free-form metadata rows added this session, before they become declared
+     * columns. Each carries the id it will be stored under, so renaming a row
+     * keeps the value already typed.
+     */
+    private dialogExtraFields;
     /**
      * The palettes of current color swatches.
      */
     private palettes;
+    constructor();
     get tabs(): TabType[];
     /**
      * Opens the add color dialog.
@@ -127,7 +159,19 @@ export default class CxColorSwatchPicker extends CortexElement {
      */
     private resetDialogState;
     /**
-     * Finishes the dialog and emits the event.
+     * Splits the named free-form rows into the ones that reuse an existing column
+     * and the ones that declare a new one.
+     *
+     * A typed name that matches a declared column writes into that column rather
+     * than declaring a second one with the same title: two identical headers would
+     * leave the original empty for this color and the value stranded under a new
+     * id. Matched case-insensitively on the trimmed name, the same comparison the
+     * Custom columns list editor rejects duplicates with.
+     */
+    private resolveExtraFields;
+    /**
+     * Finishes the dialog and emits the event. Columns go first, so the color's
+     * new values already have a column to be rendered in.
      */
     private handleFinishDialog;
     /**
@@ -148,6 +192,31 @@ export default class CxColorSwatchPicker extends CortexElement {
     private handleChangeRgb;
     private handleChangeCmyk;
     private handleChangePms;
+    /** The Pantone table minus the pinned colour, narrowed by `searchTerm`. */
+    private get virtualListItems();
+    private handleSelectShow;
+    private handleSelectHide;
+    /** `cx-select` keeps the typed text private, so it is read off the event. */
+    private handleSelectInput;
+    /** Nothing is slotted while the listbox is closed, so the label comes from state. */
+    private selectGetOptionLabel;
+    /**
+     * The selected colour, pinned above the list: a virtualized row thousands of
+     * places down cannot be scrolled to without emptying the rendered range.
+     */
+    private renderPinnedPmsOption;
+    /** The item is undefined while a narrowing filter outruns the rendered range. */
+    private renderPmsOption;
+    private handleChangeMetadata;
+    private handleAddMetadataField;
+    private handleChangeExtraField;
+    private handleDeleteExtraField;
+    /**
+     * The Meta data section: one labelled input per custom column, plus free-form
+     * Name / Value rows. Naming a free-form row declares a column for every color
+     * — the block is a table — hence the columns event on save.
+     */
+    private renderMetadataControls;
     /**
      * Re-emit dynamic events from the table.
      */

package/library/packages/organisms/src/content-builder/components/config-form/config-form-controller.d.ts

@@ -6,35 +6,14 @@ import { TabType } from './config-form';
 export declare class ConfigFormController implements ReactiveController {
     host: ReactiveControllerHost & CxConfigForm;
     private readonly localize;
-    private apiSearchAssets;
-    private apiGetTeamSpaceFontFamily;
-    private readonly pendingGalleryPickerSaves;
-    private readonly fontFamiliesCache;
-    private readonly pendingFontFamilyFetches;
-    private readonly typeSubtypeOptionsCache;
-    private readonly pendingTypeSubtypeOptionsFetches;
+    private readonly controlRenderer;
     constructor(host: ReactiveControllerHost & CxConfigForm);
     hostConnected(): void;
-    /**
-     * Resolves the delivery URL to persist for an asset under a given format.
-     *
-     * A blank `format` means `Auto`, which is what a reset leaves behind: the proxy is then
-     * derived from the asset's own extension and size (`resolveAutoFormat`), matching what
-     * the block computes at runtime. Without this the reset would keep whichever URL the
-     * previous hand-picked format wrote.
-     *
-     * `TRX` proxies preserve the asset's original extension. When that extension is not a
-     * browser-displayable image format, fall back to the `TR1` transformation proxy, which is
-     * always transcoded to a raster format. Mirrors the same fallback in `FetchImageController`
-     * (used by the gallery/timeline blocks) and `cx-asset-transformation-dialog`.
-     */
-    private resolveAssetFormatSrc;
     private handleStyleChange;
     private handleAttributeChange;
     private handlePropertyChange;
     private handleConfigChange;
     private renderInfoText;
-    private renderControl;
     private renderBasicControl;
     renderBasicControls(configs: PropertyConfig[], parent?: PropertyConfig, tab?: TabType): TemplateResult<1>;
     renderTranslationControls(): TemplateResult<1>;

package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts

@@ -216,6 +216,13 @@ export default class CxConfigManager extends CortexElement {
     private getFlattenTraits;
     handleTraitsChange(): Promise<void>;
     handleComponentChange(): Promise<void>;
+    /**
+     * The variants of the font kit the block sits in, if any — the config
+     * manager is the only layer holding the GrapesJS component, so it is the
+     * only place that can reach the kit's resolved typefaces. Absent means the
+     * block has no container resolving a font for it.
+     */
+    private getContainerFontVariants;
     private handleSave;
     private handleClose;
     show(): Promise<void>;

package/library/packages/organisms/src/content-builder/components/gallery-config/gallery-config.d.ts

@@ -11,8 +11,10 @@ import { default as CxSpace } from '../../../../../atoms/src/components/space/sp
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { default as CxAssetPicker } from '../../../../../molecules/src/asset-picker/asset-picker.ts';
+import { default as CxBicolorPicker } from '../../../../../molecules/src/bicolor-picker/bicolor-picker.ts';
 import { default as CxDynamicSelect } from '../../../../../molecules/src/dynamic-select/dynamic-select.ts';
 import { default as CxFolderSelect } from '../../../../../molecules/src/folder-select/folder-select.ts';
+import { default as CxPositionPicker } from '../../../../../molecules/src/position-picker/position-picker.ts';
 import { Asset, AssetTypeString, DialogType } from '../../../../../types/src/content-builder';
 import { Image } from '../../../../../types/src/gallery-config';
 import { GalleryItemCardType } from '../../../../../types/src/gallery-item';
@@ -31,6 +33,7 @@ export default class CxGalleryConfig extends CortexElement {
     static readonly styles: import('lit').CSSResult[];
     static readonly dependencies: {
         'cx-asset-picker': typeof CxAssetPicker;
+        'cx-bicolor-picker': typeof CxBicolorPicker;
         'cx-button': typeof CxButton;
         'cx-checkbox': typeof CxCheckbox;
         'cx-dialog': typeof CxDialog;
@@ -41,6 +44,7 @@ export default class CxGalleryConfig extends CortexElement {
         'cx-grid': typeof CxGrid;
         'cx-grid-item': typeof CxGridItem;
         'cx-input': typeof CxInput;
+        'cx-position-picker': typeof CxPositionPicker;
         'cx-radio': typeof CxRadio;
         'cx-radio-group': typeof CxRadioGroup;
         'cx-space': typeof CxSpace;
@@ -98,6 +102,8 @@ export default class CxGalleryConfig extends CortexElement {
     private handleAssetSelect;
     private handleAssetDelete;
     private handleObjectFitChange;
+    private handleCropFocusChange;
+    private handleBackgroundColorChange;
     private handleOpenInNewTabChange;
     private handleFolderChange;
     private handleFolderDelete;

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

@@ -74,6 +74,7 @@ export default class CxGalleryPicker extends CortexElement implements CortexForm
     loading: boolean;
     masonryData: Array<{
         alt?: string;
+        backgroundColor?: string;
         extension?: string;
         id: string;
         rawId?: string;

package/library/packages/organisms/src/content-builder/configs/accordion.d.ts

@@ -2,10 +2,17 @@ import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-bu
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attributes = {
+    'collapse-icon': string;
     data: string;
     'data-constraints': boolean;
+    'data-content-width-percent': string;
+    'data-content-width-pixel': string;
     'default-open-indexes': string;
+    'expand-icon': string;
+    'full-bleed': boolean;
+    'hover-icon': string;
     'multi-language': boolean;
+    'section-body-max-width': string;
 };
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;

package/library/packages/organisms/src/content-builder/configs/audio.d.ts

@@ -9,6 +9,7 @@ type Attribute = {
     'data-width-pixel': string;
     'format'?: string;
     'format-src'?: string;
+    'full-bleed': boolean;
     name: CxSbAudio['name'];
     'parent-record-id'?: string;
     'record-id'?: string;

package/library/packages/organisms/src/content-builder/configs/button.d.ts

@@ -1,5 +1,6 @@
 import { ButtonSize, ButtonWidthType } from '../../../../types/src/button';
 import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
+import { ButtonAppearance } from '../../../../types/src/sb-button';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { default as CxSbButton } from '../blocks/button/button';
 
@@ -25,7 +26,7 @@ type Attributes = {
     size: string;
     target: string;
     type: string;
-    variant: string;
+    variant: ButtonAppearance;
     'width-type': ButtonWidthType;
 };
 declare const _default: {

package/library/packages/organisms/src/content-builder/configs/carousel.d.ts

@@ -1,7 +1,9 @@
-import { Easing, TransitionType } from '../../../../types/src/index.ts';
+import { Easing, ObjectFit, TransitionType } from '../../../../types/src/index.ts';
 import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { ContentType, SourceVariant } from '../../../../types/src/gallery';
 import { GalleryItemCardType, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../../types/src/gallery-item';
+import { PositionPickerValue } from '../../../../types/src/position-picker';
+import { HeightMode } from '../../../../types/src/resizable-element';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attributes = {
@@ -16,12 +18,19 @@ type Attributes = {
     'content-type': ContentType;
     'content-variant': GalleryItemContentVariant;
     'data-constraints': boolean;
+    'data-width-percent': string;
+    'data-width-pixel': string;
+    'default-crop-focus': PositionPickerValue;
+    'default-object-fit': ObjectFit;
     'details-source-field': string;
     'download-format': string;
     easing: Easing;
     effect: GalleryItemEffect;
     format: string;
+    'full-bleed': boolean;
     'header-source-field': string;
+    height: string;
+    'height-mode': HeightMode;
     'highlight-border': boolean;
     'highlight-color-overlay': boolean;
     'highlight-drop-shadow': boolean;
@@ -41,6 +50,7 @@ type Attributes = {
     transformations: string;
     'transition-type': TransitionType;
     variant: string;
+    width: string;
     'zoom-style': GalleryItemZoomStyle;
 };
 declare const _default: {

package/library/packages/organisms/src/content-builder/configs/color-swatches.d.ts

@@ -1,14 +1,32 @@
-import { CxColorSwatchGroupVariant } from '../../../../types/src/color-swatch-group';
+import { CxColorSwatchCodeAlignment, CxColorSwatchCodeSeparator, CxColorSwatchHexFormat } from '../../../../types/src/color-swatch';
+import { CxColorSwatchGroupColumnAlignment, CxColorSwatchGroupColumnWidthMode, CxColorSwatchGroupVariant } from '../../../../types/src/color-swatch-group';
 import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attribute = {
     'can-copy': boolean;
     'can-custom-shadow-and-border-radius': boolean;
+    'code-alignment': CxColorSwatchCodeAlignment;
+    'code-column-alignment': CxColorSwatchGroupColumnAlignment;
+    'code-column-constraints': boolean;
+    'code-column-max-width': string;
+    'code-column-min-width': string;
+    'code-column-width-mode': CxColorSwatchGroupColumnWidthMode;
+    'code-separator': CxColorSwatchCodeSeparator;
+    'custom-columns': string;
     data: string;
+    'full-bleed': boolean;
+    'gradient-effect': boolean;
+    'hex-format': CxColorSwatchHexFormat;
     'max-col': string;
     'multi-language': boolean;
+    'name-column-alignment': CxColorSwatchGroupColumnAlignment;
+    'name-column-constraints': boolean;
+    'name-column-max-width': string;
+    'name-column-min-width': string;
+    'name-column-width-mode': CxColorSwatchGroupColumnWidthMode;
     'show-codes': string;
+    'show-elements': string;
     variant: CxColorSwatchGroupVariant;
 };
 declare const _default: {

package/library/packages/organisms/src/content-builder/configs/column-group.d.ts

@@ -1,13 +1,22 @@
 import { ColumnWidthType } from '../../../../types/src/column';
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { default as CxColumnGroup } from '../blocks/column-group/column-group';
 
 type Attributes = {
+    'background-crop-focus': CxColumnGroup['backgroundCropFocus'];
+    'background-format': CxColumnGroup['backgroundFormat'];
+    'background-manual-format': CxColumnGroup['backgroundManualFormat'];
+    'background-object-fit': CxColumnGroup['backgroundObjectFit'];
+    'background-record-id': CxColumnGroup['backgroundRecordId'];
+    'background-src': CxColumnGroup['backgroundSrc'];
+    'background-transformations': string;
     'data-constraints': boolean;
+    'full-bleed': boolean;
     'width-type': ColumnWidthType;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;
     defaultValue: Attributes;
     stylable: string[];
 };

package/library/packages/organisms/src/content-builder/configs/column.d.ts

@@ -1,15 +1,25 @@
-import { ColumnWidthType } from '../../../../types/src/column';
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ObjectFit } from '../../../../types/src/index.ts';
+import { ColumnWidthMode, ColumnWidthType } from '../../../../types/src/column';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
+import { PositionPickerValue } from '../../../../types/src/position-picker';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attributes = {
+    'background-crop-focus': PositionPickerValue;
+    'background-format': string;
+    'background-image': string;
+    'background-manual-format': boolean;
+    'background-object-fit': ObjectFit;
+    'background-record-id': string;
+    'background-transformations': string;
     'custom-width': boolean;
     resizable: boolean;
     trigger: string;
+    'width-mode': ColumnWidthMode;
     'width-type': ColumnWidthType;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
     stylable: string[];
 };

package/library/packages/organisms/src/content-builder/configs/dam-view.d.ts

@@ -20,6 +20,7 @@ type Attribute = {
     'expanded-folders': CxSbDamView['expandedFolders'];
     'filter-button-action': CxSbDamView['filterButtonAction'];
     'folder-hierarchy': CxSbDamView['folderHierarchy'];
+    'full-bleed': boolean;
     'highlight-representative-asset': CxSbDamView['highlightRepresentativeAsset'];
     'items-per-page': string;
     'left-additional-filters': CxSbDamView['leftAdditionalFilters'];

package/library/packages/organisms/src/content-builder/configs/divider.d.ts

@@ -2,6 +2,7 @@ import { PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attribute = {
+    'full-bleed': boolean;
     'use-padding': boolean;
 };
 declare const _default: {

package/library/packages/organisms/src/content-builder/configs/document-viewer.d.ts

@@ -7,6 +7,7 @@ type Attribute = {
     'data-width-percent': string;
     'data-width-pixel': string;
     extension: CxSbDocumentViewer['extension'];
+    'full-bleed': boolean;
     height: CxSbDocumentViewer['height'];
     'height-mode': CxSbDocumentViewer['heightMode'];
     identifier: CxSbDocumentViewer['identifier'];

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

@@ -0,0 +1,19 @@
+import { PropertyConfig } from '../../../../types/src/content-builder';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { default as CxFontKitAdvanced } from '../blocks/font-kit-advanced/font-kit-advanced';
+
+type Attributes = {
+    'full-bleed': boolean;
+    name: CxFontKitAdvanced['name'];
+    origin: CxFontKitAdvanced['origin'];
+    'show-dividers': boolean;
+    'show-download-button': boolean;
+    'show-title-image': boolean;
+    typefaces: string;
+};
+declare const _default: {
+    configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
+    defaultValue: Attributes;
+    stylable: string[];
+};
+export default _default;

package/library/packages/organisms/src/content-builder/configs/font-kit.d.ts

@@ -9,7 +9,9 @@ type Attributes = {
     'download-size': CxFontKit['downloadSize'];
     'download-text': CxFontKit['downloadText'];
     'download-width-type': CxFontKit['downloadWidthType'];
+    'full-bleed': boolean;
     'img-alt': CxFontKit['imgAlt'];
+    'img-crop-focus': CxFontKit['imgCropFocus'];
     'img-height-mode': CxFontKit['imgHeightMode'];
     'img-object-fit': CxFontKit['imgObjectFit'];
     name: CxFontKit['name'];

package/library/packages/organisms/src/content-builder/configs/gallery.d.ts

@@ -1,7 +1,8 @@
-import { Easing, Orientation } from '../../../../types/src/index.ts';
+import { Easing, ObjectFit, Orientation } from '../../../../types/src/index.ts';
 import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { ContentType, GalleryVariant, OverflowBehavior, SourceVariant } from '../../../../types/src/gallery';
 import { GalleryItemCardType, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemShowContentType, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../../types/src/gallery-item';
+import { PositionPickerValue } from '../../../../types/src/position-picker';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attribute = {
@@ -16,11 +17,16 @@ type Attribute = {
     'content-position': GalleryItemContentPosition;
     'content-type': ContentType;
     'content-variant': GalleryItemContentVariant;
+    'data-width-percent': string;
+    'data-width-pixel': string;
+    'default-crop-focus': PositionPickerValue;
+    'default-object-fit': ObjectFit;
     'details-source-field': string;
     'download-format': string;
     easing: Easing;
     effect: GalleryItemEffect;
     format: string;
+    'full-bleed': boolean;
     'header-source-field': string;
     'highlight-background': boolean;
     'highlight-border': boolean;
@@ -31,6 +37,7 @@ type Attribute = {
     'large-content-position': GalleryItemContentPosition;
     'manual-format'?: boolean;
     'max-rows': string;
+    'max-rows-mobile': string;
     navigation: 'both' | 'arrows' | 'pagination';
     orientation: Orientation;
     'overflow-behavior': OverflowBehavior;
@@ -46,8 +53,15 @@ type Attribute = {
     'transformation-record-id': string;
     transformations: string;
     variant: GalleryVariant;
+    width: string;
     'zoom-style': GalleryItemZoomStyle;
 };
+/**
+ * Default rows for desktop and tablet. Also the value the mobile backfill uses
+ * when a block saved before `max-rows-mobile` existed has no `max-rows` of its
+ * own to inherit.
+ */
+export declare const DEFAULT_MAX_ROWS = "2";
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
     defaultValue: Partial<Attribute>;

package/library/packages/organisms/src/content-builder/configs/header.d.ts

@@ -8,13 +8,15 @@ type Attribute = {
     'data-constraints': boolean;
     'disabled-copy-button': boolean;
     'font-size': string;
+    'font-size-desktop': string;
+    'font-size-tablet': string;
     'has-anchor-link': boolean;
     role: string;
     variant: Variant;
 };
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
-    defaultValue: Attribute;
+    defaultValue: Partial<Attribute>;
     stylable: string[];
 };
 export default _default;

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

@@ -5,12 +5,15 @@ import { default as CxImage } from '../blocks/image/image';
 type Attribute = {
     'additional-fields': string;
     'alt-source-field': CxImage['altSourceField'];
+    'aspect-ratio': CxImage['aspectRatio'];
+    'aspect-ratio-dark-mode': CxImage['aspectRatioDarkMode'];
     'click-action': CxImage['clickAction'];
     'click-link'?: CxImage['clickLink'];
     'click-page'?: CxImage['clickPage'];
     'click-space'?: CxImage['clickSpace'];
     'content-position': CxImage['contentPosition'];
     'content-type': CxImage['contentType'];
+    'crop-focus': CxImage['cropFocus'];
     'data-constraints': boolean;
     'data-content-width-percent': string;
     'data-content-width-pixel': string;
@@ -25,6 +28,7 @@ type Attribute = {
     effect: CxImage['effect'];
     format: CxImage['format'];
     'format-dark-mode': CxImage['formatDarkMode'];
+    'full-bleed': boolean;
     'header-source-field': CxImage['headerSourceField'];
     height: CxImage['height'];
     'height-mode': CxImage['heightMode'];

package/library/packages/organisms/src/content-builder/configs/index.d.ts

@@ -9,6 +9,7 @@ export { default as damView } from './dam-view';
 export { default as divider } from './divider';
 export { default as documentViewer } from './document-viewer';
 export { default as fontKit } from './font-kit';
+export { default as fontKitAdvanced } from './font-kit-advanced';
 export { default as gallery } from './gallery';
 export { default as header } from './header';
 export { default as analytics } from './analytics';

package/library/packages/organisms/src/content-builder/configs/search-box.d.ts

@@ -1,15 +1,19 @@
-import { default as CxSearchBox } from '../../../../molecules/src/search-box/search-box.ts';
+import { default as CxSearchBox } from '../blocks/search-box/search-box.ts';
 import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { SearchBoxWidthType } from '../../../../types/src/search-box';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attribute = {
+    appearance: CxSearchBox['appearance'];
     'can-search-by-icon': CxSearchBox['canSearchByIcon'];
+    'data-icon-name': string;
     label: CxSearchBox['label'];
     placeholder: CxSearchBox['placeholder'];
     size: CxSearchBox['size'];
     'width-type': SearchBoxWidthType;
 };
+/** The icon picker stores its value as JSON, so the default has to match. */
+export declare const DEFAULT_ICON_ATTRIBUTE: string;
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;

package/library/packages/organisms/src/content-builder/configs/tab-group.d.ts

@@ -1,19 +1,22 @@
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { TabGroupAlignment, TabGroupHidePanelVariant, TabGroupOverflowVariant } from '../../../../types/src/tab-group';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
-type Attribute = {
+type Attributes = {
     data: string;
     'data-constraints': boolean;
+    'full-bleed': boolean;
     'hide-panel-variant': TabGroupHidePanelVariant;
     'multi-language': boolean;
     'overflow-variant': TabGroupOverflowVariant;
+    'show-bottom-line': boolean;
     'tab-alignment': TabGroupAlignment;
+    'tab-border-sides': string;
     'use-max-panel-height': boolean;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
-    defaultValue: Attribute;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;
+    defaultValue: Attributes;
     stylable: string[];
 };
 export default _default;

package/library/packages/organisms/src/content-builder/configs/timeline.d.ts

@@ -4,6 +4,7 @@ import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 type Attributes = {
     data: string;
     format: string;
+    'full-bleed': boolean;
     'manual-format'?: boolean;
     'min-tab-width': string;
     'multi-language': boolean;

package/library/packages/organisms/src/content-builder/configs/video.d.ts

@@ -14,6 +14,7 @@ type Attribute = {
     'click-space'?: CxVideo['clickSpace'];
     'content-position': CxVideo['contentPosition'];
     'content-type': CxVideo['contentType'];
+    'crop-focus': CxVideo['cropFocus'];
     'data-constraints': boolean;
     'data-content-width-percent': string;
     'data-content-width-pixel': string;
@@ -26,6 +27,7 @@ type Attribute = {
     'download-src'?: CxVideo['downloadSrc'];
     'format': string;
     'format-src': string;
+    'full-bleed': boolean;
     'header-source-field': CxVideo['headerSourceField'];
     height: CxVideo['height'];
     'height-mode': CxVideo['heightMode'];
@@ -33,6 +35,7 @@ type Attribute = {
     'manual-thumbnail-format'?: boolean;
     name: CxVideo['name'];
     'name-source-field': CxVideo['nameSourceField'];
+    'object-fit': CxVideo['objectFit'];
     'open-in-new-tab'?: CxVideo['openInNewTab'];
     'page-url'?: CxVideo['pageUrl'];
     poster: CxVideo['poster'];