@orangelogic/design-system 2.0.0-29DUO2-beta-1

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;

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

@@ -0,0 +1,29 @@
+import { default as Sortable } from 'sortablejs';
+
+declare const pluginName = "tree-sortable";
+type TreeSortableOptions = Sortable.Options & {
+    /**
+     * Function to get the drop zone element for the sortable item.
+     * Receives the target element and returns the drop zone element or null/undefined if not applicable.
+     */
+    getDropZone?: (el: HTMLElement) => HTMLElement | null | undefined;
+    /**
+     * Percentage (0-1) indicating the threshold for inserting after a zone.
+     */
+    insertAfterZonePercentage?: number;
+    /**
+     * Percentage (0-1) indicating the threshold for inserting before a zone.
+     */
+    insertBeforeZonePercentage?: number;
+    /**
+     * If true, enables tree sorting functionality.
+     */
+    [pluginName]?: boolean;
+};
+declare class TreeSortable extends Sortable {
+    constructor(element: HTMLElement, options: TreeSortableOptions);
+    static create(element: HTMLElement, options?: TreeSortableOptions): Sortable;
+}
+export declare const getTreeSortableOptions: (options: TreeSortableOptions) => TreeSortableOptions;
+export { TreeSortable };
+export type { TreeSortableOptions };

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

@@ -0,0 +1,23 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TypographyVariant } from '../../../../types/src/typography';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * @summary Use headings for page titles or subheadings to introduce content.
+ * Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.
+ *
+ * @csspart base - The component’s base wrapper.
+ *
+ * @cssproperty [--color=inherit] - The color of the text.
+ * @cssproperty [--font-family=var(--cx-font-sans)] - The font family of the text.
+ */
+export default class CxTypography extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    variant: TypographyVariant;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-typography': CxTypography;
+    }
+}

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

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

package/library/packages/atoms/src/components/video/video.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const INACTIVITY_TIMEOUT = 5000;
+export declare const AUTOPLAY_TIMEOUT = 500;

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

