tyrell-react 1.0.0-RC12 → 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';
@@ -84,7 +88,7 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
 
     // 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;
@@ -67,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,
@@ -89,7 +98,7 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
     onClose,
     ...props 
   }, ref) => {
-    const elementRef = useRef<HTMLElement>(null);
+    const elementRef = useRef<TyDatePickerElement>(null);
 
     // Handle ref forwarding
     useEffect(() => {
@@ -167,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,
     };
 

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,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
@@ -7,12 +8,12 @@ export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
 
   /**
    * Clean display text (native <option label> semantics) — used by ty-select
-   * for field summaries and by ty-selected-tags chips when the option's
+   * 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-tags chips */
+  /** Semantic flavor — carried onto ty-selected-options chips */
   flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral' | 'info';
 
   disabled?: boolean;
@@ -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;
@@ -17,7 +21,7 @@ export interface TySelectEventDetail {
   /** Rich info per selected value — enough to render chips out-of-band */
   items: TySelectItem[];
   /** Action that triggered the change */
-  action: 'add' | 'remove' | 'clear' | 'set';
+  action: 'add' | 'remove' | 'clear' | 'set' | 'create';
   /** The specific value that changed */
   item: string | null;
 }
@@ -67,12 +71,37 @@ 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';
 
+  /** Horizontal popup anchor: "start" (default, trigger's left edge) or "end" (trigger's right edge) — clamped into the viewport either way. Useful with a custom slot="trigger" element. */
+  align?: 'start' | 'end';
+
+  /** Built-in x clear button in the default/compact trigger, shown once something is selected. Default true. Not shown with slot="trigger" — use the ref's clear() method there instead. */
+  clearable?: boolean;
+
+  /** 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,12 +110,24 @@ 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;
 }
 
+/** The underlying custom element, typed with its imperative clear() method — useful with a ref, e.g. for slot="trigger" custom triggers that call it directly instead of relying on the built-in clear button. */
+export interface TySelectElement extends HTMLElement {
+  clear(): void;
+}
+
 // React wrapper for ty-select web component
-export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
+export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
   ({
     value,
     multiple,
@@ -100,16 +141,22 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
     searchable,
     externalSearch,
     debounce,
+    allowCreate,
+    createTransform,
     loading,
     size,
+    align,
+    clearable,
+    flavor,
     onChange,
     onSearch,
     onOpen,
     onClose,
+    onCreate,
     children,
     ...props
   }, ref) => {
-    const elementRef = useRef<HTMLElement>(null);
+    const elementRef = useRef<TySelectElement>(null);
 
     // Handle ref forwarding
     useEffect(() => {
@@ -145,6 +192,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 +205,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 +224,12 @@ 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);
+    const isClearable = useBooleanProperty(elementRef, 'clearable', clearable);
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
@@ -191,12 +245,17 @@ 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 (align) webComponentProps.align = align;
+    if (isClearable) webComponentProps.clearable = '';
+    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)
@@ -208,7 +267,9 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
 TySelect.displayName = 'TySelect';
 
 // ============================================================================
-// TySelectedTags — out-of-band chip display for a TySelect
+// TySelectedOptions — out-of-band chip display for a TySelect
+// (ty-selected-tags below is the same element under its original tag name,
+// kept for backward compatibility.)
 // ============================================================================
 
 export interface TySelectedTagsProps extends React.HTMLAttributes<HTMLElement> {
@@ -218,9 +279,8 @@ export interface TySelectedTagsProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-selected-tags web component
-export const TySelectedTags = React.forwardRef<HTMLElement, TySelectedTagsProps>(
-  ({ htmlFor, children, ...props }, ref) => {
+const selectedChipsComponent = (tag: 'ty-selected-options' | 'ty-selected-tags') =>
+  React.forwardRef<HTMLElement, TySelectedTagsProps>(({ htmlFor, children, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
@@ -230,11 +290,16 @@ 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);
-  }
-);
+    return React.createElement(tag, webComponentProps, children);
+  });
+
+/** React wrapper for the ty-selected-options web component. */
+export const TySelectedOptions = selectedChipsComponent('ty-selected-options');
+TySelectedOptions.displayName = 'TySelectedOptions';
 
+/** @deprecated Use `TySelectedOptions` — kept for backward compatibility. */
+export const TySelectedTags = selectedChipsComponent('ty-selected-tags');
 TySelectedTags.displayName = 'TySelectedTags';

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