@orangelogic/design-system 2.19.0-pr77202.21

package/library/packages/atoms/src/components/relative-time/relative-time.d.ts

@@ -0,0 +1,43 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+
+/**
+ * @summary Outputs a localized time phrase relative to the current date and time.
+ *
+ * @description Localization is handled by the browser's
+ * [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).
+ * No language packs are required.
+ */
+export default class CxRelativeTime extends CortexElement {
+    private readonly localize;
+    private updateTimeout;
+    private isoTime;
+    private relativeTime;
+    /**
+     * The date from which to calculate time from. If not set, the current date and time will be used. When passing a
+     * string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
+     * a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+     */
+    date: Date | string;
+    /** The formatting style to use. */
+    format: 'long' | 'short' | 'narrow';
+    /**
+     * When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+     * "1 day ago" and "in 1 day" will be shown.
+     */
+    numeric: 'always' | 'auto';
+    /** Keep the displayed value up to date as time passes. */
+    sync: boolean;
+    /**
+     * The interval in milliseconds to update the displayed value when `sync` is enabled. If not set, the component will
+     * determine the next update interval based on the current time unit (e.g., second, minute, hour, day).
+     */
+    syncInterval: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): "" | import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-relative-time': CxRelativeTime;
+    }
+}

package/library/packages/atoms/src/components/resize-observer/resize-observer.d.ts

