@mustib/web-components 0.0.0-alpha.5 → 0.0.0-alpha.6

package/components/mu-range.d.ts

@@ -29,6 +29,24 @@ type RangeFill = {
 };
 type ChangeEventSrc = 'pointerdown' | 'pointerup' | 'pointermove' | 'keydown' | 'insert';
 type Events = {
+    /**
+     * Emitted before change event
+     */
+    'mu-range-start': CustomEvent<{
+        /**
+         * The source of start event
+         */
+        src: 'pointerdown' | 'keydown';
+    }>;
+    /**
+     * Emitted at the end of change event
+     */
+    'mu-range-end': CustomEvent<{
+        /**
+         * The source of end event
+         */
+        src: 'pointerup' | 'keyup';
+    }>;
     /**
      * Emitted when pointerdown on a non-thumb element and empty-area attribute has a value of "dispatch".
      *
@@ -45,6 +63,9 @@ type Events = {
             name: string;
             value: number;
         }[];
+        /**
+         * The source of change event
+         */
         src: ChangeEventSrc;
     }>;
     /**
@@ -132,11 +153,28 @@ declare class MuRange extends MuElement {
     /**
      * 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
      */
-    protected _isPointerDown: boolean;
+    protected get _isPointerDownStart(): boolean;
+    protected get _isKeyDownStart(): boolean;
+    /**
+     * the event that started change event
+     */
+    protected _startEvent?: 'pointerdown' | 'keydown';
+    protected get _hasStarted(): boolean;
     set activeThumb(thumb: RangeThumb | undefined);
     get activeThumb(): RangeThumb | undefined;
     constructor();
     disconnectedCallback(): void;
+    /**
+     * start thumb move
+     */
+    protected _start(data: {
+        activeThumb?: RangeThumb;
+        src: 'pointerdown' | 'keydown';
+    }): void;
+    /**
+     * end thumb move
+     */
+    protected _end(): void;
     /**
      *
      * @returns an array of objects containing the name and value of each thumb
@@ -153,6 +191,12 @@ declare class MuRange extends MuElement {
      * Switches the active thumb for keyboard navigation
      */
     switchNavigationActiveItem(direction: 'next' | 'prev'): boolean;
