tyrell-react 1.0.0-TC24 → 1.0.0-TC26

package/src/components/TyCalendarMonth.tsx

@@ -22,7 +22,13 @@ export interface TyCalendarMonthProps extends React.HTMLAttributes<HTMLElement>
   
   /** Maximum width */
   maxWidth?: string;
-  
+
+  /** Earliest enabled date (ISO "YYYY-MM-DD") — earlier days disabled */
+  min?: string;
+
+  /** Latest enabled date (ISO "YYYY-MM-DD") — later days disabled */
+  max?: string;
+
   /** Day click event handler */
   onDayClick?: (event: CustomEvent<DayClickDetail>) => void;
 }
@@ -49,6 +55,8 @@ export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProp
     width,
     minWidth,
     maxWidth,
+    min,
+    max,
     onDayClick,
     ...props 
   }, ref) => {
@@ -95,6 +103,8 @@ export const TyCalendarMonth = React.forwardRef<HTMLElement, TyCalendarMonthProp
     if (locale) webComponentProps.locale = locale;
     if (size) webComponentProps.size = size;
     if (width) webComponentProps.width = width;
+    if (min) webComponentProps.min = min;
+    if (max) webComponentProps.max = max;
     if (minWidth) webComponentProps['min-width'] = minWidth;
     if (maxWidth) webComponentProps['max-width'] = maxWidth;
 

package/src/components/TyCalendarNavigation.tsx

@@ -16,7 +16,13 @@ export interface TyCalendarNavigationProps extends Omit<React.HTMLAttributes<HTM
   
   /** Width of navigation */
   width?: string;
-  
+
+  /** Earliest reachable month (ISO "YYYY-MM-DD") — navigation clamps here */
+  min?: string;
+
+  /** Latest reachable month (ISO "YYYY-MM-DD") — navigation clamps here */
+  max?: string;
+
   /** Navigation change event handler */
   onChange?: (event: CustomEvent<NavigationChangeDetail>) => void;
 }
@@ -34,6 +40,8 @@ export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavi
     locale,
     size,
     width,
+    min,
+    max,
     onChange,
     ...props 
   }, ref) => {
@@ -80,6 +88,8 @@ export const TyCalendarNavigation = React.forwardRef<HTMLElement, TyCalendarNavi
     if (locale) webComponentProps.locale = locale;
     if (size) webComponentProps.size = size;
     if (width) webComponentProps.width = width;
+    if (min) webComponentProps.min = min;
+    if (max) webComponentProps.max = max;
 
     return React.createElement(
       'ty-calendar-navigation',

package/src/components/TyCheckbox.tsx

@@ -5,7 +5,10 @@ import { useBooleanProperty } from '../utils/use-boolean-prop';
 export interface TyCheckboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked state */
   checked?: boolean;
-  
+
+  /** Mixed state (dash) — visual/ARIA only; clicking resolves to checked */
+  indeterminate?: boolean;
+
   /** Form field value when checked */
   value?: string;
   
@@ -53,8 +56,9 @@ export interface TyCheckboxEventDetail {
 // React wrapper for ty-checkbox web component
 export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
   ({ 
-    children, 
+    children,
     checked,
+    indeterminate,
     value,
     name,
     disabled,
@@ -115,6 +119,7 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
     // doesn't reliably remove them when the prop flips back to false on a
     // custom element. React 19+ handles this natively.
     const isChecked = useBooleanProperty(elementRef, 'checked', checked);
+    const isIndeterminate = useBooleanProperty(elementRef, 'indeterminate', indeterminate);
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
@@ -126,6 +131,7 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
 
     // Add boolean attributes
     if (isChecked) webComponentProps.checked = '';
+    if (isIndeterminate) webComponentProps.indeterminate = '';
     if (isDisabled) webComponentProps.disabled = '';
     if (isRequired) webComponentProps.required = '';
     

package/src/components/TyCopy.tsx

@@ -26,6 +26,12 @@ export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
   
   /** Required field */
   required?: boolean;
+
+  /** Fired after the value is copied to the clipboard */
+  onCopySuccess?: (event: CustomEvent) => void;
+
+  /** Fired when copying to the clipboard fails */
+  onCopyError?: (event: CustomEvent) => void;
 }
 
 // React wrapper for ty-copy web component
@@ -39,7 +45,9 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
     multiline,
     disabled,
     required,
-    ...props 
+    onCopySuccess,
+    onCopyError,
+    ...props
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
@@ -54,6 +62,22 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
       }
     }, [ref]);
 
+    // Custom events → React callbacks
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+      const bound: Array<[string, EventListener]> = [];
+      if (onCopySuccess) {
+        const h = (e: Event) => onCopySuccess(e as CustomEvent);
+        el.addEventListener('copy-success', h); bound.push(['copy-success', h]);
+      }
+      if (onCopyError) {
+        const h = (e: Event) => onCopyError(e as CustomEvent);
+        el.addEventListener('copy-error', h); bound.push(['copy-error', h]);
+      }
+      return () => bound.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onCopySuccess, onCopyError]);
+
     const isMultiline = useBooleanProperty(elementRef, 'multiline', multiline);
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
     const isRequired = useBooleanProperty(elementRef, 'required', required);

