tyrell-react 1.0.0-RC13 → 1.0.0-RC15

package/dist/components/index.js.map

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

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 /** Current version of tyrell-react. Synced with package.json on build. */
-export declare const VERSION = "1.0.0-RC13";
+export declare const VERSION = "1.0.0-RC15";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -2,5 +2,5 @@
 // Generated from package.json by scripts/generate-version.js
 // Run 'npm run generate:version' to regenerate.
 /** Current version of tyrell-react. Synced with package.json on build. */
-export const VERSION = '1.0.0-RC13';
+export const VERSION = '1.0.0-RC15';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-react",
-  "version": "1.0.0-RC13",
+  "version": "1.0.0-RC15",
   "description": "React wrappers for Tyrell Components",
   "type": "module",
   "main": "./dist/components/index.js",

package/src/components/TyButton.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 type ButtonAppearance = 'solid' | 'outlined' | 'ghost';
 

package/src/components/TyCalendar.tsx

@@ -3,10 +3,9 @@ import { hostProps } from '../utils/host-props';
 import { needsPropertyBridge } from '../utils/react-version';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 
-// Type definitions for Ty Calendar component
 export interface TyCalendarChangeEventDetail {
   /** Selected month (1-12) */
   month: number;
@@ -43,8 +42,9 @@ export interface TyCalendarProps extends Omit<React.HTMLAttributes<HTMLElement>,
   /** Selected day (1-31) */
   day?: number | string;
   
-  /** Show navigation controls */
-  showNavigation?: boolean;
+  /** Hide the month/year navigation bar. Shown by default — this is the
+   *  opt-out, for when you drive the displayed month yourself. */
+  hideNavigation?: boolean;
   
   /** Stateless mode - no internal state management */
   stateless?: boolean;
@@ -98,13 +98,12 @@ export interface TyCalendarProps extends Omit<React.HTMLAttributes<HTMLElement>,
   onDayClick?: (event: CustomEvent) => void;
 }
 
-// React wrapper for ty-calendar web component
 export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
   ({ 
     year,
     month,
     day,
-    showNavigation,
+    hideNavigation,
     stateless,
     size,
     flavor,
@@ -126,7 +125,6 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -137,7 +135,6 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
       }
     }, [ref]);
 
-    // Handle change events (date selection)
     const handleChange = useCallback((event: Event) => {
       const customEvent = event as CustomEvent<TyCalendarChangeEventDetail>;
       if (onChange) {
@@ -145,7 +142,6 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
       }
     }, [onChange]);
 
-    // Handle navigate events (month/year navigation)
     const handleNavigate = useCallback((event: Event) => {
       const customEvent = event as CustomEvent<TyCalendarNavigateEventDetail>;
       if (onNavigate) {
@@ -157,7 +153,6 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
       if (onDayClick) onDayClick(event as CustomEvent);
     }, [onDayClick]);
 
-    // Set up event listeners
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -208,7 +203,6 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
         (element as any).dayClassesFn = null;
       }
 
-      // Custom CSS property
       if (customCSS) {
         (element as any).customCSS = customCSS;
       } else {
@@ -216,13 +210,11 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
       }
     }, [dayContentFn, dayClassesFn, customCSS]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add optional attributes only if they have values
     if (year !== undefined) {
       webComponentProps.year = year.toString();
     }
@@ -235,10 +227,10 @@ export const TyCalendar = React.forwardRef<HTMLElement, TyCalendarProps>(
       webComponentProps.day = day.toString();
     }
 
-    const isShowNavigation = useBooleanProperty(elementRef, 'showNavigation', showNavigation);
+    const isHideNavigation = useBooleanProperty(elementRef, 'hideNavigation', hideNavigation);
     const isStateless = useBooleanProperty(elementRef, 'stateless', stateless);
 