@@ -0,0 +1,155 @@
+import { default as CxImage } from '../image/image.ts';
+import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
+import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { TemplateResult } from 'lit';
+import { VideoJsPlayer } from './videojs/index.js';
+
+/**
+ * @summary Video are wrappers for video elements with videoJS support. This component is used to display videos in your application.
+ *
+ * @csspart video-js-container - The video-js-container element, the main container of the video.
+ * @csspart placeholder - The placeholder element.
+ *
+ * @cssproperty [--padding=0] - The padding of the image.
+ * @cssproperty --border-radius - The border-radius of the video container.
+ * @cssproperty --border - The border of the video container.
+ *
+ * @event cx-play - Emitted when playback starts.
+ * @event cx-pause - Emitted when playback pauses.
+ * @event cx-time-update - Emitted while the playback position changes.
+ * @event cx-ended - Emitted when playback reaches the end.
+ * @event cx-seeked - Emitted after a seek operation.
+ * @event cx-loaded-metadata - Emitted when metadata is loaded.
+ * @event cx-error - Emitted when the video fails to load.
+ *
+ * @slot placeholder - The placeholder element, shown while the `src` is not set.
+ */
+export default class CxVideo extends ResizableElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-image': typeof CxImage;
+        'cx-resize-observer': typeof CxResizeObserver;
+    };
+    readonly localize: LocalizeController;
+    videoJsContainer: HTMLDivElement;
+    seekbar: HTMLDivElement;
+    resizeContainer: HTMLDivElement;
+    videoJsContainerAsync: Promise<HTMLDivElement>;
+    videoElement: HTMLVideoElement;
+    progressBarContainer: HTMLDivElement;
+    videoJsContainerElement: HTMLDivElement;
+    /**
+     * The path to the video to load.
+     */
+    src: string;
+    /**
+     * The name of the video.
+     */
+    name: string;
+    /**
+     * The source field for the name of the video.
+     */
+    nameSourceField: string;
+    /**
+     * The mime type of the video.
+     */
+    type: string;
+    /**
+     * The poster image to show before the video loads.
+     */
+    poster: string;
+    /**
+     * Determines if the video should autoplay.
+     */
+    autoplay: boolean;
+    /**
+     * Determines if the video should loop.
+     */
+    loop: boolean;
+    /**
+     * Determines if the video should be muted.
+     */
+    muted: boolean;
+    /**
+     * Determines if the controls should be shown.
+     */
+    showControls: boolean;
+    /**
+     * Determines if picture-in-picture should be disabled.
+     */
+    disablePictureInPicture: boolean;
+    /**
+     * Determines if remote playback should be disabled.
+     */
+    disableRemotePlayback: boolean;
+    /**
+     * Determines if the volume panel should be disabled.
+     */
+    disableVolumePanel: boolean;
+    isLoaded: boolean;
+    isPlaying: boolean;
+    isError: boolean;
+    isFullscreen: boolean;
+    player: VideoJsPlayer | null;
+    videoWidth: number;
+    videoHeight: number;
+    protected autoPlayTimeout: number | null;
+    parsedName: string;
+    /**
+     * The current time of the video.
+     */
+    get currentTime(): any;
+    /**
+     * The duration of the video.
+     */
+    get duration(): any;
+    /**
+     * Support CMS5 edit mode for the video.
+     */
+    get isInEditMode(): boolean;
+    get containerClassMap(): {
+        container: boolean;
+        'container--empty': boolean;
+        'container--error': boolean;
+        'container--resizing': boolean;
+    };
+    constructor();
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    private onPause;
+    private onPlay;
+    private onTimeUpdate;
+    private onEnded;
+    private onSeeked;
+    protected onFullscreenChange(): void;
+    private onLoadedMetadata;
+    private onError;
+    private handleKeyDown;
+    cleanUp(): void;
+    protected addVideoEventListeners(): void;
+    protected removeVideoEventListeners(): void;
+    attachSeekbar(): void;
+    protected setupVideoJsPlayer(): void;
+    handleLoopChange(): Promise<void>;
+    handleMutedChange(): Promise<void>;
+    handleControlsChange(): Promise<void>;
+    handleDisablePictureInPictureChange(): Promise<void>;
+    handleDisableRemotePlaybackChange(): Promise<void>;
+    handleDisableVolumePanelChange(): Promise<void>;
+    handlePosterChange(): Promise<void>;
+    handleSrcChange(): Promise<void>;
+    handleParsedNameChange(): Promise<void>;
+    private handleSizeChange;
+    updated(changedProps: Map<string, unknown>): void;
+    play(): void;
+    pause(): void;
+    seek(time: number): void;
+    protected renderContent(): TemplateResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-video': CxVideo;
+    }
+}

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

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

package/library/packages/atoms/src/components/video/videojs/videojs-vr-172.d.ts

@@ -0,0 +1,11 @@
+export default VR;
+declare function VR(player: any, options: any): any;
+declare class VR {
+    private constructor();
+    setTimeout: any;
+    clearTimeout: any;
+}
+declare namespace VR {
+    export { version as VERSION };
+}
+declare var version: string;

package/library/packages/atoms/src/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,24 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+ *
+ * @description According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/),
+ * "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers.
+ * For instance, hiding a search field's label as a common magnifying glass icon is used in its stead." </br> </br>
+ *
+ * Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus.
+ * This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
+ *
+ * @slot (default) - The content to be visually hidden.
+ */
+export default class CxVisuallyHidden extends CortexElement {
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-visually-hidden': CxVisuallyHidden;
+    }
+}

package/library/packages/atoms/src/components/visually-hidden/visually-hidden.styles.d.ts

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

package/library/packages/atoms/src/index.d.ts

