@orangelogic/design-system 2.129.0 → 2.130.0

package/library/components/video.js

@@ -1,9 +1,9 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.CDrKFe1H.js";
+import { C as Cb } from "../chunks/image.BC_hwk-b.js";
 import Mb from "./resize-observer.js";
-import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.DpK0TTP5.js";
+import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.BVhOesNE.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";

package/library/package.json

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

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

@@ -2,13 +2,14 @@ import { default as ResizableElement } from '../../../../base/src/resizable-elem
 import { ObjectFit } from '../../../../types/src/index.ts';
 import { ClickHandlerType } from '../../../../types/src/image';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
-import { TemplateResult } from 'lit';
+import { nothing, TemplateResult } from 'lit';
 import { Zoom } from 'medium-zoom';
 import { default as CxIcon } from '../icon/icon';
 import { default as CxPopup } from '../popup/popup';
 import { default as CxResizeObserver } from '../resize-observer/resize-observer';
 import { default as CxSkeleton } from '../skeleton/skeleton';
 import { default as CxSpace } from '../space/space';
+import { default as CxSpinner } from '../spinner/spinner';
 
 /**
  * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
@@ -16,7 +17,8 @@ import { default as CxSpace } from '../space/space';
  *
  * @csspart image - The `img` element.
  * @csspart skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
- * @csspart fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
+ * @csspart retry-spinner - The spinner overlay shown while a failed load is being retried (when `retry-on-error` is enabled).
+ * @csspart fallback - The fallback element, always shown when the image fails to load (after retries, when applicable).
  * @csspart base - The component’s outer wrapper.
  * @csspart fallback-icon - The icon rendered inside the fallback slot.
  *
@@ -27,6 +29,7 @@ import { default as CxSpace } from '../space/space';
  * @cssproperty --padding-bottom - The padding-bottom of the image (this will override the `--padding` property).
  * @cssproperty --border-radius - The border-radius of the image.
  * @cssproperty --border - The border of the image.
+ * @cssproperty [--fallback-icon-color=var(--cx-input-icon-color)] - The color of the icon shown when the image fails to load.
  *
  * @event cx-load - Emitted when the image has loaded.
  * @event cx-error - Emitted when the image has failed to load (after all retry attempts when `retry-on-error` is enabled).
@@ -34,7 +37,7 @@ import { default as CxSpace } from '../space/space';
  * @event cx-image-zoom-close - Emitted when the image zoom is closed.
  *
  * @slot skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
- * @slot fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
+ * @slot fallback - The fallback element, always shown when the image fails to load; override this slot to customize the broken-image UI.
  */
 export default class CxImage extends ResizableElement {
     static readonly styles: import('lit').CSSResult[];
@@ -44,17 +47,20 @@ export default class CxImage extends ResizableElement {
         'cx-resize-observer': typeof CxResizeObserver;
         'cx-skeleton': typeof CxSkeleton;
         'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
     };
     readonly localize: LocalizeController;
     imageElement?: HTMLImageElement;
     zoomImageElement: HTMLImageElement;
     highlighterElement: HTMLDivElement;
-    private _retryCount;
-    private _retryTimer;
+    private retryCount;
+    private retryTimer;
     isLoaded: boolean;
     isError: boolean;
+    /** True while a load has failed and a retry is scheduled or in-flight (retry-on-error only). */
+    isRetrying: boolean;
     /** Incremented on each retry attempt to force the img element to remount via keyed(). */
-    private _retryIndex;
+    private retryIndex;
     /**
      * The path to the image to load.
      */
@@ -76,7 +82,9 @@ export default class CxImage extends ResizableElement {
      */
     skeleton: boolean;
     /**
-     * Should show the fallback image when the image fails to load.
+     * @deprecated No longer required: the broken-image UI now always renders when the image
+     * fails to load, regardless of this property's value. Kept only for backward compatibility
+     * with existing markup that sets the `fallback` attribute.
      */
     fallback: boolean;
     /**
@@ -177,7 +185,7 @@ export default class CxImage extends ResizableElement {
     protected handleClickAction(event: MouseEvent): void;
     updated(changedProps: Map<string, unknown>): void;
     openZoom(): void;
-    protected renderContent(): TemplateResult;
+    protected renderContent(): TemplateResult | typeof nothing;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/base/src/highlightable-element.d.ts

@@ -60,11 +60,12 @@ export default class HighlightableElement extends CortexElement {
      */
     isHovering: boolean;
     get easeCSSVariable(): string;
-    getHighlighterClass(): {
+    getHighlighterClass(isError?: boolean): {
         [x: string]: boolean;
         highlighter: boolean;
         'highlighter--background': boolean;
         'highlighter--border': boolean;
+        'highlighter--centered': boolean;
         'highlighter--color-overlay': boolean;
         'highlighter--drop-shadow': boolean;
         'highlighter--opacity': boolean;

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

@@ -63,8 +63,9 @@ export default class CxAssetPicker extends CortexElement {
      */
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[], restrictType?: AssetTypeString) => 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.
+     * An optional record ID (or space-separated list of record IDs, for `multiple`
+     * pickers) used to fetch a clean preview image and title, bypassing any stored
+     * URL/name that may be stale or have transformations applied.
      */
     recordId: string;
     /** When true, uses the Site Builder search endpoint for asset fetching. */

package/library/packages/organisms/src/bento-grid/bento-grid.d.ts

@@ -224,7 +224,7 @@ export default class CxBentoGrid extends CortexElement {
     private getItemSize;
     /**
      * Determines the number of columns for the grid based on the current
-     * container width and breakpoints. Also builds filledData when filler is active.
+     * window width and breakpoints. Also builds filledData when filler is active.
      */
     private setupGrid;
     /**

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

@@ -10,6 +10,12 @@ export declare class ConfigFormController implements ReactiveController {
     private readonly pendingGalleryPickerSaves;
     constructor(host: ReactiveControllerHost & CxConfigForm);
     hostConnected(): void;
+    /**
+     * `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;

package/library/react-web-component.d.ts

@@ -2502,7 +2502,7 @@
         */
         skeleton?: boolean;
         /**
-          * Should show the fallback image when the image fails to load.
+          * @deprecated No longer required: the broken-image UI now always renders when the image fails to load, regardless of this property's value. Kept only for backward compatibility with existing markup that sets the `fallback` attribute.
         */
         fallback?: boolean;
         /**
@@ -5830,7 +5830,7 @@
         */
         restrict?: boolean;
         /**
-          * An optional record ID used to fetch a clean preview image, bypassing any stored URL that may have transformations applied.
+          * An optional record ID (or space-separated list of record IDs, for `multiple` pickers) used to fetch a clean preview image and title, bypassing any stored URL/name that may be stale or have transformations applied.
         */
         recordId?: string;
         /**

package/package.json

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