tyrell-components 1.0.0-TC44 → 1.0.0-TC46

package/lib/styles/icon.js

@@ -1,28 +1,20 @@
-/**
- * Icon Component Styles
- * PORTED FROM: clj/ty/components/icon.css
- */
 export const iconStyles = `
 :host {
   /* Display & Layout - CRITICAL: No containment to prevent paint deferral */
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
   
-  /* Dimensions with CSS variable support for flexibility */
   width: var(--ty-icon-size, 1em);
   height: var(--ty-icon-size, 1em);
   
-  /* Enforce square aspect ratio */
   aspect-ratio: 1 / 1;
   
   
-  /* Color & Transitions */
   color: inherit;
   transition: color var(--ty-transition-fast);
   
-  /* Flex Behavior */
   flex-shrink: 0;
   
   /* Visibility - Force immediate rendering */
@@ -58,12 +50,6 @@ export const iconStyles = `
   display: block;
 }
 
-/* When used in slots, ensure proper display */
-:host([slot]) {
-  display: inline-flex;
-}
-
-/* Size variants via CSS classes on the host */
 :host(.icon-xs) {
   width: 0.75em;
   height: 0.75em;
@@ -150,17 +136,14 @@ export const iconStyles = `
   height: 96px;
 }
 
-/* Spinning animation - default tempo */
 :host(.icon-spin) {
   animation: icon-spin 1s linear infinite;
 }
 
-/* Spinning animation - slow tempo */
 :host(.icon-spin.icon-tempo-slow) {
   animation: icon-spin 2s linear infinite;
 }
 
-/* Spinning animation - fast tempo */
 :host(.icon-spin.icon-tempo-fast) {
   animation: icon-spin 0.5s linear infinite;
 }
@@ -175,17 +158,14 @@ export const iconStyles = `
   }
 }
 
