@orangelogic/design-system 4.50.0 → 4.52.0

package/library/components/video.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/video.2jpE1tqO.js";
+import { n as e, t } from "../chunks/video.bGH-n4pZ.js";
 export { t as VIDEO_BACKGROUND_SIZE_BY_OBJECT_FIT, e as default };

package/library/package.json

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

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

@@ -23,6 +23,9 @@ import { default as CxIconButton } from '../icon-button/icon-button';
  * @csspart message - The container that wraps the alert’s main content.
  * @csspart close-button - The close button, an "cx-icon-button"
  * @csspart close-button__base - The close button’s exported "base" part.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the alert, tripled for its top border and the countdown bar height.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the alert.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the alert and background color of the countdown track.
  */
 export default class CxAlert extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -6,6 +6,9 @@ import { CSSResultGroup } from 'lit';
  * @slot (default) - The badge's content.
  *
  * @csspart base - The component's base wrapper.
+ * @cssproperty [--cx-input-height-large=40px] - Height and minimum width of a large badge.
+ * @cssproperty [--cx-input-height-medium=32px] - Height and minimum width of a medium badge.
+ * @cssproperty [--cx-input-height-small=24px] - Height and minimum width of a small badge.
  */
 export default class CxBadge extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -33,6 +33,18 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @cssproperty [--caret-font-size] - Overrides the caret icon's font size (defaults to `--cx-font-size-large`, or
  *  `--cx-font-size-medium` when `size="small"`). Useful when embedding the button somewhere it must match a
  *  smaller surrounding line-height.
+ * @cssproperty [--cx-button-border-radius-large=var(--cx-border-radius-medium)] - Border radius of a large and x-large button.
+ * @cssproperty [--cx-button-border-radius-medium=var(--cx-border-radius-medium)] - Border radius of a medium button.
+ * @cssproperty [--cx-button-border-radius-small=var(--cx-border-radius-medium)] - Border radius of a small button.
+ * @cssproperty [--cx-button-font-size-medium=var(--cx-font-size-small)] - Font size of the button label at every size.
+ * @cssproperty [--cx-button-text-transform=uppercase] - Text transform of the button label.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the button and of the overlap between grouped buttons.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the button.
+ * @cssproperty [--cx-input-height-x-large=48px] - Minimum height of an x-large button, also the width of an x-large circle button.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large button, also the width of a large circle button.
+ * @cssproperty [--cx-input-height-medium=32px] - Height of a medium button and the default button height, also the width of a medium circle button.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height of a small button, also the width of a small circle button.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of an outline default button. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxButton extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

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

@@ -22,6 +22,7 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty [--card-width=auto] - The width of the card.
  * @cssproperty [--card-height=auto] - The height of the card.
  * @cssproperty [--card-overflow=auto] - How the card's base handles overflowing content. Set to `clip` for cards that must never scroll.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the card.
  */
 export default class CxCard extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -27,6 +27,24 @@ import { default as CxIcon } from '../icon/icon';
  *
  * @cssproperty [--cx-checkbox-disabled-background=var(--cx-input-background-color)] - Background color of the control box when disabled. Override to customize the disabled appearance without affecting the shared opacity behavior.
  * @cssproperty [--cx-checkbox-disabled-border-color=var(--cx-input-border-color)] - Border color of the control box when disabled.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the checkbox control.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the checkbox.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the checkbox at every size.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the checkbox.
+ * @cssproperty [--cx-input-required-content='*'] - Content of the required marker after the label.
+ * @cssproperty [--cx-input-required-content-offset=-2px] - Inline start margin of the required marker.
+ * @cssproperty [--cx-checkbox-label-text-transform=none] - Text transform of the label.
+ * @cssproperty [--cx-toggle-size-small=16px] - Size of the control of a small checkbox.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Size of the control of a medium checkbox.
+ * @cssproperty [--cx-toggle-size-large=22px] - Size of the control of a large checkbox.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of the checkbox control.
+ * @cssproperty [--cx-input-background-color-hover=var(--cx-input-background-color)] - Background color of the unchecked control on hover.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the checkbox control. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of the unchecked control on hover. Dark theme: `var(--cx-color-primary-700)`.
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the control when the checkbox is invalid.
+ * @cssproperty [--cx-input-invalid-color=var(--cx-color-danger-700)] - Color of the label when the checkbox is invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus ring of the control when the checkbox is invalid and focused.
+ * @cssproperty [--cx-input-required-content-color=var(--cx-color-danger-500)] - Color of the required marker. Dark theme: `var(--cx-input-label-color)`.
  */
 export default class CxCheckbox extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

package/library/packages/atoms/src/components/color-picker/color-picker.d.ts

