tyrell-react 1.0.0-RC11 → 1.0.0-RC13

package/src/components/TyCopy.tsx

@@ -1,6 +1,10 @@
 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 ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 // Type definitions for Ty Copy component
 export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Text to copy */
@@ -13,7 +17,7 @@ export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   
   /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
   
   /** Display format */
   format?: 'text' | 'code';
@@ -26,6 +30,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 +49,9 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
     multiline,
     disabled,
     required,
-    ...props 
+    onCopySuccess,
+    onCopyError,
+    ...props
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
@@ -54,13 +66,29 @@ 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);
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyDatePicker.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+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 ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 // Type definitions for Ty DatePicker component
 export interface TyDatePickerEventDetail {
   /** The selected date value (ISO string or formatted string based on format) */
@@ -18,11 +22,11 @@ export interface TyDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement
   /** The selected date value (ISO string or formatted string) */
   value?: string;
   
-  /** Input size: "sm" | "md" | "lg" */
+  /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
   size?: 'sm' | 'md' | 'lg';
   
-  /** Visual flavor: "default" | "success" | "danger" | "warning" */
-  flavor?: 'default' | 'success' | 'danger' | 'warning';
+  /** 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 & {});
   
   /** Label text displayed above the input */
   label?: string;
@@ -50,6 +54,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;
@@ -61,8 +71,13 @@ export interface TyDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement
   onClose?: (event: CustomEvent<{}>) => void;
 }
 
+/** The underlying custom element, typed with its imperative clear() method. */
+export interface TyDatePickerElement extends HTMLElement {
+  clear(): void;
+}
+
 // React wrapper for ty-date-picker web component
-export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
+export const TyDatePicker = React.forwardRef<TyDatePickerElement, TyDatePickerProps>(
   ({ 
     value,
     size,
@@ -76,12 +91,14 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
     format,
     locale,
     withTime,
+    min,
+    max,
     onChange,
     onOpen,
     onClose,
     ...props 
   }, ref) => {
-    const elementRef = useRef<HTMLElement>(null);
+    const elementRef = useRef<TyDatePickerElement>(null);
 
     // Handle ref forwarding
     useEffect(() => {
@@ -159,7 +176,7 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
@@ -208,6 +225,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/TyFileUpload.tsx

@@ -1,4 +1,5 @@
 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
@@ -87,7 +88,7 @@ export const TyFileUpload = React.forwardRef<HTMLElement, TyFileUploadProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyInput.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+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 ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 // Event detail structure for ty-input events
 export interface TyInputEventDetail {
   value: any; // shadow value (processed/parsed)
@@ -31,10 +35,11 @@ export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'o
   | 'currency' | 'percent' | 'compact';
 
   /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
 
   /** Input size */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
+  size?: 'sm' | 'md' | 'lg';
 
   /** Input value */
   value?: string;
@@ -214,7 +219,7 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 import { needsPropertyBridge } from '../utils/react-version';
 
@@ -32,6 +33,12 @@ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
   /** Allow closing modal with Escape key (default: true) */
   closeOnEscape?: boolean;
 
+  /**
+   * Accessible name — sets aria-label on the internal <dialog>. The dialog
+   * gets role="dialog" for free, but nothing names it unless you set this.
+   */
+  label?: string;
+
   /** React event handlers */
   onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
   onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
@@ -64,6 +71,7 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
     backdrop,
     closeOnOutsideClick,
     closeOnEscape,
+    label,
     onOpen,
     onClose,
     onBeforeClose,
@@ -166,7 +174,7 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
@@ -183,6 +191,7 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
     if (closeOnEscape !== undefined && !coerceBool(closeOnEscape)) {
       webComponentProps['close-on-escape'] = 'false';
     }
+    if (label) webComponentProps.label = label;
 
     return React.createElement(
       'ty-modal',

package/src/components/TyOption.tsx

@@ -1,9 +1,21 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 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-options chips when the option's
+   * children are rich HTML. data-* attributes feed chip templates.
+   */
+  label?: string;
+
+  /** Semantic flavor — carried onto ty-selected-options chips */
+  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral' | 'info';
+
   disabled?: boolean;
   selected?: boolean;
   hidden?: boolean;
@@ -12,7 +24,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
@@ -33,7 +45,9 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
     return React.createElement(
       'ty-option',
       {
-        ...props,
+        ...hostProps(props),
+        ...(label && { label }),
+        ...(flavor && { flavor }),
         ...(isDisabled && { disabled: "" }),
         ...(isSelected && { selected: "" }),
         ...(isHidden && { hidden: "" }),

package/src/components/TyPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Popup component
@@ -86,7 +87,7 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyRadio.tsx

@@ -1,6 +1,10 @@
 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 ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {
   /** Form field value (selected by parent ty-radio-group when matches its `value`) */
   value?: string;
@@ -18,7 +22,7 @@ export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** Semantic styling variant — typically inherited from the parent group */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
 
   /** Label content (wrap in a `<label>` for click delegation, see ty-radio docs) */
   children?: React.ReactNode;
@@ -43,7 +47,7 @@ export const TyRadio = React.forwardRef<HTMLElement, TyRadioProps>(
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyRadioGroup.tsx

@@ -1,6 +1,10 @@
 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 ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Currently selected value (matches one child `<TyRadio value="...">`) */
   value?: string;
@@ -27,7 +31,7 @@ export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** Group flavor — propagates to all `<TyRadio>` children */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
 
   /**
    * Fires when selection changes (React convention)
@@ -103,7 +107,7 @@ export const TyRadioGroup = React.forwardRef<HTMLElement, TyRadioGroupProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyResizeObserver.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
 // Type definitions for Ty ResizeObserver component
 export interface TyResizeObserverProps extends React.HTMLAttributes<HTMLElement> {
@@ -35,7 +36,7 @@ export const TyResizeObserver = React.forwardRef<HTMLElement, TyResizeObserverPr
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
       id,
     };

package/src/components/TyScrollContainer.tsx

@@ -1,7 +1,16 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { hostProps } from '../utils/host-props';
 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 +19,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 +52,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 +71,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,20 +103,44 @@ 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> = {
-      ...props,
+      ...hostProps(props),
       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',