-/* Pulse animation - default tempo */
 :host(.icon-pulse) {
   animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-/* Pulse animation - slow tempo */
 :host(.icon-pulse.icon-tempo-slow) {
   animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-/* Pulse animation - fast tempo */
 :host(.icon-pulse.icon-tempo-fast) {
   animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -207,12 +187,10 @@ export const iconStyles = `
   user-select: none;
 }
 
-/* Allow pointer events to pass through by default */
 :host(:not(.icon-clickable)) {
   pointer-events: none;
 }
 
-/* Clickable icons */
 :host(.icon-clickable) {
   cursor: pointer;
   pointer-events: auto;
@@ -227,15 +205,12 @@ export const iconStyles = `
   transform: scale(0.95);
 }
 
-/* Disabled state */
 :host(.icon-disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* Block display variant */
 :host(.icon-block) {
   display: block;
 }
 `;
-//# sourceMappingURL=icon.js.map

package/lib/styles/input.d.ts

@@ -1,9 +1,4 @@
-/**
- * Input Component Styles
- * PORTED FROM: clj/ty/components/input.css
- * Phase A: Regular input styles only (no checkbox, no numeric formatting)
- */
+/** Input Component Styles */
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const inputCustomFlavorCss: (base: string) => string;
 export declare const inputStyles: string;
-//# sourceMappingURL=input.d.ts.map

package/lib/styles/input.js

@@ -1,24 +1,4 @@
-/**
- * Input Component Styles
- * PORTED FROM: clj/ty/components/input.css
- * Phase A: Regular input styles only (no checkbox, no numeric formatting)
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules only set --input-accent (border), --input-accent-bold
-   (hover/focus border), and --input-ring (focus shadow); the wrapper base
-   rules consume them. They double as the per-instance override API:
-   `ty-input { --input-accent: … }`. Neutral is skipped — it IS the default
-   chrome (--ty-input-* tokens), and input's auto-danger-on-error logic
-   relies on neutral being the unstyled state.
-
-   Fallback flavor `fb` is used for custom flavors: suffixed tokens fall
-   back to the custom base color first (a flavor defining only
-   --ty-color-X still gets sensible hover/focus), then to neutral.
-
-   Emphasis ladder mirrors the neutral chrome (faint rest → soft hover →
-   focus + ring): a flavored field rests on its -soft shade and only
-   escalates to the full color on hover/focus — a resting field shouldn't
-   shout its full-saturation border (tones shift the whole ladder). */
 const inputFlavor = (f, fb) => {
     const c = (s) => fb
         ? s
@@ -45,7 +25,6 @@ const inputFlavor = (f, fb) => {
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
 :host {
@@ -69,8 +48,6 @@ export const inputStyles = `
   box-sizing: border-box;
 }
 
-/* ===== LABEL STYLING ===== */
-
 .ty-field-label {
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
@@ -83,7 +60,6 @@ export const inputStyles = `
   align-items: center;
 }
 
-/* Required indicator - using SVG icon */
 .required-icon {
   display: inline-flex;
   align-items: center;
@@ -99,12 +75,10 @@ export const inputStyles = `
   height: 100%;
 }
 
-/* ===== INPUT WRAPPER WITH SLOTS ===== */
-
 .input-wrapper {
   display: flex;
   align-items: center;
-  gap: 0.5rem; /* No gap by default */
+  gap: 0.5rem;
   width: 100%;
   box-sizing: border-box;
   border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
@@ -112,7 +86,6 @@ export const inputStyles = `
   background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
   transition: var(--ty-local-transition, all 0.15s ease-in-out);
 
-  /* Default size (md) */
   min-height: var(--ty-size-md);
   padding: 0 12px;
 }
@@ -141,9 +114,6 @@ export const inputStyles = `
   border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
 }
 
-/* ===== SLOT STYLING ===== */
-
-/* Style slotted content directly (no wrappers needed) */
 ::slotted([slot="start"]),
 ::slotted([slot="end"]) {
   display: flex;
@@ -181,15 +151,12 @@ export const inputStyles = `
   height: 1rem;
 }
 
-/* Icon sizing for slotted icons */
 ::slotted(ty-icon) {
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
 
-/* ===== ERROR MESSAGE STYLING ===== */
-
 .error-message {
   font-size: var(--ty-font-xs);
   line-height: var(--ty-leading-xs);
@@ -199,7 +166,6 @@ export const inputStyles = `
   padding-left: 12px;
 }
 
-/* Error state for wrapper */
 .input-wrapper.error {
   border-color: var(--ty-color-danger);
   background: var(--ty-bg-danger-soft);
@@ -210,10 +176,8 @@ export const inputStyles = `
   box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
 }
 
-/* ===== INPUT BASE STYLING ===== */
-
 input {
-  /* Reset and base styles — Linear-paired typography */
+  /* Linear-paired typography */
   flex: 1;
   min-width: 0;
   box-sizing: border-box;
@@ -241,21 +205,16 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-/* Disabled state */
 input:disabled {
   cursor: not-allowed;
   color: var(--input-disabled-color, var(--ty-input-disabled-color));
 }
 
-/* Placeholder styling */
 input::placeholder {
   color: var(--input-placeholder, var(--ty-input-placeholder));
   font-weight: 400;
 }
 
-/* ===== SIZE MODIFIERS ===== */
-
-/* Small */
 .input-wrapper.sm {
   min-height: var(--ty-size-sm);
   padding: 0 10px;
@@ -268,7 +227,6 @@ input::placeholder {
   letter-spacing: var(--ty-tracking-sm);
 }
 
-/* Medium (default) */
 .input-wrapper.md {
   min-height: var(--ty-size-md);
   padding: 0 12px;
@@ -281,7 +239,6 @@ input::placeholder {
   letter-spacing: var(--ty-tracking-sm);
 }
 
-/* Large */
 .input-wrapper.lg {
   min-height: var(--ty-size-lg);
   padding: 0 14px;
@@ -294,31 +251,25 @@ input::placeholder {
   letter-spacing: var(--ty-tracking-base);
 }
 
-/* ===== SEMANTIC FLAVOR MODIFIERS (set --input-accent*, consumed above) ===== */
+/* Semantic flavor modifiers set --input-accent*, consumed above */
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f)).join("")}
 
-/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
-
 input:focus-visible {
   outline: none;
 }
 
-/* High contrast mode support */
 @media (prefers-contrast: high) {
   .input-wrapper {
     border-width: 2px;
   }
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   .input-wrapper {
     transition: none;
   }
 }
 
-/* ===== RESPONSIVE BEHAVIOR ===== */
-
 @media (max-width: 640px) {
   .input-wrapper.lg {
     min-height: 40px;
@@ -356,4 +307,3 @@ input:focus-visible {
   }
 }
 `;
-//# sourceMappingURL=input.js.map

package/lib/styles/modal.d.ts

@@ -4,5 +4,4 @@
  * CSS for the modal component wrapper.
  * The modal is a pure wrapper - all content styling is user-defined.
  */
-export declare const modalStyles = "\n/* Modal Host Styling */\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n  /* CSS variables are now auto-generated via the with-vars? option */\n}\n\n/* ===== CLOSE BUTTON STYLING ===== */\n/* This is part of the modal wrapper functionality, not user content styling */\n\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* ===== DIALOG ELEMENT - PURE WRAPPER ===== */\n/* Modal dialog - provides only essential modal functionality without styling user content */\n\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Modal positioning - centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  /* Layer management */\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* ===== BACKDROP STYLING ===== */\n/* Backdrop is part of modal functionality, not user content */\n\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* ===== MODAL CONTENT CONTAINER ===== */\n/* Minimal container - no styling imposed on user content */\n\n.modal-content {\n  color: var(--ty-text);\n}\n\n/* ===== ANIMATION KEYFRAMES ===== */\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-//# sourceMappingURL=modal.d.ts.map
+export declare const modalStyles = "\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n}\n\n/* Part of the modal wrapper functionality, not user content styling */\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* Pure wrapper: only essential modal functionality, no styling of user content */\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* Backdrop is part of modal functionality, not user content */\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* Minimal container - no styling imposed on user content */\n.modal-content {\n  color: var(--ty-text);\n}\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";

package/lib/styles/modal.js

@@ -1,20 +1,10 @@
-/**
- * Modal Styles
- *
- * CSS for the modal component wrapper.
- * The modal is a pure wrapper - all content styling is user-defined.
- */
 export const modalStyles = `
-/* Modal Host Styling */
 :host {
   display: contents;
   /* Don't interfere with layout */
-  /* CSS variables are now auto-generated via the with-vars? option */
 }
 
-/* ===== CLOSE BUTTON STYLING ===== */
-/* This is part of the modal wrapper functionality, not user content styling */
-
+/* Part of the modal wrapper functionality, not user content styling */
 .close-button {
   position: absolute;
   top: -8px;
@@ -70,9 +60,7 @@ export const modalStyles = `
   visibility: hidden;
 }
 
-/* ===== DIALOG ELEMENT - PURE WRAPPER ===== */
-/* Modal dialog - provides only essential modal functionality without styling user content */
-
+/* Pure wrapper: only essential modal functionality, no styling of user content */
 .ty-modal-dialog {
   /* Reset default dialog styles */
   padding: 18px;
@@ -80,13 +68,12 @@ export const modalStyles = `
   margin: 0;
   background: transparent;
 
-  /* Modal positioning - centered */
+  /* Centered */
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  /* Layer management */
   z-index: 1000;
   overflow: hidden;
 
@@ -97,9 +84,7 @@ export const modalStyles = `
   outline: none;
 }
 
-/* ===== BACKDROP STYLING ===== */
 /* Backdrop is part of modal functionality, not user content */
-
 .ty-modal-dialog::backdrop {
   background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));
   backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));
