tyrell-components 1.0.0-RC12 → 1.0.0-RC14

package/lib/styles/date-picker.js

@@ -1,19 +1,40 @@
-/**
- * Date Picker Component Styles
- * PORTED FROM: cljs/ty/components/date_picker.css
- */
+import { FLAVORS } from "../types/common.js";
+const datePickerFlavor = (f, fb) => {
+    const c = (s) => fb
+        ? s
+            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
+        : s
+            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
+            : `var(--ty-color-${f})`;
+    return `
+:host([flavor="${f}"]) {
+  --date-picker-accent: var(--ty-input-${f}-border, ${c("-soft")});
+  --date-picker-accent-bold: ${c("")};
+  --date-picker-ring: color-mix(in oklab, ${c("")} 15%, transparent);
+}
+:host([flavor="${f}+"]) {
+  --date-picker-accent: ${c("")};
+  --date-picker-accent-bold: ${c("-strong")};
+  --date-picker-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+}
+:host([flavor="${f}-"]) {
+  --date-picker-accent: ${c("-faint")};
+  --date-picker-accent-bold: ${c("-soft")};
+  --date-picker-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+}
+`;
+};
+export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
-/* Date Picker Component Styles */
 :host {
   display: block;
   width: auto;
   min-width: 200px;
+  font-family: inherit;
 
-  /* ==========================================================================
-     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);
@@ -25,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);
@@ -81,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;
@@ -96,7 +112,6 @@ export const datePickerStyles = `
   height: 1em;
 }
 
-/* Date picker stub (styled like dropdown) */
 .date-picker-stub {
   width: 100%;
   cursor: pointer;
@@ -106,9 +121,9 @@ export const datePickerStyles = `
   align-items: center;
   background: var(--ty-date-picker-bg);
   color: var(--ty-date-picker-color);
-  border: 1px solid var(--ty-date-picker-border);
+  border: 1px solid var(--date-picker-accent, var(--ty-date-picker-border));
   border-radius: var(--ty-date-picker-radius);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   font-weight: var(--ty-font-normal);
   line-height: var(--ty-line-height-tight);
@@ -120,7 +135,7 @@ export const datePickerStyles = `
 }
 
 .date-picker-stub:hover:not([disabled]):not(.open) {
-  border-color: var(--ty-date-picker-border-hover);
+  border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-hover));
 }
 
 .date-picker-stub[disabled] {
@@ -132,16 +147,8 @@ export const datePickerStyles = `
 
 .date-picker-stub:focus,
 .date-picker-stub.open {
-  border-color: var(--ty-date-picker-border-focus);
-  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);
-}
-
-/* Size variants */
-.date-picker-stub.xs {
-  min-height: var(--ty-size-xs);
-  font-size: var(--ty-font-xs);
-  padding: var(--ty-spacing-1) var(--ty-spacing-2);
-  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));
+  border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
+  box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
 }
 
 .date-picker-stub.sm {
@@ -158,90 +165,9 @@ export const datePickerStyles = `
   padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));
 }
 