package/src/components/TyDatePicker.tsx

@@ -50,6 +50,12 @@ export interface TyDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement
   
   /** Whether to include time selection */
   withTime?: boolean;
+
+  /** Earliest selectable date (ISO "YYYY-MM-DD") */
+  min?: string;
+
+  /** Latest selectable date (ISO "YYYY-MM-DD") */
+  max?: string;
   
   /** Callback when the date value changes */
   onChange?: (event: CustomEvent<TyDatePickerEventDetail>) => void;
@@ -76,6 +82,8 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
     format,
     locale,
     withTime,
+    min,
+    max,
     onChange,
     onOpen,
     onClose,
@@ -208,6 +216,14 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
       webComponentProps['with-time'] = '';  // Convert camelCase to kebab-case
     }
 
+    if (min) {
+      webComponentProps.min = min;
+    }
+
+    if (max) {
+      webComponentProps.max = max;
+    }
+
     return React.createElement('ty-date-picker', webComponentProps);
   }
 );

package/src/components/TyDropdown.tsx

@@ -80,7 +80,9 @@ export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>,
   // React event handlers
   onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
   onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
-  
+  onOpen?: (event: CustomEvent) => void;
+  onClose?: (event: CustomEvent) => void;
+
   // Children for slotted approach
   children?: React.ReactNode;
 }
@@ -92,6 +94,8 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
     children,
     onChange,
     onSearch,
+    onOpen,
+    onClose,
     disabled,
     loading,
     externalSearch,
@@ -118,6 +122,9 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
       }
     }, [onSearch]);
 
+    const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
+    const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
+
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -131,6 +138,9 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
         element.addEventListener('search', handleSearch as EventListener);
       }
 
+      if (onOpen) element.addEventListener('open', handleOpen);
+      if (onClose) element.addEventListener('close', handleClose);
+
       return () => {
         if (onChange) {
           element.removeEventListener('change', handleChange as EventListener);
@@ -138,8 +148,10 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
         if (onSearch) {
           element.removeEventListener('search', handleSearch as EventListener);
         }
+        if (onOpen) element.removeEventListener('open', handleOpen);
+        if (onClose) element.removeEventListener('close', handleClose);
       };
-    }, [handleChange, handleSearch, onChange, onSearch]);
+    }, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
 
     // Imperatively sync `value` to the underlying element's property whenever
     // it changes. React 18's prop-to-property bridging for custom elements is

package/src/components/TyMultiselect.tsx

@@ -65,6 +65,8 @@ export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElemen
 
   /** Callback fired on each search input change (debounced by `debounce`). Use for external/server-side filtering. */
   onSearch?: (event: CustomEvent<{ query: string; element: HTMLElement }>) => void;
+  onOpen?: (event: CustomEvent) => void;
+  onClose?: (event: CustomEvent) => void;
 
   /** Children should be TyTag components, not TyOption */
   children?: React.ReactNode;
@@ -87,6 +89,8 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
     name,
     onChange,
     onSearch,
+    onOpen,
+    onClose,
     children,
     ...props
   }, ref) => {
@@ -131,6 +135,9 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       }
     }, [onSearch]);
 
