tyrell-react 1.0.0-RC13 → 1.0.0-RC15

package/src/components/TyModal.tsx

@@ -3,7 +3,6 @@ import { hostProps } from '../utils/host-props';
 import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 import { needsPropertyBridge } from '../utils/react-version';
 
-// Event detail structure for modal events
 export interface TyModalEventDetail {
   reason?: 'programmatic' | 'native' | 'backdrop' | 'escape' | 'close-button';
   returnValue?: string;
@@ -19,7 +18,6 @@ export interface TyModalBeforeCloseDetail {
   reason: 'programmatic' | 'backdrop' | 'escape' | 'close-button' | 'native';
 }
 
-// Type definitions for Ty Modal component
 export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
   /** Controls modal visibility */
   open?: boolean;
@@ -27,12 +25,28 @@ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
   /** Show backdrop behind modal (default: true) */
   backdrop?: boolean;
 
-  /** Allow closing modal by clicking backdrop (default: true) */
+  /**
+   * @deprecated Use `preventOutsideClick` — string-boolean attrs are being
+   * phased out. Still works; prevent-* wins when both are set.
+   */
   closeOnOutsideClick?: boolean;
 
-  /** Allow closing modal with Escape key (default: true) */
+  /**
+   * @deprecated Use `preventEscape` — string-boolean attrs are being phased
+   * out. Still works; prevent-* wins when both are set.
+   */
   closeOnEscape?: boolean;
 
+  /** Backdrop clicks no longer close the modal (also hides the built-in ✕) */
+  preventOutsideClick?: boolean;
+
+  /**
+   * ESC no longer closes the modal (keydown is consumed, so the browser's
+   * double-ESC anti-trap never fires). A fully guarded modal must render its
+   * own close control — WCAG 2.1.2.
+   */
+  preventEscape?: 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.
@@ -52,7 +66,6 @@ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// Ref interface for imperative methods
 export interface TyModalRef {
   show: () => void;
   /**
@@ -64,13 +77,14 @@ export interface TyModalRef {
   element: HTMLElement | null;
 }
 
-// React wrapper for ty-modal web component
 export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
   ({
     open,
     backdrop,
     closeOnOutsideClick,
     closeOnEscape,
+    preventOutsideClick,
+    preventEscape,
     label,
     onOpen,
     onClose,
@@ -80,7 +94,6 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Expose imperative methods through ref
     useImperativeHandle(ref, () => ({
       show: () => {
         if (elementRef.current && typeof (elementRef.current as any).show === 'function') {
@@ -95,17 +108,12 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
       element: elementRef.current,
     }), []);
 
-    // Handle modal events.
-    //
-    // ty-dropdown, ty-multiselect, ty-date-picker etc. dispatch their own
-    // `open`/`close` custom events with `bubbles: true, composed: true` when
-    // their internal popups toggle. Those events bubble up through the
-    // modal's slotted content and land on the ty-modal host — same event
-    // type, same listener. Without the `event.target === element` guard, an
-    // `onClose={() => setIsOpen(false)}` callback would fire every time the
-    // user closes a dropdown inside the modal, and the React state flip
-    // would close the modal. Core's modal.ts already applies the same guard
-    // on its internal <dialog>.onclose; this is the React-layer mirror.
+    // Popup lifecycle events (`open`/`close`, plus `beforeclose` on the modal)
+    // no longer bubble — core dispatches them non-composed on the element
+    // itself, like the native <dialog> events they mirror, so a dropdown or
+    // nested modal closing inside this one can't reach these listeners. The
+    // `event.target === element` guard stays as belt-and-braces for consumers
+    // pinned to an older tyrell-components.
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -125,7 +133,6 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
         if (onBeforeClose) onBeforeClose(event);
       };
 
-      // Listen for custom modal events
       if (onOpen) {
         element.addEventListener('open', handleOpen as EventListener);
       }
@@ -170,9 +177,10 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
       setIf('backdrop', backdrop);
       setIf('closeOnOutsideClick', closeOnOutsideClick);
       setIf('closeOnEscape', closeOnEscape);
-    }, [backdrop, closeOnOutsideClick, closeOnEscape]);
+      setIf('preventOutsideClick', preventOutsideClick);
+      setIf('preventEscape', preventEscape);
+    }, [backdrop, closeOnOutsideClick, closeOnEscape, preventOutsideClick, preventEscape]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
@@ -191,6 +199,13 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
     if (closeOnEscape !== undefined && !coerceBool(closeOnEscape)) {
       webComponentProps['close-on-escape'] = 'false';
     }
+    // Presence booleans: render the bare attribute only when true
+    if (preventOutsideClick !== undefined && coerceBool(preventOutsideClick)) {
+      webComponentProps['prevent-outside-click'] = '';
+    }
+    if (preventEscape !== undefined && coerceBool(preventEscape)) {
+      webComponentProps['prevent-escape'] = '';
+    }
     if (label) webComponentProps.label = label;
 
     return React.createElement(

package/src/components/TyOption.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 Option component
 export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
   value?: string;
 
@@ -14,7 +13,7 @@ export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
   label?: string;
 
   /** Semantic flavor — carried onto ty-selected-options chips */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral' | 'info';
+  flavor?: 'primary' | 'success' | 'danger' | 'warning' | 'neutral' | 'info';
 
   disabled?: boolean;
   selected?: boolean;
@@ -22,12 +21,10 @@ export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-option web component
 export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
   ({ children, label, flavor, disabled, selected, hidden, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {

package/src/components/TyPopup.tsx

@@ -2,10 +2,15 @@ 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
+type Placement =
+  | 'top-start' | 'top' | 'top-end'
+  | 'right-start' | 'right' | 'right-end'
+  | 'bottom-start' | 'bottom' | 'bottom-end'
+  | 'left-start' | 'left' | 'left-end';
+
 export interface TyPopupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClose'> {
-  /** Preferred placement of the popup relative to anchor parent: "top" | "bottom" | "left" | "right" */
-  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Preferred placement of the popup relative to anchor parent: a side plus an optional cross-axis alignment (e.g. "bottom-start") */
+  placement?: Placement;
 
   /** Distance offset from the anchor in pixels (default: 8) */
   offset?: number;
@@ -26,14 +31,12 @@ export interface TyPopupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'o
   children?: React.ReactNode;
 }
 
-// Programmatic API for popup control
 export interface TyPopupElement extends HTMLElement {
   openPopup(): void;
   closePopup(): void;
   togglePopup(): void;
 }
 
-// React wrapper for ty-popup web component
 export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
   ({
     placement,
@@ -47,7 +50,6 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
   }, ref) => {
     const elementRef = useRef<TyPopupElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -58,11 +60,8 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
       }
     }, [ref]);
 
-    // Listen for popup open/close events.
-    // Guard with `event.target === element` so bubbled open/close events
-    // from popup-like descendants (ty-dropdown, ty-multiselect, ty-date-picker
-    // when slotted inside this popup) don't fire the consumer's onOpen/onClose.
-    // See TyModal.tsx for the same pattern + rationale.
+    // Listen for popup open/close events. See TyModal.tsx for why the
+    // `event.target === element` guard is still here.
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -85,13 +84,11 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
       };
     }, [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 (placement) {
       webComponentProps.placement = placement;
     }

package/src/components/TyRadio.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}-`;
 
 export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {

package/src/components/TyRadioGroup.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}-`;
 
 export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {

package/src/components/TyResizeObserver.tsx

@@ -1,7 +1,6 @@
 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> {
   /** Required unique identifier for size registry */
   id: string;
@@ -13,7 +12,6 @@ export interface TyResizeObserverProps extends React.HTMLAttributes<HTMLElement>
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-resize-observer web component
 export const TyResizeObserver = React.forwardRef<HTMLElement, TyResizeObserverProps>(
   ({
     children,
@@ -23,7 +21,6 @@ export const TyResizeObserver = React.forwardRef<HTMLElement, TyResizeObserverPr
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -34,14 +31,12 @@ export const TyResizeObserver = React.forwardRef<HTMLElement, TyResizeObserverPr
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
       id,
     };
 
-    // Add number attributes
     if (debounce !== undefined) webComponentProps.debounce = debounce;
 
     return React.createElement(

package/src/components/TyScrollContainer.tsx

@@ -11,7 +11,6 @@ export interface TyScrollNearEdgeDetail {
   clientHeight: number;
 }
 
-// Type definitions for Ty ScrollContainer component
 export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement> {
   /** Maximum height of the scroll container */
   maxHeight?: string;
@@ -44,7 +43,6 @@ export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement
   children?: React.ReactNode;
 }
 
-// Ref interface for imperative methods
 export interface TyScrollContainerRef {
   /** Force update shadows (useful after dynamic content changes) */
   updateShadows: () => void;
@@ -64,7 +62,6 @@ export interface TyScrollContainerRef {
   element: HTMLElement | null;
 }
 
-// React wrapper for ty-scroll-container web component
 export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScrollContainerProps>(
   ({
     children,
@@ -81,7 +78,6 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Expose imperative methods via ref
     useImperativeHandle(ref, () => ({
       updateShadows: () => { (elementRef.current as any)?.updateShadows?.(); },
       scrollToTop: (smooth = true) => { (elementRef.current as any)?.scrollToTop?.(smooth); },
@@ -109,7 +105,6 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
     const isOverflowX = useBooleanProperty(elementRef, 'overflowX', overflowX);
     const isScrollAnchoring = useBooleanProperty(elementRef, 'scrollAnchoring', scrollAnchoring);
 
-    // Custom events → React callbacks
     useEffect(() => {
       const el = elementRef.current;
       if (!el) return;
@@ -125,17 +120,14 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
       return () => bound.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onNearEnd, onNearStart]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // String attributes
     if (maxHeight) webComponentProps['max-height'] = maxHeight;
     if (nearEdgeThreshold != null) webComponentProps['near-edge-threshold'] = String(nearEdgeThreshold);
 
-    // Boolean attributes
     if (shadow !== undefined && !coerceBool(shadow)) webComponentProps.shadow = 'false';
     if (isHideScrollbar) webComponentProps['hide-scrollbar'] = '';
     if (isCustomScrollbar) webComponentProps['custom-scrollbar'] = '';

package/src/components/TySelect.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 Select component
 export interface TySelectItem {
   value: string;
   label: string;
@@ -56,11 +60,10 @@ export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   /** Mark the field as required */
   required?: boolean;
 
-  /**
-   * Search row visibility: 'auto' (default) shows it only for 8+ options,
-   * 'always' / 'never' force it. external-search always shows it.
-   */
-  searchable?: 'auto' | 'always' | 'never' | boolean;
+  /** Drop the popup search row. A select is searchable by default; this is
+   *  the single opt-out. Cannot override externalSearch/allowCreate, where
+   *  the input is the only way to get a query out. */
+  notSearchable?: boolean;
 
   /**
    * External (remote) search mode — the component stops filtering and emits
@@ -89,12 +92,15 @@ export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   /** 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';
+  /** Field size — the ladder shared by every field component
+   *  (styles/field-size.ts). Defaults to 'sm'. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Horizontal popup anchor: "start" (default, trigger's left edge), "center", or "end" (trigger's right edge) — clamped into the viewport either way. Useful with a custom slot="trigger" element. Ignored when `placement` is set. */
+  align?: 'start' | 'center' | 'end';
 
-  /** 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';
+  /** Full placement, same vocabulary as ty-popup/ty-tooltip: a side plus an optional cross-axis alignment (e.g. "bottom-end"). Takes precedence over `align` when set. */
+  placement?: Placement;
 
   /** 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;
@@ -126,7 +132,6 @@ export interface TySelectElement extends HTMLElement {
   clear(): void;
 }
 
-// React wrapper for ty-select web component
 export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
   ({
     value,
@@ -138,7 +143,7 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
     disabled,
     readonly,
     required,
-    searchable,
+    notSearchable,
     externalSearch,
     debounce,
     allowCreate,
@@ -146,6 +151,7 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
     loading,
     size,
     align,
+    placement,
     clearable,
     flavor,
     onChange,
@@ -158,7 +164,6 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
   }, ref) => {
     const elementRef = useRef<TySelectElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -181,7 +186,6 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
       }
     }, [value]);
 
-    // Handle events
     const handleChange = useCallback((event: Event) => {
       if (onChange) onChange(event as CustomEvent<TySelectEventDetail>);
     }, [onChange]);
@@ -196,7 +200,6 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
       if (onCreate) onCreate(event as CustomEvent<{ value: string; label: string }>);
     }, [onCreate]);
 
-    // Set up event listeners
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -227,13 +230,11 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
     const isAllowCreate = useBooleanProperty(elementRef, 'allowCreate', allowCreate);
     const isClearable = useBooleanProperty(elementRef, 'clearable', clearable);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Handle value conversion (array to comma-separated string)
     if (value !== undefined) {
       webComponentProps.value = Array.isArray(value) ? value.join(',') : value;
     }
@@ -252,13 +253,12 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
     if (name) webComponentProps.name = name;
     if (size) webComponentProps.size = size;
     if (align) webComponentProps.align = align;
+    if (placement) webComponentProps.placement = placement;
     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)
+    if (notSearchable) webComponentProps['not-searchable'] = '';
 
     return React.createElement('ty-select', webComponentProps, children);
   }
@@ -266,11 +266,9 @@ export const TySelect = React.forwardRef<TySelectElement, TySelectProps>(
 
 TySelect.displayName = '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> {
   /** id of the ty-select to display. Falls back to the previous element sibling. */

package/src/components/TyStep.tsx

@@ -1,7 +1,6 @@
 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> {
   /** Required unique identifier for the step */
   id: string;
@@ -22,7 +21,6 @@ export interface TyStepProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-step web component
 export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
   ({
     children,
@@ -35,7 +33,6 @@ export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -46,19 +43,16 @@ export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
       id,
     };
 
-    // Add string attributes
     if (label) webComponentProps.label = label;
     if (description) webComponentProps.description = description;
     if (status) webComponentProps.status = status;
 
-    // Add boolean attributes
     if (disabled) webComponentProps.disabled = true;
 
     return React.createElement(

package/src/components/TySwitch.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}-`;
 
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {

package/src/components/TyTab.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 Tab component
 export interface TyTabProps extends React.HTMLAttributes<HTMLElement> {
   /** Required unique identifier */
   id: string;
@@ -17,7 +16,6 @@ export interface TyTabProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-tab web component
 export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
   ({ 
     children, 
@@ -28,7 +26,6 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -39,20 +36,16 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add required attribute
     webComponentProps.id = id;
     
-    // Add boolean attributes
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
     if (isDisabled) webComponentProps.disabled = '';
     
-    // Add string attributes
     if (label) webComponentProps.label = label;
 
     return React.createElement(

package/src/components/TyTabs.tsx

@@ -1,7 +1,6 @@
 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'> {
   /** Content area width (accepts px or %) */
   width?: string;
@@ -15,6 +14,9 @@ export interface TyTabsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
   /** Position of tab buttons */
   placement?: 'top' | 'bottom';
   
+  /** Divide the bar equally between the tabs instead of scrolling them */
+  fixed?: boolean;
+  
   /** Tab change event handler */
   onChange?: (event: CustomEvent<TabChangeDetail>) => void;
   
@@ -29,7 +31,6 @@ export interface TabChangeDetail {
   previousIndex: number | null;
 }
 
-// React wrapper for ty-tabs web component
 export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
   ({ 
     children, 
@@ -37,12 +38,12 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
     height,
     active,
     placement,
+    fixed,
     onChange,
     ...props 
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle change events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -60,7 +61,6 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
       };
     }, [onChange]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -71,17 +71,17 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add string attributes
     if (width) webComponentProps.width = width;
     if (height) webComponentProps.height = height;
     if (active) webComponentProps.active = active;
     if (placement) webComponentProps.placement = placement;
+    // Presence boolean — render the bare attribute only when true.
+    if (fixed) webComponentProps.fixed = '';
 
     return React.createElement(
       'ty-tabs',