tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/wizard.d.ts

@@ -1,25 +1,9 @@
 /**
  * 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: four accent-alias knobs (one per state), four surface knobs
- * (container chrome), and a small set of geometry/motion overrides.
- *
- * Per-state circles read their colors directly from the matching accent
- * variable — no per-state `-bg` indirection. Override one of:
- *   --ty-wizard-active-accent     (default: --ty-color-primary)
- *   --ty-wizard-completed-accent  (default: --ty-color-success)
- *   --ty-wizard-error-accent      (default: --ty-color-danger)
- *   --ty-wizard-pending-accent    (default: --ty-color-neutral)
- *
- * For per-shade fine control, override the brand-layer's flavor seeds
- * (--ty-color-primary, --ty-color-success-strong, etc.) — they cascade
- * through here.
+ * CSS Parts (::part): indicators-wrapper, progress-line, step-circle,
+ * panels-container. Theming knobs are declared on :host below; per-state
+ * circles read the matching accent var directly (no `-bg` indirection), and
+ * the brand-layer flavor seeds cascade through for per-shade control.
  */
-export declare const wizardStyles = "\n/* ============================================================================\n   Theming Tokens \u2014 see file header for the override surface.\n   Every default chains back to the brand layer / global scale tokens.\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  /* State accents \u2014 the primary override surface. One variable retints the\n   * matching circle background, border, and glow. */\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 chrome \u2014 routes through global scales. Override --ty-radius-lg\n   * or --ty-shadow-md app-wide and the wizard follows; override these locally\n   * to give the wizard a distinct look. */\n  --ty-wizard-bg:     var(--ty-surface-floating);\n  --ty-wizard-border: var(--ty-border);\n  --ty-wizard-radius: var(--ty-radius-lg, 12px);\n  --ty-wizard-shadow: var(--ty-shadow-md, 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  /* Motion \u2014 routes through global motion tokens if defined. */\n  --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n  --ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);\n\n  /* Circle geometry */\n  --ty-wizard-circle-size:         32px;\n  --ty-wizard-circle-border-width: 2px;\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: var(--ty-local-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-accent);\n  border-color: var(--ty-color-success-strong);\n  /* Derived from the accent this circle actually paints, not from\n     --ty-solid-success-fg: the two diverge in dark mode (--ty-solid-l\n     dims solid fills by 0.25 L), which stranded white text at 3.5:1. */\n  color: oklch(\n    from var(--ty-wizard-completed-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-wizard-active-accent);\n  border-color: var(--ty-color-primary-strong);\n  color: oklch(\n    from var(--ty-wizard-active-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated);\n  border-color: var(--ty-border);\n  color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-wizard-error-accent);\n  border-color: var(--ty-color-danger-strong);\n  color: oklch(\n    from var(--ty-wizard-error-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\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-font-sm, 14px);\n  font-weight: var(--ty-font-semibold, 600);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-transition, color 200ms);\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-color-neutral);\n}\n\n/* ===================================== */\n/* Step Description                      */\n/* ===================================== */\n\n.step-description {\n  font-size: var(--ty-font-xs, 12px);\n  font-weight: var(--ty-font-normal, 400);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-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-color-neutral-bold);\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
+export declare const wizardStyles = "\n/* Theming tokens \u2014 every default chains back to the brand layer / global\n   scale tokens. */\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  /* State accents \u2014 the primary override surface. One variable retints the\n   * matching circle background, border, and glow. */\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 chrome \u2014 routes through global scales. Override --ty-radius-lg\n   * or --ty-shadow-md app-wide and the wizard follows; override these locally\n   * to give the wizard a distinct look. */\n  --ty-wizard-bg:     var(--ty-surface-floating);\n  --ty-wizard-border: var(--ty-border);\n  --ty-wizard-radius: var(--ty-radius-lg, 12px);\n  --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n\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  --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  /* Motion \u2014 routes through global motion tokens if defined. */\n  --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n  --ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);\n\n  --ty-wizard-circle-size:         32px;\n  --ty-wizard-circle-border-width: 2px;\n\n  --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\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.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/* Progress line, behind the step circles */\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.step-indicators {\n  display: flex;\n  align-items: flex-start;\n  position: relative;\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.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: var(--ty-local-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-accent);\n  border-color: var(--ty-color-success-strong);\n  /* Derived from the accent this circle actually paints, not from\n     --ty-solid-success-fg: the two diverge in dark mode (--ty-solid-l\n     dims solid fills by 0.25 L), which stranded white text at 3.5:1. */\n  color: oklch(\n    from var(--ty-wizard-completed-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-wizard-active-accent);\n  border-color: var(--ty-color-primary-strong);\n  color: oklch(\n    from var(--ty-wizard-active-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated);\n  border-color: var(--ty-border);\n  color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-wizard-error-accent);\n  border-color: var(--ty-color-danger-strong);\n  color: oklch(\n    from var(--ty-wizard-error-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n.step-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n}\n\n.step-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: var(--ty-font-semibold, 600);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-transition, color 200ms);\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-color-neutral);\n}\n\n.step-description {\n  font-size: var(--ty-font-xs, 12px);\n  font-weight: var(--ty-font-normal, 400);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-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-color-neutral-bold);\n}\n\n/* Custom indicator content via slots */\n::slotted([slot^=\"indicator-\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\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/* Panels wrapper slides horizontally */\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::slotted(ty-step) {\n  width: var(--ty-wizard-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\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";