+    dispatchStartEvent(data: {
+        src: Events['mu-range-start']['detail']['src'];
+    }): void;
+    dispatchEndEvent(data: {
+        src: Events['mu-range-end']['detail']['src'];
+    }): void;
     dispatchChangeEvent(thumbs: {
         name: string;
         value: number;
@@ -202,6 +246,7 @@ declare class MuRange extends MuElement {
      */
     setValueFromString(valueString: string): Promise<void>;
     _keydownHandler: (e: KeyboardEvent) => void;
+    _documentKeyupHandler: () => void;
     _pointerdownHandler: (e: PointerEvent) => void;
     _documentPointerupHandler: (e: PointerEvent) => void;
     _pointermoveHandler: (e: PointerEvent) => void;

package/components/mu-range.js

@@ -10,6 +10,18 @@ class MuRange extends MuElement {
     get isControlled() {
         return this.value !== undefined;
     }
+    /**
+     * 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
+     */
+    get _isPointerDownStart() {
+        return this._startEvent === 'pointerdown';
+    }
+    get _isKeyDownStart() {
+        return this._startEvent === 'keydown';
+    }
+    get _hasStarted() {
+        return this._startEvent !== undefined;
+    }
     set activeThumb(thumb) {
         if (thumb &&
             (thumb.element.transparent ||
@@ -64,10 +76,6 @@ class MuRange extends MuElement {
         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 = [];
@@ -188,6 +196,7 @@ class MuRange extends MuElement {
             const thumb = this.activeThumb;
             if (this.disabled || this.readonly || !thumb || e.defaultPrevented)
                 return;
+            this.dispatchStartEvent({ src: 'keydown' });
             let increaseKey = 'ArrowRight';
             let decreaseKey = 'ArrowLeft';
             switch (this.axis) {
@@ -212,7 +221,15 @@ class MuRange extends MuElement {
                     break;
             }
             const setValue = (value) => {
+                if (this._hasStarted && !this._isKeyDownStart)
+                    return;
                 e.preventDefault();
+                if (!this._isKeyDownStart) {
+                    this._start({
+                        activeThumb: thumb,
+                        src: 'keydown',
+                    });
+                }
                 this.focus();
                 thumb.element.focused = true;
                 this._setThumbValue({ thumb, value, src: 'keydown' });
@@ -246,19 +263,25 @@ class MuRange extends MuElement {
                     break;
             }
         };
+        this._documentKeyupHandler = () => {
+            this._end();
+        };
         this._pointerdownHandler = (e) => {
-            if (this.disabled || this.readonly || e.defaultPrevented)
+            if (this.disabled ||
+                this.readonly ||
+                e.defaultPrevented ||
+                this._hasStarted)
                 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;
+                this._start({
+                    activeThumb,
+                    src: 'pointerdown',
+                });
                 return;
             }
             if (this.emptyArea === 'dispatch') {
@@ -317,18 +340,19 @@ class MuRange extends MuElement {
                         : rightThumb;
             }
             if (candidateThumb) {
+                this._start({
+                    activeThumb: candidateThumb,
+                    src: 'pointerdown',
+                });
                 this._setThumbValue({ thumb: candidateThumb, value, src: 'pointerdown' });
-                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({ thumb: this.activeThumb, value, src: 'pointerup' });
+            if (this.activeThumb) {
+                const { value } = this._getValuesFromEvent(e);
+                this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointerup' });
+            }
+            this._end();
         };
         this._pointermoveHandler = (e) => {
             if (!this.activeThumb)
@@ -349,7 +373,7 @@ class MuRange extends MuElement {
                 }
             });
             this.addEventListener('focus', (e) => {
-                if (this._isPointerDown ||
+                if (this._isPointerDownStart ||
                     this.disabled ||
                     this.readonly ||
                     e.defaultPrevented)
@@ -369,6 +393,41 @@ class MuRange extends MuElement {
     disconnectedCallback() {
         document.removeEventListener('pointermove', this._documentPointermoveHandler);
         document.removeEventListener('pointerup', this._documentPointerupHandler);
+        document.removeEventListener('keyup', this._documentKeyupHandler);
+    }
+    /**
+     * start thumb move
+     */
+    _start(data) {
+        if (this._hasStarted)
+            return;
+        this._activeThumb = data.activeThumb;
+        if (!data.activeThumb)
+            return;
+        this._startEvent = data.src;
+        this.dispatchStartEvent({ src: data.src });
+        if (data.src === 'pointerdown') {
+            document.addEventListener('pointermove', this._documentPointermoveHandler);
+            document.addEventListener('pointerup', this._documentPointerupHandler);
+        }
+        if (data.src === 'keydown') {
+            document.addEventListener('keyup', this._documentKeyupHandler);
+        }
+    }
+    /**
+     * end thumb move
+     */
+    _end() {
+        document.removeEventListener('pointermove', this._documentPointermoveHandler);
+        document.removeEventListener('pointerup', this._documentPointerupHandler);
+        document.removeEventListener('keyup', this._documentKeyupHandler);
+        if (this._startEvent === 'pointerdown') {
+            this.dispatchEndEvent({ src: 'pointerup' });
+        }
+        if (this._startEvent === 'keydown') {
+            this.dispatchEndEvent({ src: 'keyup' });
+        }
+        this._startEvent = undefined;
     }
     /**
      *
@@ -414,6 +473,24 @@ class MuRange extends MuElement {
         navigationThumb.element.focused = true;
         return true;
     }
+    dispatchStartEvent(data) {
+        const eventName = 'mu-range-start';
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: data,
+        }));
+    }
+    dispatchEndEvent(data) {
+        const eventName = 'mu-range-end';
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: data,
+        }));
+    }
     dispatchChangeEvent(thumbs = this._thumbs, src) {
         const eventName = 'mu-range-change';
         const data = thumbs.map((thumb) => ({ name: thumb.name, value: thumb.value }));

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

@@ -36,7 +36,7 @@ declare class MuSelectLabel extends MuElement {
     setActiveDescendantId(id?: string): void;
     connectedCallback(): void;
     protected _assignLabelAndValueTypes(): void;
-    get comboboxElement(): HTMLElement | MuSelectLabelContent | null | undefined;
+    get comboboxElement(): MuSelectLabelContent | HTMLElement | null | undefined;
     focus(options?: FocusOptions): void;
     protected _slotChangeHandler: () => void;
     protected firstUpdated(_changedProperties: PropertyValues): void;

package/package.json

@@ -3,7 +3,10 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.5",
+  "version": "0.0.0-alpha.6",
+  "lint-staged": {
+    "*.{js,ts,astro}": "biome check --write"
+  },
   "dependencies": {
     "@mustib/utils": "2.8.1"
   },
@@ -18,6 +21,8 @@
     "@tailwindcss/vite": "^4.1.12",
     "@types/node": "^24.9.2",
     "astro": "^5.12.8",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "rollup": "^4.52.5",
     "rollup-plugin-dts": "^6.2.3",
     "tailwindcss": "^4.1.12",