tyrell-components 1.0.0-TC44 → 1.0.0-TC46

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

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

package/lib/styles/calendar-navigation.js

@@ -1,12 +1,4 @@
-/**
- * Calendar Navigation Styles
- * Clean, modern design with proper visual hierarchy and size variants
- */
 export const calendarNavigationStyles = `
-/* ============================================================================
-   Size Variants (CSS Custom Properties)
-   ============================================================================ */
-
 /* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of
    use (NOT on :host) so consumers can override them from outside — this
    component is nested inside ty-calendar's shadow, so a :host default would
@@ -36,10 +28,6 @@ export const calendarNavigationStyles = `
   --nav-default-width: 360px;
 }
 
-/* ============================================================================
-   Main Navigation Header
-   ============================================================================ */
-
 .calendar-navigation-header {
   display: flex;
   align-items: center;
@@ -51,10 +39,7 @@ export const calendarNavigationStyles = `
   box-sizing: border-box;
 }
 
-/* ============================================================================
-   Navigation Groups (Left, Center, Right)
-   ============================================================================ */
-
+/* Navigation groups: left, center, right */
 .nav-group {
   display: flex;
   align-items: center;
@@ -71,10 +56,6 @@ export const calendarNavigationStyles = `
   justify-content: center;
 }
 
-/* ============================================================================
-   Navigation Buttons
-   ============================================================================ */
-
 .nav-btn {
   display: inline-flex;
   align-items: center;
@@ -112,17 +93,12 @@ export const calendarNavigationStyles = `
   outline-offset: 2px;
 }
 
-/* SVG sizing */
 .nav-btn svg {
   width: var(--nav-btn-icon-size);
   height: var(--nav-btn-icon-size);
   display: block;
 }
 
-/* ============================================================================
-   Month/Year Display (Center)
-   ============================================================================ */
-
 .month-year-display {
   font-size: var(--nav-font-size);
   font-weight: 600;
@@ -132,4 +108,3 @@ export const calendarNavigationStyles = `
   letter-spacing: -0.01em;
 }
 `;
-//# sourceMappingURL=calendar-navigation.js.map

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: system-ui, sans-serif;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";

package/lib/styles/calendar.js

@@ -1,12 +1,4 @@
-/**
- * Calendar Orchestration Styles
- * Simple container for navigation + month display
- */
 export const calendarStyles = `
