@mustib/web-components 0.0.0-alpha.0

package/README.md

@@ -0,0 +1,17 @@
+# Under Development
+
+## Installation
+
+```bash
+npm i @mustib/web-components@alpha
+```
+
+This library is under development and is not ready for production use yet.
+
+You can clone the repository, run `pnpm install` then `pnpm dev`, and open your browser to view the demos.
+
+This package contains web components that are built using the amazing [Lit](https://lit.dev/) library and it is required to be installed as a peer dependency.
+
+it's built from the ground up to be very easy to use, extend, and with customization in mind as it doesn't force any restrictions.
+
+you are free to even use your own markup, styles, and logic if you want and, still have everything work out of the box, or even customize a specific feature.

package/components/mu-element.d.ts

@@ -0,0 +1,107 @@
+import { LitElement } from 'lit';
+import { closestPierce, EventAction } from '@mustib/utils/browser';
+
+type Elements = [
+    'mu-select-item',
+    'mu-select-items',
+    'mu-transparent',
+    'mu-trigger',
+    'mu-select',
+    'mu-select-label',
+    'mu-select-label-content',
+    'mu-keyboard-trigger',
+    'mu-keyboard-trigger-key',
+    'mu-range',
+    'mu-range-fill',
+    'mu-range-thumb',
+    'mu-range-thumb-value',
+    'mu-icon'
+];
+declare abstract class MUElement extends LitElement {
+    #private;
+    static closestPierce: typeof closestPierce;
+    static register(this: {
+        new (): MUElement;
+    }, tagName: Elements[number]): void;
+    static css: {
+        focus: any;
+    };
+    static cssColors: any;
+    static cssBase: any;
+    disabled: boolean;
+    readonly: boolean;
+    /**
+     * If true, do not add {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action} attributes
+     *
+     * By default mu-element will call `_addEventActionAttributes` in connectedCallback if it is not undefined and `noEventActionAttributes` is false
+     */
+    private noEventActionAttributes;
+    /**
+     * This function is used to add {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action} attributes for all related elements belongs to this element
+     *
+     * It is called in connectedCallback if `noEventActionAttributes` is false
+     */
+    protected abstract _addEventActionAttributes?(): void;
+    /**
+     * This object should be used if the element supports {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action}.
+     *
+     * `mu-element` will automatically add events when element is connected and remove them when element is disconnected
+     */
+    abstract eventActionData: undefined | {
+        eventAction: EventAction<unknown>;
+        /**
+         * A list of default events names to add {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action} listeners
+         */
+        events: string[];
+    };
+    /**
+     * A user customizable list of events names to add {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action} listeners if the element has the `eventActionData` property
+     */
+    protected readonly eventActionEvents?: string[];
+    get interactable(): boolean;
+    muId: string;
+    constructor();
+    generateIsReadyPromise({ timeout, onTimeout }?: {
+        timeout?: number;
+        onTimeout?: () => void;
+    }): Readonly<{
+        status: "success" | "fail" | "pending";
+        resolved: boolean;
+        promise: Promise<boolean>;
+        resolve: () => void;
+    }>;
+    getMuElementById(id: string): {
+        element: MUElement;
+    } | undefined;
+    closestPierce(selector: string): HTMLElement | null;
+    /**
+     * This method gets the next or previous navigable item from the given index.
+     *
+     * If an item not found and switchBack is true, it will go the other direction to find an item
+     *
+     * It takes An optional object with the following properties:
+     *  - `fromIndex` - The index to start searching from.
+     *
+     *  - `direction` - The direction to search in, can be (`next` or `prev`).
+     *
+     *  - `switchBack` - A boolean Whether to search in the other direction if an item is not found.
+     *
+     *  - `items` - The array of items to search in.
+     *
+     *  - `isNavigable` - A function that takes an item and returns a boolean indicating whether the item is navigable.
+     *
+     *  - `shouldBreak` - An optional function that takes an item and returns a boolean indicating whether to break the loop.
+     */
+    getNavigationItem<T>(data: {
+        fromIndex?: number;
+        direction: 'next' | 'prev';
+        switchBack?: boolean;
+        items: T[];
+        isNavigable: (item: T) => boolean;
+        shouldBreak?: (item: T) => boolean;
+    }): T | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+export { MUElement };

package/components/mu-element.js

@@ -0,0 +1,4 @@
+export { M as MUElement } from '../mu-element-CZDI_RCY.js';
+import 'lit';
+import 'lit/decorators.js';
+import '../decorators.js';

package/components/mu-icon.d.ts

@@ -0,0 +1,25 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
+import '@mustib/utils/browser';
+
+declare class MuIcon extends MUElement {
+    static styles?: CSSResultGroup | undefined;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    static icons: {
+        downArrow: any;
+        close: any;
+        closeLine: any;
+        noImage: any;
+    };
+    name?: keyof typeof MuIcon.icons;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-icon': MuIcon;
+    }
+}
+
+export { MuIcon };

package/components/mu-icon.js

@@ -0,0 +1,65 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { staticProperty } from '../decorators.js';
+import 'lit/decorators.js';
+
+class MuIcon extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+    }
+    firstUpdated(_changedProperties) {
+        const iconName = this.name;
+        if (!iconName || !MuIcon.icons[iconName]) {
+            console.warn(`There is no icon named (${iconName})`, this);
+        }
+    }
+    render() {
+        const name = this.name;
+        const icon = name && Reflect.has(MuIcon.icons, name) ? MuIcon.icons[name] : MuIcon.icons['noImage'];
+        return name ? html `
+      <div id='container' part='container'>
+        ${icon}
+      </div>
+    ` : undefined;
+    }
+}
+MuIcon.styles = [MUElement.cssBase, css `
+    :host {
+      display: inline-block;
+    }
+
+    #container {
+      --icon-fill: var(--mu-icon-fill, currentColor);
+      --icon-size: var(--mu-icon-size, calc(var(--mu-base-rem) * 1.6));
+      display: flex;
+      place-items: center;
+      fill: var(--icon-fill);
+      width: var(--icon-size);
+      height: var(--icon-size);
+      transition: all 0.1s ease-in-out;
+    }
+    `
+];
+MuIcon.icons = {
+    downArrow: html `
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 63.9" style="enable-background:new 0 0 122.88 63.9" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><polygon class="st0" points="61.44,63.9 122.88,0 0,0 61.44,63.9"/></g></svg>
+    `,
+    close: html `
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 121.31 122.876" enable-background="new 0 0 121.31 122.876" xml:space="preserve">
+      <g><path fill-rule="evenodd" clip-rule="evenodd" d="M90.914,5.296c6.927-7.034,18.188-7.065,25.154-0.068 c6.961,6.995,6.991,18.369,0.068,25.397L85.743,61.452l30.425,30.855c6.866,6.978,6.773,18.28-0.208,25.247 c-6.983,6.964-18.21,6.946-25.074-0.031L60.669,86.881L30.395,117.58c-6.927,7.034-18.188,7.065-25.154,0.068 c-6.961-6.995-6.992-18.369-0.068-25.397l30.393-30.827L5.142,30.568c-6.867-6.978-6.773-18.28,0.208-25.247 c6.983-6.963,18.21-6.946,25.074,0.031l30.217,30.643L90.914,5.296L90.914,5.296z"/></g></svg>
+    `,
+    closeLine: html `
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.878px" height="122.88px" viewBox="0 0 122.878 122.88" enable-background="new 0 0 122.878 122.88" xml:space="preserve"><g><path d="M1.426,8.313c-1.901-1.901-1.901-4.984,0-6.886c1.901-1.902,4.984-1.902,6.886,0l53.127,53.127l53.127-53.127 c1.901-1.902,4.984-1.902,6.887,0c1.901,1.901,1.901,4.985,0,6.886L68.324,61.439l53.128,53.128c1.901,1.901,1.901,4.984,0,6.886 c-1.902,1.902-4.985,1.902-6.887,0L61.438,68.326L8.312,121.453c-1.901,1.902-4.984,1.902-6.886,0 c-1.901-1.901-1.901-4.984,0-6.886l53.127-53.128L1.426,8.313L1.426,8.313z"/></g></svg>
+    `,
+    noImage: html `
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.19 123.38" style="enable-background:new 0 0 115.19 123.38" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;stroke:#000000;stroke-width:0.5;stroke-miterlimit:2.6131;}</style><g><path class="st0" d="M93.13,79.5c12.05,0,21.82,9.77,21.82,21.82c0,12.05-9.77,21.82-21.82,21.82c-12.05,0-21.82-9.77-21.82-21.82 C71.31,89.27,81.08,79.5,93.13,79.5L93.13,79.5z M8.08,0.25h95.28c2.17,0,4.11,0.89,5.53,2.3c1.42,1.42,2.3,3.39,2.3,5.53v70.01 c-2.46-1.91-5.24-3.44-8.25-4.48V9.98c0-0.43-0.16-0.79-0.46-1.05c-0.26-0.26-0.66-0.46-1.05-0.46H9.94 c-0.43,0-0.79,0.16-1.05,0.46C8.63,9.19,8.43,9.58,8.43,9.98v70.02h0.03l31.97-30.61c1.28-1.18,3.29-1.05,4.44,0.23 c0.03,0.03,0.03,0.07,0.07,0.07l26.88,31.8c-4.73,5.18-7.62,12.08-7.62,19.65c0,3.29,0.55,6.45,1.55,9.4H8.08 c-2.17,0-4.11-0.89-5.53-2.3s-2.3-3.39-2.3-5.53V8.08c0-2.17,0.89-4.11,2.3-5.53S5.94,0.25,8.08,0.25L8.08,0.25z M73.98,79.35 l3.71-22.79c0.3-1.71,1.91-2.9,3.62-2.6c0.66,0.1,1.25,0.43,1.71,0.86l17.1,17.97c-2.18-0.52-4.44-0.79-6.78-0.79 C85.91,71.99,79.13,74.77,73.98,79.35L73.98,79.35z M81.98,18.19c3.13,0,5.99,1.28,8.03,3.32c2.07,2.07,3.32,4.9,3.32,8.03 c0,3.13-1.28,5.99-3.32,8.03c-2.07,2.07-4.9,3.32-8.03,3.32c-3.13,0-5.99-1.28-8.03-3.32c-2.07-2.07-3.32-4.9-3.32-8.03 c0-3.13,1.28-5.99,3.32-8.03C76.02,19.44,78.86,18.19,81.98,18.19L81.98,18.19z M85.82,88.05l19.96,21.6 c1.58-2.39,2.5-5.25,2.5-8.33c0-8.36-6.78-15.14-15.14-15.14C90.48,86.17,87.99,86.85,85.82,88.05L85.82,88.05z M100.44,114.58 l-19.96-21.6c-1.58,2.39-2.5,5.25-2.5,8.33c0,8.36,6.78,15.14,15.14,15.14C95.78,116.46,98.27,115.78,100.44,114.58L100.44,114.58z"/></g></svg>
+    `
+};
+__decorate([
+    staticProperty()
+], MuIcon.prototype, "name", void 0);
+MuIcon.register('mu-icon');
+
+export { MuIcon };

