@orangelogic/design-system 4.50.0 → 4.52.0

package/library/packages/hybrid/rich-text/src/rich-text.d.ts

@@ -72,6 +72,9 @@ import { RichTextMenuBarSpec, RichTextStyleFormat, RichTextToolbarSpec } from '.
  * @event cx-rich-text-blur - Emitted when the editor loses focus.
  * @event cx-rich-text-focus - Emitted when the editor gains focus.
  * @event cx-rich-text-click - Emitted when the user clicks inside the toolbar, editor, or table bubble.
+ *
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the rich text editor, unless `--rich-text-border` is set.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the rich text editor, unless `--rich-text-border` is set. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxRichText extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -35,6 +35,8 @@ import { default as CxTableSavedSearchDropdown } from './table-saved-search-drop
  * @cssproperty [--dropdown-filter-icon-size=var(--cx-font-size-large)] - Size of the icon in a dropdown filter trigger. Matches the 20px icon in the design; without it the icon inherits 16px from cx-button.
  * @cssproperty [--search-border-width-focus=0] - Thickness added around the `can-search` search box while it has focus. Drawn outside the box so the input never resizes. Applies to that input only.
  * @cssproperty [--search-border-color-focus=var(--cx-color-primary-600)] - Border color of the `can-search` search box while it has focus. Applies to that input only.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of the search box while it has focus.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height of the header row when pagination is shown.
  */
 export default class CxTableToolbar extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -86,6 +86,9 @@ import { CxTableColumnEditor, CxTableFooter, CxTableHeaderMenu, CxTableRowAction
  * @event {{ field: string, visible: boolean }} cx-table-column-visibility-change - Emitted after a column's visibility changes via the header right-click "Hide column" action.
  * @event {{ field: string }} cx-table-edit-columns - Emitted when "Edit columns" is chosen from the header right-click menu. Extension point for a future manage-columns panel; no built-in panel is shown.
  * @event {{ key: string }} cx-table-applied-filter-remove - Emitted when a host-provided chip from `additionalAppliedFilters` is removed (individually or via "Clear") in the faceted-filter panel. Carries the removed chip's `key`; the host owns the underlying filter and updates `additionalAppliedFilters` in response.
+ *
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of the input or select in a cell being edited.
+ * @cssproperty [--cx-input-border-width=1px] - Width of the table's borders.
  */
 export default class CxTable extends CortexElement {
     #private;

package/library/packages/hybrid/video-advanced/src/video-advanced/video-advanced.d.ts

@@ -69,6 +69,18 @@ import { default as CxVideoEditor } from '../video-editor/video-editor';
  * @event {{ UID: string; time: number }} cx-video-editor-trim - Fired when trimming a track.
  * @event {{ UIDs: string[] }} cx-video-editor-select-tracks - Fired when selecting tracks.
  * @event {{ UIDs: string[] }} cx-video-editor-select-transitions - Fired when selecting transitions.
+ *
+ * @cssproperty [--cx-input-border-radius-small=var(--cx-border-radius-large)] - Border radius of the segment range slider's control buttons.
+ * @cssproperty [--cx-tooltip-border-radius=var(--cx-border-radius-medium)] - Border radius of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-font-family=var(--cx-font-sans)] - Font family of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-font-size=var(--cx-font-size-small)] - Font size of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-font-weight=var(--cx-font-weight-regular)] - Font weight of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-line-height=var(--cx-line-height-medium)] - Line height of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-padding=var(--cx-spacing-2x-small) var(--cx-spacing-x-small)] - Padding of the thumbnail preview tooltip.
+ * @cssproperty [--cx-tooltip-background-color=#27272A] - Background color of the time, volume and thumbnail preview tooltips.
+ * @cssproperty [--cx-tooltip-color=#FFF] - Text color of the time, volume and thumbnail preview tooltips.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the segment volume popup, the video.js menus and the transcription search box.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the segment volume popup.
  */
 export default class CxVideoAdvanced extends CortexElement {
     static readonly dependencies: {

package/library/packages/molecules/src/3d-viewer/components/3d-viewer-config/3d-viewer-config.d.ts

@@ -12,6 +12,9 @@ import { default as CortexElement } from '../../../../../base/src/cortex-element
 import { CSSResultGroup } from 'lit';
 /**
  * @summary Cx3dViewerConfig
+ *
+ * @cssproperty [--cx-panel-border-width=1px] - Width of the divider between the back button and the settings.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Color of the divider between the back button and the settings.
  */
 export default class Cx3dViewerConfig extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -9,6 +9,8 @@ import { default as CxAnnotatorLineWeight } from './components/annotator-line-we
  * @summary CxAnnotator - A component that allows users to annotate a specific element.
  *
  * @event {{ active: boolean; tool: AnnotatorTool }} cx-annotator-tool-change - Fired when a drawing tool is selected (`active: true`) or the active tool icon is clicked again to return to select mode (`active: false`). `tool` is the `AnnotatorTool` value (`arrow-marker`, `line-marker`, `rectangle-marker`, `freehand-marker`).
+ *
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum width of the line color button.
  */
 export default class CxAnnotator extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -13,6 +13,9 @@ import { CSSResultGroup } from 'lit';
  *
  * @event cx-asset-format-select - Emitted when a format is selected or reset to its default. Detail is an `AssetFormatValue`.
  * @event cx-asset-request-status - Emitted when the format request status changes.
+ *
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the format button when the picker is invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus ring of the format button when the picker is invalid and focused.
  */
 export default class CxAssetFormatPicker extends CortexElement {
     #private;

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

@@ -13,6 +13,9 @@ import { Asset, AssetType, AssetTypeString } from '../../../types/src/content-bu
  *
  * @event cx-content-builder-asset-select - Emitted when an asset is selected.
  * @event cx-asset-request-status - Emitted when the asset request status changes.
+ *
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the choose button when the picker is invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus shadow of the choose button when the picker is invalid.
  */
 export default class CxAssetPicker extends CortexElement {
     static readonly styles: import('lit').CSSResult[];

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

@@ -12,6 +12,9 @@ import { CSSResultGroup } from 'lit';
  * @event cx-download-format-select - Emitted when a format is selected.
  * @event cx-download-format-delete - Emitted when the format is cleared.
  * @event cx-asset-request-status - Emitted when the format request status changes.
+ *
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the format button when the picker is invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus ring of the format button when the picker is invalid and focused.
  */
 export default class CxDownloadFormatPicker extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/input-date-picker/input-date-picker.d.ts

@@ -22,6 +22,9 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty [--input-date-picker-width] - Explicit field width. Overrides date-only and show-time default widths.
  * @cssproperty [--date-field-width=15rem] - Default width when time selects are hidden.
  * @cssproperty [--time-select-width=5.75rem] - Width of each time select.
+ * @cssproperty [--cx-input-spacing-small=var(--cx-spacing-medium)] - Inline padding of the time selects' comboboxes.
+ * @cssproperty [--cx-input-icon-color=var(--cx-color-neutral-500)] - Color of the date action icon.
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the date input when the picker is invalid.
  */
 export default class CxInputDatePicker extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/markdown-viewer/markdown-viewer.d.ts

@@ -40,6 +40,9 @@ import { CSSResultGroup, TemplateResult } from 'lit';
  * @cssproperty [--cx-markdown-viewer-source-max-height=none] - Max height of the source view before it scrolls.
  * @cssproperty [--cx-markdown-viewer-edit-min-height=auto] - Min height of the plain-text editor, overriding its row count. The rich editor uses it too, defaulting to 20lh.
  * @cssproperty [--cx-markdown-viewer-view-switcher-width=12rem] - Space the rich view's toolbar reserves at its end so the overlaid view switcher never covers a control.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of the rich editor's box.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the rich editor's box.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the rich editor's box. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxMarkdownViewer extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/multi-select/components/board/board.d.ts

@@ -22,6 +22,10 @@ import { default as CxBoardListItem } from '../board-list-item/board-list-item';
  * @csspart search-input - The search input. Only rendered when `allow-search` is set.
  * @csspart search-input-clear - The clear button inside the search input.
  * @csspart select-all - The select-all checkbox in the header. Only rendered when `all` is set.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the select-all checkbox.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Width and height of the select-all checkbox.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of the select-all checkbox when unchecked.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the select-all checkbox when unchecked. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxBoard extends CortexElement {
     static readonly styles: import('lit').CSSResult[];

package/library/packages/molecules/src/multi-select/components/board-list-item/board-list-item.d.ts

@@ -17,6 +17,12 @@ import { TemplateResult } from 'lit';
  * @csspart text - The wrapper around the row's label.
  * @csspart text-content - The clamped label itself.
  * @csspart tooltip - The tooltip holding the row's `tooltip` content.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the selection indicator.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Size of the selection indicator.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of the selection indicator.
+ * @cssproperty [--cx-input-background-color-hover=var(--cx-input-background-color)] - Background color of the unchecked selection indicator on hover.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the selection indicator. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of the unchecked selection indicator on hover. Dark theme: `var(--cx-color-primary-700)`.
  */
 export default class CxBoardListItem extends CortexElement {
     static readonly styles: import('lit').CSSResult[];

package/library/packages/molecules/src/publish-page/publish-page.d.ts

@@ -34,6 +34,8 @@ import { CSSResultGroup } from 'lit';
  * @csspart cancel-button - The cancel button.
  *
  * @cssproperty [--publish-page-width=840px] - The width of the dialog panel.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height of the field labels, so a label centres against the medium input beside it.
+ * @cssproperty [--cx-input-label-font-size-medium=var(--cx-font-size-x-small)] - Font size of the field labels.
  */
 export default class CxPublishPage extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -23,6 +23,12 @@ import { CSSResultGroup, TemplateResult } from 'lit';
  * @event {{ eventName: string, value: string }} cx-view-and-sort-action-click - Emitted when a menu item's trailing action icon is pressed. A distinct behavior from selecting the item: `cx-select` is suppressed for that click.
  *
  * @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.
+ * @cssproperty [--view-and-sort-panel-padding=var(--cx-spacing-x-small) 0 0 0] - Padding of the dropdown panel around all menu sections. Set `0` so the first row's hover background reaches the top edge of the panel.
+ * @cssproperty [--view-and-sort-menu-padding=var(--cx-spacing-x-small) 0] - Padding of each menu section. Set `0` so a row's hover background reaches the section dividers. A section under a title keeps no top padding, and a section holding a button keeps no bottom padding.
+ * @cssproperty [--view-and-sort-divider-spacing=var(--cx-spacing-medium)] - Space above and below a divider between rows of the same section. Set `0` so the hover background of the rows next to it reaches the divider line.
+ * @cssproperty [--cx-button-border-radius-medium=var(--cx-border-radius-medium)] - Border radius of the trigger button when `--view-and-sort-trigger-button-border-radius` is not set.
+ * @cssproperty [--cx-panel-border-width=1px] - Width of the divider between menu sections.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Color of the divider between menu sections.
  */
 export default class CxViewAndSort extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -43,6 +43,7 @@ type ImageSizeBound = {
  * @slot footer - Additional content rendered in normal flow after the transformation controls.
  */
 export default class CxAssetLinkFormat extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-asset-link-format-crop': typeof CxAssetLinkFormatCrop;
@@ -100,6 +101,11 @@ export default class CxAssetLinkFormat extends CortexElement {
     private sortable?;
     private sortableRevision;
     private dragPreviousSibling;
+    /**
+     * The crop step last edited in this formatter. Any other crop step came from outside (a saved
+     * format, Undo, Reset), even one of the size the Crop panel shows.
+     */
+    private editedCrop?;
     /**
      * The base URL for the asset service.
      * This URL is used to fetch the asset link and apply transformations.
@@ -454,8 +460,8 @@ export default class CxAssetLinkFormat extends CortexElement {
     private freezeTransformations;
     private upsertTransformation;
     /**
-     * Whether `crop` holds the size the Crop panel shows: the panel's own Apply, not a crop from
-     * outside (restored transformations, Undo, Reset).
+     * Whether `crop` holds the size the Crop panel shows. A crop from outside can hold it too (the
+     * initial 1x1), so only `editedCrop` tells the panel's own Apply apart.
      */
     private isCropPanelSize;
     /**

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

@@ -53,6 +53,7 @@ export type CxAssetLinkFormatCropPositionChangeEvent = CustomEvent<{
  * @property {string} position - The selected anchor position from the position picker (e.g. top-left, center-center).
  */
 export default class CxAssetLinkFormatCrop extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
@@ -67,6 +68,11 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
         'cx-space': typeof CxSpace;
         'cx-typography': typeof CxTypography;
     };
+    /**
+     * The size of a `widthRatio`:`heightRatio` crop in `unit`: the ratio itself, or in pixels the largest
+     * box of that ratio inside `maxWidth` x `maxHeight` (the bare ratio while that size is unknown).
+     */
+    private static getRatioSize;
     private readonly localize;
     /**
      * The base element for the details section.
@@ -202,6 +208,8 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      */
     aspectRatio: number;
     get selectedMode(): CropMode | undefined;
+    /** Whether the max size is known, so a ratio has a pixel size: the largest box of it inside. */
+    private get hasMaxSize();
     handleCropModeChange(): Promise<void>;
     handleOpenChange(): Promise<void>;
     private handleWidthChange;
@@ -211,9 +219,9 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
     private onPositionChange;
     /**
      * Handles the change of the unit of measurement for the crop settings.
-     * When the unit is changed to Aspect Ratio, it emits an event with the last applied settings for Aspect Ratio.
-     * When the unit is changed to Pixels, it emits an event with the last applied settings for Pixels.
-     * This allows the parent component to update the crop settings accordingly.
+     * Inline (every change is saved) carries the crop over to the new unit and keeps the mode, unless it
+     * is an auto mode. Otherwise it emits the last applied settings for the new unit and resets the mode
+     * to Free.
      */
     private onUnitChange;
     private handleInputChange;

package/library/packages/organisms/src/chatbot/chatbot.d.ts

@@ -26,6 +26,10 @@ import * as signalR from '@microsoft/signalr';
  *
  * @cssproperty [--width=400px] - The width of the chatbot.
  * @cssproperty [--height=600px] - The height of the chatbot.
+ * @cssproperty [--cx-panel-border-width=1px] - Width of the border under the chatbot header.
+ * @cssproperty [--cx-overlay-background-color=hsl(240deg 3.8% 46.1% / 33%)] - Background color of the full-screen overlay behind the chatbot. Dark theme: `hsl(0deg 0% 0% / 43%)`.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the chatbot, its minimized button and close icon, and assistant messages.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the chatbot header and of the messages.
  *
  * @typedef ChatbotEvent - {
  *  callback: (messageContent: string) => void;

package/library/packages/organisms/src/comment/comment.d.ts

@@ -27,6 +27,8 @@ declare global {
  * @event cx-recording-started - Emitted when the screen recorder has started.
  * @event cx-recording-stopped - Emitted when the screen recorder has stopped.
  * @event {{ error: Error }} cx-recording-error - Emitted when the screen recorder has error.
+ *
+ * @cssproperty [--cx-overlay-background-color=hsl(240deg 3.8% 46.1% / 33%)] - Background color of the backdrop behind the comment's overlay dialog. Dark theme: `hsl(0deg 0% 0% / 43%)`.
  */
 export default class CxComment<TCommentMenu extends CxCommentMenu = CxCommentMenu> extends CortexElement {
     static readonly styles: import('lit').CSSResult[];

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

@@ -17,6 +17,9 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty --button-custom-font-family - The button's font family, applied at every size.
  * @cssproperty --button-custom-font-style - The button's font style, applied at every size.
  * @cssproperty --button-custom-font-weight - The button's font weight, applied at every size.
+ * @cssproperty [--cx-button-font-size-medium=var(--cx-font-size-small)] - Default font size of the button, used when `--button-custom-font-size` is not set.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Default font family of the button, used when `--button-custom-font-family` is not set.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the outline button, including when focused. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxSbButton extends CxButton {
     static readonly dependencies: {

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

@@ -33,6 +33,8 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty [--icon-size=var(--cx-font-size-3x-large)] - The leading icon's width; its height scales proportionally. Custom appearance only.
  * @cssproperty [--border=light-dark(transparent, transparent) 0px] - The field's border color and width, completed into a `border` shorthand. Falls back to `--border-color` at 1px. Custom appearance only.
  * @cssproperty [--placeholder-color=var(--cx-input-placeholder-color)] - The placeholder text color. Custom appearance only.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the search field when `--search-box-custom-font-family` is not set.
+ * @cssproperty [--cx-input-placeholder-color=var(--cx-color-neutral-400)] - Color of the placeholder text, and the default of `--placeholder-color`.
  *
  * @csspart input - The input field for entering search queries.
  * @csspart icon - The icon displayed in the search box, typically a magnifying glass.

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

@@ -34,6 +34,8 @@ type TranslatableTextRecordOptions = {
  * keep returning the page content.
  *
  * @event cx-change - Emitted when the content builder changes.
+ *
+ * @cssproperty [--cx-overlay-background-color=hsl(240deg 3.8% 46.1% / 33%)] - Background color of the loading overlay. Dark theme: `hsl(0deg 0% 0% / 43%)`.
  */
 export default class CxContentBuilder extends CortexElement {
     static readonly styles: import('lit').CSSResult[];

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/rte-bubble-menu.d.ts

@@ -23,6 +23,13 @@ import { TemplateResult } from 'lit';
 import { default as CxAnchorDialog } from './anchor-dialog';
 import { default as CxImageDialog } from './image-dialog';
 import { CxSelectWithTooltip } from './select-with-tooltip';
+/**
+ * @summary Floating toolbar shown over a text selection in the rich text editor block.
+ *
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the bubble menu.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the bubble menu.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the bubble menu.
+ */
 export default class CxRTEBubbleMenu extends CortexElement {
     static readonly styles: import('lit').CSSResult[];
     static readonly dependencies: {

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-table-generator/rte-table-generator.d.ts

@@ -1,6 +1,12 @@
 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';
+/**
+ * @summary Grid picker for choosing the number of rows and columns of a new table in the rich text editor block.
+ *
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the grid cells.
+ * @cssproperty [--cx-menu-item-background-color-hover=var(--cx-color-primary-50)] - Background color of the highlighted grid cells. Dark theme: `var(--cx-color-neutral-100)`.
+ */
 export declare class CxRTETableGenerator extends CortexElement {
     static readonly styles: import('lit').CSSResult[];
     static readonly dependencies: {

package/library/packages/organisms/src/downloader/downloader.d.ts

@@ -41,6 +41,12 @@ declare global {
  * @cssproperty [--status-cell-width=140px] - The width of the status cell inside download item table.
  * @cssproperty [--actions-cell-width=100px] - The width of the actions cell inside download item table.
  * @cssproperty [--table-head-height=40px] - The height of the table header inside download item table.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of the search preview icon.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the search preview icon and of the table view and its cells.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the search preview icon.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the pagination bar.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the search preview icon. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the downloader container and of the table header.
  */
 export default class CxDownloader extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/organisms/src/file-on-demand/components/file-on-demand-asset/file-on-demand-asset.d.ts

@@ -27,6 +27,8 @@ import { default as CxFileOnDemandPinnedStatus } from '../file-on-demand-pinned-
  * @event {{ assetId: string }} cx-cancel-upload - Emitted when the user cancels an upload.
  *
  * @cssproperty [--cx-asset-thumbnail-width=56px] - The width of the asset thumbnail.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum width and height of the action spinner.
+ * @cssproperty [--cx-input-filled-background-color-hover=var(--cx-color-neutral-100)] - Background color of the row on hover.
  */
 export default class CxFileOnDemandAsset extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/organisms/src/find-and-replace/find-and-replace.d.ts

@@ -23,6 +23,7 @@ import { CSSResultGroup } from 'lit';
  * @event {{ findText: string }} cx-find-and-replace-next - Fired when the user navigates to the next match.
  *
  * @cssproperty [--find-and-replace-width=24rem] - Preferred dialog width token; used with viewport clamping on the inner dialog.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the find-and-replace panel.
  */
 export default class CxFindAndReplace extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/organisms/src/text-to-speech/text-to-speech.d.ts

@@ -27,6 +27,9 @@ import { TemplateResult } from 'lit';
  * @summary Text-to-speech component with rich text editing and voice synthesis capabilities.
  *
  * @event cx-change - Emitted when the color picker’s value changes.
+ *
+ * @cssproperty [--cx-input-color=var(--cx-color-neutral-900)] - Text color of the editor, also used for the markup highlights whose control is disabled.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the break menu.
  */
 export default class CxTextToSpeech extends CortexElement {
     static readonly styles: import('lit').CSSResult[];