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

package/components/mu-element.d.ts

@@ -23,7 +23,10 @@ type Elements = [
     'mu-range-fill',
     'mu-range-thumb',
     'mu-range-thumb-value',
-    'mu-icon'
+    'mu-icon',
+    'mu-sortable',
+    'mu-sortable-item',
+    'mu-sortable-trigger'
 ];
 declare abstract class MuElement extends LitElement {
     #private;

package/components/mu-element.js

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

package/components/mu-icon.d.ts

@@ -16,6 +16,7 @@ declare class MuIcon extends MuElement {
         close: any;
         closeLine: any;
         noImage: any;
+        dragVertical: any;
     };
     name?: keyof typeof MuIcon.icons;
     protected firstUpdated(_changedProperties: PropertyValues): void;

package/components/mu-icon.js

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -61,6 +61,9 @@ MuIcon.icons = {
     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>
     `,
+    dragVertical: html `
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="var(--icon-fill)" stroke-width="3"><circle cx="8" cy="4" r="1"/><circle cx="16" cy="4" r="1"/><circle cx="8" cy="12" r="1"/><circle cx="16" cy="12" r="1"/><circle cx="8" cy="20" r="1"/><circle cx="16" cy="20" r="1"/></svg>
+    `,
 };
 __decorate([
     property()

package/components/mu-range-fill.js

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 

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

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 

package/components/mu-range-thumb.js

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';

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

@@ -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-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.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-item.js

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 

package/components/mu-select-items.js

@@ -1,4 +1,4 @@
-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 { M as MuElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';

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

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

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/components/mu-select-label.js

@@ -1,4 +1,4 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html, nothing } from 'lit';
 import './mu-trigger.js';
 import { property, state } from 'lit/decorators.js';

package/components/mu-select.js

@@ -1,4 +1,4 @@
-import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-C36Rgp-m.js';
+import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';

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

@@ -0,0 +1,34 @@
+import { CSSResultGroup } from 'lit';
+import { MuElement, MuElementComponent } from './mu-element.js';
+import '@mustib/utils/browser';
+
+type MuSortableItemComponent = MuElementComponent['attributes'] & {
+    attributes: {
+        name: string;
+    };
+};
+declare class MuSortableItem extends MuElement {
+    static styles?: CSSResultGroup | undefined;
+    _addEventActionAttributes: undefined;
+    eventActionData: undefined;
+    name: string;
+    connectedCallback(): void;
+    /**
+     * Used to notify the item whether or not it is being sorted and is moving
+     */
+    setIsMoving(value: boolean): void;
+    /**
+     * Used to notify the item whether or not it is added to be sorted
+     */
+    setAdded(value: boolean): void;
+    protected _slotChangeHandler: () => void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-sortable-item': MuSortableItem;
+    }
+}
+
+export { MuSortableItem };
+export type { MuSortableItemComponent };

package/components/mu-sortable-item.js

@@ -0,0 +1,95 @@
+import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { MuTransparent } from './mu-transparent.js';
+import { MuSortableTrigger } from './mu-sortable-trigger.js';
+import './mu-icon.js';
+
+class MuSortableItem extends MuElement {
+    constructor() {
+        super(...arguments);
+        this._slotChangeHandler = () => {
+            const triggers = [];
+            const addElement = (element) => {
+                if (element instanceof MuSortableTrigger) {
+                    triggers.push(element);
+                }
+            };
+            this.renderRoot
+                .querySelector('slot')
+                ?.assignedElements({ flatten: true })
+                .forEach((el) => {
+                if (el instanceof MuTransparent)
+                    el.contents.forEach(addElement);
+                else
+                    addElement(el);
+            });
+            if (!triggers.length) {
+                console.warn(`mu-sortable-item does not have any triggers`, this);
+            }
+            triggers.forEach((trigger) => {
+                trigger.for = this.name;
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        this.renderRoot.addEventListener('slotchange', this._slotChangeHandler);
+        if (!this.name) {
+            this.updateComplete.then(() => {
+                console.warn(`mu-sortable-item does not has a name, it will be assigned this default one (${this.muId})`, this);
+            });
+            this.name = this.muId;
+        }
+    }
+    /**
+     * Used to notify the item whether or not it is being sorted and is moving
+     */
+    setIsMoving(value) {
+        value ? this.setAttribute('moving', '') : this.removeAttribute('moving');
+    }
+    /**
+     * Used to notify the item whether or not it is added to be sorted
+     */
+    setAdded(value) {
+        value ? this.setAttribute('added', '') : this.removeAttribute('added');
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}
+MuSortableItem.styles = [
+    MuElement.cssBase,
+    css `
+    :host([added]) {
+      outline: 1px dashed;
+    }
+
+    :host([moving]) {
+      user-select: none;
+      cursor: grabbing;
+      opacity: 0.5;
+    }
+    
+    :host {
+      animation: flip 150ms 100ms ease-out forwards;
+      transform: scaleY(-0.75);
+      transition: opacity 150ms;
+    }
+
+    @keyframes flip {
+      100% {
+        transform: none;
+      }
+    }
+  `,
+];
+__decorate([
+    property()
+], MuSortableItem.prototype, "name", void 0);
+MuSortableItem.register('mu-sortable-item');
+
+export { MuSortableItem };

package/components/mu-sortable-trigger.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup } from 'lit';
+import { MuElement } from './mu-element.js';
+import './mu-icon.js';
+import '@mustib/utils/browser';
+
+declare class MuSortableTrigger extends MuElement {
+    static styles?: CSSResultGroup | undefined;
+    eventActionData: undefined;
+    /**
+     * The associated item name
+     */
+    for: string;
+    protected _addEventActionAttributes(): Promise<void>;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-sortable-trigger': MuSortableTrigger;
+    }
+}
+
+export { MuSortableTrigger };

package/components/mu-sortable-trigger.js

@@ -0,0 +1,61 @@
+import { css, html } from 'lit';
+import { M as MuElement } from '../mu-element-CEvBHYiI.js';
+import './mu-icon.js';
+import 'lit/decorators.js';
+
+class MuSortableTrigger extends MuElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The associated item name
+         */
+        this.for = '';
+    }
+    async _addEventActionAttributes() {
+        await this.updateComplete;
+        /**
+         * mouse events
+         */
+        this.setAttribute('mu-sortable-pointerdown', JSON.stringify([
+            'prepared? ||#prevent',
+            '#modifier:Control? ||toggle',
+            ['add', this.for],
+            '||prepare',
+        ]));
+        /**
+         * keyboard events
+         */
+        this.setAttribute('mu-sortable-keydown', JSON.stringify([
+            'prepared? ||#prevent',
+            '#key:Enter,Space?#modifier:Control? ||toggle',
+            ['add', this.for, '#key:Enter,Space'],
+            '#key:Enter,Space? ||prepare',
+        ]));
+    }
+    render() {
+        return html `
+      <div id='container' tabindex='0' part='container'>
+        <slot>
+          <mu-icon name='dragVertical'></mu-icon>
+        </slot>
+      </div>
+    `;
+    }
+}
+MuSortableTrigger.styles = [
+    MuElement.cssBase,
+    css `
+      #container {
+        display: grid;
+        cursor: grab;
+        user-select: none;
+      }
+      
+      #container:focus-visible {
+        outline: 1px solid;
+      }
+    `,
+];
+MuSortableTrigger.register('mu-sortable-trigger');
+
+export { MuSortableTrigger };

package/components/mu-sortable.d.ts

@@ -0,0 +1,97 @@
+import { EventAction, GenerateData } from '@mustib/utils/browser';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MuElement, MuElementComponent } from './mu-element.js';
+import { MuSortableItem } from './mu-sortable-item.js';
+
+type MuSortableComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        multiple: MuSortable['multiple'];
+        throttle: MuSortable['throttle'];
+    };
+    events: Events;
+};
+type Events = {
+    'mu-sortable-change': CustomEvent<{
+        /**
+         * items names order before sorting
+         */
+        from: string[];
+        /**
+         * items names order after sorting
+         */
+        to: string[];
+        /**
+         * item name that started prepare action
+         */
+        startItem: string;
+        /**
+         * selected items names
+         */
+        selected: string[];
+    }>;
+};
+type SortableItem = {
+    element: MuSortableItem;
+    index: number;
+    name: string;
+};
+declare class MuSortable extends MuElement {
+    static styles?: CSSResultGroup | undefined;
+    static globalEventActionEvents: string[];
+    static eventAction: EventAction<GenerateData<MuSortable>>;
+    _addEventActionAttributes: undefined;
+    eventActionData: {
+        eventAction: EventAction<GenerateData<MuSortable>>;
+        events: string[];
+    };
+    /**
+     * a boolean indicates if multiple items can be sorted at the same time
+     *
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * pointer move throttle in ms
+     *
+     * @default 50
+     */
+    throttle: number;
+    protected _sortableItemsNamesMap: Map<string, SortableItem>;
+    protected _sortableItemsElementsMap: Map<MuSortableItem, SortableItem>;
+    protected _sortableItems: SortableItem[];
+    protected _overSortableItem?: SortableItem;
+    protected _toBeSortedItems: Set<SortableItem>;
+    protected _moveActionAnimationFrameId?: number;
+    protected _hasStartedMovingItems: boolean;
+    protected _prepareData?: {
+        /**
+         * The item that triggered prepare action regardless if there are multiple items to be sorted
+         */
+        movingItem: SortableItem;
+        type: 'keyboard' | 'pointer';
+        /**
+         * Initial items order before any sorting
+         */
+        initialItems: SortableItem[];
+    };
+    protected _changeSortState(data: GenerateData<MuSortable>): void;
+    protected _getItemFromEventAction(data: GenerateData<MuSortable>): SortableItem;
+    protected _endSortingHandler: () => void;
+    protected _throttledGlobalPointerMoveHandler?: typeof this._globalPointerMoveHandler;
+    protected _moveItems(overItem: SortableItem | undefined): void;
+    protected _globalKeydownHandler: (event: KeyboardEvent) => void;
+    protected _globalPointerMoveHandler(event: PointerEvent): void;
+    protected _slotChangeHandler: () => Promise<void>;
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-sortable': MuSortable;
+    }
+    interface GlobalEventHandlersEventMap extends Events {
+    }
+}
+
+export { MuSortable };
+export type { MuSortableComponent };

package/components/mu-sortable.js

@@ -0,0 +1,308 @@
+import { M as MuElement, E as EventAction, t as throttle, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { MuTransparent } from './mu-transparent.js';
+import { MuSortableItem } from './mu-sortable-item.js';
+import { MuSortableTrigger } from './mu-sortable-trigger.js';
+import './mu-icon.js';
+
+class MuSortable extends MuElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = {
+            eventAction: MuSortable.eventAction,
+            events: ['pointerdown', 'click', 'keydown'],
+        };
+        /**
+         * a boolean indicates if multiple items can be sorted at the same time
+         *
+         * @default false
+         */
+        this.multiple = false;
+        /**
+         * pointer move throttle in ms
+         *
+         * @default 50
+         */
+        this.throttle = 50;
+        this._sortableItemsNamesMap = new Map();
+        this._sortableItemsElementsMap = new Map();
+        this._sortableItems = [];
+        this._toBeSortedItems = new Set();
+        this._hasStartedMovingItems = false;
+        this._endSortingHandler = () => {
+            if (this._moveActionAnimationFrameId) {
+                cancelAnimationFrame(this._moveActionAnimationFrameId);
+                this._moveActionAnimationFrameId = undefined;
+            }
+            const prepareData = this._prepareData;
+            if (!prepareData) {
+                throw new Error('internal mu-sortable error (_prepareData) is undefined in end handler');
+            }
+            const selected = [];
+            const startItem = prepareData.movingItem.name;
+            const from = prepareData.initialItems.map((item) => item.name);
+            const to = this._sortableItems.map((item) => item.name);
+            if (this._throttledGlobalPointerMoveHandler)
+                document.removeEventListener('pointermove', this._throttledGlobalPointerMoveHandler);
+            document.removeEventListener('keydown', this._globalKeydownHandler);
+            document.removeEventListener('pointerup', this._endSortingHandler);
+            const eventName = 'mu-sortable-change';
+            const event = new CustomEvent(eventName, {
+                bubbles: true,
+                composed: true,
+                detail: { from, to, selected, startItem },
+            });
+            this._toBeSortedItems.forEach((item) => {
+                selected.push(item.name);
+                item.element.setAdded(false);
+                item.element.setIsMoving(false);
+            });
+            this._toBeSortedItems.clear();
+            this._hasStartedMovingItems = false;
+            this._prepareData = undefined;
+            this.dispatchEvent(event);
+        };
+        this._globalKeydownHandler = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                this._endSortingHandler();
+                return;
+            }
+            let direction;
+            if (event.key === 'ArrowUp') {
+                direction = 'prev';
+            }
+            else if (event.key === 'ArrowDown')
+                direction = 'next';
+            if (!direction)
+                return;
+            const overItem = this.getNavigationItem({
+                direction,
+                items: this._sortableItems,
+                fromIndex: this._prepareData?.movingItem.index,
+                isNavigable: (item) => {
+                    return !this._toBeSortedItems.has(item);
+                },
+            });
+            this._moveItems(overItem);
+        };
+        this._slotChangeHandler = async () => {
+            const toBeSortedNames = new Set([...this._toBeSortedItems].map((item) => item.name));
+            this._toBeSortedItems.clear();
+            this._sortableItems = [];
+            this._sortableItemsNamesMap.clear();
+            this._sortableItemsElementsMap.clear();
+            const addElement = (element) => {
+                if (element instanceof MuSortableItem) {
+                    const name = element.name;
+                    if (this._sortableItemsNamesMap.has(name)) {
+                        console.warn('duplicated mu-sortable-item name', element);
+                        return;
+                    }
+                    const item = {
+                        element,
+                        index: this._sortableItems.length,
+                        name,
+                    };
+                    this._sortableItems.push(item);
+                    this._sortableItemsElementsMap.set(element, item);
+                    this._sortableItemsNamesMap.set(name, item);
+                    if (this._prepareData?.movingItem.name === name) {
+                        this._prepareData.movingItem = item;
+                    }
+                    if (toBeSortedNames.has(name)) {
+                        this._toBeSortedItems.add(item);
+                    }
+                }
+            };
+            this.renderRoot.querySelectorAll('slot').forEach((slot) => {
+                slot.assignedElements({ flatten: true }).forEach((el) => {
+                    if (el instanceof MuTransparent)
+                        el.contents.forEach(addElement);
+                    else
+                        addElement(el);
+                });
+            });
+        };
+    }
+    _changeSortState(data) {
+        const actionName = data._parsedAction.name;
+        if (this._hasStartedMovingItems) {
+            console.warn(`cannot use (${actionName}) action in mu-sortable when there is active sorting`, data);
+            return;
+        }
+        const item = this._getItemFromEventAction(data);
+        let operation;
+        if (actionName === 'toggle') {
+            operation = this._toBeSortedItems.has(item) ? 'delete' : 'add';
+        }
+        else
+            operation = actionName;
+        switch (operation) {
+            case 'add':
+                if (!this.multiple) {
+                    this._toBeSortedItems.forEach((item) => {
+                        item.element.setAdded(false);
+                    });
+                    this._toBeSortedItems.clear();
+                }
+                item.element.setAdded(true);
+                this._toBeSortedItems.add(item);
+                break;
+            case 'delete':
+                item.element.setAdded(false);
+                this._toBeSortedItems.delete(item);
+                break;
+            default:
+                console.warn(`unsupported action name (${actionName}) cannot change select state for mu-sortable`, data);
+                break;
+        }
+    }
+    _getItemFromEventAction(data) {
+        const actionName = data._parsedAction.name;
+        let itemName;
+        if (typeof data.actionParam === 'string' && data.actionParam !== '')
+            itemName = data.actionParam;
+        else if (data.matchedTarget instanceof MuSortableItem)
+            itemName = data.matchedTarget.name;
+        else if (data.matchedTarget instanceof MuSortableTrigger)
+            itemName = data.matchedTarget.for;
+        else {
+            throw new Error(`cannot get mu-sortable-item name for (${actionName}) action because it is not passed as action param or the element which dispatched the action is not the item itself or it's trigger`);
+        }
+        const item = this._sortableItemsNamesMap.get(itemName);
+        if (!item) {
+            throw new Error(`(${itemName}) is not recognized mu-sortable-item name`);
+        }
+        return item;
+    }
+    _moveItems(overItem) {
+        if (!this._toBeSortedItems.size)
+            return;
+        const lastAnimationFrameId = this._moveActionAnimationFrameId;
+        if (lastAnimationFrameId !== undefined)
+            cancelAnimationFrame(lastAnimationFrameId);
+        this._moveActionAnimationFrameId = requestAnimationFrame(() => {
+            const prepareData = this._prepareData;
+            if (!prepareData) {
+                throw new Error('internal mu-sortable error, (_prepareData) is undefined');
+            }
+            /**
+             * Notify sortable item of being moved
+             */
+            if (!this._hasStartedMovingItems) {
+                this._toBeSortedItems.forEach((item) => {
+                    item.element.setIsMoving(true);
+                });
+                this._hasStartedMovingItems = true;
+            }
+            this._overSortableItem = overItem;
+            if (overItem) {
+                const preparedItem = prepareData.movingItem;
+                const isMovingBackward = preparedItem.index > overItem.index;
+                [...this._toBeSortedItems]
+                    .sort((a, b) => isMovingBackward ? a.index - b.index : b.index - a.index)
+                    .forEach((toBeSortedItem) => {
+                    overItem.element.parentElement?.insertBefore(toBeSortedItem.element, isMovingBackward
+                        ? overItem.element
+                        : overItem.element.nextElementSibling);
+                });
+            }
+        });
+    }
+    _globalPointerMoveHandler(event) {
+        const overItemElement = document
+            .elementsFromPoint(event.clientX, event.clientY)
+            .find((el) => {
+            if (!(el instanceof MuSortableItem))
+                return false;
+            const sortableItem = this._sortableItemsElementsMap.get(el);
+            return sortableItem && !this._toBeSortedItems.has(sortableItem);
+        });
+        const overItem = overItemElement
+            ? this._sortableItemsElementsMap.get(overItemElement)
+            : undefined;
+        this._moveItems(overItem);
+    }
+    async firstUpdated(_changedProperties) {
+        this._slotChangeHandler();
+        await this.updateComplete;
+        this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        this.renderRoot.addEventListener('slotchange', this._slotChangeHandler);
+    }
+    render() {
+        return html `
+      <slot></slot>
+      `;
+    }
+}
+MuSortable.styles = [MuElement.cssBase];
+MuSortable.globalEventActionEvents = ['pointermove', 'pointerup'];
+MuSortable.eventAction = new EventAction({
+    currTargetSelector: 'mu-sortable',
+    getEventAttributeName(eventName) {
+        return `mu-sortable-${eventName}`;
+    },
+    actions: {
+        toggle(data) {
+            data.event.currentTarget._changeSortState(data);
+        },
+        delete(data) {
+            data.event.currentTarget._changeSortState(data);
+        },
+        add(data) {
+            data.event.currentTarget._changeSortState(data);
+        },
+        prepare(data) {
+            const sortable = data.event.currentTarget;
+            if (sortable._prepareData) {
+                console.warn('cannot use prepare action for mu-sortable before current prepare ends', data);
+                return;
+            }
+            const movingItem = sortable._getItemFromEventAction(data);
+            let type;
+            if (data.actionParam === 'pointer' || data.actionParam === 'keyboard')
+                type = data.actionParam;
+            else if (data.event instanceof PointerEvent)
+                type = 'pointer';
+            else if (data.event instanceof KeyboardEvent)
+                type = 'keyboard';
+            else {
+                console.warn('cannot get prepare action type for mu-sortable', data);
+                return;
+            }
+            sortable._prepareData = {
+                movingItem,
+                initialItems: sortable._sortableItems,
+                type,
+            };
+            // need to defer so events not fire immediately
+            setTimeout(() => {
+                if (type === 'pointer') {
+                    const handler = throttle(sortable._globalPointerMoveHandler.bind(sortable), sortable.throttle);
+                    sortable._throttledGlobalPointerMoveHandler = handler;
+                    document.addEventListener('pointermove', handler);
+                    document.addEventListener('pointerup', sortable._endSortingHandler, { once: true });
+                }
+                else {
+                    document.addEventListener('keydown', sortable._globalKeydownHandler);
+                }
+            }, 0);
+        },
+    },
+    switches: {
+        prepared(data) {
+            const sortable = data.event.currentTarget;
+            return sortable._prepareData !== undefined;
+        },
+    },
+});
+__decorate([
+    property({ type: Boolean })
+], MuSortable.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number })
+], MuSortable.prototype, "throttle", void 0);
+MuSortable.register('mu-sortable');
+
+export { MuSortable };