package/components/mu-range-fill.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup } from 'lit';
+import { MUElement } from './mu-element.js';
+import '@mustib/utils/browser';
+
+declare class MuRangeFill extends MUElement {
+    static styles: CSSResultGroup;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * A string represents the name of the thumb element that this fill is related to.
+     *
+     * it can be linked to two thumbs at the same time by adding a comma with no space between the two names.
+     *
+     * if no mane, it will be linked to the thumb that has the same index
+     *
+     * @example 'thumb1'
+     * @example 'thumb1,thumb2'
+     */
+    for?: string;
+    /**
+     * The type of the fill.
+     *
+     * `start` fill from the minimum value of the thumb to the value of the thumb.
+     *
+     * `end` fill from the value of the thumb to the maximum value of the thumb.
+     *
+     * `both` fill from the minimum value of the thumb to the maximum value of the thumb.
+     *
+     * @default 'start'
+     */
+    type: 'start' | 'end' | 'both';
+    readonly container: HTMLDivElement;
+    /**
+     * Sets the percentage value of the fill.
+     *
+     * it takes a percentage array of two numbers, where the minimum number is the start percentage and the maximum number is the end percentage
+     */
+    setPercentage(percentage: [number, number]): void;
+    /**
+     * Sets the axis of the fill.
+     *
+     * for internal use only by mu-range
+     */
+    setAxis(axis: 'x' | '-x' | 'y' | '-y'): void;
+    render(): unknown;
+}
+
+export { MuRangeFill };

