@orangelogic/design-system 2.96.0 → 2.97.0

package/library/package.json

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

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

@@ -29,7 +29,7 @@ import { default as CxSpace } from '../space/space';
  * @cssproperty --border - The border of the image.
  *
  * @event cx-load - Emitted when the image has loaded.
- * @event cx-error - Emitted when the image has failed to load.
+ * @event cx-error - Emitted when the image has failed to load (after all retry attempts when `retry-on-error` is enabled).
  * @event cx-image-zoom-open - Emitted when the image zoom is opened.
  * @event cx-image-zoom-close - Emitted when the image zoom is closed.
  *
@@ -49,8 +49,12 @@ export default class CxImage extends ResizableElement {
     imageElement?: HTMLImageElement;
     zoomImageElement: HTMLImageElement;
     highlighterElement: HTMLDivElement;
+    private _retryCount;
+    private _retryTimer;
     isLoaded: boolean;
     isError: boolean;
+    /** Incremented on each retry attempt to force the img element to remount via keyed(). */
+    private _retryIndex;
     /**
      * The path to the image to load.
      */
@@ -97,6 +101,14 @@ export default class CxImage extends ResizableElement {
      * - manual: The click handler is manually handled by the parent element.
      */
     clickHandlerType: ClickHandlerType;
+    /**
+     * When true, automatically retries loading the image on error before showing the fallback.
+     */
+    retryOnError: boolean;
+    /**
+     * Maximum number of retry attempts when `retry-on-error` is enabled.
+     */
+    maxRetries: number;
     /**
      * Indicates whether the image is currently zoomed.
      */
@@ -145,6 +157,8 @@ export default class CxImage extends ResizableElement {
     handleCanZoomChange(): Promise<void>;
     handleObjectFitChange(): Promise<void>;
     handleSrcChange(): void;
+    private clearRetryTimer;
+    private scheduleRetry;
     private initZoom;
     protected handleLoad(event: Event): void;
     protected handleError(): void;

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

@@ -205,8 +205,7 @@ export default class CxInput extends CortexElement implements CortexFormControl
     /** Gets the validation message */
     get validationMessage(): string;
     constructor();
-    runConnectedCallback(): void;
-    runFirstUpdated(): void;
+    connectedUpdatedCallback(): void;
     disconnectedCallback(): void;
     initMaskInstance(): Promise<void>;
     private handleBlur;

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

@@ -96,6 +96,7 @@ export default class CxVideo extends ResizableElement {
     videoHeight: number;
     protected autoPlayTimeout: number | null;
     parsedName: string;
+    formattedPoster: string;
     /**
      * The current time of the video.
      */
@@ -130,7 +131,7 @@ export default class CxVideo extends ResizableElement {
     protected addVideoEventListeners(): void;
     protected removeVideoEventListeners(): void;
     attachSeekbar(): void;
-    protected setupVideoJsPlayer(): void;
+    protected setupVideoJsPlayer(src?: string): Promise<void>;
     handleLoopChange(): Promise<void>;
     handleMutedChange(): Promise<void>;
     handleControlsChange(): Promise<void>;
@@ -138,6 +139,7 @@ export default class CxVideo extends ResizableElement {
     handleDisableRemotePlaybackChange(): Promise<void>;
     handleDisableVolumePanelChange(): Promise<void>;
     handlePosterChange(): Promise<void>;
+    handleFormattedPosterChange(): Promise<void>;
     handleSrcChange(): Promise<void>;
     handleParsedNameChange(): Promise<void>;
     private handleSizeChange;

package/library/packages/events/src/cx-asset-format-picker-delete.d.ts

@@ -0,0 +1,6 @@
+export type CxAssetFormatPickerDeleteEvent = CustomEvent<Record<PropertyKey, unknown>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-format-delete': CxAssetFormatPickerDeleteEvent;
+    }
+}

package/library/packages/events/src/cx-asset-format-picker-select.d.ts

@@ -0,0 +1,8 @@
+import { AssetFormatValue } from '../../types/src/asset-format-picker';
+
+export type CxAssetFormatPickerSelectEvent = CustomEvent<AssetFormatValue>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-format-select': CxAssetFormatPickerSelectEvent;
+    }
+}

package/library/packages/events/src/cx-asset-transformation-dialog-cancel.d.ts

@@ -0,0 +1,6 @@
+export type CxAssetTransformationDialogCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-cancel': CxAssetTransformationDialogCancelEvent;
+    }
+}

package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts

@@ -0,0 +1,11 @@
+import { Transformation } from '../../types/src/asset-link-format';
+
+export type CxAssetTransformationDialogConfirmEvent = CustomEvent<{
+    format: string;
+    transformations: Transformation[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-confirm': CxAssetTransformationDialogConfirmEvent;
+    }
+}

package/library/packages/events/src/cx-asset-transformation-dialog-delete.d.ts

@@ -0,0 +1,6 @@
+export type CxAssetTransformationDialogDeleteEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-transformation-dialog-delete': CxAssetTransformationDialogDeleteEvent;
+    }
+}

package/library/packages/events/src/cx-bento-range-change.d.ts

@@ -0,0 +1,9 @@
+export type CxBentoRangeChangeEvent = CustomEvent<{
+    first: number;
+    last: number;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-bento-range-change': CxBentoRangeChangeEvent;
+    }
+}

package/library/packages/events/src/cx-content-builder-gallery-fetched.d.ts

@@ -0,0 +1,10 @@
+import { Image } from '../../types/src/gallery-config';
+
+export type CxContentBuilderGalleryFetchedEvent = CustomEvent<{
+    data: Image[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-content-builder-gallery-fetched': CxContentBuilderGalleryFetchedEvent;
+    }
+}

package/library/packages/events/src/cx-lightbox-close.d.ts

@@ -0,0 +1,6 @@
+export type CxLightboxCloseEvent = CustomEvent<Record<PropertyKey, unknown>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-lightbox-close': CxLightboxCloseEvent;
+    }
+}

package/library/packages/events/src/cx-lightbox-download.d.ts

@@ -0,0 +1,11 @@
+import { GalleryItem } from '../../types/src/gallery-item';
+
+export type CxLightboxDownloadEvent = CustomEvent<{
+    index: number;
+    item: GalleryItem;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-lightbox-download': CxLightboxDownloadEvent;
+    }
+}

package/library/packages/events/src/cx-timeline-data-resolved.d.ts

@@ -0,0 +1,10 @@
+import { TimelineItem } from '../../types/src/timeline';
+
+export type CxTimelineDataResolvedEvent = CustomEvent<{
+    data: TimelineItem[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-timeline-data-resolved': CxTimelineDataResolvedEvent;
+    }
+}

package/library/packages/events/src/cx-video-thumbnail-resolved.d.ts

@@ -0,0 +1,8 @@
+export type CxVideoThumbnailResolvedEvent = CustomEvent<{
+    thumbnailSrc: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-video-thumbnail-resolved': CxVideoThumbnailResolvedEvent;
+    }
+}

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

@@ -14,6 +14,10 @@ export * from './cx-asset-data-display-slot-change';
 export * from './cx-asset-picker-delete';
 export * from './cx-asset-picker-select';
 export * from './cx-asset-request-status';
+export * from './cx-asset-transformation-dialog-cancel';
+export * from './cx-asset-transformation-dialog-confirm';
+export * from './cx-asset-transformation-dialog-delete';
+export * from './cx-bento-range-change';
 export * from './cx-bento-resize';
 export * from './cx-bicolor-picker-change';
 export * from './cx-blur';
@@ -21,8 +25,8 @@ export * from './cx-border-input-group-change';
 export * from './cx-cancel';
 export * from './cx-cancel-connection';
 export * from './cx-cancel-upload';
-export * from './cx-chart-plan-change';
 export * from './cx-change';
+export * from './cx-chart-plan-change';
 export * from './cx-clear';
 export * from './cx-clear-cache';
 export * from './cx-clear-upload';
@@ -39,6 +43,7 @@ export * from './cx-comment-mention-select';
 export * from './cx-connect';
 export * from './cx-connected';
 export * from './cx-content-builder-gallery-change';
+export * from './cx-content-builder-gallery-fetched';
 export * from './cx-content-builder-page-change';
 export * from './cx-content-builder-page-delete';
 export * from './cx-content-builder-translatable-value-change';
@@ -53,6 +58,8 @@ export * from './cx-dot-status-click';
 export * from './cx-download-format-picker-delete';
 export * from './cx-download-format-picker-select';
 export * from './cx-download-format-request-status';
+export * from './cx-asset-format-picker-delete';
+export * from './cx-asset-format-picker-select';
 export * from './cx-drag-end';
 export * from './cx-drag-start';
 export * from './cx-e-chart-drill-down';