+    const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
+    const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
+
     // Set up event listeners
     useEffect(() => {
       const element = elementRef.current;
@@ -138,12 +145,16 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
 
       if (onChange) element.addEventListener('change', handleChange);
       if (onSearch) element.addEventListener('search', handleSearch);
+      if (onOpen) element.addEventListener('open', handleOpen);
+      if (onClose) element.addEventListener('close', handleClose);
 
       return () => {
         if (onChange) element.removeEventListener('change', handleChange);
         if (onSearch) element.removeEventListener('search', handleSearch);
+        if (onOpen) element.removeEventListener('open', handleOpen);
+        if (onClose) element.removeEventListener('close', handleClose);
       };
-    }, [handleChange, handleSearch, onChange, onSearch]);
+    }, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
 
     // Imperative property sync for boolean props (see use-boolean-prop.ts).
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);

package/src/components/TyOption.tsx

@@ -4,6 +4,17 @@ import { useBooleanProperty } from '../utils/use-boolean-prop';
 // Type definitions for Ty Option component
 export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
   value?: string;
+
+  /**
+   * Clean display text (native <option label> semantics) — used by ty-select
+   * for field summaries and by ty-selected-tags chips when the option's
+   * children are rich HTML. data-* attributes feed chip templates.
+   */
+  label?: string;
+
+  /** Semantic flavor — carried onto ty-selected-tags chips */
+  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral' | 'info';
+
   disabled?: boolean;
   selected?: boolean;
   hidden?: boolean;
@@ -12,7 +23,7 @@ export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
 
 // React wrapper for ty-option web component
 export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