-.date-picker-stub.xl {
-  min-height: var(--ty-size-xl);
-  font-size: var(--ty-font-lg);
-  padding: var(--ty-spacing-3) var(--ty-spacing-4);
-  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));
-}
-
-/* Flavor variants */
-/* Primary - Main brand focus state */
-.date-picker-stub.primary {
-  border-color: var(--ty-input-primary-border, var(--ty-color-primary));
-}
-
-.date-picker-stub.primary:hover:not([disabled]) {
-  border-color: var(--ty-color-primary-bold);
-}
-
-.date-picker-stub.primary:focus,
-.date-picker-stub.primary.open {
-  border-color: var(--ty-color-primary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);
-}
-
-/* Secondary - Supporting action focus state */
-.date-picker-stub.secondary {
-  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));
-}
-
-.date-picker-stub.secondary:hover:not([disabled]) {
-  border-color: var(--ty-color-secondary-bold);
-}
-
-.date-picker-stub.secondary:focus,
-.date-picker-stub.secondary.open {
-  border-color: var(--ty-color-secondary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);
-}
-
-/* Success - Valid/confirmed input state */
-.date-picker-stub.success {
-  border-color: var(--ty-input-success-border, var(--ty-color-success));
-}
-
-.date-picker-stub.success:hover:not([disabled]) {
-  border-color: var(--ty-color-success-bold);
-}
-
-.date-picker-stub.success:focus,
-.date-picker-stub.success.open {
-  border-color: var(--ty-color-success-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);
-}
-
-/* Danger - Error/invalid input state */
-.date-picker-stub.danger {
-  border-color: var(--ty-input-danger-border, var(--ty-color-danger));
-}
-
-.date-picker-stub.danger:hover:not([disabled]) {
-  border-color: var(--ty-color-danger-bold);
-}
-
-.date-picker-stub.danger:focus,
-.date-picker-stub.danger.open {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
-}
+/* Flavor variants — set --date-picker-accent*, consumed by the stub rules above */
+${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
 
-/* Warning - Caution/attention needed input state */
-.date-picker-stub.warning {
-  border-color: var(--ty-input-warning-border, var(--ty-color-warning));
-}
-
-.date-picker-stub.warning:hover:not([disabled]) {
-  border-color: var(--ty-color-warning-bold);
-}
-
-.date-picker-stub.warning:focus,
-.date-picker-stub.warning.open {
-  border-color: var(--ty-color-warning-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);
-}
-
-/* Text content */
 .stub-text {
   flex: 1;
   white-space: nowrap;
@@ -256,7 +182,6 @@ export const datePickerStyles = `
   color: var(--ty-date-picker-placeholder);
 }
 
-/* Icons */
 .stub-icons {
   display: flex;
   align-items: center;
@@ -282,13 +207,18 @@ export const datePickerStyles = `
   color: var(--ty-color-neutral-soft);
   cursor: pointer;
   border-radius: var(--ty-radius-sm);
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   pointer-events: auto;
 }
 
 .stub-clear:hover {
-  color: var(--ty-color-negative);
-  background-color: var(--ty-bg-negative-faint);
+  /* Clear is a destructive utility action, not the field's semantic flavor
+     — it stays neutral at rest and always warns danger-red on hover,
+     regardless of the field's own flavor. (--ty-color-negative/
+     --ty-bg-negative-faint used here previously don't exist as tokens —
+     this silently fell back to unstyled inherited color.) */
+  color: var(--ty-color-danger);
+  background-color: var(--ty-bg-danger-soft);
 }
 
 .stub-arrow {
@@ -297,16 +227,16 @@ export const datePickerStyles = `
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  color: var(--ty-color-neutral-soft);
+  color: var(--date-picker-accent, var(--ty-color-neutral-soft));
 }
 
 .date-picker-stub:hover .stub-arrow {
-  color: var(--ty-color-neutral);
+  color: var(--date-picker-accent-bold, var(--ty-color-neutral));
 }
 
 .date-picker-stub:focus .stub-arrow,
 .date-picker-stub.open .stub-arrow {
-  color: var(--ty-date-picker-border-focus);
+  color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
 }
 
 /* Calendar dialog (showModal positioning system) */
@@ -321,16 +251,22 @@ export const datePickerStyles = `
   box-sizing: border-box;
   padding: var(--calendar-padding, 8px);
 
-  /* Hidden by default */
   opacity: 0;
-  transition: opacity 200ms ease;
+  /* Entrance motion uses the individual scale/translate properties so it
+     composes with the collision-shift transform below (they apply first). */
+  scale: 0.96;
+  translate: 0 -6px;
+  transform-origin: top center;
+  transition:
+    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    scale var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    translate var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
 
   transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));
   top: -1000px;
   left: -1000px;
 }
 
-/* Direction-based positioning with CSS classes */
 .calendar-dialog.position-below {
   left: var(--calendar-x);
   top: var(--calendar-y);
@@ -341,17 +277,34 @@ export const datePickerStyles = `
   bottom: var(--calendar-y);
   top: auto;
   flex-direction: column-reverse;
+  translate: 0 6px;
+  transform-origin: bottom center;
 }
 
 .calendar-dialog.open {
   opacity: 1;
+  scale: 1;
+  translate: 0 0;
+}
+
+/* First-frame "from" values — see select-base.ts: transitions can't start on
+   an element that was display:none last frame; @starting-style fixes that. */
+@starting-style {
+  .calendar-dialog.open {
+    opacity: 0;
+    scale: 0.96;
+    translate: 0 -6px;
+  }
+
+  .calendar-dialog.open.position-above {
+    translate: 0 6px;
+  }
 }
 
 .calendar-dialog::backdrop {
   background: transparent
 }
 
-/* Calendar content container */
 .calendar-content {
   background-color: var(--ty-calendar-surface-bg);
   border: 1px solid var(--ty-calendar-surface-border);
@@ -363,7 +316,6 @@ export const datePickerStyles = `
   align-items: center;
 }
 