@@ -80,6 +80,13 @@ import { default as CxGradientStopList } from './components/gradient-stop-list/g
  * @cssproperty [--inline-border] - Border for `inline` pickers (defaults to the panel border token); set to `none` to remove the frame.
  * @cssproperty --control-button-color - The background color of button variant's control.
  * @cssproperty --control-caret-color - The color of button variant's control's caret.
+ * @cssproperty [--cx-input-height-medium=32px] - Width and height of the color preview swatch.
+ * @cssproperty [--cx-toggle-size-small=16px] - Size of the preview swatch in a small button-variant picker.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Size of the preview swatch in a medium button-variant picker.
+ * @cssproperty [--cx-toggle-size-large=22px] - Size of the preview swatch in a large button-variant picker.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of an inline picker and of the dropdown panel.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the picker and of the dropdown panel.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of an inline picker and of the dropdown panel.
  */
 export default class CxColorPicker extends CortexElement implements CortexFormControl {
     #private;

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

@@ -32,6 +32,17 @@ import { default as CxTooltip } from '../tooltip/tooltip';
  * @cssproperty --button-padding - The padding to use for the button.
  * @cssproperty --button-background-color - The background color to use for the button.
  * @cssproperty [--button-text-color=var(--cx-color-neutral)] - The text color to use for the button's label, including its hover and active states.
+ * @cssproperty [--cx-button-border-radius-large=var(--cx-border-radius-medium)] - Border radius of a large and x-large copy button.
+ * @cssproperty [--cx-button-border-radius-medium=var(--cx-border-radius-medium)] - Border radius of a medium copy button.
+ * @cssproperty [--cx-button-border-radius-small=var(--cx-border-radius-medium)] - Border radius of a small copy button.
+ * @cssproperty [--cx-button-font-size-medium=var(--cx-font-size-small)] - Font size of the copy button at every size when `--button-font-size` is not set.
+ * @cssproperty [--cx-button-text-transform=uppercase] - Text transform of the copy button.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the copy button.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the copy button when `--button-font-family` is not set.
+ * @cssproperty [--cx-input-height-x-large=48px] - Minimum height of an x-large copy button.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large copy button.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height of a medium copy button.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height of a small copy button.
  *
  * @animation copy.in - The animation to use when feedback icons animate in.
  * @animation copy.out - The animation to use when feedback icons animate out.

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

@@ -44,6 +44,8 @@ import { default as CxPopup } from '../popup/popup';
  * @cssproperty [--max-width=100vw] - The maximum width of the dialog.
  * @cssproperty [--max-height=100vh] - The maximum height of the dialog.
  * @cssproperty [--overlay-background-color=var(--cx-overlay-background-color)] - The background color of the overlay.
+ * @cssproperty [--cx-overlay-background-color=hsl(240deg 3.8% 46.1% / 33%)] - Background color of the overlay behind the dialog, read through `--overlay-background-color`. Dark theme: `hsl(0deg 0% 0% / 43%)`.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the dialog panel.
  *
  * @animation dialog.show - The animation to use when showing the dialog.
  * @animation dialog.hide - The animation to use when hiding the dialog.

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

@@ -11,6 +11,8 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty --border-style - The style of the divider.
  * @cssproperty --padding - The padding of the divider.
  * @cssproperty --max-width - The maximum width of the divider.
+ * @cssproperty [--cx-panel-border-width=1px] - Default width of the divider, used when `--width` is not set.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Default color of the divider, used when `--color` is not set.
  */
 export default class CxDivider extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -41,6 +41,9 @@ import { default as CxIconButton } from '../icon-button/icon-button';
  * @cssproperty --body-spacing - The amount of padding to use for the body.
  * @cssproperty --footer-spacing - The amount of padding to use for the footer.
  * @cssproperty [--font-family=var(--cx-font-sans)] - Font family used for header, body, and footer. Default: var(--cx-font-sans)
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Color of the border below the drawer header. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-overlay-background-color=hsl(240deg 3.8% 46.1% / 33%)] - Background color of the overlay behind the drawer. Dark theme: `hsl(0deg 0% 0% / 43%)`.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the drawer panel.
  *
  * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
  * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.

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

@@ -29,6 +29,9 @@ import { default as CxPopup } from '../popup/popup';
  *
  * @cssproperty [--max-height=var(--auto-size-available-height)] - The max height of the dropdown panel. If it is larger than the available height, the available height will take precedence.
  * @cssproperty [--trigger-display=block] - `display` value for the trigger slot wrapper (e.g. `flex` for stretched triggers).
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the dropdown panel.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the dropdown panel.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the dropdown panel.
  */
 export default class CxDropdown extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -18,6 +18,12 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @csspart base - The component's base wrapper.
  *
  * @cssproperty --group-divider-color - The color of the divider between icon buttons in a group.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of an outline icon button, and the overlap between icon buttons in a group.
