@orangelogic/design-system 2.19.0-ci.5

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

@@ -0,0 +1,138 @@
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event cx-blur - Emitted when the control loses focus.
+ * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event cx-focus - Emitted when the control gains focus.
+ * @event cx-input - Emitted when the control receives input.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ * @csspart character-count - The container that wraps the character count.
+ */
+export default class CxTextarea extends CortexElement implements CortexFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private resizeObserver;
+    input: HTMLTextAreaElement;
+    private hasFocus;
+    title: string;
+    /** The name of the textarea, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the textarea, submitted as a name/value pair with form data. */
+    value: string;
+    /** The textarea's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a filled textarea. */
+    filled: boolean;
+    /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** Placeholder text to show as a hint when the input is empty. */
+    placeholder: string;
+    /** The number of rows to display by default. */
+    rows: number;
+    /** Controls how the textarea can be resized. */
+    resize: 'none' | 'vertical' | 'auto';
+    /** Disables the textarea. */
+    disabled: boolean;
+    /** Makes the textarea readonly. */
+    readonly: boolean;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string | HTMLElement | undefined;
+    /** Makes the textarea a required field. */
+    required: boolean;
+    /** The minimum length of input that will be considered valid. */
+    minlength: number;
+    /** The maximum length of input that will be considered valid. */
+    maxlength: number;
+    /** Show total characters in the input. */
+    showLength: boolean;
+    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+    autoCapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /** Indicates whether the browser's autocorrect feature is on or off. */
+    autoCorrect: 'off' | 'on';
+    /**
+     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+     */
+    autocomplete: string;
+    /** Indicates that the input should receive focus on page load. */
+    autoFocus: boolean;
+    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+    enterKeyHint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Enables spell checking on the textarea. */
+    spellCheck: boolean;
+    /**
+     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+     * keyboard on supportive devices.
+     */
+    inputMode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleBlur;
+    private handleChange;
+    private handleFocus;
+    private handleInput;
+    private handleInvalid;
+    private setTextareaHeight;
+    handleDisabledChange(): void;
+    handleRowsChange(): void;
+    handleValueChange(): Promise<void>;
+    /** Sets focus on the textarea. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the textarea. */
+    blur(): void;
+    /** Selects all the text in the textarea. */
+    select(): void;
+    /** Gets or sets the textarea's scroll position. */
+    scrollPosition(position?: {
+        left?: number;
+        top?: number;
+    }): {
+        left: number;
+        top: number;
+    } | undefined;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-textarea': CxTextarea;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,39 @@
+import { default as CxTypography } from '../typography/typography.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TypographyVariant } from '../../../../types/src/typography';
+import { TimecodeMode } from '../../../../types/src/video-editor';
+import { CSSResultGroup, nothing } from 'lit';
+
+/**
+ * @summary CxTimecode is a component that displays a timecode.
+ */
+export default class CxTimecode extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-typography': typeof CxTypography;
+    };
+    /**
+     * The time values for the time based feature.
+     */
+    time: number[];
+    /**
+     * The timecode mode for the time based feature.
+     */
+    timecodeMode: TimecodeMode;
+    /**
+     * The frame rate for the time based feature.
+     */
+    frameRate: number;
+    /**
+     * The typography variant for the timecode.
+     */
+    typographyVariant: TypographyVariant;
+    timeString: string;
+    handleTimeChange(): void;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-timecode': CxTimecode;
+    }
+}