-    if (isShowNavigation) webComponentProps['show-navigation'] = '';
+    if (isHideNavigation) webComponentProps['hide-navigation'] = '';
     if (isStateless) webComponentProps.stateless = '';
 
     if (size) {

package/src/components/TyCalendarMonth.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 
-// Type definitions for Ty Calendar Month component
 export interface TyCalendarMonthProps extends React.HTMLAttributes<HTMLElement> {
   /** Display year */
   displayYear?: number;
@@ -52,7 +51,6 @@ export interface DayClickDetail {
   isOtherMonth: boolean;
 }
 
-// React wrapper for ty-calendar-month web component
 export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProps>(
   ({ 
     displayYear,
@@ -70,7 +68,6 @@ export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProp
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle day click events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -88,7 +85,6 @@ export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProp
       };
     }, [onDayClick]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -99,13 +95,11 @@ export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProp
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add attributes
     if (displayYear !== undefined) webComponentProps['display-year'] = displayYear;
     if (displayMonth !== undefined) webComponentProps['display-month'] = displayMonth;
     if (locale) webComponentProps.locale = locale;

package/src/components/TyCalendarNavigation.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 
-// Type definitions for Ty Calendar Navigation component
 export interface TyCalendarNavigationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Display month (1-12) */
   displayMonth?: number;
@@ -33,7 +32,6 @@ export interface NavigationChangeDetail {
   year: number;   // e.g., 2025
 }
 
-// React wrapper for ty-calendar-navigation web component
 export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavigationProps>(
   ({ 
     displayMonth,
@@ -48,7 +46,6 @@ export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavi
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle change events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -66,7 +63,6 @@ export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavi
       };
     }, [onChange]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -77,13 +73,11 @@ export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavi
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add attributes
     if (displayMonth !== undefined) webComponentProps['display-month'] = displayMonth;
     if (displayYear !== undefined) webComponentProps['display-year'] = displayYear;
     if (locale) webComponentProps.locale = locale;

package/src/components/TyCheckbox.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 
-// Type definitions for Ty Checkbox component
 export interface TyCheckboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked state */
   checked?: boolean;
@@ -57,7 +56,6 @@ export interface TyCheckboxEventDetail {
   originalEvent: Event;
 }
 
-// React wrapper for ty-checkbox web component
 export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
   ({ 
     children,
@@ -76,7 +74,6 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle change events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -95,10 +92,8 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
         }
       };
 
-      // Map onChange → input event (React convention)
       element.addEventListener('input', handleInput);
       
-      // Map onChangeCommit → change event (blur behavior)
       element.addEventListener('change', handleChangeCommit);
 
       return () => {
@@ -107,7 +102,6 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
       };
     }, [onChange, onChangeCommit]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -127,19 +121,16 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add boolean attributes
     if (isChecked) webComponentProps.checked = '';
     if (isIndeterminate) webComponentProps.indeterminate = '';
     if (isDisabled) webComponentProps.disabled = '';
     if (isRequired) webComponentProps.required = '';
     
-    // Add string attributes
     if (value) webComponentProps.value = value;
     if (name) webComponentProps.name = name;
     if (error) webComponentProps.error = error;

package/src/components/TyCopy.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 
-// Type definitions for Ty Copy component
 export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Text to copy */
   value?: string;
@@ -22,8 +21,11 @@ export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
   /** Display format */
   format?: 'text' | 'code';
   
-  /** Multi-line display */
+  /** Wrap and show the full value instead of one ellipsized line */
   multiline?: boolean;
+
+  /** Scroll long content sideways instead of clipping with an ellipsis */
+  horizontalScroll?: boolean;
   
   /** Disable the field */
   disabled?: boolean;
@@ -38,7 +40,6 @@ export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
   onCopyError?: (event: CustomEvent) => void;
 }
 
-// React wrapper for ty-copy web component
 export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
   ({ 
     value,
@@ -47,6 +48,7 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
     flavor,
     format,
     multiline,
+    horizontalScroll,
     disabled,
     required,
     onCopySuccess,
@@ -55,7 +57,6 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -66,7 +67,6 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
       }
     }, [ref]);
 
-    // Custom events → React callbacks
     useEffect(() => {
       const el = elementRef.current;
       if (!el) return;
@@ -83,24 +83,23 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
     }, [onCopySuccess, onCopyError]);
 
     const isMultiline = useBooleanProperty(elementRef, 'multiline', multiline);
+    const isHorizontalScroll = useBooleanProperty(elementRef, 'horizontalScroll', horizontalScroll);
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add string attributes
     if (value) webComponentProps.value = value;
     if (label) webComponentProps.label = label;
     if (size) webComponentProps.size = size;
     if (flavor) webComponentProps.flavor = flavor;
     if (format) webComponentProps.format = format;
 
-    // Add boolean attributes
     if (isMultiline) webComponentProps.multiline = '';
+    if (isHorizontalScroll) webComponentProps['horizontal-scroll'] = '';
     if (isDisabled) webComponentProps.disabled = '';
     if (isRequired) webComponentProps.required = '';
 

package/src/components/TyDatePicker.tsx

@@ -3,10 +3,14 @@ import { hostProps } from '../utils/host-props';
 import { needsPropertyBridge } from '../utils/react-version';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+type Placement =
+  | 'top-start' | 'top' | 'top-end'
+  | 'right-start' | 'right' | 'right-end'
+  | 'bottom-start' | 'bottom' | 'bottom-end'
+  | 'left-start' | 'left' | 'left-end';
 
-// Type definitions for Ty DatePicker component
 export interface TyDatePickerEventDetail {
   /** The selected date value (ISO string or formatted string based on format) */
   value: string | null;
@@ -22,8 +26,9 @@ export interface TyDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement
   /** The selected date value (ISO string or formatted string) */
   value?: string;
   
-  /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
-  size?: 'sm' | 'md' | 'lg';
+  /** Field size — the ladder shared by every field component
+   *  (styles/field-size.ts). Defaults to 'sm'. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   
   /** Visual flavor — built-in semantic, +/- shade, or a custom flavor backed by --ty-*-X tokens. Also tints the popup calendar's selected/today day. */
   flavor?: 'default' | ShadedFlavor | (string & {});
@@ -60,7 +65,10 @@ export interface TyDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement
 
   /** Latest selectable date (ISO "YYYY-MM-DD") */
   max?: string;
-  
+
+  /** Calendar popup placement, same vocabulary as ty-popup/ty-tooltip/ty-select: a side plus an optional cross-axis alignment (e.g. "bottom-start"). The calendar only lives above or below the field, so left/right degrade to auto-side with the alignment kept. Empty/unset = auto (below when it fits). */
+  placement?: Placement;
+
   /** Callback when the date value changes */
   onChange?: (event: CustomEvent<TyDatePickerEventDetail>) => void;
   
@@ -76,7 +84,6 @@ export interface TyDatePickerElement extends HTMLElement {
   clear(): void;
 }
 
-// React wrapper for ty-date-picker web component
 export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerProps>(
   ({ 
     value,
@@ -93,6 +100,7 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
     withTime,
     min,
     max,
+    placement,
     onChange,
     onOpen,
     onClose,
@@ -100,7 +108,6 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
   }, ref) => {
     const elementRef = useRef<TyDatePickerElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -118,12 +125,10 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
       if (!needsPropertyBridge) return;
       const element = elementRef.current;
       if (element && value !== undefined) {
-        // Set the value property directly on the element
         (element as any).value = value || '';
       }
     }, [value]);
 
-    // Handle change events
     const handleChange = useCallback((event: Event) => {
       const customEvent = event as CustomEvent<TyDatePickerEventDetail>;
       if (onChange) {
@@ -131,10 +136,8 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
       }
     }, [onChange]);
 
-    // Handle open/close events. Guard with `event.target === element` so
-    // bubbled open/close events from popup-like descendants slotted inside
-    // (rare for a date-picker, but defensive — same fix as TyModal/TyPopup)
-    // don't fire the consumer's onOpen/onClose.
+    // Handle open/close events. See TyModal.tsx for why the
+    // `event.target === element` guard is still here.
     const handleOpen = useCallback((event: Event) => {
       if (event.target !== elementRef.current) return;
       if (onOpen) onOpen(event as CustomEvent<{}>);
@@ -145,7 +148,6 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
       if (onClose) onClose(event as CustomEvent<{}>);
     }, [onClose]);
 
-    // Set up event listeners
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -174,13 +176,11 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
       };
     }, [handleChange, handleOpen, handleClose, onChange, onOpen, onClose]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add optional attributes only if they have values
     if (value !== undefined) {
       webComponentProps.value = value;
     }
