wj-elements 0.1.151 → 0.1.152

package/dist/packages/wje-toast/toast.element.d.ts

@@ -0,0 +1,173 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toast` is a custom web component that represents a toast notification.
+ * @summary This element represents a toast notification.
+ * @documentation https://elements.webjet.sk/components/toast
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part
+ * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
+ * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
+ * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
+ * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
+ * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.
+ * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
+ * @slot - The content of the toast.
+ * @slot media - The media of the toast.
+ * // @fires wje-toast:after-show - Fired after the toast is shown.
+ * // @fires wje-toast:after-hide - Fired after the toast is hidden.
+ */
+export default class Toast extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    toastStack: HTMLDivElement & {
+        className: string;
+    };
+    /**
+     * Set headline value of the toast.
+     * @param value
+     */
+    set headline(value: string);
+    /**
+     * Get headline value of the toast.
+     * @returns {string}
+     */
+    get headline(): string;
+    /**
+     * Set open value of the toast.
+     * @param value
+     */
+    set open(value: boolean);
+    /**
+     * Get open value of the toast.
+     * @returns {boolean}
+     */
+    get open(): boolean;
+    /**
+     * Set duration value of the toast.
+     * @param value
+     */
+    set duration(value: number);
+    /**
+     * Get duration value of the toast.
+     * @returns {number}
+     */
+    get duration(): number;
+    /**
+     * Set closable value of the toast.
+     * @param value
+     */
+    set closable(value: boolean);
+    /**
+     * Get closable value of the toast.
+     * @returns {boolean}
+     */
+    get closable(): boolean;
+    /**
+     * Set color value of the toast.
+     * @param value
+     */
+    set color(value: string);
+    /**
+     * Get color value of the toast.
+     * @returns {string}
+     */
+    get color(): string;
+    /**
+     * Set countdown value of the toast.
+     * @param value
+     */
+    set countdown(value: boolean);
+    /**
+     * Get countdown value of the toast.
+     * @returns {boolean}
+     */
+    get countdown(): boolean;
+    /**
+     * Set icon value of the toast.
+     * @param value
+     */
+    set icon(value: string);
+    /**
+     * Get icon value of the toast.
+     * @returns {string}
+     */
+    get icon(): string;
+    /**
+     * Draw method for the toast notification.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    closeBtn: HTMLElement;
+    countdownBar: HTMLDivElement;
+    /**
+     * After draw method for the toast notification.
+     */
+    afterDraw(): void;
+    countdownAnimation: Animation;
+    remainingTime: number;
+    /**
+     * Starts the timer.
+     * This method sets the `startTime` property to the current time and sets
+     * the `timeoutID` property to the ID of the timeout. The method also
+     * dispatches the `wje-toast:after-hide` custom event when the timeout
+     * expires.
+     */
+    startTimer(): void;
+    startTime: number;
+    timeoutID: number;
+    /**
+     * Stops the timer.
+     * This method clears the timeout and calculates the remaining time.
+     * The method is called when the toast notification is paused.
+     */
+    stopTimer(): void;
+    /**
+     * Resumes the timer.
+     * This method resumes the timer if the remaining time is greater
+     * than zero. The method is called when the toast notification is resumed.
+     */
+    resumeTimer(): void;
+    /**
+     * Asynchronously shows the toast notification.
+     * This method sets the `open` property to `true` and dispatches the
+     * `wje-toast:after-show` custom event. If the toast is already open,
+     * the method returns `undefined`.
+     */
+    show: () => void;
+    /**
+     * Asynchronously hides the toast notification.
+     * This method sets the `open` property to `false` and dispatches the
+     * `wje-toast:after-hide` custom event. If the toast is already hidden,
+     * the method returns `undefined`.
+     */
+    hide: () => void;
+    /**
+     * Pauses the countdown animation and stops the timer.
+     */
+    pause: () => void;
+    /**
+     * Resumes the countdown animation and resumes the timer.
+     */
+    resume: () => void;
+    /**
+     * Removes the toast notification and the toast stack.
+     *
+     * This method removes the toast notification from the toast stack and
+     * removes the toast stack from the document body if the toast stack is
+     * empty.
+     */
+    removeChildAndStack(): void;
+    /**
+     * Asynchronously starts the toast notification.
+     * This method appends the toast notification to the document body and
+     * shows the toast notification. The method returns a promise that
+     * resolves when the toast notification is shown.
+     * @returns {Promise<unknown>}
+     */
+    start: () => Promise<unknown>;
+}

package/dist/packages/wje-toast/toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-toggle/toggle.d.ts

@@ -0,0 +1,2 @@
+import { default as Toggle } from './toggle.element.js';
+export default Toggle;

package/dist/packages/wje-toggle/toggle.element.d.ts

@@ -0,0 +1,65 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toggle` is a custom web component that represents a toggle input.
+ * @summary This element represents a toggle input.
+ * @documentation https://elements.webjet.sk/components/toggle
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toggle wrapper.
+ * @csspart input - The toggle input.
+ * @csspart toggle - The toggle part.
+ * @slot - The default slot for the toggle.
+ * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.
+ * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.
+ * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.
+ * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.
+ * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.
+ * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.
+ * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.
+ * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.
+ * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.
+ * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.
+ * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.
+ * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.
+ * @tag wje-toggle
+ */
+export default class Toggle extends WJElement {
+    /**
+     * Get CSS stylesheet for the Button element.
+     * @static
+     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Get observed attributes for the toggle element.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Set checked attribute for the toggle element.
+     */
+    set disabled(value: boolean);
+    /**
+     * Get checked attribute for the toggle element.
+     * @returns {boolean} true if the toggle is disabled, false otherwise
+     */
+    get disabled(): boolean;
+    /**
+     * Set checked attribute for the toggle element.
+     */
+    set checked(value: boolean);
+    /**
+     * Get checked attribute for the toggle element.
+     * @returns {boolean} true if the toggle is checked, false otherwise
+     */
+    get checked(): boolean;
+    /**
+     * Draw the toggle element for the component.
+     */
+    draw(): DocumentFragment;
+    input: HTMLInputElement;
+    /**
+     * After draw method for the toggle element to add event listeners for the input element after the element is drawn.
+     */
+    afterDraw(): void;
+}

