tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/calendar.d.ts

@@ -2,5 +2,4 @@
  * Calendar Orchestration Styles
  * Simple container for navigation + month display
  */
-export declare const calendarStyles = "\n/* ============================================================================\n   Calendar Container\n   ============================================================================ */\n\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: system-ui, sans-serif;\n}\n\n/* ============================================================================\n   Responsive Adjustments\n   ============================================================================ */\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";
-//# sourceMappingURL=calendar.d.ts.map
+export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: inherit;\n  /* Nav is a fixed width and the grid is fit-content, so in any host wider\n     than them (a popup, a stretched cell) the default stretch alignment\n     left-pinned both. Centring keeps the block centred in whatever space it\n     gets \u2014 without widening the calendar itself to fill it. */\n  align-items: center;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";

package/lib/styles/calendar.js

@@ -1,28 +1,15 @@
-/**
- * Calendar Orchestration Styles
- * Simple container for navigation + month display
- */
 export const calendarStyles = `
-/* ============================================================================
-   Calendar Container
-   ============================================================================ */
-
 .calendar-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  box-sizing: border-box;
-  font-family: system-ui, sans-serif;
+display: flex;
+flex-direction: column;
+gap: 0.125rem;
+box-sizing: border-box;
+font-family: inherit;
+align-items: center;
 }
-
-/* ============================================================================
-   Responsive Adjustments
-   ============================================================================ */
-
 @media (max-width: 320px) {
-  .calendar-container {
-    gap: 0.375rem;
-  }
+.calendar-container {
+gap: 0.375rem;
+}
 }
 `;
-//# sourceMappingURL=calendar.js.map

package/lib/styles/checkbox.d.ts

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

package/lib/styles/checkbox.js

