tyrell-components 1.0.0-RC13 → 1.0.0-RC14

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,31 +1,6 @@
-/**
- * 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.
-   ============================================================================ */
+/* Theming tokens — every default chains back to the brand layer / global
+   scale tokens. */
 
 :host {
   display: block;
@@ -48,12 +23,10 @@ export const wizardStyles = `
   --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;
@@ -62,14 +35,11 @@ export const wizardStyles = `
   --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);
 }
 
@@ -87,10 +57,6 @@ export const wizardStyles = `
   overflow: hidden;
 }
 
-/* ===================================== */
-/* Step Indicators Wrapper               */
-/* ===================================== */
-
 .step-indicators-wrapper {
   display: flex;
   flex-direction: column;
@@ -101,10 +67,7 @@ export const wizardStyles = `
   background: var(--ty-wizard-header-bg);
 }
 
-/* ===================================== */
-/* Progress Line (behind step circles)   */
-/* ===================================== */
-
+/* Progress line, behind the step circles */
 .progress-line {
   position: absolute;
   /*
@@ -132,20 +95,12 @@ export const wizardStyles = `
   will-change: width;
 }
 
-/* ===================================== */
-/* Step Indicators Container             */
-/* ===================================== */
-
 .step-indicators {
   display: flex;
   align-items: flex-start;
   position: relative;
 }
 
-/* ===================================== */
-/* Individual Step Indicator             */
-/* ===================================== */
-
 .step-indicator {
   display: flex;
   flex-direction: column;
@@ -173,10 +128,6 @@ export const wizardStyles = `
   border-radius: 50%;
 }
 
-/* ===================================== */
-/* Step Circle                           */
-/* ===================================== */
-
 .step-circle {
   width: var(--ty-wizard-circle-size);
   height: var(--ty-wizard-circle-size);
@@ -200,7 +151,7 @@ export const wizardStyles = `
      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
+      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);
 }
@@ -210,7 +161,7 @@ export const wizardStyles = `
   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
+      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);
 }
@@ -226,15 +177,11 @@ export const wizardStyles = `
   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
+      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;
@@ -242,10 +189,6 @@ export const wizardStyles = `
   align-items: center;
 }
 
-/* ===================================== */
-/* Step Label                            */
-/* ===================================== */
-
 .step-label {
   font-size: var(--ty-font-sm, 14px);
   font-weight: var(--ty-font-semibold, 600);
@@ -261,10 +204,6 @@ export const wizardStyles = `
   color: var(--ty-color-neutral);
 }
 
-/* ===================================== */
-/* Step Description                      */
-/* ===================================== */
-
 .step-description {
   font-size: var(--ty-font-xs, 12px);
   font-weight: var(--ty-font-normal, 400);
@@ -278,10 +217,7 @@ export const wizardStyles = `
   color: var(--ty-color-neutral-bold);
 }
 
-/* ===================================== */
-/* Custom Indicator Content via Slots    */
-/* ===================================== */
-
+/* Custom indicator content via slots */
 ::slotted([slot^="indicator-"]) {
   display: flex;
   align-items: center;
@@ -290,10 +226,6 @@ export const wizardStyles = `
   height: 100%;
 }
 
-/* ===================================== */
-/* Panels Viewport                       */
-/* ===================================== */
-
 .panels-viewport {
   position: relative;
   flex: 1;
@@ -302,10 +234,7 @@ export const wizardStyles = `
   background: var(--ty-wizard-panels-bg);
 }
 
-/* ===================================== */
-/* Panels Wrapper (slides horizontally)  */
-/* ===================================== */
-
+/* Panels wrapper slides horizontally */
 .panels-wrapper {
   display: flex;
   height: 100%;
@@ -313,20 +242,12 @@ export const wizardStyles = `
   will-change: transform;
 }
 
