@orangelogic/design-system 2.19.0-ci.5

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

@@ -0,0 +1,94 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { Orientation } from '../../../../types/src/index.ts';
+import { DotsData } from '../../../../types/src/dot-pagination';
+import { CSSResultGroup } from 'lit';
+import { default as CxTooltip } from '../tooltip/tooltip';
+
+/**
+ * @summary CxDotPagination - A pagination component with dots and ellipsis support for large counts
+ *
+ * @event {{ active: number }} cx-dot-pagination-change - Emitted when the active dot changes.
+ * @event cx-dot-pagination-focus - Emitted when the dot is focused.
+ */
+export default class CxDotPagination extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    activeDot: HTMLButtonElement;
+    private allDots;
+    /**
+     * The active dot index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of items.
+     */
+    totalItemsCount: number;
+    /**
+     * Total show items at a time.
+     */
+    visibleItemsCount: number;
+    /**
+     * The step number of dots.
+     */
+    step: number;
+    /**
+     * The number of center dots.
+     */
+    centerDots: number;
+    /**
+     * The number of front dots.
+     */
+    frontDots: number;
+    /**
+     * The number of back dots.
+     */
+    backDots: number;
+    /**
+     * Whether the dot pagination is looped.
+     */
+    loop: boolean;
+    /**
+     * Specifies the orientation in which the dot pagination will lay out.
+     */
+    orientation: Orientation;
+    /**
+     * Whether the carousel is transition or scrolling, dot pagination is show loading and disabled.
+     */
+    transitioning: boolean;
+    /**
+     * The tooltip placement.
+     */
+    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | undefined;
+    /**
+     * Tooltip description. Will overwrite the default page number description.
+     */
+    tooltipDescription: string | undefined;
+    description: string | undefined;
+    controlIds: string[];
+    /**
+     * The visible dots and ellipsis.
+     */
+    dots: DotsData;
+    /**
+     * Calculate visible dots and ellipsis.
+     */
+    calculateDots(): void;
+    /**
+     * Carousel focus active item when key is pressed from pagination
+     */
+    focus(): void;
+    private handleDotClick;
+    private handleKeyDown;
+    private handleFocus;
+    private renderEllipsis;
+    private renderDot;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-dot-pagination': CxDotPagination;
+    }
+}

package/library/packages/atoms/src/components/dot-pagination/dot-pagination.styles.d.ts

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

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

@@ -0,0 +1,121 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { DrawerVariant } from '../../../../types/src/drawer';
+import { default as Modal } from '../../../../utils/src/custom-element/modal.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIconButton } from '../icon-button/icon-button';
+
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ *
+ * @slot (default) - The drawer's main content.
+ * @slot label - The drawer'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 drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event cx-show - Emitted when the drawer opens.
+ * @event cx-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event cx-hide - Emitted when the drawer closes.
+ * @event cx-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event cx-initial-focus - Emitted when the drawer 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' }} cx-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer 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 drawer.
+ * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+ * @csspart header - The drawer'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 drawer'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 drawer's body.
+ * @csspart footer - The drawer's footer.
+ *
+ * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
+ *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ * @cssproperty [--font-family=var(--cx-font-sans)] - Font family used for header, body, and footer. Default: var(--cx-font-sans)
+ *
+ * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
+ * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
+ * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
+ * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
+ * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
+ * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
+ * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
+ * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
+ * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
+ * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
+ * @animation drawer.overlay.hide - The animation to use when hiding the drawer's 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 CxDrawer extends CortexElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon-button': typeof CxIconButton;
+    };
+    private readonly hasSlotController;
+    private readonly localize;
+    private originalTrigger;
+    modal: Modal;
+    private closeWatcher;
+    drawer: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    /**
+     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+     */
+    open: boolean;
+    /**
+     * The drawer'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;
+    /** The direction from which the drawer will open. */
+    placement: 'top' | 'end' | 'bottom' | 'start';
+    /**
+     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+     * its parent element, set this attribute and add `position: relative` to the parent.
+     */
+    contained: boolean;
+    /**
+     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the drawer.
+     */
+    noHeader: boolean;
+    /**
+     * The drawer variant to use. The `persistent` variant will disable the overlay and prevent closing the drawer by
+     * clicking outside or pressing escape.
+     */
+    variant: DrawerVariant;
+    noCloseButton: boolean;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    handleNoModalChange(): void;
+    /** Shows the drawer. */
+    show(): Promise<void>;
+    /** Hides the drawer */
+    hide(): Promise<void>;
+    private handleOverlayClick;
+    private handleCloseButtonClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-drawer': CxDrawer;
+    }
+}

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

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

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