package/lib/styles/wizard.js

@@ -1,360 +1,224 @@
-/**
- * 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: four accent-alias knobs (one per state), four surface knobs
- * (container chrome), and a small set of geometry/motion overrides.
- *
- * Per-state circles read their colors directly from the matching accent
- * variable — no per-state `-bg` indirection. Override one of:
- *   --ty-wizard-active-accent     (default: --ty-color-primary)
- *   --ty-wizard-completed-accent  (default: --ty-color-success)
- *   --ty-wizard-error-accent      (default: --ty-color-danger)
- *   --ty-wizard-pending-accent    (default: --ty-color-neutral)
- *
- * For per-shade fine control, override the brand-layer's flavor seeds
- * (--ty-color-primary, --ty-color-success-strong, etc.) — they cascade
- * through here.
- */
 export const wizardStyles = `
-/* ============================================================================
-   Theming Tokens — see file header for the override surface.
-   Every default chains back to the brand layer / global scale tokens.
-   ============================================================================ */
-
 :host {
-  display: block;
-  width: var(--ty-wizard-width, 100%);   /* set by width attribute — not a public token */
-  height: var(--ty-wizard-height, 700px); /* set by height attribute — not a public token */
-  box-sizing: border-box;
-
-  /* State accents — the primary override surface. One variable retints the
-   * matching circle background, border, and glow. */
-  --ty-wizard-active-accent:    var(--ty-color-primary);
-  --ty-wizard-completed-accent: var(--ty-color-success);
-  --ty-wizard-error-accent:     var(--ty-color-danger);
-  --ty-wizard-pending-accent:   var(--ty-color-neutral);
-
-  /* Container chrome — routes through global scales. Override --ty-radius-lg
-   * or --ty-shadow-md app-wide and the wizard follows; override these locally
-   * to give the wizard a distinct look. */
-  --ty-wizard-bg:     var(--ty-surface-floating);
-  --ty-wizard-border: var(--ty-border);
-  --ty-wizard-radius: var(--ty-radius-lg, 12px);
-  --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
-
-  /* Header strip */
-  --ty-wizard-header-bg:      var(--ty-surface-content);
-  --ty-wizard-header-border:  var(--ty-border-soft, var(--ty-border));
-  --ty-wizard-header-padding: 24px 24px 16px;
-
-  /* Progress line */
-  --ty-wizard-progress-track:  var(--ty-border);
-  --ty-wizard-progress-fill:   var(--ty-wizard-completed-accent);
-  --ty-wizard-progress-height: 2px;
-
-  /* Motion — routes through global motion tokens if defined. */
-  --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);
-  --ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);
-
-  /* Circle geometry */
-  --ty-wizard-circle-size:         32px;
-  --ty-wizard-circle-border-width: 2px;
-
-  /* Panels viewport */
-  --ty-wizard-panels-bg: var(--ty-surface-elevated);
-
-  /* Focus */
-  --ty-wizard-focus-outline: var(--ty-wizard-active-accent);
+display: block;
+width: var(--ty-wizard-width, 100%);   
+height: var(--ty-wizard-height, 700px); 
+box-sizing: border-box;
+--ty-wizard-active-accent:    var(--ty-color-primary);
+--ty-wizard-completed-accent: var(--ty-color-success);
+--ty-wizard-error-accent:     var(--ty-color-danger);
+--ty-wizard-pending-accent:   var(--ty-color-neutral);
+--ty-wizard-bg:     var(--ty-surface-floating);
+--ty-wizard-border: var(--ty-border);
+--ty-wizard-radius: var(--ty-radius-lg, 12px);
+--ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
+--ty-wizard-header-bg:      var(--ty-surface-content);
+--ty-wizard-header-border:  var(--ty-border-soft, var(--ty-border));
+--ty-wizard-header-padding: 24px 24px 16px;
+--ty-wizard-progress-track:  var(--ty-border);
+--ty-wizard-progress-fill:   var(--ty-wizard-completed-accent);
+--ty-wizard-progress-height: 2px;
+--ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);
+--ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);
+--ty-wizard-circle-size:         32px;
+--ty-wizard-circle-border-width: 2px;
+--ty-wizard-panels-bg: var(--ty-surface-elevated);
+--ty-wizard-focus-outline: var(--ty-wizard-active-accent);
 }
-
 .wizard-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  box-sizing: border-box;
-  border-radius: var(--ty-wizard-radius);
-  border: 1px solid var(--ty-wizard-border);
-  background: var(--ty-wizard-bg);
-  box-shadow: var(--ty-wizard-shadow);
-  overflow: hidden;
+width: 100%;
+height: 100%;
+display: flex;
+flex-direction: column;
+position: relative;
+box-sizing: border-box;
+border-radius: var(--ty-wizard-radius);
+border: 1px solid var(--ty-wizard-border);
+background: var(--ty-wizard-bg);
+box-shadow: var(--ty-wizard-shadow);
+overflow: hidden;
 }
-
-/* ===================================== */
-/* Step Indicators Wrapper               */
-/* ===================================== */
-
 .step-indicators-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  position: relative;
-  padding: var(--ty-wizard-header-padding);
-  border-bottom: 1px solid var(--ty-wizard-header-border);
-  background: var(--ty-wizard-header-bg);
+display: flex;
+flex-direction: column;
+flex-shrink: 0;
+position: relative;
+padding: var(--ty-wizard-header-padding);
+border-bottom: 1px solid var(--ty-wizard-header-border);
+background: var(--ty-wizard-header-bg);
 }
-
-/* ===================================== */
-/* Progress Line (behind step circles)   */
-/* ===================================== */
-
 .progress-line {
-  position: absolute;
-  /*
-   * With equal-width indicators (flex: 1), each takes 100%/N of the width.
-   * Circle centers sit at 50%/N from the left edge of each indicator.
-   * Inset = 50% / step-count from each side keeps the line between circle centres.
-   */
-  left: calc(50% / var(--ty-wizard-step-count, 4));
-  right: calc(50% / var(--ty-wizard-step-count, 4));
-  top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);
-  height: var(--ty-wizard-progress-height);
-  background: var(--ty-wizard-progress-track);
-  z-index: 0;
-  pointer-events: none;
-  transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
+position: absolute;
+left: calc(50% / var(--ty-wizard-step-count, 4));
+right: calc(50% / var(--ty-wizard-step-count, 4));
+top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);
+height: var(--ty-wizard-progress-height);
+background: var(--ty-wizard-progress-track);
+z-index: 0;
+pointer-events: none;
+transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
 }
-
 .progress-overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: var(--ty-wizard-progress-fill);
-  transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
-  will-change: width;
+position: absolute;
+left: 0;
+top: 0;
+height: 100%;
+background: var(--ty-wizard-progress-fill);
+transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
+will-change: width;
 }
-
-/* ===================================== */
-/* Step Indicators Container             */
-/* ===================================== */
-
 .step-indicators {
-  display: flex;
-  align-items: flex-start;
-  position: relative;
+display: flex;
+align-items: flex-start;
+position: relative;
 }
-
-/* ===================================== */
-/* Individual Step Indicator             */
-/* ===================================== */
-
 .step-indicator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  padding: 0;
-  font: inherit;
-  transition: opacity 200ms;
-  flex: 1;
-  min-width: 0;
+display: flex;
+flex-direction: column;
+align-items: center;
+gap: 8px;
+cursor: pointer;
+background: transparent;
+border: none;
+padding: 0;
+font: inherit;
+transition: opacity 200ms;
+flex: 1;
+min-width: 0;
 }
-
 .step-indicator[aria-disabled="true"] {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
+opacity: 0.4;
+cursor: not-allowed;
+pointer-events: none;
 }
-
 .step-indicator:focus-visible {
-  outline: 2px solid var(--ty-wizard-focus-outline);
-  outline-offset: 4px;
-  border-radius: 50%;
+outline: 2px solid var(--ty-wizard-focus-outline);
+outline-offset: 4px;
+border-radius: 50%;
 }
-
-/* ===================================== */
-/* Step Circle                           */
-/* ===================================== */
-
 .step-circle {
-  width: var(--ty-wizard-circle-size);
-  height: var(--ty-wizard-circle-size);
-  border-radius: 50%;
-  border: var(--ty-wizard-circle-border-width) solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 10;
-  transition: var(--ty-local-transition, all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing));
-  box-sizing: border-box;
-  flex-shrink: 0;
+width: var(--ty-wizard-circle-size);
+height: var(--ty-wizard-circle-size);
+border-radius: 50%;
+border: var(--ty-wizard-circle-border-width) solid;
+display: flex;
+align-items: center;
+justify-content: center;
+position: relative;
+z-index: 10;
+transition: var(--ty-local-transition, all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing));
+box-sizing: border-box;
+flex-shrink: 0;
 }
-
 .step-circle[data-state="completed"] {
-  background: var(--ty-wizard-completed-accent);
-  border-color: var(--ty-color-success-strong);
-  /* Derived from the accent this circle actually paints, not from
-     --ty-solid-success-fg: the two diverge in dark mode (--ty-solid-l
-     dims solid fills by 0.25 L), which stranded white text at 3.5:1. */
-  color: oklch(
-    from var(--ty-wizard-completed-accent)
-      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
-  );
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);
+background: var(--ty-wizard-completed-accent);
+border-color: var(--ty-color-success-strong);
+color: oklch(
+from var(--ty-wizard-completed-accent)
+clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0
+);
+box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);
 }
-
 .step-circle[data-state="active"] {
-  background: var(--ty-wizard-active-accent);
-  border-color: var(--ty-color-primary-strong);
-  color: oklch(
-    from var(--ty-wizard-active-accent)
-      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
-  );
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);
+background: var(--ty-wizard-active-accent);
+border-color: var(--ty-color-primary-strong);
+color: oklch(
+from var(--ty-wizard-active-accent)
+clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0
+);
+box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);
 }
-
 .step-circle[data-state="pending"] {
-  background: var(--ty-surface-elevated);
-  border-color: var(--ty-border);
-  color: var(--ty-color-neutral);
+background: var(--ty-surface-elevated);
+border-color: var(--ty-border);
+color: var(--ty-color-neutral);
 }
-
 .step-circle[data-state="error"] {
-  background: var(--ty-wizard-error-accent);
-  border-color: var(--ty-color-danger-strong);
-  color: oklch(
-    from var(--ty-wizard-error-accent)
-      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
-  );
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);
+background: var(--ty-wizard-error-accent);
+border-color: var(--ty-color-danger-strong);
+color: oklch(
+from var(--ty-wizard-error-accent)
+clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0
+);
+box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);
 }
-
-/* ===================================== */
-/* Step Text Container                   */
-/* ===================================== */
-
 .step-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: center;
+display: flex;
+flex-direction: column;
+gap: 2px;
+align-items: center;
 }
-
-/* ===================================== */
-/* Step Label                            */
-/* ===================================== */
-
 .step-label {
-  font-size: var(--ty-font-sm, 14px);
-  font-weight: var(--ty-font-semibold, 600);
-  color: var(--ty-color-neutral);
-  transition: var(--ty-local-transition, color 200ms);
+font-size: var(--ty-font-sm, 14px);
+font-weight: var(--ty-font-semibold, 600);
+color: var(--ty-color-neutral);
+transition: var(--ty-local-transition, color 200ms);
 }
-
 .step-indicator[aria-selected="true"] .step-label {
-  color: var(--ty-color-neutral-strong);
+color: var(--ty-color-neutral-strong);
 }
-
 .step-indicator[aria-selected="false"] .step-label {
-  color: var(--ty-color-neutral);
+color: var(--ty-color-neutral);
 }
-
-/* ===================================== */
-/* Step Description                      */
-/* ===================================== */
-
 .step-description {
-  font-size: var(--ty-font-xs, 12px);
-  font-weight: var(--ty-font-normal, 400);
-  color: var(--ty-color-neutral);
-  transition: var(--ty-local-transition, color 200ms);
-  text-align: center;
-  max-width: 120px;
+font-size: var(--ty-font-xs, 12px);
+font-weight: var(--ty-font-normal, 400);
+color: var(--ty-color-neutral);
+transition: var(--ty-local-transition, color 200ms);
+text-align: center;
+max-width: 120px;
 }
-
 .step-indicator[aria-selected="true"] .step-description {
-  color: var(--ty-color-neutral-bold);
+color: var(--ty-color-neutral-bold);
 }
-
-/* ===================================== */
-/* Custom Indicator Content via Slots    */
-/* ===================================== */
-
 ::slotted([slot^="indicator-"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+display: flex;
+align-items: center;
+justify-content: center;
+width: 100%;
+height: 100%;
 }
-
-/* ===================================== */
-/* Panels Viewport                       */
-/* ===================================== */
-
 .panels-viewport {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
-  background: var(--ty-wizard-panels-bg);
+position: relative;
+flex: 1;
+overflow: hidden;
+min-height: 0;
+background: var(--ty-wizard-panels-bg);
 }
-
-/* ===================================== */
-/* Panels Wrapper (slides horizontally)  */
-/* ===================================== */
-
 .panels-wrapper {
-  display: flex;
-  height: 100%;
-  transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
-  will-change: transform;
+display: flex;
+height: 100%;
+transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
+will-change: transform;
 }
-
-/* ===================================== */
-/* Slotted Step Panels                   */
-/* ===================================== */
-
 ::slotted(ty-step) {
-  width: var(--ty-wizard-width, 100%);
-  height: 100%;
-  flex-shrink: 0;
+width: var(--ty-wizard-width, 100%);
+height: 100%;
+flex-shrink: 0;
 }
-
-/* ===================================== */
-/* Accessibility & Motion Preferences    */
-/* ===================================== */
-
 @media (prefers-reduced-motion: reduce) {
-  .panels-wrapper {
-    transition-duration: 0ms !important;
-  }
-
-  .progress-overlay {
-    transition-duration: 0ms !important;
-  }
-
-  .step-circle {
-    transition-duration: 0ms !important;
-  }
-
-  .progress-line {
-    transition-duration: 0ms !important;
-  }
+.panels-wrapper {
+transition-duration: 0ms !important;
+}
+.progress-overlay {
+transition-duration: 0ms !important;
+}
+.step-circle {
+transition-duration: 0ms !important;
+}
+.progress-line {
+transition-duration: 0ms !important;
+}
 }
-
 .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+position: absolute;
+width: 1px;
+height: 1px;
+padding: 0;
+margin: -1px;
+overflow: hidden;
+clip: rect(0, 0, 0, 0);
+white-space: nowrap;
+border-width: 0;
 }
 `;
