@orangelogic/design-system 3.1.0 → 3.2.0

package/library/components/video.js

@@ -1,13 +1,13 @@
 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.CTMzUqCC.js";
+import { C as Cb } from "../chunks/image.B-4cVbol.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.CAfXABBc.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";
-import { L as kb } from "../chunks/i18n.DbXTTLXx.js";
+import { L as kb } from "../chunks/i18n.BA19xtyU.js";
 import { w as Ki } from "../chunks/watch.DJF5K-8U.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

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

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

@@ -9,15 +9,18 @@ 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.
  * The cx-image component is a simple way to display images in your application.
  *
+ * @description Set `srcset` and `sizes` to let the browser download and decode only the
+ * pixels the layout needs. This is what bounds memory on image-heavy pages: a large
+ * original decodes to `naturalWidth × naturalHeight × 4` bytes no matter how small it
+ * is displayed, so many full-resolution images on one page can exhaust the renderer.
+ *
  * @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 retry-spinner - The spinner overlay shown while a failed load is being retried (when `retry-on-error` is enabled).
+ * @csspart skeleton - The skeleton element, shown while the image is loading (including while a failed load is being retried) and the `skeleton` property is set.
  * @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.
@@ -48,7 +51,6 @@ 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;
@@ -66,6 +68,21 @@ export default class CxImage extends ResizableElement {
      * The path to the image to load.
      */
     src: string;
+    /**
+     * Candidate sources for the underlying `<img>`, as a standard `srcset` value
+     * (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`).
+     *
+     * Lets the browser fetch and decode only the pixels the layout needs, which is what
+     * bounds memory on image-heavy pages — a large original decodes to
+     * `naturalWidth × naturalHeight × 4` bytes regardless of its display size.
+     * Pair with `sizes`; without it the browser assumes the image is `100vw` wide.
+     */
+    srcset: string;
+    /**
+     * The `sizes` attribute for the underlying `<img>`, describing the rendered width
+     * (e.g. `"400px"`). Only meaningful together with `srcset`.
+     */
+    sizes: string;
     /**
      * The path to the placeholder image to be shown if src is not available.
      */
@@ -151,6 +168,15 @@ export default class CxImage extends ResizableElement {
     };
     /** The crossorigin value for the `<img>`; `undefined` (attribute omitted) when `noCrossorigin` is set. */
     get crossorigin(): string | undefined;
+    /**
+     * Whether to hold the box with a skeleton rather than the loaded image.
+     *
+     * Retries are included: a retry is still "not loaded yet", so it keeps the same
+     * skeleton instead of swapping in a spinner. A spinner would restate what the
+     * skeleton already shows while changing the visual weight of the cell mid-load,
+     * which reads as a layout change on an image-heavy page.
+     */
+    protected get showPlaceholderSkeleton(): boolean;
     /**
      * Whether the image have zoom action.
      */

package/library/packages/atoms/src/components/menu-item/menu-item.d.ts

@@ -1,5 +1,5 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
-import { AriaCurrentValue, MenuItemCheckPlacement } from '../../../../types/src/menu-item';
+import { AriaCurrentValue, MenuItemCheckPlacement, MenuItemRole, MenuItemType } from '../../../../types/src/menu-item';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { default as CxIcon } from '../icon/icon';
 import { default as CxPopup } from '../popup/popup';
@@ -33,6 +33,7 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
  * @cssproperty [--checked-icon-size=1.5em] - The size of the checked icon.
  * @cssproperty [--checked-icon-color=var(--cx-color-primary)] - The color of the checked icon when the item is checked.
+ * @cssproperty [--checked-label-color=var(--cx-color-primary)] - The color of the label when the item is checked.
  */
 export default class CxMenuItem extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -47,7 +48,9 @@ export default class CxMenuItem extends CortexElement {
     menuItem: HTMLElement;
     submenuIcon: HTMLElement;
     /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-    type: 'normal' | 'checkbox';
+    type: MenuItemType;
+    /** Overrides the ARIA role derived from `type`. Use `menuitemradio` for a checkbox item that is one choice out of a set. */
+    itemRole?: MenuItemRole;
     /** The trigger type for the submenu. */
     submenuTrigger: 'hover' | 'click' | 'both';
     /** Draws the item in a checked state. */

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

@@ -42,6 +42,16 @@ export default class CxPopup extends CortexElement {
     static styles: CSSResultGroup;
     private anchorEl;
     private cleanup;
+    /**
+     * Set when the element disconnects, cleared when it reconnects.
+     *
+     * `start()` is debounced, so a pending invocation can still run after
+     * `disconnectedCallback()` has already executed `stopImmediate()` — at which
+     * point nothing is left to release the `autoUpdate()` listeners it registers
+     * on `window`. Checked alongside `isConnected`, which a popup inside a shadow
+     * tree that is discarded as a whole can still report as `true`.
+     */
+    private isTornDown;
     private readonly localize;
     /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
     popup: HTMLElement;
@@ -172,6 +182,7 @@ export default class CxPopup extends CortexElement {
      */
     autoWidthFactor: number;
     private get isSizeMiddleWareUsed();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     connectedUpdatedCallback(): void;
     updated(changedProps: Map<string, unknown>): Promise<void>;

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

@@ -68,6 +68,13 @@ export default class CxSelect extends CortexElement implements CortexFormControl
     private readonly localize;
     private typeToSelectString;
     private closeWatcher;
+    /**
+     * The root node the `focusin` listener was attached to, captured at attach
+     * time. `getRootNode()` returns a different node once the element is
+     * detached, so re-calling it during cleanup would fail to remove the
+     * listener that was actually added.
+     */
+    private openListenersRoot;
     popup: CxPopup;
     combobox: HTMLSlotElement;
     displayInput: HTMLInputElement;
@@ -310,6 +317,7 @@ export default class CxSelect extends CortexElement implements CortexFormControl
      */
     filterCallback(option: HTMLElement, value: string): boolean;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     runFirstUpdated(): void;
     private addOpenListeners;
     private removeOpenListeners;

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

@@ -85,6 +85,16 @@ export default class CxGalleryItem extends HighlightableElement {
      * The source of the image.
      */
     src: string | undefined;
+    /**
+     * Candidate sources forwarded to the inner `<cx-image>` as a standard `srcset` value,
+     * so the browser downloads and decodes only the pixels the grid cell needs.
+     */
+    srcset: string;
+    /**
+     * The rendered width forwarded to the inner `<cx-image>` as `sizes` (e.g. `"400px"`).
+     * Only meaningful together with `srcset`.
+     */
+    sizes: string;
     /**
      * The alt text for the image.
      */

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

@@ -129,6 +129,7 @@ export default class CxIconPicker extends CortexElement {
     private handleSearchInput;
     private handleMenuSelect;
     private handleBicolorChange;
+    private setValueMenuSelect;
     setSelectOptionCurrent(option: HTMLElement, current?: boolean): void;
     selectGetOptionLabel(option: HTMLElement): string;
     selectFilterCallback(option: HTMLElement, value: string): boolean;

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

@@ -81,6 +81,15 @@ export default class CxMasonry extends CortexElement {
     handleSortableChange(): void;
     connectedUpdatedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * The `sizes` hint for item images, expressed as a viewport fraction.
+     *
+     * The layout is CSS-column based, so no exact pixel width is available the way a
+     * measured grid provides one. Each item spans exactly one of `cols` columns, which
+     * makes the fraction an accurate upper bound and keeps the browser from assuming
+     * the default `100vw`.
+     */
+    private get itemSizes();
     handleItemClick(event: MouseEvent, item: MasonryItem): void;
     handleSortableUpdate(event: Sortable.SortableEvent): void;
     renderActions(item: MasonryItem): import('lit').TemplateResult<1>;

package/library/packages/molecules/src/view-and-sort/view-and-sort.d.ts

@@ -20,6 +20,8 @@ import { CSSResultGroup, TemplateResult } from 'lit';
  * @summary A dropdown menu that accepts a JSON string to render menu items for the template switcher dropdown.
  *
  * @event {{ item: MenuItem }} cx-select - Emitted when a menu item is selected.
+ *
+ * @cssproperty [--view-and-sort-switch-label-color=var(--cx-color-neutral)] - Label color for switch rows. Switch rows stay neutral because the switch conveys the state; set this to re-enable a checked highlight.
  */
 export default class CxViewAndSort extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -55,6 +57,12 @@ export default class CxViewAndSort extends CortexElement {
     hide(): void;
     private handleButtonClick;
     private handleSwitchClick;
+    /**
+     * Whether an item is one option out of a set the user picks from, such as items per page, and
+     * so needs `aria-checked`. Options share a `group`; switches, buttons, submenu openers and
+     * settings actions are excluded.
+     */
+    private isSelectableOption;
     render(): TemplateResult<1>;
     renderMenuSection(section: MenuSection): TemplateResult;
     renderMenuItem(item: MenuItem, isHorizontal?: boolean, tooltip?: string): TemplateResult;

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

@@ -23,6 +23,13 @@ export default class CxBentoGrid extends CortexElement {
     static readonly styles: CSSResultGroup;
     /** Minimum scroll delta (px) required to trigger a virtual range update. */
     private static readonly SCROLL_THRESHOLD;
+    /**
+     * Longest a row may block the next release while waiting for its images.
+     *
+     * Bounds the adaptive wait so a hanging request or an image that never fires
+     * `load`/`error` cannot stall the remaining rows indefinitely.
+     */
+    private static readonly ROW_RELEASE_TIMEOUT;
     static readonly dependencies: {
         'cx-gallery-item': typeof CxGalleryItem;
         'cx-tooltip': typeof CxTooltip;
@@ -109,6 +116,18 @@ export default class CxBentoGrid extends CortexElement {
      * Unloaded slots are approximated as 1×1 items.
      */
     totalItems: number;
+    /**
+     * Delay in milliseconds between releasing one row of images and the next.
+     *
+     * Images are held back until their row is released, so the browser opens roughly one
+     * row's worth of requests at a time instead of one per rendered item. Each transform
+     * URL is an uncached backend render, and enough of them in parallel returns 503.
+     *
+     * A row also waits for the previous row's images to finish (capped by
+     * `ROW_RELEASE_TIMEOUT`), so this is the floor between releases rather than the exact
+     * cadence. Set to `0` to disable gating and let every rendered row load immediately.
+     */
+    rowReleaseDelay: number;
     /**
      * The show content type.
      */
@@ -198,6 +217,29 @@ export default class CxBentoGrid extends CortexElement {
     private virtualFirst;
     /** Inclusive index of the last item in the rendered virtual window. */
     private virtualLast;
+    /**
+     * Exclusive upper bound of the grid rows whose images are allowed to load.
+     *
+     * A row's worth of items entering the DOM together makes the browser open that many
+     * image requests at once, and each distinct transform URL is an uncached backend
+     * render — enough parallelism there returns 503. Releasing one row at a time keeps
+     * the request count bounded by the row width instead of the rendered range.
+     *
+     * `Infinity` disables gating entirely (see `rowReleaseDelay`).
+     */
+    private releasedRowCount;
+    /** Pending timer for the next row release; null when no release is scheduled. */
+    private rowReleaseTimer;
+    /**
+     * Images still loading in the most recently released row, by item index.
+     *
+     * The next row waits for this to drain so releases track real network progress
+     * rather than a fixed cadence, with `ROW_RELEASE_TIMEOUT` as the upper bound so a
+     * hanging or broken image cannot stall the rest of the grid.
+     */
+    private readonly pendingRowImages;
+    /** Guards against scheduling a release while one is already in flight. */
+    private isRowReleaseScheduled;
     private isTooltipShown;
     protected galleryItemTag: string;
     /**
@@ -249,6 +291,43 @@ export default class CxBentoGrid extends CortexElement {
     private computeLayout;
     /** Recalculates which items fall within the current scroll viewport. */
     private updateActiveRange;
+    /**
+     * Highest row index currently rendered, or -1 when nothing is rendered.
+     *
+     * Releases stop here rather than at the dataset's last row so scrolled-away rows are
+     * not fetched ahead of the ones the viewer is actually looking at.
+     */
+    private get lastRenderedRow();
+    /**
+     * Whether the item at `index` may load its image yet.
+     *
+     * Items in unreleased rows render their cell and skeleton but receive no `src`, which
+     * is what keeps the grid's shape stable while images fill in progressively.
+     */
+    protected isRowReleased(index: number): boolean;
+    /**
+     * Marks every rendered item in `row` as awaiting its image, synchronously.
+     *
+     * Runs in the same tick as the release so `scheduleRowRelease()` sees a non-empty
+     * set on its next call. Items without a `src` are skipped: they never fire
+     * `cx-load` / `cx-error`, so they would hold the queue open until the timeout.
+     */
+    private markRowImagesPending;
+    /**
+     * Clears an item from the in-flight set once its image settles (loaded or failed) and
+     * lets the next row through as soon as the row drains.
+     */
+    private handleItemImageSettled;
+    /**
+     * Queues the next row release, if one is warranted and not already pending.
+     *
+     * Waits `rowReleaseDelay` when the previous row has drained, or up to
+     * `ROW_RELEASE_TIMEOUT` when it has not, so a stuck image only delays the grid
+     * instead of stopping it.
+     */
+    private scheduleRowRelease;
+    /** Clears any pending release and resets the gate back to its initial state. */
+    private resetRowRelease;
     /**
      * Returns the index of the last item whose rowStart is within maxRows.
      */
@@ -291,6 +370,15 @@ export default class CxBentoGrid extends CortexElement {
      * changes on every computeLayout() call, including resize-driven reflows) or
      * the sync-row-content-height flag itself is toggled.
      */
+    /**
+     * Restarts row gating when the dataset shrinks or is replaced wholesale.
+     *
+     * Row indices refer to a specific layout, so keeping a release count across a new
+     * dataset would let its rows load all at once — the burst this gate exists to prevent.
+     * A dataset that only grew is treated as an appended page: the already-released rows
+     * still hold the same items, so their progress is kept and the new rows queue behind.
+     */
+    handleDataChangeForRowRelease(oldData?: unknown, newData?: unknown): void;
     handleRowContentHeightSync(): Promise<void>;
     /**
      * Get content position based on the size of the item.

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

@@ -41,12 +41,13 @@ export default class CxSbImage extends CxImage {
         'cx-resize-observer': typeof import('../../../../../atoms/src/index.ts').CxResizeObserver;
         'cx-skeleton': typeof import('../../../../../atoms/src/index.ts').CxSkeleton;
         'cx-space': typeof import('../../../../../atoms/src/index.ts').CxSpace;
-        'cx-spinner': typeof import('../../../../../atoms/src/index.ts').CxSpinner;
     };
     /**
      * Override the default behavior of retrying to load the image when it fails to load.
      */
     retryOnError: boolean;
+    /** Content-builder images keep their measured box visible while the asset loads. */
+    skeleton: boolean;
     /**
      * The path to the image to load in dark mode.
      */
@@ -214,6 +215,15 @@ export default class CxSbImage extends CxImage {
      * Whether the image has an click action.
      */
     private get hasClickAction();
+    /**
+     * The rendered width in CSS pixels, used as the `sizes` hint so the browser can pick
+     * the smallest `srcset` candidate that still covers the box.
+     *
+     * A `%` width carries no pixel value, so the measured `clientWidth` is used instead.
+     * Returns 0 when neither is known yet (before first layout), which makes the caller
+     * omit `sizes` and fall back to the browser's default `100vw` assumption.
+     */
+    private get displayWidth();
     handleClickActionChange(): Promise<void>;
     handleClickSpaceChange(): void;
     handleObjectFitChange(): Promise<void>;

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

@@ -5,7 +5,7 @@ import { default as CxSpinner } from '../../../atoms/src/components/spinner/spin
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { AssetFormatValue } from '../../../types/src/asset-format-picker';
 import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
-import { Component, Editor, StyleProps } from 'grapesjs';
+import { Component, Editor } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { CxBlockPicker } from './components/block-picker';
 import { CxConfigManager } from './components/config-manager';
@@ -326,6 +326,35 @@ export default class CxContentBuilder extends CortexElement {
     private handleCanvasScroll;
     private handleHorizontalScroll;
     private handleRootToolbarRightClick;
+    /**
+     * Re-applies the toolbar position GrapesJS computed, clamped to the visible
+     * canvas so the toolbar never gets clipped.
+     *
+     * `getTargetToElementFixed` derives `left` from `elRect.width - toolbarWidth`
+     * (right-aligned to the selected element) and clamps it with
+     * `canvasLiftLimit`, which is measured against the frame rather than the
+     * visible canvas viewport. On an element near the left edge of the visible
+     * area that limit still allows a negative offset, so the toolbar overflows
+     * past the canvas and gets clipped. Clamping against the real canvas box
+     * turns that case into left-alignment.
+     *
+     * Both `left` and `top` are relative to the tools wrapper, which GrapesJS
+     * sizes to the selected element's box — hence the wrapper-to-canvas delta.
+     *
+     * Values are written with `important` so stylesheet rules on `.gjs-toolbar`
+     * cannot override the computed placement.
+     */
+    private clampToolbarPosition;
+    /**
+     * Wraps `updateToolbarPos` so the toolbar position is re-applied after
+     * GrapesJS writes its own inline position.
+     *
+     * `updateToolbarPos` lives on the `select-comp` command (GrapesJS'
+     * `SelectComponent`), which owns the component toolbar / badge / highlight
+     * boxes — not on `CanvasView`. It is absent from the published `grapesjs`
+     * typings, so the command is narrowed through a local structural type.
+     */
+    private patchToolbarPositioning;
     private handleCanvasClick;
     private handleCanvasKeydown;
     private handleTemplateManagerUpdated;
@@ -388,11 +417,7 @@ export default class CxContentBuilder extends CortexElement {
      * @param components - The components to be updated in the component.
      * @param styleProps - The style properties to be set for the component.
      */
-    updateComponent(component: Component, { attributes, properties, styleProps, }: {
-        attributes?: Record<string, string>;
-        properties?: Record<string, unknown>;
-        styleProps?: StyleProps;
-    }): void;
+    private updateComponent;
     private handleOtherChange;
     private handleMouseMove;
     private getScrollableElements;

package/library/packages/types/src/menu-item.d.ts

@@ -3,6 +3,12 @@ export declare enum MenuItemCheckPlacement {
     Prefix = "prefix",
     Suffix = "suffix"
 }
+/** The ARIA roles a menu item can expose, i.e. the roles allowed as children of `role="menu"`. */
+export declare enum MenuItemRole {
+    Checkbox = "menuitemcheckbox",
+    Item = "menuitem",
+    Radio = "menuitemradio"
+}
 /** Values accepted by the `aria-current` attribute, indicating what kind of "current" item this represents within a set. */
 export declare enum AriaCurrentValue {
     Date = "date",
@@ -11,6 +17,11 @@ export declare enum AriaCurrentValue {
     Step = "step",
     Time = "time"
 }
+/** The kind of menu item to render. `Checkbox` is required before `checked` has any effect. */
+export declare enum MenuItemType {
+    Checkbox = "checkbox",
+    Normal = "normal"
+}
 /**
  * Interface for menu item data that can be shared between events and components
  * This breaks the circular dependency between events and atoms packages
@@ -37,7 +48,7 @@ export interface MenuItemData {
     /** The text content/label of the menu item */
     textContent?: string;
     /** The type of menu item */
-    type?: 'normal' | 'checkbox';
+    type?: MenuItemType;
     /** The value associated with the menu item */
     value?: string;
 }

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -315,9 +315,12 @@ export interface Translation extends DefaultTranslation {
     defaultWidth: string;
     definition: string;
     delete: string;
+    deleteAllTransitions: string;
     deleteColumn: string;
+    deleteOptions: string;
     deleteRow: string;
     deleteTable: string;
+    deleteTransition: string;
     deployStacks: string;
     descending: string;
     description: string;

package/library/packages/utils/src/transformation/transformation.d.ts

@@ -1,5 +1,12 @@
 import { Asset, Parameter, Transformation } from '../../../types/src/asset-link-format';
 
+/**
+ * Width ladder used for `srcset` candidates, in CSS pixels.
+ *
+ * Kept as a small fixed ladder rather than a per-item computed width so that many
+ * items sharing a display size resolve to the same URLs and stay CDN-cache friendly.
+ */
+export declare const SRCSET_WIDTH_LADDER: readonly [400, 800, 1200, 1600, 2400];
 export declare function buildTransformationString({ asset, baseUrl, extension, options, parameters, transformations, useSession, }: {
     asset?: Asset;
     baseUrl?: string;
@@ -19,3 +26,48 @@ export declare function buildTransformationString({ asset, baseUrl, extension, o
  * and merged into an existing `/t/`. Other URLs keep the plain append behavior.
  */
 export declare function applyTransformationsToUrl(url: string, transformations: Transformation[]): string;
+/**
+ * Inserts a width-only resize into an asset-link URL, preserving any transformations
+ * already present.
+ *
+ * `applyTransformationsToUrl` is deliberately not reused here: it *replaces* an existing
+ * `/t/` segment (dropping a configured crop/rotate/quality) and drops the prettyName tail
+ * when doing so. This function prepends the resize to an existing segment instead, so a
+ * user's configured transformations survive.
+ *
+ * Returns the URL unchanged when it is not an asset-link URL, so arbitrary external
+ * sources are never rewritten.
+ */
+export declare function applyWidthToAssetUrl(url: string, width: number): string;
+/**
+ * Whether the URL already carries a transformation segment.
+ *
+ * An existing `/t/` means a width was already chosen deliberately (a configured resize,
+ * crop or proxy format), so a ladder must not add a competing one.
+ */
+export declare function hasTransformSegment(url: string): boolean;
+/**
+ * Builds a `srcset` value for an asset-link URL by emitting one width-only resize
+ * candidate per ladder entry, letting the browser fetch and decode only the pixels
+ * the layout actually needs.
+ *
+ * Candidates wider than `maxWidth` are dropped so the backend is never asked to
+ * upscale past the asset's real dimensions. When `maxWidth` falls below the whole
+ * ladder, the smallest candidate is still emitted so a `srcset` is always produced
+ * for an eligible URL.
+ *
+ * Returns an empty string when the URL is not an asset link, or when it already carries
+ * a transformation — signalling the caller to omit the attribute and honour the width
+ * that was configured upstream.
+ */
+export declare function buildAssetSrcset(url: string, options?: {
+    maxWidth?: number;
+    widths?: readonly number[];
+}): string;
+/**
+ * Builds a `sizes` value from a known display width in CSS pixels.
+ *
+ * Rounded up to `step` so small layout changes (a resize that shifts a grid cell by a
+ * few pixels) do not produce a new value on every frame.
+ */
+export declare function buildSizesFromDisplayWidth(displayWidth: number, step?: number): string;

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

@@ -544,7 +544,11 @@
         /**
           * The type of menu item to render. To use `checked`, this value must be set to `checkbox`.
         */
-        type?: 'normal' | 'checkbox';
+        type?: 'checkbox' | 'normal';
+        /**
+          * Overrides the ARIA role derived from `type`. Use `menuitemradio` for a checkbox item that is one choice out of a set.
+        */
+        itemRole?: 'menuitemcheckbox' | 'menuitem' | 'menuitemradio';
         /**
           * The trigger type for the submenu.
         */
@@ -2511,6 +2515,14 @@
           * The path to the image to load.
         */
         src?: string;
+        /**
+          * Candidate sources for the underlying `img`, as a standard `srcset` value (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`). <br/> Lets the browser fetch and decode only the pixels the layout needs, which is what bounds memory on image-heavy pages — a large original decodes to `naturalWidth × naturalHeight × 4` bytes regardless of its display size. Pair with `sizes`; without it the browser assumes the image is `100vw` wide.
+        */
+        srcset?: string;
+        /**
+          * The `sizes` attribute for the underlying `img`, describing the rendered width (e.g. `"400px"`). Only meaningful together with `srcset`.
+        */
+        sizes?: string;
         /**
           * The path to the placeholder image to be shown if src is not available.
         */
@@ -8035,6 +8047,10 @@
           * Total number of items in the dataset, including those not yet loaded. When set, the scroll container height is extended to reflect the full dataset size so the scrollbar is accurate from the first render. Unloaded slots are approximated as 1×1 items.
         */
         totalItems?: number;
+        /**
+          * Delay in milliseconds between releasing one row of images and the next. <br/> Images are held back until their row is released, so the browser opens roughly one row's worth of requests at a time instead of one per rendered item. Each transform URL is an uncached backend render, and enough of them in parallel returns 503. <br/> A row also waits for the previous row's images to finish (capped by `ROW_RELEASE_TIMEOUT`), so this is the floor between releases rather than the exact cadence. Set to `0` to disable gating and let every rendered row load immediately.
+        */
+        rowReleaseDelay?: number;
         /**
           * The show content type.
         */