@orangelogic/design-system 4.2.0 → 4.3.0

package/library/packages/molecules/src/details-group/details-group.d.ts

@@ -1,24 +1,126 @@
 import { default as CxDetails } from '../../../atoms/src/components/details/details.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { DetailsItem } from '../../../types/src/details-group';
-import { CSSResultGroup } from 'lit';
+import { IconPickerValue } from '../../../types/src/icon-picker';
+import { CSSResultGroup, TemplateResult } from 'lit';
 
 /**
- * @summary CxDetailsGroup
+ * @summary Renders an accordion from a list of items, exposing each section's look as CSS custom properties.
+ *
+ * @description Every custom property below sets the look of all sections. A single section can
+ * override the header colors, border, background image and icons by carrying its own values on
+ * the item — see `DetailsItem` — which take effect once that item sets `customStyle`.
+ *
+ * @slot slot-{id} - The content for the section with the matching `id`.
  *
  * @cssproperty --details-background-color - The background color of the details.
+ * @cssproperty [--details-background-image=none] - A section's background image, covering the whole section so expanding it reveals more. Set per section from a `background` field on the item.
+ * @cssproperty [--details-background-size=cover] - How the section background image fills the section.
+ * @cssproperty [--details-background-position=top center] - Which part of the section background image stays in view.
+ * @cssproperty [--details-border-radius=var(--header-border-radius)] - A section's corner radius, which its background is clipped to. Follows the header's radius unless set.
+ * @cssproperty [--row-gap=var(--cx-spacing-medium)] - The gap between sections.
+ * @cssproperty [--header-padding=var(--cx-spacing-small)] - A section header's padding.
+ * @cssproperty [--section-body-max-width=100%] - Caps the width of a section's title and icon, centring them, while the header background still spans the section. Accepts px or %, and the `section-body-max-width` attribute sets it. Set it to the width of the section's body content so the two line up — most useful on a full-bleed accordion.
+ * @cssproperty [--expand-icon-width=var(--cx-font-size-large)] - The width of a closed section's icon. The height scales with it.
+ * @cssproperty [--hover-icon-width=var(--cx-font-size-large)] - The width of the icon shown while hovering a closed section. The height scales with it.
+ * @cssproperty [--collapse-icon-width=var(--cx-font-size-large)] - The width of an open section's icon. The height scales with it.
+ * @cssproperty [--header-border-radius=var(--cx-border-radius-small)] - A section header's border radius.
+ * @cssproperty --header-background-color - A section header's background color.
+ * @cssproperty --header-color - A section header's text and icon color.
+ * @cssproperty --header-border - A section header's border, as a `<color> <width>` pair.
+ * @cssproperty [--header-hover-background-color=var(--header-background-color)] - A closed section header's background color on hover.
+ * @cssproperty [--header-hover-color=var(--header-color)] - A closed section header's text and icon color on hover.
+ * @cssproperty [--header-hover-border=var(--header-border)] - A closed section header's border on hover.
+ * @cssproperty --header-active-background-color - An open section header's background color.
+ * @cssproperty --header-active-color - An open section header's text and icon color.
+ * @cssproperty --header-active-border - An open section header's border.
+ * @cssproperty [--header-font-size=var(--cx-font-size-large)] - A section header's font size.
+ * @cssproperty [--header-line-height=1.2] - A section header's line height, as a ratio of its font size.
+ * @cssproperty --header-font-family - A section header's font family.
+ * @cssproperty --header-font-style - A section header's font style.
+ * @cssproperty --header-font-weight - A section header's font weight.
+ * @cssproperty --content-padding - A section's content padding.
+ * @cssproperty [--content-font-size=var(--cx-font-size-medium)] - A section's content font size.
+ * @cssproperty [--empty-height=200px] - The height reserved when there are no sections.
  */
 export default class CxDetailsGroup extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-details': typeof CxDetails;
+        'cx-icon': typeof CxIcon;
     };
+    /** Attempts per background image, matching `cx-image`'s cap. */
+    private static readonly maxBackgroundRetries;
+    /**
+     * Reads an icon-picker value, stored as JSON. Only an unreadable one (empty or
+     * unparseable, as older blocks store it) takes `fallback` — so the empty payload the
+     * picker writes when cleared means "no icon", not "use the default".
+     */
+    private static createIconConverter;
     private readonly localize;
+    /** Background URLs already probed, so a re-render does not start a second attempt. */
+    private readonly probedBackgrounds;
+    /** How many times each background URL has been retried, against `maxBackgroundRetries`. */
+    private readonly backgroundRetryCounts;
+    /** Pending retry timers, cleared on disconnect. */
+    private readonly backgroundRetryTimers;
     data: DetailsItem[];
     defaultOpenIndexes?: number[];
     multiLanguage: boolean;