package/library/packages/atoms/src/components/timecode/timecode.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,111 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxPopup, VirtualElement } from '../popup/popup';
+
+/**
+ * @summary Tooltips display additional information based on a specific action.
+ *
+ * @description A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip.
+ * If you need the tooltip to show up for multiple elements, nest them inside a container first. </br> </br>
+ * Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
+ *
+ * @slot (default) - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event cx-show - Emitted when the tooltip begins to show.
+ * @event cx-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event cx-hide - Emitted when the tooltip begins to hide.
+ * @event cx-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<cx-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+
+ * @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.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+export default class CxTooltip extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-popup': typeof CxPopup;
+    };
+    private hoverTimeout;
+    private readonly localize;
+    private closeWatcher;
+    defaultSlot: HTMLSlotElement;
+    body: HTMLElement;
+    popup: CxPopup;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
+     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
+     * `anchor` slot instead.
+     */
+    anchor: Element | string | VirtualElement;
+    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+    content: string;
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the tooltip so it won't show when triggered. */
+    disabled: boolean;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
+    distance: number;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: string;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
+    hoist: boolean;
+    /**
+     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+     * active.
+     */
+    hoverBridge: boolean;
+    /** The flip boundary for the popup. */
+    flipBoundary: Element | Element[];
+    /** The shift boundary for the popup. */
+    shiftBoundary: Element | Element[];
+    constructor();
+    disconnectedCallback(): void;
+    runFirstUpdated(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    private handleDocumentKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Hides the tooltip */
+    hide(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tooltip': CxTooltip;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,150 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TreeSelection } from '../../../../types/src/tree';
+import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as Sortable } from 'sortablejs';
+import { default as CxTreeItem } from '../tree-item/tree-item';
+
+export declare function syncParentItem(treeItem: CxTreeItem): void;
+export declare function syncAncestors(treeItem: CxTreeItem, selection?: TreeSelection): void;
+export declare function syncCheckboxes(changedTreeItem: CxTreeItem, initialSync?: boolean, selection?: TreeSelection): void;
+/**
+ * @summary The <cx-tree> component is used to display a hierarchical list of selectable [tree items](?s=atoms&id=/tree-item). Items with children can be expanded and collapsed as desired by the user.
+ *
+ * @event {{ selection: CxTreeItem[] }} cx-selection-change - Emitted when a tree item is selected or deselected.
+ *
+ * @slot (default) - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<cx-icon>`.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<cx-icon>`.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty [--indent-size=var(--cx-spacing-medium)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-guide-color=var(--cx-color-neutral-200)] - The color of the indentation line.
+ * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
+ *  indentation line's starting position.
+ * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
+ * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
+ */
+export default class CxTree extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    expandedIconSlot: HTMLSlotElement;
+    collapsedIconSlot: HTMLSlotElement;
+    /** Whether to allow the tree to be sorted by dragging and dropping items. */
+    sortable: boolean;
+    /** Defines the group name for this tree, allowing multiple trees to be sortable together. */
+    sortableGroup: string | null;
+    /** Whether to disable the sortable group feature, allowing items to be sorted only within the tree. */
+    disabledSortableGroup: boolean;
+    /**
+     * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+     * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
+     */
+    selection: TreeSelection;
+    /**
+     * Whether to automatically expand after loading finishes.
+     */
+    disabledAutoExpand: boolean;
+    /**
+     * Whether to automatically expand to the selected items.
+     */
+    autoExpandToSelected: boolean;
+    /**
+     * Expand button placement
+     */
+    expandButtonPlacement: ExpandButtonPlacement;
+    /**
+     * Whether to not forward the expand button placement to the children.
+     */
+    noForwardExpandButtonPlacement: boolean;
+    /**
+     * When set to true, the `cx-selection-change` event will be emitted on every change of the value, even if the value is not changed.
+     */
+    forceOnChange: boolean;
+    /**
+     * When set to true, clicking the label of a tree item will deselect all other items and select the clicked item.
+     * This is useful when the selection mode is set to 'multiple' and you want to allow the user to select a single item
+     * by clicking its label, without having to use the checkbox. This is the behavior of the filter in DAM view.
+     */
+    labelSelectSingle: boolean;
+    /**
+     * Whether to disable dragging an item inside another item for this tree.
+     */
+    noDragInside: boolean;
+    /**
+     * When partialSyncCheckboxes is true, whether to include an item if it's indeterminate but previously selected.
+     */
+    noIndeterminatePreviouslySelected: boolean;
+    /**
+     * Indicates whether the tree items are focusable.
+     * If set to 'false', the tree items will not be focusable and will not receive focus when the user clicks on it.
+     */
+    focusable: boolean;
+    /**
+     * A collection of all the items in the tree, in the order they appear.
+     * The collection is live, meaning it is automatically updated when the underlying document is changed.
+     */
+    private lastFocusedItem;
+    private mutationObserver;
+    private autoExpandObserver;
+    private clickTarget;
+    private readonly localize;
+    private sortableInstance;
+    constructor();
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * Generates a clone of the expand icon element to use for each tree item
+     */
+    private getExpandButtonIcon;
+    /**
+     * Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+     */
+    private initTreeItem;
+    initTreeItems(): void;
+    private handleTreeChanged;
+    /**
+     * Handles the selection of a tree item based on the current selection mode.
+     *
+     * @param selectedItem - The tree item that is being selected or toggled.
+     * @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
+     */
+    private selectItem;
+    private getAllTreeItems;
+    private getAllDirectTreeItems;
+    private focusItem;
+    private handleKeyDown;
+    private handleClick;
+    handleMouseDown(event: MouseEvent): void;
+    private handleFocusOut;
+    private handleFocusIn;
+    private expandToItem;
+    private handleSlotChange;
+    handleSortableUpdate(evt: Sortable.SortableEvent): void;
+    private destroySortable;
+    getSortableGroup(): string | undefined;
+    handleSortableStart(): void;
+    handleSortableEnd(): void;
+    private initSortable;
+    handleSelectionChange(): Promise<void>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns the list of tree items that are selected in the tree.
+     *
+     * @internal
+     */
+    get selectedItems(): CxTreeItem[];
+    /**
+     * Gets focusable tree items in the tree.
+     *
+     * @internal
+     */
+    getFocusableItems(): CxTreeItem[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tree': CxTree;
+    }
+}

