/** * Wizard Component Styles * * CSS Parts (for styling via ::part): * - indicators-wrapper: The header containing step indicators * - progress-line: The background progress track * - step-circle: Individual step circle indicators * - panels-container: The content viewport * * Theming — two override granularities: * * 1. Accent aliases (broad retheming — one variable shifts a whole state): * --ty-wizard-active-accent, --ty-wizard-completed-accent, * --ty-wizard-error-accent, --ty-wizard-pending-accent * * 2. Fine-grained tokens (surgical control — see :host block below): * --ty-wizard-{region}-{property} */ export declare const wizardStyles = "\n/* ============================================================================\n Theming Tokens\n All defaults chain back to global --ty-color-* / --ty-surface-* tokens.\n Override on the host element or a wrapping container.\n ============================================================================ */\n\n:host {\n display: block;\n width: var(--ty-wizard-width, 100%); /* set by width attribute \u2014 not a public token */\n height: var(--ty-wizard-height, 700px); /* set by height attribute \u2014 not a public token */\n box-sizing: border-box;\n\n /* Accent aliases \u2014 override one to shift the matching circle, glow, and progress fill */\n --ty-wizard-active-accent: var(--ty-color-primary);\n --ty-wizard-completed-accent: var(--ty-color-success);\n --ty-wizard-error-accent: var(--ty-color-danger);\n --ty-wizard-pending-accent: var(--ty-color-neutral);\n\n /* Container */\n --ty-wizard-bg: var(--ty-surface-floating);\n --ty-wizard-border: var(--ty-border);\n --ty-wizard-radius: 12px;\n --ty-wizard-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n\n /* Header strip */\n --ty-wizard-header-bg: var(--ty-surface-content);\n --ty-wizard-header-border: var(--ty-border-soft, var(--ty-border));\n --ty-wizard-header-padding: 24px 24px 16px;\n\n /* Progress line */\n --ty-wizard-progress-track: var(--ty-border);\n --ty-wizard-progress-fill: var(--ty-wizard-completed-accent);\n --ty-wizard-progress-height: 2px;\n\n /* Transitions */\n --ty-wizard-transition-duration: 300ms;\n --ty-wizard-transition-easing: ease-in-out;\n\n /* Circle geometry */\n --ty-wizard-circle-size: 32px;\n --ty-wizard-circle-border-width: 2px;\n\n /* Step circle \u2014 completed */\n --ty-wizard-completed-bg: var(--ty-wizard-completed-accent);\n --ty-wizard-completed-border: var(--ty-color-success-strong);\n --ty-wizard-completed-color: white;\n --ty-wizard-completed-glow: color-mix(in srgb, var(--ty-wizard-completed-accent) 10%, transparent);\n\n /* Step circle \u2014 active */\n --ty-wizard-active-bg: var(--ty-wizard-active-accent);\n --ty-wizard-active-border: var(--ty-color-primary-strong);\n --ty-wizard-active-color: white;\n --ty-wizard-active-glow: color-mix(in srgb, var(--ty-wizard-active-accent) 10%, transparent);\n\n /* Step circle \u2014 pending */\n --ty-wizard-pending-bg: var(--ty-surface-elevated);\n --ty-wizard-pending-border: var(--ty-border);\n --ty-wizard-pending-color: var(--ty-text-soft);\n\n /* Step circle \u2014 error */\n --ty-wizard-error-bg: var(--ty-wizard-error-accent);\n --ty-wizard-error-border: var(--ty-color-danger-strong);\n --ty-wizard-error-color: white;\n --ty-wizard-error-glow: color-mix(in srgb, var(--ty-wizard-error-accent) 10%, transparent);\n\n /* Labels */\n --ty-wizard-label-color: var(--ty-text);\n --ty-wizard-label-active-color: var(--ty-text-strong);\n --ty-wizard-label-inactive-color: var(--ty-text-soft);\n --ty-wizard-label-size: var(--ty-font-sm, 14px);\n --ty-wizard-label-weight: var(--ty-font-semibold, 600);\n\n /* Descriptions */\n --ty-wizard-description-color: var(--ty-text-soft);\n --ty-wizard-description-active-color: var(--ty-text);\n --ty-wizard-description-size: var(--ty-font-xs, 12px);\n\n /* Panels viewport */\n --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n /* Focus */\n --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\n}\n\n.wizard-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n border-radius: var(--ty-wizard-radius);\n border: 1px solid var(--ty-wizard-border);\n background: var(--ty-wizard-bg);\n box-shadow: var(--ty-wizard-shadow);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: var(--ty-wizard-header-padding);\n border-bottom: 1px solid var(--ty-wizard-header-border);\n background: var(--ty-wizard-header-bg);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* ===================================== */\n\n.progress-line {\n position: absolute;\n /*\n * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n * Circle centers sit at 50%/N from the left edge of each indicator.\n * Inset = 50% / step-count from each side keeps the line between circle centres.\n */\n left: calc(50% / var(--ty-wizard-step-count, 4));\n right: calc(50% / var(--ty-wizard-step-count, 4));\n top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n height: var(--ty-wizard-progress-height);\n background: var(--ty-wizard-progress-track);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-wizard-progress-fill);\n transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n display: flex;\n align-items: flex-start;\n position: relative;\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* ===================================== */\n\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font: inherit;\n transition: opacity 200ms;\n flex: 1;\n min-width: 0;\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n outline: 2px solid var(--ty-wizard-focus-outline);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle */\n/* ===================================== */\n\n.step-circle {\n width: var(--ty-wizard-circle-size);\n height: var(--ty-wizard-circle-size);\n border-radius: 50%;\n border: var(--ty-wizard-circle-border-width) solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.step-circle[data-state=\"completed\"] {\n background: var(--ty-wizard-completed-bg);\n border-color: var(--ty-wizard-completed-border);\n color: var(--ty-wizard-completed-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-completed-glow);\n}\n\n.step-circle[data-state=\"active\"] {\n background: var(--ty-wizard-active-bg);\n border-color: var(--ty-wizard-active-border);\n color: var(--ty-wizard-active-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-active-glow);\n}\n\n.step-circle[data-state=\"pending\"] {\n background: var(--ty-wizard-pending-bg);\n border-color: var(--ty-wizard-pending-border);\n color: var(--ty-wizard-pending-color);\n}\n\n.step-circle[data-state=\"error\"] {\n background: var(--ty-wizard-error-bg);\n border-color: var(--ty-wizard-error-border);\n color: var(--ty-wizard-error-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-error-glow);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* ===================================== */\n\n.step-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}\n\n/* ===================================== */\n/* Step Label */\n/* ===================================== */\n\n.step-label {\n font-size: var(--ty-wizard-label-size);\n font-weight: var(--ty-wizard-label-weight);\n color: var(--ty-wizard-label-color);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n color: var(--ty-wizard-label-active-color);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n color: var(--ty-wizard-label-inactive-color);\n}\n\n/* ===================================== */\n/* Step Description */\n/* ===================================== */\n\n.step-description {\n font-size: var(--ty-wizard-description-size);\n font-weight: var(--ty-font-normal, 400);\n color: var(--ty-wizard-description-color);\n transition: color 200ms;\n text-align: center;\n max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n color: var(--ty-wizard-description-active-color);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^=\"indicator-\"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--ty-wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .progress-overlay {\n transition-duration: 0ms !important;\n }\n\n .step-circle {\n transition-duration: 0ms !important;\n }\n\n .progress-line {\n transition-duration: 0ms !important;\n }\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n"; //# sourceMappingURL=wizard.d.ts.map