-  ({ children, disabled, selected, hidden, ...props }, ref) => {
+  ({ children, label, flavor, disabled, selected, hidden, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
     // Handle ref forwarding
@@ -34,6 +45,8 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
       'ty-option',
       {
         ...props,
+        ...(label && { label }),
+        ...(flavor && { flavor }),
         ...(isDisabled && { disabled: "" }),
         ...(isSelected && { selected: "" }),
         ...(isHidden && { hidden: "" }),

package/src/components/TyScrollContainer.tsx

@@ -2,6 +2,14 @@ import React, { useEffect, useRef, useImperativeHandle } from 'react';
 import { needsPropertyBridge } from '../utils/react-version';
 import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 
+/** Detail payload for nearstart / nearend events. */
+export interface TyScrollNearEdgeDetail {
+  distance: number;
+  scrollTop: number;
+  scrollHeight: number;
+  clientHeight: number;
+}
+
 // Type definitions for Ty ScrollContainer component
 export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement> {
   /** Maximum height of the scroll container */
@@ -10,9 +18,27 @@ export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement
   /** Enable/disable scroll shadows (default: true) */
   shadow?: boolean;
 
-  /** Hide native scrollbar */
+  /** Hide native scrollbar (no custom scrollbar) */
   hideScrollbar?: boolean;
 
+  /** Use the styled custom scrollbar */
+  customScrollbar?: boolean;
+
+  /** Enable horizontal scrolling */
+  overflowX?: boolean;
+
+  /** Preserve visual position when content is prepended above the viewport */
+  scrollAnchoring?: boolean;
+
+  /** Distance (px) from an edge at which nearstart/nearend fire (default 100) */
+  nearEdgeThreshold?: number;
+
+  /** Fired once when scrolled within the threshold of the bottom */
+  onNearEnd?: (event: CustomEvent<TyScrollNearEdgeDetail>) => void;
+
+  /** Fired once when scrolled within the threshold of the top */
+  onNearStart?: (event: CustomEvent<TyScrollNearEdgeDetail>) => void;
+
   /** Content to scroll */
   children?: React.ReactNode;
 }
@@ -25,6 +51,12 @@ export interface TyScrollContainerRef {
   scrollToTop: (smooth?: boolean) => void;
   /** Scroll to bottom */
   scrollToBottom: (smooth?: boolean) => void;
+  /** Scroll to far left */
+  scrollToLeft: (smooth?: boolean) => void;
+  /** Scroll to far right */
+  scrollToRight: (smooth?: boolean) => void;
+  /** Scroll a descendant (element or CSS selector) into view */
+  scrollToElement: (target: Element | string, smooth?: boolean) => void;
   /** Get the underlying scroll element */
   scrollElement: HTMLElement | null;
   /** Get the native element */
@@ -38,35 +70,29 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
     maxHeight,
     shadow,
     hideScrollbar,
+    customScrollbar,
+    overflowX,
+    scrollAnchoring,
+    nearEdgeThreshold,
+    onNearEnd,
+    onNearStart,
     ...props
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
     // Expose imperative methods via ref
     useImperativeHandle(ref, () => ({
-      updateShadows: () => {
-        const el = elementRef.current as any;
-        el?.updateShadows?.();
-      },
-      scrollToTop: (smooth = true) => {
-        const el = elementRef.current as any;
-        el?.scrollToTop?.(smooth);
-      },
-      scrollToBottom: (smooth = true) => {
-        const el = elementRef.current as any;
-        el?.scrollToBottom?.(smooth);
-      },
-      get scrollElement() {
-        const el = elementRef.current as any;
-        return el?.scrollElement ?? null;
-      },
-      get element() {
-        return elementRef.current;
-      }
+      updateShadows: () => { (elementRef.current as any)?.updateShadows?.(); },
+      scrollToTop: (smooth = true) => { (elementRef.current as any)?.scrollToTop?.(smooth); },
+      scrollToBottom: (smooth = true) => { (elementRef.current as any)?.scrollToBottom?.(smooth); },
+      scrollToLeft: (smooth = true) => { (elementRef.current as any)?.scrollToLeft?.(smooth); },
+      scrollToRight: (smooth = true) => { (elementRef.current as any)?.scrollToRight?.(smooth); },
+      scrollToElement: (target, smooth = true) => { (elementRef.current as any)?.scrollToElement?.(target, smooth); },
+      get scrollElement() { return (elementRef.current as any)?.scrollElement ?? null; },
+      get element() { return elementRef.current; }
     }), []);
 
-    // shadow defaults to true; only the explicit-false case matters at the
-    // attribute level. Bridge it imperatively so flipping back to true
+    // shadow defaults to true; bridge it imperatively so flipping back to true
     // propagates on React 18.
     useEffect(() => {
       if (!needsPropertyBridge) return;
@@ -76,7 +102,27 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
       const next = coerceBool(shadow);
       if (Boolean(el.shadow) !== next) el.shadow = next;
     }, [shadow]);
+
     const isHideScrollbar = useBooleanProperty(elementRef, 'hideScrollbar', hideScrollbar);
+    const isCustomScrollbar = useBooleanProperty(elementRef, 'customScrollbar', customScrollbar);
+    const isOverflowX = useBooleanProperty(elementRef, 'overflowX', overflowX);
+    const isScrollAnchoring = useBooleanProperty(elementRef, 'scrollAnchoring', scrollAnchoring);
+
+    // Custom events → React callbacks
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+      const bound: Array<[string, EventListener]> = [];
+      if (onNearEnd) {
+        const h = (e: Event) => onNearEnd(e as CustomEvent<TyScrollNearEdgeDetail>);
+        el.addEventListener('nearend', h); bound.push(['nearend', h]);
+      }
+      if (onNearStart) {
+        const h = (e: Event) => onNearStart(e as CustomEvent<TyScrollNearEdgeDetail>);
+        el.addEventListener('nearstart', h); bound.push(['nearstart', h]);
+      }
+      return () => bound.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onNearEnd, onNearStart]);
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
@@ -84,12 +130,16 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
       ref: elementRef,
     };
 
-    // Add string attributes
+    // String attributes
     if (maxHeight) webComponentProps['max-height'] = maxHeight;
+    if (nearEdgeThreshold != null) webComponentProps['near-edge-threshold'] = String(nearEdgeThreshold);
 
-    // Add boolean attributes
+    // Boolean attributes
     if (shadow !== undefined && !coerceBool(shadow)) webComponentProps.shadow = 'false';
     if (isHideScrollbar) webComponentProps['hide-scrollbar'] = '';
+    if (isCustomScrollbar) webComponentProps['custom-scrollbar'] = '';
+    if (isOverflowX) webComponentProps['overflow-x'] = '';
+    if (isScrollAnchoring) webComponentProps['scroll-anchoring'] = '';
 
     return React.createElement(
       'ty-scroll-container',