-//# sourceMappingURL=wizard.js.map

package/lib/types/common.d.ts

@@ -24,6 +24,8 @@ export type FlavorShaded<F extends string = FlavorBase> = F | `${F}+` | `${F}-`;
 export type Flavor = FlavorShaded | (string & {});
 /** Component size variants */
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Default `size` for every field component — change here, not per component. */
+export declare const DEFAULT_SIZE: Size;
 /** Input types supported by ty-input */
 export type InputType = 'text' | 'password' | 'email' | 'url' | 'tel' | 'date' | 'time' | 'datetime-local' | 'number' | 'currency' | 'percent' | 'compact' | 'checkbox';
 /** Base properties shared by all Ty components */
@@ -50,7 +52,6 @@ export interface TyButtonElement extends TyBaseElement {
     /** Button type for forms */
     type?: 'button' | 'submit' | 'reset';
 }
-/** CSS style content */
 /** Icon size variants */
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '12' | '14' | '16' | '18' | '20' | '24' | '32' | '48' | '64' | '80' | '96';
 /** Icon animation tempo */
@@ -141,4 +142,3 @@ export interface StyleContent {
     /** Optional style ID for caching */
     id?: string;
 }
-//# sourceMappingURL=common.d.ts.map

package/lib/types/common.js

@@ -1,19 +1,8 @@
-/**
- * Ty Component Common Types
- */
-/**
- * Built-in semantic color flavor names. Append `+` for a stronger shade or `-`
- * for a softer shade — e.g. `primary`, `primary+`, `primary-`. Matches the
- * design system's `ty-bg-primary+` / `ty-text-primary-` class convention.
- */
-/* `secondary` was removed in TC37 — the built-in set is semantic-only.
- * An aesthetic second accent is one flavor-pack away (see CSS_GUIDE →
- * Custom Flavors); markup using flavor="secondary" degrades to neutral. */
 export const FLAVORS = [
-    'primary',
-    'success',
-    'danger',
-    'warning',
-    'neutral',
+'primary',
+'success',
+'danger',
+'warning',
+'neutral',
 ];
-//# sourceMappingURL=common.js.map
+export const DEFAULT_SIZE = 'sm';