package/components/mu-range-fill.js

@@ -0,0 +1,94 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../decorators.js';
+
+class MuRangeFill extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         * The type of the fill.
+         *
+         * `start` fill from the minimum value of the thumb to the value of the thumb.
+         *
+         * `end` fill from the value of the thumb to the maximum value of the thumb.
+         *
+         * `both` fill from the minimum value of the thumb to the maximum value of the thumb.
+         *
+         * @default 'start'
+         */
+        this.type = 'start';
+    }
+    /**
+     * Sets the percentage value of the fill.
+     *
+     * it takes a percentage array of two numbers, where the minimum number is the start percentage and the maximum number is the end percentage
+     */
+    setPercentage(percentage) {
+        const start = Math.min(...percentage);
+        const end = Math.max(...percentage);
+        this.container.style.setProperty('--start', `${start}%`);
+        this.container.style.setProperty('--end', `${end}%`);
+    }
+    /**
+     * Sets the axis of the fill.
+     *
+     * for internal use only by mu-range
+     */
+    setAxis(axis) {
+        this.updateComplete.then(() => {
+            this.container.setAttribute('axis', axis);
+        });
+    }
+    render() {
+        return html `
+      <div id='container' part='container'></div>
+      `;
+    }
+}
+MuRangeFill.styles = [MUElement.cssBase, css `
+    #container {
+      --range-fill-background-color: var(--mu-range-fill-background-color, var(--mu-color-500));
+      --start: 25%;
+      --end: 50%;
+      position: absolute;
+      background-color: var(--range-fill-background-color);
+      inset: 0;
+      transition: all 50ms ease-in;
+      border-radius: 9999px;
+    }
+
+    #container[axis='x'] {
+      left: var(--start);
+      right: calc(100% - var(--end));
+    }
+    
+    #container[axis='-x'] {
+      right: var(--start);
+      left: calc(100% - var(--end));
+    }
+    
+    #container[axis='y'] {
+      bottom: var(--start);
+      top: calc(100% - var(--end));
+    }
+    
+    #container[axis='-y'] {
+      top: var(--start);
+      bottom: calc(100% - var(--end));
+    }
+  `];
+__decorate([
+    property()
+], MuRangeFill.prototype, "for", void 0);
+__decorate([
+    property()
+], MuRangeFill.prototype, "type", void 0);
+__decorate([
+    query('#container', true)
+], MuRangeFill.prototype, "container", void 0);
+MuRangeFill.register('mu-range-fill');
+
+export { MuRangeFill };

