@orangelogic/design-system 2.19.0-pr77202.21

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

@@ -0,0 +1,247 @@
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { ColorFormat } from '../../../../types/src/color-picker';
+import { CSSResultGroup } from 'lit';
+import { default as CxButton } from '../button/button';
+import { default as CxButtonGroup } from '../button-group/button-group';
+import { default as CxDropdown } from '../dropdown/dropdown';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxInput } from '../input/input';
+import { default as CxSpinner } from '../spinner/spinner';
+import { default as CxVisuallyHidden } from '../visually-hidden/visually-hidden';
+
+/**
+ * @summary Color pickers allow the user to select a color.
+ *
+ * @slot label - The color picker’s form label. Alternatively, you can use the `label` attribute.
+ * @slot trigger - The color picker’s trigger button. If not provided, by default it is a circle button that shows the currently selected color.
+ *
+ * @event cx-blur - Emitted when the color picker loses focus.
+ * @event cx-change - Emitted when the color picker’s value changes.
+ * @event cx-focus - Emitted when the color picker receives focus.
+ * @event cx-input - Emitted when the color picker receives input.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren’t satisfied.
+ * @event {{ color: string }} cx-swatch-add - Emitted when the current color is added to the list of custom swatches.
+ * @event cx-clear - Emitted when the clear button is activated.
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart trigger - The color picker’s dropdown trigger.
+ * @csspart swatches - The container that holds the swatches.
+ * @csspart custom-swatches - The container that holds the custom swatches.
+ * @csspart swatch-add-button - The button that emits `cx-swatch-add` on click.
+ * @csspart swatch - Each individual swatch.
+ * @csspart loading-spinner - The container that holds the loading spinner.
+ * @csspart grid - The color grid.
+ * @csspart grid-handle - The color grid’s handle.
+ * @csspart slider - Hue and opacity sliders.
+ * @csspart slider-handle - Hue and opacity slider handles.
+ * @csspart hue-slider - The hue slider.
+ * @csspart hue-slider-handle - The hue slider’s handle.
+ * @csspart opacity-slider - The opacity slider.
+ * @csspart opacity-slider-handle - The opacity slider’s handle.
+ * @csspart preview - The preview color.
+ * @csspart input - The text input.
+ * @csspart eye-dropper-button - The eye dropper button.
+ * @csspart eye-dropper-button__base - The eye dropper button’s exported `button` part.
+ * @csspart eye-dropper-button__prefix - The eye dropper button’s exported `prefix` part.
+ * @csspart eye-dropper-button__label - The eye dropper button’s exported `label` part.
+ * @csspart eye-dropper-button__suffix - The eye dropper button’s exported `suffix` part.
+ * @csspart eye-dropper-button__caret - The eye dropper button’s exported `caret` part.
+ * @csspart format-button - The format button.
+ * @csspart format-button__base - The format button’s exported `button` part.
+ * @csspart format-button__prefix - The format button’s exported `prefix` part.
+ * @csspart format-button__label - The format button’s exported `label` part.
+ * @csspart format-button__suffix - The format button’s exported `suffix` part.
+ * @csspart format-button__caret - The format button’s exported `caret` part.
+ *
+ * @cssproperty --grid-width - The width of the color grid.
+ * @cssproperty --grid-height - The height of the color grid.
+ * @cssproperty --grid-handle-size - The size of the color grid’s handle.
+ * @cssproperty --slider-height - The height of the hue and alpha sliders.
+ * @cssproperty --slider-handle-size - The diameter of the slider’s handle.
+ * @cssproperty --swatch-size - The size of each predefined color swatch.
+ * @cssproperty --format-button-width - The width of the format button.
+ * @cssproperty --eye-dropper-button-width - The width of the eye dropper button.
+ * @cssproperty --control-border-color - The border color of button variant's control.
+ * @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.
+ */
+export default class CxColorPicker extends CortexElement implements CortexFormControl {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-button-group': typeof CxButtonGroup;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
+        'cx-input': typeof CxInput;
+        'cx-spinner': typeof CxSpinner;
+        'cx-visually-hidden': typeof CxVisuallyHidden;
+    };
+    private readonly formControlController;
+    private isSafeValue;
+    private readonly localize;
+    base: HTMLElement;
+    input: CxInput;
+    opacityInput: CxInput;
+    dropdown: CxDropdown;
+    previewButton: HTMLButtonElement;
+    trigger: HTMLButtonElement;
+    private hasFocus;
+    private isDraggingGridHandle;
+    private isEmpty;
+    private inputColorValue;
+    private inputOpacityValue;
+    private hue;
+    private saturation;
+    private brightness;
+    private alpha;
+    /**
+     * The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
+     * in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
+     * data.
+     */
+    value: string;
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string;
+    /**
+     * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
+     * display HTML, you can use the `label` slot` instead.
+     */
+    label: string;
+    /** The variant of the form control. */
+    variant: 'default' | 'button';
+    /**
+     * The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
+     * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
+     */
+    format: ColorFormat;
+    /**
+     * The available formats that can be toggled through using the format button.
+     * Pass a semicolon-separated string (e.g., "hex;rgb;hsl") or an array of format values to limit the options.
+     */
+    formats: ColorFormat | ColorFormat[];
+    /**
+     * Normally the color picker will emit the value in the format specified by the `format` attribute.
+     * If you want to emit the value in a different format, you can use the `emitFormat` attribute.
+     */
+    emitFormat: ColorFormat | undefined;
+    /** Renders the color picker inline rather than in a dropdown. */
+    inline: boolean;
+    /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
+    size: 'small' | 'medium' | 'large';
+    /** Removes the button that lets users toggle between format.   */
+    noFormatToggle: boolean;
+    /** The name of the form control, submitted as a name/value pair with form data. */
+    name: string;
+    /** Disables the color picker. */
+    disabled: boolean;
+    /**
+     * Enable this option to prevent the panel 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;
+    /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
+    opacity: boolean;
+    /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
+    uppercase: boolean;
+    /** Adds a clear button when the input is not empty. */
+    clearable: boolean;
+    tooltip: string;
+    /**
+     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
+     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
+     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
+     */
+    swatches: string | string[];
+    /**
+     * Similar to swatches, but for user-defined custom colors.
+     */
+    customSwatches: string | string[];
+    /**
+     *Set to true to display a loading spinner.
+     */
+    loading: boolean;
+    /**
+     * Set to true to display a button that allows user to add current color to custom swatches.
+     */
+    creatable: 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 color picker a required field. */
+    required: boolean;
+    /**
+     * Pairing value with emitFormat attribute. This is used to emit the value in a wanted format.
+     */
+    emitValue: string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    constructor();
+    runFirstUpdated(): void;
+    private handleCopy;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleFormatToggle;
+    private handleAlphaDrag;
+    private handleHueDrag;
+    private handleGridDrag;
+    private handleAlphaKeyDown;
+    private handleHueKeyDown;
+    private handleGridKeyDown;
+    private handleInputChange;
+    private handleInputInput;
+    private debouncedSetColor;
+    private handleInputKeyDown;
+    private handleInputInvalid;
+    private handleOpacityInputChange;
+    private handleOpacityInputInput;
+    private setOpacity;
+    private handleOpacityInputKeyDown;
+    private handleTouchMove;
+    private handleClear;
+    private parseColor;
+    private setColor;
+    private setLetterCase;
+    private syncValues;
+    private handleAfterHide;
+    private handleEyeDropper;
+    private handleSwatchAdd;
+    private selectSwatch;
+    /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
+    private getHexString;
+    /**
+     * Extracts the color format from a value string.
+     * @param value - The value string to extract the format from.
+     * @returns The color format.
+     */
+    private getFormatFromValue;
+    private stopNestedEventPropagation;
+    handleFormatChange(): void;
+    handleOpacityChange(): void;
+    handleValueChange(oldValue: string | undefined, newValue: string): void;
+    /** Sets focus on the color picker. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the color picker. */
+    blur(): void;
+    /** Returns the current value as a string in the specified format. */
+    getFormattedValue(format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'): string;
+    /** 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;
+    renderSwatches(swatches: string[]): ("" | import('lit').TemplateResult<1>)[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-color-picker': CxColorPicker;
+    }
+}

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

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

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

@@ -0,0 +1,110 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxTooltip } from '../tooltip/tooltip';
+
+/**
+ * @summary Copies text data to the clipboard when the user clicks the trigger.
+ *
+ * @event cx-copy - Emitted when the data has been copied.
+ * @event cx-error - Emitted when the data could not be copied.
+ *
+ * @slot copy-icon - The icon to show in the default copy state. Works best with `<cx-icon>`.
+ * @slot success-icon - The icon to show when the content is copied. Works best with `<cx-icon>`.
+ * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cx-icon>`.
+ *
+ * @csspart button - The internal `<button>` element.
+ * @csspart copy-icon - The container that holds the copy icon.
+ * @csspart success-icon - The container that holds the success icon.
+ * @csspart error-icon - The container that holds the error icon.
+ * @csspart tooltip__base - The tooltip's exported `base` part.
+ * @csspart tooltip__base__popup - The tooltip's exported `popup` part.
+ * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
+ * @csspart tooltip__body - The tooltip's exported `body` part.
+ *
+ * @cssproperty --success-color - The color to use for success feedback.
+ * @cssproperty --error-color - The color to use for error feedback.
+ * @cssproperty --background-color - The background color to use for the button.
+ * @cssproperty --color - The color to use for the button.
+ * @cssproperty --button-font-size - The font size to use for the button.
+ * @cssproperty --button-padding - The padding to use for the button.
+ * @cssproperty --button-background-color - The background color to use for the 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.
+ */
+export default class CxCopyButton extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-icon': typeof CxIcon;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    private readonly hasSlotController;
+    copyIcon: HTMLSlotElement;
+    successIcon: HTMLSlotElement;
+    errorIcon: HTMLSlotElement;
+    tooltip: CxTooltip;
+    button: HTMLButtonElement;
+    hasFocus: boolean;
+    isCopying: boolean;
+    status: 'rest' | 'success' | 'error';
+    /** The text value to copy. */
+    value: string;
+    /** The button's size. */
+    size: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * An id that references an element in the same document from which data will be copied. If both this and `value` are
+     * present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+     * attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+     * append a dot and the property name, e.g. `from="el.value"`.
+     */
+    from: string;
+    /** Disables the copy button. */
+    disabled: boolean;
+    /** The aria-label of the copy button. */
+    label: string;
+    /** A custom label to show in the tooltip. */
+    copyLabel: string;
+    /** A custom label to show in the tooltip when the user is focused on the copy button. */
+    focusCopyLabel: string;
+    /** A custom label to show in the tooltip after copying. */
+    successLabel: string;
+    /** A custom label to show in the tooltip when a copy error occurs. */
+    errorLabel: string;
+    /** The length of time to show feedback before restoring the default trigger. */
+    feedbackDuration: number;
+    /** The preferred placement of the tooltip. */
+    tooltipPlacement: 'top' | 'right' | 'bottom' | 'left';
+    /** The distance of the tooltip. */
+    tooltipDistance: number;
+    /**
+     * 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;
+    getValue: (() => string) | null | undefined;
+    /**
+     * Hide icon optionally
+     */
+    noIcon: boolean;
+    /**
+     * Function for writing the value to the clipboard.
+     */
+    writeToClipboard: (value: string) => Promise<void>;
+    runFirstUpdated(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleKeyDown;
+    private handleCopy;
+    private getTooltipContent;
+    private showStatus;
+    handleHasFocusChange(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-copy-button': CxCopyButton;
+    }
+}

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

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

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

@@ -0,0 +1,65 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ *
+ * @slot (default) - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<cx-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<cx-icon>`.
+ *
+ * @event cx-show - Emitted when the details opens.
+ * @event cx-after-show - Emitted after the details opens and all animations are complete.
+ * @event cx-hide - Emitted when the details closes.
+ * @event cx-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ *
+ * @cssproperty --details-background-color - The background color of the details.
+ * @cssproperty --details-border - The border of the details.
+ */
+export default class CxDetails extends CortexElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon': typeof CxIcon;
+    };
+    private readonly localize;
+    details: HTMLDetailsElement;
+    header: HTMLElement;
+    body: HTMLElement;
+    expandIconSlot: HTMLSlotElement;
+    /**
+     * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+     * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+     */
+    open: boolean;
+    /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+    summary: string;
+    /** Disables the details so it can't be toggled. */
+    disabled: boolean;
+    detailsObserver: MutationObserver;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleSummaryClick;
+    private handleSummaryKeyDown;
+    handleOpenChange(): Promise<void>;
+    /** Shows the details. */
+    show(): Promise<void>;
+    /** Hides the details */
+    hide(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-details': CxDetails;
+    }
+}

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

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

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

@@ -0,0 +1,156 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { DialogDividerPosition } from '../../../../types/src/dialog';
+import { default as Modal } from '../../../../utils/src/custom-element/modal.ts';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as CxDivider } from '../divider/divider';
+import { default as CxIconButton } from '../icon-button/icon-button';
+import { default as CxPopup } from '../popup/popup';
+
+/**
+ * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+ *
+ * @slot (default) - The dialog's main content.
+ * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<cx-icon-button>`.
+ * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+ *
+ * @event cx-show - Emitted when the dialog opens.
+ * @event cx-after-show - Emitted after the dialog opens and all animations are complete.
+ * @event cx-hide - Emitted when the dialog closes.
+ * @event cx-after-hide - Emitted after the dialog closes and all animations are complete.
+ * @event cx-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay', preventedReason?: string }} cx-request-close - Emitted when the user attempts to
+ *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the dialog.
+ * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
+ * @csspart header - The dialog's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<cx-icon-button>`.
+ * @csspart title - The dialog's title.
+ * @csspart close-button - The close button, an `<cx-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart body - The dialog's body.
+ * @csspart footer - The dialog's footer.
+ *
+ * @cssproperty [--width=31rem] - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @cssproperty [--header-spacing=var(--cx-spacing-small) var(--cx-spacing-large)] - The amount of padding to use for the header.
+ * @cssproperty [--body-spacing=var(--cx-spacing-medium) var(--cx-spacing-large)] - The amount of padding to use for the body.
+ * @cssproperty [--divider-spacing=0 var(--cx-spacing-large)] - The amount of padding to use for the divider.
+ * @cssproperty [--footer-spacing=var(--cx-spacing-large)] - The amount of padding to use for the footer.
+ * @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.
+ *
+ * @animation dialog.show - The animation to use when showing the dialog.
+ * @animation dialog.hide - The animation to use when hiding the dialog.
+ * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
+ * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
+ * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
+ *
+ * @property open - Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+ *   use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+ * @property label - The dialog's label as displayed in the header. You should always include a relevant label even when using
+ *   `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+ * @property noHeader - Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+ *   accessible way for users to dismiss the dialog.
+ * @property boundary - The element to which the dialog will be centered inside.
+ * @property disableOverlayClick - Prevents the dialog from closing when clicking the overlay.
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
+ */
+export default class CxDialog extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-divider': typeof CxDivider;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-popup': typeof CxPopup;
+    };
+    private readonly hasSlotController;
+    private readonly localize;
+    private originalTrigger;
+    modal: Modal;
+    private closeWatcher;
+    popup: CxPopup;
+    panel: HTMLElement;
+    body: HTMLElement;
+    /**
+     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+     */
+    open: boolean;
+    /**
+     * The dialog's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /**
+     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the dialog.
+     */
+    noHeader: boolean;
+    /**
+     * The element to which the dialog will be centered inside.
+     * If not provided, the dialog will be centered inside the document body.
+     */
+    boundary: HTMLElement;
+    /** The position of the divider. */
+    dividerPosition: DialogDividerPosition;
+    /**
+     * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space.
+     * This is useful for dialogs that contain scrollable content.
+     */
+    useOverlayScrollbar: boolean;
+    /**
+     * Preventing the dialog from closing when clicking the overlay.
+     */
+    disableOverlayClick: boolean;
+    /**
+     * Preventing the dialog from closing when clicking outside of the dialog. E.g: When a dialog is contained inside a smaller container,
+     * clicking outside the container will close the dialog by default. This property will prevent that.
+     */
+    stayOpenOutsideClick: boolean;
+    /**
+     * The `strategy` property of the `cx-popup` component.
+     */
+    strategy: 'fixed' | 'overlay';
+    private osInstance;
+    overlay: HTMLElement;
+    boundaryObserver: ResizeObserver | null;
+    boundarySize: {
+        height: number;
+        width: number;
+    };
+    constructor();
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    protected shouldUpdate(_changedProperties: PropertyValues): boolean;
+    updatePopupAnchor(): Promise<void>;
+    private handleWindowResize;
+    private requestClose;
+    /**
+     * If there are multiple dialogs open, should only close the top-most dialog when clicking outside dialog panel.
+     * @param event - The event object.
+     */
+    private preventBoundaryDialogClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentMouseDown;
+    private handleDocumentKeyDown;
+    private handleCloseButtonClick;
+    handleOpenChange(): Promise<void>;
+    /** Shows the dialog. */
+    show(): Promise<void>;
+    /** Hides the dialog */
+    hide(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-dialog': CxDialog;
+    }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Dividers are used to visually separate or group elements.
+ *
+ * @cssproperty --color - The color of the divider.
+ * @cssproperty --width - The width of the divider.
+ * @cssproperty --spacing - The spacing of the divider.
+ * @cssproperty --border-style - The style of the divider.
+ * @cssproperty --padding - The padding of the divider.
+ * @cssproperty --max-width - The maximum width of the divider.
+ */
+export default class CxDivider extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    /** Draws the divider in a vertical orientation. */
+    vertical: boolean;
+    /**
+     * Applies component's padding over the spacing custom property.
+     */
+    usePadding: boolean;
+    connectedCallback(): void;
+    /**
+     * Applies the direction of the divider
+     */
+    handleVerticalChange(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-divider': CxDivider;
+    }
+}

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

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