package/components/mu-transparent.js

@@ -1,4 +1,4 @@
-import { _ as __decorate, M as MuElement } from '../mu-element-C36Rgp-m.js';
+import { _ as __decorate, M as MuElement } from '../mu-element-CEvBHYiI.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 

package/components/mu-trigger.js

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

package/index.d.ts

@@ -18,6 +18,9 @@ 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 { MuSortableComponent } from './components/mu-sortable.js';
+import { MuSortableItemComponent } from './components/mu-sortable-item.js';
+import './components/mu-sortable-trigger.js';
 import { MuTransparentComponent } from './components/mu-transparent.js';
 export { MuTransparent } from './components/mu-transparent.js';
 import { MuTriggerComponent } from './components/mu-trigger.js';
@@ -39,6 +42,8 @@ type ComponentsAttributes = {
     'mu-icon': MuIconComponent['attributes'];
     'mu-transparent': MuTransparentComponent['attributes'];
     'mu-trigger': MuTriggerComponent['attributes'];
+    'mu-sortable': MuSortableComponent['attributes'];
+    'mu-sortable-item': MuSortableItemComponent['attributes'];
 };
 type MuComponentsAttributes<GlobalAttributes = Record<string, any>> = {
     [key in keyof ComponentsAttributes]: Partial<ComponentsAttributes[key]> & GlobalAttributes;

package/index.js

@@ -1,4 +1,4 @@
-export { M as MuElement } from './mu-element-C36Rgp-m.js';
+export { M as MuElement } from './mu-element-CEvBHYiI.js';
 export { MuIcon } from './components/mu-icon.js';
 export { MuRange } from './components/mu-range.js';
 export { MuRangeFill } from './components/mu-range-fill.js';

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

@@ -458,6 +458,22 @@ class EventAction {
             },
             overridable: false,
             dynamic: false
+        },
+        '#modifier': {
+            handler(data) {
+                let modifiers;
+                const { event, switchParam } = data;
+                if (typeof switchParam === 'string')
+                    modifiers = switchParam.split(',');
+                else if (Array.isArray(switchParam))
+                    modifiers = switchParam;
+                if (!modifiers || modifiers.length === 0 || !(event instanceof PointerEvent || event instanceof KeyboardEvent)) {
+                    return false;
+                }
+                return modifiers.some(modifier => event.getModifierState(modifier));
+            },
+            overridable: true,
+            dynamic: true
         }
     };
     /**
@@ -518,7 +534,7 @@ class EventAction {
     /**
      * Parse an action name and returns an object with the following properties:
      * - name: The name of the action.
-     * - hasOr: A boolean indicating whether the action name starts with "||".
+     * - hasOr: A boolean indicating whether the action name starts with `||`.
      *
      * @param name - The name of the action to parse.
      */