@@ -0,0 +1,85 @@
+export { default as CxAlert } from './components/alert/alert';
+export { default as CxAmChart } from './components/am-chart/am-chart';
+export { default as CxAnimatedImage } from './components/animated-image/animated-image';
+export { default as CxAnimation } from './components/animation/animation';
+export { default as CxArrayLineClamp } from './components/array-line-clamp/array-line-clamp';
+export { default as CxAvatar } from './components/avatar/avatar';
+export { default as CxBadge } from './components/badge/badge';
+export { default as CxBreadcrumb } from './components/breadcrumb/breadcrumb';
+export { default as CxBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
+export { default as CxButton } from './components/button/button';
+export { default as CxButtonGroup } from './components/button-group/button-group';
+export { default as CxCard } from './components/card/card';
+export { default as CxCheckbox } from './components/checkbox/checkbox';
+export { default as CxColorPicker } from './components/color-picker/color-picker';
+export { default as CxCopyButton } from './components/copy-button/copy-button';
+export { default as CxDetails } from './components/details/details';
+export { default as CxDialog } from './components/dialog/dialog';
+export { default as CxDivider } from './components/divider/divider';
+export { default as CxDotPagination } from './components/dot-pagination/dot-pagination';
+export { default as CxDotStatus } from './components/dot-status/dot-status';
+export { default as CxDrawer } from './components/drawer/drawer';
+export { default as CxDropdown } from './components/dropdown/dropdown';
+export { default as CxEChart } from './components/e-chart/e-chart';
+export { default as CxElementClamp } from './components/element-clamp/element-clamp';
+export { default as CxFormatBytes } from './components/format-bytes/format-bytes';
+export { default as CxFormatDate } from './components/format-date/format-date';
+export { default as CxFormatNumber } from './components/format-number/format-number';
+export { default as CxFormatTime } from './components/format-time/format-time';
+export { default as CxGrid } from './components/grid/grid';
+export { default as CxGridItem } from './components/grid-item/grid-item';
+export { default as CxHeader } from './components/header/header';
+export { default as CxHubConnection } from './components/hub-connection/hub-connection';
+export { default as CxIcon } from './components/icon/icon';
+export { default as CxIconButton } from './components/icon-button/icon-button';
+export { default as CxIframe } from './components/iframe/iframe';
+export { default as CxImage } from './components/image/image';
+export { default as CxImageComparer } from './components/image-comparer/image-comparer';
+export { default as CxInclude } from './components/include/include';
+export { default as CxInput } from './components/input/input';
+export { default as CxInputGroup } from './components/input-group/input-group';
+export { default as CxLineClamp } from './components/line-clamp/line-clamp';
+export { default as CxMarkdown } from './components/markdown/markdown';
+export { default as CxMenu } from './components/menu/menu';
+export { default as CxMenuItem } from './components/menu-item/menu-item';
+export { default as CxMenuLabel } from './components/menu-label/menu-label';
+export { default as CxMenuSection } from './components/menu-section/menu-section';
+export { default as CxMutationObserver } from './components/mutation-observer/mutation-observer';
+export { default as CxOption } from './components/option/option';
+export { default as CxPagination } from './components/pagination/pagination';
+export { default as CxPopup } from './components/popup/popup';
+export { default as CxProgressBar } from './components/progress-bar/progress-bar';
+export { default as CxProgressRing } from './components/progress-ring/progress-ring';
+export { default as CxQrCode } from './components/qr-code/qr-code';
+export { default as CxRadio } from './components/radio/radio';
+export { default as CxRadioButton } from './components/radio-button/radio-button';
+export { default as CxRadioCard } from './components/radio-card/radio-card';
+export { default as CxRadioGroup } from './components/radio-group/radio-group';
+export { default as CxRange } from './components/range/range';
+export { default as CxRating } from './components/rating/rating';
+export { default as CxRelativeTime } from './components/relative-time/relative-time';
+export { default as CxResizeObserver } from './components/resize-observer/resize-observer';
+export { default as CxSelect } from './components/select/select';
+export { default as CxSkeleton } from './components/skeleton/skeleton';
+export { default as CxSpace } from './components/space/space';
+export { default as CxSpinner } from './components/spinner/spinner';
+export { default as CxSplitPanel } from './components/split-panel/split-panel';
+export { default as CxStep } from './components/step/step';
+export { default as CxStepper } from './components/stepper/stepper';
+export { default as CxSwitch } from './components/switch/switch';
+export { default as CxTab } from './components/tab/tab';
+export { default as CxTabGroup } from './components/tab-group/tab-group';
+export { default as CxTable } from './components/table/table';
+export { default as CxTabPanel } from './components/tab-panel/tab-panel';
+export { default as CxTag } from './components/tag/tag';
+export { default as CxTextarea } from './components/textarea/textarea';
+export { default as CxTimecode } from './components/timecode/timecode';
+export { default as CxTooltip } from './components/tooltip/tooltip';
+export { default as CxTree } from './components/tree/tree';
+export { default as CxTreeItem } from './components/tree-item/tree-item';
+export { default as CxTypography } from './components/typography/typography';
+export { default as CxVideo } from './components/video/video';
+export { default as CxVisuallyHidden } from './components/visually-hidden/visually-hidden';
+export { getAnimationNames, getEasingNames } from './utilities/animation';
+export { default as componentStyles } from '../../styles/src/component.styles';
+export { getAnimation, setAnimation, setDefaultAnimation, } from './utilities/animation-registry';

package/library/packages/atoms/src/utilities/animation-registry.d.ts

@@ -0,0 +1,24 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    options?: KeyframeAnimationOptions;
+    rtlKeyframes?: Keyframe[];
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    /**
+     * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+     * available using getAnimation().
+     */
+    dir: string;
+}
+/**
+ * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+ * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+ */
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+/** Sets a custom animation for the specified element. */
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+/** Gets an element's animation. Falls back to the default if no animation is found. */
+export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/library/packages/atoms/src/utilities/animation.d.ts

