atomicuilibrary 0.0.1

package/dist/collection/components/stepper/stepper.js

@@ -0,0 +1,1850 @@
+import { h } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Stepper {
+    /**
+     * Array of steps to display
+     */
+    /**
+     * Steps can be provided as an array or a JSON string in the attribute
+     */
+    steps = [];
+    /**
+     * Internal normalized steps
+     */
+    normalizedSteps = [];
+    /**
+     * Orientation of the stepper (horizontal or vertical)
+     */
+    orientation = 'horizontal';
+    /**
+     * Size of the stepper
+     */
+    size = 'md';
+    /**
+     * Current active step index (0-based)
+     */
+    activeStep = 0;
+    /**
+     * Whether to show step numbers
+     */
+    showNumbers = true;
+    /**
+     * Whether to show step descriptions
+     */
+    showDescriptions = false;
+    /**
+     * Show optional control buttons (Next/Previous/Finish/Failed)
+     */
+    showControls = false;
+    /**
+     * Customize control button labels
+     */
+    labelPrev = 'Previous';
+    labelNext = 'Next';
+    labelFinish = 'Finish';
+    labelFail = 'Mark Failed';
+    /**
+     * Events emitted when control buttons are clicked
+     */
+    stepperPrevious;
+    stepperNext;
+    stepperFinish;
+    stepperFail;
+    /**
+     * Custom icon for each status (optional)
+     */
+    customIcons;
+    /**
+     * Flow type: linear or non-linear
+     */
+    flow = 'linear';
+    /**
+     * Whether to use Shadow DOM
+     */
+    shadow = true;
+    /**
+     * Theme configuration with CSS variables
+     */
+    theme;
+    /**
+     * Enable keyboard navigation
+     */
+    keyboardNavigation = true;
+    /**
+     * Enable responsive collapse/overflow
+     */
+    responsive = true;
+    /**
+     * Maximum number of steps to show before collapsing
+     */
+    maxVisibleSteps = 5;
+    progressDot = false;
+    /**
+     * Default library for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * Label placement (horizontal or vertical) - DEPRECATED: use labelPosition instead
+     */
+    labelPlacement = 'horizontal';
+    /**
+     * Label position relative to step indicator
+     */
+    labelPosition = 'right';
+    /**
+     * Stepper variant style
+     */
+    variant = 'default';
+    colorScheme = 'primary';
+    animated = true;
+    showProgress = false;
+    validateBeforeNext;
+    mobileBreakpoint = 768;
+    allowStepClick = true;
+    showTooltips = true;
+    compact = false;
+    stepsPerPage = 0;
+    scrollable = true;
+    clickable = false;
+    iconLineWidth;
+    iconLineHeight;
+    iconLineFlex;
+    /**
+     * Shape of the step indicator (circle, square, or square-active)
+     */
+    stepShape = 'circle';
+    /**
+     * Validation errors map
+     */
+    validationErrors = new Map();
+    isMobile = false;
+    isLoading = false;
+    /**
+     * Reference to the host element
+     */
+    host;
+    /**
+     * Event emitted when active step changes
+     */
+    stepperChange;
+    /**
+     * Event emitted when validation fails
+     */
+    stepperValidationError;
+    progressUpdate;
+    stepValidation;
+    stepLoading;
+    /**
+     * Programmatic API: Go to next step
+     */
+    async next(options = {}) {
+        return this.navigateToStep(this.activeStep + 1, options);
+    }
+    /**
+     * Programmatic API: Go to previous step
+     */
+    async prev(options = {}) {
+        return this.navigateToStep(this.activeStep - 1, options);
+    }
+    /**
+     * Programmatic API: Go to specific step
+     */
+    async goTo(stepIndex, options = {}) {
+        return this.navigateToStep(stepIndex, options);
+    }
+    /**
+     * Programmatic API: Mark step as completed
+     */
+    async complete(stepIndex) {
+        const index = stepIndex ?? this.activeStep;
+        if (index >= 0 && index < this.normalizedSteps.length) {
+            this.updateStepStatus(index, 'completed');
+        }
+    }
+    /**
+     * Programmatic API: Mark step as failed
+     */
+    async fail(stepIndex, errorMessage) {
+        const index = stepIndex ?? this.activeStep;
+        if (index >= 0 && index < this.normalizedSteps.length) {
+            this.updateStepStatus(index, 'failed');
+            if (errorMessage) {
+                this.validationErrors.set(String(this.normalizedSteps[index].id), errorMessage);
+            }
+        }
+    }
+    /**
+     * Get current step
+     */
+    async getCurrentStep() {
+        return this.activeStep >= 0 && this.activeStep < this.normalizedSteps.length
+            ? this.normalizedSteps[this.activeStep]
+            : null;
+    }
+    /**
+     * Get all steps
+     */
+    async getSteps() {
+        return [...this.normalizedSteps];
+    }
+    /**
+     * Validate current step
+     */
+    async validateCurrentStep() {
+        return this.validateStep(this.activeStep);
+    }
+    async navigateToStep(targetIndex, options = {}) {
+        if (targetIndex < 0 || targetIndex >= this.normalizedSteps.length) {
+            return false;
+        }
+        // Removed unused variable currentStep
+        const targetStep = this.normalizedSteps[targetIndex];
+        // Check if navigation is allowed
+        if (!options.force && !this.canNavigateTo(targetIndex)) {
+            return false;
+        }
+        // Validate current step if not skipping validation
+        if (!options.skipValidation && this.flow === 'linear' && targetIndex > this.activeStep) {
+            const isValid = await this.validateStep(this.activeStep);
+            if (!isValid) {
+                return false;
+            }
+        }
+        const previousIndex = this.activeStep;
+        this.activeStep = targetIndex;
+        // Update step statuses
+        this.updateStepStatuses();
+        // Emit change event
+        this.stepperChange.emit({
+            index: targetIndex,
+            step: targetStep,
+            previousIndex
+        });
+        return true;
+    }
+    handleActiveStepChange() {
+        this.updateStepStatuses();
+    }
+    canNavigateTo(targetIndex) {
+        if (this.flow === 'non-linear') {
+            return true;
+        }
+        // In linear flow, can only go to completed steps or next step
+        return targetIndex <= this.activeStep + 1;
+    }
+    async validateStep(stepIndex) {
+        const step = this.normalizedSteps[stepIndex];
+        // First run the global validateBeforeNext hook if provided
+        if (this.validateBeforeNext) {
+            this.isLoading = true;
+            this.stepLoading.emit(true);
+            try {
+                const isValid = await this.validateBeforeNext(stepIndex);
+                this.stepValidation.emit({ step: stepIndex, valid: isValid });
+                if (!isValid) {
+                    const errMsg = 'Validation failed for the current step';
+                    this.validationErrors.set(String(step?.id || stepIndex), errMsg);
+                    if (step) {
+                        this.stepperValidationError.emit({ index: stepIndex, step, error: errMsg });
+                    }
+                    return false;
+                }
+            }
+            finally {
+                this.isLoading = false;
+                this.stepLoading.emit(false);
+            }
+        }
+        if (!step) {
+            return true;
+        }
+        // Check for ui-step element validate hook
+        if (step.node && typeof step.node.validate === 'function') {
+            this.isLoading = true;
+            this.stepLoading.emit(true);
+            try {
+                const isValid = await step.node.validate();
+                if (!isValid) {
+                    const errorMessage = 'Step validation failed';
+                    this.validationErrors.set(String(step.id), errorMessage);
+                    this.stepperValidationError.emit({ index: stepIndex, step, error: errorMessage });
+                    return false;
+                }
+            }
+            catch (error) {
+                const errorMessage = `Validation error: ${error.message}`;
+                this.validationErrors.set(String(step.id), errorMessage);
+                this.stepperValidationError.emit({ index: stepIndex, step, error: errorMessage });
+                return false;
+            }
+            finally {
+                this.isLoading = false;
+                this.stepLoading.emit(false);
+            }
+        }
+        if (!step.validator) {
+            return true;
+        }
+        try {
+            const isValid = await step.validator.validate(step, step.data);
+            if (!isValid) {
+                const errorMessage = step.validator.errorMessage || 'Validation failed';
+                this.validationErrors.set(String(step.id), errorMessage);
+                this.stepperValidationError.emit({
+                    index: stepIndex,
+                    step,
+                    error: errorMessage
+                });
+                return false;
+            }
+            // Clear any previous errors
+            this.validationErrors.delete(String(step.id));
+            return true;
+        }
+        catch (error) {
+            const errorMessage = `Validation error: ${error.message}`;
+            this.validationErrors.set(String(step.id), errorMessage);
+            this.stepperValidationError.emit({
+                index: stepIndex,
+                step,
+                error: errorMessage
+            });
+            return false;
+        }
+    }
+    updateStepStatuses() {
+        const specialStatuses = ['failed', 'error', 'waiting', 'warning', 'info', 'disabled'];
+        this.normalizedSteps = this.normalizedSteps.map((step, index) => {
+            // If the step already has a special status, preserve it
+            if (step.status && specialStatuses.includes(step.status)) {
+                return step;
+            }
+            let status = 'pending';
+            if (index < this.activeStep) {
+                status = 'completed';
+            }
+            else if (index === this.activeStep) {
+                status = 'active';
+            }
+            return { ...step, status };
+        });
+    }
+    updateStepStatus(stepIndex, status) {
+        if (stepIndex >= 0 && stepIndex < this.normalizedSteps.length) {
+            this.normalizedSteps = this.normalizedSteps.map((step, index) => index === stepIndex ? { ...step, status } : step);
+        }
+    }
+    getStepIcon(status) {
+        if (this.customIcons && this.customIcons[status]) {
+            return this.customIcons[status];
+        }
+        switch (status) {
+            case 'completed':
+            case 'success':
+                return this.iconLibrary === 'lucide' ? 'check' : 'check';
+            case 'failed':
+            case 'error':
+                return this.iconLibrary === 'lucide' ? 'x' : 'x';
+            case 'waiting':
+            case 'pending':
+                return this.iconLibrary === 'lucide' ? 'clock' : 'clock';
+            case 'info':
+                return this.iconLibrary === 'lucide' ? 'info' : 'info';
+            case 'active':
+                return this.iconLibrary === 'lucide' ? 'circle-dot' : 'circle-dot';
+            case 'disabled':
+                return this.iconLibrary === 'lucide' ? 'ban' : 'ban';
+            default:
+                return this.iconLibrary === 'lucide' ? 'circle' : 'circle';
+        }
+    }
+    renderProgressCircle(percent) {
+        const radius = 14;
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (percent / 100) * circumference;
+        return (h("svg", { class: "stepper-progress-circle", viewBox: "0 0 32 32" }, h("circle", { class: "stepper-progress-bg", cx: "16", cy: "16", r: radius }), h("circle", { class: "stepper-progress-value", cx: "16", cy: "16", r: radius, "stroke-dasharray": circumference, "stroke-dashoffset": offset })));
+    }
+    renderStepIcon(step, index) {
+        // Custom SVG icon or library icon name
+        if (step.svgIcon) {
+            // If it looks like a custom SVG (contains <svg), render as is, otherwise use ui-icon
+            if (step.svgIcon.includes('<svg')) {
+                return h("span", { class: "stepper-step-custom-icon", innerHTML: sanitizeHTML(step.svgIcon) });
+            }
+            return (h("span", { class: "stepper-step-custom-icon" }, h("ui-icon", { name: step.svgIcon, library: step.iconLibrary || this.iconLibrary, size: "1.25rem" })));
+        }
+        // Image URL icon
+        if (step.iconUrl) {
+            return h("img", { src: step.iconUrl, alt: step.label, class: "stepper-step-image-icon" });
+        }
+        // Custom text/emoji icon
+        if (step.icon) {
+            if (this.iconLibrary === 'lucide') {
+                return h("span", { class: "stepper-step-icon" }, h("ui-icon", { name: step.icon, library: "lucide", size: "1.2em" }));
+            }
+            return h("span", { class: "stepper-step-icon", "aria-hidden": "true" }, step.icon);
+        }
+        // Default: show number or status icon
+        if (this.showNumbers && step.status !== 'active' && step.status !== 'completed' && step.status !== 'success' && step.status !== 'failed') {
+            return h("span", { class: "stepper-step-number", "aria-hidden": "true" }, index + 1);
+        }
+        const statusIcon = this.getStepIcon(step.status);
+        return (h("span", { class: "stepper-step-icon", "aria-hidden": "true" }, h("ui-icon", { name: statusIcon, library: this.iconLibrary === 'default' ? 'lucide' : this.iconLibrary, size: "1.2em" })));
+    }
+    getStepClasses(step, index) {
+        const classes = [
+            'stepper-step',
+            `stepper-step-${this.size}`,
+            `stepper-step-${step.status}`
+        ];
+        if (index === this.activeStep) {
+            classes.push('stepper-step-active');
+        }
+        if (index < this.activeStep) {
+            classes.push('stepper-step-completed');
+        }
+        return classes.join(' ');
+    }
+    parseSteps(input) {
+        if (Array.isArray(input)) {
+            return input;
+        }
+        if (typeof input === 'string' && input.trim().length) {
+            try {
+                const parsed = JSON.parse(input);
+                if (Array.isArray(parsed)) {
+                    return parsed;
+                }
+            }
+            catch (e) {
+                console.warn('ui-stepper: failed to parse steps JSON, using defaults', e);
+            }
+        }
+        // Fallback default steps
+        return [
+            { id: '1', label: 'Step 1', status: 'completed' },
+            { id: '2', label: 'Step 2', status: 'active' },
+            { id: '3', label: 'Step 3', status: 'waiting' },
+            { id: '4', label: 'Step 4', status: 'waiting' },
+        ];
+    }
+    stepsChanged(newVal) {
+        this.normalizedSteps = this.parseSteps(newVal);
+    }
+    componentWillLoad() {
+        this.normalizedSteps = this.parseSteps(this.steps);
+        if (this.normalizedSteps.length === 0 || (this.normalizedSteps.length === 4 && this.normalizedSteps[0].label === 'Step 1')) {
+            const childSteps = this.scanStepsFromChildren();
+            if (childSteps.length > 0) {
+                this.normalizedSteps = childSteps;
+            }
+        }
+        this.updateStepStatuses();
+    }
+    scanStepsFromChildren() {
+        const stepEls = Array.from(this.host.querySelectorAll('ui-step'));
+        return stepEls.map((el, index) => ({
+            id: el.id || `step-${index}`,
+            label: el.stepTitle || el.getAttribute('step-title') || `Step ${index + 1}`,
+            description: el.subtitle || el.getAttribute('subtitle') || '',
+            status: el.status || el.getAttribute('status') || 'pending',
+            icon: el.icon || el.getAttribute('icon') || '',
+            disabled: el.disabled || el.hasAttribute('disabled'),
+            node: el
+        }));
+    }
+    onPrevClick = () => {
+        const idx = Math.max(0, this.activeStep - 1);
+        const step = this.normalizedSteps[idx];
+        this.stepperPrevious.emit({ index: idx, step });
+    };
+    onNextClick = () => {
+        const idx = Math.min(this.normalizedSteps.length - 1, this.activeStep + 1);
+        const step = this.normalizedSteps[idx];
+        this.stepperNext.emit({ index: idx, step });
+    };
+    onFinishClick = () => {
+        const idx = this.activeStep;
+        const step = this.normalizedSteps[idx];
+        this.stepperFinish.emit({ index: idx, step });
+    };
+    onFailClick = () => {
+        const idx = this.activeStep;
+        const step = this.normalizedSteps[idx];
+        this.stepperFail.emit({ index: idx, step });
+    };
+    handleKeyDown = (event) => {
+        if (!this.keyboardNavigation)
+            return;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.prev();
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.normalizedSteps.length - 1);
+                break;
+        }
+    };
+    handleStepClick = (index) => {
+        if (this.flow === 'non-linear' || index <= this.activeStep + 1) {
+            this.goTo(index);
+        }
+    };
+    getProgress() {
+        if (this.normalizedSteps.length === 0)
+            return 0;
+        return Math.round(((this.activeStep + 1) / this.normalizedSteps.length) * 100);
+    }
+    renderSnakeLayout(containerClasses, themeVars) {
+        const stepsPerRow = this.stepsPerPage || 10;
+        const rows = [];
+        for (let i = 0; i < this.normalizedSteps.length; i += stepsPerRow) {
+            rows.push(this.normalizedSteps.slice(i, i + stepsPerRow));
+        }
+        const progress = this.getProgress();
+        return (h("div", { class: `${containerClasses} stepper--snake-layout`, style: themeVars, role: "navigation", "aria-label": "Step progress" }, this.showProgress && (h("div", { class: "stepper-progress-bar", role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { class: "progress-fill", style: { width: `${progress}%` } }), h("span", { class: "progress-text", "aria-live": "polite" }, progress, "% Complete (", this.activeStep + 1, "/", this.normalizedSteps.length, ")"))), h("div", { class: "snake-container" }, rows.map((rowSteps, rowIdx) => {
+            const isEvenRow = rowIdx % 2 === 0;
+            return (h("div", { class: {
+                    'snake-row': true,
+                    'snake-row--even': isEvenRow,
+                    'snake-row--odd': !isEvenRow
+                } }, rowSteps.map((step, stepInRowIdx) => {
+                const globalIdx = rowIdx * stepsPerRow + stepInRowIdx;
+                const isLastInRow = stepInRowIdx === rowSteps.length - 1;
+                const isLastStep = globalIdx === this.normalizedSteps.length - 1;
+                const isClickable = this.flow === 'non-linear' || globalIdx <= this.activeStep;
+                return (h("div", { class: {
+                        'stepper-item': true,
+                        'stepper-item--active': globalIdx === this.activeStep,
+                        'stepper-item--completed': globalIdx < this.activeStep,
+                        'stepper-item--pending': globalIdx > this.activeStep,
+                        'stepper-item--clickable': isClickable,
+                        'has-connector': !isLastInRow,
+                        'has-row-connector': isLastInRow && !isLastStep
+                    }, onClick: () => this.handleStepClick(globalIdx), role: "button", title: step.label }, h("div", { class: "step-icon-wrapper" }, this.isLoading && globalIdx === this.activeStep ? (h("ui-icon", { name: "refresh-cw", class: "fa-spin", library: "lucide", size: "1.2em" })) : (h("span", { class: "step-icon" }, this.renderStepIcon(step, globalIdx)))), !isLastInRow && (h("div", { class: "snake-connector-horizontal" })), isLastInRow && !isLastStep && (h("div", { class: "snake-connector-turn" }))));
+            })));
+        }))));
+    }
+    render() {
+        // Compute effective label position (support legacy labelPlacement)
+        let effectiveLabelPosition = this.labelPosition;
+        if (this.labelPlacement === 'vertical') {
+            effectiveLabelPosition = 'bottom';
+        }
+        const containerClasses = [
+            'stepper-container',
+            `stepper-${this.orientation}`,
+            `stepper-${this.size}`,
+            `stepper--${this.colorScheme}`,
+            this.responsive ? 'stepper-responsive' : '',
+            this.progressDot ? 'stepper-dot' : '',
+            `stepper-label-${effectiveLabelPosition}`,
+            `stepper-variant-${this.variant}`,
+            this.animated ? 'stepper--animated' : '',
+            this.clickable ? 'stepper--clickable' : '',
+            this.compact ? 'stepper--compact' : '',
+            this.scrollable ? 'stepper--scrollable' : '',
+            `stepper-shape-${this.stepShape}`
+        ].join(' ');
+        const themeVars = this.theme ? {
+            '--stepper-primary-color': this.theme.primaryColor,
+            '--stepper-secondary-color': this.theme.secondaryColor,
+            '--stepper-success-color': this.theme.successColor,
+            '--stepper-error-color': this.theme.errorColor,
+            '--stepper-warning-color': this.theme.warningColor,
+            '--stepper-info-color': this.theme.infoColor,
+            '--stepper-text-color': this.theme.textColor,
+            '--stepper-background-color': this.theme.backgroundColor,
+            '--stepper-border-color': this.theme.borderColor,
+            '--stepper-font-size': this.theme.fontSize,
+            '--stepper-font-family': this.theme.fontFamily,
+        } : {};
+        if (this.iconLineWidth)
+            themeVars['--icon-line-width'] = this.iconLineWidth;
+        if (this.iconLineHeight)
+            themeVars['--icon-line-height'] = this.iconLineHeight;
+        if (this.iconLineFlex !== undefined)
+            themeVars['--icon-line-flex'] = this.iconLineFlex.toString();
+        // Use special snake layout rendering for snack variant
+        if (this.variant === 'snack' && this.orientation === 'horizontal') {
+            return this.renderSnakeLayout(containerClasses, themeVars);
+        }
+        const progress = this.getProgress();
+        return (h("div", { class: containerClasses, style: themeVars, role: "tablist", "aria-orientation": this.orientation, "aria-label": "Step navigation", tabindex: this.keyboardNavigation ? 0 : -1, onKeyDown: this.handleKeyDown }, this.showProgress && (h("div", { class: "stepper-progress-bar", role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { class: "progress-fill", style: { width: `${progress}%` } }), h("span", { class: "progress-text", "aria-live": "polite" }, progress, "% Complete (", this.activeStep + 1, "/", this.normalizedSteps.length, ")"))), this.scrollable && this.orientation === 'horizontal' && (h("div", { class: "scroll-indicator scroll-indicator--left" })), h("div", { class: "steps-wrapper", role: "list", style: { display: 'flex', flexDirection: this.orientation === 'horizontal' ? 'row' : 'column', width: '100%' } }, this.normalizedSteps.map((step, index) => {
+            const isLast = index === this.normalizedSteps.length - 1;
+            const isClickable = this.flow === 'non-linear' || index <= this.activeStep;
+            const connectorStatus = (step.status === 'completed' || step.status === 'success')
+                ? 'completed'
+                : step.status === 'failed'
+                    ? 'failed'
+                    : step.status === 'active'
+                        ? 'active'
+                        : 'pending';
+            const stepClasses = [
+                ...this.getStepClasses(step, index).split(' '),
+                isClickable ? 'stepper-step-clickable' : '',
+                this.validationErrors.has(String(step.id)) ? 'stepper-step-error' : ''
+            ].filter(Boolean).join(' ');
+            return (h("div", { key: step.id, class: stepClasses, style: { position: 'relative' }, role: "tab", "aria-selected": index === this.activeStep, "aria-controls": `step-panel-${step.id}`, "aria-disabled": !isClickable, tabindex: isClickable ? 0 : -1, onClick: () => this.handleStepClick(index), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.handleStepClick(index);
+                    }
+                } }, h("div", { class: "stepper-step-wrapper" }, h("div", { class: "stepper-step-indicator", style: { position: 'relative' }, "aria-label": `Step ${index + 1}: ${step.label} - ${step.status}` }, step.percent !== undefined && step.status === 'active' && !this.progressDot ? (this.renderProgressCircle(step.percent)) : this.progressDot ? (h("span", { class: "stepper-dot-inner", "aria-hidden": "true" })) : (this.renderStepIcon(step, index))), this.orientation === 'vertical' && !isLast && (h("span", { class: `stepper-connector stepper-connector-${this.orientation} stepper-connector-${connectorStatus}`, "aria-hidden": "true" })), this.orientation === 'horizontal' ? (h("div", { class: "stepper-step-content stepper-step-content-horizontal" }, h("div", { class: "stepper-step-title" }, h("div", { class: "stepper-step-label" }, step.node && step.node.renderContent ? step.node.renderContent() : step.label), !isLast && effectiveLabelPosition !== 'top' && effectiveLabelPosition !== 'bottom' && (h("span", { class: `stepper-connector stepper-connector-horizontal stepper-connector-${connectorStatus}`, "aria-hidden": "true" }))), this.showDescriptions && step.description && (h("div", { class: "stepper-step-description" }, step.description)), h("div", { class: "stepper-content-slot" }, h("slot", { name: `content-${step.id}` })), this.validationErrors.has(String(step.id)) && (h("div", { class: "stepper-step-error-message", role: "alert" }, this.validationErrors.get(String(step.id)))))) : (h("div", { class: "stepper-step-content" }, h("div", { class: {
+                    'stepper-step-label': true,
+                    'stepper-label-active': index === this.activeStep
+                } }, step.label), this.showDescriptions && step.description && (h("div", { class: "stepper-step-description" }, step.description)), h("div", { class: {
+                    'stepper-content-slot': true,
+                    'stepper-content-active': index === this.activeStep,
+                    'stepper-content-panel': this.variant === 'panel'
+                } }, h("slot", { name: `content-${step.id}` })), this.validationErrors.has(String(step.id)) && (h("div", { class: "stepper-step-error-message", role: "alert" }, this.validationErrors.get(String(step.id)))), step.children && step.children.length > 0 && (h("div", { class: "stepper-sub-steps" }, step.children.map((child, cIdx) => (h("div", { class: `stepper-sub-step stepper-sub-step-${child.status || 'pending'}`, key: child.id || cIdx }, h("span", { class: "sub-step-dot" }), h("span", { class: "sub-step-label" }, child.label)))))))), this.orientation === 'horizontal' && !isLast && (effectiveLabelPosition === 'top' || effectiveLabelPosition === 'bottom') && (h("span", { class: `stepper-connector stepper-connector-horizontal stepper-connector-${connectorStatus}`, "aria-hidden": "true" })))));
+        })), this.scrollable && this.orientation === 'horizontal' && (h("div", { class: "scroll-indicator scroll-indicator--right" })), this.showControls ? (h("div", { class: "stepper-controls", role: "group", "aria-label": "Step controls" }, h("ui-button", { variant: "secondary", size: this.size === 'sm' ? 'sm' : 'md', onClick: this.onPrevClick, disabled: this.activeStep <= 0, ariaLabel: this.labelPrev, label: this.labelPrev }), h("ui-button", { variant: "primary", size: this.size === 'sm' ? 'sm' : 'md', onClick: this.onNextClick, disabled: this.activeStep >= this.normalizedSteps.length - 1, ariaLabel: this.labelNext, label: this.labelNext }), h("ui-button", { variant: "success", size: this.size === 'sm' ? 'sm' : 'md', onClick: this.onFinishClick, ariaLabel: this.labelFinish, label: this.labelFinish }), h("ui-button", { variant: "danger", size: this.size === 'sm' ? 'sm' : 'md', onClick: this.onFailClick, ariaLabel: this.labelFail, label: this.labelFail }))) : null));
+    }
+    static get is() { return "ui-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperStep[] | string",
+                    "resolved": "StepperStep[] | string",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps can be provided as an array or a JSON string in the attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the stepper (horizontal or vertical)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "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 stepper"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "activeStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active step index (0-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-step",
+                "defaultValue": "0"
+            },
+            "showNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-numbers",
+                "defaultValue": "true"
+            },
+            "showDescriptions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step descriptions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-descriptions",
+                "defaultValue": "false"
+            },
+            "showControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show optional control buttons (Next/Previous/Finish/Failed)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-controls",
+                "defaultValue": "false"
+            },
+            "labelPrev": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize control button labels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-prev",
+                "defaultValue": "'Previous'"
+            },
+            "labelNext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-next",
+                "defaultValue": "'Next'"
+            },
+            "labelFinish": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-finish",
+                "defaultValue": "'Finish'"
+            },
+            "labelFail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-fail",
+                "defaultValue": "'Mark Failed'"
+            },
+            "customIcons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key in StepperStepStatus]?: string }",
+                    "resolved": "{ disabled?: string; info?: string; error?: string; success?: string; pending?: string; warning?: string; active?: string; completed?: string; failed?: string; waiting?: string; \"in-progress\"?: string; }",
+                    "references": {
+                        "StepperStepStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStepStatus",
+                            "referenceLocation": "StepperStepStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon for each status (optional)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "flow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperFlow",
+                    "resolved": "\"linear\" | \"non-linear\"",
+                    "references": {
+                        "StepperFlow": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperFlow",
+                            "referenceLocation": "StepperFlow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flow type: linear or non-linear"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow",
+                "defaultValue": "'linear'"
+            },
+            "shadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use Shadow DOM"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shadow",
+                "defaultValue": "true"
+            },
+            "theme": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperTheme",
+                    "resolved": "StepperTheme",
+                    "references": {
+                        "StepperTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperTheme",
+                            "referenceLocation": "StepperTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme configuration with CSS variables"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "keyboardNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-navigation",
+                "defaultValue": "true"
+            },
+            "responsive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable responsive collapse/overflow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive",
+                "defaultValue": "true"
+            },
+            "maxVisibleSteps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of steps to show before collapsing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-steps",
+                "defaultValue": "5"
+            },
+            "progressDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-dot",
+                "defaultValue": "false"
+            },
+            "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": "Default library for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label placement (horizontal or vertical) - DEPRECATED: use labelPosition instead"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-placement",
+                "defaultValue": "'horizontal'"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"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": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label position relative to step indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'navigation' | 'panel' | 'inline' | 'outlined' | 'filled' | 'minimal' | 'snack'",
+                    "resolved": "\"default\" | \"filled\" | \"inline\" | \"minimal\" | \"navigation\" | \"outlined\" | \"panel\" | \"snack\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stepper variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "colorScheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-scheme",
+                "defaultValue": "'primary'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            },
+            "validateBeforeNext": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(stepIndex: number) => Promise<boolean> | boolean",
+                    "resolved": "(stepIndex: number) => boolean | Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "768"
+            },
+            "allowStepClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-step-click",
+                "defaultValue": "true"
+            },
+            "showTooltips": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltips",
+                "defaultValue": "true"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "stepsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-per-page",
+                "defaultValue": "0"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "true"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "iconLineWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-line-width"
+            },
+            "iconLineHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-line-height"
+            },
+            "iconLineFlex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-line-flex"
+            },
+            "stepShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'square-active'",
+                    "resolved": "\"circle\" | \"square\" | \"square-active\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of the step indicator (circle, square, or square-active)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-shape",
+                "defaultValue": "'circle'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "normalizedSteps": {},
+            "validationErrors": {},
+            "isMobile": {},
+            "isLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stepperPrevious",
+                "name": "stepperPrevious",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Events emitted when control buttons are clicked"
+                },
+                "complexType": {
+                    "original": "{ index: number, step: StepperStep }",
+                    "resolved": "{ index: number; step: StepperStep; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepperNext",
+                "name": "stepperNext",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: StepperStep }",
+                    "resolved": "{ index: number; step: StepperStep; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepperFinish",
+                "name": "stepperFinish",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: StepperStep }",
+                    "resolved": "{ index: number; step: StepperStep; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepperFail",
+                "name": "stepperFail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: StepperStep }",
+                    "resolved": "{ index: number; step: StepperStep; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepperChange",
+                "name": "stepperChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when active step changes"
+                },
+                "complexType": {
+                    "original": "{ index: number; step: StepperStep; previousIndex: number }",
+                    "resolved": "{ index: number; step: StepperStep; previousIndex: number; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepperValidationError",
+                "name": "stepperValidationError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when validation fails"
+                },
+                "complexType": {
+                    "original": "{ index: number; step: StepperStep; error: string }",
+                    "resolved": "{ index: number; step: StepperStep; error: string; }",
+                    "references": {
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "progressUpdate",
+                "name": "progressUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "stepValidation",
+                "name": "stepValidation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ step: number; valid: boolean }",
+                    "resolved": "{ step: number; valid: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "stepLoading",
+                "name": "stepLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "next": {
+                "complexType": {
+                    "signature": "(options?: StepperNavigationOptions) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "StepperNavigationOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepperNavigationOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperNavigationOptions",
+                            "referenceLocation": "StepperNavigationOptions"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Programmatic API: Go to next step",
+                    "tags": []
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "(options?: StepperNavigationOptions) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "StepperNavigationOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepperNavigationOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperNavigationOptions",
+                            "referenceLocation": "StepperNavigationOptions"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Programmatic API: Go to previous step",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(stepIndex: number, options?: StepperNavigationOptions) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "stepIndex",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "options",
+                            "type": "StepperNavigationOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepperNavigationOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperNavigationOptions",
+                            "referenceLocation": "StepperNavigationOptions"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Programmatic API: Go to specific step",
+                    "tags": []
+                }
+            },
+            "complete": {
+                "complexType": {
+                    "signature": "(stepIndex?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "stepIndex",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatic API: Mark step as completed",
+                    "tags": []
+                }
+            },
+            "fail": {
+                "complexType": {
+                    "signature": "(stepIndex?: number, errorMessage?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "stepIndex",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "errorMessage",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatic API: Mark step as failed",
+                    "tags": []
+                }
+            },
+            "getCurrentStep": {
+                "complexType": {
+                    "signature": "() => Promise<StepperStep | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    },
+                    "return": "Promise<StepperStep>"
+                },
+                "docs": {
+                    "text": "Get current step",
+                    "tags": []
+                }
+            },
+            "getSteps": {
+                "complexType": {
+                    "signature": "() => Promise<StepperStep[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepperStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/stepper/types.ts::StepperStep",
+                            "referenceLocation": "StepperStep"
+                        }
+                    },
+                    "return": "Promise<StepperStep[]>"
+                },
+                "docs": {
+                    "text": "Get all steps",
+                    "tags": []
+                }
+            },
+            "validateCurrentStep": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validate current step",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStepChange"
+            }, {
+                "propName": "steps",
+                "methodName": "stepsChanged"
+            }];
+    }
+}