tyrell-components 1.0.0-RC12 → 1.0.0-RC13

package/lib/styles/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KzB,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiPzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqCH,eAAO,MAAM,SAAS,QA2QrB,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqCH,eAAO,MAAM,SAAS,QA8QrB,CAAC"}

package/lib/styles/tag.js

@@ -52,7 +52,10 @@ export const tagStyles = `
   gap: var(--ty-spacing-1);
   /* Default pill shape - can be overridden */
   border-radius: var(--ty-radius-full);
-  font-weight: var(--ty-font-medium);
+  /* Mode-flipped weight dial (tyrell.css): 440 light / 400 dark. Chips are
+     labels, not actions — they run lighter than buttons. Override with
+     --ty-weight-label at any scope. */
+  font-weight: var(--ty-weight-label, 440);
   text-align: center;
   white-space: nowrap;
   user-select: none;

package/lib/styles/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;gDACgD;AAChD,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;AAE5D,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC;WACtB,CAAC,CAAC,WAAW,EAAE;iBACT,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;0BACQ,CAAC;gCACK,CAAC;uCACM,CAAC;;iBAEvB,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;iBACD,CAAC;iBACD,CAAC;4BACU,CAAC;;iBAEZ,CAAC;iBACD,CAAC;iBACD,CAAC;yCACuB,CAAC;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+LvB,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EtC,CAAC"}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;gDACgD;AAChD,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;AAE5D,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC;WACtB,CAAC,CAAC,WAAW,EAAE;iBACT,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;0BACQ,CAAC;gCACK,CAAC;uCACM,CAAC;;iBAEvB,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;iBACD,CAAC;iBACD,CAAC;4BACU,CAAC;;iBAEZ,CAAC;iBACD,CAAC;iBACD,CAAC;yCACuB,CAAC;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkMvB,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EtC,CAAC"}

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/tooltip.d.ts

@@ -1,8 +1,10 @@
 /**
  * Tooltip Styles
  *
- * Bold, button-like tooltips with high contrast and semantic colors.
- * Designed to grab attention and provide clear, readable information.
+ * The tooltip popover is created in document.body (top-layer Popover API)
+ * and styled inline by the component — see applyFlavorStyles() in
+ * components/tooltip.ts. The shadow root only needs the host to not affect
+ * layout.
  */
 import type { StyleContent } from '../types/common.js';
 export declare const tooltipStyles: StyleContent;

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

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

package/lib/styles/tooltip.js

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

package/lib/styles/tooltip.js.map

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

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  color: var(--ty-solid-success-fg, white);\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-wizard-active-accent);\n  border-color: var(--ty-color-primary-strong);\n  color: var(--ty-solid-primary-fg, white);\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated);\n  border-color: var(--ty-border);\n  color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-wizard-error-accent);\n  border-color: var(--ty-color-danger-strong);\n  color: var(--ty-solid-danger-fg, white);\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n/* ===================================== */\n/* Step Text Container                   */\n/* ===================================== */\n\n.step-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n}\n\n/* ===================================== */\n/* Step Label                            */\n/* ===================================== */\n\n.step-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: var(--ty-font-semibold, 600);\n  color: var(--ty-color-neutral);\n  transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-color-neutral);\n}\n\n/* ===================================== */\n/* Step Description                      */\n/* ===================================== */\n\n.step-description {\n  font-size: var(--ty-font-xs, 12px);\n  font-weight: var(--ty-font-normal, 400);\n  color: var(--ty-color-neutral);\n  transition: color 200ms;\n  text-align: center;\n  max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n  color: var(--ty-color-neutral-bold);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots    */\n/* ===================================== */\n\n::slotted([slot^=\"indicator-\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport                       */\n/* ===================================== */\n\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally)  */\n/* ===================================== */\n\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n  will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels                   */\n/* ===================================== */\n\n::slotted(ty-step) {\n  width: var(--ty-wizard-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences    */\n/* ===================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-overlay {\n    transition-duration: 0ms !important;\n  }\n\n  .step-circle {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-line {\n    transition-duration: 0ms !important;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+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,yzSAmUxB,CAAC"}
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,YAAY,o3TA+UxB,CAAC"}

package/lib/styles/wizard.js

@@ -187,7 +187,7 @@ export const wizardStyles = `
   justify-content: center;
   position: relative;
   z-index: 10;
-  transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
+  transition: var(--ty-local-transition, all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing));
   box-sizing: border-box;
   flex-shrink: 0;
 }
