atomicuilibrary 0.0.1

package/dist/collection/components/divider/divider.js

@@ -0,0 +1,1612 @@
+import { h } from "@stencil/core";
+export class Divider {
+    el;
+    /**
+     * Text to display on the divider
+     */
+    text = '';
+    /**
+     * Icon to display on the divider (emoji or character)
+     */
+    icon = '';
+    /**
+     * Subtitle text to display below the main text
+     */
+    subtitle = '';
+    /**
+     * Dynamic flowing glow effect (Aura)
+     */
+    aura = false;
+    /**
+     * Glassmorphism effect (backdrop-blur)
+     */
+    glass = false;
+    /**
+     * Kinetic animated gradient flow
+     */
+    kinetic = false;
+    /**
+     * Animation style for the icon/icon area
+     */
+    iconAnimation = 'none';
+    /**
+     * Use upright characters in vertical orientation
+     */
+    upright = false;
+    /**
+     * Number of steps for timeline/stepper mode
+     */
+    steps = 0;
+    /**
+     * Current active step in stepper mode (1-indexed)
+     */
+    currentStep = 0;
+    /**
+     * Heatmap status gradient based on percentage
+     */
+    heatmap = false;
+    /**
+     * Percentage for heatmap gradient (0-100)
+     */
+    percent = 0;
+    /**
+     * Tactile ripple effect on click
+     */
+    ripple = false;
+    /**
+     * Parallax shadow projection for depth
+     */
+    parallax = false;
+    /**
+     * Cinematic reveal animation on scroll into view
+     */
+    reveal = false;
+    /**
+     * Turn the divider into a functional range slider/scrubber
+     */
+    dragEnabled = false;
+    /**
+     * Organic wobbling SVG morph on hover
+     */
+    organic = false;
+    /**
+     * Chromatic aberration (glitch) effect on hover
+     */
+    holographic = false;
+    /**
+     * Real-time data streaming flicker on the line track
+     */
+    stream = false;
+    /**
+     * Target element ID to scroll to when clicked
+     */
+    teleportTo = '';
+    /**
+     * Emit haptic audio events on interaction
+     */
+    enableHaptics = false;
+    /**
+     * Orientation of the divider: 'horizontal' or 'vertical'
+     */
+    orientation = 'horizontal';
+    /**
+     * Visual variant of the divider line
+     */
+    variant = 'solid';
+    /**
+     * Size/thickness of the divider line
+     */
+    size = 'md';
+    /**
+    * Text alignment: 'start', 'center', or 'end'
+    */
+    textAlign = 'center';
+    /**
+     * Theme color or custom CSS color
+     */
+    color = '';
+    /**
+     * Custom color for the text (CSS color value)
+     */
+    textColor = '';
+    /**
+     * Text transformation
+     */
+    textTransform = 'capitalize';
+    /**
+     * Vertical alignment: 'top', 'center', or 'bottom' (only for vertical orientation)
+     */
+    verticalAlign = 'center';
+    /**
+     * Spacing around the divider (margin)
+     */
+    gap = '';
+    /**
+     * If true, renders without the separator lines
+     */
+    plain = false;
+    /**
+     * Image URL to display as an avatar/icon
+     */
+    image = '';
+    /**
+     * Loading state (shows a shimmer effect)
+     */
+    loading = false;
+    /**
+     * Precise thickness (e.g., '1px', '4px') - overrides size if set
+     */
+    thickness = '';
+    /**
+     * Automatic orientation switch based on screen width
+     */
+    responsive = 'none';
+    /**
+     * Animation type
+     */
+    animation = 'none';
+    /**
+     * Make divider clickable
+     */
+    clickable = false;
+    /**
+     * Shadow effect
+     */
+    shadow = false;
+    /**
+     * Glow effect
+     */
+    glow = false;
+    /**
+     * Opacity (0-1)
+     */
+    opacity = 1;
+    /**
+     * Pattern style
+     */
+    pattern = 'none';
+    /**
+     * Inset style
+     */
+    inset = 'none';
+    /**
+     * Spacing preset
+     */
+    spacing = 'none';
+    /**
+     * Badge/counter text
+     */
+    badge = '';
+    /**
+     * Max width for divider
+     */
+    maxWidth = '';
+    /**
+     * Border radius for lines
+     */
+    borderRadius = '';
+    /**
+     * Height of the divider
+     */
+    height = '';
+    /**
+     * Control which lines are rendered: 'all', 'start', 'end', or 'none'
+     */
+    lines = 'all';
+    /**
+     * Style of the line ends: 'butt', 'round', or 'square'
+     */
+    linecap = 'butt';
+    /**
+     * Shape divider type
+     */
+    shape = 'none';
+    /**
+     * Color for the shape divider
+     */
+    shapeColor = '';
+    isRevealed;
+    isDragging = false;
+    /**
+     * Fired when divider is clicked
+     */
+    dividerClick;
+    /**
+     * Fired when draggable divider changes
+     */
+    dividerChange;
+    /**
+     * Fired for audio/haptic cues
+     */
+    dividerHaptic;
+    observer;
+    componentWillLoad() {
+        // If reveal is false, show immediately. 
+        // If reveal is true, keep hidden until intersection in componentDidLoad
+        this.isRevealed = !this.reveal;
+    }
+    componentDidLoad() {
+        if (this.reveal) {
+            this.observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.isRevealed = true;
+                        if (this.enableHaptics)
+                            this.dividerHaptic.emit({ type: 'reveal' });
+                        this.observer.disconnect();
+                    }
+                });
+            }, { threshold: 0.1 });
+            this.observer.observe(this.el);
+        }
+    }
+    disconnectedCallback() {
+        if (this.observer)
+            this.observer.disconnect();
+        this.handleMouseUp();
+    }
+    async triggerReveal() {
+        this.isRevealed = true;
+    }
+    handleMouseDown = (e) => {
+        if (this.ripple)
+            this.handleRipple(e);
+        if (!this.dragEnabled)
+            return;
+        this.isDragging = true;
+        this.updateValueOnMove(e);
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    };
+    handleTouchStart = (e) => {
+        if (this.ripple)
+            this.handleRipple(e);
+        if (!this.dragEnabled)
+            return;
+        this.isDragging = true;
+        this.updateValueOnMove(e);
+        document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+        document.addEventListener('touchend', this.handleMouseUp);
+    };
+    handleMouseMove = (e) => {
+        if (this.isDragging) {
+            this.updateValueOnMove(e);
+        }
+    };
+    handleTouchMove = (e) => {
+        if (this.isDragging) {
+            e.preventDefault();
+            this.updateValueOnMove(e);
+        }
+    };
+    handleMouseUp = () => {
+        if (this.isDragging) {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('touchmove', this.handleTouchMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+            document.removeEventListener('touchend', this.handleMouseUp);
+        }
+    };
+    handleKeyDown = (e) => {
+        if (!this.dragEnabled)
+            return;
+        let stepChange = 0;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
+            stepChange = 5;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
+            stepChange = -5;
+        if (stepChange !== 0) {
+            e.preventDefault();
+            const newPercent = Math.max(0, Math.min(100, (this.percent || 0) + stepChange));
+            const stepValue = this.steps > 0 ? Math.round((newPercent / 100) * (this.steps - 1)) + 1 : 0;
+            this.dividerChange.emit({ percent: newPercent, step: stepValue });
+        }
+    };
+    updateValueOnMove(e) {
+        const rect = this.el.getBoundingClientRect();
+        const isHorizontal = this.orientation === 'horizontal';
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        let newValue = 0;
+        if (isHorizontal) {
+            newValue = ((clientX - rect.left) / rect.width) * 100;
+        }
+        else {
+            newValue = ((clientY - rect.top) / rect.height) * 100;
+        }
+        newValue = Math.max(0, Math.min(100, newValue));
+        const step = this.steps > 0 ? Math.round((newValue / 100) * (this.steps - 1)) + 1 : 0;
+        this.dividerChange.emit({ percent: Math.round(newValue), step });
+        if (this.enableHaptics && this.steps > 0 && step !== this.currentStep) {
+            this.dividerHaptic.emit({ type: 'step' });
+        }
+    }
+    handleClick = (ev) => {
+        if (this.enableHaptics)
+            this.dividerHaptic.emit({ type: 'click' });
+        if (this.teleportTo) {
+            const target = document.querySelector(this.teleportTo);
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }
+        if (this.clickable || this.ripple || this.dragEnabled) {
+            this.dividerClick.emit(ev);
+        }
+    };
+    handleRipple = (e) => {
+        const rippleContainer = this.el.shadowRoot?.querySelector('.ripple-container');
+        if (!rippleContainer)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const span = document.createElement('span');
+        span.style.left = `${x}px`;
+        span.style.top = `${y}px`;
+        rippleContainer.appendChild(span);
+        setTimeout(() => span.remove(), 800);
+    };
+    renderSteps(position) {
+        const totalSteps = this.steps;
+        const current = this.currentStep;
+        const isHorizontal = this.orientation === 'horizontal';
+        let startStep = 1;
+        let endStep = totalSteps;
+        if (this.textAlign === 'center') {
+            const mid = Math.ceil(totalSteps / 2);
+            if (position === 'start')
+                endStep = mid;
+            else
+                startStep = mid + 1;
+        }
+        else if (this.textAlign === 'left') {
+            if (position === 'start')
+                return null;
+        }
+        else if (this.textAlign === 'right') {
+            if (position === 'end')
+                return null;
+        }
+        const stepsArray = [];
+        for (let i = startStep; i <= endStep; i++) {
+            stepsArray.push(i);
+        }
+        return stepsArray.map((step) => {
+            const isCompleted = step < current;
+            const isActive = step === current;
+            const stepStyle = isHorizontal
+                ? { left: `${((step - startStep) / (endStep - startStep + 1)) * 100 + (100 / (endStep - startStep + 1) / 2)}%` }
+                : { top: `${((step - startStep) / (endStep - startStep + 1)) * 100 + (100 / (endStep - startStep + 1) / 2)}%` };
+            return (h("div", { class: {
+                    'divider-step-node': true,
+                    'is-completed': isCompleted,
+                    'is-active': isActive
+                }, style: stepStyle }, h("span", { class: "step-label" }, step)));
+        });
+    }
+    renderShape() {
+        if (this.shape === 'none')
+            return null;
+        const shapeStyle = this.shapeColor ? { fill: this.shapeColor } : {};
+        const shapes = {
+            curve: "M0,0 C50,100 50,100 100,0 L100,100 0,100 Z",
+            tilt: "M0,0 L100,100 L0,100 Z",
+            triangle: "M0,100 L50,0 L100,100 Z",
+            wave: "M0,50 Q25,0 50,50 T100,50 L100,100 0,100 Z",
+            zigzag: "M0,100 L25,0 L50,100 L75,0 L100,100 Z",
+            arrow: "M0,0 L50,50 L100,0 L100,100 L0,100 Z"
+        };
+        return (h("div", { class: `divider-shape divider-shape-${this.shape}` }, h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", style: shapeStyle }, h("path", { d: shapes[this.shape] || '' }))));
+    }
+    render() {
+        if (this.shape !== 'none')
+            return this.renderShape();
+        const isThemeColor = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].includes(this.color);
+        const classes = [
+            'divider',
+            `divider-${this.orientation}`,
+            `divider-${this.variant}`,
+            `divider-${this.size}`,
+            `divider-text-${this.textAlign}`,
+            this.orientation === 'vertical' ? `divider-vertical-${this.verticalAlign}` : '',
+            this.plain ? 'divider-plain' : '',
+            this.loading ? 'divider-loading' : '',
+            this.image ? 'divider-with-image' : '',
+            this.responsive !== 'none' ? `divider-responsive-${this.responsive}` : '',
+            isThemeColor ? `color-${this.color}` : (this.color ? 'divider-custom' : ''),
+            this.textColor ? 'divider-custom-text' : '',
+            this.animation !== 'none' ? `divider-animation-${this.animation}` : '',
+            this.clickable || this.ripple || this.dragEnabled ? 'divider-interactive' : '',
+            this.shadow ? 'divider-shadow' : '',
+            this.glow ? 'divider-glow' : '',
+            this.pattern !== 'none' ? `divider-pattern-${this.pattern}` : '',
+            this.inset !== 'none' ? `divider-inset-${this.inset}` : '',
+            this.spacing !== 'none' ? `divider-spacing-${this.spacing}` : '',
+            this.badge ? 'divider-with-badge' : '',
+            this.aura ? 'divider-aura' : '',
+            this.glass ? 'divider-glass' : '',
+            this.kinetic ? 'divider-kinetic' : '',
+            this.iconAnimation !== 'none' ? `divider-icon-anim-${this.iconAnimation}` : '',
+            this.upright ? 'divider-upright' : '',
+            this.steps > 0 ? 'divider-with-steps' : '',
+            this.heatmap ? 'divider-heatmap' : '',
+            this.reveal ? 'divider-reveal' : '',
+            this.isRevealed ? 'is-revealed' : '',
+            this.dragEnabled ? 'divider-draggable' : '',
+            this.isDragging ? 'is-dragging' : '',
+            this.organic ? 'divider-organic' : '',
+            this.holographic ? 'divider-holographic' : '',
+            this.stream ? 'divider-stream' : '',
+            this.ripple ? 'divider-ripple' : '',
+            this.parallax ? 'divider-parallax' : '',
+            this.subtitle ? 'divider-with-subtitle' : '',
+            this.lines !== 'all' ? `divider-lines-${this.lines}` : '',
+            this.linecap !== 'butt' ? `divider-linecap-${this.linecap}` : ''
+        ].filter(Boolean).join(' ');
+        const style = {
+            ...(!isThemeColor && this.color && { '--divider-color': this.color }),
+            ...(this.textColor && { '--divider-text-color': this.textColor }),
+            ...(this.textTransform && { '--divider-text-transform': this.textTransform }),
+            ...(this.thickness && { '--divider-thickness': this.thickness }),
+            ...(this.gap && { margin: this.gap }),
+            ...(this.opacity !== 1 && { opacity: this.opacity.toString() }),
+            ...(this.maxWidth && { maxWidth: this.maxWidth }),
+            ...(this.borderRadius && { '--divider-border-radius': this.borderRadius }),
+            ...(this.height && { height: this.height }),
+            ...(this.heatmap && this.percent && { '--divider-percent': `${this.percent}%` }),
+        };
+        const hasContent = this.text || this.icon || this.image || this.loading;
+        const showStartLine = !this.plain && (this.lines === 'all' || this.lines === 'start');
+        const showEndLine = !this.plain && (this.lines === 'all' || this.lines === 'end');
+        return (h("div", { class: classes, style: style, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, onKeyDown: this.handleKeyDown, onClick: this.handleClick, role: this.dragEnabled ? 'slider' : (this.clickable || this.ripple ? 'button' : 'separator'), "aria-orientation": this.orientation, "aria-label": this.text || 'divider', "aria-valuenow": this.dragEnabled ? this.percent : undefined, "aria-valuemin": this.dragEnabled ? 0 : undefined, "aria-valuemax": this.dragEnabled ? 100 : undefined, "aria-valuetext": this.dragEnabled ? `${this.percent}% ${this.steps > 0 ? `(Step ${this.currentStep})` : ''}` : undefined, tabindex: this.dragEnabled || this.clickable || this.ripple ? 0 : undefined }, this.ripple && h("div", { class: "ripple-container" }), showStartLine && (h("div", { class: "divider-line first" }, this.steps > 0 && this.renderSteps('start'))), h("div", { class: "divider-content-wrapper" }, h("slot", { name: "start" }), hasContent && (h("span", { class: "divider-main-content" }, this.loading ? h("div", { class: "divider-shimmer" }) : (h("div", { class: "divider-text-area" }, this.image && h("img", { src: this.image, alt: "divider-img", class: "divider-image" }), !this.image && (this.icon || this.el.querySelector('[slot="icon"]')) && (h("span", { class: "divider-icon" }, h("slot", { name: "icon" }, this.icon.length > 2 ?
+            h("ui-icon", { name: this.icon, library: "fontawesome", size: this.size === 'lg' ? '18px' : '14px' }) :
+            this.icon))), h("div", { class: "divider-label-group" }, this.text && h("span", { class: "divider-label" }, this.text), this.subtitle && h("span", { class: "divider-subtitle" }, this.subtitle)), this.badge && h("span", { class: "divider-badge" }, this.badge))))), h("slot", null), h("slot", { name: "end" })), showEndLine && (h("div", { class: "divider-line last" }, this.steps > 0 && this.renderSteps('end')))));
+    }
+    static get is() { return "ui-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display on the divider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display on the divider (emoji or character)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subtitle text to display below the main text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
+            },
+            "aura": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dynamic flowing glow effect (Aura)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aura",
+                "defaultValue": "false"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Glassmorphism effect (backdrop-blur)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "kinetic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Kinetic animated gradient flow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "kinetic",
+                "defaultValue": "false"
+            },
+            "iconAnimation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'spin' | 'pulse' | 'flip'",
+                    "resolved": "\"flip\" | \"none\" | \"pulse\" | \"spin\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation style for the icon/icon area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-animation",
+                "defaultValue": "'none'"
+            },
+            "upright": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use upright characters in vertical orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "upright",
+                "defaultValue": "false"
+            },
+            "steps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of steps for timeline/stepper mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "0"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active step in stepper mode (1-indexed)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "heatmap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heatmap status gradient based on percentage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heatmap",
+                "defaultValue": "false"
+            },
+            "percent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Percentage for heatmap gradient (0-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percent",
+                "defaultValue": "0"
+            },
+            "ripple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tactile ripple effect on click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ripple",
+                "defaultValue": "false"
+            },
+            "parallax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parallax shadow projection for depth"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parallax",
+                "defaultValue": "false"
+            },
+            "reveal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cinematic reveal animation on scroll into view"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal",
+                "defaultValue": "false"
+            },
+            "dragEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Turn the divider into a functional range slider/scrubber"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-enabled",
+                "defaultValue": "false"
+            },
+            "organic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Organic wobbling SVG morph on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "organic",
+                "defaultValue": "false"
+            },
+            "holographic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chromatic aberration (glitch) effect on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "holographic",
+                "defaultValue": "false"
+            },
+            "stream": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Real-time data streaming flicker on the line track"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stream",
+                "defaultValue": "false"
+            },
+            "teleportTo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Target element ID to scroll to when clicked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "teleport-to",
+                "defaultValue": "''"
+            },
+            "enableHaptics": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit haptic audio events on interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-haptics",
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the divider: 'horizontal' or 'vertical'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'dashed' | 'dotted' | 'double-solid' | 'double-dashed' | 'double-dotted' | 'gradient'",
+                    "resolved": "\"dashed\" | \"dotted\" | \"double-dashed\" | \"double-dotted\" | \"double-solid\" | \"gradient\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the divider line"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size/thickness of the divider line"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "textAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | LeftRight",
+                    "resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment: 'start', 'center', or 'end'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-align",
+                "defaultValue": "'center'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme color or custom CSS color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color for the text (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-color",
+                "defaultValue": "''"
+            },
+            "textTransform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'capitalize' | 'uppercase' | 'lowercase'",
+                    "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"uppercase\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text transformation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-transform",
+                "defaultValue": "'capitalize'"
+            },
+            "verticalAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'center' | 'bottom'",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical alignment: 'top', 'center', or 'bottom' (only for vertical orientation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical-align",
+                "defaultValue": "'center'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing around the divider (margin)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "''"
+            },
+            "plain": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, renders without the separator lines"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "plain",
+                "defaultValue": "false"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL to display as an avatar/icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state (shows a shimmer effect)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "thickness": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Precise thickness (e.g., '1px', '4px') - overrides size if set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thickness",
+                "defaultValue": "''"
+            },
+            "responsive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize | 'none'",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"none\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatic orientation switch based on screen width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive",
+                "defaultValue": "'none'"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'fade' | 'slide' | 'expand'",
+                    "resolved": "\"expand\" | \"fade\" | \"none\" | \"slide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'none'"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make divider clickable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "shadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shadow effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shadow",
+                "defaultValue": "false"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Glow effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glow",
+                "defaultValue": "false"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opacity (0-1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "opacity",
+                "defaultValue": "1"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'dots' | 'stripes' | 'wavy' | 'zigzag'",
+                    "resolved": "\"dots\" | \"none\" | \"stripes\" | \"wavy\" | \"zigzag\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pattern style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern",
+                "defaultValue": "'none'"
+            },
+            "inset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'start' | 'end' | 'both'",
+                    "resolved": "\"both\" | \"end\" | \"none\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Inset style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inset",
+                "defaultValue": "'none'"
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'compact' | 'comfortable' | 'spacious' | 'none'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"spacious\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing preset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spacing",
+                "defaultValue": "'none'"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge/counter text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max width for divider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "''"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius for lines"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the divider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            },
+            "lines": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'all' | 'start' | 'end' | 'none'",
+                    "resolved": "\"all\" | \"end\" | \"none\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control which lines are rendered: 'all', 'start', 'end', or 'none'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "'all'"
+            },
+            "linecap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'butt' | 'round' | 'square'",
+                    "resolved": "\"butt\" | \"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style of the line ends: 'butt', 'round', or 'square'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linecap",
+                "defaultValue": "'butt'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'curve' | 'tilt' | 'triangle' | 'wave' | 'zigzag' | 'arrow'",
+                    "resolved": "\"arrow\" | \"curve\" | \"none\" | \"tilt\" | \"triangle\" | \"wave\" | \"zigzag\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape divider type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'none'"
+            },
+            "shapeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color for the shape divider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape-color",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isRevealed": {},
+            "isDragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dividerClick",
+                "name": "dividerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when divider is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dividerChange",
+                "name": "dividerChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when draggable divider changes"
+                },
+                "complexType": {
+                    "original": "{ percent: number, step: number }",
+                    "resolved": "{ percent: number; step: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "dividerHaptic",
+                "name": "dividerHaptic",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired for audio/haptic cues"
+                },
+                "complexType": {
+                    "original": "{ type: 'click' | 'step' | 'reveal' | 'hover' }",
+                    "resolved": "{ type: \"step\" | \"click\" | \"hover\" | \"reveal\"; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "triggerReveal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}