tyrell-components 1.0.0-TC39 → 1.0.0-TC41

package/lib/styles/button.js

@@ -104,7 +104,7 @@ button {
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: var(--ty-local-transition, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease);
   background: transparent;
   color: var(--ty-color-neutral);
   border: 1px solid transparent;

package/lib/styles/calendar-month.js

@@ -140,7 +140,7 @@ export const calendarMonthStyles = `
   background-color: var(--ty-calendar-day-bg, transparent);
   color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
 
   /* Typography */
   font-weight: 400;

package/lib/styles/calendar-navigation.d.ts

@@ -2,5 +2,5 @@
  * Calendar Navigation Styles
  * Clean, modern design with proper visual hierarchy and size variants
  */
-export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
+export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
 //# sourceMappingURL=calendar-navigation.d.ts.map

package/lib/styles/calendar-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,snHAiIpC,CAAC"}
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,kpHAiIpC,CAAC"}

package/lib/styles/calendar-navigation.js

@@ -87,7 +87,7 @@ export const calendarNavigationStyles = `
   background-color: transparent;
   color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   outline: none;
 }
 

package/lib/styles/checkbox.js

@@ -37,7 +37,7 @@ export const checkboxStyles = `
   display: inline-flex;
   align-items: center;
   outline: none;
-  transition: all 0.15s ease-in-out;
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
   user-select: none;
   cursor: pointer;
   border-radius: 6px;
@@ -64,7 +64,7 @@ export const checkboxStyles = `
   align-items: center;
   justify-content: center;
   color: inherit;
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
   pointer-events: none;
   /* Let the container handle the click */
 }

package/lib/styles/copy.js

@@ -89,7 +89,7 @@ export const copyStyles = `
 /* Hover state — flavor-soft background (primary by default) */
 .input-wrapper:not(.disabled):hover {
   background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
-  transition: background 0.2s ease;
+  transition: var(--ty-local-transition, background 0.2s ease);
 }
 
 /* Copy button */
@@ -104,7 +104,7 @@ export const copyStyles = `
   border: none;
   background: transparent;
   color: var(--copy-color, var(--ty-text-soft));
-  transition: color 0.2s ease, transform 0.2s ease;
+  transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
   padding: 0;
   margin: 0;
 }

package/lib/styles/custom-scrollbar.d.ts

@@ -2,5 +2,5 @@
  * Shared CSS for CustomScrollbar utility
  * Include this in any component that uses CustomScrollbar
  */
-export declare const customScrollbarStyles = "\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n";
+export declare const customScrollbarStyles = "\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n";
 //# sourceMappingURL=custom-scrollbar.d.ts.map

package/lib/styles/custom-scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,urIAuJjC,CAAC"}
+{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,+uIAuJjC,CAAC"}

package/lib/styles/custom-scrollbar.js

@@ -53,7 +53,7 @@ export const customScrollbarStyles = `
   min-height: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }
@@ -118,7 +118,7 @@ export const customScrollbarStyles = `
   min-width: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }

package/lib/styles/date-picker.js

@@ -231,7 +231,7 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   color: var(--ty-color-neutral-soft);
   cursor: pointer;
   border-radius: var(--ty-radius-sm);
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   pointer-events: auto;
 }
 

package/lib/styles/file-upload.d.ts

@@ -1,2 +1,2 @@
-export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s ease, transform 0.15s ease;\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
 //# sourceMappingURL=file-upload.d.ts.map

package/lib/styles/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,yhJA+O5B,CAAA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,6mJA+O5B,CAAA"}

package/lib/styles/file-upload.js

@@ -41,7 +41,7 @@ export const fileUploadStyles = `
   padding: 2rem 1.5rem;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
   outline: none;
   display: flex;
   flex-direction: column;
@@ -101,7 +101,7 @@ export const fileUploadStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.15s ease, transform 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
   pointer-events: none;
 }
 
@@ -191,7 +191,7 @@ export const fileUploadStyles = `
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
   border: none;
   background: none;
   padding: 0;

package/lib/styles/input.js