@@ -90,6 +97,8 @@ export * from './cx-invoked';
 export * from './cx-keydown';
 export * from './cx-lazy-change';
 export * from './cx-lazy-load';
+export * from './cx-lightbox-close';
+export * from './cx-lightbox-download';
 export * from './cx-link-request';
 export * from './cx-list-editor-change';
 export * from './cx-load';
@@ -137,6 +146,7 @@ export * from './cx-rich-text-video-save';
 export * from './cx-save';
 export * from './cx-save-settings';
 export * from './cx-sb-button-click';
+export * from './cx-video-thumbnail-resolved';
 export * from './cx-search';
 export * from './cx-select';
 export * from './cx-selected-change';
@@ -156,6 +166,7 @@ export * from './cx-table-export';
 export * from './cx-table-row-action-click';
 export * from './cx-table-save-search-select';
 export * from './cx-time-based-change';
+export * from './cx-timeline-data-resolved';
 export * from './cx-time-update';
 export * from './cx-tiptap-code-block-doc-request';
 export * from './cx-tiptap-image-doc-request';

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

@@ -29,6 +29,7 @@ export default class CxAssetDataDisplay extends CortexElement {
     overlay: boolean;
     position: AssetDataDisplayPosition;
     fetchMode: AssetDataDisplayFetchMode;
+    token: string;
     recordId: string;
     headerSourceField: string;
     detailsSourceField: string;

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

@@ -0,0 +1,56 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.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 CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { AssetFormatValue } from '../../../types/src/asset-format-picker';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The `cx-asset-format-picker` component lets users choose and clear an asset display format.
+ * Works for any asset type (video, audio, etc.) based on the callback provided.
+ *
+ * @event cx-asset-format-select - Emitted when a format is selected. Detail is an `AssetFormatValue`.
+ * @event cx-asset-format-delete - Emitted when the selected format is cleared.
+ * @event cx-asset-request-status - Emitted when the format request status changes.
+ */
+export default class CxAssetFormatPicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
+        'cx-space': typeof CxSpace;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    inputEl?: CxInput;
+    /** The currently selected asset format value. */
+    value: AssetFormatValue | undefined;
+    /** Form field name. */
+    name: string;
+    /** The encrypted asset ID to request formats for. */
+    assetId: string;
+    /** Whether a value is required. */
+    required: boolean;
+    /** Disables the picker. */
+    disabled: boolean;
+    /**
+     * A callback invoked when the user requests to select an asset format.
+     * It receives the asset ID and the current value, and should return a
+     * promise that resolves to an `AssetFormatValue` or null when cancelled.
+     */
+    onRequestAssetFormat: ((assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>) | undefined;
+    private get hasValue();
+    private handleRequestFormatClick;
+    private handleDeleteClick;
+    handleValueChange(): Promise<void>;
+    private renderFormatDisplay;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-asset-format-picker': CxAssetFormatPicker;
+    }
+}

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

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

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

