@mustib/web-components 0.0.0-alpha.2 → 0.0.0-alpha.4

package/components/mu-element.d.ts

@@ -1,6 +1,14 @@
 import { closestPierce, EventAction } from '@mustib/utils/browser';
 import { LitElement } from 'lit';
 
+type MuElementComponent = {
+    attributes: {
+        disabled: MuElement['disabled'];
+        readonly: MuElement['readonly'];
+        'no-event-action-attributes': MuElement['noEventActionAttributes'];
+        'event-action-events': MuElement['eventActionEvents'];
+    };
+};
 type Elements = [
     'mu-select-item',
     'mu-select-items',
@@ -17,11 +25,11 @@ type Elements = [
     'mu-range-thumb-value',
     'mu-icon'
 ];
-declare abstract class MUElement extends LitElement {
+declare abstract class MuElement extends LitElement {
     #private;
     static closestPierce: typeof closestPierce;
     static register(this: {
-        new (): MUElement;
+        new (): MuElement;
     }, tagName: Elements[number]): void;
     static css: {
         focus: any;
@@ -71,7 +79,7 @@ declare abstract class MUElement extends LitElement {
         resolve: () => void;
     }>;
     getMuElementById(id: string): {
-        element: MUElement;
+        element: MuElement;
     } | undefined;
     closestPierce(selector: string): HTMLElement | null;
     /**
@@ -104,4 +112,5 @@ declare abstract class MUElement extends LitElement {
     disconnectedCallback(): void;
 }
 
-export { MUElement };
+export { MuElement };
+export type { MuElementComponent };

package/components/mu-element.js

@@ -1,3 +1,3 @@
-export { M as MUElement } from '../mu-element-BTuCCJpo.js';
+export { M as MuElement } from '../mu-element-C36Rgp-m.js';
 import 'lit';
 import 'lit/decorators.js';

package/components/mu-icon.d.ts

@@ -1,13 +1,13 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuIconComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         name: MuIcon['name'];
     };
 };
-declare class MuIcon extends MUElement {
+declare class MuIcon extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;

package/components/mu-icon.js

@@ -1,8 +1,8 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
-class MuIcon extends MUElement {
+class MuIcon extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -29,7 +29,7 @@ class MuIcon extends MUElement {
     }
 }
 MuIcon.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host {
       display: inline-block;

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

@@ -1,14 +1,14 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuRangeFillComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         for: MuRangeFill['for'];
         type: MuRangeFill['type'];
     };
 };
-declare class MuRangeFill extends MUElement {
+declare class MuRangeFill extends MuElement {
     static styles: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;

package/components/mu-range-fill.js

@@ -1,8 +1,8 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-class MuRangeFill extends MUElement {
+class MuRangeFill extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -48,7 +48,7 @@ class MuRangeFill extends MUElement {
     }
 }
 MuRangeFill.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     #container {
       --range-fill-background-color: var(--mu-range-fill-background-color, var(--mu-color-500));

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

@@ -1,14 +1,14 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuRangeThumbValueComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         reversed: MuRangeThumbValue['reversed'];
         type: MuRangeThumbValue['type'];
     };
 };
-declare class MuRangeThumbValue extends MUElement {
+declare class MuRangeThumbValue extends MuElement {
     static styles: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;

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

@@ -1,8 +1,8 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-class MuRangeThumbValue extends MUElement {
+class MuRangeThumbValue extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -72,7 +72,7 @@ class MuRangeThumbValue extends MUElement {
     }
 }
 MuRangeThumbValue.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host([reversed]) #container[axis='x'] {
       top: 100%;

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

@@ -1,10 +1,10 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuRangeThumbValue } from './mu-range-thumb-value.js';
 import '@mustib/utils/browser';
 
 type MuRangeThumbComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         'min-value': MuRangeThumb['minValue'];
         'max-value': MuRangeThumb['maxValue'];
         value: MuRangeThumb['value'];
@@ -16,7 +16,7 @@ type MuRangeThumbComponent = {
         'force-step': MuRangeThumb['forceStep'];
     };
 };
-declare class MuRangeThumb extends MUElement {
+declare class MuRangeThumb extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;

package/components/mu-range-thumb.js

@@ -1,10 +1,10 @@
-import { M as MUElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuRangeThumbValue } from './mu-range-thumb-value.js';
 
-class MuRangeThumb extends MUElement {
+class MuRangeThumb extends MuElement {
     get range() {
         return this._range;
     }
@@ -215,7 +215,7 @@ class MuRangeThumb extends MUElement {
     }
 }
 MuRangeThumb.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     #container {
       --thumb-size: var(--mu-range-thumb-size, calc(var(--range-thickness) * 3));
@@ -235,7 +235,7 @@ MuRangeThumb.styles = [
 
 
     :host([focused]) #container {
-      ${MUElement.css.focus};
+      ${MuElement.css.focus};
     }
 
     #container[axis='x'] {

package/components/mu-range.d.ts

@@ -1,12 +1,12 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuRangeFill } from './mu-range-fill.js';
 import { MuRangeThumb } from './mu-range-thumb.js';
 import '@mustib/utils/browser';
 import './mu-range-thumb-value.js';
 
 type MuRangeComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         axis: MuRange['axis'];
         min: MuRange['min'];
         max: MuRange['max'];
@@ -27,6 +27,7 @@ type RangeFill = {
     element: MuRangeFill;
     linkedThumbs: RangeThumb[];
 };
+type ChangeEventSrc = 'pointerdown' | 'pointerup' | 'pointermove' | 'keydown' | 'insert';
 type Events = {
     /**
      * Emitted when pointerdown on a non-thumb element and empty-area attribute has a value of "dispatch".
@@ -44,6 +45,7 @@ type Events = {
             name: string;
             value: number;
         }[];
+        src: ChangeEventSrc;
     }>;
     /**
      * Emitted when new thumbs are added after the initial render.
@@ -64,7 +66,7 @@ type Events = {
         }[];
     }>;
 };
-declare class MuRange extends MUElement {
+declare class MuRange extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -151,11 +153,15 @@ declare class MuRange extends MUElement {
      * Switches the active thumb for keyboard navigation
      */
     switchNavigationActiveItem(direction: 'next' | 'prev'): boolean;
-    dispatchChangeEvent(thumbs?: {
+    dispatchChangeEvent(thumbs: {
         name: string;
         value: number;
-    }[]): void;
-    _setThumbValue(thumb: RangeThumb, value: number): void;
+    }[] | undefined, src: ChangeEventSrc): void;
+    _setThumbValue({ src, thumb, value, }: {
+        thumb: RangeThumb;
+        value: number;
+        src: ChangeEventSrc;
+    }): void;
     /**
      * Updates the range fill element
      */

package/components/mu-range.js

@@ -1,4 +1,4 @@
-import { M as MUElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
@@ -6,7 +6,7 @@ import { MuRangeFill } from './mu-range-fill.js';
 import { MuRangeThumb } from './mu-range-thumb.js';
 import './mu-range-thumb-value.js';
 
-class MuRange extends MUElement {
+class MuRange extends MuElement {
     get isControlled() {
         return this.value !== undefined;
     }
@@ -215,7 +215,7 @@ class MuRange extends MUElement {
                 e.preventDefault();
                 this.focus();
                 thumb.element.focused = true;
-                this._setThumbValue(thumb, value);
+                this._setThumbValue({ thumb, value, src: 'keydown' });
             };
             const jumpPercentage = 10;
             const jumpStepValue = (thumb.element.maxValue - thumb.element.minValue) / jumpPercentage;
@@ -252,7 +252,7 @@ class MuRange extends MUElement {
             this._isPointerDown = true;
             document.addEventListener('pointermove', this._documentPointermoveHandler);
             document.addEventListener('pointerup', this._documentPointerupHandler);
-            const thumbEl = MUElement.closestPierce('mu-range-thumb', e.target);
+            const thumbEl = MuElement.closestPierce('mu-range-thumb', e.target);
             if ((thumbEl && (thumbEl.disabled || thumbEl.readonly)) ||
                 this.emptyArea === 'prevent')
                 return;
@@ -317,7 +317,7 @@ class MuRange extends MUElement {
                         : rightThumb;
             }
             if (candidateThumb) {
-                this._setThumbValue(candidateThumb, value);
+                this._setThumbValue({ thumb: candidateThumb, value, src: 'pointerdown' });
                 this.activeThumb = candidateThumb;
             }
         };
@@ -328,13 +328,13 @@ class MuRange extends MUElement {
             if (!this.activeThumb)
                 return;
             const { value } = this._getValuesFromEvent(e);
-            this._setThumbValue(this.activeThumb, value);
+            this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointerup' });
         };
         this._pointermoveHandler = (e) => {
             if (!this.activeThumb)
                 return;
             const { value } = this._getValuesFromEvent(e);
-            this._setThumbValue(this.activeThumb, value);
+            this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointermove' });
         };
         this._documentPointermoveHandler = throttle((e) => {
             this._pointermoveHandler(e);
@@ -390,7 +390,7 @@ class MuRange extends MUElement {
         const thumb = this._thumbsElementsMap.get(thumbEl);
         if (!thumb)
             return;
-        this._setThumbValue(thumb, thumbEl.value);
+        this._setThumbValue({ thumb, value: thumb.value, src: 'insert' });
         this.activeThumb = thumb;
     }
     /**
@@ -414,17 +414,17 @@ class MuRange extends MUElement {
         navigationThumb.element.focused = true;
         return true;
     }
-    dispatchChangeEvent(thumbs = this._thumbs) {
+    dispatchChangeEvent(thumbs = this._thumbs, src) {
         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 },
+            detail: { data: data, src },
             cancelable: true,
         }));
     }
-    _setThumbValue(thumb, value) {
+    _setThumbValue({ src, thumb, value, }) {
         const stepValue = this._getThumbStepValue(thumb, value);
         if (stepValue === thumb.value)
             return;
@@ -434,7 +434,7 @@ class MuRange extends MUElement {
                 name: _thumb.name,
                 value: _thumb.name === thumb.name ? stepValue : thumb.value,
             }));
-            this.dispatchChangeEvent(sortedThumbs);
+            this.dispatchChangeEvent(sortedThumbs, src);
             return;
         }
         const success = thumb.element.setValue(stepValue);
@@ -442,7 +442,7 @@ class MuRange extends MUElement {
             thumb.value = stepValue;
             this.sortThumbs();
             thumb.linkedFillElements?.forEach(this.updateRangeFill);
-            this.dispatchChangeEvent();
+            this.dispatchChangeEvent(undefined, src);
         }
     }
     /**
@@ -665,7 +665,7 @@ class MuRange extends MUElement {
     }
 }
 MuRange.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     #container {
       --range-background-color: var(--mu-range-background-color, var(--mu-color-100));
@@ -680,7 +680,7 @@ MuRange.styles = [
       position: absolute;
       inset: -4px;
       border-radius: inherit;
-      ${MUElement.css.focus}
+      ${MuElement.css.focus}
     }
 
     :host([axis='x']) #container,

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

@@ -1,9 +1,9 @@
 import { PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuSelectItemComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         value: MuSelectItem['value'];
         selected: MuSelectItem['selected'];
         active: MuSelectItem['active'];
@@ -15,7 +15,7 @@ type MuSelectItemComponent = {
  * 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 {
+declare class MuSelectItem extends MuElement {
     static styles: any[];
     eventActionData: undefined;
     value: any;

package/components/mu-select-item.js

@@ -1,4 +1,4 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  * 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.
  */
-class MuSelectItem extends MUElement {
+class MuSelectItem extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -51,7 +51,7 @@ class MuSelectItem extends MUElement {
     }
 }
 MuSelectItem.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host {
       overflow: hidden;
@@ -62,7 +62,7 @@ MuSelectItem.styles = [
     }
 
     :host(:focus-visible) #container {
-      ${MUElement.css.focus}
+      ${MuElement.css.focus}
     }
 
     :host([active]) #container {

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

@@ -1,10 +1,10 @@
 import { EventAction, GenerateData } from '@mustib/utils/browser';
 import { PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuSelectItem } from './mu-select-item.js';
 
 type MuSelectItemsComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         opened: MuSelectItems['opened'];
         multiple: MuSelectItems['multiple'];
         value: MuSelectItems['value'];
@@ -83,7 +83,7 @@ type SwitchActiveItemOptions = Partial<{
      */
     switchBack: boolean;
 }>;
-declare class MuSelectItems extends MUElement {
+declare class MuSelectItems extends MuElement {
     static styles: any[];
     static eventAction: EventAction<GenerateData<MuSelectItems>>;
     opened: boolean;

package/components/mu-select-items.js

@@ -1,10 +1,10 @@
-import { M as MUElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSelectItem } from './mu-select-item.js';
 
-class MuSelectItems extends MUElement {
+class MuSelectItems extends MuElement {
     constructor() {
         super(...arguments);
         this.opened = false;
@@ -494,7 +494,7 @@ class MuSelectItems extends MUElement {
     }
 }
 MuSelectItems.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     #container {
       --select-items-background-color: var(--mu-select-items-background-color, var(--mu-color-800));

package/components/mu-select-label-content.d.ts

@@ -1,9 +1,9 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuSelectLabelContentComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         type: MuSelectLabelContent['type'];
         active: MuSelectLabelContent['active'];
     };
@@ -18,7 +18,7 @@ declare const types: readonly ["label", "value", "autocomplete", "template"];
  *
  * You also need to set the `type` attribute to either `"label"` or `"value"` so the parent label knows which element to update.
  */
-declare class MuSelectLabelContent extends MUElement {
+declare class MuSelectLabelContent extends MuElement {
     static styles: CSSResultGroup;
     /**
      * Generate template markup for the template type.

package/components/mu-select-label-content.js

@@ -1,4 +1,4 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -14,7 +14,7 @@ const contentSelector = '[data-is="content"]';
  *
  * You also need to set the `type` attribute to either `"label"` or `"value"` so the parent label knows which element to update.
  */
-class MuSelectLabelContent extends MUElement {
+class MuSelectLabelContent extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -84,7 +84,7 @@ class MuSelectLabelContent extends MUElement {
     }
 }
 MuSelectLabelContent.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host {
       overflow: hidden;

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

@@ -1,5 +1,5 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import './mu-trigger.js';
 import { MuSelectLabelContent } from './mu-select-label-content.js';
 import './mu-icon.js';
@@ -7,14 +7,14 @@ import '@mustib/utils/browser';
 import './mu-transparent.js';
 
 type MuSelectLabelComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         opened: MuSelectLabel['opened'];
         label: MuSelectLabel['label'];
         legend: MuSelectLabel['legend'];
         type: MuSelectLabel['type'];
     };
 };
-declare class MuSelectLabel extends MUElement {
+declare class MuSelectLabel extends MuElement {
     static styles: CSSResultGroup;
     opened: boolean;
     label: string;
@@ -27,7 +27,7 @@ declare class MuSelectLabel extends MUElement {
     protected _valueType: 'value' | 'template' | 'autocomplete-label';
     protected labelElement?: MuSelectLabelContent;
     protected valueElement?: MuSelectLabelContent;
-    protected _isReadyPromise: ReturnType<MUElement['generateIsReadyPromise']>;
+    protected _isReadyPromise: ReturnType<MuElement['generateIsReadyPromise']>;
     eventActionData: undefined;
     get hasAutocomplete(): boolean;
     get hasAutocompleteBoth(): boolean;

package/components/mu-select-label.js

@@ -1,4 +1,4 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html, nothing } from 'lit';
 import './mu-trigger.js';
 import { property, state } from 'lit/decorators.js';
@@ -7,7 +7,7 @@ import { MuSelectLabelContent } from './mu-select-label-content.js';
 import './mu-icon.js';
 import 'lit/directives/repeat.js';
 
-class MuSelectLabel extends MUElement {
+class MuSelectLabel extends MuElement {
     constructor() {
         super(...arguments);
         this.opened = false;
@@ -263,7 +263,7 @@ class MuSelectLabel extends MUElement {
     }
 }
 MuSelectLabel.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host(:focus-within) #container,
     :host([opened]) #container {

package/components/mu-select.d.ts

@@ -1,6 +1,6 @@
 import { EventAction, GenerateData } from '@mustib/utils/browser';
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuSelectItems, MuSelectItemsComponent } from './mu-select-items.js';
 import { MuSelectLabel } from './mu-select-label.js';
 import './mu-select-item.js';
@@ -10,7 +10,7 @@ import './mu-select-label-content.js';
 import './mu-icon.js';
 
 type MuSelectComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         opened: MuSelect['opened'];
         'no-close-after-select': MuSelect['noCloseAfterSelect'];
         'no-close-after-blur': MuSelect['noCloseAfterBlur'];
@@ -21,7 +21,7 @@ type Events = {
     'mu-select-opened': CustomEvent;
     'mu-select-closed': CustomEvent;
 };
-declare class MuSelect extends MUElement {
+declare class MuSelect extends MuElement {
     static styles: CSSResultGroup;
     static eventAction: EventAction<GenerateData<MuSelect>>;
     opened: boolean;

package/components/mu-select.js

@@ -1,4 +1,4 @@
-import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-BTuCCJpo.js';
+import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
@@ -10,7 +10,7 @@ import './mu-select-label-content.js';
 import 'lit/directives/repeat.js';
 import './mu-icon.js';
 
-class MuSelect extends MUElement {
+class MuSelect extends MuElement {
     constructor() {
         super(...arguments);
         this.opened = false;
@@ -188,7 +188,7 @@ class MuSelect extends MUElement {
     }
 }
 MuSelect.styles = [
-    MUElement.cssBase,
+    MuElement.cssBase,
     css `
     :host([opened]) #container {
       z-index: 100;

package/components/mu-transparent.d.ts

@@ -1,9 +1,9 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuTransparentComponent = {
-    attributes: {
+    attributes: MuElementComponent['attributes'] & {
         'content-selector': MuTransparent['contentSelector'];
     };
     events: Events;
@@ -27,7 +27,7 @@ type Events = {
  * Use the `content` property to access the underlying
  * meaningful child element, regardless of the wrapping.
  */
-declare class MuTransparent extends MUElement {
+declare class MuTransparent extends MuElement {
     static styles?: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;

package/components/mu-transparent.js

@@ -1,4 +1,4 @@
-import { _ as __decorate, M as MUElement } from '../mu-element-BTuCCJpo.js';
+import { _ as __decorate, M as MuElement } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -16,7 +16,7 @@ import { property } from 'lit/decorators.js';
  * Use the `content` property to access the underlying
  * meaningful child element, regardless of the wrapping.
  */
-class MuTransparent extends MUElement {
+class MuTransparent extends MuElement {
     /**
      * Returns the meaningful child elements of the transparent component.
      *

package/components/mu-trigger.d.ts

@@ -1,10 +1,10 @@
-import { MuTransparent } from './mu-transparent.js';
+import { MuTransparent, MuTransparentComponent } from './mu-transparent.js';
 import 'lit';
 import './mu-element.js';
 import '@mustib/utils/browser';
 
 type MuTriggerComponent = {
-    attributes: {
+    attributes: MuTransparentComponent['attributes'] & {
         'listen-to': MuTrigger['listenTo'];
         detail: MuTrigger['detail'];
         'stop-propagation': MuTrigger['stopPropagation'];

package/components/mu-trigger.js

@@ -1,4 +1,4 @@
-import { _ as __decorate, p as parseJson } from '../mu-element-BTuCCJpo.js';
+import { _ as __decorate, p as parseJson } from '../mu-element-C36Rgp-m.js';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import 'lit';

package/index.d.ts

@@ -1,15 +1,48 @@
-import './components/mu-transparent.js';
-import './components/mu-trigger.js';
-import './components/mu-select.js';
-import './components/mu-select-item.js';
-import './components/mu-select-items.js';
-import './components/mu-select-label.js';
-import './components/mu-select-label-content.js';
-import './components/mu-range.js';
-import './components/mu-range-thumb.js';
-import './components/mu-icon.js';
+import { MuIconComponent } from './components/mu-icon.js';
+export { MuIcon } from './components/mu-icon.js';
+import { MuRangeComponent } from './components/mu-range.js';
+export { MuRange } from './components/mu-range.js';
+import { MuRangeFillComponent } from './components/mu-range-fill.js';
+export { MuRangeFill } from './components/mu-range-fill.js';
+import { MuRangeThumbComponent } from './components/mu-range-thumb.js';
+export { MuRangeThumb } from './components/mu-range-thumb.js';
+import { MuRangeThumbValueComponent } from './components/mu-range-thumb-value.js';
+export { MuRangeThumbValue } from './components/mu-range-thumb-value.js';
+import { MuSelectComponent } from './components/mu-select.js';
+export { MuSelect } from './components/mu-select.js';
+import { MuSelectItemComponent } from './components/mu-select-item.js';
+export { MuSelectItem } from './components/mu-select-item.js';
+import { MuSelectItemsComponent } from './components/mu-select-items.js';
+export { Events, MuSelectItems } from './components/mu-select-items.js';
+import { MuSelectLabelComponent } from './components/mu-select-label.js';
+export { MuSelectLabel } from './components/mu-select-label.js';
+import { MuSelectLabelContentComponent } from './components/mu-select-label-content.js';
+export { MuSelectLabelContent } from './components/mu-select-label-content.js';
+import { MuTransparentComponent } from './components/mu-transparent.js';
+export { MuTransparent } from './components/mu-transparent.js';
+import { MuTriggerComponent } from './components/mu-trigger.js';
+export { MuTrigger } from './components/mu-trigger.js';
+export { MuElement, MuElementComponent } from './components/mu-element.js';
 import 'lit';
-import './components/mu-element.js';
 import '@mustib/utils/browser';
-import './components/mu-range-fill.js';
-import './components/mu-range-thumb-value.js';
+
+type ComponentsAttributes = {
+    'mu-select': MuSelectComponent['attributes'];
+    'mu-select-items': MuSelectItemsComponent['attributes'];
+    'mu-select-item': MuSelectItemComponent['attributes'];
+    'mu-select-label': MuSelectLabelComponent['attributes'];
+    'mu-select-label-content': MuSelectLabelContentComponent['attributes'];
+    'mu-range': MuRangeComponent['attributes'];
+    'mu-range-fill': MuRangeFillComponent['attributes'];
+    'mu-range-thumb': MuRangeThumbComponent['attributes'];
+    'mu-range-thumb-value': MuRangeThumbValueComponent['attributes'];
+    'mu-icon': MuIconComponent['attributes'];
+    'mu-transparent': MuTransparentComponent['attributes'];
+    'mu-trigger': MuTriggerComponent['attributes'];
+};
+type MuComponentsAttributes<GlobalAttributes = Record<string, any>> = {
+    [key in keyof ComponentsAttributes]: Partial<ComponentsAttributes[key]> & GlobalAttributes;
+};
+
+export { MuIconComponent, MuRangeComponent, MuRangeFillComponent, MuRangeThumbComponent, MuRangeThumbValueComponent, MuSelectComponent, MuSelectItemComponent, MuSelectItemsComponent, MuSelectLabelComponent, MuSelectLabelContentComponent, MuTransparentComponent, MuTriggerComponent };
+export type { MuComponentsAttributes };

package/index.js

@@ -1,16 +1,16 @@
-import './mu-element-BTuCCJpo.js';
-import './components/mu-transparent.js';
-import './components/mu-trigger.js';
-import './components/mu-select.js';
-import './components/mu-select-item.js';
-import './components/mu-select-items.js';
-import './components/mu-select-label.js';
-import './components/mu-select-label-content.js';
-import './components/mu-range.js';
-import './components/mu-range-fill.js';
-import './components/mu-range-thumb.js';
-import './components/mu-range-thumb-value.js';
-import './components/mu-icon.js';
+export { M as MuElement } from './mu-element-C36Rgp-m.js';
+export { MuIcon } from './components/mu-icon.js';
+export { MuRange } from './components/mu-range.js';
+export { MuRangeFill } from './components/mu-range-fill.js';
+export { MuRangeThumb } from './components/mu-range-thumb.js';
+export { MuRangeThumbValue } from './components/mu-range-thumb-value.js';
+export { MuSelect } from './components/mu-select.js';
+export { MuSelectItem } from './components/mu-select-item.js';
+export { MuSelectItems } from './components/mu-select-items.js';
+export { MuSelectLabel } from './components/mu-select-label.js';
+export { MuSelectLabelContent } from './components/mu-select-label-content.js';
+export { MuTransparent } from './components/mu-transparent.js';
+export { MuTrigger } from './components/mu-trigger.js';
 import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/repeat.js';

package/{mu-element-BTuCCJpo.js → mu-element-C36Rgp-m.js}

@@ -893,9 +893,9 @@ class EventAction {
     };
 }
 
-var _a, _MUElement_muElements;
+var _a, _MuElement_muElements;
 let count = 0;
-class MUElement extends LitElement {
+class MuElement extends LitElement {
     static register(tagName) {
         if (customElements.get(tagName))
             return;
@@ -950,7 +950,7 @@ class MUElement extends LitElement {
         return obj;
     }
     getMuElementById(id) {
-        return __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).get(id);
+        return __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).get(id);
     }
     closestPierce(selector) {
         return _a.closestPierce(selector, this);
@@ -1023,7 +1023,7 @@ class MUElement extends LitElement {
         this.dataset.muId = this.muId;
         if (!this.id)
             this.id = this.muId;
-        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).set(this.muId, { element: this });
+        __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).set(this.muId, { element: this });
         this.updateComplete.then(() => {
             this.eventActionData?.eventAction.addListeners(this, this.eventActionEvents || this.eventActionData.events);
             if (!this.noEventActionAttributes)
@@ -1032,20 +1032,20 @@ class MUElement extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).delete(this.muId);
+        __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).delete(this.muId);
         this.eventActionData?.eventAction.removeListeners(this, this.eventActionEvents || this.eventActionData.events);
     }
 }
-_a = MUElement;
-_MUElement_muElements = { value: new Map() };
-MUElement.closestPierce = closestPierce;
-MUElement.css = {
+_a = MuElement;
+_MuElement_muElements = { value: new Map() };
+MuElement.closestPierce = closestPierce;
+MuElement.css = {
     focus: css `
     --focus-color: oklch(from currentColor l c h / 0.5);
     box-shadow: 0 0 0 var(--focus-width, 2px) var(--mu-focus-color, var(--focus-color)) inset;
   `,
 };
-MUElement.cssColors = css `
+MuElement.cssColors = css `
   --mu-color-100: hsl(var(--mu-hue), 20%, 95%);
   --mu-color-200: hsl(var(--mu-hue), 30%, 85%);
   --mu-color-300: hsl(var(--mu-hue), 40%, 75%);
@@ -1056,7 +1056,7 @@ MUElement.cssColors = css `
   --mu-color-800: hsl(var(--mu-hue), 90%, 25%);
   --mu-color-900: hsl(var(--mu-hue), 100%, 15%);
 `;
-MUElement.cssBase = css `
+MuElement.cssBase = css `
     *, *::before, *::after, :where(:host) {
       margin: 0;
       padding: 0;
@@ -1099,16 +1099,16 @@ MUElement.cssBase = css `
   `;
 __decorate([
     property({ type: Boolean, reflect: true })
-], MUElement.prototype, "disabled", void 0);
+], MuElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], MUElement.prototype, "readonly", void 0);
+], MuElement.prototype, "readonly", void 0);
 __decorate([
     property({
         type: Boolean,
         attribute: 'no-event-action-attributes',
     })
-], MUElement.prototype, "noEventActionAttributes", void 0);
+], MuElement.prototype, "noEventActionAttributes", void 0);
 __decorate([
     property({
         converter: {
@@ -1119,7 +1119,8 @@ __decorate([
                 return value === null ? [] : parseJson(value);
             },
         },
+        attribute: 'event-action-events',
     })
-], MUElement.prototype, "eventActionEvents", void 0);
+], MuElement.prototype, "eventActionEvents", void 0);
 
-export { EventAction as E, MUElement as M, __decorate as _, disableElementScroll as a, debounce as d, enableElementScroll as e, getElementBoundaries as g, parseJson as p, throttle as t, wait as w };
+export { EventAction as E, MuElement as M, __decorate as _, disableElementScroll as a, debounce as d, enableElementScroll as e, getElementBoundaries as g, parseJson as p, throttle as t, wait as w };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.2",
+  "version": "0.0.0-alpha.4",
   "dependencies": {
     "@mustib/utils": "2.7.0"
   },
@@ -30,12 +30,6 @@
         "default": "./index.js"
       }
     },
-    "./decorators": {
-      "import": {
-        "types": "./decorators.d.ts",
-        "default": "./decorators.js"
-      }
-    },
     "./*": {
       "import": {
         "types": "./*.d.ts",