package/components/mu-range-thumb-value.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup } from 'lit';
+import { MUElement } from './mu-element.js';
+import '@mustib/utils/browser';
+
+declare class MuRangeThumbValue extends MUElement {
+    static styles: CSSResultGroup;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * A boolean that indicated if the position of the value should be on the opposite side.
+     *
+     * so if the default value position is left, it will be right
+     * and the default is top, it will be bottom, etc
+     */
+    reversed: boolean;
+    /**
+     * A string representing the type of the value to display.
+     *
+     * - unit: The value will be displayed as a number with one decimal place.
+     * - percentage: The value will be displayed as a percentage with two decimal places.
+     * - percentage:round: The value will be displayed as a rounded percentage.
+     *
+     * @default 'unit'
+     */
+    type: 'unit' | 'percentage' | 'percentage:round';
+    container: HTMLElement;
+    /**
+     * A getter for the element that should contain the value.
+     *
+     * it can be any element that has the attribute `data-is="content"`.
+     *
+     * that element's text content will be replaced with the value.
+     *
+     * @default this
+     */
+    get contentEl(): Element;
+    setValue(data: {
+        percentage: number;
+        value: number;
+    }): Promise<void>;
+    /**
+     * Sets the axis of the value.
+     */
+    setAxis(axis: 'x' | 'y'): Promise<void>;
+    render(): unknown;
+}
+
+export { MuRangeThumbValue };

