tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/wizard.js

@@ -3,440 +3,440 @@ import { wizardStyles } from '../styles/wizard.js';
 const eventHandlers = new WeakMap();
 const resizeObservers = new WeakMap();
 function getWizardAttributes(el) {
-    return {
-        width: el.getAttribute('width') || '100%',
-        height: el.getAttribute('height') || '700px',
-        active: el.getAttribute('active'),
-        completed: el.getAttribute('completed') || '',
-        orientation: (el.getAttribute('orientation') || 'horizontal'),
-    };
+return {
+width: el.getAttribute('width') || '100%',
+height: el.getAttribute('height') || '700px',
+active: el.getAttribute('active'),
+completed: el.getAttribute('completed') || '',
+orientation: (el.getAttribute('orientation') || 'horizontal'),
+};
 }
 function getChildSteps(el) {
-    return Array.from(el.querySelectorAll('ty-step'));
+return Array.from(el.querySelectorAll('ty-step'));
 }
 function getStepId(step) {
-    return step.getAttribute('id');
+return step.getAttribute('id');
 }
 function getCompletedStepIds(el) {
-    const completedAttr = el.getAttribute('completed') || '';
-    if (!completedAttr.trim())
-        return new Set();
-    return new Set(completedAttr.split(',').map(id => id.trim()).filter(Boolean));
+const completedAttr = el.getAttribute('completed') || '';
+if (!completedAttr.trim())
+return new Set();
+return new Set(completedAttr.split(',').map(id => id.trim()).filter(Boolean));
 }
 function hasCustomIndicator(wizardEl, stepId) {
-    return wizardEl.querySelector(`[slot='indicator-${stepId}']`) !== null;
+return wizardEl.querySelector(`[slot='indicator-${stepId}']`) !== null;
 }
 function isStepDisabled(step) {
-    return step.hasAttribute('disabled');
+return step.hasAttribute('disabled');
 }
 function findStepIndex(steps, stepId) {
-    const index = steps.findIndex(step => getStepId(step) === stepId);
-    return index >= 0 ? index : undefined;
+const index = steps.findIndex(step => getStepId(step) === stepId);
+return index >= 0 ? index : undefined;
 }
 function getActiveStepId(el, steps) {
-    const activeAttr = el.getAttribute('active');
-    if (activeAttr && findStepIndex(steps, activeAttr) !== undefined) {
-        return activeAttr;
-    }
-    if (steps.length > 0) {
-        return getStepId(steps[0]);
-    }
-    return null;
+const activeAttr = el.getAttribute('active');
+if (activeAttr && findStepIndex(steps, activeAttr) !== undefined) {
+return activeAttr;
+}
+if (steps.length > 0) {
+return getStepId(steps[0]);
+}
+return null;
 }
 function setActiveStep(el, stepId) {
-    el.setAttribute('active', stepId);
+el.setAttribute('active', stepId);
 }
 function calculateProgressPercent(steps, activeId, completedIds) {
-    if (steps.length <= 1 || !activeId)
-        return 0;
-    const activeIndex = steps.findIndex(s => getStepId(s) === activeId);
-    return (activeIndex / (steps.length - 1)) * 100;
+if (steps.length <= 1 || !activeId)
+return 0;
+const activeIndex = steps.findIndex(s => getStepId(s) === activeId);
+return (activeIndex / (steps.length - 1)) * 100;
 }
 function dispatchStepChangeEvent(el, activeId, activeIndex, previousId, previousIndex) {
-    const direction = previousIndex === null ? 'none'
-        : activeIndex > previousIndex ? 'forward'
-            : activeIndex < previousIndex ? 'backward'
-                : 'none';
-    const event = new CustomEvent('ty-wizard-step-change', {
-        detail: {
-            activeId,
-            activeIndex,
-            previousId,
-            previousIndex,
-            direction,
-        },
-        bubbles: true,
-        cancelable: false,
-    });
-    el.dispatchEvent(event);
+const direction = previousIndex === null ? 'none'
+: activeIndex > previousIndex ? 'forward'
+: activeIndex < previousIndex ? 'backward'
+: 'none';
+const event = new CustomEvent('ty-wizard-step-change', {
+detail: {
+activeId,
+activeIndex,
+previousId,
+previousIndex,
+direction,
+},
+bubbles: true,
+cancelable: false,
+});
+el.dispatchEvent(event);
 }
 function handleStepClick(el, stepId, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const steps = getChildSteps(el);
-    const targetIndex = steps.findIndex(s => getStepId(s) === stepId);
-    if (targetIndex < 0)
-        return;
-    const currentActive = getActiveStepId(el, steps);
-    const currentIndex = currentActive ? findStepIndex(steps, currentActive) ?? null : null;
-    const direction = currentIndex === null ? 'none'
-        : targetIndex > currentIndex ? 'forward'
-            : targetIndex < currentIndex ? 'backward'
-                : 'none';
-    const event2 = new CustomEvent('ty-wizard-step-change', {
-        detail: {
-            activeId: stepId,
-            activeIndex: targetIndex,
-            previousId: currentActive,
-            previousIndex: currentIndex,
-            direction,
-        },
-        bubbles: true,
-        cancelable: false,
-    });
-    el.dispatchEvent(event2);
+event.preventDefault();
+event.stopPropagation();
+const steps = getChildSteps(el);
+const targetIndex = steps.findIndex(s => getStepId(s) === stepId);
+if (targetIndex < 0)
+return;
+const currentActive = getActiveStepId(el, steps);
+const currentIndex = currentActive ? findStepIndex(steps, currentActive) ?? null : null;
+const direction = currentIndex === null ? 'none'
+: targetIndex > currentIndex ? 'forward'
+: targetIndex < currentIndex ? 'backward'
+: 'none';
+const event2 = new CustomEvent('ty-wizard-step-change', {
+detail: {
+activeId: stepId,
+activeIndex: targetIndex,
+previousId: currentActive,
+previousIndex: currentIndex,
+direction,
+},
+bubbles: true,
+cancelable: false,
+});
+el.dispatchEvent(event2);
 }
 function cleanupEventListeners(el) {
-    const handlers = eventHandlers.get(el);
-    if (!handlers)
-        return;
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    handlers.stepClickHandlers.forEach((handler, stepId) => {
-        const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
-        if (button) {
-            button.removeEventListener('pointerdown', handler);
-        }
-    });
-    handlers.stepClickHandlers.clear();
+const handlers = eventHandlers.get(el);
+if (!handlers)
+return;
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+handlers.stepClickHandlers.forEach((handler, stepId) => {
+const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
+if (button) {
+button.removeEventListener('pointerdown', handler);
+}
+});
+handlers.stepClickHandlers.clear();
 }
 function setupEventListeners(el, shadowRoot, steps) {
-    cleanupEventListeners(el);
-    const handlers = {
-        stepClickHandlers: new Map(),
-    };
-    steps.forEach((step) => {
-        const stepId = getStepId(step);
-        if (!stepId)
-            return;
-        const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
-        if (button) {
-            const handler = (e) => handleStepClick(el, stepId, e);
-            button.addEventListener('pointerdown', handler);
-            handlers.stepClickHandlers.set(stepId, handler);
-        }
-    });
-    eventHandlers.set(el, handlers);
+cleanupEventListeners(el);
+const handlers = {
+stepClickHandlers: new Map(),
+};
+steps.forEach((step) => {
+const stepId = getStepId(step);
+if (!stepId)
+return;
+const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
+if (button) {
+const handler = (e) => handleStepClick(el, stepId, e);
+button.addEventListener('pointerdown', handler);
+handlers.stepClickHandlers.set(stepId, handler);
+}
+});
+eventHandlers.set(el, handlers);
 }
 function updateTransform(el, activeIndex) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
