atomicuilibrary 0.0.1

package/dist/collection/components/speed-dial/speed-dial.js

@@ -0,0 +1,1183 @@
+import { h, Host } from "@stencil/core";
+export class SpeedDial {
+    el;
+    /**
+     * Position of the speed dial button
+     */
+    position = 'bottom-right';
+    /**
+     * Speed dial actions
+     */
+    actions = [];
+    /**
+     * Positioning strategy: 'fixed' (screen) or 'absolute' (container)
+     */
+    strategy = 'fixed';
+    /**
+     * Icon for the main button
+     */
+    icon = 'plus';
+    /**
+     * Library for the main button icon
+     */
+    iconLibrary = 'se';
+    /**
+     * Icon to show when open (e.g., 'close' or 'x')
+     */
+    toggleIcon;
+    /**
+     * Default library for actions
+     */
+    actionLibrary = 'default';
+    /**
+     * Color scheme
+     */
+    color = 'primary';
+    /**
+     * Size of the button
+     */
+    size = 'md';
+    /**
+     * Button variant
+     */
+    variant = 'solid';
+    /**
+     * Direction of dial opening
+     */
+    direction = 'auto';
+    /**
+     * Button shape
+     */
+    shape = 'rounded';
+    /**
+     * Tooltip position
+     */
+    tooltipPosition = 'auto';
+    /**
+     * Show tooltips/labels
+     */
+    showTooltips = true;
+    /**
+     * Position of the label/tooltip
+     */
+    labelPosition = 'auto';
+    /**
+     * Hide the label text but keep it for screen readers
+     */
+    labelHide = false;
+    /**
+     * Trigger mode: 'click' (default) or 'hover'
+     */
+    trigger = 'click';
+    /**
+     * Opening layout style: 'linear', 'radial', or 'arc'
+     */
+    layout = 'linear';
+    /**
+     * Close dial when window scrolls
+     */
+    closeOnScroll = false;
+    /**
+     * Use glassmorphism effect
+     */
+    glassy = false;
+    /**
+     * Use magnetic pull effect
+     */
+    magnetic = false;
+    /**
+     * Strength of magnetic pull (0 to 1)
+     */
+    magneticStrength = 0.3;
+    /**
+     * Radius of magnetic pull in pixels
+     */
+    magneticRadius = 150;
+    /**
+     * Unique ID to persist the draggable position in localStorage
+     */
+    persistenceId;
+    /**
+     * Allow dragging the speed dial to reposition it
+     */
+    isDraggable = false;
+    /**
+     * Open state
+     */
+    isOpen = false;
+    /**
+     * Magnetic translation
+     */
+    magneticTransform = { x: 0, y: 0 };
+    /**
+     * Action item angles (for radial/arc)
+     */
+    itemAngles = [];
+    /**
+     * Current drag offset
+     */
+    dragOffset = { x: 0, y: 0 };
+    /**
+     * Is currently being dragged
+     */
+    isDragging = false;
+    /**
+     * Animation state for elasticity
+     */
+    isElastic = false;
+    /**
+     * Emitted when an action is clicked
+     */
+    actionClick;
+    /**
+     * Emitted when speed dial opens/closes
+     */
+    speedDialToggle;
+    mainButton;
+    closeTimer;
+    dragStartPos = { x: 0, y: 0 };
+    initialOffset = { x: 0, y: 0 };
+    componentWillLoad() {
+        this.loadPersistedPosition();
+    }
+    loadPersistedPosition() {
+        if (this.persistenceId && this.isDraggable) {
+            const saved = localStorage.getItem(`ui-speed-dial-pos-${this.persistenceId}`);
+            if (saved) {
+                try {
+                    this.dragOffset = JSON.parse(saved);
+                }
+                catch (e) {
+                    console.error('Failed to load SpeedDial position', e);
+                }
+            }
+        }
+    }
+    savePersistedPosition() {
+        if (this.persistenceId && this.isDraggable) {
+            localStorage.setItem(`ui-speed-dial-pos-${this.persistenceId}`, JSON.stringify(this.dragOffset));
+        }
+    }
+    getActions() {
+        if (typeof this.actions === 'string') {
+            try {
+                return JSON.parse(this.actions);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.actions;
+    }
+    getDialDirection() {
+        if (this.direction !== 'auto') {
+            return this.direction;
+        }
+        // Auto-determine direction based on position
+        if (this.position === 'center') {
+            return 'up';
+        }
+        else if (this.position.startsWith('bottom')) {
+            return 'up';
+        }
+        else if (this.position.startsWith('top')) {
+            return 'down';
+        }
+        else if (this.position.endsWith('right')) {
+            return 'left';
+        }
+        else {
+            return 'right';
+        }
+    }
+    getTooltipPosition() {
+        if (this.labelPosition && this.labelPosition !== 'auto') {
+            return this.labelPosition;
+        }
+        if (this.tooltipPosition && this.tooltipPosition !== 'auto') {
+            return this.tooltipPosition;
+        }
+        // Auto-determine tooltip position based on button position and viewport
+        const rect = this.el.getBoundingClientRect();
+        const margin = 120; // Distance needed for tooltip
+        if (this.position.endsWith('right')) {
+            if (rect.left < margin)
+                return 'right'; // Flip if near left edge
+            return 'left';
+        }
+        if (this.position.endsWith('left')) {
+            if (rect.right > window.innerWidth - margin)
+                return 'left'; // Flip if near right edge
+            return 'right';
+        }
+        if (this.position.startsWith('top')) {
+            if (rect.bottom > window.innerHeight - margin)
+                return 'top';
+            return 'bottom';
+        }
+        return 'top';
+    }
+    toggleDial = () => {
+        if (this.isDragging)
+            return; // Prevent toggle during/after drag
+        this.triggerElastic();
+        this.setOpen(!this.isOpen);
+    };
+    triggerElastic() {
+        this.isElastic = true;
+        setTimeout(() => (this.isElastic = false), 400);
+    }
+    handleOpenChange(open) {
+        if (open) {
+            this.calculateSafeAngles();
+        }
+    }
+    calculateSafeAngles() {
+        if (this.layout === 'linear')
+            return;
+        const actions = this.getActions();
+        const count = actions.length;
+        if (count === 0)
+            return;
+        const newAngles = [];
+        const rect = this.el.getBoundingClientRect();
+        const margin = 100; // Safe distance buffer
+        let startAngle = 0;
+        let endAngle = 360;
+        if (this.layout === 'arc') {
+            const dir = this.getDialDirection();
+            // Base angles for directions
+            if (dir === 'up') {
+                startAngle = 180;
+                endAngle = 360;
+            }
+            else if (dir === 'down') {
+                startAngle = 0;
+                endAngle = 180;
+            }
+            else if (dir === 'left') {
+                startAngle = 90;
+                endAngle = 270;
+            }
+            else if (dir === 'right') {
+                startAngle = 270;
+                endAngle = 450;
+            }
+            // EDGE AWARENESS: Shift arc if near horizontal/vertical edges
+            const nearRight = rect.right > window.innerWidth - margin || this.position.includes('right');
+            const nearLeft = rect.left < margin || this.position.includes('left');
+            const nearTop = rect.top < margin || this.position.includes('top');
+            const nearBottom = rect.bottom > window.innerHeight - margin || this.position.includes('bottom');
+            if (nearRight && (dir === 'up' || dir === 'auto')) {
+                startAngle -= 45;
+                endAngle -= 45;
+            }
+            if (nearLeft && (dir === 'up' || dir === 'auto')) {
+                startAngle += 45;
+                endAngle += 45;
+            }
+            if (nearTop && (dir === 'right' || dir === 'auto')) {
+                startAngle += 45;
+                endAngle += 45;
+            }
+            if (nearBottom && (dir === 'right' || dir === 'auto')) {
+                startAngle -= 45;
+                endAngle -= 45;
+            }
+            // Handle side-center positions
+            if (this.position === 'center-left') {
+                startAngle = 270;
+                endAngle = 450;
+            }
+            if (this.position === 'center-right') {
+                startAngle = 90;
+                endAngle = 270;
+            }
+        }
+        // Distribute actions
+        const range = endAngle - startAngle;
+        const step = count > 1 ? range / (this.layout === 'radial' ? count : count - 1) : 0;
+        for (let i = 0; i < count; i++) {
+            newAngles.push(startAngle + (i * step));
+        }
+        this.itemAngles = newAngles;
+    }
+    setOpen(open) {
+        if (this.isOpen !== open) {
+            this.isOpen = open;
+            this.speedDialToggle.emit(this.isOpen);
+        }
+    }
+    handleActionClick = (action) => {
+        if (action.disabled)
+            return;
+        this.actionClick.emit(String(action.id));
+        this.setOpen(false);
+    };
+    handleBackdropClick = () => {
+        if (this.isOpen && this.trigger !== 'hover') {
+            this.setOpen(false);
+        }
+    };
+    handleWindowScroll() {
+        if (this.isOpen && this.closeOnScroll) {
+            this.setOpen(false);
+        }
+    }
+    handleGlobalKeyDown(ev) {
+        const actions = this.getActions();
+        if (!actions || actions.length === 0)
+            return;
+        // Check shortcuts
+        const action = actions.find(a => a.shortcut === ev.key && !a.disabled);
+        if (action) {
+            ev.preventDefault();
+            this.handleActionClick(action);
+            return;
+        }
+    }
+    handleMouseMove(ev) {
+        if (!this.magnetic)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = ev.clientX - centerX;
+        const dy = ev.clientY - centerY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < this.magneticRadius) {
+            // Pull toward cursor
+            const influence = 1 - (dist / this.magneticRadius);
+            this.magneticTransform = {
+                x: dx * this.magneticStrength * influence,
+                y: dy * this.magneticStrength * influence
+            };
+        }
+        else if (this.magneticTransform.x !== 0 || this.magneticTransform.y !== 0) {
+            this.magneticTransform = { x: 0, y: 0 };
+        }
+    }
+    // DRAG HANDLERS
+    onMouseDown(ev) {
+        if (!this.isDraggable)
+            return;
+        this.isDragging = true;
+        this.dragStartPos = { x: ev.clientX, y: ev.clientY };
+        this.initialOffset = { ...this.dragOffset };
+        this.setOpen(false); // Close dial when starting to drag
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    onMouseMove = (ev) => {
+        if (!this.isDragging)
+            return;
+        const dx = ev.clientX - this.dragStartPos.x;
+        const dy = ev.clientY - this.dragStartPos.y;
+        this.dragOffset = {
+            x: this.initialOffset.x + dx,
+            y: this.initialOffset.y + dy
+        };
+    };
+    onMouseUp = () => {
+        this.isDragging = false;
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+        this.savePersistedPosition();
+        // Logic to "snap" to corners could go here if desired
+    };
+    // Hover handlers
+    onMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            clearTimeout(this.closeTimer);
+            this.setOpen(true);
+        }
+    };
+    onMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.closeTimer = setTimeout(() => {
+                this.setOpen(false);
+            }, 300); // Slight delay to prevent flickering
+        }
+    };
+    // Keyboard navigation
+    // Keyboard navigation for open state
+    handleLocalKeyDown(ev) {
+        if (!this.isOpen)
+            return;
+        const actionButtons = Array.from(this.el.shadowRoot?.querySelectorAll('.speed-dial-action') ?? []);
+        // If focused on main button and arrow key pressed, move to first action
+        if (document.activeElement === this.mainButton || this.el.shadowRoot?.activeElement === this.mainButton) {
+            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(ev.key)) {
+                ev.preventDefault();
+                if (actionButtons.length > 0) {
+                    actionButtons[actionButtons.length - 1].focus(); // Focus last item (closest to main button often)
+                }
+                return;
+            }
+        }
+        // Trap or navigate between actions
+        const currentIndex = actionButtons.indexOf(this.el.shadowRoot?.activeElement);
+        if (ev.key === 'Escape') {
+            this.setOpen(false);
+            this.mainButton.focus();
+        }
+        else if (currentIndex !== -1) {
+            if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+                ev.preventDefault();
+                // Let's assume logical visual order might vary, but index order is simpler
+                // Actually, let's just cycle.
+                const next = (currentIndex + 1) % actionButtons.length;
+                actionButtons[next].focus();
+            }
+            else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+                ev.preventDefault();
+                const prev = (currentIndex - 1 + actionButtons.length) % actionButtons.length;
+                actionButtons[prev].focus();
+            }
+        }
+    }
+    render() {
+        const actions = this.getActions();
+        const dialDirection = this.getDialDirection();
+        const tooltipPos = this.getTooltipPosition();
+        const containerClasses = {
+            'speed-dial-container': true,
+            [`speed-dial-${this.size}`]: true,
+            'speed-dial-open': this.isOpen,
+            'speed-dial-glassy': this.glassy,
+            'speed-dial-dragging': this.isDragging,
+            'speed-dial-elastic': this.isElastic,
+        };
+        const mainButtonClasses = {
+            'speed-dial-button': true,
+            'speed-dial-main': true,
+            [`speed-dial-${this.color}`]: true,
+            [`speed-dial-variant-${this.variant}`]: true,
+            [`speed-dial-shape-${this.shape}`]: true,
+            'speed-dial-button-open': this.isOpen,
+            'speed-dial-button-has-toggle-icon': !!this.toggleIcon,
+        };
+        const actionsClasses = {
+            'speed-dial-actions': true,
+            [`speed-dial-actions-${dialDirection}`]: true,
+            [`speed-dial-layout-${this.layout}`]: true,
+        };
+        const hostClasses = {
+            [`speed-dial-strategy-${this.strategy}`]: true,
+            [`speed-dial-${this.position}`]: true,
+        };
+        const containerStyle = {
+            '--magnetic-x': `${this.magneticTransform.x}px`,
+            '--magnetic-y': `${this.magneticTransform.y}px`,
+            '--drag-x': `${this.dragOffset.x}px`,
+            '--drag-y': `${this.dragOffset.y}px`,
+            'transform': `translate(calc(var(--magnetic-x, 0px) + var(--drag-x, 0px)), calc(var(--magnetic-y, 0px) + var(--drag-y, 0px)))`,
+            'transition': (this.magneticTransform.x === 0 && !this.isDragging) ? 'transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)' : 'none',
+            'cursor': this.isDraggable ? (this.isDragging ? 'grabbing' : 'grab') : 'default',
+        };
+        return (h(Host, { key: '044e35eacc272591b4f60488eb366c40c1b1f236', class: hostClasses, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("div", { key: '37b6426b0b26e5fbb55a7d52a1b1a515a3d56954', class: containerClasses, style: containerStyle }, this.isOpen && this.trigger === 'click' && (h("div", { key: '4abeed7f2425ec14494dd7bb8e772eee322ff6a6', class: "speed-dial-backdrop", onClick: this.handleBackdropClick })), h("div", { key: '0bfdc8b5ce0ca3949742414078299c3fda31d755', class: actionsClasses, role: "menu", "aria-orientation": ['top', 'bottom'].includes(dialDirection) ? 'vertical' : 'horizontal' }, this.isOpen && actions.map((action, index) => {
+            const angle = this.itemAngles[index] || 0;
+            const actionStyle = {
+                '--item-angle': `${angle}deg`,
+                '--index': index.toString(),
+                '--stagger-delay': `${index * 0.05}s`,
+                'animation-delay': `${index * 0.05}s`,
+            };
+            return (h("div", { key: action.id, class: "speed-dial-action-wrapper", style: actionStyle }, h("ui-button", { variant: "ghost", class: {
+                    'speed-dial-action': true,
+                    [`speed-dial-${action.variant || this.variant}`]: true,
+                    [`speed-dial-variant-${action.variant || this.variant}`]: true,
+                    [`speed-dial-shape-${action.shape || this.shape}`]: true,
+                    [`speed-dial-${action.color || this.color}`]: true,
+                    'speed-dial-action-disabled': action.disabled,
+                }, onClick: () => this.handleActionClick(action), disabled: action.disabled, ariaLabel: action.label, style: {
+                    backgroundColor: action.color || undefined,
+                } }, h("span", { class: "speed-dial-action-icon" }, h("ui-icon", { name: action.icon, library: action.iconLibrary || this.actionLibrary, size: "1.25em" })), action.badge && (h("span", { class: "speed-dial-action-badge", style: { backgroundColor: action.badgeColor } }, action.badge)), action.shortcut && (h("span", { class: "speed-dial-action-shortcut" }, action.shortcut))), this.showTooltips && action.label && (h("div", { class: {
+                    [`speed-dial-tooltip`]: true,
+                    [`speed-dial-tooltip-${tooltipPos}`]: true,
+                    'speed-dial-tooltip-hidden': this.labelHide
+                } }, action.label))));
+        })), h("ui-button", { key: '3a6825fce27f39d7a4a689b4e860b7363b34e67f', variant: "ghost", class: mainButtonClasses, onClick: this.toggleDial, ariaLabel: "Speed dial menu", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "true", ref: (el) => (this.mainButton = el) }, h("slot", { key: 'b59d109049ce98eae735d4e598a929669171d247', name: "trigger-icon" }, h("span", { key: '3d3c55dbbd3b67ade9dbd28a66b60feb2483e12a', class: "speed-dial-icon" }, h("ui-icon", { key: 'b0c231ad4fe207ca18e2b8efcf8ad891072d7c65', name: this.isOpen && this.toggleIcon ? this.toggleIcon : this.icon, library: this.iconLibrary, size: "1.5rem" })))))));
+    }
+    static get is() { return "ui-speed-dial"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["speed-dial.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["speed-dial.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpeedDialPosition",
+                    "resolved": "\"bottom\" | \"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"center-left\" | \"center-right\" | \"left\" | \"right\" | \"top\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SpeedDialPosition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/speed-dial/types.ts::SpeedDialPosition",
+                            "referenceLocation": "SpeedDialPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the speed dial button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "actions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpeedDialAction[] | string",
+                    "resolved": "SpeedDialAction[] | string",
+                    "references": {
+                        "SpeedDialAction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/speed-dial/types.ts::SpeedDialAction",
+                            "referenceLocation": "SpeedDialAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Speed dial actions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actions",
+                "defaultValue": "[]"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpeedDialStrategy",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {
+                        "SpeedDialStrategy": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/speed-dial/types.ts::PositionStrategy",
+                            "referenceLocation": "SpeedDialStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Positioning strategy: 'fixed' (screen) or 'absolute' (container)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "strategy",
+                "defaultValue": "'fixed'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon for the main button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'plus'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library for the main button icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'se'"
+            },
+            "toggleIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to show when open (e.g., 'close' or 'x')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-icon"
+            },
+            "actionLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library for actions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-library",
+                "defaultValue": "'default'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color scheme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of dial opening"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'auto'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-position",
+                "defaultValue": "'auto'"
+            },
+            "showTooltips": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltips/labels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltips",
+                "defaultValue": "true"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the label/tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'auto'"
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the label text but keep it for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-hide",
+                "defaultValue": "false"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger mode: 'click' (default) or 'hover'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'click'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpeedDialLayout",
+                    "resolved": "\"arc\" | \"linear\" | \"radial\"",
+                    "references": {
+                        "SpeedDialLayout": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/speed-dial/types.ts::SpeedDialLayout",
+                            "referenceLocation": "SpeedDialLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opening layout style: 'linear', 'radial', or 'arc'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'linear'"
+            },
+            "closeOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dial when window scrolls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-scroll",
+                "defaultValue": "false"
+            },
+            "glassy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use glassmorphism effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glassy",
+                "defaultValue": "false"
+            },
+            "magnetic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use magnetic pull effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic",
+                "defaultValue": "false"
+            },
+            "magneticStrength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Strength of magnetic pull (0 to 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic-strength",
+                "defaultValue": "0.3"
+            },
+            "magneticRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Radius of magnetic pull in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic-radius",
+                "defaultValue": "150"
+            },
+            "persistenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique ID to persist the draggable position in localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistence-id"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow dragging the speed dial to reposition it"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "magneticTransform": {},
+            "itemAngles": {},
+            "dragOffset": {},
+            "isDragging": {},
+            "isElastic": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionClick",
+                "name": "actionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an action is clicked"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "speedDialToggle",
+                "name": "speedDialToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when speed dial opens/closes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "handleWindowScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleGlobalKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mousemove",
+                "method": "handleMouseMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleLocalKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}