@@ -195,14 +195,23 @@ export const wizardStyles = `
 .step-circle[data-state="completed"] {
   background: var(--ty-wizard-completed-accent);
   border-color: var(--ty-color-success-strong);
-  color: var(--ty-solid-success-fg, white);
+  /* Derived from the accent this circle actually paints, not from
+     --ty-solid-success-fg: the two diverge in dark mode (--ty-solid-l
+     dims solid fills by 0.25 L), which stranded white text at 3.5:1. */
+  color: oklch(
+    from var(--ty-wizard-completed-accent)
+      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
+  );
   box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);
 }
 
 .step-circle[data-state="active"] {
   background: var(--ty-wizard-active-accent);
   border-color: var(--ty-color-primary-strong);
-  color: var(--ty-solid-primary-fg, white);
+  color: oklch(
+    from var(--ty-wizard-active-accent)
+      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
+  );
   box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);
 }
 
@@ -215,7 +224,10 @@ export const wizardStyles = `
 .step-circle[data-state="error"] {
   background: var(--ty-wizard-error-accent);
   border-color: var(--ty-color-danger-strong);
-  color: var(--ty-solid-danger-fg, white);
+  color: oklch(
+    from var(--ty-wizard-error-accent)
+      clamp(0, (var(--ty-solid-fg-threshold, 0.6) - l) * 1000, 1) 0 0
+  );
   box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);
 }
 
@@ -238,7 +250,7 @@ export const wizardStyles = `
   font-size: var(--ty-font-sm, 14px);
   font-weight: var(--ty-font-semibold, 600);
   color: var(--ty-color-neutral);
-  transition: color 200ms;
+  transition: var(--ty-local-transition, color 200ms);
 }
 
 .step-indicator[aria-selected="true"] .step-label {
@@ -257,7 +269,7 @@ export const wizardStyles = `
   font-size: var(--ty-font-xs, 12px);
   font-weight: var(--ty-font-normal, 400);
   color: var(--ty-color-neutral);
-  transition: color 200ms;
+  transition: var(--ty-local-transition, color 200ms);
   text-align: center;
   max-width: 120px;
 }