@@ -527,6 +543,21 @@ class EventAction {
         const hasOr = trimmedName.startsWith('||');
         return { name: hasOr ? trimmedName.slice(2) : trimmedName, hasOr };
     }
+    /**
+     * Parse a switch name and returns an object with the following properties:
+     * - name: The name of the switch.
+     * - isNegated: A boolean indicating whether the switch name starts with `!`.
+     *
+     * @param name - The name of the switch to parse.
+     */
+    static parseSwitchName(name) {
+        const trimmedName = name.trim();
+        const isNegated = trimmedName.startsWith('!');
+        return {
+            name: isNegated ? trimmedName.slice(1) : trimmedName,
+            isNegated
+        };
+    }
     /**
      * Parse an action string and returns a {@link ParsedAction parsed action}.
      *
@@ -564,7 +595,7 @@ class EventAction {
                 const hasSwitchParam = switchParamIndex !== -1;
                 const switchName = hasSwitchParam ? switchString.slice(0, switchParamIndex) : switchString;
                 const switchParam = hasSwitchParam ? switchString.slice(switchParamIndex + 1) : '';
-                return { name: switchName.trim(), param: switchParam.trim() };
+                return { param: switchParam.trim(), ...this.parseSwitchName(switchName) };
             });
         }
         return { param: param.trim(), switches, ...EventAction.parseActionName(name) };
@@ -658,7 +689,15 @@ class EventAction {
                 console.warn(`Switch named (${name}) is already registered and need (override) option to be true to be overridden`);
                 continue;
             }
-            this.switches[name] = switchData;
+            const parsedSwitchName = EventAction.parseSwitchName(name);
+            if (parsedSwitchName.isNegated) {
+                console.warn(`Switch name must not start with (!) as it is used to negate switches, add your logic once with the name (${parsedSwitchName.name}) and negate the switch name in the attribute instead, Please note that your switch handler will be wrapped in a negated one, and the name will be converted to (${parsedSwitchName.name}) if you omit this warning`);
+                const originalHandler = switchData.handler;
+                switchData.handler = (...args) => {
+                    return !originalHandler(...args);
+                };
+            }
+            this.switches[parsedSwitchName.name] = switchData;
         }
         return this;
     }
@@ -695,7 +734,11 @@ class EventAction {
                 console.warn(`Action named (${name}) is already registered and need (override) option to be true to be overridden`);
                 continue;
             }
-            this.actions[name] = actionData;
+            const parsedActionName = EventAction.parseActionName(name);
+            if (parsedActionName.hasOr) {
+                console.warn(`Action name cannot start with (||), as it is used to detect if the action hasOr, which is used as an indicator to not run other actions if this one gets executed, Please not that the action name will be converted to (${parsedActionName.name}) if you omit this warning`);
+            }
+            this.actions[parsedActionName.name] = actionData;
         }
         return this;
     }
@@ -729,8 +772,8 @@ class EventAction {
                                 switches: actionData.slice(2).map(switchData => {
                                     const [name = '', param = ''] = Array.isArray(switchData) ? switchData : switchData.split(':');
                                     return {
-                                        name,
-                                        param
+                                        param,
+                                        ...EventAction.parseSwitchName(name)
                                     };
                                 }),
                                 ...EventAction.parseActionName(actionData[0])
@@ -746,7 +789,7 @@ class EventAction {
         }
         return attributeString
             .split('&&')
-            .map(EventAction.parseActionString);
+            .map(EventAction.parseActionString.bind(EventAction));
     }
     /**
      * for internal use
@@ -798,7 +841,7 @@ class EventAction {
             const checkSwitches = parsedAction.switches.length === 0 ? true : parsedAction.switches.every(switchData => {
                 const staticValue = staticSwitches[switchData.name]?.get(switchData.param);
                 if (staticValue !== undefined)
-                    return staticValue;
+                    return switchData.isNegated ? !staticValue : staticValue;
                 const switchAction = this.switches[switchData.name];
                 if (!switchAction) {
                     console.warn(`There is no registered switch with the name (${switchData.name}) for the event (${eventName})`, matchedTarget);
@@ -817,7 +860,7 @@ class EventAction {
                     const map = staticSwitches[switchData.name] ||= new Map();
                     map.set(switchData.param, value);
                 }
-                return value;
+                return switchData.isNegated ? !value : value;
             });
             if (!checkSwitches)
                 continue;

package/package.json

@@ -3,9 +3,12 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.4",
+  "version": "0.0.0-alpha.6",
+  "lint-staged": {
+    "*.{js,ts,astro}": "biome check --write"
+  },
   "dependencies": {
-    "@mustib/utils": "2.7.0"
+    "@mustib/utils": "2.8.1"
   },
   "peerDependencies": {
     "lit": "^3.3.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",