package/components/mu-range-thumb-value.js

@@ -0,0 +1,137 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../decorators.js';
+
+class MuRangeThumbValue extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         * A boolean that indicated if the position of the value should be on the opposite side.
+         *
+         * so if the default value position is left, it will be right
+         * and the default is top, it will be bottom, etc
+         */
+        this.reversed = false;
+        /**
+         * A string representing the type of the value to display.
+         *
+         * - unit: The value will be displayed as a number with one decimal place.
+         * - percentage: The value will be displayed as a percentage with two decimal places.
+         * - percentage:round: The value will be displayed as a rounded percentage.
+         *
+         * @default 'unit'
+         */
+        this.type = 'unit';
+    }
+    /**
+     * A getter for the element that should contain the value.
+     *
+     * it can be any element that has the attribute `data-is="content"`.
+     *
+     * that element's text content will be replaced with the value.
+     *
+     * @default this
+     */
+    get contentEl() {
+        return this.querySelector('[data-is="content"]') || this;
+    }
+    async setValue(data) {
+        await this.updateComplete;
+        switch (this.type) {
+            case "percentage":
+                // keep two decimal places
+                this.contentEl.textContent = `${(Math.trunc(data.percentage * 100) / 100)}%`;
+                break;
+            case "percentage:round":
+                this.contentEl.textContent = `${Math.round(data.percentage)}%`;
+                break;
+            case "unit":
+                // keep one decimal place
+                this.contentEl.textContent = `${(Math.trunc(data.value * 10) / 10)}`;
+                break;
+            default:
+                this.type;
+                break;
+        }
+    }
+    /**
+     * Sets the axis of the value.
+     */
+    async setAxis(axis) {
+        await this.updateComplete;
+        this.container.setAttribute('axis', axis);
+    }
+    render() {
+        return html `
+      <div id='container' part='container'>
+        <slot></slot>
+      </div>
+      `;
+    }
+}
+MuRangeThumbValue.styles = [MUElement.cssBase, css `
+    :host([reversed]) #container[axis='x'] {
+      top: 100%;
+      bottom: unset;
+      margin-block-start: var(--gap, calc(var(--mu-base-rem) * .5));
+    }
+    
+    :host(:not([reversed])) #container[axis='x'] {
+      bottom: 100%;
+      margin-block-end: var(--gap, calc(var(--mu-base-rem) * .5));
+    }
+    
+    :host(:not([reversed])) #container[axis='y'] {
+      left: 100%;
+      right: unset;
+      margin-inline-start: var(--gap, calc(var(--mu-base-rem) * .5));
+    }
+    
+    :host([reversed]) #container[axis='y'] {
+      left: unset;
+      right: 100%;
+      margin-inline-end: var(--gap, calc(var(--mu-base-rem) * .5));
+    }
+
+    #container[axis='x'] {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    #container[axis='y'] {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    #container {
+      --range-thumb-value-background-color: var(--mu-range-thumb-value--background-color, var(--range-thumb-background-color, var(--mu-color-500)));
+      position: absolute;
+      display: flex;
+      place-content: center;
+      padding: .25ch .5ch;
+      border-radius: var(--mu-base-rem);
+      background-color: var(--range-thumb-value-background-color);
+      box-shadow: var(--range-thumb-shadow);
+    }
+
+    @media (prefers-color-scheme: light) {
+      :host {
+        color: var(--mu-color-100);
+      }
+    }
+  `];
+__decorate([
+    property({ type: Boolean })
+], MuRangeThumbValue.prototype, "reversed", void 0);
+__decorate([
+    property()
+], MuRangeThumbValue.prototype, "type", void 0);
+__decorate([
+    query('#container', true)
+], MuRangeThumbValue.prototype, "container", void 0);
+MuRangeThumbValue.register('mu-range-thumb-value');
+
+export { MuRangeThumbValue };