+    /**
+     * Caps the width of every section's title row, in px or %. Sets
+     * `--section-body-max-width`, so this is the attribute form of that custom property -
+     * which is what the content builder writes - and styling it directly still works.
+     */
+    sectionBodyMaxWidth: string;
+    /** The icon shown on a closed section. */
+    expandIcon: IconPickerValue | null;
+    /** The icon shown while hovering a closed section. Defaults to the closed icon. */
+    hoverIcon: IconPickerValue | null;
+    /** The icon shown on an open section. */
+    collapseIcon: IconPickerValue | null;
+    /** Cache-bust token per URL. Reactive: changing it is what re-points the CSS background. */
+    private backgroundRetryTokens;
     runFirstUpdated(): void;
-    render(): import('lit').TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Probes each background so a failed load can be retried. A CSS background reports no
+     * error of its own, so the only way to notice one is to load the same URL separately —
+     * normally served from cache.
+     */
+    handleBackgroundProbes(): void;
+    /** Loads a background out of band to see whether it resolves. Once per attempt. */
+    private probeBackground;
+    /**
+     * Re-points the background at a fresh URL after a backoff. Delay and cache-bust mirror
+     * `cx-image`: spread the attempts, and bypass an edge caching the failed response.
+     */
+    private scheduleBackgroundRetry;
+    /** Appends the retry cache-bust parameter while an attempt is in flight. */
+    private withBackgroundRetryToken;
+    /**
+     * The URL a background renders from, transformations applied. Shared with the probe so a
+     * retry tests what the CSS actually requests.
+     */
+    private resolveBackgroundSrc;
+    /**
+     * A section's own icon wins over the group's. Only an unset field inherits — a cleared one
+     * is a choice to show nothing.
+     */
+    private resolveIcon;
+    /**
+     * Turns a section's overrides into a style map of the CSS custom properties `cx-details`
+     * reads. Returns nothing while `customStyle` is off, so the group's look applies.
+     */
+    private resolveSectionStyle;
+    /**
+     * Renders the icon, or a hidden node that still fills the slot — `cx-details` falls back to
+     * its own chevron on an empty slot, so filling it is what makes "cleared" render nothing.
+     */
+    private renderIconSlot;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -196,6 +196,11 @@ export default class CxDynamicSelect extends CortexElement {
      * The name of the icon to use for the prefix.
      */
     iconName: string;
+    /**
+     * Image source for the prefix icon, for picked images rather than named
+     * icons. Takes effect through cx-icon-button's own `src`.
+     */
+    iconSrc: string;
     /**
      * When set to true, the select will not show the dropdown.
      */

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

@@ -58,10 +58,13 @@ export default class CxFontPicker extends CortexElement {
     private get allTypefaces();
     private get selectedTypeface();
     private get availableFamilies();
+    /** An upright run then an italic one, each by ascending weight. */
+    private get groupedFamilies();
     private handleFamilyChange;
     private handleStyleChange;
     private renderTypefaceOptions;
     private renderFamilySelect;
+    private renderStyleOptions;
     private renderStyleSelect;
     render(): TemplateResult;
 }

package/library/packages/molecules/src/gallery-item/gallery-item.d.ts

@@ -3,6 +3,7 @@ import { default as HighlightableElement } from '../../../base/src/highlightable
 import { default as CxAssetDataDisplay } from '../asset-data-display/asset-data-display.ts';
 import { ObjectFit } from '../../../types/src/index.ts';
 import { GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemShowContentType } from '../../../types/src/gallery-item';
+import { PositionPickerValue } from '../../../types/src/position-picker';
 import { LocalizeController } from '../../../utils/src/custom-element/i18n';
 import { CSSResultGroup } from 'lit';
 
@@ -107,6 +108,15 @@ export default class CxGalleryItem extends HighlightableElement {
      * The object fit style for the image.
      */
     objectFit: ObjectFit;
+    /**
+     * The focal point used to position the image within its container.
+     */
+    cropFocus: PositionPickerValue;
+    /**
+     * The background color shown behind the image, e.g. to fill empty space
+     * left by `object-fit: contain`. Accepts any valid CSS color value.
+     */
+    backgroundColor: string;
     /**
      * When true, forwards `no-crossorigin` to the inner `<cx-image>`, disabling CORS mode.
      * Defaults to false (the image loads with `crossorigin="anonymous"`).

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

@@ -33,7 +33,6 @@ export { default as CxPageOutline } from './page-outline/page-outline';
 export { default as CxPdfViewerToolbar } from './pdf-viewer-toolbar/pdf-viewer-toolbar';
 export { default as CxPositionPicker } from './position-picker/position-picker';
 export { default as CxPublishPage } from './publish-page/publish-page';
-export { default as CxSearchBox } from './search-box/search-box';
 export { default as CxShadowInputGroup } from './shadow-input-group/shadow-input-group';
 export { default as CxShareOptionList } from './share-option-list/share-option-list';
 export { default as CxSidebar } from './sidebar/sidebar';

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

@@ -105,6 +105,11 @@ export default class CxMasonry extends CortexElement {
     private get itemSizes();
     handleItemClick(event: MouseEvent, item: MasonryItem): void;
     handleSortableUpdate(event: Sortable.SortableEvent): void;
+    /**
+     * An item without an image gets a browser-made drag preview that lands in the
+     * viewport corner. Use the item itself as the preview so it follows the cursor.
+     */
+    handleSetData(dataTransfer: DataTransfer, dragEl: HTMLElement): void;
     renderActions(item: MasonryItem): import('lit').TemplateResult<1>;
     renderMasonry(): import('lit').TemplateResult<1>;
     renderStandard(): import('lit').TemplateResult<1>;

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

@@ -1,60 +1,52 @@
 import { CellComponent } from '../../../hybrid/table-core/src/index.ts';
+import { ColorSwatchCustomColumn } from '../../../types/src/color-swatch-group';
 import { LocalizeController } from '../../../utils/src/custom-element/i18n';
 
 export declare const MIN_WIDTH_GRID_ITEM = 165;
-export declare const validCodes: string[];
+export declare const validCodes: Set<string>;
+export declare const validElements: Set<string>;
 export declare const columnDefaults: {
     resizable: boolean;
 };
 /**
- * A single "Name" column that renders the color swatch and the name together,
- * so the "Name" header spans the whole column instead of truncating inside a
- * narrow swatch-only column.
+ * The column shape this component feeds to `cx-table`. Kept local (rather than
+ * Tabulator's full `ColumnDefinition`) because only these fields are used.
+ *
+ * The definitions below deliberately carry no `width` / `widthGrow` / `minWidth`
+ * / `maxWidth`: those belong to the block's per-column Width mode and
+ * Constraints settings, and `applyColumnSettings` fills them in. A leftover
+ * `widthGrow` here would make "Fill container" columns take unequal shares,
+ * since `fitColumns` distributes free space in proportion to it.
  */
-export declare const nameColumn: {
+export type ColorSwatchColumn = {
     field: string;
-    formatter: (cell: CellComponent) => HTMLDivElement;
+    formatter?: (cell: CellComponent) => HTMLElement | null;
     headerHozAlign: string;
     headerSort: boolean;
     hozAlign: string;
+    maxWidth?: number;
+    minWidth?: number;
+    responsive?: number;
     title: string;
-    widthGrow: number;
+    width?: number;
+    widthGrow?: number;
 };
-export declare const codeColumns: ({
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    minWidth: number;
-    title: string;
-    responsive?: undefined;
-    widthGrow?: undefined;
-} | {
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    responsive: number;
-    title: string;
-    widthGrow: number;
-    minWidth?: undefined;
-})[];
-export declare const copyableCodeColumns: (localize: LocalizeController, palette: string) => ({
-    field: string;
-    formatter: (cell: any) => HTMLElement | null;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    minWidth: number;
-    title: string;
-    widthGrow?: undefined;
-} | {
-    field: string;
-    formatter: (cell: any) => HTMLElement | null;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    title: string;
-    widthGrow: number;
-    minWidth?: undefined;
-})[];
+/**
+ * A single "Name" column that renders the color swatch and the name together,
+ * so the "Name" header spans the whole column instead of truncating inside a
+ * narrow swatch-only column.
+ */
+export declare const nameColumn: ColorSwatchColumn;
+export declare const codeColumns: ColorSwatchColumn[];
+export declare const copyableCodeColumns: (localize: LocalizeController, palette: string) => ColorSwatchColumn[];
+/**
+ * The `cx-table` column for one author-declared custom column.
+ *
+ * Reads a flat field rather than `metadata.<id>`: the component flattens each
+ * row first, keeping Tabulator away from nested-path lookups. Font overrides
+ * fall back to the block's Content group, so a column created without
+ * presentation settings matches the built-in code columns.
+ */
+export declare function customColumn(column: ColorSwatchCustomColumn): ColorSwatchColumn;
+/** The flat row key a custom column's value is copied to before rendering. */
+export declare function customColumnField(id: string): string;

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