-    if (!panelsWrapper)
-        return;
-    const containerWidth = el.offsetWidth;
-    const offsetPx = activeIndex * containerWidth;
-    panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
+if (!panelsWrapper)
+return;
+const containerWidth = el.offsetWidth;
+const offsetPx = activeIndex * containerWidth;
+panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
 }
 function updateProgressLine(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const progressOverlay = shadowRoot.querySelector('.progress-overlay');
-    if (!progressOverlay)
-        return;
-    const steps = getChildSteps(el);
-    const activeId = getActiveStepId(el, steps);
-    const completedIds = getCompletedStepIds(el);
-    const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
-    progressOverlay.style.width = `${progressPercent}%`;
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const progressOverlay = shadowRoot.querySelector('.progress-overlay');
+if (!progressOverlay)
+return;
+const steps = getChildSteps(el);
+const activeId = getActiveStepId(el, steps);
+const completedIds = getCompletedStepIds(el);
+const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
+progressOverlay.style.width = `${progressPercent}%`;
 }
 function updateStepIndicators(el, shadowRoot, activeId) {
-    const steps = getChildSteps(el);
-    const completedIds = getCompletedStepIds(el);
-    const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
-    steps.forEach((step, index) => {
-        const stepId = getStepId(step);
-        if (!stepId)
-            return;
-        const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
-        const circle = shadowRoot.querySelector(`[data-step-id='${stepId}'] .step-circle`);
-        const isActive = stepId === activeId;
-        if (button) {
-            button.setAttribute('aria-selected', String(isActive));
-            button.setAttribute('tabindex', isActive ? '0' : '-1');
-            button.setAttribute('data-active', String(isActive));
-        }
-        if (circle) {
-            const state = getStepStatus(step, stepId, activeId, completedIds);
-            circle.setAttribute('data-state', state);
-        }
-        const slottedIndicator = el.querySelector(`[slot='indicator-${stepId}']`);
-        if (slottedIndicator) {
-            slottedIndicator.setAttribute('data-active', String(isActive));
-        }
-    });
+const steps = getChildSteps(el);
+const completedIds = getCompletedStepIds(el);
+const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
+steps.forEach((step, index) => {
+const stepId = getStepId(step);
+if (!stepId)
+return;
+const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
+const circle = shadowRoot.querySelector(`[data-step-id='${stepId}'] .step-circle`);
+const isActive = stepId === activeId;
+if (button) {
+button.setAttribute('aria-selected', String(isActive));
+button.setAttribute('tabindex', isActive ? '0' : '-1');
+button.setAttribute('data-active', String(isActive));
+}
+if (circle) {
+const state = getStepStatus(step, stepId, activeId, completedIds);
+circle.setAttribute('data-state', state);
+}
+const slottedIndicator = el.querySelector(`[slot='indicator-${stepId}']`);
+if (slottedIndicator) {
+slottedIndicator.setAttribute('data-active', String(isActive));
+}
+});
 }
 function updatePanelInteraction(el, activeId) {
-    const steps = getChildSteps(el);
-    steps.forEach((step) => {
-        const stepId = getStepId(step);
-        if (!stepId)
-            return;
-        const isActive = stepId === activeId;
-        step.setAttribute('data-active', String(isActive));
-        if (isActive) {
-            step.style.pointerEvents = 'auto';
-            step.style.opacity = '1';
-        }
-        else {
-            step.style.pointerEvents = 'none';
-            step.style.opacity = '0';
-        }
-    });
+const steps = getChildSteps(el);
+steps.forEach((step) => {
+const stepId = getStepId(step);
+if (!stepId)
+return;
+const isActive = stepId === activeId;
+step.setAttribute('data-active', String(isActive));
+if (isActive) {
+step.style.pointerEvents = 'auto';
+step.style.opacity = '1';
+}
+else {
+step.style.pointerEvents = 'none';
+step.style.opacity = '0';
+}
+});
 }
 function updateActiveStepState(el, stepId) {
-    const steps = getChildSteps(el);
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const currentActive = getActiveStepId(el, steps);
-    const currentIndex = currentActive ? findStepIndex(steps, currentActive) : undefined;
-    const newIndex = findStepIndex(steps, stepId);
-    if (currentActive === stepId || newIndex === undefined)
-        return;
-    el.style.setProperty('--ty-wizard-active-index', String(newIndex));
-    updateTransform(el, newIndex);
-    updateStepIndicators(el, shadowRoot, stepId);
-    updateProgressLine(el);
-    updatePanelInteraction(el, stepId);
-    const newPanel = steps[newIndex];
-    if (newPanel?.resetScroll) {
-        newPanel.resetScroll();
-    }
-    dispatchStepChangeEvent(el, stepId, newIndex, currentActive, currentIndex ?? null);
+const steps = getChildSteps(el);
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const currentActive = getActiveStepId(el, steps);
+const currentIndex = currentActive ? findStepIndex(steps, currentActive) : undefined;
+const newIndex = findStepIndex(steps, stepId);
+if (currentActive === stepId || newIndex === undefined)
+return;
+el.style.setProperty('--ty-wizard-active-index', String(newIndex));
+updateTransform(el, newIndex);
+updateStepIndicators(el, shadowRoot, stepId);
+updateProgressLine(el);
+updatePanelInteraction(el, stepId);
+const newPanel = steps[newIndex];
+if (newPanel?.resetScroll) {
+newPanel.resetScroll();
+}
+dispatchStepChangeEvent(el, stepId, newIndex, currentActive, currentIndex ?? null);
 }
 function setupResizeObserver(el) {
-    const oldObserver = resizeObservers.get(el);
-    if (oldObserver) {
-        oldObserver.disconnect();
-    }
-    const { width } = getWizardAttributes(el);
-    if (width.includes('%')) {
-        const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const measuredWidth = entry.contentRect.width;
-            const steps = getChildSteps(el);
-            const activeId = getActiveStepId(el, steps);
-            const activeIndex = activeId ? findStepIndex(steps, activeId) : 0;
-            el.style.setProperty('--ty-wizard-width', `${measuredWidth}px`);
-            if (activeIndex !== undefined) {
-                updateTransform(el, activeIndex);
-            }
-        });
-        observer.observe(el);
-        resizeObservers.set(el, observer);
-    }
+const oldObserver = resizeObservers.get(el);
+if (oldObserver) {
+oldObserver.disconnect();
+}
+const { width } = getWizardAttributes(el);
+if (width.includes('%')) {
+const observer = new ResizeObserver((entries) => {
+const entry = entries[0];
+const measuredWidth = entry.contentRect.width;
+const steps = getChildSteps(el);
+const activeId = getActiveStepId(el, steps);
+const activeIndex = activeId ? findStepIndex(steps, activeId) : 0;
+el.style.setProperty('--ty-wizard-width', `${measuredWidth}px`);
+if (activeIndex !== undefined) {
+updateTransform(el, activeIndex);
+}
+});
+observer.observe(el);
+resizeObservers.set(el, observer);
+}
 }
 function cleanupResizeObserver(el) {
-    const observer = resizeObservers.get(el);
-    if (observer) {
-        observer.disconnect();
-        resizeObservers.delete(el);
-    }
+const observer = resizeObservers.get(el);
+if (observer) {
+observer.disconnect();
+resizeObservers.delete(el);
+}
 }
 function getStepStatus(step, stepId, activeId, completedIds) {
-    const explicitStatus = step.getAttribute('status');
-    if (explicitStatus && ['completed', 'active', 'pending', 'error'].includes(explicitStatus)) {
-        return explicitStatus;
-    }
-    const isActive = stepId === activeId;
-    const isCompleted = completedIds.has(stepId);
-    return isCompleted ? 'completed' : isActive ? 'active' : 'pending';
+const explicitStatus = step.getAttribute('status');
+if (explicitStatus && ['completed', 'active', 'pending', 'error'].includes(explicitStatus)) {
+return explicitStatus;
+}
+const isActive = stepId === activeId;
+const isCompleted = completedIds.has(stepId);
+return isCompleted ? 'completed' : isActive ? 'active' : 'pending';
 }
 function renderStepIndicators(wizardEl, steps, activeId, completedIds) {
-    const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
-    const indicators = steps.map((step, index) => {
-        const stepId = getStepId(step);
-        if (!stepId)
-            return '';
-        const label = step.getAttribute('label') || `Step ${index + 1}`;
-        const description = step.getAttribute('description') || '';
-        const disabled = isStepDisabled(step);
-        const isActive = stepId === activeId;
-        const hasCustom = hasCustomIndicator(wizardEl, stepId);
-        const state = getStepStatus(step, stepId, activeId, completedIds);
-        let circleContent = '';
-        if (hasCustom) {
-            circleContent = `<slot name="indicator-${stepId}"></slot>`;
-        }
-        else if (state === 'completed') {
-            circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
-        }
-        else if (state === 'error') {
-            circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
-        }
-        else {
-            circleContent = `<span style="font-size: 12px; font-weight: 700;">${index + 1}</span>`;
-        }
-        return `<button
-      class="step-indicator"
-      role="tab"
-      data-step-id="${stepId}"
-      id="step-${stepId}"
-      aria-selected="${isActive}"
-      tabindex="${isActive ? '0' : '-1'}"
-      data-active="${isActive}"
-      ${disabled ? 'disabled aria-disabled="true"' : ''}
-    >
-      <div class="step-circle" data-state="${state}" part="step-circle">
-        ${circleContent}
-      </div>
-      <div class="step-text">
-        <span class="step-label">${label}</span>
-        ${description ? `<span class="step-description">${description}</span>` : ''}
-      </div>
-    </button>`;
-    }).join('');
-    const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
-    const stepCount = steps.length;
-    return `
-    <div class="step-indicators-wrapper" part="indicators-wrapper">
-      <div class="step-indicators" style="--ty-wizard-step-count: ${stepCount}">
-        <div class="progress-line" part="progress-line" role="progressbar" aria-label="Wizard progress" aria-valuenow="${Math.round(progressPercent)}" aria-valuemin="0" aria-valuemax="100">
-          <div class="progress-overlay" style="width: ${progressPercent}%"></div>
-        </div>
-        <div class="step-tablist" role="tablist" style="display: contents;">
-          ${indicators}
-        </div>
-      </div>
-    </div>
-  `;
+const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
+const indicators = steps.map((step, index) => {
+const stepId = getStepId(step);
+if (!stepId)
+return '';
+const label = step.getAttribute('label') || `Step ${index + 1}`;
+const description = step.getAttribute('description') || '';
+const disabled = isStepDisabled(step);
+const isActive = stepId === activeId;
+const hasCustom = hasCustomIndicator(wizardEl, stepId);
+const state = getStepStatus(step, stepId, activeId, completedIds);
+let circleContent = '';
+if (hasCustom) {
+circleContent = `<slot name="indicator-${stepId}"></slot>`;
+}
+else if (state === 'completed') {
+circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+}
+else if (state === 'error') {
+circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
+}
+else {
+circleContent = `<span style="font-size: 12px; font-weight: 700;">${index + 1}</span>`;
+}
+return `<button
+class="step-indicator"
+role="tab"
+data-step-id="${stepId}"
+id="step-${stepId}"
+aria-selected="${isActive}"
+tabindex="${isActive ? '0' : '-1'}"
+data-active="${isActive}"
+${disabled ? 'disabled aria-disabled="true"' : ''}
+>
+<div class="step-circle" data-state="${state}" part="step-circle">
+${circleContent}
+</div>
+<div class="step-text">
+<span class="step-label">${label}</span>
+${description ? `<span class="step-description">${description}</span>` : ''}
+</div>
+</button>`;
+}).join('');
+const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
+const stepCount = steps.length;
+return `
+<div class="step-indicators-wrapper" part="indicators-wrapper">
+<div class="step-indicators" style="--ty-wizard-step-count: ${stepCount}">
+<div class="progress-line" part="progress-line" role="progressbar" aria-label="Wizard progress" aria-valuenow="${Math.round(progressPercent)}" aria-valuemin="0" aria-valuemax="100">
+<div class="progress-overlay" style="width: ${progressPercent}%"></div>
+</div>
+<div class="step-tablist" role="tablist" style="display: contents;">
+${indicators}
+</div>
+</div>
+</div>
+`;
 }
 function render(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const { width, height } = getWizardAttributes(el);
-    const steps = getChildSteps(el);
-    const activeId = getActiveStepId(el, steps);
-    const activeIndex = activeId ? (findStepIndex(steps, activeId) ?? 0) : 0;
-    const completedIds = getCompletedStepIds(el);
-    steps.forEach((step) => {
-        const stepId = getStepId(step);
-        if (!stepId)
-            return;
-        step.setAttribute('role', 'tabpanel');
-        step.setAttribute('aria-labelledby', `step-${stepId}`);
-        step.setAttribute('tabindex', '0');
-    });
-    const existingContainer = shadowRoot.querySelector('.wizard-container');
-    const existingIndicators = shadowRoot.querySelector('.step-indicators-wrapper');
-    const existingViewport = shadowRoot.querySelector('.panels-viewport');
-    ensureStyles(shadowRoot, { css: wizardStyles, id: 'ty-wizard' });
-    el.style.setProperty('--ty-wizard-width', width.includes('%') ? '100%' : width);
-    el.style.setProperty('--ty-wizard-height', height);
-    el.style.setProperty('--ty-wizard-active-index', String(activeIndex));
-    el.style.setProperty('--ty-wizard-step-count', String(steps.length));
-    if (existingContainer && existingIndicators && existingViewport) {
-        existingIndicators.remove();
-        const newIndicatorsHtml = renderStepIndicators(el, steps, activeId, completedIds);
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = newIndicatorsHtml;
-        existingContainer.insertBefore(tempDiv.firstElementChild, existingViewport);
-        setupEventListeners(el, shadowRoot, steps);
-        updateStepIndicators(el, shadowRoot, activeId || '');
-        requestAnimationFrame(() => {
-            const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
-            if (indicators) {
-                const indicatorsHeight = indicators.offsetHeight;
-                el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
-            }
-            updateTransform(el, activeIndex);
-            updateProgressLine(el);
-        });
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-    }
-    else {
-        shadowRoot.innerHTML = `
-      <div class="wizard-container">
-        ${renderStepIndicators(el, steps, activeId, completedIds)}
-        <div class="panels-viewport" part="panels-container">
-          <div class="panels-wrapper">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-        requestAnimationFrame(() => {
-            const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
-            if (indicators) {
-                const indicatorsHeight = indicators.offsetHeight;
-                el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
-            }
-            updateTransform(el, activeIndex);
-            updateProgressLine(el);
-        });
-        setupEventListeners(el, shadowRoot, steps);
-        updateStepIndicators(el, shadowRoot, activeId || '');
-        setupResizeObserver(el);
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-    }
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const { width, height } = getWizardAttributes(el);
+const steps = getChildSteps(el);
+const activeId = getActiveStepId(el, steps);
+const activeIndex = activeId ? (findStepIndex(steps, activeId) ?? 0) : 0;
+const completedIds = getCompletedStepIds(el);
+steps.forEach((step) => {
+const stepId = getStepId(step);
+if (!stepId)
+return;
+step.setAttribute('role', 'tabpanel');
+step.setAttribute('aria-labelledby', `step-${stepId}`);
+step.setAttribute('tabindex', '0');
+});
+const existingContainer = shadowRoot.querySelector('.wizard-container');
+const existingIndicators = shadowRoot.querySelector('.step-indicators-wrapper');
+const existingViewport = shadowRoot.querySelector('.panels-viewport');
+ensureStyles(shadowRoot, { css: wizardStyles, id: 'ty-wizard' });
+el.style.setProperty('--ty-wizard-width', width.includes('%') ? '100%' : width);
+el.style.setProperty('--ty-wizard-height', height);
+el.style.setProperty('--ty-wizard-active-index', String(activeIndex));
+el.style.setProperty('--ty-wizard-step-count', String(steps.length));
+if (existingContainer && existingIndicators && existingViewport) {
+existingIndicators.remove();
+const newIndicatorsHtml = renderStepIndicators(el, steps, activeId, completedIds);
+const tempDiv = document.createElement('div');
+tempDiv.innerHTML = newIndicatorsHtml;
+existingContainer.insertBefore(tempDiv.firstElementChild, existingViewport);
+setupEventListeners(el, shadowRoot, steps);
+updateStepIndicators(el, shadowRoot, activeId || '');
+requestAnimationFrame(() => {
+const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
+if (indicators) {
+const indicatorsHeight = indicators.offsetHeight;
+el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
+}
+updateTransform(el, activeIndex);
+updateProgressLine(el);
+});
+if (activeId) {
+updatePanelInteraction(el, activeId);
+}
+}
+else {
+shadowRoot.innerHTML = `
+<div class="wizard-container">
+${renderStepIndicators(el, steps, activeId, completedIds)}
+<div class="panels-viewport" part="panels-container">
+<div class="panels-wrapper">
+<slot></slot>
+</div>
+</div>
+</div>
+`;
+requestAnimationFrame(() => {
+const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
+if (indicators) {
+const indicatorsHeight = indicators.offsetHeight;
+el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
+}
+updateTransform(el, activeIndex);
+updateProgressLine(el);
+});
+setupEventListeners(el, shadowRoot, steps);
+updateStepIndicators(el, shadowRoot, activeId || '');
+setupResizeObserver(el);
+if (activeId) {
+updatePanelInteraction(el, activeId);
+}
+}
 }
 function cleanup(el) {
-    cleanupEventListeners(el);
-    cleanupResizeObserver(el);
+cleanupEventListeners(el);
+cleanupResizeObserver(el);
 }
 export class TyWizard extends HTMLElement {
-    static get observedAttributes() {
-        return ['width', 'height', 'active', 'completed', 'orientation'];
-    }
-    constructor() {
-        super();
-        this._childObserver = null;
-        this._childRenderQueued = false;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        render(this);
-        this._childObserver = new MutationObserver(() => {
-            if (this._childRenderQueued)
-                return;
-            this._childRenderQueued = true;
-            queueMicrotask(() => {
-                this._childRenderQueued = false;
-                if (this.isConnected)
-                    render(this);
-            });
-        });
-        this._childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this._childObserver?.disconnect();
-        this._childObserver = null;
-        cleanup(this);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'active') {
-            if (newValue) {
-                updateActiveStepState(this, newValue);
-            }
-            render(this);
-        }
-        else if (name === 'completed') {
-            render(this);
-        }
-        else {
-            render(this);
-        }
-    }
+static get observedAttributes() {
+return ['width', 'height', 'active', 'completed', 'orientation'];
+}
+constructor() {
+super();
+this._childObserver = null;
+this._childRenderQueued = false;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+render(this);
+this._childObserver = new MutationObserver(() => {
+if (this._childRenderQueued)
+return;
+this._childRenderQueued = true;
+queueMicrotask(() => {
+this._childRenderQueued = false;
+if (this.isConnected)
+render(this);
+});
+});
+this._childObserver.observe(this, { childList: true });
+}
+disconnectedCallback() {
+this._childObserver?.disconnect();
+this._childObserver = null;
+cleanup(this);
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (name === 'active') {
+if (newValue) {
+updateActiveStepState(this, newValue);
+}
+render(this);
+}
+else if (name === 'completed') {
+render(this);
+}
+else {
+render(this);
+}
+}
 }
 if (!customElements.get('ty-wizard')) {
-    customElements.define('ty-wizard', TyWizard);
+customElements.define('ty-wizard', TyWizard);
 }