@orangelogic/design-system 3.0.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.0.0",
+  "version": "3.2.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/icon-button/icon-button.d.ts

@@ -84,6 +84,17 @@ export default class CxIconButton extends CortexElement {
      * Draws a circular icon button.
      */
     circle: boolean;
+    /**
+     * Marks this button as a toggle control and reflects its state via `aria-pressed`.
+     * Leave unset for buttons that are not toggles (the default `role="button"` stays unchanged either way).
+     */
+    pressed?: boolean;
+    /**
+     * Overrides the button's tabindex (e.g. for a roving-tabindex toolbar). Leave unset to keep the
+     * default behavior: `0` when enabled, `-1` when `disabled` or `loading`.
+     * Attribute is `tab-index` (not the derived `tab-index-value`) to mirror the native `tabindex` attribute.
+     */
+    tabIndexValue?: number;
     private styleObserver?;
     connectedUpdatedCallback(): void;
     disconnectedCallback(): void;

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/menu-item/submenu-controller.d.ts

@@ -33,6 +33,7 @@ export declare class SubmenuController implements ReactiveController {
     hostConnected(): void;
     hostDisconnected(): void;
     hostUpdated(): void;
+    private syncAriaExpanded;
     private addListeners;
     private removeListeners;
     private syncIsHorizontalMenu;

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/hybrid/table-core/src/table/styles/table-frozen.styles.d.ts

@@ -1,8 +1,8 @@
 /**
- * Sticky can't pin frozen cells here — every wrapper up to the real horizontal scroller (the
- * OverlayScrollbars viewport on `.tabulator`) is `width: max-content` and never scrolls — so
- * `syncFrozenOffset` mirrors the viewport's scrollLeft into these vars instead. If horizontal
- * scrolling ever moves back onto `.tabulator-tableholder`, delete this sheet.
+ * Frozen columns are pinned by `position: sticky` written from `FrozenColumns.layoutElement`, and
+ * their resize handles by matching insets from `ResizeColumns.reinitializeColumn`. Both resolve
+ * against `.tabulator-tableholder`, the table's single scroll container — keep it that way. This
+ * sheet only owns what sticky cannot express: the freeze divider and the stacking order around it.
  */
 declare const _default: import('lit').CSSResult;
 export default _default;

package/library/packages/hybrid/table-core/src/table/styles/table-overlay-scrollbar.styles.d.ts

@@ -1,9 +1,12 @@
 /**
- * use-overlay-scrollbar: table-scoped OverlayScrollbars rules — structure of
- * the generated horizontal viewport, positioning of the scrollbars slotted
- * into `.table` (see initVerticalScrollbar), and the mapping of the `:host`
- * scrollbar css vars (declared below) onto the OverlayScrollbars theme so
- * tables with and without use-overlay-scrollbar look the same.
+ * use-overlay-scrollbar: table-scoped OverlayScrollbars rules — positioning of
+ * the scrollbars slotted into `.table` (see initScrollbars) and the mapping of
+ * the `:host` scrollbar css vars (declared below) onto the OverlayScrollbars
+ * theme so tables with and without use-overlay-scrollbar look the same.
+ *
+ * There are deliberately no rules for a generated viewport element: the single
+ * instance runs in `viewportIsTarget` mode so `.tabulator-tableholder` stays
+ * the scroll container that frozen columns pin against.
  */
 declare const _default: import('lit').CSSResult;
 export default _default;

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -102,10 +102,7 @@ export default class CxTable extends CortexElement {
         'cx-table-toolbar': typeof CxTableToolbar;
         'cx-tooltip': typeof CxTooltip;
     };
-    private verticalOsInstance;
-    private horizontalOsInstance;
-    /** Removes the horizontal scrollbar's scroll listener (see syncFrozenOffset). */
-    private frozenScrollOff;
+    private osInstance;
     private resizeObserver;
     private overflowObserver;
     private readonly ajaxFacetsController;
@@ -926,14 +923,7 @@ export default class CxTable extends CortexElement {
     private repositionValidationTooltipNow;
     private handleValidationMouseOut;
     disconnectedCallback(): void;
-    private initVerticalScrollbar;
-    private initHorizontalScrollbar;
-    /**
-     * Mirrors the horizontal scroller's offset into `--frozen-offset-start/end` so
-     * `table-frozen.styles.ts` can pin frozen columns. Deliberately not debounced: the offset must
-     * land in the same frame as the scroll, and it is only two custom-property writes.
-     */
-    private syncFrozenOffset;
+    private initScrollbars;
     private readonly checkHorizontalOverflow;
     private initOverflowObserver;
     private registerEventListeners;

package/library/packages/hybrid/table-core/src/tabulator-tables/core/RowManager.d.ts

@@ -62,6 +62,7 @@ export default class RowManager extends CoreFeature implements IRowManager {
     getElement(): HTMLElement;
     getTableElement(): HTMLElement;
     initialize(): void;
+    private initializeWheelWatcher;
     /**
      * IRow Manipulation
      */

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/ResizeColumns/ResizeColumns.d.ts

@@ -28,6 +28,8 @@ export default class ResizeColumns extends Module {
      * walks `columns` because `columnsByIndex` is still empty when `column-rendered` creates handles.
      */
     private isPinnedEnd;
+    private pinHandle;
+    private repinFrozenHandles;
     /**
      * The in-flow handle goes right after the element it resizes — except for an end-pinned column,
      * whose right edge is the table edge: its handle goes before the element, onto the freeze
@@ -35,9 +37,9 @@ export default class ResizeColumns extends Module {
      */
     private attachHandle;
     /**
-     * Re-inserts handles next to the element they resize. Upstream wrote `left`/`right` insets here
-     * for frozen columns, which added to the flow position and pushed handles a column width off;
-     * frozen handles travel via `table-frozen.styles.ts` instead (which also owns their z-index).
+     * Re-inserts handles next to the element they resize and re-pins the frozen ones. Runs off
+     * `column-width`, which `FrozenColumns` subscribes to first (in `initialize()`, whereas this
+     * module subscribes lazily from `column-rendered`), so the margins read here are already current.
      */
     reinitializeColumn(column: Column): void;
     initializeColumn(type: string, component: any, column: Column, element: HTMLElement): void;

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/comment/components/comment-menu/comment-menu.d.ts

@@ -29,6 +29,7 @@ export default class CxCommentMenu extends CortexElement {
     popup: CxPopup;
     linkTextInput: HTMLInputElement;
     linkUrlInput: HTMLInputElement;
+    private formatButtons;
     editor: Editor;
     fullscreen: boolean;
     canUpload: boolean;
@@ -49,6 +50,8 @@ export default class CxCommentMenu extends CortexElement {
      */
     hideTimeBasedIcon: boolean;
     private showTextFormats;
+    /** Index (within `formatButtons`) of the toolbar control that currently has `tabindex="0"`. */
+    private rovingIndex;
     private showLinkPopup;
     private linkTextValue;
     private linkUrlValue;
@@ -70,6 +73,10 @@ export default class CxCommentMenu extends CortexElement {
     private handleBulletListClick;
     private handleOrderedListClick;
     private handleLinkClick;
+    /** Roving-tabindex arrow-key navigation for the formatting toolbar (APG toolbar pattern). */
+    private handleToolbarKeyDown;
+    /** Keeps the roving tabindex in sync when a toolbar button is focused directly (click, or Tab back in). */
+    private handleToolbarFocusIn;
     private handleLinkPopupOpen;
     private handleLinkPopupSave;
     private handleLinkTextInputChange;
@@ -84,6 +91,9 @@ export default class CxCommentMenu extends CortexElement {
     handleEditorChange(): void;
     runConnectedCallback(): void;
     disconnectedCallback(): void;
+    /** Config for the toolbar's mark-toggle buttons (the Link button is rendered separately; it needs the popup wrapper). */
+    private get markFormatButtons();
+    private renderMarkFormatButton;
     renderTextFormatMenu(): import('lit').TemplateResult<1>;
     protected renderLeftMenu(): import('lit').TemplateResult<1>;
     protected renderRightActions(): import('lit').TemplateResult<1>;

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/organisms/src/downloader/downloader.d.ts

@@ -168,7 +168,7 @@ export default class CxDownloader extends CortexElement {
     handleDrag(event: PointerEvent): void;
     hide(): void;
     show(): void;
-    updateTabIndex(): void;
+    updateVisibilityAttributes(): void;
     getDownloadingFilesFromLocalStorage(): void;
     onFilter(key: keyof DownloadItem, value: any): void;
     updateFilteredFiles(): void;