@@ -233,6 +233,10 @@ export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerPr
       webComponentProps.max = max;
     }
 
+    if (placement) {
+      webComponentProps.placement = placement;
+    }
+
     return React.createElement('ty-date-picker', webComponentProps);
   }
 );

package/src/components/TyFileUpload.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-// Type definitions for Ty File Upload component
 export interface TyFileUploadProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Form field name — used as the FormData key */
   name?: string;
@@ -41,7 +40,6 @@ export interface TyFileUploadEventDetail {
   names: string[];
 }
 
-// React wrapper for ty-file-upload web component
 export const TyFileUpload = React.forwardRef<HTMLElement, TyFileUploadProps>(
   ({
     name,

package/src/components/TyIcon.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-// Type definitions for Ty Icon component
 export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
   /** Icon name from the icon registry (e.g., 'home', 'star', 'settings') */
   name: string;
@@ -22,12 +21,10 @@ export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
   className?: string;
 }
 
-// React wrapper for ty-icon web component
 export const TyIcon = React.forwardRef<HTMLElement, TyIconProps>(
   ({ name, size, spin, pulse, tempo, className, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -41,14 +38,12 @@ export const TyIcon = React.forwardRef<HTMLElement, TyIconProps>(
     const isSpin = useBooleanProperty(elementRef, 'spin', spin);
     const isPulse = useBooleanProperty(elementRef, 'pulse', pulse);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
       name,
       ref: elementRef,
     };
 
-    // Add optional attributes only if they have values
     if (size) {
       webComponentProps.size = size;
     }

package/src/components/TyInput.tsx

@@ -3,10 +3,9 @@ import { hostProps } from '../utils/host-props';
 import { needsPropertyBridge } from '../utils/react-version';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-type BuiltinFlavor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
 type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
 
-// Event detail structure for ty-input events
 export interface TyInputEventDetail {
   value: any; // shadow value (processed/parsed)
   formattedValue: string; // user-visible formatted value
@@ -27,7 +26,6 @@ export interface TyInputCSSProperties extends React.CSSProperties {
   '--input-disabled-color'?: string;
 }
 
-// Type definitions for Ty Input component
 export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onFocus' | 'onBlur' | 'style'> {
   style?: TyInputCSSProperties;
   /** Input type */
@@ -37,9 +35,9 @@ export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'o
   /** Semantic styling variant */
   flavor?: ShadedFlavor | (string & {});
 
-  /** Input size */
-  /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
-  size?: 'sm' | 'md' | 'lg';
+  /** Field size — the ladder shared by every field component
+   *  (styles/field-size.ts). Defaults to 'sm'. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** Input value */
   value?: string;
@@ -96,7 +94,6 @@ export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'o
 // One-time global warning flags so we don't spam the console.
 let _warnedOnInputProp = false;
 
-// React wrapper for ty-input web component
 export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
   ({ onChange, onChangeCommit, onFocus, onBlur, disabled, required, name, checked, debounce, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
@@ -150,18 +147,14 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
       const element = elementRef.current;
       if (!element) return;
 
-      // Listen for custom input/change events from ty-input
-      // Map onChange → input event (React convention)
       if (onChange) {
         element.addEventListener('input', handleInput as EventListener);
       }
 
-      // Map onChangeCommit → change event (blur behavior)
       if (onChangeCommit) {
         element.addEventListener('change', handleChangeCommit as EventListener);
       }
 
-      // Listen for standard focus/blur events
       if (onFocus) {
         element.addEventListener('focus', handleFocus as EventListener);
       }
@@ -186,7 +179,6 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
       };
     }, [handleInput, handleChangeCommit, handleFocus, handleBlur, onChange, onChangeCommit, onFocus, onBlur]);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -217,21 +209,17 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
     const isChecked = useBooleanProperty(elementRef, 'checked', checked);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add conditional attributes
     if (isDisabled) webComponentProps.disabled = '';
     if (isRequired) webComponentProps.required = '';
     if (isChecked) webComponentProps.checked = '';
 
-    // Add string attributes
     if (name) webComponentProps.name = name;
 
-    // Add debounce attribute
     if (debounce !== undefined) webComponentProps.debounce = debounce;
 
     return React.createElement(