@mustib/web-components 0.0.0-alpha.0

package/components/mu-range.js

@@ -0,0 +1,661 @@
+import { M as MUElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { MuRangeThumb } from './mu-range-thumb.js';
+import { MuTransparent } from './mu-transparent.js';
+import { MuRangeFill } from './mu-range-fill.js';
+import '../decorators.js';
+import './mu-range-thumb-value.js';
+
+class MuRange extends MUElement {
+    get isControlled() {
+        return this.value !== undefined;
+    }
+    set activeThumb(thumb) {
+        if (thumb && (thumb.element.transparent || thumb.element.disabled || thumb.element.readonly))
+            return;
+        const prev = this._activeThumb;
+        if (prev)
+            prev.element.focused = false;
+        this._activeThumb = thumb;
+    }
+    get activeThumb() {
+        return this._activeThumb;
+    }
+    constructor() {
+        super();
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         * The axis of the range.
+         *
+         * `x` - horizontal axis auto matching the direction
+         *
+         * `-x` - horizontal axis reversed
+         *
+         * `y` - vertical axis
+         *
+         * `-y` - vertical axis reversed
+         */
+        this.axis = 'x';
+        /**
+         * The minimum value of the range.
+         */
+        this.min = 0;
+        /**
+         * The maximum value of the range.
+         */
+        this.max = 100;
+        /**
+         * Thumb behavior when pointerdown on a non-thumb element.
+         *
+         * - `prevent` - don't do anything
+         *
+         * - `dispatch` - dispatch the {@link Events['mu-range-empty-area']} event
+         *
+         * - `nearest` - move the nearest thumb to the pointer position
+         *
+         * @default `nearest`
+         */
+        this.emptyArea = 'nearest';
+        this._isReadyPromise = this.generateIsReadyPromise();
+        this._thumbs = [];
+        this._thumbsElementsMap = new Map();
+        this._thumbsNamesMap = new Map();
+        /**
+         * this is used to prevent focus listener from running when the pointer is down otherwise active thumb will gain focus when the pointer is down
+         */
+        this._isPointerDown = false;
+        this._slotChangeHandler = async () => {
+            const previousThumbsElementsMap = new Map(this._thumbsElementsMap);
+            this._thumbs = [];
+            this._thumbsElementsMap.clear();
+            this._thumbsNamesMap.clear();
+            const previousActiveThumb = this.activeThumb;
+            this.activeThumb = undefined;
+            const fillElements = [];
+            const assignElement = (element) => {
+                if (element instanceof MuRangeThumb) {
+                    element.range = [this.min, this.max];
+                    element.axis = this.axis;
+                    const previousThumb = previousThumbsElementsMap.get(element);
+                    const thumb = previousThumb ?? {
+                        element,
+                        name: element.name ?? element.id,
+                        linkedFillElements: undefined,
+                        value: element.value,
+                        index: this._thumbs.length,
+                    };
+                    this._thumbs.push(thumb);
+                    this._thumbsElementsMap.set(element, thumb);
+                    this._thumbsNamesMap.set(thumb.name, thumb);
+                    if (previousActiveThumb?.element === element)
+                        this.activeThumb = thumb;
+                }
+                else if (element instanceof MuRangeFill) {
+                    fillElements.push(element);
+                }
+            };
+            this.renderRoot.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
+                if (el instanceof MuTransparent) {
+                    el.contents.forEach(assignElement);
+                }
+                else {
+                    assignElement(el);
+                }
+            });
+            if (this._thumbs.length === 0) {
+                console.warn('mu-range should have at least one mu-range-thumb', this);
+            }
+            else {
+                this.sortThumbs();
+            }
+            fillElements.forEach((element, i) => {
+                const thumbsNames = element.for ? element.for.split(',') : [this._thumbs[i]?.name];
+                if (thumbsNames.length === 0) {
+                    console.warn(`mu-range-fill has no thumb names`, element);
+                    return;
+                }
+                element.setAxis(this.axis);
+                const thumbs = thumbsNames.reduce((thumbs, name) => {
+                    const thumb = this._thumbsNamesMap.get(name || '');
+                    if (!thumb) {
+                        console.warn(`no thumb found with name (${name}) for mu-range-fill`, element);
+                    }
+                    else {
+                        thumbs.push(thumb);
+                    }
+                    return thumbs;
+                }, []);
+                const rangeFill = {
+                    element,
+                    linkedThumbs: thumbs
+                };
+                thumbs.forEach(thumb => {
+                    if (thumb.linkedFillElements)
+                        thumb.linkedFillElements.push(rangeFill);
+                    else
+                        thumb.linkedFillElements = [rangeFill];
+                    this.updateRangeFill(rangeFill);
+                });
+            });
+            if (!this._isReadyPromise.resolved) {
+                this._isReadyPromise.resolve();
+            }
+            else {
+                const deletedThumbs = [...previousThumbsElementsMap.values()].filter(thumb => !this._thumbsElementsMap.has(thumb.element));
+                const newThumbs = this._thumbs.filter(thumb => !previousThumbsElementsMap.has(thumb.element));
+                if (newThumbs.length) {
+                    const eventName = 'mu-range-added-thumbs';
+                    const event = new CustomEvent(eventName, {
+                        bubbles: true,
+                        cancelable: true,
+                        composed: true,
+                        detail: {
+                            data: newThumbs.map(thumb => ({ name: thumb.name, value: thumb.value }))
+                        }
+                    });
+                    this.dispatchEvent(event);
+                }
+                if (deletedThumbs.length) {
+                    const eventName = 'mu-range-removed-thumbs';
+                    const event = new CustomEvent(eventName, {
+                        bubbles: true,
+                        cancelable: true,
+                        composed: true,
+                        detail: {
+                            data: deletedThumbs.map(thumb => ({ name: thumb.name, value: thumb.value }))
+                        }
+                    });
+                    this.dispatchEvent(event);
+                }
+            }
+        };
+        this._keydownHandler = (e) => {
+            const thumb = this.activeThumb;
+            if (this.disabled || this.readonly || !thumb || e.defaultPrevented)
+                return;
+            let increaseKey = 'ArrowRight';
+            let decreaseKey = 'ArrowLeft';
+            switch (this.axis) {
+                case 'x':
+                    increaseKey = 'ArrowRight';
+                    decreaseKey = 'ArrowLeft';
+                    break;
+                case "-x":
+                    decreaseKey = 'ArrowRight';
+                    increaseKey = 'ArrowLeft';
+                    break;
+                case "y":
+                    decreaseKey = 'ArrowDown';
+                    increaseKey = 'ArrowUp';
+                    break;
+                case "-y":
+                    decreaseKey = 'ArrowUp';
+                    increaseKey = 'ArrowDown';
+                    break;
+                default:
+                    this.axis;
+                    break;
+            }
+            const setValue = (value) => {
+                e.preventDefault();
+                this.focus();
+                thumb.element.focused = true;
+                this._setThumbValue(thumb, value);
+            };
+            const jumpPercentage = 10;
+            const jumpStepValue = (thumb.element.maxValue - thumb.element.minValue) / jumpPercentage;
+            switch (e.key) {
+                case increaseKey:
+                    setValue(thumb.value + thumb.element.step);
+                    break;
+                case decreaseKey:
+                    setValue(thumb.value - thumb.element.step);
+                    break;
+                case 'Home':
+                    setValue(thumb.element.minValue);
+                    break;
+                case 'End':
+                    setValue(thumb.element.maxValue);
+                case 'PageUp':
+                    setValue(thumb.value + jumpStepValue);
+                    break;
+                case 'PageDown':
+                    setValue(thumb.value - jumpStepValue);
+                    break;
+                case 'Tab':
+                    {
+                        this.switchNavigationActiveItem(e.shiftKey ? 'prev' : 'next') && e.preventDefault();
+                    }
+                    break;
+            }
+        };
+        this._pointerdownHandler = ((e) => {
+            if (this.disabled || this.readonly || e.defaultPrevented)
+                return;
+            this._isPointerDown = true;
+            document.addEventListener('pointermove', this._documentPointermoveHandler);
+            document.addEventListener('pointerup', this._documentPointerupHandler);
+            const thumbEl = MUElement.closestPierce('mu-range-thumb', e.target);
+            if ((thumbEl && (thumbEl.disabled || thumbEl.readonly) || this.emptyArea === 'prevent'))
+                return;
+            if (thumbEl && !thumbEl.transparent) {
+                const activeThumb = this._thumbsElementsMap.get(thumbEl);
+                this.activeThumb = activeThumb;
+                return;
+            }
+            if (this.emptyArea === 'dispatch') {
+                const eventName = 'mu-range-empty-area';
+                const event = new CustomEvent(eventName, {
+                    bubbles: true,
+                    cancelable: true,
+                    composed: true,
+                    detail: { values: this._getValuesFromEvent(e) }
+                });
+                this.dispatchEvent(event);
+                return;
+            }
+            this.emptyArea;
+            const { value } = this._getValuesFromEvent(e);
+            const shouldBreak = (item) => {
+                return ((item.element.disabled || item.element.readonly) && !(item.element.intersectBehavior === 'pass-over' || item.element.transparent));
+            };
+            const isNavigable = (item) => {
+                return !(item.element.transparent || item.element.disabled || item.element.readonly);
+            };
+            const leftThumb = this.getNavigationItem({
+                direction: 'next',
+                items: this._thumbs,
+                shouldBreak(item) {
+                    return item.value > value && shouldBreak(item);
+                },
+                isNavigable: (item) => {
+                    return item.value > value && isNavigable(item);
+                },
+            });
+            const rightThumb = this.getNavigationItem({
+                direction: 'prev',
+                items: this._thumbs,
+                fromIndex: leftThumb?.index || this._thumbs.length,
+                shouldBreak(item) {
+                    return item.value < value && shouldBreak(item);
+                },
+                isNavigable: (item) => {
+                    return item.value < value && isNavigable(item);
+                },
+            });
+            let candidateThumb;
+            if (!rightThumb)
+                candidateThumb = leftThumb;
+            else if (!leftThumb)
+                candidateThumb = rightThumb;
+            else {
+                candidateThumb = value - rightThumb.value > leftThumb.value - value ? leftThumb : rightThumb;
+            }
+            if (candidateThumb) {
+                this._setThumbValue(candidateThumb, value);
+                this.activeThumb = candidateThumb;
+            }
+        });
+        this._documentPointerupHandler = (e) => {
+            this._isPointerDown = false;
+            document.removeEventListener('pointermove', this._documentPointermoveHandler);
+            document.removeEventListener('pointerup', this._documentPointerupHandler);
+            if (!this.activeThumb)
+                return;
+            const { value } = this._getValuesFromEvent(e);
+            this._setThumbValue(this.activeThumb, value);
+        };
+        this._pointermoveHandler = (e) => {
+            if (!this.activeThumb)
+                return;
+            const { value } = this._getValuesFromEvent(e);
+            this._setThumbValue(this.activeThumb, value);
+        };
+        this._documentPointermoveHandler = throttle((e) => {
+            this._pointermoveHandler(e);
+            this._debouncedPointermoveHandler(e);
+        }, 50);
+        this._debouncedPointermoveHandler = debounce(this._pointermoveHandler, 50);
+        this.addEventListener('keydown', this._keydownHandler);
+        this.updateComplete.then(() => {
+            this.addEventListener('blur', () => {
+                if (this._activeThumb) {
+                    this._activeThumb.element.focused = false;
+                }
+            });
+            this.addEventListener('focus', (e) => {
+                if (this._isPointerDown || this.disabled || this.readonly || e.defaultPrevented)
+                    return;
+                if (this._activeThumb) {
+                    e.preventDefault();
+                    this._activeThumb.element.focused = true;
+                }
+                else {
+                    this.switchNavigationActiveItem('next') && e.preventDefault();
+                }
+            });
+            this.renderRoot.addEventListener('slotchange', this._slotChangeHandler);
+            this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointermove', this._documentPointermoveHandler);
+        document.removeEventListener('pointerup', this._documentPointerupHandler);
+    }
+    /**
+     *
+     * @returns an array of objects containing the name and value of each thumb
+     */
+    getValue() {
+        return this._thumbs.map(thumb => ({ name: thumb.name, value: thumb.value }));
+    }
+    /**
+     * Programmatically insert a thumb element
+     */
+    async insertThumbElement(thumbEl) {
+        this.appendChild(thumbEl);
+        await wait();
+        await this.updateComplete;
+        const thumb = this._thumbsElementsMap.get(thumbEl);
+        if (!thumb)
+            return;
+        this._setThumbValue(thumb, thumbEl.value);
+        this.activeThumb = thumb;
+    }
+    /**
+     * Switches the active thumb for keyboard navigation
+     */
+    switchNavigationActiveItem(direction) {
+        const navigationThumb = this.getNavigationItem({
+            direction,
+            items: this._thumbs,
+            fromIndex: this._activeThumb?.index,
+            isNavigable(item) {
+                return !(item.element.transparent || item.element.disabled || item.element.readonly);
+            },
+        });
+        if (!navigationThumb)
+            return false;
+        this.activeThumb = navigationThumb;
+        this.focus();
+        navigationThumb.element.focused = true;
+        return true;
+    }
+    dispatchChangeEvent(thumbs = this._thumbs) {
+        const eventName = 'mu-range-change';
+        const data = thumbs.map(thumb => ({ name: thumb.name, value: thumb.value }));
+        this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { data: data }, cancelable: true }));
+    }
+    _setThumbValue(thumb, value) {
+        const stepValue = this._getThumbStepValue(thumb, value);
+        if (stepValue === thumb.value)
+            return;
+        if (this.isControlled) {
+            this.sortThumbs();
+            const sortedThumbs = this._thumbs.map(_thumb => ({ name: _thumb.name, value: _thumb.name === thumb.name ? stepValue : thumb.value }));
+            console.table(sortedThumbs);
+            // this.dispatchChangeEvent(sortedThumbs)
+            return;
+        }
+        const success = thumb.element.setValue(stepValue);
+        if (success) {
+            thumb.value = stepValue;
+            this.sortThumbs();
+            thumb.linkedFillElements?.forEach(this.updateRangeFill);
+            this.dispatchChangeEvent();
+        }
+    }
+    /**
+     * Updates the range fill element
+     */
+    async updateRangeFill(range) {
+        const { element: rangeFillEl, linkedThumbs } = range;
+        const [firstThumb, secondThumb] = linkedThumbs;
+        if (firstThumb && !secondThumb) {
+            await firstThumb.element.updateComplete;
+            let start = 0;
+            let end = 0;
+            switch (rangeFillEl.type) {
+                case 'start':
+                    start = firstThumb.element.minValue;
+                    end = firstThumb.element.value;
+                    break;
+                case "end":
+                    start = firstThumb.element.value;
+                    end = firstThumb.element.maxValue;
+                    break;
+                case "both":
+                    start = firstThumb.element.minValue;
+                    end = firstThumb.element.maxValue;
+                    break;
+                default:
+                    rangeFillEl.type;
+                    break;
+            }
+            rangeFillEl.setPercentage([firstThumb.element.getPercentageFromValue(start), firstThumb.element.getPercentageFromValue(end)]);
+        }
+        else if (firstThumb && secondThumb) {
+            await firstThumb.element.updateComplete;
+            await secondThumb.element.updateComplete;
+            rangeFillEl.setPercentage([firstThumb.element.getPercentageFromValue(firstThumb.element.value), secondThumb.element.getPercentageFromValue(secondThumb.element.value)]);
+        }
+    }
+    /**
+     * Takes a thumb and a value and returns the step value to be set
+     */
+    _getThumbStepValue(thumb, value) {
+        const isAdd = value > thumb.value;
+        const step = thumb.element.step;
+        const numOfSteps = Math.round(value / step);
+        let stepValue;
+        if (isAdd) {
+            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, (numOfSteps * step)));
+        }
+        else {
+            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, (numOfSteps * step)));
+        }
+        const nextThumb = this.getNavigationItem({
+            direction: 'next',
+            items: this._thumbs,
+            fromIndex: thumb.index,
+            isNavigable(item) {
+                return !(item.element.transparent || item.element.intersectBehavior === 'pass-over');
+            },
+        });
+        const prevThumb = this.getNavigationItem({
+            direction: 'prev',
+            items: this._thumbs,
+            fromIndex: thumb.index,
+            isNavigable(item) {
+                return !(item.element.transparent || item.element.intersectBehavior === 'pass-over');
+            },
+        });
+        if (isAdd && nextThumb && nextThumb.element.intersectBehavior === 'prevent') {
+            const nextRemainder = nextThumb.value % step;
+            if (thumb.element.forceStep && stepValue > nextThumb.value && nextRemainder !== 0) {
+                const newStep = nextThumb.value - nextRemainder;
+                const newStepRemainder = newStep % step;
+                stepValue = newStep - newStepRemainder;
+            }
+            else
+                stepValue = Math.min(nextThumb.value, stepValue);
+        }
+        else if (!isAdd && prevThumb && prevThumb.element.intersectBehavior === 'prevent') {
+            const prevRemainder = prevThumb.value % step;
+            if (thumb.element.forceStep && stepValue < prevThumb.value && prevRemainder !== 0) {
+                const newStep = prevRemainder + prevThumb.value;
+                const newStepRemainder = newStep % step;
+                stepValue = newStep - newStepRemainder;
+            }
+            else
+                stepValue = Math.max(prevThumb.value, stepValue);
+        }
+        return thumb.element.isValidValue(stepValue) ? stepValue : thumb.value;
+    }
+    /**
+     * gets the value and percentage from pointer event
+     */
+    _getValuesFromEvent(e) {
+        const direction = getComputedStyle(this).direction;
+        const boundaries = getElementBoundaries(this);
+        const xPoint = (e.clientX - boundaries.elementLeft);
+        const yPoint = (e.clientY - boundaries.elementTop);
+        const mousePoint = this.axis === 'x' ? xPoint : this.axis === '-x' ? boundaries.width - xPoint : this.axis === 'y' ? yPoint : boundaries.height - yPoint;
+        const elementSize = this.axis === 'x' || this.axis === '-x' ? boundaries.width : boundaries.height;
+        const rawPercentage = Math.max(0, Math.min(((mousePoint / elementSize) * 100), 100));
+        const percentage = direction === 'rtl' || this.axis === 'y' || this.axis === '-y' ? 100 - rawPercentage : rawPercentage;
+        const minValue = this.min;
+        const maxValue = this.max;
+        const roundedPercentage = (Math.round(percentage * 100)) / 100;
+        const value = (percentage / 100) * (maxValue - minValue) + minValue;
+        return { roundedPercentage, value, percentage, rawPercentage };
+    }
+    /**
+     * sorts the thumbs
+     */
+    sortThumbs() {
+        this._thumbs.sort((a, b) => a.value - b.value).forEach((thumb, i) => {
+            thumb.index = i;
+        });
+    }
+    /**
+     * @param valueString
+     *
+     * a comma separated string without spaces of (thumb values) or (an optional thumb name followed by a colon then the value) or a mix of both
+     *
+     * make sure to only use one format where all has names or no names, because if there is no names, the order of the values will be the same as the order of the thumbs.
+     * so you might end up with a thumb with a different value (named and not named).
+     *
+     * @example "0,50,100"
+     * @example "thumb1:0,thumb2:50,thumb3:100"
+     * @example "0,thumb2:50,100"
+     *
+     */
+    async setValueFromString(valueString) {
+        await this.updateComplete;
+        if (!valueString)
+            return;
+        const separator = ',';
+        const values = valueString.split(separator);
+        const valuesNames = new Set();
+        let usedCharacterIndexInValueString = -1;
+        values.forEach((_value, i) => {
+            const arr = _value.split(':');
+            const thumbName = arr.length > 1 ? arr[0] : this._thumbs[i]?.name;
+            const valueNumber = Number(arr.length > 1 ? arr[1] : arr[0]);
+            usedCharacterIndexInValueString += _value.length;
+            if (!thumbName)
+                return;
+            if (valuesNames.has(thumbName)) {
+                console.warn(`The thumb named (${thumbName}) repeated multiple times in the value string (${valueString}), when trying to set range value from string, you can find that duplication with the value (${_value}) in that string from index (${usedCharacterIndexInValueString - i + 1}) to index (${usedCharacterIndexInValueString + i})`, this);
+                return;
+            }
+            valuesNames.add(thumbName);
+            if (Number.isNaN(valueNumber))
+                return;
+            const thumb = this._thumbsNamesMap.get(thumbName);
+            if (!thumb)
+                return;
+            const isValid = thumb.element.isValidValue(valueNumber);
+            if (!isValid) {
+                console.warn(`Trying to set invalid value (${valueNumber}) for the thumb named (${thumb.name}) from the string (${valueString})`, thumb.element, this);
+                return;
+            }
+            const success = thumb.element.setValue(valueNumber);
+            if (success) {
+                thumb.value = valueNumber;
+                thumb.linkedFillElements?.forEach(this.updateRangeFill);
+            }
+        });
+        this.sortThumbs();
+    }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this._isReadyPromise.promise;
+        return result;
+    }
+    async firstUpdated(_changedProperties) {
+        this._slotChangeHandler();
+        await this.updateComplete;
+        if (_changedProperties.has('defaultValue') && !this.isControlled)
+            this.setValueFromString(this.defaultValue || '');
+    }
+    async updated(_changedProperties) {
+        await this.updateComplete;
+        this.tabIndex = this.disabled || this.readonly ? -1 : 0;
+        if (_changedProperties.has('value')) {
+            this.setValueFromString(this.value || '');
+        }
+    }
+    render() {
+        return html `
+      <div tabindex='-1' id='container' part='container' @pointerdown='${this._pointerdownHandler}'>
+        <slot>
+        </slot>
+      </div>
+    `;
+    }
+}
+MuRange.styles = [MUElement.cssBase, css `
+    #container {
+      --range-background-color: var(--mu-range-background-color, var(--mu-color-100));
+      --range-thickness: var(--mu-range-thickness, calc(var(--mu-base-rem) * .7));
+      position: relative;
+      border-radius: 9999px;
+      background-color: var(--range-background-color);
+    }
+    
+    :host(:focus-visible) #container::after {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border-radius: inherit;
+      ${MUElement.css.focus}
+    }
+
+    :host([axis='x']) #container,
+    :host([axis='-x']) #container
+    {
+      height: var(--range-thickness);
+      width: var(--range-distance, 100%);
+    }
+
+    :host([axis='y']) #container,
+    :host([axis='-y']) #container
+    {
+      width: var(--range-thickness);
+      height: var(--range-distance, 150px);
+      max-height: 100%;
+    }
+
+    @media (prefers-color-scheme: light) {
+      #container {
+        --range-background-color: var(--mu-range-background-color, var(--mu-color-200));
+        color: red;
+      }
+    }
+    
+  `];
+__decorate([
+    property({ reflect: true, type: String })
+], MuRange.prototype, "axis", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], MuRange.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], MuRange.prototype, "max", void 0);
+__decorate([
+    property()
+], MuRange.prototype, "value", void 0);
+__decorate([
+    property({ attribute: 'default-value' })
+], MuRange.prototype, "defaultValue", void 0);
+__decorate([
+    property({ reflect: true, type: String, attribute: 'empty-area' })
+], MuRange.prototype, "emptyArea", void 0);
+MuRange.register('mu-range');
+
+export { MuRange };

package/components/mu-select-item.d.ts

@@ -0,0 +1,29 @@
+import { MUElement } from './mu-element.js';
+import { PropertyValues } from 'lit';
+import '@mustib/utils/browser';
+
+/**
+ * This element is designed to be stateless, its purpose is to provide a means of adding custom markup and attributes
+ * without the need for controlling its state externally. It should not be modified by other parties, and its state is
+ * solely controlled by its controller.
+ */
+declare class MuSelectItem extends MUElement {
+    static styles: any[];
+    eventActionData: undefined;
+    value: any;
+    selected: boolean;
+    active: boolean;
+    filteredOut: boolean;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    protected _addEventActionAttributes(): void;
+    updated(changed: PropertyValues<this>): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mu-select-item": MuSelectItem;
+    }
+}
+
+export { MuSelectItem };