tyrell-components 1.0.0-RC10

package/lib/styles/textarea.js

@@ -0,0 +1,350 @@
+/**
+ * Styles for ty-textarea component
+ * Enhanced textarea with auto-resize functionality
+ */
+export const textareaStyles = `
+:host {
+  display: block;
+  font-family: var(--ty-font-sans);
+  width: 100%;
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  /* For absolute positioned dummy element */
+}
+
+.textarea-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+/* Custom scrollbar track positioning within textarea border */
+.textarea-wrapper .ty-scrollbar-track-y {
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-radius: 0 4px 4px 0;
+}
+
+/* ===== LABEL STYLING ===== */
+
+.ty-field-label {
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  letter-spacing: var(--ty-tracking-sm);
+  font-weight: var(--ty-font-medium);
+  color: var(--ty-label-color);
+  margin-bottom: 6px;
+  padding-left: 12px;
+}
+
+/* Required indicator - using SVG icon instead of CSS */
+.required-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ty-color-danger);
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+}
+
+/* ===== ERROR MESSAGE STYLING ===== */
+
+.error-message {
+  font-size: var(--ty-font-xs);
+  line-height: var(--ty-leading-xs);
+  letter-spacing: var(--ty-tracking-xs);
+  color: var(--ty-color-danger);
+  margin-top: 4px;
+  padding-left: 12px;
+}
+
+/* Error state for textareas */
+textarea.error {
+  border-color: var(--ty-color-danger);
+  background: var(--ty-bg-danger-soft);
+}
+
+textarea.error:focus {
+  border-color: var(--ty-color-danger-bold);
+  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+}
+
+/* ===== TEXTAREA BASE STYLING ===== */
+
+textarea {
+  /* Base appearance — elegant and minimal like input */
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--input-border, var(--ty-input-border));
+  border-radius: 6px;
+  background: var(--input-bg, var(--ty-input-bg));
+  color: var(--input-color, var(--ty-input-color));
+  font-family: inherit;
+  /* Linear-paired typography */
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  letter-spacing: var(--ty-tracking-sm);
+  font-weight: var(--ty-font-normal);
+  transition: all 0.15s ease-in-out;
+  outline: none;
+
+  /* Default size (md) - refined spacing */
+  min-height: 80px;
+  /* Larger than input for multiline */
+  padding: 12px 12px;
+  /* Slightly larger padding for text areas */
+
+  /* Auto-resize specific styles */
+  overflow: hidden;
+  /* Hide scrollbars since we're auto-resizing */
+  resize: none;
+  /* Disable manual resize by default */
+
+  /* Ensure consistent text wrapping */
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Hide native scrollbar for webkit when custom scrollbar is active
+   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */
+:host([data-custom-scroll]) textarea::-webkit-scrollbar {
+  display: none;
+}
+
+/* Focus state - elegant blue glow like input */
+textarea:focus {
+  border-color: var(--input-border-focus, var(--ty-input-border-focus));
+  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+  background: var(--input-bg, var(--ty-input-bg));
+}
+
+/* Hover state - subtle feedback */
+textarea:hover:not(:disabled) {
+  border-color: var(--input-border-hover, var(--ty-input-border-hover));
+}
+
+/* Disabled state - refined opacity */
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
+  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
+  color: var(--input-disabled-color, var(--ty-input-disabled-color));
+}
+
+/* Placeholder styling - subtle and elegant */
+textarea::placeholder {
+  color: var(--input-placeholder, var(--ty-input-placeholder));
+  font-weight: 400;
+}
+
+/* ===== RESIZE CONTROL OPTIONS ===== */
+
+/* Allow manual resizing */
+textarea.resize-both {
+  resize: both;
+}
+
+textarea.resize-horizontal {
+  resize: horizontal;
+}
+
+textarea.resize-vertical {
+  resize: vertical;
+}
+
+textarea.resize-none {
+  resize: none;
+}
+
+/* Auto-resize mode (default) disables manual resize */
+textarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {
+  resize: none;
+}
+
+/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */
+
+.textarea-dummy {
+  /* Hidden element that measures text height */
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  visibility: hidden !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+
+  /* Ensure it has the same text behavior as textarea */
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+/* ===== SIZE MODIFIERS ===== */
+
+/* Extra Small */
+textarea.xs {
+  min-height: 64px;
+  padding: 8px 10px;
+  font-size: var(--ty-font-xs);
+  line-height: var(--ty-leading-xs);
+  letter-spacing: var(--ty-tracking-xs);
+}
+
+/* Small */
+textarea.sm {
+  min-height: 72px;
+  padding: 10px 10px;
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  letter-spacing: var(--ty-tracking-sm);
+}
+
+/* Medium (default) */
+textarea.md {
+  min-height: 80px;
+  padding: 12px 12px;
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  letter-spacing: var(--ty-tracking-sm);
+}
+
+/* Large */
+textarea.lg {
+  min-height: 96px;
+  padding: 14px 14px;
+  font-size: var(--ty-font-base);
+  line-height: var(--ty-leading-base);
+  letter-spacing: var(--ty-tracking-base);
+}
+
+/* Extra Large */
+textarea.xl {
+  min-height: 112px;
+  padding: 16px 16px;
+  font-size: var(--ty-font-lg);
+  line-height: var(--ty-leading-lg);
+  letter-spacing: var(--ty-tracking-lg);
+}
+
+/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
+
+textarea:focus-visible {
+  outline: none;
+  /* We use box-shadow instead */
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  textarea {
+    border-width: 2px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  textarea {
+    transition: none;
+  }
+
+  .textarea-dummy {
+    transition: none;
+  }
+}
+
+/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */
+
+/* Scale down on smaller containers using container queries */
+@container (max-width: 480px) {
+  textarea.lg {
+    font-size: var(--ty-font-sm);
+    line-height: var(--ty-leading-sm);
+    letter-spacing: var(--ty-tracking-sm);
+    padding: 12px 12px;
+    min-height: 80px;
+  }
+
+  textarea.xl {
+    font-size: var(--ty-font-base);
+    line-height: var(--ty-leading-base);
+    letter-spacing: var(--ty-tracking-base);
+    padding: 14px 14px;
+    min-height: 96px;
+  }
+}
+
+@container (max-width: 320px) {
+  textarea.xl {
+    font-size: var(--ty-font-sm);
+    line-height: var(--ty-leading-sm);
+    letter-spacing: var(--ty-tracking-sm);
+    padding: 12px 12px;
+    min-height: 80px;
+  }
+}
+
+/* Fallback for browsers without container query support */
+@media (max-width: 640px) {
+  textarea.lg {
+    font-size: var(--ty-font-sm);
+    line-height: var(--ty-leading-sm);
+    letter-spacing: var(--ty-tracking-sm);
+    padding: 12px 12px;
+    min-height: 80px;
+  }
+
+  textarea.xl {
+    font-size: var(--ty-font-base);
+    line-height: var(--ty-leading-base);
+    letter-spacing: var(--ty-tracking-base);
+    padding: 14px 14px;
+    min-height: 96px;
+  }
+}
+
+@media (max-width: 480px) {
+  textarea.xl {
+    font-size: var(--ty-font-sm);
+    line-height: var(--ty-leading-sm);
+    letter-spacing: var(--ty-tracking-sm);
+    padding: 12px 12px;
+    min-height: 80px;
+  }
+}
+
+/* ===== ANIMATION AND TRANSITIONS ===== */
+
+/* Smooth height transitions for auto-resize */
+textarea {
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    height 0.1s ease-out;
+  /* Smooth height changes */
+}
+
+/* Disable height transition on focus to avoid jarring effect */
+textarea:focus {
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    background-color 0.15s ease-in-out;
+}
+
+/* For users who prefer reduced motion, disable height transitions */
+@media (prefers-reduced-motion: reduce) {
+  textarea {
+    transition: none;
+  }
+}
+`;
+//# sourceMappingURL=textarea.js.map

