tyrell-components 1.0.0-TC7

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 ===== */
+
+.textarea-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-mild);
+  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,YAgI3B,CAAC"}

package/lib/styles/tooltip.js

@@ -0,0 +1,136 @@
+/**
+ * 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 */
+  background: var(--ty-tooltip-bg, #1f2937);
+  color: var(--ty-tooltip-color, #ffffff);
+  
+  /* 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;
+}
+
+/* Info - Bold cyan/blue */
+#tooltip-container[data-flavor="info"] {
+  background: var(--ty-color-info, #06b6d4);
+  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-elevated, #ffffff);
+  color: var(--ty-text-strong, #111827);
+  box-shadow: 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, #1f2937);
+  color: #ffffff;
+}
+
+/* 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HN;CACA,CAAC"}

package/lib/styles/wizard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Wizard Component Styles
+ *
+ * Styles for the ty-wizard container component including:
+ * - Flexbox layout with step indicators and content carousel
+ * - Progress line with animated completion overlay
+ * - Step circles with completed/active/pending states
+ * - Carousel viewport with transform animations
+ * - Responsive design with prefers-reduced-motion support
+ * - Fully customizable via CSS Parts (::part)
+ *
+ * Uses global design system tokens (no component-specific variables):
+ * - Surfaces: --ty-surface-floating, --ty-surface-content, --ty-surface-elevated
+ * - Colors: --ty-color-success, --ty-color-primary, --ty-color-danger
+ * - Borders: --ty-border, --ty-border-soft
+ * - Text: --ty-text, --ty-text-soft
+ *
+ * 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
+ */
+export declare const wizardStyles = "\n:host {\n  display: block;\n  width: var(--wizard-width, 100%);\n  height: var(--wizard-height, 700px);\n  box-sizing: border-box;\n  /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.\n     Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */\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: 12px;\n  border: 1px solid var(--ty-border);\n  background: var(--ty-surface-floating);\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.step-indicators-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: relative;\n  padding: 24px 24px 16px;\n  border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));\n  background: var(--ty-surface-content);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* Expose as CSS Part for custom styling */\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 are at: 50%/N, 150%/N, 250%/N, ... from left.\n   * Line spans from first center (50%/N) to last center (100% - 50%/N).\n   * Inset = 50% / step-count from each side.\n   */\n  left: calc(50% / var(--step-count, 4));\n  right: calc(50% / var(--step-count, 4));\n  /* Vertically center with step circles - uses circle size variable */\n  top: calc(var(--step-circle-size, 32px) / 2 - 1px);\n  height: 2px;\n  background: var(--ty-border);\n  z-index: 0;\n  pointer-events: none;\n  transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.progress-overlay {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--ty-color-success);\n  transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);\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  /* No padding - let equal-width indicators fill the space */\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* Expose as CSS Part for step styling */\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  /* Equal width for all indicators - makes progress line alignment predictable */\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-color-primary);\n  outline-offset: 4px;\n  border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle - Smaller, cleaner */\n/* Expose as CSS Part for circle styling */\n/* ===================================== */\n\n.step-circle {\n  /* Circle size - set --step-circle-size on ty-wizard element to customize */\n  width: var(--step-circle-size, 32px);\n  height: var(--step-circle-size, 32px);\n  border-radius: 50%;\n  border: 2px solid;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n/* Completed state - green with success glow */\n.step-circle[data-state=\"completed\"] {\n  background: var(--ty-color-success);\n  border-color: var(--ty-color-success-600, var(--ty-color-success));\n  color: white;\n  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);\n}\n\n/* Active state - primary with primary glow */\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-color-primary);\n  border-color: var(--ty-color-primary-600, var(--ty-color-primary));\n  color: white;\n  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n}\n\n/* Pending state - neutral gray */\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated, #f3f4f6);\n  border-color: var(--ty-border, #d1d5db);\n  color: var(--ty-text-soft, #6b7280);\n}\n\n/* Error state - red with danger glow */\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-color-danger, #ef4444);\n  border-color: var(--ty-color-danger-600, #dc2626);\n  color: white;\n  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* Wraps label and description */\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 - Main title */\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-text, inherit);\n  transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-text-strong, inherit);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-text-soft, inherit);\n}\n\n/* ===================================== */\n/* Step Description - Subtitle */\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-text-soft, #9ca3af);\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-text, inherit);\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/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n  background: var(--ty-surface-elevated);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n  will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n  width: var(--wizard-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n/* Respect user's motion preferences */\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/* Screen reader only content */\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,s6PA4SxB,CAAC"}