@@ -0,0 +1,33 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ *
+ * @description The resize observer will report changes to the dimensions of the elements it wraps through the `cx-resize` event.
+ * When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail`
+ * that contains the target element and information about its dimensions.
+ *
+ * @slot (default) - One or more elements to watch for resizing.
+ *
+ * @event {{ entries: ResizeObserverEntry[] }} cx-resize - Emitted when the element is resized.
+ */
+export default class CxResizeObserver extends CortexElement {
+    static styles: CSSResultGroup;
+    private resizeObserver;
+    private observedElements;
+    /** Disables the observer. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    private startObserver;
+    private stopObserver;
+    handleDisabledChange(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-resize-observer': CxResizeObserver;
+    }
+}

package/library/packages/atoms/src/components/resize-observer/resize-observer.styles.d.ts

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

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

@@ -0,0 +1,372 @@
+import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
+import { default as CxTypography } from '../typography/typography.ts';
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult, nothing } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxPopup } from '../popup/popup';
+import { default as CxSpinner } from '../spinner/spinner';
+import { default as CxTag } from '../tag/tag';
+
+/**
+ * @summary Selects allow you to choose items from a menu of predefined options.
+ *
+ * @slot - The listbox options. Can be any HTML element, nested or not, as long as they have role="option".
+ *         However, default logic supports only `<cx-option>` elements. Make sure to override the default logic. See region Overridable.
+ *         You can use `<cx-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event cx-change - Emitted when the control's value changes.
+ * @event cx-clear - Emitted when the control's value is cleared.
+ * @event cx-input - Emitted when the control receives input.
+ * @event cx-focus - Emitted when the control gains focus.
+ * @event cx-blur - Emitted when the control loses focus.
+ * @event cx-show - Emitted when the select's menu opens.
+ * @event cx-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event cx-hide - Emitted when the select's menu closes.
+ * @event cx-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event cx-enter - Emitted when the user presses the Enter key.
+ *
+ * @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 select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiselect` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ *
+ * @cssproperty --select-font-size - The font size of the select.
+ */
+export default class CxSelect extends CortexElement implements CortexFormControl {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-icon': typeof CxIcon;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-popup': typeof CxPopup;
+        'cx-spinner': typeof CxSpinner;
+        'cx-tag': typeof CxTag;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly localize;
+    private typeToSelectString;
+    private closeWatcher;
+    popup: CxPopup;
+    combobox: HTMLSlotElement;
+    displayInput: HTMLInputElement;
+    valueInput: HTMLInputElement;
+    listbox: HTMLSlotElement;
+    private hasFocus;
+    displayLabel: string;
+    currentOption: HTMLElement | undefined;
+    selectedOptions: HTMLElement[];
+    /**
+     * The name of the select, submitted as a name/value pair with form data.
+     */
+    name: string;
+    /**
+     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
+     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
+     * be an array. **For this reason, values must not contain spaces.**
+     */
+    value: string | string[];
+    /**
+     * The default value of the form control. Primarily used for resetting the form control.
+     */
+    defaultValue: string | string[];
+    /**
+     * The select's size.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Placeholder text to show as a hint when the select is empty.
+     */
+    placeholder: string;
+    /**
+     * If this property is enabled the user will be able to enter a free text value without being forced to select an option from the suggested values.
+     * Otherwise, when no value is selected, the input will be cleared.
+     */
+    allowFreetext: boolean;
+    /**
+     * Allows more than one option to be selected.
+     */
+    multiple: boolean;
+    /**
+     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
+     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
+     */
+    maxOptionsVisible: number;
+    /**
+     * Disables the select control.
+     */
+    disabled: boolean;
+    /**
+     * Adds a clear button when the select is not empty.
+     */
+    clearable: boolean;
+    /**
+     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
+     */
+    open: boolean;
+    /**
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    /**
+     * Enable this option to disable flip behavior of the cx-popup.
+     */
+    noFlip: boolean;
+    /**
+     * An optional element to use for syncing width/height instead of the anchor element.
+     * When provided, the popup will sync its dimensions to this element rather than the anchor.
+     * Can be used when free-width is false (default) and the select menu should be as wide as the content.
+     */
+    syncElement: HTMLElement | undefined;
+    /**
+     * By default, the select menu's width matches the select's width. Set this to true to make the menu as wide as the content.
+     */
+    freeWidth: boolean;
+    /**
+     * The autosize padding of the listbox dropdown.
+     */
+    autosizePadding: number;
+    /**
+     * Draws a filled select.
+     */
+    filled: boolean;
+    /**
+     * Draws a pill-style select with rounded edges.
+     */
+    pill: boolean;
+    /**
+     * The select's label. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /**
+     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
+     */
+    placement: 'top' | 'bottom';
+    /**
+     * The select's help text. If you need to display HTML, use the `help-text` slot instead.
+     */
+    helpText: string;
+    /**
+     * 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;
+    /**
+     * The select's required attribute.
+     */
+    required: boolean;
+    /**
+     * When set to true, the select will use tag elements to render selected options regardless of the `multiple` property.
+     * This is useful when you want to display selected options in a more visually distinct way, such as in a tag format.
+     */
+    useTag: boolean;
+    /**
+     * When set to true, the select will not select the current option when the user presses the Enter key.
+     */
+    noSelectOnEnter: boolean;
+    /**
+     * When set to true, the select will not set the first option to be current when open.
+     */
+    noResetCurrent: boolean;
+    /**
+     * When set to true, the select will not show the dropdown.
+     */
+    noDropdown: boolean;
+    /**
+     * When set to true, the select will show a loading spinner.
+     */
+    loading: boolean;
+    /**
+     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index.
+     * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.
+     */
+    getTag: (option: HTMLElement, index: number) => TemplateResult | string | HTMLElement;
+    /**
+     * Behavior when typing into the display input
+     *
+     * @type {('select' | 'filter' | 'none')}
+     * 'select': default shoelace behavior, selects the first option that starts with the typed string
+     * 'filter': filters out options that do not include the typed string
+     * 'none'  : does not do anything,      the user cannot type
+     */
+    inputBehavior: 'select' | 'filter' | 'none';
+    /**
+     * A function that returns the value of an option. This is used to determine the value of the select when an option is selected.
+     *
+     * @param option The option to get the value for
+     * @returns The value
+     */
+    getOptionValue: (option: HTMLElement) => string;
+    /**
+     *
+     * @param option The option to get the label for
+     * @returns The label
+     */
+    getOptionLabel: (option: HTMLElement) => string;
+    /**
+     *
+     * @param option The option to get the selected state for
+     * @returns The selected state
+     */
+    getOptionSelected: (option: HTMLElement) => boolean | undefined;
+    /**
+     *
+     * @param option The option to get the disabled state for
+     * @returns The disabled state
+     */
+    getOptionDisabled: (option: HTMLElement) => boolean | undefined;
+    stayOpenOnSelect: boolean;
+    /**
+     * When set to true, the `cx-change` event will be emitted on every change of the value, even if the value is not changed.
+     */
+    forceOnChange: boolean;
+    /**
+     * When set to true, the select will wait for the next frame to focus the display input.
+     * This is useful to avoid the focus being lost when the mouse down event is triggered.
+     * But still allows the mouse down event not to be prevented default behavior.
+     */
+    allowDefaultMouseDown: boolean;
+    /**
+     * The text to display when no options are found.
+     */
+    noOptionText: string;
+    /**
+     * Gets whether to show the no options message
+     */
+    private get shouldShowNoOptionsMessage();
+    /**
+     * Gets the validity state object
+     */
+    get validity(): ValidityState;
+    /**
+     * Gets the validation message
+     */
+    get validationMessage(): string;
+    /**
+     *
+     * @param option The option to update the selected state
+     * @param selected If undefined, the option will be toggled. If true, the option will be selected. If false, the option will be unselected.
+     * @returns
+     */
+    setOptionSelected(option: HTMLElement, selected?: boolean): void;
+    /**
+     *
+     * current = whether the option is currently focused on e.g via keyboard
+     * @param option The option to update the current state
+     * @param current If undefined, the option will be toggled. If true, the option will be set as current. If false, the option will be unset.
+     * @returns
+     */
+    setOptionCurrent(option: HTMLElement, current?: boolean): void;
+    /**
+     * For each option, this function is called to determine if the option should be displayed based on the input string
+     * @param option
+     * @param value The current input string
+     * @returns Whether this option should be displayed
+     */
+    filterCallback(option: HTMLElement, value: string): boolean;
+    connectedCallback(): void;
+    runFirstUpdated(): void;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleFocus;
+    private handleBlur;
+    private handleInput;
+    private handleDocumentFocusIn;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handleComboboxMouseDown;
+    private handleComboboxKeyDown;
+    private handleClearClick;
+    private handleClearMouseDown;
+    private handleOptionClick;
+    /**
+     * Runs when the default slot changes, i.e when options are removed/added to listbox.
+     * Update the selected options (this.value) accordingly.
+     */
+    handleDefaultSlotChange(): void;
+    private handleTagRemove;
+    /**
+     * Gets an array of all <cx-option> elements
+     */
+    private getAllOptions;
+    /**
+     * Gets the first <cx-option> element
+     */
+    private getFirstOption;
+    /**
+     * Gets an array of all visible <cx-option> elements
+     */
+    private getVisibleOptions;
+    /**
+     * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
+     * option may be "current" at a time.
+     */
+    setCurrentOption(option: HTMLElement | null): void;
+    /**
+     * Sets the selected option(s)
+     */
+    private setSelectedOptions;
+    /**
+     * Toggles an option's selected state
+     */
+    private toggleOptionSelection;
+    /**
+     * This method must be called whenever the selection changes. It will update the selected options cache, the current
+     * value, and the display value
+     */
+    private selectionChanged;
+    protected get tags(): (TemplateResult<1> | typeof nothing)[];
+    private handleInvalid;
+    handleDisabledChange(): void;
+    handleValueChange(): void;
+    handleNoDropdownChange(): Promise<void>;
+    handleOpenChange(): Promise<void>;
+    private selectOptionByInput;
+    private filterOptionsByInput;
+    /** Shows the listbox. */
+    show(): Promise<void>;
+    /** Hides the listbox. */
+    hide(): Promise<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;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-select': CxSelect;
+    }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
+ *
+ * @description These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations. </br></br>
+ * Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, you'll likely use more than one skeleton to create the effect you want. If you find yourself using them frequently, consider creating a template that renders them with the desired arrangement and styles.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
+ *
+ * @cssproperty --border-radius - The skeleton's border radius.
+ * @cssproperty --color - The color of the skeleton.
+ * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
+ */
+export default class CxSkeleton extends CortexElement {
+    static styles: CSSResultGroup;
+    /** Determines which effect the skeleton will use. */
+    effect: 'pulse' | 'sheen' | 'none';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-skeleton': CxSkeleton;
+    }
+}

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

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

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

@@ -0,0 +1,51 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+type SpacingProp = '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
+/**
+ * @summary SpacingContainer allows for flexible layout spacing between child elements, vertically or horizontally, with varying sizes.
+ *
+ * @csspart base - The component's base container, applying flex layout.
+ *
+ * @slot - One or more elements to display in the spacing container.
+ *
+ * @cssproperty [--spacing-container-direction=horizontal] - The flex direction of the spacing container.
+ * @cssproperty [--spacing-container-gap=var(--cx-spacing-medium)] - The spacing between child elements.
+ * @cssproperty [--spacing-container-wrap=nowrap] - The flex-wrap style of the spacing container.
+ * @cssproperty [--spacing-container-align-items=normal] - The align-items style of the spacing container.
+ * @cssproperty [--spacing-container-justify-content=normal] - The justify-content style of the spacing container.
+ */
+export default class SpacingContainer extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    /**
+     * When set, and in vertical orientation, the child elements will stretch to fill the width of the container.
+     */
+    block: boolean;
+    /**
+     * The direction of the spacing container. This will determine if the child elements are spaced vertically or horizontally.
+     */
+    direction: 'vertical' | 'horizontal';
+    /**
+     * The spacing between child elements
+     */
+    spacing: SpacingProp;
+    /**
+     * The wrap behavior of the container.
+     */
+    wrap: 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * Proxy for justify-content CSS property.
+     */
+    justifyContent: 'start' | 'end' | 'flex-start' | 'flex-end' | 'center' | 'left' | 'right' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    /**
+     * Proxy for align-items CSS property.
+     */
+    alignItems: 'normal' | 'center' | 'start' | 'end' | 'baseline' | 'stretch' | 'flex-start' | 'flex-end';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-space': SpacingContainer;
+    }
+}
+export {};

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

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

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

@@ -0,0 +1,23 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export default class CxSpinner extends CortexElement {
+    static styles: CSSResultGroup;
+    private readonly localize;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-spinner': CxSpinner;
+    }
+}

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

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

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

@@ -0,0 +1,78 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event cx-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  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.
+ */
+export default class CxSplitPanel extends CortexElement {
+    static styles: CSSResultGroup;
+    private cachedPositionInPixels;
+    private readonly localize;
+    private resizeObserver;
+    private size;
+    divider: HTMLElement;
+    /**
+     * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+     * container's initial size.
+     */
+    position: number;
+    /** The current position of the divider from the primary panel's edge in pixels. */
+    positionInPixels: number;
+    /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+    vertical: boolean;
+    /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+    disabled: boolean;
+    /**
+     * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+     * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+     * host element is resized.
+     */
+    primary?: 'start' | 'end';
+    /**
+     * Sets the dragging state for the component. This allows us to control the style in CSS.
+     */
+    state: 'dragging' | 'idle';
+    /**
+     * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+     * `"100px 50%"`.
+     */
+    snap?: string;
+    /** How close the divider must be to a snap point until snapping occurs. */
+    snapThreshold: number;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private detectSize;
+    private percentageToPixels;
+    private pixelsToPercentage;
+    private handleDrag;
+    private handleKeyDown;
+    private handleResize;
+    private unsetDocumentCursor;
+    handlePositionChange(): void;
+    handlePositionInPixelsChange(): void;
+    handleStateChange(): void;
+    handleVerticalChange(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-split-panel': CxSplitPanel;
+    }
+}

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

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