@@ -112,15 +97,11 @@ export const modalStyles = `
   backdrop-filter: none;
 }
 
-/* ===== MODAL CONTENT CONTAINER ===== */
 /* Minimal container - no styling imposed on user content */
-
 .modal-content {
   color: var(--ty-text);
 }
 
-/* ===== ANIMATION KEYFRAMES ===== */
-
 @keyframes ty-modal-backdrop-enter {
   from {
     opacity: 0;
@@ -131,4 +112,3 @@ export const modalStyles = `
   }
 }
 `;
-//# sourceMappingURL=modal.js.map

package/lib/styles/option.d.ts

@@ -1,6 +1,2 @@
-/**
- * Option Component Styles
- * PORTED FROM: clj/ty/components/option.css
- */
-export declare const optionStyles = "\n/* Ty Option Component Styles */\n\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  /* Ensure content is clickable */\n  cursor: pointer;\n  user-select: none;\n\n  /* Smooth transitions */\n  transition: var(--ty-transition-all);\n\n  /* Text styling \u2014 Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n/* Ensure nested elements inherit proper styling */\n.option-content * {\n  pointer-events: none;\n}\n";
-//# sourceMappingURL=option.d.ts.map
+/** Option Component Styles */
+export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";

package/lib/styles/option.js

@@ -1,10 +1,4 @@
-/**
- * Option Component Styles
- * PORTED FROM: clj/ty/components/option.css
- */
 export const optionStyles = `