package/library/packages/atoms/src/components/tree/tree.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,197 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
+import { CSSResultGroup, PropertyValueMap, PropertyValues, TemplateResult } from 'lit';
+import { default as Sortable } from 'sortablejs';
+import { default as CxCheckbox } from '../checkbox/checkbox';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxSpinner } from '../spinner/spinner';
+
+/**
+ * @summary The <cx-tree-item> component is used to serve as a hierarchical node that lives inside a [tree](?s=atoms&id=/tree).
+ *
+ * @event cx-expand - Emitted when the tree item expands.
+ * @event cx-after-expand - Emitted after the tree item expands and all animations are complete.
+ * @event cx-collapse - Emitted when the tree item collapses.
+ * @event cx-after-collapse - Emitted after the tree item collapses and all animations are complete.
+ * @event cx-lazy-change - Emitted when the tree item's lazy state changes.
+ * @event cx-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
+ *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
+ *  state and update the tree.
+ *
+ * @slot (default) - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
+ * @csspart item--disabled - Applied when the tree item is disabled.
+ * @csspart item--expanded - Applied when the tree item is expanded.
+ * @csspart item--indeterminate - Applied when the selection is indeterminate.
+ * @csspart item--selected - Applied when the tree item is selected.
+ * @csspart indentation - The tree item's indentation container.
+ * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart label - The tree item's label.
+ * @csspart children - The container that wraps the tree item's nested children.
+ * @csspart checkbox - The checkbox that shows when using multiselect.
+ * @csspart checkbox__base - The checkbox's exported `base` part.
+ * @csspart checkbox__control - The checkbox's exported `control` part.
+ * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
+ * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
+ * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
+ * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
+ * @csspart checkbox__label - The checkbox's exported `label` part.
+ *
+ * @cssproperty [--selected-color=var(--cx-color-primary)] - The color of the selected tree item.
+ * @cssproperty [--selected-background-color=var(--cx-color-primary-50)] - The background color of the selected tree item.
+ * @cssproperty [--hover-background-color=var(--cx-menu-item-background-color-hover)] - The background color of the hovered tree item.
+ * @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.
+ */
+export default class CxTreeItem extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-checkbox': typeof CxCheckbox;
+        'cx-icon': typeof CxIcon;
+        'cx-spinner': typeof CxSpinner;
+    };
+    static isTreeItem(node: Node): node is CxTreeItem;
+    private readonly localize;
+    defaultSlot: HTMLSlotElement;
+    childrenSlot: HTMLSlotElement;
+    itemElement: HTMLDivElement;
+    childrenContainer: HTMLDivElement;
+    expandButtonSlot: HTMLSlotElement;
+    /**
+     * Expands the tree item.
+     */
+    expanded: boolean;
+    /**
+     * Draws the tree item in a selected state.
+     */
+    selected: boolean;
+    /**
+     * Disables the tree item.
+     */
+    disabled: boolean;
+    /**
+     * Makes the tree item readonly.
+     */
+    readonly: boolean;
+    /**
+     * Enables lazy loading behavior.
+     */
+    lazy: boolean;
+    /** When set, the underlying menu item will be rendered as an `<a>` with this `href`. */
+    href: string;
+    /** Tells the browser where to open the link. Only used when `href` is set. */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+     * setting the attribute to an empty string or a value of your choice, respectively.
+     */
+    rel: string;
+    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+    download?: string;
+    /**
+     * Handled by Cortex: Tree item's ID.
+     */
+    itemId: string;
+    /**
+     * Whether to allow the tree to be sorted by dragging and dropping items.
+     */
+    sortable: boolean;
+    /**
+     * Whether to disable the drag and drop functionality.
+     */
+    noDrag: boolean;
+    /**
+     * Whether to disable the selection functionality.
+     */
+    noSelect: boolean;
+    /**
+     * Whether to disable dragging an item inside this tree item.
+     */
+    noDragInside: boolean;
+    /**
+     * The group name for the sortable items.
+     * This allows multiple sortable lists to be grouped together, so items can be dragged between them.
+     */
+    sortableGroup: string | undefined;
+    /**
+     * Expand button placement
+     */
+    expandButtonPlacement: ExpandButtonPlacement;
+    /**
+     * Whether to not forward the expand button placement to the children.
+     */
+    noForwardExpandButtonPlacement: boolean;
+    /**
+     * Indicates whether the tree checkboxes should be synced with the selected state of the tree items.
+     * For example, when select all children, the parent checkbox will be checked. When parent checkbox is checked, all children will be checked.
+     * If set to `true`, the children and parent checked state will be independent of each other.
+     * This is only applicable when `selection` is set to `multiple`.
+     */
+    disabledSyncCheckboxes: boolean;
+    /**
+     * Indicates whether the tree checkboxes should show always indeterminate state when any of the children are checked.
+     * If set to 'true', the parent checkbox will be indeterminate when some or all of its children are checked.
+     * This is only applicable when the selection is set to 'multiple'.
+     * This is used to mimic the behavior of a partial selection in Orange Logic platform.
+     */
+    partialSyncCheckboxes: boolean;
+    /**
+     * Indicates whether the tree item was previously selected.
+     * Use only when the selection is set to 'multiple' and the partialSyncCheckboxes is set to 'true'.
+     * This is used to determine whether the tree item should still be indeterminate when all children are unchecked.
+     */
+    previouslySelected: boolean;
+    /**
+     * Indicates whether the tree item is focusable.
+     * If set to 'false', the tree item will not be focusable and will not receive focus when the user clicks on it.
+     */
+    focusable: boolean;
+    indeterminate: boolean;
+    isLeaf: boolean;
+    loading: boolean;
+    selectable: boolean;
+    private sortableInstance;
+    get showExpandButton(): boolean;
+    constructor();
+    runFirstUpdated(): void;
+    private animateCollapse;
+    private isNestedItem;
+    /**
+     * Wait for this item to be fully updated before processing the slot change.
+     * Since children items may not be fully updated yet.
+     */
+    private handleChildrenSlotChange;
+    protected willUpdate(changedProperties: PropertyValueMap<CxTreeItem> | Map<PropertyKey, unknown>): void;
+    private animateExpand;
+    handleLoadingChange(): void;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleExpandedChange(): void;
+    handleExpandAnimation(): void;
+    handleLazyChange(): Promise<void>;
+    /** Gets all the nested tree items in this node. */
+    getChildrenItems({ includeDisabled, }?: {
+        includeDisabled?: boolean;
+    }): CxTreeItem[];
+    private renderExpandButton;
+    handleSortableUpdate(evt: Sortable.SortableEvent): void;
+    handleSortableStart(): void;
+    handleSortableEnd(): void;
+    onDragStart: (evt: DragEvent) => void;
+    private destroySortable;
+    private initSortable;
+    protected updated(changedProperties: PropertyValues): void;
+    renderBase(inner: TemplateResult): TemplateResult<1>;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tree-item': CxTreeItem;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;