@@ -1,136 +1,87 @@
-/**
- * Checkbox Component Styles — self-contained (no inputStyles import).
- *
- * The checkbox is "just the tick": a single checkmark whose color/opacity
- * carries the state. Full flavor color when checked, faint when unchecked,
- * dash at mid-opacity when indeterminate, grayscale when disabled.
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules only set --checkbox-color (checked) / --checkbox-color-off
-   (unchecked) / --checkbox-ring (focus ring); the base rules below consume
-   them. Doubles as the per-instance override API: `ty-checkbox {
-   --checkbox-color: … }`. --checkbox-ring pre-resolves the color-mix() here
-   (rather than inlining a nested var(...,fallback) as a color-mix argument
-   directly in the box-shadow rule) — that nested form fails at
-   computed-value time in some engines. Fallback flavor `fb` is used for
-   custom flavors so missing tokens degrade to neutral. */
 const checkboxFlavor = (f, fb) => {
-    const tok = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    return `
+const tok = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+return `
 :host([flavor="${f}"])  { --checkbox-color: ${tok("")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
 :host([flavor="${f}+"]) { --checkbox-color: ${tok("-strong")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("-strong")} 25%, transparent); }
 :host([flavor="${f}-"]) { --checkbox-color: ${tok("-soft")}; --checkbox-color-off: ${tok("-faint")}; --checkbox-ring: color-mix(in oklab, ${tok("-soft")} 25%, transparent); }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const checkboxCustomFlavorCss = (base) => checkboxFlavor(base, "neutral");
 export const checkboxStyles = `
 :host {
-  display: inline-flex;
-  width: auto;
-  vertical-align: middle;
+display: inline-flex;
+width: auto;
+vertical-align: middle;
 }
-
 .checkbox-container {
-  display: inline-flex;
-  align-items: center;
-  outline: none;
-  transition: var(--ty-local-transition, all 0.15s ease-in-out);
-  user-select: none;
-  cursor: pointer;
-  border-radius: 6px;
-  gap: var(--ty-spacing-1);
-  /* Default (no flavor attribute) is neutral — defaults don't reflect to the
-     host attribute, so the fallbacks here carry the default look. */
-  color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
-}
-
+display: inline-flex;
+align-items: center;
+outline: none;
+transition: var(--ty-local-transition, all 0.15s ease-in-out);
+user-select: none;
+cursor: pointer;
+border-radius: 6px;
+gap: var(--ty-spacing-1);
+color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
+}
 .checkbox-container[aria-checked="true"] {
-  color: var(--checkbox-color, var(--ty-color-neutral));
+color: var(--checkbox-color, var(--ty-color-neutral));
 }
-
-/* Visible focus ring (keyboard) — .focused is toggled by the component.
-   Matches the checked-state color so a danger checkbox gets a red ring,
-   not a fixed primary one. */
 .checkbox-container.focused,
 .checkbox-container:focus-visible {
-  box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
+box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
 }
-
 .checkbox-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  transition: var(--ty-local-transition, color 0.15s ease-in-out);
-  pointer-events: none;
-  /* Let the container handle the click */
-}
-
-/* ===== SIZES ===== */
-
+display: flex;
+align-items: center;
+justify-content: center;
+color: inherit;
+transition: var(--ty-local-transition, color 0.15s ease-in-out);
+pointer-events: none;
+}
 .checkbox-container svg {
-  width: 16px;
-  height: 16px;
+width: 16px;
+height: 16px;
 }
-
 .checkbox-container.xs svg {
-  width: 12px;
-  height: 12px;
+width: 12px;
+height: 12px;
 }
-
 .checkbox-container.sm svg {
-  width: 14px;
-  height: 14px;
+width: 14px;
+height: 14px;
 }
-
 .checkbox-container.lg svg {
-  width: 20px;
-  height: 20px;
+width: 20px;
+height: 20px;
 }
-
 .checkbox-container.xl svg {
-  width: 24px;
-  height: 24px;
+width: 24px;
+height: 24px;
 }
-
-/* ===== SEMANTIC FLAVORS (set --checkbox-color[-off], consumed above) ===== */
 ${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
-
-/* ===== STATES ===== */
-
-/* Clean tick: no box outline, just the checkmark. Inactive = faint tick. */
 .checkbox-container:not([aria-checked="true"]) {
-  opacity: 0.35;
+opacity: 0.35;
 }
-
-/* Indeterminate (dash) sits between unchecked and checked */
 .checkbox-container[aria-checked="mixed"] {
-  opacity: 0.7;
+opacity: 0.7;
 }
-
-/* Disabled must stay distinguishable from merely-unchecked: grayscale kills
-   the flavor color, and disabled-unchecked drops below the unchecked 0.35. */
 .checkbox-container.disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
+pointer-events: none;
+cursor: not-allowed;
+opacity: 0.5;
+filter: grayscale(1);
 }
-
 .checkbox-container.disabled:not([aria-checked="true"]) {
-  opacity: 0.2;
+opacity: 0.2;
 }
-
-/* Error state */
 .checkbox-container.error .checkbox-icon {
-  color: var(--ty-color-danger);
+color: var(--ty-color-danger);
 }
-
 .checkbox-container.error:focus {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
+box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
 }
 `;
-//# sourceMappingURL=checkbox.js.map

package/lib/styles/copy.d.ts

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

package/lib/styles/copy.js

@@ -1,149 +1,110 @@
-/**
- * Copy Component Styles
- * Read-only field with copy-to-clipboard functionality
- * Extends input styles with copy-specific styling
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules only set --copy-color (button), --copy-color-hover, and
-   --copy-bg-hover (wrapper hover); the base rules below consume them.
-   Doubles as the per-instance override API. Fallback flavor `fb` is used
-   for custom flavors so missing tokens degrade to neutral. */
 const copyFlavor = (f, fb) => {
-    const c = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    const bg = (s) => fb
-        ? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
-        : `var(--ty-bg-${f}${s})`;
-    return `
+const c = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+const bg = (s) => fb
+? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
+: `var(--ty-bg-${f}${s})`;
+return `
 :host([flavor="${f}"])  { --copy-color: ${c("")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
 :host([flavor="${f}+"]) { --copy-color: ${c("-strong")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
 :host([flavor="${f}-"]) { --copy-color: ${c("-soft")}; --copy-color-hover: ${c("")}; --copy-bg-hover: ${bg("-soft")}; }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const copyCustomFlavorCss = (base) => copyFlavor(base, "neutral");
 export const copyStyles = `
-/* Copy field value display */
 .copy-field-value {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: none;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-/* Multiline variant */
+flex: 1;
+font-size: var(--ty-field-font);
+line-height: var(--ty-field-leading);
+letter-spacing: var(--ty-field-tracking);
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+user-select: none;
+padding: 0;
+margin: 0;
+background: transparent;
+border: none;
+color: inherit;
+font-family: inherit;
+}
 .copy-field-value.multiline {
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 200px;
-  overflow-y: auto;
+white-space: pre-wrap;
+word-break: break-word;
+max-height: 200px;
+overflow-y: auto;
 }
-
-/* Keep the copy button pinned to the top-right when content wraps to multiple lines */
 .input-wrapper:has(.copy-field-value.multiline) {
-  align-items: flex-start;
-  padding-top: 8px;
-  padding-bottom: 8px;
+align-items: flex-start;
+padding-top: 8px;
+padding-bottom: 8px;
 }
-
-/* Horizontal scroll variant - scroll long content instead of clipping with ellipsis */
 .copy-field-value.horizontal-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
+overflow-x: auto;
+overflow-y: hidden;
+text-overflow: clip;
+white-space: nowrap;
 }
-
-/* Multiline + horizontal scroll (e.g. code blocks): preserve lines, scroll both axes */
 .copy-field-value.multiline.horizontal-scroll {
-  white-space: pre;
-  word-break: normal;
-  overflow-y: auto;
+white-space: pre;
+word-break: normal;
+overflow-y: auto;
 }
-
-/* Hide scrollbars on scrollable value - content still scrolls, chrome stays clean */
 .copy-field-value.multiline,
 .copy-field-value.horizontal-scroll {
-  scrollbar-width: none; /* Firefox */
+scrollbar-width: none; 
 }
 .copy-field-value.multiline::-webkit-scrollbar,
 .copy-field-value.horizontal-scroll::-webkit-scrollbar {
-  display: none; /* Chrome/Safari */
-}
-
-/* Code format */
-.copy-field-value {
-  font-size: 0.8em;
+display: none; 
 }
-
-/* Hover state — flavor-soft background (primary by default) */
 .input-wrapper:not(.disabled):hover {
-  background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
-  transition: var(--ty-local-transition, background 0.2s ease);
+background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
+transition: var(--ty-local-transition, background 0.2s ease);
 }
-
-/* Copy button */
 .copy-button {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  color: var(--copy-color, var(--ty-text-soft));
-  transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
-  padding: 0;
-  margin: 0;
-}
-
+flex-shrink: 0;
+display: flex;
+align-items: center;
+justify-content: center;
+width: var(--ty-field-control);
+height: var(--ty-field-control);
+cursor: pointer;
+border: none;
+background: transparent;
+color: var(--copy-color, var(--ty-text-soft));
+transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
+padding: 0;
+margin: 0;
+}
 .copy-button:hover:not(.disabled) {
-  color: var(--copy-color-hover, var(--ty-text));
-  transform: scale(1.1);
+color: var(--copy-color-hover, var(--ty-text));
+transform: scale(1.1);
 }
-
 .copy-button.success {
-  color: var(--ty-color-success);
-  animation: copy-feedback 0.3s ease;
+color: var(--ty-color-success);
+animation: copy-feedback 0.3s ease;
 }
-
 .copy-button.error {
-  color: var(--ty-color-danger);
-  animation: copy-feedback 0.3s ease;
+color: var(--ty-color-danger);
+animation: copy-feedback 0.3s ease;
 }
-
 @keyframes copy-feedback {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.2); }
+0%, 100% { transform: scale(1); }
+50% { transform: scale(1.2); }
 }
-
 .copy-button svg {
-  width: 18px;
-  height: 18px;
+width: var(--ty-field-icon);
+height: var(--ty-field-icon);
 }
-
 .input-wrapper.disabled .copy-button {
-  cursor: not-allowed;
-  opacity: 0.5;
+cursor: not-allowed;
+opacity: 0.5;
 }
-
 .input-wrapper.disabled {
-  cursor: not-allowed;
+cursor: not-allowed;
 }
-
-/* ===== SEMANTIC FLAVORS (set --copy-*, consumed above) ===== */
 ${FLAVORS.map((f) => copyFlavor(f)).join("")}
 `;
-//# sourceMappingURL=copy.js.map

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

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