@@ -0,0 +1,127 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxMenu } from '../menu/menu';
+import { default as CxPopup } from '../popup/popup';
+
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ *
+ * @description Dropdowns consist of a trigger and a panel. By default, activating the trigger
+ * will expose the panel and interacting outside of the panel will close it. </br>
+ * Dropdowns are designed to work well with [menus](?s=atoms&id=/menu) to provide a list of options
+ * the user can select from. However, dropdowns can also be used in lower-level applications
+ * (e.g. [color picker](?s=atoms&id=/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
+ *
+ * @slot (default) - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<cx-button>` element.
+ *
+ * @event cx-show - Emitted when the dropdown opens.
+ * @event cx-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event cx-hide - Emitted when the dropdown closes.
+ * @event cx-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ *
+ * @cssproperty [--max-height=var(--auto-size-available-height)] - The max height of the dropdown panel. If it is larger than the available height, the available height will take precedence.
+ */
+export default class CxDropdown extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-popup': typeof CxPopup;
+    };
+    popup: CxPopup;
+    trigger: HTMLSlotElement;
+    panel: HTMLSlotElement;
+    private readonly localize;
+    private readonly hasSlotController;
+    private closeWatcher;
+    /**
+     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+     */
+    open: boolean;
+    /**
+     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the dropdown so the panel will not open. */
+    disabled: boolean;
+    /**
+     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+     * dropdowns that allow for multiple interactions.
+     */
+    stayOpenOnSelect: boolean;
+    /**
+     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+     * components that use a dropdown internally.
+     */
+    containingElement?: HTMLElement;
+    /** The distance in pixels from which to offset the panel away from its trigger. */
+    distance: number;
+    /** The distance in pixels from which to offset the panel along its trigger. */
+    skidding: number;
+    /**
+     * 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;
+    /**
+     * Syncs the popup width or height to that of the trigger element.
+     */
+    sync: 'width' | 'height' | 'both' | undefined;
+    /**
+     * The factor by which to multiply the available width when using `auto-size`. E.g: Set to 0.5 to
+     * make the popup half the width of the available space.
+     */
+    autoWidthFactor: number;
+    /**
+     * Override the default keydown navigation behavior of the dropdown menu.
+     */
+    ignoredKeys: string[];
+    /**
+     * Enable this option to disable flip behavior of the cx-popup.
+     */
+    noFlip: boolean;
+    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+    flipPadding: number;
+    constructor();
+    connectedCallback(): void;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    focusOnTrigger(): void;
+    getMenu(): CxMenu | undefined;
+    private handleKeyDown;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handlePanelSelect;
+    handleTriggerClick(): Promise<void>;
+    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
+    handleTriggerKeyUp(event: KeyboardEvent): void;
+    handleTriggerSlotChange(): void;
+    updateAccessibleTrigger(): void;
+    blurTrigger(): void;
+    /** Shows the dropdown panel. */
+    show(): Promise<void>;
+    /** Hides the dropdown panel */
+    hide(): Promise<void>;
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    reposition(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
+    handleOpenChange(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-dropdown': CxDropdown;
+    }
+}

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

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

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

@@ -0,0 +1,88 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxButton } from '../button/button';
+
+/**
+ * @summary A component that allows you to clamp the number of elements shown in a container, with a button to toggle
+ *
+ * @slot (default) - The details’ main content.
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart content - The details content.
+ *
+ * @animation element-clamp.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation element-clamp.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ *
+ * @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.
+ */
+export default class CxElementClamp extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+    };
+    private readonly localize;
+    private resizeObserver;
+    body: HTMLElement;
+    /**
+     * 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;
+    /**
+     * Disables the details so it can't be toggled.
+     */
+    disabled: boolean;
+    /**
+     * The number of elements to show before clamping.
+     */
+    elements: number;
+    /**
+     * The root element to use for the intersection observer.
+     */
+    root: string;
+    /**
+     * Whether to animate the opening and closing of the details.
+     */
+    animation: boolean;
+    /**
+     * Whether to show the show more button.
+     */
+    showMore: boolean;
+    /**
+     * The text to show on the show more button.
+     */
+    showMoreText: string;
+    /**
+     * The text to show on the show less button.
+     */
+    showLessText: string;
+    /**
+     * The event to listen to for rerendering the component
+     */
+    rerenderEvent: string;
+    /**
+     * Whether to show the show more button.
+     */
+    private showButton;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    private replaceRootId;
+    getCollapsedHeight(): number;
+    handleChange(): Promise<void>;
+    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-element-clamp': CxElementClamp;
+    }
+}

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

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

package/library/packages/atoms/src/components/format-bytes/format-bytes.d.ts

@@ -0,0 +1,20 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+
+/**
+ * @summary Formats a number as a human readable bytes value.
+ */
+export default class CxFormatBytes extends CortexElement {
+    private readonly localize;
+    /** The number to format in bytes. */
+    value: number;
+    /** The type of unit to display. */
+    unit: 'byte' | 'bit';
+    /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+    display: 'long' | 'short' | 'narrow';
+    render(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-format-bytes': CxFormatBytes;
+    }
+}

package/library/packages/atoms/src/components/format-date/format-date.d.ts

@@ -0,0 +1,46 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { FormatDateDay, FormatDateEra, FormatDateHour, FormatDateMinute, FormatDateMonth, FormatDateSecond, FormatDateTimeZoneHour, FormatDateTimeZoneName, FormatDateWeekday, FormatDateYear } from '../../../../types/src/format-date';
+
+/**
+ * @summary Formats a date/time using the specified locale and options.
+ *
+ * @description Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
+ * No language packs are required.
+ */
+export default class CxFormatDate extends CortexElement {
+    private readonly localize;
+    /**
+     * The date/time to format. 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 format for displaying the weekday. */
+    weekday: FormatDateWeekday;
+    /** The format for displaying the era. */
+    era: FormatDateEra;
+    /** The format for displaying the year. */
+    year: FormatDateYear;
+    /** The format for displaying the month. */
+    month: FormatDateMonth;
+    /** The format for displaying the day. */
+    day: FormatDateDay;
+    /** The format for displaying the hour. */
+    hour: FormatDateHour;
+    /** The format for displaying the minute. */
+    minute: FormatDateMinute;
+    /** The format for displaying the second. */
+    second: FormatDateSecond;
+    /** The format for displaying the time. */
+    timeZoneName: FormatDateTimeZoneName;
+    /** The time zone to express the time in. */
+    timeZone: string;
+    /** The format for displaying the hour. */
+    hourFormat: FormatDateTimeZoneHour;
+    render(): import('lit').TemplateResult<1> | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-format-date': CxFormatDate;
+    }
+}

package/library/packages/atoms/src/components/format-number/format-number.d.ts

@@ -0,0 +1,38 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { FormatNumberCurrencyDisplay, FormatNumberType } from '../../../../types/src/format-number';
+
+/**
+ * @summary Formats a number using the specified locale and options.
+ *
+ * @description Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat).
+ * No language packs are required.
+ */
+export default class CxFormatNumber extends CortexElement {
+    private readonly localize;
+    /** The number to format. */
+    value: number;
+    /** The formatting style to use. */
+    type: FormatNumberType;
+    /** Turns off grouping separators. */
+    noGrouping: boolean;
+    /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
+    currency: string;
+    /** How to display the currency. */
+    currencyDisplay: FormatNumberCurrencyDisplay;
+    /** The minimum number of integer digits to use. Possible values are 1-21. */
+    minimumIntegerDigits: number;
+    /** The minimum number of fraction digits to use. Possible values are 0-20. */
+    minimumFractionDigits: number;
+    /** The maximum number of fraction digits to use. Possible values are 0-0. */
+    maximumFractionDigits: number;
+    /** The minimum number of significant digits to use. Possible values are 1-21. */
+    minimumSignificantDigits: number;
+    /** The maximum number of significant digits to use,. Possible values are 1-21. */
+    maximumSignificantDigits: number;
+    render(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-format-number': CxFormatNumber;
+    }
+}

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

@@ -0,0 +1,40 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
+ *
+ * @slot (default) - The component's main content.
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart content - The component's content.
+ */
+export default class CxGrid extends CortexElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    /** The space between children. */
+    spacing: string | number;
+    /** The number of columns to display. */
+    columns: number;
+    /** Whether to use flex gap or using padding spacing. */
+    useFlexGap: boolean;
+    /** The space between columns. It overrides the value of the spacing prop. */
+    columnSpacing: string | number;
+    /** The space between rows. It overrides the value of the spacing prop. */
+    rowSpacing: string | number;
+    /** Defines the flex-wrap style property.*/
+    wrap: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Whether to use the "@container" query or not. */
+    useContainer: boolean;
+    private handleSlotChange;
+    /** Helper for getter */
+    private resolveSpacing;
+    private get columnSpacingValue();
+    private get rowSpacingValue();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-grid': CxGrid;
+    }
+}

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

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

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

@@ -0,0 +1,49 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The item of a Grid layout.
+ *
+ * @slot (default) - The component’s's main content.
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart content - The component's content.
+ */
+export default class CxGridItem extends CortexElement {
+    static styles: CSSResultGroup;
+    /**
+     * The number of columns to display at the "xs" breakpoint.
+     */
+    xs: number | boolean | 'auto';
+    /**
+     * The number of columns to display at the "sm" breakpoint.
+     */
+    sm: number | null | boolean | 'auto';
+    /**
+     * The number of columns to display at the "md" breakpoint.
+     */
+    md: number | null | boolean | 'auto';
+    /**
+     * The number of columns to display at the "lg" breakpoint.
+     */
+    lg: number | null | boolean | 'auto';
+    /**
+     * The number of columns to display at the "xl" breakpoint.
+     */
+    xl: number | null | boolean | 'auto';
+    /**
+     * Whether to use container or not
+     */
+    useContainer: boolean;
+    /**
+     * Whether to fill or not
+     */
+    fill: boolean;
+    handleXsChange(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-grid-item': CxGridItem;
+    }
+}

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

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