-/* Ty Option Component Styles */
-
 .option-content {
   display: flex;
   align-items: center;
@@ -13,14 +7,12 @@ export const optionStyles = `
   box-sizing: border-box;
   width: 100%;
 
-  /* Ensure content is clickable */
   cursor: pointer;
   user-select: none;
 
-  /* Smooth transitions */
   transition: var(--ty-transition-all);
 
-  /* Text styling — Linear-paired typography */
+  /* Linear-paired typography */
   color: var(--ty-text);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
@@ -81,9 +73,7 @@ export const optionStyles = `
 
 .option-content[hidden] {}
 
-/* Ensure nested elements inherit proper styling */
 .option-content * {
   pointer-events: none;
 }
 `;
-//# sourceMappingURL=option.js.map

package/lib/styles/popup.d.ts

@@ -4,5 +4,4 @@
  * Popup component with dropdown-like behavior and tooltip positioning.
  * Uses dialog element for top layer rendering like dropdown and date-picker.
  */
-export declare const popupStyles = "\n/* Popup component with dropdown-like behavior and tooltip positioning */\n/* Uses dialog element for top layer rendering like dropdown and date-picker */\n\n.popup-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n\n  /* Reset dialog defaults */\n  margin: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n\n  /* Shadow infrastructure - provide space for user shadows */\n  padding: var(--popup-padding, 16px);\n\n  /* Hidden by default - even when [open] (for positioning phase) */\n  visibility: hidden;\n  opacity: 0;\n  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n  /* Smooth transitions */\n  transition:\n    opacity 150ms ease-out,\n    visibility 150ms ease-out,\n    transform 150ms ease-out;\n\n  /* Prevent interactions when hidden */\n  pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n  top: var(--popup-y, 0px);\n  left: var(--popup-x, 0px);\n}\n\n/* Apply scale for entrance animation (right before .open) */\n.popup-dialog.preparing-animation {\n  transform: scale(0.95);\n}\n\n/* When open - smooth entrance animation */\n.popup-dialog.open {\n  visibility: visible;\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n  background: transparent;\n}\n\n/* Inner container - neutral structural container */\n.popup-container {\n  /* No default styling - just provides structure */\n  /* Users control all visual aspects via slotted content */\n  display: contents;\n}\n\n/* Content slot styling */\n#popup-content {\n  /* Allow slotted content to define its own styling */\n  display: contents;\n}\n\n/* Remove default styling from slotted content - users have full control */\n#popup-content ::slotted(*) {\n  /* Remove default styling that conflicts with user styling */\n  /* Users now have complete control over popup appearance */\n  /* background: unset; */\n  /* border: unset; */\n  /* box-shadow: unset; */\n\n  /* Only maintain essential positioning */\n  position: relative;\n\n  /* Prevent content from being too wide - still helpful */\n  max-width: min(400px, 90vw);\n  max-height: min(500px, 80vh);\n  overflow: auto;\n}\n";
-//# sourceMappingURL=popup.d.ts.map
+export declare const popupStyles = "\n.popup-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n\n  /* Reset dialog defaults */\n  margin: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n\n  /* Shadow infrastructure - provide space for user shadows */\n  padding: var(--popup-padding, 16px);\n\n  /* Hidden by default - even when [open] (for positioning phase) */\n  visibility: hidden;\n  opacity: 0;\n  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n  transition:\n    opacity 150ms ease-out,\n    visibility 150ms ease-out,\n    transform 150ms ease-out;\n\n  /* Prevent interactions when hidden */\n  pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n  top: var(--popup-y, 0px);\n  left: var(--popup-x, 0px);\n}\n\n/* Apply scale for entrance animation (right before .open) */\n.popup-dialog.preparing-animation {\n  transform: scale(0.95);\n}\n\n.popup-dialog.open {\n  visibility: visible;\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n  background: transparent;\n}\n\n/* Neutral structural container \u2014 users control all visuals via slotted content */\n.popup-container {\n  display: contents;\n}\n\n/* Slotted content defines its own styling */\n#popup-content {\n  display: contents;\n}\n\n/* Users have complete control over the popup's appearance; only essential\n   positioning is imposed here. */\n#popup-content ::slotted(*) {\n  position: relative;\n\n  /* Prevent content from being too wide - still helpful */\n  max-width: min(400px, 90vw);\n  max-height: min(500px, 80vh);\n  overflow: auto;\n}\n";

package/lib/styles/popup.js

@@ -1,13 +1,4 @@
-/**
- * Popup Component Styles
- *
- * Popup component with dropdown-like behavior and tooltip positioning.
- * Uses dialog element for top layer rendering like dropdown and date-picker.
- */
 export const popupStyles = `
-/* Popup component with dropdown-like behavior and tooltip positioning */
-/* Uses dialog element for top layer rendering like dropdown and date-picker */
-
 .popup-dialog {
   position: fixed;
   top: 0;
@@ -28,7 +19,6 @@ export const popupStyles = `
   opacity: 0;
   /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */
 
-  /* Smooth transitions */
   transition:
     opacity 150ms ease-out,
     visibility 150ms ease-out,
@@ -49,7 +39,6 @@ export const popupStyles = `
   transform: scale(0.95);
 }
 
-/* When open - smooth entrance animation */
 .popup-dialog.open {
   visibility: visible;
   opacity: 1;
@@ -62,28 +51,19 @@ export const popupStyles = `
   background: transparent;
 }
 
-/* Inner container - neutral structural container */
+/* Neutral structural container — users control all visuals via slotted content */
 .popup-container {
-  /* No default styling - just provides structure */
-  /* Users control all visual aspects via slotted content */
   display: contents;
 }
 
-/* Content slot styling */
+/* Slotted content defines its own styling */
 #popup-content {
-  /* Allow slotted content to define its own styling */
   display: contents;
 }
 
-/* Remove default styling from slotted content - users have full control */
+/* Users have complete control over the popup's appearance; only essential
+   positioning is imposed here. */
 #popup-content ::slotted(*) {
-  /* Remove default styling that conflicts with user styling */
-  /* Users now have complete control over popup appearance */
-  /* background: unset; */
-  /* border: unset; */
-  /* box-shadow: unset; */
-
-  /* Only maintain essential positioning */
   position: relative;
 
   /* Prevent content from being too wide - still helpful */
@@ -92,4 +72,3 @@ export const popupStyles = `
   overflow: auto;
 }
 `;
-//# sourceMappingURL=popup.js.map

package/lib/styles/radio.d.ts

@@ -7,4 +7,3 @@
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const radioCustomFlavorCss: (base: string) => string;
 export declare const radioStyles: string;
-//# sourceMappingURL=radio.d.ts.map

package/lib/styles/radio.js

@@ -1,15 +1,5 @@
-/**
- * Radio Group + Radio Styles
- *
- * ty-radio-group: optional label + vertical/horizontal stack of radios + error message
- * ty-radio: circle with inner dot when checked
- */
 import { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
-/* Flavor rules only set --radio-color (checked border + inner dot); base
-   rules below consume it. Doubles as the per-instance override API:
-   `ty-radio { --radio-color: … }`. Fallback flavor `fb` is used for custom
-   flavors so missing tokens degrade to neutral. */
 const radioFlavor = (f, fb) => {
     const tok = (s) => fb
         ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
@@ -20,7 +10,6 @@ const radioFlavor = (f, fb) => {
 :host([flavor="${f}-"]) { --radio-color: ${tok("-soft")}; }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const radioCustomFlavorCss = (base) => radioFlavor(base, "neutral");
 export const radioStyles = `
 ${inputStyles}
@@ -38,7 +27,6 @@ ${inputStyles}
   width: 100%;
 }
 