package/lib/styles/wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmU3B,CAAC"}
+{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+U3B,CAAC"}

package/lib/types/common.d.ts

@@ -6,7 +6,7 @@
  * for a softer shade — e.g. `primary`, `primary+`, `primary-`. Matches the
  * design system's `ty-bg-primary+` / `ty-text-primary-` class convention.
  */
-export declare const FLAVORS: readonly ["primary", "secondary", "success", "danger", "warning", "neutral"];
+export declare const FLAVORS: readonly ["primary", "success", "danger", "warning", "neutral"];
 export type FlavorBase = (typeof FLAVORS)[number];
 /**
  * A flavor with optional shade suffix: `primary | primary+ | primary-`.

package/lib/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"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"}

package/lib/types/common.js

@@ -6,9 +6,11 @@
  * for a softer shade — e.g. `primary`, `primary+`, `primary-`. Matches the
  * design system's `ty-bg-primary+` / `ty-text-primary-` class convention.
  */
+/* `secondary` was removed in TC37 — the built-in set is semantic-only.
+ * An aesthetic second accent is one flavor-pack away (see CSS_GUIDE →
+ * Custom Flavors); markup using flavor="secondary" degrades to neutral. */
 export const FLAVORS = [
     'primary',
-    'secondary',
     'success',
     'danger',
     'warning',

package/lib/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS;IACT,WAAW;IACX,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;CACD,CAAA"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH;;2EAE2E;AAC3E,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS;IACT,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;CACD,CAAA"}

package/lib/utils/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared inline SVG icons for shadow-DOM components.
+ *
+ * Kept inline (not the icon registry) because shadow roots must render
+ * without registry setup. Styling hooks target the wrapper element
+ * (e.g. `.required-icon svg`), never the svg's own classes.
+ */
+/** Lucide `asterisk` — required-field indicator. */
+export declare const REQUIRED_ICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 6v12\"/><path d=\"M17.196 9 6.804 15\"/><path d=\"m6.804 9 10.392 6\"/></svg>";
+//# sourceMappingURL=icons.d.ts.map

package/lib/utils/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/utils/icons.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,oDAAoD;AACpD,eAAO,MAAM,iBAAiB,4QAAwP,CAAC"}

package/lib/utils/icons.js

@@ -0,0 +1,10 @@
+/**
+ * Shared inline SVG icons for shadow-DOM components.
+ *
+ * Kept inline (not the icon registry) because shadow roots must render
+ * without registry setup. Styling hooks target the wrapper element
+ * (e.g. `.required-icon svg`), never the svg's own classes.
+ */
+/** Lucide `asterisk` — required-field indicator. */
+export const REQUIRED_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>`;
+//# sourceMappingURL=icons.js.map

package/lib/utils/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/utils/icons.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,oDAAoD;AACpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,qPAAqP,CAAC"}

package/lib/utils/loader-registry.d.ts

@@ -2,8 +2,8 @@
  * Global loader-icon registry.
  *
  * Set once at app bootstrap to override the default spinner SVG used by
- * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
- * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * every loading-aware component (`ty-button`, `ty-select`, etc.). Components
+ * call `getLoaderSvg()` on every render, so changing the
  * registered SVG affects future renders.
  *
  * The wrapper element rotates the SVG with `transform: rotate()`, so prefer

package/lib/utils/loader-registry.js

@@ -2,8 +2,8 @@
  * Global loader-icon registry.
  *
  * Set once at app bootstrap to override the default spinner SVG used by
- * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
- * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * every loading-aware component (`ty-button`, `ty-select`, etc.). Components
+ * call `getLoaderSvg()` on every render, so changing the
  * registered SVG affects future renders.
  *
  * The wrapper element rotates the SVG with `transform: rotate()`, so prefer

package/lib/utils/positioning.d.ts

@@ -116,4 +116,35 @@ export declare const placementPreferences: {
  * Tries all preference placements and returns the one that fits best
  */
 export declare function findBestPosition(options: PositionOptions): PositionResult;
+/**
+ * Below/above placement for trigger-anchored `<dialog>` popups.
+ *
+ * Unlike findBestPosition (12-placement engine for non-modal floats), these
+ * popups only ever open below or above their trigger, and their CSS anchors
+ * with `top:` when below but `bottom:` when above — so both conventions are
+ * returned and the caller picks by `below`.
+ */
+export interface AnchoredPopupOptions {
+    anchorRect: DOMRect | ElementRect;
+    popupWidth: number;
+    popupHeight: number;
+    /** Gap between trigger and popup edge (px, default 4) */
+    gap?: number;
+    /** Minimum distance from viewport edges (px, default 8) */
+    padding?: number;
+    /** Horizontal anchor edge: trigger's left edge ("start", default) or
+     *  right edge ("end"). Either way the result is clamped into the
+     *  viewport, same as before. */
+    align?: "start" | "end";
+}
+export interface AnchoredPopupPosition {
+    /** Popup left edge, viewport coords, clamped into view */
+    x: number;
+    /** CSS `top` value when below */
+    topY: number;
+    /** CSS `bottom` value when above */
+    bottomY: number;
+    below: boolean;
+}
+export declare function computeAnchoredPosition(o: AnchoredPopupOptions): AnchoredPopupPosition;
 //# sourceMappingURL=positioning.d.ts.map

package/lib/utils/positioning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../src/utils/positioning.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB,WAAW,GAAG,KAAK,GAAG,SAAS,GAC/B,aAAa,GAAG,OAAO,GAAG,WAAW,GACrC,cAAc,GAAG,QAAQ,GAAG,YAAY,GACxC,YAAY,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,WAAW,CAAC;IACxB,YAAY,EAAE,WAAW,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC;AAMnC;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,CAuDzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;aAI1B,SAAS,EAAE;aAIX,SAAS,EAAE;cAIX,SAAS,EAAE;CACjB,CAAC;AA0HF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,eAAe,GAAG,cAAc,CAuCzE"}
+{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../src/utils/positioning.ts"],"names":[],"mappings":"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"}

package/lib/utils/positioning.js

@@ -219,7 +219,26 @@ export function findBestPosition(options) {
     }
     return bestPosition;
 }
-// ============================================================================
-// Auto-Update Functionality
-// ============================================================================
+export function computeAnchoredPosition(o) {
+    const gap = o.gap ?? 4;
+    const padding = o.padding ?? 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceBelow = vh - o.anchorRect.bottom;
+    const spaceAbove = o.anchorRect.top;
+    // Below when it fits — and when neither side fits, the side with MORE room
+    // instead of blindly flipping up (a trigger near the viewport top used to
+    // clip the popup off-screen).
+    const below = spaceBelow >= o.popupHeight + gap + padding || spaceBelow >= spaceAbove;
+    // Anchor to the trigger's left edge ("start") or right edge ("end"),
+    // clamped into the viewport either way.
+    const rawX = o.align === "end" ? o.anchorRect.right - o.popupWidth : o.anchorRect.left;
+    const x = Math.max(padding, Math.min(rawX, vw - o.popupWidth - padding));
+    return {
+        x,
+        topY: o.anchorRect.bottom + gap,
+        bottomY: vh - o.anchorRect.top + gap,
+        below,
+    };
+}
 //# sourceMappingURL=positioning.js.map