package/dist/packages/wje-toolbar/toolbar.d.ts

@@ -0,0 +1,2 @@
+import { default as Toolbar } from './toolbar.element.js';
+export default Toolbar;

package/dist/packages/wje-toolbar/toolbar.element.d.ts

@@ -0,0 +1,39 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toolbar` is a custom web component that represents a toolbar.
+ * @summary This element represents a toolbar.
+ * @documentation https://elements.webjet.sk/components/toolbar
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toolbar wrapper.
+ * @slot start - The start slot for the toolbar.
+ * @slot end - The end slot for the toolbar.
+ * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.
+ * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.
+ * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.
+ * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.
+ * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.
+ * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.
+ * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.
+ * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.
+ * @tag wje-toolbar
+ */
+export default class Toolbar extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @static
+     * @returns {Array} An empty array
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Draws the component for the toolbar.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+}

package/dist/packages/wje-toolbar-action/toolbar-action.d.ts

@@ -0,0 +1,2 @@
+import { default as ToolbarAction } from './toolbar-action.element.js';
+export default ToolbarAction;

package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts

@@ -0,0 +1,35 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `ToolbarAction` is a custom web component that represents a toolbar action.
+ * @summary This element represents a toolbar action.
+ * @documentation https://elements.webjet.sk/components/toolbar-action
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toolbar action wrapper.
+ * @slot - The default slot for the toolbar action.
+ * @tag wje-toolbar-action
+ */
+export default class ToolbarAction extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @static
+     * @returns {Array} An empty array
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Draws the component for the toolbar action.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    /**
+     * Returns the actions for the toolbar action.
+     * @returns {Array} An array of wje-button elements
+     */
+    getActions(): any[];
+}

package/dist/packages/wje-tooltip/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { default as Tooltip } from './tooltip.element.js';
+export default Tooltip;

package/dist/packages/wje-tooltip/tooltip.element.d.ts

@@ -0,0 +1,71 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Tooltip` is a custom web component that represents a tooltip.
+ * @summary This element represents a tooltip.
+ * @documentation https://elements.webjet.sk/components/tooltip
+ * @status stable
+ * @augments {WJElement}
+ * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.
+ * @slot arrow - The arrow slot for the tooltip.
+ * @slot anchor - The anchor slot for the tooltip.
+ * @csspart native - The native tooltip wrapper.
+ * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.
+ * @tag wje-tooltip
+ */
+export default class Tooltip extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @static
+     * @returns {Array} An array of observed attributes
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Set active attribute for the tooltip element.
+     * @param value
+     */
+    set content(value: string);
+    /**
+     * Get active attribute for the tooltip element.
+     * @returns {string}
+     */
+    get content(): string;
+    /**
+     * Draws the component for the tooltip.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    mySlot: HTMLSlotElement;
+    popup: HTMLElement;
+    native: HTMLDivElement;
+    /**
+     * Draws the component for the tooltip.
+     */
+    afterDraw(): void;
+    dispatch(customEvent: any): Promise<any>;
+    beforeShow(): string;
+    afterShow(): boolean;
+    /**
+     * Handles the logic for showing the component's popup or tooltip.
+     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.
+     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.
+     */
+    onShow: () => void;
+    /**
+     * Hides the component's popup or tooltip.
+     * Removes the `active` class from the component and hides the popup element.
+     */
+    onHide: () => void;
+    /**
+     * Validates if the specified selector exists within the provided element.
+     * Logs an error if the selector is not found and returns the found element or `null`.
+     * @param {HTMLElement} anchorEl The root element to search within.
+     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.
+     */
+    checkSelector(anchorEl: HTMLElement): HTMLElement | null;
+}