@@ -0,0 +1 @@
+export { getAnimationNames, getEasingNames, } from '../components/animation/animations';

package/library/packages/atoms/src/utilities/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styleStringToObject: (styles: string, camelCase?: boolean) => any;
+export declare const styleObjectToString: (style: any, sort?: boolean) => string;

package/library/packages/atoms/src/utilities/type-check.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if an element is an in-built HTMLElement (as opposed to a custom element).
+ * @param element
+ * @returns
+ */
+export declare const isNativeElement: (element: HTMLElement) => boolean;

package/library/packages/base/src/cortex-element.d.ts

@@ -0,0 +1,61 @@
+import { LitElement, PropertyDeclaration, PropertyValues } from 'lit';
+
+type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
+type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
+type EventTypesWithRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
+};
+type EventTypesWithoutRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
+};
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type CxEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'> : CustomEventInit : CustomEventInit;
+type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
+export default class CortexElement extends LitElement {
+    dir: string;
+    lang: string;
+    theme: 'light' | 'dark';
+    preRender: boolean;
+    /** Emits a custom event with more convenient defaults. */
+    emit<T extends string & keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: CxEventInit<T> | undefined): GetCustomEventType<T>;
+    emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: CxEventInit<T>): GetCustomEventType<T>;
+    static version: string;
+    static define(name: string, elementConstructor?: typeof CortexElement, options?: ElementDefinitionOptions): void;
+    static dependencies: Record<string, typeof CortexElement>;
+    static createProperty(name: PropertyKey, options?: PropertyDeclaration): void;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected runFirstUpdated(_changedProperties: PropertyValues): void;
+    protected connectedUpdatedCallback(): void;
+    protected runConnectedCallback(): void;
+    adoptedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleThemeChange;
+    getTheme(): "light" | "dark";
+    getState<K extends keyof this>(key: string): this[K];
+}
+export interface CortexFormControl extends CortexElement {
+    checkValidity: () => boolean;
+    defaultChecked?: boolean;
+    defaultValue?: unknown;
+    disabled?: boolean;
+    form?: string | HTMLElement;
+    getForm: () => HTMLFormElement | null;
+    max?: number | string | Date;
+    maxlength?: number;
+    min?: number | string | Date;
+    minlength?: number;
+    name: string;
+    pattern?: string;
+    reportValidity: () => boolean;
+    required?: boolean;
+    setCustomValidity: (message: string) => void;
+    step?: number | 'any';
+    readonly validationMessage: string;
+    readonly validity: ValidityState;
+    value: unknown;
+}
+export {};