@orangelogic/design-system 4.2.0 → 4.3.0

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

@@ -186,14 +186,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.
@@ -235,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.
      *

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 {};

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'];