@@ -110,8 +110,8 @@ export const inputStyles = `
   border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-base);
   background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
-  transition: all 0.15s ease-in-out;
-  
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
+
   /* Default size (md) */
   min-height: var(--ty-size-md);
   padding: 0 12px;
@@ -166,7 +166,7 @@ export const inputStyles = `
   background: none;
   cursor: pointer;
   color: var(--input-placeholder, var(--ty-input-placeholder));
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
 }
 .password-toggle:hover {
   color: var(--input-color, var(--ty-input-color));

package/lib/styles/radio.js

@@ -118,7 +118,7 @@ ${inputStyles}
   border: 2px solid var(--ty-input-border);
   background: var(--ty-input-bg);
   box-sizing: border-box;
-  transition: border-color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, border-color 0.15s ease-in-out);
 }
 
 /* Default (no flavor attribute) is primary — defaults don't reflect to the

package/lib/styles/scroll-container.d.ts

@@ -2,5 +2,5 @@
  * TyScrollContainer styles
  * Component-specific styles + shared custom scrollbar styles
  */
-export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators                     */\n/* ===================================== */\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators                     */\n/* ===================================== */\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=scroll-container.d.ts.map

package/lib/styles/scroll-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,msRAqMjC,CAAC"}
+{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,2vRAqMjC,CAAC"}

package/lib/styles/step.d.ts

@@ -1,5 +1,5 @@
 /**
  * Step Component Styles
  */
-export declare const stepStyles = "\n:host {\n  width: var(--ty-wizard-width, 100%);\n  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const stepStyles = "\n:host {\n  width: var(--ty-wizard-width, 100%);\n  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=step.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,UAAU,uiKA4CtB,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,UAAU,+lKA4CtB,CAAC"}

package/lib/styles/switch.js

@@ -61,7 +61,7 @@ ${inputStyles}
   height: 20px;
   border-radius: 999px;
   background: var(--ty-color-neutral-soft, var(--ty-input-border));
-  transition: background-color 0.18s ease-in-out;
+  transition: var(--ty-local-transition, background-color 0.18s ease-in-out);
   box-sizing: border-box;
 }
 
@@ -75,7 +75,7 @@ ${inputStyles}
   border-radius: 50%;
   background: white;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: transform 0.18s ease-in-out, background-color 0.18s ease-in-out;
+  transition: var(--ty-local-transition, transform 0.18s ease-in-out, background-color 0.18s ease-in-out);
 }
 
 /* ===== CHECKED STATE ===== */

package/lib/styles/tab.d.ts

@@ -1,5 +1,5 @@
 /**
  * Tab Component Styles
  */
-export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=tab.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,SAAS,qhKA6CrB,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,SAAS,6kKA6CrB,CAAC"}

package/lib/styles/tabs.d.ts

@@ -9,5 +9,5 @@
  * - Responsive design with prefers-reduced-motion support
  * - Fully customizable via CSS Parts (::part)
  */