package/components/mu-range-thumb.d.ts

@@ -0,0 +1,120 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
+import { MuRangeThumbValue } from './mu-range-thumb-value.js';
+import '@mustib/utils/browser';
+
+declare class MuRangeThumb extends MUElement {
+    static styles?: CSSResultGroup | undefined;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * A set of related mu-range-thumb-value elements
+     */
+    _valueElements: Set<MuRangeThumbValue>;
+    _isRangeReady: Readonly<{
+        status: "success" | "fail" | "pending";
+        resolved: boolean;
+        promise: Promise<boolean>;
+        resolve: () => void;
+    }>;
+    axis: 'x' | 'y' | '-x' | '-y';
+    /**
+     * The minimum value that the thumb can have.
+     */
+    minValue: number;
+    /**
+     * The maximum value that the thumb can have.
+     */
+    maxValue: number;
+    /**
+     * The current value of the thumb.
+     */
+    value: number;
+    step: number;
+    name?: string;
+    /**
+     * A boolean indicates if the thumb is focused.
+     *
+     * for internal use only by mu-range
+     */
+    focused: boolean;
+    /**
+     * A string indicates how range handles other thumbs intersecting with with thumb.
+     *
+     * `prevent` is the default behavior, and it means do not allow other thumbs intersecting this thumb to pass.
+     *
+     * `pass-over` means allow other thumbs to pass over this thumb so they can have a free movement.
+     */
+    intersectBehavior: 'prevent' | 'pass-over';
+    /**
+     * A boolean indicates if the thumb should be completely ignored when interacting with the range.
+     *
+     * When `true`, the thumb will not be active when the user interacts with the range, and other non-transparent thumbs will be active instead.
+     *
+     * It's like setting `readonly` or `disabled` on the thumb, but instead of nothing being active, other thumbs will be active.
+     */
+    transparent: boolean;
+    /**
+     * A boolean indicates if the thumb should force the step when interacting with the range.
+     */
+    forceStep: boolean;
+    container?: HTMLElement;
+    /**
+     * The minimum and maximum value of the closest mu-range element.
+     *
+     * Which is used to calculate the percentage of the thumb position correctly.
+     *
+     * for internal use only by mu-range
+     */
+    _range: [minValue: number, maxValue: number];
+    get range(): [number, number];
+    set range(value: [number, number]);
+    constructor();
+    /**
+     * returns an object containing the width and height of the thumb
+     */
+    get size(): {
+        width: number;
+        height: number;
+    };
+    connectedCallback(): void;
+    _slotChangeHandler: () => void;
+    /**
+     * Updates the value of related mu-range-thumb-value elements
+     */
+    _updateValueElements(): void;
+    getUpdateComplete(): Promise<boolean>;
+    /**
+     * Returns a boolean indicating if the value is valid to be set.
+     */
+    isValidValue(value: number): boolean;
+    /**
+     * Sets the value of the thumb and returns a boolean indicating if the value was changed.
+     * @param value The value to set
+     * @returns A boolean indicating if the value was changed
+     */
+    setValue(value: number): boolean;
+    /**
+     * Sets the value of the thumb from a percentage and returns a boolean indicating if the value was changed.
+     * @param percentage The percentage to set
+     * @returns A boolean indicating if the value was changed
+     */
+    setValueFromPercentage(percentage: number): boolean;
+    /**
+     * Converts a given value to a percentage based on the current range and returns it.
+     */
+    getPercentageFromValue(value: number): number;
+    /**
+     * Updates the axis of related mu-range-thumb-value elements
+     */
+    updateValueElementsAxis(): void;
+    updated(_changedProperties: PropertyValues<this>): Promise<void>;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-range-thumb': MuRangeThumb;
+    }
+}
+
+export { MuRangeThumb };