tyrell-react 1.0.0-TC29 → 1.0.0-TC31

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,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 Option component
@@ -44,7 +45,7 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
     return React.createElement(
       'ty-option',
       {
-        ...props,
+        ...hostProps(props),
         ...(label && { label }),
         ...(flavor && { flavor }),
         ...(isDisabled && { disabled: "" }),

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,4 +1,5 @@
 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';
 
@@ -126,7 +127,7 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TySelect.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 Select component
 export interface TySelectItem {
   value: string;
@@ -67,12 +71,31 @@ export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   /** Debounce for the search event in ms (0-5000) */
   debounce?: number;
 
+  /**
+   * Enter on unmatched search text mints a new <ty-option> (forces the
+   * search row on, same as externalSearch). Listen to onCreate to mutate
+   * the value before it's created, or preventDefault() to take over
+   * entirely (e.g. after a server round-trip).
+   */
+  allowCreate?: boolean;
+
+  /**
+   * Opt-in normalizer for the value allowCreate mints — the display label
+   * is always kept verbatim. 'slug': lowercase, spaces → '_', strips
+   * everything else non-alphanumeric. Default: value === typed text.
+   */
+  createTransform?: 'slug';
+
   /** Loading state — shows a spinner in the options area (external search in flight) */
   loading?: boolean;
 
   /** Size variant */
+  /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
   size?: 'sm' | 'md' | 'lg';
 
+  /** Visual flavor for the field border — built-in semantic, +/- shade, or a custom flavor backed by --ty-*-X tokens */
+  flavor?: ShadedFlavor | (string & {});
+
   /** Callback when selection changes */
   onChange?: (event: CustomEvent<TySelectEventDetail>) => void;
 
@@ -81,6 +104,13 @@ export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   onOpen?: (event: CustomEvent) => void;
   onClose?: (event: CustomEvent) => void;
 
+  /**
+   * Fired before allowCreate mints a new option — cancelable. Mutate
+   * `event.detail.value` to change the id that gets created (e.g. slugify
+   * it yourself), or call `event.preventDefault()` to create it yourself.
+   */
+  onCreate?: (event: CustomEvent<{ value: string; label: string }>) => void;
+
   /** TyOption children (plus optional slot="trigger" / slot="start" / slot="end" elements) */
   children?: React.ReactNode;
 }
@@ -100,12 +130,16 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
     searchable,
     externalSearch,
     debounce,
+    allowCreate,
+    createTransform,
     loading,
     size,
+    flavor,
     onChange,
     onSearch,
     onOpen,
     onClose,
+    onCreate,
     children,
     ...props
   }, ref) => {
@@ -145,6 +179,9 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
 
     const handleOpen = useCallback((event: Event) => { if (onOpen) onOpen(event as CustomEvent); }, [onOpen]);
     const handleClose = useCallback((event: Event) => { if (onClose) onClose(event as CustomEvent); }, [onClose]);
+    const handleCreate = useCallback((event: Event) => {
+      if (onCreate) onCreate(event as CustomEvent<{ value: string; label: string }>);
+    }, [onCreate]);
 
     // Set up event listeners
     useEffect(() => {
@@ -155,14 +192,16 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
       if (onSearch) element.addEventListener('search', handleSearch);
       if (onOpen) element.addEventListener('open', handleOpen);
       if (onClose) element.addEventListener('close', handleClose);
+      if (onCreate) element.addEventListener('create', handleCreate);
 
       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);
+        if (onCreate) element.removeEventListener('create', handleCreate);
       };
-    }, [handleChange, handleSearch, handleOpen, handleClose, onChange, onSearch, onOpen, onClose]);
+    }, [handleChange, handleSearch, handleOpen, handleClose, handleCreate, onChange, onSearch, onOpen, onClose, onCreate]);
 
     // Imperative property sync for boolean props (see use-boolean-prop.ts).
     const isMultiple = useBooleanProperty(elementRef, 'multiple', multiple);
@@ -172,10 +211,11 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
     const isLoading = useBooleanProperty(elementRef, 'loading', loading);
     const isExternalSearch = useBooleanProperty(elementRef, 'externalSearch', externalSearch);
+    const isAllowCreate = useBooleanProperty(elementRef, 'allowCreate', allowCreate);
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
@@ -191,12 +231,15 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
     if (isRequired) webComponentProps.required = '';
     if (isLoading) webComponentProps.loading = '';
     if (isExternalSearch) webComponentProps['external-search'] = '';