-/* ============================================================================
-   Calendar Container
-   ============================================================================ */
-
 .calendar-container {
   display: flex;
   flex-direction: column;
@@ -15,14 +7,9 @@ export const calendarStyles = `
   font-family: system-ui, sans-serif;
 }
 
-/* ============================================================================
-   Responsive Adjustments
-   ============================================================================ */
-
 @media (max-width: 320px) {
   .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,19 +1,4 @@
-/**
- * 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}))`
@@ -24,7 +9,6 @@ const checkboxFlavor = (f, fb) => {
 :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 {
@@ -69,8 +53,6 @@ export const checkboxStyles = `
   /* Let the container handle the click */
 }
 
-/* ===== SIZES ===== */
-
 .checkbox-container svg {
   width: 16px;
   height: 16px;
@@ -96,11 +78,9 @@ export const checkboxStyles = `
   height: 24px;
 }
 
-/* ===== SEMANTIC FLAVORS (set --checkbox-color[-off], consumed above) ===== */
+/* 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;
@@ -124,7 +104,6 @@ ${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
   opacity: 0.2;
 }
 
-/* Error state */
 .checkbox-container.error .checkbox-icon {
   color: var(--ty-color-danger);
 }
@@ -133,4 +112,3 @@ ${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
   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,13 +1,4 @@
-/**
- * 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}))`
@@ -21,10 +12,8 @@ const copyFlavor = (f, fb) => {
 :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;
@@ -41,7 +30,6 @@ export const copyStyles = `
   line-height: inherit;
 }
 
-/* Multiline variant */
 .copy-field-value.multiline {
   white-space: pre-wrap;
   word-break: break-word;
@@ -56,7 +44,7 @@ export const copyStyles = `
   padding-bottom: 8px;
 }
 
-/* Horizontal scroll variant - scroll long content instead of clipping with ellipsis */
+/* Scroll long content instead of clipping with an ellipsis */
 .copy-field-value.horizontal-scroll {
   overflow-x: auto;
   overflow-y: hidden;
@@ -81,7 +69,6 @@ export const copyStyles = `
   display: none; /* Chrome/Safari */
 }
 
-/* Code format */
 .copy-field-value {
   font-size: 0.8em;
 }
@@ -92,7 +79,6 @@ export const copyStyles = `
   transition: var(--ty-local-transition, background 0.2s ease);
 }
 
-/* Copy button */
 .copy-button {
   flex-shrink: 0;
   display: flex;
@@ -143,7 +129,6 @@ export const copyStyles = `
   cursor: not-allowed;
 }
 
-/* ===== SEMANTIC FLAVORS (set --copy-*, consumed above) ===== */
+/* 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";

package/lib/styles/custom-scrollbar.js

@@ -1,12 +1,5 @@
-/**
- * Shared CSS for CustomScrollbar utility
- * Include this in any component that uses CustomScrollbar
- */
 export const customScrollbarStyles = `
-/* ===================================== */
-/* Custom Scrollbar - Vertical Track     */
-/* ===================================== */
-
+/* Vertical track */
 .ty-scrollbar-track-y {
   position: absolute;
   top: 0;
@@ -68,10 +61,7 @@ export const customScrollbarStyles = `
   background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
 
-/* ===================================== */
-/* Custom Scrollbar - Horizontal Track   */
-/* ===================================== */
-
+/* Horizontal track */
 .ty-scrollbar-track-x {
   position: absolute;
   bottom: 0;
@@ -133,10 +123,7 @@ export const customScrollbarStyles = `
   background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
 
-/* ===================================== */
-/* Touch devices - hide custom scrollbar */
-/* ===================================== */
-
+/* Touch devices: hide the custom scrollbar */
 @media (pointer: coarse) and (hover: none) {
   .ty-scrollbar-track-y,
   .ty-scrollbar-track-x {
@@ -144,7 +131,6 @@ export const customScrollbarStyles = `
   }
 }
 
-/* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .ty-scrollbar-track-y,
   .ty-scrollbar-track-x,
@@ -154,4 +140,3 @@ export const customScrollbarStyles = `
   }
 }
 `;
-//# sourceMappingURL=custom-scrollbar.js.map

package/lib/styles/date-picker.d.ts

@@ -1,8 +1,4 @@
-/**
- * Date Picker Component Styles
- * PORTED FROM: cljs/ty/components/date_picker.css
- */
+/** Date Picker Component Styles */
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const datePickerCustomFlavorCss: (base: string) => string;
 export declare const datePickerStyles: string;
-//# sourceMappingURL=date-picker.d.ts.map

package/lib/styles/date-picker.js

@@ -1,14 +1,4 @@
-/**
- * Date Picker Component Styles
- * PORTED FROM: cljs/ty/components/date_picker.css
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules only set --date-picker-accent (border), -accent-bold
-   (hover/focus border), and -ring (focus shadow); the stub base rules
-   consume them. Doubles as the per-instance override API. Neutral is
-   skipped — the 'default' flavor is the unstyled --ty-date-picker-* chrome.
-   Fallback flavor `fb` is used for custom flavors (suffixed tokens fall
-   back to the custom base color, then neutral). */
 const datePickerFlavor = (f, fb) => {
     const c = (s) => fb
         ? s
@@ -35,21 +25,16 @@ const datePickerFlavor = (f, fb) => {
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
-/* Date Picker Component Styles */
 :host {
   display: block;
   width: auto;
   min-width: 200px;
   font-family: var(--ty-font-sans);
 
-  /* ==========================================================================
-     Theming Tokens — Date Picker Stub
-     Thin shim over --ty-input-*. Override these to retheme just the date-picker
-     trigger without affecting other inputs.
-     ========================================================================== */
+  /* Theming tokens — date-picker stub. Thin shim over --ty-input-*: override
+     these to retheme just the date-picker trigger, not other inputs. */
   --ty-date-picker-bg: var(--ty-input-bg);
   --ty-date-picker-color: var(--ty-input-color);
   --ty-date-picker-placeholder: var(--ty-input-placeholder);
@@ -61,18 +46,14 @@ export const datePickerStyles = `
   --ty-date-picker-disabled-color: var(--ty-input-disabled-color);
   --ty-date-picker-radius: var(--ty-radius-md);
 
-  /* ==========================================================================
-     Theming Tokens — Calendar Popup Surface
-     Shared with ty-calendar / ty-calendar-month theming.
-     ========================================================================== */
+  /* Theming tokens — calendar popup surface. Shared with ty-calendar /
+     ty-calendar-month theming. */
   --ty-calendar-surface-bg: var(--ty-surface-floating);
   --ty-calendar-surface-border: var(--ty-input-border);
   --ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));
   --ty-calendar-surface-radius: var(--ty-radius-lg);
 
-  /* ==========================================================================
-     Theming Tokens — Time Section
-     ========================================================================== */
+  /* Theming tokens — time section */
   --ty-calendar-time-bg: transparent;
   --ty-calendar-time-border: var(--ty-border-faint);
   --ty-calendar-time-label-color: var(--ty-color-neutral);
@@ -117,7 +98,6 @@ export const datePickerStyles = `
   width: 100%;
 }
 
-/* Start-slot icon (leading content inside the date-picker stub) */
 .date-picker-stub ::slotted([slot="start"]) {
   display: flex;
   align-items: center;
@@ -132,7 +112,6 @@ export const datePickerStyles = `
   height: 1em;
 }
 
-/* Date picker stub (styled like dropdown) */
 .date-picker-stub {
   width: 100%;
   cursor: pointer;
@@ -172,7 +151,6 @@ export const datePickerStyles = `
   box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
 }
 
-/* Size variants */
 .date-picker-stub.sm {
   min-height: var(--ty-size-sm);
   font-size: var(--ty-font-xs);
@@ -190,7 +168,6 @@ export const datePickerStyles = `
 /* Flavor variants — set --date-picker-accent*, consumed by the stub rules above */
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
 
-/* Text content */
 .stub-text {
   flex: 1;
   white-space: nowrap;
@@ -205,7 +182,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   color: var(--ty-date-picker-placeholder);
 }
 
-/* Icons */
 .stub-icons {
   display: flex;
   align-items: center;
@@ -275,7 +251,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   box-sizing: border-box;
   padding: var(--calendar-padding, 8px);
 
-  /* Hidden by default */
   opacity: 0;
   transition: opacity 200ms ease;
 
@@ -284,7 +259,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   left: -1000px;
 }
 
-/* Direction-based positioning with CSS classes */
 .calendar-dialog.position-below {
   left: var(--calendar-x);
   top: var(--calendar-y);
@@ -305,7 +279,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   background: transparent
 }
 
-/* Calendar content container */
 .calendar-content {
   background-color: var(--ty-calendar-surface-bg);
   border: 1px solid var(--ty-calendar-surface-border);
@@ -317,7 +290,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   align-items: center;
 }
 
-/* Native date input for mobile */
 /* Native input is invisible — used only to trigger the OS picker */
 .native-date-input {
   position: absolute;
@@ -342,7 +314,6 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   cursor: pointer;
 }
 
-/* Time input section */
 .time-section {
   display: flex;
   min-height: 2.5rem;
@@ -397,4 +368,3 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   flex-shrink: 0;
 }
 `;
-//# sourceMappingURL=date-picker.js.map

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

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

package/lib/styles/file-upload.js

@@ -12,8 +12,6 @@ export const fileUploadStyles = `
   box-sizing: border-box;
 }
 
-/* ===== LABEL ===== */
-
 .upload-label {
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
@@ -33,8 +31,6 @@ export const fileUploadStyles = `
   line-height: 1;
 }
 
-/* ===== DROP ZONE ===== */
-
 .drop-zone {
   border: 2px dashed var(--ty-border);
   border-radius: var(--ty-radius-base);
@@ -92,8 +88,6 @@ export const fileUploadStyles = `
   background: var(--ty-bg-danger-);
 }
 
-/* ===== UPLOAD ICON ===== */
-
 .upload-icon {
   color: var(--ty-text-faint);
   width: 2.5rem;
@@ -110,8 +104,6 @@ export const fileUploadStyles = `
   height: 100%;
 }
 
-/* ===== HINT TEXT ===== */
-
 .upload-hint {
   color: var(--ty-text-soft);
   font-size: var(--ty-font-sm);
@@ -131,8 +123,6 @@ export const fileUploadStyles = `
   pointer-events: none;
 }
 
-/* ===== FILE LIST ===== */
-
 .file-list {
   display: flex;
   flex-direction: column;
@@ -212,8 +202,6 @@ export const fileUploadStyles = `
   height: 12px;
 }
 
-/* ===== ERROR MESSAGE ===== */
-
 .error-message {
   font-size: var(--ty-font-xs);
   line-height: var(--ty-leading-xs);
@@ -222,8 +210,6 @@ export const fileUploadStyles = `
   padding-left: 4px;
 }
 
-/* ===== ACCESSIBILITY ===== */
-
 @media (prefers-reduced-motion: reduce) {
   .drop-zone,
   .upload-icon,
@@ -238,4 +224,3 @@ export const fileUploadStyles = `
   }
 }
 `;
-//# sourceMappingURL=file-upload.js.map

package/lib/styles/icon.d.ts

@@ -1,6 +1,2 @@
-/**
- * Icon Component Styles
- * PORTED FROM: clj/ty/components/icon.css
- */
-export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  /* Dimensions with CSS variable support for flexibility */\n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  /* Enforce square aspect ratio */\n  aspect-ratio: 1 / 1;\n  \n  \n  /* Color & Transitions */\n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  /* Flex Behavior */\n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n  display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n  display: block;\n}\n";
-//# sourceMappingURL=icon.d.ts.map
+/** Icon Component Styles */
+export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";