package/dist/packages/wje-tree/tree.d.ts

@@ -0,0 +1,2 @@
+import { default as Tree } from './tree.element.js';
+export default Tree;

package/dist/packages/wje-tree/tree.element.d.ts

@@ -0,0 +1,104 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Tree` is a custom web component that represents a hierarchical tree structure.
+ * It extends from `WJElement`.
+ * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.
+ * @documentation https://elements.webjet.sk/components/tree
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native container part of the tree.
+ * @slot - The default slot to place `wje-tree-item` child components.
+ * @tag wje-tree
+ */
+export default class Tree extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Sets the selection attribute for the element.
+     * @param {string} value The value to set as the selection attribute.
+     */
+    set selection(value: string);
+    /**
+     * Gets the current selection mode for the element.
+     * If no selection is explicitly set, it defaults to 'single'.
+     * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.
+     */
+    get selection(): string;
+    /**
+     * A method called before the drawing or rendering process of tree items.
+     * It iterates through all `wje-tree-item` elements, updating their selection state
+     * and managing their expand/collapse icons accordingly.
+     * @returns {void} This method does not return a value.
+     */
+    beforeDraw(): void;
+    /**
+     * Draw method for the toast notification.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    /**
+     * Called after the draw process of the component is completed.
+     * Typically used to add event listeners or perform operations
+     * that are dependent on the component's drawn state.
+     * @returns {void} This method does not return a value.
+     */
+    afterDraw(): void;
+    /**
+     * Handles the click event triggered by the user interaction.
+     * Identifies the closest tree item element to the event target and sets it
+     * as the selected item. Ensures that only one item is selected at a time, resetting
+     * the selection state for all other items.
+     * @param {Event} e The click event object.
+     */
+    handleClick: (e: Event) => void;
+    /**
+     * Retrieves all items that match the selector 'wje-tree-item' within the current context.
+     * @returns {Array<Element>} An array of all matching DOM elements.
+     */
+    getAllItems(): Array<Element>;
+    /**
+     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.
+     * @param {HTMLElement} item The DOM element to which the icon will be appended.
+     * @param {string} status The status indicating which icon to retrieve (e.g., "expand" or "collapse").
+     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.
+     */
+    getExpandCollapseIcon(item: HTMLElement, status: string): void;
+    /**
+     * Updates the state of a checkbox, syncing the state both upwards to parent elements
+     * and downwards to child elements as necessary.
+     * @param {object} changedItem The specific item whose checkbox state has changed.
+     * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.
+     * @returns {void} This method does not return a value.
+     */
+    updateCheckboxState(changedItem: object, isInitialSync?: boolean): void;
+    isInitialSync: boolean;
+    /**
+     * Updates the state of the parent item based on the state of its child items.
+     * Recursively propagates changes up to all parent items to reflect the selection
+     * or indeterminate state accurately.
+     * @param {object} item The current tree item whose parent state needs to be updated.
+     * It is expected to have properties `selected`, `indeterminate`,
+     * and a method `getChildrenItems({ includeDisabled: boolean })`.
+     * @returns {void} This method does not return a value.
+     */
+    updateParentState(item: object): void;
+    /**
+     * Propagates the state changes of an item upwards through its ancestors in the hierarchy.
+     * Calls the `updateParentState` method for each parent element until no parent exists.
+     * @param {HTMLElement} item The current item whose state to propagate to its parent.
+     * @returns {void} This method does not return a value.
+     */
+    propagateStateUpwards(item: HTMLElement): void;
+    /**
+     * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,
+     * it also determines how the state should be applied to the child items and updates the parent state if needed.
+     * @param {object} item The item whose state is being propagated to its child items. The item must have properties
+     * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.
+     * @returns {void} This method does not return a value.
+     */
+    propagateStateDownwards(item: object): void;
+}

package/dist/packages/wje-tree/tree.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-tree-item/tree-item.d.ts

@@ -0,0 +1,2 @@
+import { default as TreeItem } from './tree-item.element.js';
+export default TreeItem;

package/dist/packages/wje-tree-item/tree-item.element.d.ts

@@ -0,0 +1,155 @@
+/**
+ * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.
+ * It represents a node within a tree structure, capable of nesting other items.
+ * @summary Represents a single item in a tree structure.
+ * @documentation https://elements.webjet.sk/components/tree-item
+ * @status stable
+ * @augments {HTMLElement}
+ * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).
+ * @csspart native - The native container of the tree item.
+ * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.
+ * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.
+ * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.
+ * @tag wje-tree-item
+ */
+export default class TreeItem extends HTMLElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): string[];
+    _selection: string;
+    /**
+     * Sets the expanded state of the element. When set to a truthy value,
+     * the 'expanded' attribute will be added to the element. When set to a falsy
+     * value, the 'expanded' attribute will be removed.
+     * @param {boolean} value A boolean value indicating whether the
+     * element should be expanded (true) or collapsed (false).
+     */
+    set expanded(value: boolean);
+    /**
+     * Retrieves the value of the 'expanded' state for the current element.
+     * This getter checks whether the 'expanded' attribute is present on the element.
+     * If the attribute exists, it returns true, representing that the element is expanded.
+     * Otherwise, it returns false, indicating that the element is not expanded.
+     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.
+     */
+    get expanded(): boolean;
+    /**
+     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.
+     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.
+     */
+    set selected(value: boolean);
+    /**
+     * Getter method for determining if the 'selected' attribute is present on the element.
+     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.
+     */
+    get selected(): boolean;
+    /**
+     * Sets the selection mode for the component.
+     * @param {string} value The selection mode to apply. Defaults to 'single'
+     * if no value is provided. Possible options may be
+     * specific to the implementation of the component
+     * (e.g., 'single', 'multiple').
+     */
+    set selection(value: any);
+    /**
+     * Retrieves the current selection.
+     * @returns {*} The value of the current selection.
+     */
+    get selection(): any;
+    /**
+     * Sets or removes the 'indeterminate' attribute based on the provided value.
+     * This can be used to visually indicate an indeterminate state for elements like checkboxes.
+     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.
+     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.
+     */
+    set indeterminate(value: boolean);
+    /**
+     * Retrieves the state of the indeterminate attribute.
+     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.
+     */
+    get indeterminate(): boolean;
+    /**
+     * Setup attributes for the Button element.
+     */
+    setupAttributes(): void;
+    isShadowRoot: string;
+    /**
+     * Handles updates when observed attributes of the element are changed.
+     * Updates the checkbox state based on changes to the "selected" or "indeterminate" attributes.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {string|null} oldValue The previous value of the attribute before the change.
+     * @param {string|null} newValue The new value of the attribute after the change.
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Custom logic executed before the draw process begins.
+     * Determines and sets the appropriate slot if the current item is nested.
+     * @returns {void} No return value.
+     */
+    beforeDraw(): void;
+    /**
+     * Creates and returns a document fragment representing the structure of a tree item component.
+     * The method constructs the DOM elements including the native container, indentation, toggle button,
+     * selection checkbox, label, and children container, along with their respective slots and attributes.
+     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for
+     * child components.
+     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.
+     */
+    draw(): DocumentFragment;
+    checkbox: HTMLElement;
+    native: HTMLDivElement;
+    button: HTMLDivElement;
+    childrenElement: HTMLDivElement;
+    childrenSlot: HTMLSlotElement;
+    /**
+     * Executes operations to be performed after the draw action is completed.
+     * If the state indicates it is expanded, toggles its children.
+     * Additionally, sets up an event listener on the button element to handle toggling children upon click.
+     * @returns {void} Does not return a value.
+     */
+    afterDraw(): void;
+    /**
+     * Determines if the current item is a nested item within a tree structure.
+     * Checks if the item's parent element exists and is also a tree item.
+     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
+     */
+    isNestedItem(): boolean;
+    /**
+     * Checks whether the given node is a tree item.
+     * @param {object} node The node to check.
+     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.
+     */
+    isTreeItem(node: object): boolean;
+    /**
+     * Toggles the visibility state of the children element and updates the class of the parent element.
+     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,
+     * effectively showing or hiding the children and indicating the expanded state.
+     * @returns {void} Does not return a value.
+     */
+    toggleChildren(): void;
+    /**
+     * Retrieves the child items from the `childrenSlot` that match specific criteria.
+     * @param {object} [options] Configuration options.
+     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.
+     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.
+     */
+    getChildrenItems(options?: {
+        includeDisabled?: boolean;
+    }): any[];
+    /**
+     * Retrieves all descendant children of the current object in a flattened array structure.
+     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.
+     * @returns {Array} An array containing all children and their descendants in a flat structure.
+     */
+    getAllChildrenFlat(options?: object): any[];
+}