+    if (isAllowCreate) webComponentProps['allow-create'] = '';
 
     if (placeholder) webComponentProps.placeholder = placeholder;
     if (label) webComponentProps.label = label;
     if (name) webComponentProps.name = name;
     if (size) webComponentProps.size = size;
+    if (flavor) webComponentProps.flavor = flavor;
     if (debounce !== undefined) webComponentProps.debounce = debounce.toString();
+    if (createTransform) webComponentProps['create-transform'] = createTransform;
     if (searchable === 'always' || searchable === true) webComponentProps.searchable = 'true';
     else if (searchable === 'never' || searchable === false) webComponentProps.searchable = 'false';
     // 'auto' / undefined → omit (component default)
@@ -230,7 +273,7 @@ export const TySelectedTags = React.forwardRef<HTMLElement, TySelectedTagsProps>
       }
     }, [ref]);
 
-    const webComponentProps: Record<string, any> = { ...props, ref: elementRef };
+    const webComponentProps: Record<string, any> = { ...hostProps(props), ref: elementRef };
     if (htmlFor) webComponentProps.for = htmlFor;
 
     return React.createElement('ty-selected-tags', webComponentProps, children);

package/src/components/TyStep.tsx

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

package/src/components/TySwitch.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 TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked (on) state */
   checked?: boolean;
@@ -21,7 +25,7 @@ export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
 
   /**
    * Fires when switch state changes (React convention)
@@ -94,7 +98,7 @@ export const TySwitch = React.forwardRef<HTMLElement, TySwitchProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTab.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 Tab component
@@ -40,7 +41,7 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTabs.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
 // Type definitions for Ty Tabs component
 export interface TyTabsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -72,7 +73,7 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTag.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef, useCallback } 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}-`;
+
 // CSS custom properties that cascade into the shadow DOM for full color control
 export interface TyTagCSSProperties extends React.CSSProperties {
   '--tag-bg'?: string;
@@ -10,7 +14,7 @@ export interface TyTagCSSProperties extends React.CSSProperties {
 
 // Type definitions for Ty Tag component
 export interface TyTagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'onClick'> {
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   notPill?: boolean;
   clickable?: boolean;
@@ -67,7 +71,7 @@ export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
     return React.createElement(
       'ty-tag',
       {
-        ...props,
+        ...hostProps(props),
         // click is dispatched as composed CustomEvent by the web component — React's
         // synthetic onClick already catches it, so we just pass it through as onClick
         ...(onClick && { onClick }),

package/src/components/TyTextarea.tsx

@@ -1,4 +1,5 @@
 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';
 
@@ -167,7 +168,7 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
     return React.createElement(
       'ty-textarea',
       {
-        ...props,
+        ...hostProps(props),
         ...(isDisabled && { disabled: "" }),
         ...(isRequired && { required: "" }),
         ...(minHeight && { 'min-height': minHeight }),  // Convert camelCase to kebab-case

package/src/components/TyTooltip.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 Tooltip component
 export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
   /** Tooltip positioning relative to the parent element */
@@ -16,7 +20,7 @@ export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
   disabled?: boolean;
   
   /** Semantic styling variant */
-  flavor?: 'dark' | 'light' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+  flavor?: 'dark' | 'light' | 'info' | ShadedFlavor | (string & {});
   
   /** Tooltip content */
   children?: React.ReactNode;
@@ -48,7 +52,7 @@ export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyWizard.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
 // Type definitions for Ty Wizard component
 export interface TyWizardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -77,7 +78,7 @@ export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/utils/host-props.ts

@@ -0,0 +1,14 @@
+/**
+ * Normalize pass-through props for a custom-element host.
+ *
+ * React 18 does not special-case `className` on custom elements — it
+ * lowercases the prop into a literal `classname=""` attribute, which no CSS
+ * ever matches. Renaming it to `class` makes React pass it through verbatim,
+ * so host-level utility classes (layout, positioning) actually apply.
+ * React 19 handles `className` natively; this stays harmless there.
+ */
+export function hostProps<T extends Record<string, any>>(props: T): Record<string, any> {
+  const { className, ...rest } = props;
+  if (className != null) (rest as Record<string, any>).class = className;
+  return rest;
+}

package/src/version.ts

@@ -3,4 +3,4 @@
 // Run 'npm run generate:version' to regenerate.
 
 /** Current version of tyrell-react. Synced with package.json on build. */
-export const VERSION = '1.0.0-TC29'
+export const VERSION = '1.0.0-TC31'