-/* ===== RADIO GROUP ===== */
 .radio-group-container {
   display: flex;
   flex-direction: column;
@@ -90,7 +78,7 @@ ${inputStyles}
   height: 100%;
 }
 
-/* ===== RADIO ITEM (just the circle) ===== */
+/* A radio item is just the circle */
 .radio-container {
   display: inline-block;
   cursor: pointer;
@@ -144,7 +132,6 @@ ${inputStyles}
   transform: translate(-50%, -50%) scale(1);
 }
 
-/* Size variants */
 .radio-container.xs .radio-circle { width: 14px; height: 14px; }
 .radio-container.xs .radio-circle::after { width: 6px; height: 6px; }
 
@@ -160,4 +147,3 @@ ${inputStyles}
 /* Flavor variants — set --radio-color, consumed by the base rules above */
 ${FLAVORS.map((f) => radioFlavor(f)).join("")}
 `;
-//# sourceMappingURL=radio.js.map

package/lib/styles/resize-observer.d.ts

@@ -2,5 +2,4 @@
  * TyResizeObserver styles
  * Minimal styling - just ensures component participates in layout
  */
-export declare const resizeObserverStyles = "\n:host {\n  /* Default to block display, user can override */\n  display: block;\n  /* Ensure the component can participate in layout */\n  position: relative;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  /* No default styling - preserve natural layout */\n}\n";
-//# sourceMappingURL=resize-observer.d.ts.map
+export declare const resizeObserverStyles = "\n:host {\n  /* Default to block display, user can override */\n  display: block;\n  position: relative;\n}\n\n::slotted(*) {\n  /* No default styling - preserve natural layout */\n}\n";

package/lib/styles/resize-observer.js

@@ -1,18 +1,11 @@
-/**
- * TyResizeObserver styles
- * Minimal styling - just ensures component participates in layout
- */
 export const resizeObserverStyles = `
 :host {
   /* Default to block display, user can override */
   display: block;
-  /* Ensure the component can participate in layout */
   position: relative;
 }
 
-/* Slot content styling */
 ::slotted(*) {
   /* No default styling - preserve natural layout */
 }
 `;
-//# sourceMappingURL=resize-observer.js.map

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

@@ -2,5 +2,4 @@
  * 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: 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
+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: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/* hide-scrollbar: hides native, no custom */\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/* custom-scrollbar: hides native */\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: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.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@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\n/* Vertical track */\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/* Horizontal track */\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/* Touch devices: hide the custom scrollbar */\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@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";