-export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Bottom placement reverses the order */\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* ===================================== */\n/* Tab Buttons Container */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n  /* For absolute positioned marker */\n  \n  /* Default minimal styling - customize via ::part(buttons-container) */\n  border-bottom: 1px solid var(--ty-border);\n  background: transparent;\n}\n\n/* Bottom placement moves border to top */\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* ===================================== */\n/* Marker Wrapper */\n/* Expose as CSS Part for custom marker styling */\n/* ===================================== */\n\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Default marker - simple underline */\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot=\"marker\"])) .default-marker {\n  display: none;\n}\n\n/* User's marker element fills the wrapper */\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* ===================================== */\n/* Tab Buttons */\n/* ===================================== */\n\n.tab-button {\n  min-width: 120px;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: color 200ms, background-color 200ms;\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-button.overflow-hidden {\n  display: none;\n}\n\n/* ===================================== */\n/* Overflow \"more\" trigger + menu */\n/* ===================================== */\n\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  width: 40px;\n  min-width: 40px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-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\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\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}\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}\n\n/* Respect user's motion preferences */\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* ===================================== */\n/* Slotted Tab Panels */\n/* ===================================== */\n\n::slotted(ty-tab) {\n  width: var(--tabs-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n";
+export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Bottom placement reverses the order */\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* ===================================== */\n/* Tab Buttons Container */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n  /* For absolute positioned marker */\n  \n  /* Default minimal styling - customize via ::part(buttons-container) */\n  border-bottom: 1px solid var(--ty-border);\n  background: transparent;\n}\n\n/* Bottom placement moves border to top */\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* ===================================== */\n/* Marker Wrapper */\n/* Expose as CSS Part for custom marker styling */\n/* ===================================== */\n\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Default marker - simple underline */\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot=\"marker\"])) .default-marker {\n  display: none;\n}\n\n/* User's marker element fills the wrapper */\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* ===================================== */\n/* Tab Buttons */\n/* ===================================== */\n\n.tab-button {\n  min-width: 120px;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-button.overflow-hidden {\n  display: none;\n}\n\n/* ===================================== */\n/* Overflow \"more\" trigger + menu */\n/* ===================================== */\n\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  width: 40px;\n  min-width: 40px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-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\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\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}\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}\n\n/* Respect user's motion preferences */\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* ===================================== */\n/* Slotted Tab Panels */\n/* ===================================== */\n\n::slotted(ty-tab) {\n  width: var(--tabs-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n";
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU,6pLAiPtB,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU,yrLAiPtB,CAAC"}

package/lib/styles/tabs.js

@@ -107,7 +107,7 @@ export const tabsStyles = `
   cursor: pointer;
   font: inherit;
   color: var(--ty-text-soft);
-  transition: color 200ms, background-color 200ms;
+  transition: var(--ty-local-transition, color 200ms, background-color 200ms);
   white-space: nowrap;
   display: inline-flex;
   align-items: center;

package/lib/styles/textarea.d.ts

@@ -2,5 +2,5 @@
  * Styles for ty-textarea component
  * Enhanced textarea with auto-resize functionality
  */
-export declare const textareaStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  outline: none;\n\n  /* Default size (md) - refined spacing */\n  min-height: 80px;\n  /* Larger than input for multiline */\n  padding: 12px 12px;\n  /* Slightly larger padding for text areas */\n\n  /* Auto-resize specific styles */\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n  /* Disable manual resize by default */\n\n  /* Ensure consistent text wrapping */\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  /* Ensure it has the same text behavior as textarea */\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px 10px;\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px 10px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n  min-height: 80px;\n  padding: 12px 12px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px 14px;\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px 16px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n  transition:\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out;\n  /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition:\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
+export declare const textareaStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  outline: none;\n\n  /* Default size (md) - refined spacing */\n  min-height: 80px;\n  /* Larger than input for multiline */\n  padding: 12px 12px;\n  /* Slightly larger padding for text areas */\n\n  /* Auto-resize specific styles */\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n  /* Disable manual resize by default */\n\n  /* Ensure consistent text wrapping */\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  /* Ensure it has the same text behavior as textarea */\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px 10px;\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px 10px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n  min-height: 80px;\n  padding: 12px 12px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px 14px;\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px 16px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out);\n  /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out);\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,mqTA0X1B,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,uvTA0X1B,CAAA"}

package/lib/styles/textarea.js

@@ -29,7 +29,7 @@ export const textareaStyles = `
   border: 1px solid var(--input-border, var(--ty-input-border));
   border-radius: var(--ty-radius-base);
   background: var(--input-bg, var(--ty-input-bg));
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
 }
 
 /* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing
@@ -358,20 +358,20 @@ textarea:focus-visible {
 
 /* Smooth height transitions for auto-resize */
 textarea {
-  transition:
+  transition: var(--ty-local-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;
+    height 0.1s ease-out);
   /* Smooth height changes */
 }
 
 /* Disable height transition on focus to avoid jarring effect */
 textarea:focus {
-  transition:
+  transition: var(--ty-local-transition,
     border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out,
-    background-color 0.15s ease-in-out;
+    background-color 0.15s ease-in-out);
 }
 
 /* For users who prefer reduced motion, disable height transitions */

package/lib/styles/wizard.d.ts

@@ -21,5 +21,5 @@
  * (--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  /* 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: 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";
+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

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

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