+ * @cssproperty [--cx-input-height-x-large=48px] - Minimum height and width of an x-large icon button.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large icon button.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height and width of a medium icon button.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height and width of a small icon button.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of an outline icon button. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxIconButton extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -33,6 +33,7 @@ import { default as CxSpace } from '../space/space';
  * @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.
+ * @cssproperty [--cx-input-icon-color=var(--cx-color-neutral-500)] - Default color of the icon shown when the image fails to load, used when `--fallback-icon-color` is not set.
  *
  * @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).

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

@@ -38,6 +38,45 @@ import { default as CxIcon } from '../icon/icon';
  * @csspart file-result - The text that displays the selected file name.
  * @csspart character-count-text - The text that displays the character count.
  * @cssproperty [--cx-input-auto-grow-min-width=0] - The minimum width used when `auto-grow` is enabled.
+ * @cssproperty [--cx-input-border-radius-large=var(--cx-border-radius-large)] - Border radius of a large input.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of a medium input.
+ * @cssproperty [--cx-input-border-radius-small=var(--cx-border-radius-large)] - Border radius of a small input.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of a standard input, and the overlap between inputs in an input group.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the input.
+ * @cssproperty [--cx-input-font-size-large=var(--cx-font-size-large)] - Font size used to vertically position the label of a large input.
+ * @cssproperty [--cx-input-font-size-medium=var(--cx-font-size-medium)] - Font size used to vertically position the label of a medium input.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the input at every size.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the input and the character count.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large input.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height of a medium input.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height of a small input.
+ * @cssproperty [--cx-input-letter-spacing=var(--cx-letter-spacing-normal)] - Letter spacing of the input and the character count.
+ * @cssproperty [--cx-input-spacing-large=var(--cx-spacing-medium)] - Horizontal padding of a large input.
+ * @cssproperty [--cx-input-spacing-medium=var(--cx-spacing-medium)] - Horizontal padding of a medium input.
+ * @cssproperty [--cx-input-spacing-small=var(--cx-spacing-medium)] - Horizontal padding of a small input, and the spacing around the icons and buttons of a large input.
+ * @cssproperty [--cx-input-label-text-transform=none] - Text transform of the label.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of a standard input.
+ * @cssproperty [--cx-input-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled standard input.
+ * @cssproperty [--cx-input-background-color-focus=var(--cx-input-background-color)] - Background color of a standard input on focus.
+ * @cssproperty [--cx-input-background-color-hover=var(--cx-input-background-color)] - Background color of a standard input on hover.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of a standard input. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-disabled=var(--cx-color-neutral-300)] - Border color of a disabled standard input. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-focus=var(--cx-color-primary)] - Border color of a standard input on focus. Dark theme: `var(--cx-color-primary-600)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of a standard input on hover. Dark theme: `var(--cx-color-primary-700)`.
+ * @cssproperty [--cx-input-color=var(--cx-color-neutral-900)] - Text color of the input.
+ * @cssproperty [--cx-input-color-disabled=var(--cx-color-neutral-900)] - Text color of a disabled standard input.
+ * @cssproperty [--cx-input-color-focus=var(--cx-color-neutral-900)] - Text color of a standard input on focus.
+ * @cssproperty [--cx-input-color-hover=var(--cx-color-neutral-900)] - Text color of the input on hover.
+ * @cssproperty [--cx-input-filled-background-color=var(--cx-color-neutral-100)] - Background color of a filled input.
+ * @cssproperty [--cx-input-filled-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled filled input.
+ * @cssproperty [--cx-input-filled-background-color-focus=var(--cx-color-neutral-100)] - Background color of a filled input on focus.
+ * @cssproperty [--cx-input-filled-background-color-hover=var(--cx-color-neutral-100)] - Background color of a filled input on hover.
+ * @cssproperty [--cx-input-icon-color=var(--cx-color-neutral-500)] - Color of the prefix and suffix icons and of the clear and password toggle buttons.
+ * @cssproperty [--cx-input-icon-color-hover=var(--cx-color-neutral-600)] - Color of the clear and password toggle buttons on hover.
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the input when invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus ring of the input when invalid and focused.
+ * @cssproperty [--cx-input-placeholder-color=var(--cx-color-neutral-400)] - Color of the placeholder.
+ * @cssproperty [--cx-input-placeholder-color-disabled=var(--cx-color-neutral-600)] - Color of the placeholder in a disabled standard input.
  */
 export default class CxInput extends CortexElement implements CortexFormControl {
     #private;

package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts

@@ -1,5 +1,8 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { CSSResultGroup, TemplateResult } from 'lit';
+import { default as CxButton } from '../button/button';
+import { default as CxResizeObserver } from '../resize-observer/resize-observer';
+import { default as CxTooltip } from '../tooltip/tooltip';
 /**
  * @summary A web component for clamping text to a specific number of lines, allowing for single or multiline ellipsis.
  *
@@ -8,6 +11,11 @@ import { CSSResultGroup, TemplateResult } from 'lit';
  */
 export default class CxLineClamp extends CortexElement {
     static styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-resize-observer': typeof CxResizeObserver;
+        'cx-tooltip': typeof CxTooltip;
+    };
     /**
      * The number of lines to clamp the text to.
      */

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

@@ -18,6 +18,10 @@ export interface MenuSelectEventDetail {
  * @attr {boolean} no-uncheck - When true, checkbox items do not toggle off when activated while already checked; applies to all checkbox items in this menu and combines with each item's own `no-uncheck`.
  *
  * @event {{ item: CxMenuItem }} cx-select - Emitted when a menu item is selected.
+ *
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the menu and width of its dividers.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the menu.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the menu and color of its dividers.
  */
 export default class CxMenu extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -33,6 +33,8 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @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.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the submenu popup.
+ * @cssproperty [--cx-menu-item-background-color-hover=var(--cx-color-primary-50)] - Background color of the menu item on hover and keyboard focus, and the default background of the active item. Dark theme: `var(--cx-color-neutral-100)`.
  */
 export default class CxMenuItem extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -25,6 +25,7 @@ import { default as CxSpace } from '../space/space';
  * @cssproperty [--option-selected-font-weight=var(--cx-font-weight-regular)] - The selected option's font weight.
  * @cssproperty [--option-selected-help-text-color=var(--cx-color-primary)] - The selected option's help text color.
  * @cssproperty [--option-selected-help-text-font-weight=var(--cx-font-weight-regular)] - The selected option's help text font weight.
+ * @cssproperty [--cx-menu-item-background-color-hover=var(--cx-color-primary-50)] - Background color of the hovered option and of the current option. Dark theme: `var(--cx-color-neutral-100)`.
  */
 export default class CxOption extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -15,6 +15,7 @@ import { default as CxTypography } from '../typography/typography';
  * @description Set `show-pagination-input` to render an editable page input in page counters. Leave it unset to keep the original plain-text counters. When only one page is available, navigation buttons are hidden and page counters remain plain text. Use `back-icon-name` and `next-icon-name` to override the previous/next icon-button glyphs (see the icon component for available names). Use `icon-button-size` for all navigation icon buttons (`small`, `medium`, `large`, `x-large`).
  *
  * @cssproperty --width - The width of the select
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the page number input.
  *
  * @event {{ pageIndex: number }} cx-page-change - Emitted when the active page changes.
  * @event {{ pageSize: number }} cx-page-size-change - Emitted when the number of items per page changes.

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

@@ -16,6 +16,20 @@ import { default as CxIcon } from '../icon/icon';
  * @csspart control--checked - The radio control when the radio is checked.
  * @csspart checked-icon - The checked icon, an `<cx-icon>` element.
  * @csspart label - The container that wraps the radio's label.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the radio control.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the radio.
+ * @cssproperty [--cx-input-font-size-medium=var(--cx-font-size-medium)] - Base font size of the radio, replaced by the small font size at every size.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the radio at every size.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the radio.
+ * @cssproperty [--cx-radio-label-text-transform=none] - Text transform of the label.
+ * @cssproperty [--cx-toggle-size-small=16px] - Size of the control of a small radio.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Size of the control of a medium radio.
+ * @cssproperty [--cx-toggle-size-large=22px] - Size of the control of a large radio.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of the radio control.
+ * @cssproperty [--cx-input-background-color-hover=var(--cx-input-background-color)] - Background color of the unchecked control on hover.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the radio control. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of the unchecked control on hover. Dark theme: `var(--cx-color-primary-700)`.
+ * @cssproperty [--cx-input-label-color=var(--cx-color-neutral-700)] - Text color of the radio and its label.
  */
 export default class CxRadio extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -18,6 +18,17 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty [--checked-background-color=var(--cx-color-neutral-0)] - The background color of the radio button when it is checked.
  * @cssproperty [--checked-hover-border-color=var(--cx-color-primary-500)] - The border color of the radio button when it is checked and hovered.
  * @cssproperty [--checked-hover-background-color=var(--cx-color-neutral-0)] - The background color of the radio button when it is checked and hovered.
+ * @cssproperty [--cx-button-border-radius-large=var(--cx-border-radius-medium)] - Border radius of a large radio button.
+ * @cssproperty [--cx-button-border-radius-medium=var(--cx-border-radius-medium)] - Border radius of a medium radio button.
+ * @cssproperty [--cx-button-border-radius-small=var(--cx-border-radius-medium)] - Border radius of a small radio button.
+ * @cssproperty [--cx-button-font-size-medium=var(--cx-font-size-small)] - Font size of the radio button label at every size.
+ * @cssproperty [--cx-button-text-transform=uppercase] - Text transform of the radio button label.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the radio button and of the overlap between grouped radio buttons.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the radio button.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large radio button, also the corner radius of a large pill radio button.
+ * @cssproperty [--cx-input-height-medium=32px] - Height of a medium radio button and the default radio button height, also the corner radius of a medium pill radio button.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height of a small radio button, also the corner radius of a small pill radio button.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the radio button. Dark theme: `var(--cx-color-neutral-400)`.
  *
  * @csspart base - The component's base wrapper.
  * @csspart button - The internal `<button>` element.

package/library/packages/atoms/src/components/radio-card/radio-card.d.ts

@@ -24,6 +24,9 @@ import { default as CxRadio } from '../radio/radio';
  * @cssproperty [--card-width=auto] - The width of the radio card.
  * @cssproperty [--card-height=auto] - The height of the radio card.
  * @cssproperty [--radio-card-overflow=auto] - How the radio card handles overflowing content. Set to `clip` for tiles that must never scroll.
+ * @cssproperty [--cx-radio-card-label-text-transform=none] - Text transform of the radio card label.
+ * @cssproperty [--cx-toggle-size-large=22px] - Radio control size the description is indented by to line up with the label.
+ * @cssproperty [--cx-input-label-color=var(--cx-color-neutral-700)] - Default color of the label and description text.
  *
  * @slot - The radio’s label.
  * @slot image - The radio’s image.

package/library/packages/atoms/src/components/radio-group/radio-group.d.ts

@@ -19,6 +19,8 @@ import { default as CxButtonGroup } from '../button-group/button-group';
  * @csspart form-control-help-text - The help text's wrapper.
  * @csspart button-group - The button group that wraps radio buttons.
  * @csspart button-group__base - The button group's `base` part.
+ * @cssproperty [--cx-input-required-content='*'] - Content of the required marker after the radio group's label.
+ * @cssproperty [--cx-input-required-content-offset=-2px] - Inline-start margin of the required marker after the radio group's label.
  */
 export default class CxRadioGroup extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

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

@@ -41,6 +41,9 @@ import { default as CxTooltip } from '../tooltip/tooltip';
  * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
  * @cssproperty --track-height - The height of the track.
  * @cssproperty --track-active-offset - The point of origin of the active track.
+ * @cssproperty [--cx-input-height-medium=32px] - Line height of the range control.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the thumbs.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the thumbs.
  */
 export default class CxRange extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

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

@@ -16,6 +16,8 @@ import { default as CxIcon } from '../icon/icon';
  * @cssproperty --symbol-size - The size of symbols.
  * @cssproperty [--symbol-container-size=40px] - The size of the symbol container when using `outlined` variant.
  * @cssproperty --symbol-spacing - The spacing to use around symbols.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the symbols in the `outlined` variant.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of the symbols in the `outlined` variant. Dark theme: `var(--cx-color-neutral-400)`.
  */
 export default class CxRating extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -51,6 +51,44 @@ import { default as CxTag } from '../tag/tag';
  *
  * @cssproperty [--select-max-height=var(--auto-size-available-height)] - The max height of the listbox. Setting it replaces the popup's auto-size ceiling, which is what you want when the select sits inside a host that makes auto-size mis-measure. Leave it unset to keep following the available space.
  * @cssproperty --select-font-size - The font size of the select.
+ * @cssproperty [--cx-input-border-radius-large=var(--cx-border-radius-large)] - Border radius of a large select's combobox.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of a medium select's combobox.
+ * @cssproperty [--cx-input-border-radius-small=var(--cx-border-radius-large)] - Border radius of a small select's combobox.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the select's combobox and of the overlap between grouped inputs.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the select's combobox.
+ * @cssproperty [--cx-input-font-size-large=var(--cx-font-size-large)] - Font size used to vertically center the label of a large select.
+ * @cssproperty [--cx-input-font-size-medium=var(--cx-font-size-medium)] - Font size used to vertically center the label of a medium select.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the select's combobox at every size, also used to center the label of a small select.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the select's combobox.
+ * @cssproperty [--cx-input-height-large=40px] - Minimum height of a large select's combobox.
+ * @cssproperty [--cx-input-height-medium=32px] - Minimum height of a medium select's combobox.
+ * @cssproperty [--cx-input-height-small=24px] - Minimum height of a small select's combobox.
+ * @cssproperty [--cx-input-letter-spacing=var(--cx-letter-spacing-normal)] - Letter spacing of the select's combobox.
+ * @cssproperty [--cx-input-spacing-large=var(--cx-spacing-medium)] - Inline padding of a large select's combobox and spacing around its prefix and clear button.
+ * @cssproperty [--cx-input-spacing-medium=var(--cx-spacing-medium)] - Inline padding of a medium select's combobox and spacing around its prefix and clear button.
+ * @cssproperty [--cx-input-spacing-small=var(--cx-spacing-medium)] - Inline padding of a small select's combobox and spacing around its prefix and clear button.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the listbox.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of a standard select's combobox.
+ * @cssproperty [--cx-input-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled standard select's combobox.
+ * @cssproperty [--cx-input-background-color-focus=var(--cx-input-background-color)] - Background color of a standard select's combobox when focused or open.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of a standard select's combobox. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-disabled=var(--cx-color-neutral-300)] - Border color of a disabled standard select's combobox. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-focus=var(--cx-color-primary)] - Border color of a standard select's combobox when focused or open. Dark theme: `var(--cx-color-primary-600)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of the select's combobox on hover. Dark theme: `var(--cx-color-primary-700)`.
+ * @cssproperty [--cx-input-color=var(--cx-color-neutral-900)] - Text color of the select.
+ * @cssproperty [--cx-input-color-disabled=var(--cx-color-neutral-900)] - Text color of a disabled standard select.
+ * @cssproperty [--cx-input-color-hover=var(--cx-color-neutral-900)] - Text color of the select on hover.
+ * @cssproperty [--cx-input-filled-background-color=var(--cx-color-neutral-100)] - Background color of a filled select's combobox.
+ * @cssproperty [--cx-input-filled-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled filled select's combobox.
+ * @cssproperty [--cx-input-filled-background-color-focus=var(--cx-color-neutral-100)] - Background color of a filled select's combobox when focused or open.
+ * @cssproperty [--cx-input-filled-background-color-hover=var(--cx-color-neutral-100)] - Background color of a filled select's combobox on hover.
+ * @cssproperty [--cx-input-icon-color=var(--cx-color-neutral-500)] - Color of the clear button.
+ * @cssproperty [--cx-input-icon-color-hover=var(--cx-color-neutral-600)] - Color of the clear button on hover.
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the select's combobox when invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus shadow of the select's combobox when invalid.
+ * @cssproperty [--cx-input-placeholder-color=var(--cx-color-neutral-400)] - Color of the placeholder, prefix and suffix.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the listbox.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the listbox.
  */
 export default class CxSelect extends CortexElement implements CortexFormControl {
     #private;

package/library/packages/atoms/src/components/split-panel/split-panel.d.ts

@@ -19,6 +19,7 @@ import { CSSResultGroup } from 'lit';
  *  usually wider than the divider to facilitate easier dragging.
  * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
  * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Color of the divider between the panels.
  */
 export default class CxSplitPanel extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -23,6 +23,18 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty --width - The width of the switch.
  * @cssproperty --height - The height of the switch.
  * @cssproperty --thumb-size - The size of the thumb.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of the switch's track and thumb.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the switch.
+ * @cssproperty [--cx-input-font-size-large=var(--cx-font-size-large)] - Size of the checked and unchecked icons in the thumb.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the switch at every size.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the switch.
+ * @cssproperty [--cx-input-required-content='*'] - Content of the required marker after the switch's label.
+ * @cssproperty [--cx-input-required-content-offset=-2px] - Inline-start margin of the required marker after the switch's label.
+ * @cssproperty [--cx-toggle-size-small=16px] - Height of a small switch; the thumb size is derived from it.
+ * @cssproperty [--cx-toggle-size-medium=20px] - Height of a medium switch; the thumb size is derived from it.
+ * @cssproperty [--cx-toggle-size-large=22px] - Height of a large switch; the thumb size is derived from it.
+ * @cssproperty [--cx-input-label-color=var(--cx-color-neutral-700)] - Text color of the switch's label.
+ * @cssproperty [--cx-input-required-content-color=var(--cx-color-danger-500)] - Color of the required marker after the switch's label. Dark theme: `var(--cx-input-label-color)`.
  */
 export default class CxSwitch extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

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

@@ -17,6 +17,16 @@ import { default as CxLineClamp } from '../line-clamp/line-clamp';
  * @csspart suffix - The container that wraps the suffix slot.
  * @csspart remove-button - The tag's remove button, an `<cx-icon-button>`.
  * @csspart remove-button__base - The remove button's exported `base` part.
+ * @cssproperty [--cx-button-font-size-large=var(--cx-font-size-medium)] - Font size of a large tag.
+ * @cssproperty [--cx-button-font-size-medium=var(--cx-font-size-small)] - Font size of a medium tag.
+ * @cssproperty [--cx-button-font-size-small=var(--cx-font-size-x-small)] - Font size of a small tag.
+ * @cssproperty [--cx-input-border-radius-large=var(--cx-border-radius-large)] - Border radius of a large tag.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of a medium tag.
+ * @cssproperty [--cx-input-border-radius-small=var(--cx-border-radius-large)] - Border radius of a small tag.
+ * @cssproperty [--cx-input-border-width=1px] - Border width subtracted twice from the input height to get the tag's line height.
+ * @cssproperty [--cx-input-height-large=40px] - Base height of a large tag; the tag is 80% of it and its line height is derived from it.
+ * @cssproperty [--cx-input-height-medium=32px] - Base height of a medium tag; the tag is 80% of it and its line height is derived from it.
+ * @cssproperty [--cx-input-height-small=24px] - Base height of a small tag; the tag is 80% of it and its line height is derived from it.
  */
 export default class CxTag extends CortexElement {
     static styles: CSSResultGroup;

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

@@ -21,6 +21,44 @@ import { CSSResultGroup } from 'lit';
  * @csspart textarea - The internal `<textarea>` control.
  * @csspart character-count - The container that wraps the character count.
  *
+ * @cssproperty [--cx-input-border-radius-large=var(--cx-border-radius-large)] - Border radius of a large textarea.
+ * @cssproperty [--cx-input-border-radius-medium=var(--cx-border-radius-large)] - Border radius of a medium textarea.
+ * @cssproperty [--cx-input-border-radius-small=var(--cx-border-radius-large)] - Border radius of a small textarea.
+ * @cssproperty [--cx-input-border-width=1px] - Border width of a standard textarea.
+ * @cssproperty [--cx-input-font-family=var(--cx-font-sans)] - Font family of the textarea.
+ * @cssproperty [--cx-input-font-size-small=var(--cx-font-size-small)] - Font size of the textarea at every size.
+ * @cssproperty [--cx-input-font-weight=var(--cx-font-weight-regular)] - Font weight of the textarea and its character count.
+ * @cssproperty [--cx-input-height-large=40px] - Height used to vertically center the label of a large textarea.
+ * @cssproperty [--cx-input-height-medium=32px] - Height used to vertically center the label of a medium textarea.
+ * @cssproperty [--cx-input-height-small=24px] - Height used to vertically center the label of a small textarea.
+ * @cssproperty [--cx-input-letter-spacing=var(--cx-letter-spacing-normal)] - Letter spacing of the textarea and its character count.
+ * @cssproperty [--cx-input-spacing-large=var(--cx-spacing-medium)] - Horizontal padding of a large textarea.
+ * @cssproperty [--cx-input-spacing-medium=var(--cx-spacing-medium)] - Horizontal padding of a medium textarea.
+ * @cssproperty [--cx-input-spacing-small=var(--cx-spacing-medium)] - Horizontal padding of a small textarea.
+ * @cssproperty [--cx-input-label-font-size-large=var(--cx-font-size-x-small)] - Font size of the label of a large textarea.
+ * @cssproperty [--cx-input-label-font-size-medium=var(--cx-font-size-x-small)] - Font size of the label of a medium textarea.
+ * @cssproperty [--cx-input-label-font-size-small=var(--cx-font-size-x-small)] - Font size of the label of a small textarea.
+ * @cssproperty [--cx-input-background-color=var(--cx-color-neutral-0)] - Background color of a standard textarea.
+ * @cssproperty [--cx-input-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled standard textarea.
+ * @cssproperty [--cx-input-background-color-focus=var(--cx-input-background-color)] - Background color of a standard textarea when focused.
+ * @cssproperty [--cx-input-background-color-hover=var(--cx-input-background-color)] - Background color of a standard textarea on hover.
+ * @cssproperty [--cx-input-border-color=var(--cx-color-neutral-300)] - Border color of a standard textarea. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-disabled=var(--cx-color-neutral-300)] - Border color of a disabled standard textarea. Dark theme: `var(--cx-color-neutral-400)`.
+ * @cssproperty [--cx-input-border-color-focus=var(--cx-color-primary)] - Border color of a standard textarea when focused. Dark theme: `var(--cx-color-primary-600)`.
+ * @cssproperty [--cx-input-border-color-hover=var(--cx-color-primary-300)] - Border color of a standard textarea on hover. Dark theme: `var(--cx-color-primary-700)`.
+ * @cssproperty [--cx-input-color=var(--cx-color-neutral-900)] - Text color of the textarea.
+ * @cssproperty [--cx-input-color-disabled=var(--cx-color-neutral-900)] - Text color of a disabled standard textarea.
+ * @cssproperty [--cx-input-color-focus=var(--cx-color-neutral-900)] - Text color of a standard textarea when focused.
+ * @cssproperty [--cx-input-color-hover=var(--cx-color-neutral-900)] - Text color of a standard textarea on hover.
+ * @cssproperty [--cx-input-filled-background-color=var(--cx-color-neutral-100)] - Background color of a filled textarea.
+ * @cssproperty [--cx-input-filled-background-color-disabled=var(--cx-color-neutral-100)] - Background color of a disabled filled textarea.
+ * @cssproperty [--cx-input-filled-background-color-focus=var(--cx-color-neutral-100)] - Background color of a filled textarea when focused.
+ * @cssproperty [--cx-input-filled-background-color-hover=var(--cx-color-neutral-100)] - Background color of a filled textarea on hover.
+ * @cssproperty [--cx-input-invalid-border-color=var(--cx-color-danger)] - Border color of the textarea when invalid.
+ * @cssproperty [--cx-input-invalid-shadow=0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300)] - Focus shadow of the textarea when invalid.
+ * @cssproperty [--cx-input-placeholder-color=var(--cx-color-neutral-400)] - Color of the placeholder.
+ * @cssproperty [--cx-input-placeholder-color-disabled=var(--cx-color-neutral-600)] - Color of the placeholder in a disabled standard textarea.
+ *
  * @typedef {number | 'max'} TextareaRows - Use a number for a fixed row count. Use `'max'` to fill the parent container height (parent must have a definite height). With `'max'`, `resize="vertical"` and `resize="none"` work; `resize="auto"` does not (it is disabled).
  */
 export default class CxTextarea extends CortexElement implements CortexFormControl {

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

@@ -25,6 +25,15 @@ import { default as CxPopup, VirtualElement } from '../popup/popup';
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
  * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ * @cssproperty [--cx-tooltip-arrow-size=0] - Size of the tooltip arrow.
+ * @cssproperty [--cx-tooltip-border-radius=var(--cx-border-radius-medium)] - Border radius of the tooltip body.
+ * @cssproperty [--cx-tooltip-font-family=var(--cx-font-sans)] - Font family of the tooltip text.
+ * @cssproperty [--cx-tooltip-font-size=var(--cx-font-size-small)] - Font size of the tooltip text.
+ * @cssproperty [--cx-tooltip-font-weight=var(--cx-font-weight-regular)] - Font weight of the tooltip text.
+ * @cssproperty [--cx-tooltip-line-height=var(--cx-line-height-medium)] - Line height of the tooltip text.
+ * @cssproperty [--cx-tooltip-padding=var(--cx-spacing-2x-small) var(--cx-spacing-x-small)] - Padding of the tooltip body.
+ * @cssproperty [--cx-tooltip-background-color=#27272A] - Background color of the tooltip body and its arrow.
+ * @cssproperty [--cx-tooltip-color=#FFF] - Text color of the tooltip.
  *
  * @animation tooltip.show - The animation to use when showing the tooltip.
  * @animation tooltip.hide - The animation to use when hiding the tooltip.

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

@@ -47,6 +47,7 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @cssproperty [--active-background-color=var(--cx-color-neutral-200)] - The background color of the active tree item.
  * @cssproperty [--item-padding=var(--cx-spacing-x-small) var(--cx-spacing-small)] - The padding of the tree item.
  * @cssproperty [--hover-color=var(--cx-color-primary)] - The label color of the hovered tree item. Only applied when `variant` is `text`.
+ * @cssproperty [--cx-menu-item-background-color-hover=var(--cx-color-primary-50)] - Default background color of a hovered tree item, used when `--hover-background-color` is not set. Dark theme: `var(--cx-color-neutral-100)`.
  *
  * When `max-lines` is set, the label is wrapped in a `cx-line-clamp` and the text is clamped with an ellipsis
  * after the given number of lines. A tooltip with the full text is shown automatically when clamping is active.

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

@@ -14,6 +14,10 @@ import { default as CxRichTextTableDialog } from '../rich-text-table-dialog/rich
  * caret is inside a table (selecting the table node before running those commands), plus row/column actions. When
  * `feat-suggestion` is enabled and there is a non-empty selection, it also renders suggestion actions for annotation
  * and delete-selection.
+ *
+ * @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 CxRichTextBubbleMenu extends CortexElement implements TiptapBubbleMenuHost {
     static readonly styles: CSSResultGroup;

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

@@ -98,6 +98,9 @@ import { default as CxRichTextVideoDialog, BrowseVideo } from '../rich-text-vide
  *
  * @csspart base - Root wrapper of the toolbar.
  * @cssproperty --icon-size - The icon size in the toolbar and should be treated as both width and height, since the icon is square.
+ * @cssproperty [--cx-panel-border-width=1px] - Border width of the table insert grid panel.
+ * @cssproperty [--cx-panel-background-color=var(--cx-color-neutral-0)] - Background color of the table insert grid panel.
+ * @cssproperty [--cx-panel-border-color=var(--cx-color-neutral-200)] - Border color of the table insert grid panel.
  */
 export default class CxRichTextToolbar extends CortexElement {
     static readonly styles: CSSResultGroup;