@@ -55,10 +55,17 @@ export default class CxAssetPicker extends CortexElement {
      * It should return a promise that resolves to an Asset object.
      */
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
+    /**
+     * An optional record ID used to fetch a clean preview image, bypassing any
+     * stored URL that may have transformations applied.
+     */
+    recordId: string;
+    private previewSrc;
     /** Kept as an instance field so tests can stub this API call. */
     private apiGetAssets;
     private handleRequestAssetClick;
     handleValueChange(): Promise<void>;
+    handleRecordIdChange(): Promise<void>;
     private handleDeleteClick;
     /** True when the picker accepts this asset type. */
     private acceptsType;

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

@@ -44,6 +44,7 @@ export default class CxCropper extends CortexElement {
     disabled: boolean;
     loadable: boolean;
     loading: boolean;
+    multiple: boolean;
     useInternalLoading: boolean;
     private showLoading;
     private handleLoadingChange;

package/library/packages/molecules/src/cropper/react/Cropper.d.ts

@@ -26,6 +26,7 @@ type Props = {
     };
     loadable: boolean;
     loading: boolean;
+    multiple: boolean;
     resizer: {
         height: number;
         maxHeight: number;

package/library/packages/molecules/src/download-format-picker/download-format-picker.d.ts

@@ -39,6 +39,10 @@ export default class CxDownloadFormatPicker extends CortexElement {
      * The ids of the assets to fetch formats for.
      */
     assetIds: string[];
+    /**
+     * Restricts the format picker to only show tabs for the specified doc types.
+     */
+    allowDocTypes: string[];
     /**
      * Whether the download format picker is disabled.
      */
@@ -47,7 +51,7 @@ export default class CxDownloadFormatPicker extends CortexElement {
      * A callback function that is called when the user requests to select a format.
      * It should return a promise that resolves to a DownloadFormatValue object.
      */
-    onRequestDownloadFormat: ((assetIds: string[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>) | undefined;
+    onRequestDownloadFormat: ((assetIds: string[], formats?: Record<string, string[]>, allowDocTypes?: string[]) => Promise<Record<string, string[]>>) | undefined;
     /**
      * Map of format codes to their display labels.
      * Populated by fetching available format codes from the API.

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

@@ -34,4 +34,5 @@ export { default as CxStepperWizard } from './stepper-wizard/stepper-wizard';
 export { default as CxStorybook } from './storybook/storybook';
 export { default as CxTimeline } from './timeline/timeline';
 export { default as CxTypeface } from './typeface/typeface';
+export { default as CxAssetFormatPicker } from './asset-format-picker/asset-format-picker';
 export { default as CxViewAndSort } from './view-and-sort/view-and-sort';

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

@@ -4,6 +4,7 @@ import { default as CxTab } from '../../../atoms/src/components/tab/tab.ts';
 import { default as CxTabGroup } from '../../../atoms/src/components/tab-group/tab-group.ts';
 import { default as CxTabPanel } from '../../../atoms/src/components/tab-panel/tab-panel.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { Transformation } from '../../../types/src/asset-link-format';
 import { TimelineItem } from '../../../types/src/timeline';
 import { CSSResultGroup } from 'lit';
 
@@ -11,6 +12,7 @@ import { CSSResultGroup } from 'lit';
  * @summary CxTimeline
  */
 export default class CxTimeline extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-icon-button': typeof CxIconButton;
@@ -20,6 +22,10 @@ export default class CxTimeline extends CortexElement {
         'cx-tab-panel': typeof CxTabPanel;
     };
     private readonly localize;
+    private apiSearchAssets;
+    private readonly searchToken;
+    private thumbnailRequestVersion;
+    private get isInEditMode();
     tabGroup?: CxTabGroup;
     data: TimelineItem[];
     /**
@@ -42,6 +48,18 @@ export default class CxTimeline extends CortexElement {
      * The minimum width of the tab.
      */
     minTabWidth: number;
+    /**
+     * Asset transformation proxy format key.
+     */
+    format: string;
+    /**
+     * Asset transformations applied to the image.
+     */
+    transformations: Transformation[];
+    /** Proxy URLs resolved from apiSearchAssets, keyed by item.id. */
+    private resolvedThumbnails;
+    handleDataChange(): Promise<void>;
+    private persistResolvedThumbnailsToData;
     private handlePreviousClick;
     private handleNextClick;
     render(): import('lit').TemplateResult<1>;

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -93,11 +93,17 @@ export default class CxAssetLinkFormat extends CortexElement {
      */
     selectedProxy: string;
     useCustomExtension: boolean;
+    noMetadata: boolean;
+    noCrop: boolean;
+    noResize: boolean;
+    noRotate: boolean;
     lastImageSize: {
         height: number;
         width: number;
     };
     hideHeader: boolean;
+    /** Show a Reset button in the header that clears all transformations. Supports one Undo step after reset. */
+    canReset: boolean;
     queryElement: HTMLElement | null;
     /**
      * The currently active setting in the asset link format component.
@@ -166,6 +172,10 @@ export default class CxAssetLinkFormat extends CortexElement {
      */
     private lastAction;
     private frozenIndex;
+    /** Snapshot saved on Reset to allow one Undo step back to the pre-reset state. */
+    private preResetTransformations;
+    /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
+    private get hasUnfrozenTransformations();
     private apiGetTransformAssetLink;
     private apiGetCropFocusMode;
     /**
@@ -280,7 +290,9 @@ export default class CxAssetLinkFormat extends CortexElement {
     private onQualityChange;
     private onMetadataChange;
     private onExtensionChange;
+    private syncQuality;
     private handleUndo;
+    private handleReset;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-rotation/asset-link-format-rotation.d.ts

@@ -41,21 +41,21 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
     /**
      * The value of the defined quality.
      * This value represents the quality of the asset link format, ranging from 1 to 100.
-     * @default 100
+     * @default 0
      */
     value: number;
+    /**
+     * The value of the defined quality.
+     * This value represents the quality of the asset link format, ranging from 1 to 100.
+     * @default 0
+     */
+    defaultValue: number;
     /**
      * The loading state of the component.
      * This is used to indicate that an operation is in progress, such as applying a new rotation value.
      * @default false
      */
     loading: boolean;
-    /**
-     * The invalid value state of the component.
-     * This is used to indicate that the input value is invalid, such as when it is not a number or out of range.
-     * @default false
-     */
-    invalidValue: boolean;
     handleOpenChange(): void;
     private handleRotationChange;
     private handleButtonClick;

package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts

@@ -0,0 +1,102 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxCropper } from '../../../molecules/src/cropper/cropper.ts';
+import { Transformation } from '../../../types/src/asset-link-format';
+import { default as CxAssetLinkFormat } from '../asset-link-format/asset-link-format';
+
+/**
+ * @summary Dialog that wraps `cx-cropper` and `cx-asset-link-format` side by side,
+ * allowing users to preview and apply image transformations.
+ *
+ * @slot trigger - Opens the dialog on click or keyboard activation. Typically a `cx-button` or
+ *   `cx-icon-button`. Automatically disabled when `asset-id` is not set.
+ *
+ * @event cx-asset-transformation-dialog-cancel - Emitted when the user closes or cancels the dialog.
+ * @event {{ detail: { format: string; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the selected proxy id and transformation array.
+ * @event cx-asset-transformation-dialog-delete - Emitted when the user clears the saved transformations via the delete button.
+ */
+export default class CxAssetTransformationDialog extends CortexElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-asset-link-format': typeof CxAssetLinkFormat;
+        'cx-button': typeof CxButton;
+        'cx-cropper': typeof CxCropper;
+        'cx-dialog': typeof CxDialog;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    private readonly fetchAssetController;
+    private readonly hasSlotController;
+    private apiGetAvailableProxies;
+    /** Stores the accessible trigger element for focus return and ARIA updates. */
+    private accessibleTrigger;
+    private readonly triggerSlot;
+    private readonly assetLinkFormat;
+    private readonly cropperEl;
+    /** Asset ID used to fetch asset data when the dialog opens. */
+    assetId: string;
+    /** Controls dialog open/close state. */
+    open: boolean;
+    /** Boundary element for cx-dialog positioning. */
+    boundary: HTMLElement;
+    baseUrl: string;
+    /** Authentication token passed to the asset service. */
+    token: string;
+    /** Currently selected proxy format, passed back into cx-asset-link-format on reopen. */
+    format: string;
+    /** The default format to fall back to if the asset has no transformations or selected proxy. */
+    defaultFormat: string;
+    /** Optional label rendered as the dialog title. Falls back to the localized "Asset format" term. */
+    dialogLabel: string;
+    /** The transformations applied when the user last saved, passed back into cx-asset-link-format on reopen. */
+    transformations: Transformation[];
+    /** Show stack of layers indicating the transformations will be applied to multiple assets. */
+    multiple: boolean;
+    /** Hide the crop panel inside cx-asset-link-format. */
+    noCrop: boolean;
+    /** Hide the resize panel inside cx-asset-link-format. */
+    noResize: boolean;
+    /** Hide the rotate panel inside cx-asset-link-format. */
+    noRotate: boolean;
+    /** Show a Reset button inside cx-asset-link-format that clears all transformations. */
+    canReset: boolean;
+    /** Asset data fetched on cx-show. */
+    private asset;
+    /** Available proxy formats fetched alongside the asset. */
+    private proxies;
+    private get hasTransformations();
+    handleAssetIdChange(): Promise<void>;
+    handleOpenChange(): void;
+    /** Syncs disabled state and ARIA attributes on the slotted trigger element.
+     * For cx-button/cx-icon-button, ARIA is set on the inner <button> so screen readers
+     * announce the correct role/state rather than the custom-element host. */
+    private updateAccessibleTrigger;
+    /** Fetches the asset and its available proxies when the dialog opens.
+     * Guards on `result.id` because `fetchAssetByID` returns `{}` on network error. */
+    private handleDialogShow;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    /** Prevents the default scroll action for Space on keyup (some browsers fire scroll on keyup). */
+    private handleTriggerKeyUp;
+    private handleTriggerSlotChange;
+    private handleClose;
+    private handleDeleteClick;
+    private handleRequestClose;
+    private handleSave;
+    private handleCancel;
+    private handleAssetLinkFormatShow;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-asset-transformation-dialog': CxAssetTransformationDialog;
+    }
+}

package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.styles.d.ts

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