-/* ===================================== */
-/* Slotted Step Panels                   */
-/* ===================================== */
-
 ::slotted(ty-step) {
   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;
@@ -357,4 +278,3 @@ export const wizardStyles = `
   border-width: 0;
 }
 `;
-//# sourceMappingURL=wizard.js.map

package/lib/types/common.d.ts

@@ -50,7 +50,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 +140,3 @@ export interface StyleContent {
     /** Optional style ID for caching */
     id?: string;
 }
-//# sourceMappingURL=common.d.ts.map

package/lib/types/common.js

@@ -1,14 +1,3 @@
-/**
- * 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',
@@ -16,4 +5,3 @@ export const FLAVORS = [
     'warning',
     'neutral',
 ];
-//# sourceMappingURL=common.js.map

package/lib/utils/calendar-utils.d.ts

@@ -1,25 +1,9 @@
 /**
- * Calendar Utilities
+ * Calendar month generation and localization (native Date API only).
  *
- * Pure TypeScript utilities for calendar month generation and localization.
- * Ported from ClojureScript ty/date/core.cljs
- *
- * Key Features:
- * - 42-day calendar grid generation (6 weeks × 7 days)
- * - Monday-first week ordering
- * - Rich day context with metadata
- * - Localized weekday names
- * - No external dependencies (native Date API only)
- *
- * Note on Timestamps:
- * - `value`: UTC timestamp at midnight UTC (timezone-independent, use for storage/server)
- * - `localValue`: Local timestamp at midnight local time (use for display/local calculations)
- * - `year/month/dayInMonth`: Calendar date components (user's mental model)
- *
- * Example for October 13, 2025:
- * - value = Date.UTC(2025, 9, 13) = consistent worldwide
- * - localValue = new Date(2025, 9, 13).getTime() = varies by timezone
- * - Both represent the same calendar date, different moments in time
+ * Timestamps: `value` is UTC midnight (timezone-independent, for storage/server),
+ * `localValue` is local midnight (for display/local math). Both denote the same
+ * calendar date but are different moments in time.
  */
 /**
  * Rich context for a single calendar day
@@ -125,4 +109,3 @@ export declare function parseISODate(isoString: string): {
     month: number;
     day: number;
 } | null;
-//# sourceMappingURL=calendar-utils.d.ts.map

package/lib/utils/calendar-utils.js

@@ -1,89 +1,31 @@
-/**
- * Calendar Utilities
- *
- * Pure TypeScript utilities for calendar month generation and localization.
- * Ported from ClojureScript ty/date/core.cljs
- *
- * Key Features:
- * - 42-day calendar grid generation (6 weeks × 7 days)
- * - Monday-first week ordering
- * - Rich day context with metadata
- * - Localized weekday names
- * - No external dependencies (native Date API only)
- *
- * Note on Timestamps:
- * - `value`: UTC timestamp at midnight UTC (timezone-independent, use for storage/server)
- * - `localValue`: Local timestamp at midnight local time (use for display/local calculations)
- * - `year/month/dayInMonth`: Calendar date components (user's mental model)
- *
- * Example for October 13, 2025:
- * - value = Date.UTC(2025, 9, 13) = consistent worldwide
- * - localValue = new Date(2025, 9, 13).getTime() = varies by timezone
- * - Both represent the same calendar date, different moments in time
- */
-// ============================================================================
-// Validation Functions
-// ============================================================================
-/**
- * Validate month value (1-12)
- */
 function validateMonth(month) {
     if (!Number.isInteger(month) || month < 1 || month > 12) {
         throw new RangeError(`Invalid month: ${month}. Must be an integer between 1 and 12.`);
     }
 }
-/**
- * Validate year value (reasonable range)
- */
 function validateYear(year) {
     if (!Number.isInteger(year) || year < 1 || year > 9999) {
         throw new RangeError(`Invalid year: ${year}. Must be an integer between 1 and 9999.`);
     }
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Check if two dates are on the same day (ignoring time)
- * Works in local timezone
- */
 function isSameDay(date1, date2) {
     return date1.getFullYear() === date2.getFullYear()
         && date1.getMonth() === date2.getMonth()
         && date1.getDate() === date2.getDate();
 }
-/**
- * Create a date at midnight local time
- * This ensures consistent behavior across the application
- */
 function createMidnightDate(year, month, day) {
     return new Date(year, month - 1, day, 0, 0, 0, 0);
 }
-/**
- * Get today's date at midnight local time
- * Used for consistent "today" detection
- */
 function getTodayMidnight() {
     const now = new Date();
     return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
 }
-/**
- * Create a DayContext from a Date object
- *
- * @param date - The date to create context for (should be at midnight)
- * @param targetYear - The year of the calendar month being displayed
- * @param targetMonth - The month (1-12) of the calendar month being displayed
- * @param selection - Optional selection state from calendar
- * @returns Rich day context with metadata
- */
 function createDayContext(date, targetYear, targetMonth, selection) {
     const year = date.getFullYear();
-    const month = date.getMonth() + 1; // Convert to 1-based
+    const month = date.getMonth() + 1;
     const dayInMonth = date.getDate();
-    const dayOfWeek = date.getDay(); // 0 = Sunday, 6 = Saturday
-    // Check if this day is from a different month
+    const dayOfWeek = date.getDay();
     const isOtherMonth = year !== targetYear || month !== targetMonth;
-    // Determine if previous or next month
     let isPrevMonth = false;
     let isNextMonth = false;
     if (isOtherMonth) {
@@ -94,16 +36,11 @@ function createDayContext(date, targetYear, targetMonth, selection) {
             isNextMonth = true;
         }
     }
-    // Check if today (compare dates at midnight for consistency)
     const todayMidnight = getTodayMidnight();
     const isToday = isSameDay(date, todayMidnight);
-    // Check if this day is selected
     const isSelected = selection?.year === year
         && selection?.month === month
         && selection?.day === dayInMonth;
-    // Calculate both UTC and local timestamps
-    // value: UTC midnight (consistent worldwide for the same date)
-    // localValue: Local midnight (respects user's timezone)
     const utcValue = Date.UTC(year, month - 1, dayInMonth, 0, 0, 0, 0);
     const localValue = date.getTime();
     return {
@@ -123,64 +60,23 @@ function createDayContext(date, targetYear, targetMonth, selection) {
         selectedDay: selection?.day,
     };
 }
-/**
- * Get the Monday at or before a given date
- * (Monday = start of week in ISO 8601)
- *
- * @param date - Any date
- * @returns The Monday of that week at midnight
- */
 function getMondayOfWeek(date) {
-    const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
-    // Calculate days to subtract to get to Monday
-    // Sunday (0) → go back 6 days
-    // Monday (1) → go back 0 days
-    // Tuesday (2) → go back 1 day
-    // ...
+    const dayOfWeek = date.getDay();
     const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    // Create new date at Monday midnight
     const monday = new Date(date);
     monday.setDate(date.getDate() - daysToMonday);
-    monday.setHours(0, 0, 0, 0); // Ensure midnight
+    monday.setHours(0, 0, 0, 0);
     return monday;
 }
-/**
- * Get the start date for the calendar grid
- * (The Monday at or before the first day of the month)
- *
- * @param year - Year
- * @param month - Month (1-12)
- * @returns The Monday that starts the calendar grid
- */
 function getMonthGridStart(year, month) {
-    // Get first day of month at midnight (month is 1-based, Date constructor is 0-based)
     const firstDay = createMidnightDate(year, month, 1);
-    // Get the Monday of that week
     return getMondayOfWeek(firstDay);
 }
-/**
- * Add days to a date safely
- * Creates a new date without mutating the original
- *
- * @param date - Starting date
- * @param days - Number of days to add
- * @returns New date with days added
- */
 function addDays(date, days) {
     const result = new Date(date);
     result.setDate(result.getDate() + days);
     return result;
 }
-/**
- * Generate N consecutive days starting from a date
- *
- * @param startDate - Starting date
- * @param count - Number of days to generate
- * @param targetYear - Year of the calendar month
- * @param targetMonth - Month (1-12) of the calendar month
- * @param selection - Optional selection state to include in day contexts
- * @returns Array of day contexts
- */
 function generateDays(startDate, count, targetYear, targetMonth, selection) {
     const days = [];
     for (let i = 0; i < count; i++) {
@@ -189,94 +85,28 @@ function generateDays(startDate, count, targetYear, targetMonth, selection) {
     }
     return days;
 }
-// ============================================================================
-// Main Calendar Functions
-// ============================================================================
-/**
- * Generate a 42-day calendar grid for a given month
- *
- * Returns 6 weeks (42 days) starting from the Monday at or before
- * the first day of the month. This ensures a complete calendar view
- * with days from the previous and next months as needed.
- *
- * @param year - Year (e.g., 2025)
- * @param month - Month (1-12, 1 = January)
- * @param selection - Optional selection state to include in day contexts
- * @returns Array of 42 day contexts with rich metadata
- *
- * @throws {RangeError} If year or month are invalid
- *
- * @example
- * const days = getCalendarMonthDays(2025, 10); // October 2025
- * console.log(days.length); // 42
- * console.log(days[0].dayInMonth); // First day shown (might be from September)
- */
 export function getCalendarMonthDays(year, month, selection) {
-    // Validate inputs
     validateYear(year);
     validateMonth(month);
     const startDate = getMonthGridStart(year, month);
     return generateDays(startDate, 42, year, month, selection);
 }
-/**
- * Get localized weekday names in Monday-first order
- *
- * Note: Intl.DateTimeFormat returns Sunday-first by default,
- * so we reorder to Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
- *
- * @param locale - Locale string (e.g., "en-US", "de-DE", "ja-JP")
- * @param style - Display style: "long" (Monday), "short" (Mon), "narrow" (M)
- * @returns Array of 7 weekday names starting with Monday
- *
- * @example
- * getLocalizedWeekdays("en-US", "short")
- * // Returns: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
- *
- * getLocalizedWeekdays("de-DE", "long")
- * // Returns: ["Montag", "Dienstag", "Mittwoch", ...]
- */
 export function getLocalizedWeekdays(locale, style = 'short') {
     const formatter = new Intl.DateTimeFormat(locale, { weekday: style });
-    // Create a Sunday (base date) - January 7, 2024 is a Sunday
     const sunday = new Date(2024, 0, 7);
-    // Generate Sunday-first array: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
     const sundayFirst = Array.from({ length: 7 }, (_, i) => {
         const date = addDays(sunday, i);
         return formatter.format(date);
     });
-    // Reorder to Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
     const [firstDay, ...rest] = sundayFirst;
     return [...rest, firstDay];
 }
-// ============================================================================
-// Utility Functions (for testing and debugging)
-// ============================================================================
-/**
- * Get month name in specified locale
- *
- * @param month - Month (1-12)
- * @param locale - Locale string
- * @param style - Display style
- * @returns Localized month name
- *
- * @throws {RangeError} If month is invalid
- */
 export function getMonthName(month, locale = 'en-US', style = 'long') {
     validateMonth(month);
     const date = new Date(2024, month - 1, 1);
     const formatter = new Intl.DateTimeFormat(locale, { month: style });
     return formatter.format(date);
 }
-/**
- * Parse an ISO date string (YYYY-MM-DD) into year, month, day components
- *
- * @param isoString - ISO date string (YYYY-MM-DD)
- * @returns Object with year, month (1-12), and day, or null if invalid
- *
- * @example
- * parseISODate("2025-10-13")
- * // Returns: { year: 2025, month: 10, day: 13 }
- */
 export function parseISODate(isoString) {
     const match = isoString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
     if (!match)
@@ -284,18 +114,15 @@ export function parseISODate(isoString) {
     const year = parseInt(match[1], 10);
     const month = parseInt(match[2], 10);
     const day = parseInt(match[3], 10);
-    // Validate ranges
     if (year < 1 || year > 9999)
         return null;
     if (month < 1 || month > 12)
         return null;
     if (day < 1 || day > 31)
         return null;
-    // Check if date is valid (handles Feb 30, etc.)
     const date = new Date(year, month - 1, day);
     if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
         return null;
     }
     return { year, month, day };
 }
-//# sourceMappingURL=calendar-utils.js.map