package/lib/styles/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwV7B,CAAA"}

package/lib/styles/tooltip.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tooltip Styles
+ *
+ * Bold, button-like tooltips with high contrast and semantic colors.
+ * Designed to grab attention and provide clear, readable information.
+ */
+import type { StyleContent } from '../types/common.js';
+export declare const tooltipStyles: StyleContent;
+//# sourceMappingURL=tooltip.d.ts.map

package/lib/styles/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,YA6H3B,CAAC"}

package/lib/styles/tooltip.js

@@ -0,0 +1,133 @@
+/**
+ * Tooltip Styles
+ *
+ * Bold, button-like tooltips with high contrast and semantic colors.
+ * Designed to grab attention and provide clear, readable information.
+ */
+export const tooltipStyles = {
+    id: 'ty-tooltip',
+    css: `
+/* Tooltip host element - display contents to not affect layout */
+:host {
+  display: contents;
+}
+
+/* Tooltip container - positioned element */
+#tooltip-container {
+  position: fixed;
+  top: var(--y, 0px);
+  left: var(--x, 0px);
+  z-index: var(--ty-z-tooltip, 9999);
+
+  /* Hidden by default */
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 200ms, visibility 200ms;
+
+  /* Prevent interaction */
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  
+  /* Bold shadow for depth */
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 
+              0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* When open */
+#tooltip-container.open {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Base tooltip styling - Dark inverted style (like buttons) */
+#tooltip-container {
+  /* Bold, high-contrast styling. Defaults route through the neutral ramp
+   * so the tooltip inverts cleanly: dark in light mode, light in dark mode.
+   * Consumers can pin it to a fixed look via --ty-tooltip-bg/-color. */
+  background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));
+  color: var(--ty-tooltip-color, var(--ty-color-neutral-faint));
+  
+  /* Comfortable padding */
+  padding: var(--ty-tooltip-padding, 8px 12px);
+  border-radius: var(--ty-tooltip-radius, 6px);
+  
+  /* No border - solid color provides contrast */
+  border: none;
+  
+  /* Sizing */
+  max-width: var(--ty-tooltip-max-width, 250px);
+  
+  /* Typography - clear and readable */
+  font-size: var(--ty-font-sm, 14px);
+  font-weight: var(--ty-font-semibold, 600);
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* Content slot */
+#tooltip-container ::slotted(*) {
+  /* Ensure slotted content inherits styles */
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* ============================================ */
+/* Flavor Variants - Bold, Button-like Colors  */
+/* ============================================ */
+
+/* Primary - Bold blue (like primary button) */
+#tooltip-container[data-flavor="primary"] {
+  background: var(--ty-color-primary, #3b82f6);
+  color: #ffffff;
+}
+
+/* Success - Bold green */
+#tooltip-container[data-flavor="success"] {
+  background: var(--ty-color-success, #10b981);
+  color: #ffffff;
+}
+
+/* Danger - Bold red */
+#tooltip-container[data-flavor="danger"] {
+  background: var(--ty-color-danger, #ef4444);
+  color: #ffffff;
+}
+
+/* Warning - Bold orange/amber */
+#tooltip-container[data-flavor="warning"] {
+  background: var(--ty-color-warning, #f59e0b);
+  color: #ffffff;
+}
+
+/* Neutral - Medium gray (default alternative) */
+#tooltip-container[data-flavor="neutral"] {
+  background: var(--ty-color-neutral, #6b7280);
+  color: #ffffff;
+}
+
+/* Light - For dark backgrounds */
+#tooltip-container[data-flavor="light"] {
+  background: var(--ty-surface-floating, var(--ty-surface-elevated, #ffffff));
+  color: var(--ty-color-neutral-strong, #111827);
+  box-shadow: var(--ty-shadow-lg,
+              0 10px 15px -3px rgba(0, 0, 0, 0.15),
+              0 4px 6px -4px rgba(0, 0, 0, 0.1),
+              0 0 0 1px rgba(0, 0, 0, 0.05));
+}
+
+/* Dark - Inverted style (default) */
+#tooltip-container[data-flavor="dark"] {
+  background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));
+  color: var(--ty-color-neutral-faint);
+}
+
+/* Secondary - Purple/indigo */
+#tooltip-container[data-flavor="secondary"] {
+  background: var(--ty-color-secondary, #8b5cf6);
+  color: #ffffff;
+}
+`,
+};
+//# sourceMappingURL=tooltip.js.map

package/lib/styles/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,CAAC,MAAM,aAAa,GAAiB;IACzC,EAAE,EAAE,YAAY;IAChB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HN;CACA,CAAC"}

package/lib/styles/wizard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 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: 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  color: var(--ty-solid-success-fg, white);\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: var(--ty-solid-primary-fg, white);\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: var(--ty-solid-danger-fg, white);\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: 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: 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

package/lib/styles/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,YAAY,yzSAmUxB,CAAC"}