-/* Native date input for mobile */
 /* Native input is invisible — used only to trigger the OS picker */
 .native-date-input {
   position: absolute;
@@ -388,7 +340,6 @@ export const datePickerStyles = `
   cursor: pointer;
 }
 
-/* Time input section */
 .time-section {
   display: flex;
   min-height: 2.5rem;
@@ -416,7 +367,7 @@ export const datePickerStyles = `
   border-radius: var(--ty-radius-sm);
   background: var(--ty-input-bg);
   color: var(--ty-calendar-time-input-color);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   font-variant-numeric: tabular-nums;
   text-align: center;
@@ -443,4 +394,3 @@ export const datePickerStyles = `
   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: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s ease, transform 0.15s ease;\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
-//# sourceMappingURL=file-upload.d.ts.map
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: inherit;\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

@@ -1,7 +1,7 @@
 export const fileUploadStyles = `
 :host {
   display: block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   width: 100%;
 }
 
@@ -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,15 +31,13 @@ export const fileUploadStyles = `
   line-height: 1;
 }
 
-/* ===== DROP ZONE ===== */
-
 .drop-zone {
   border: 2px dashed var(--ty-border);
   border-radius: var(--ty-radius-base);
   padding: 2rem 1.5rem;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
   outline: none;
   display: flex;
   flex-direction: column;
@@ -92,8 +88,6 @@ export const fileUploadStyles = `
   background: var(--ty-bg-danger-);
 }
 
-/* ===== UPLOAD ICON ===== */
-
 .upload-icon {
   color: var(--ty-text-faint);
   width: 2.5rem;
@@ -101,7 +95,7 @@ export const fileUploadStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.15s ease, transform 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
   pointer-events: none;
 }
 
@@ -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;
@@ -191,7 +181,7 @@ export const fileUploadStyles = `
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
   border: none;
   background: none;
   padding: 0;
@@ -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  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a\n     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full\n     chip) inherits the parent's line-height strut and renders taller than wide\n     \u2014 a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an\n     icon inline with text, make the *text wrapper* inline-flex instead. */\n  display: 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/* In a named slot the icon sits alongside text (button start/end), so inline\n   layout is what the host expects there. */\n:host([slot]) {\n  display: inline-flex;\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";

package/lib/styles/icon.js

@@ -1,28 +1,25 @@
-/**
- * Icon Component Styles
- * PORTED FROM: clj/ty/components/icon.css
- */
 export const iconStyles = `
 :host {
   /* Display & Layout - CRITICAL: No containment to prevent paint deferral */
+  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a
+     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full
+     chip) inherits the parent's line-height strut and renders taller than wide
+     — a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an
+     icon inline with text, make the *text wrapper* inline-flex instead. */
   display: 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 +55,12 @@ export const iconStyles = `
   display: block;
 }
 
-/* When used in slots, ensure proper display */
+/* In a named slot the icon sits alongside text (button start/end), so inline
+   layout is what the host expects there. */
 :host([slot]) {
   display: inline-flex;
 }
 
-/* Size variants via CSS classes on the host */
 :host(.icon-xs) {
   width: 0.75em;
   height: 0.75em;
@@ -150,17 +147,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 +169,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 +198,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 +216,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,7 +1,4 @@
-/**
- * Input Component Styles
- * PORTED FROM: clj/ty/components/input.css
- * Phase A: Regular input styles only (no checkbox, no numeric formatting)
- */
-export declare const inputStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Password reveal toggle (rendered for type=\"password\") */\n.password-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: color 0.15s ease-in-out;\n}\n.password-toggle:hover {\n  color: var(--input-color, var(--ty-input-color));\n}\n.password-toggle:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n.password-toggle svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-bold);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-bold);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-bold);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-bold);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n";
-//# sourceMappingURL=input.d.ts.map
+/** 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;