tyrell-components 1.0.0-TC46 → 1.0.0-TC47

package/lib/components/date-picker.d.ts

@@ -3,6 +3,7 @@
  * (modal <dialog>), optional time input, form participation via
  * ElementInternals. Value is UTC; display is local.
  */
+import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { Flavor } from '../types/common.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -41,6 +42,11 @@ export interface DatePickerChangeDetail {
 }
 export declare class TyDatePicker extends TyComponent<DatePickerState> {
     protected static properties: {
+        placement: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         size: {
             type: "string";
             visual: boolean;
@@ -169,6 +175,8 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private emitChangeEvent;
     get size(): DatePickerSize;
     set size(v: DatePickerSize);
+    get placement(): Placement | '';
+    set placement(v: Placement | '');
     get flavor(): DatePickerFlavor;
     set flavor(v: DatePickerFlavor);
     get label(): string;

package/lib/components/date-picker.js

@@ -2,7 +2,7 @@ import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { datePickerStyles, datePickerCustomFlavorCss } from '../styles/date-picker.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
-import { computeAnchoredPosition } from '../utils/positioning.js';
+import { computeAnchoredPosition, placementToAnchored } from '../utils/positioning.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -506,6 +506,8 @@ export class TyDatePicker extends TyComponent {
     }
     get size() { return this.getProperty('size'); }
     set size(v) { this.setProperty('size', v); }
+    get placement() { return this.getProperty('placement'); }
+    set placement(v) { this.setProperty('placement', v); }
     get flavor() { return this.getProperty('flavor'); }
     set flavor(v) { this.setProperty('flavor', v); }
     get label() { return this.getProperty('label'); }
@@ -755,11 +757,14 @@ export class TyDatePicker extends TyComponent {
         const estimatedHeight = dialogRect.height || 400;
         const popupWidth = dialogRect.width || 320;
         const wrapPadding = 8;
+        const anchored = placementToAnchored(this.getProperty('placement'));
         const pos = computeAnchoredPosition({
             anchorRect: stubRect,
             popupWidth,
             popupHeight: estimatedHeight,
             gap: 0,
+            align: anchored.align,
+            side: anchored.side,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
@@ -1047,6 +1052,11 @@ export class TyDatePicker extends TyComponent {
     }
 }
 TyDatePicker.properties = {
+    placement: {
+        type: 'string',
+        visual: true,
+        default: '',
+    },
     size: {
         type: 'string',
         visual: true,

package/lib/components/popup.js

@@ -1,4 +1,4 @@
-import { findBestPosition } from '../utils/positioning.js';
+import { findBestPosition, preferenceChain } from '../utils/positioning.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { ensureStyles } from '../utils/styles.js';
 import { popupStyles } from '../styles/popup.js';
@@ -47,11 +47,7 @@ function updatePosition(el) {
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (!anchor || !dialog)
         return;
-    const preferences = placement === 'top' ? ['top', 'bottom', 'left', 'right'] :
-        placement === 'bottom' ? ['bottom', 'top', 'left', 'right'] :
-            placement === 'left' ? ['left', 'right', 'top', 'bottom'] :
-                placement === 'right' ? ['right', 'left', 'top', 'bottom'] :
-                    ['bottom', 'top', 'right', 'left'];
+    const preferences = preferenceChain(placement);
     const positionData = findBestPosition({
         targetEl: anchor,
         floatingEl: dialog,

package/lib/components/select.d.ts

@@ -5,6 +5,7 @@
  * Skins: default form field, `compact` content-hugging trigger, slot="trigger" custom.
  */
 import type { Flavor, Size } from "../types/common.js";
+import { type Placement } from "../utils/positioning.js";
 import { TyComponent } from "../base/ty-component.js";
 import type { PropertyChange } from "../utils/property-manager.js";
 interface TagData {
@@ -116,7 +117,12 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: string;
             validate: (v: any) => boolean;
-            coerce: (v: any) => "start" | "end";
+            coerce: (v: any) => "start" | "end" | "center";
+        };
+        placement: {
+            type: "string";
+            visual: boolean;
+            default: string;
         };
         size: {
             type: "string";
@@ -402,8 +408,10 @@ export declare class TySelect extends TyComponent<SelectState> {
     set debounce(value: number | string);
     get size(): Size;
     set size(value: Size);
-    get align(): "start" | "end";
-    set align(value: "start" | "end");
+    get align(): "start" | "center" | "end";
+    set align(value: "start" | "center" | "end");
+    get placement(): Placement | "";
+    set placement(value: Placement | "");
     get flavor(): Flavor;
     set flavor(value: Flavor);
     get form(): HTMLFormElement | null;

package/lib/components/select.js

@@ -4,7 +4,7 @@ import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.j
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
 import { lockScroll, unlockScroll } from "../utils/scroll-lock.js";
-import { computeAnchoredPosition } from "../utils/positioning.js";
+import { computeAnchoredPosition, placementToAnchored } from "../utils/positioning.js";
 import { isMobileTouch } from "../utils/mobile.js";
 import { TyComponent } from "../base/ty-component.js";
 import { CustomScrollbar, isCustomScrollbarEnabled, } from "../utils/custom-scrollbar.js";
@@ -366,11 +366,19 @@ export class TySelect extends TyComponent {
         const popupWidth = !isNaN(cssWidth)
             ? cssWidth
             : Math.max(stubRect.width, 320);
+        const requested = this.getProperty("placement");
+        const anchored = requested
+            ? placementToAnchored(requested)
+            : {
+                side: "auto",
+                align: this.getProperty("align"),
+            };
         const pos = computeAnchoredPosition({
             anchorRect: stubRect,
             popupWidth,
             popupHeight: estimatedHeight,
-            align: this.getProperty("align"),
+            align: anchored.align,
+            side: anchored.side,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
@@ -1377,6 +1385,12 @@ export class TySelect extends TyComponent {
     set align(value) {
         this.setProperty("align", value);
     }
+    get placement() {
+        return this.getProperty("placement");
+    }
+    set placement(value) {
+        this.setProperty("placement", value);
+    }
     get flavor() {
         return this.getProperty("flavor");
     }
@@ -1484,8 +1498,13 @@ TySelect.properties = {
         type: "string",
         visual: true,
         default: "start",
-        validate: (v) => ["start", "end"].includes(v),
-        coerce: (v) => (v === "end" ? "end" : "start"),
+        validate: (v) => ["start", "center", "end"].includes(v),
+        coerce: (v) => v === "end" ? "end" : v === "center" ? "center" : "start",
+    },
+    placement: {
+        type: "string",
+        visual: true,
+        default: "",
     },
     size: {
         type: "string",

package/lib/components/tabs.js

@@ -231,7 +231,7 @@ function setupResizeObserver(el) {
         const activeId = getActiveTabId(el, tabs);
         const activeIndex = activeId ? findTabIndex(tabs, activeId) : 0;
         if (width.includes('%')) {
-            el.style.setProperty('--tabs-width', `${entry.contentRect.width}px`);
+            el.style.setProperty('--tabs-page-width', `${entry.contentRect.width}px`);
         }
         if (activeIndex !== undefined) {
             updateTransform(el, activeIndex);
@@ -370,6 +370,8 @@ function updateOverflow(el) {
     if (buttons.length === 0)
         return;
     const available = container.clientWidth;
+    if (available <= 0)
+        return;
     let total = 0;
     let cutoff = buttons.length;
     for (let i = 0; i < buttons.length; i++) {

package/lib/components/tooltip.js

@@ -1,4 +1,4 @@
-import { findBestPosition, placementPreferences } from '../utils/positioning.js';
+import { findBestPosition, preferenceChain } from '../utils/positioning.js';
 import { ensureStyles } from '../utils/styles.js';
 import { tooltipStyles } from '../styles/tooltip.js';
 const autoUpdateCleanup = new WeakMap();
@@ -134,11 +134,7 @@ function updatePosition(el) {
         console.warn('[ty-tooltip] updatePosition: missing anchor or popover');
         return;
     }
-    const preferences = placement === 'top' ? placementPreferences.tooltip :
-        placement === 'bottom' ? ['bottom', 'top', 'left', 'right'] :
-            placement === 'left' ? ['left', 'right', 'top', 'bottom'] :
-                placement === 'right' ? ['right', 'left', 'top', 'bottom'] :
-                    placementPreferences.tooltip;
+    const preferences = preferenceChain(placement);
     const position = findBestPosition({
         targetEl: anchor,
         floatingEl: popover,

package/lib/styles/button.js

@@ -82,7 +82,7 @@ export const buttonCustomFlavorCss = (base) => solidFlavor(base, 'neutral') + ou
 export const buttonStyles = `
 :host {
   display: inline-block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
 }
 
 :host([wide]) {
@@ -91,6 +91,10 @@ export const buttonStyles = `
 }
 
 button {
+  /* Native form controls do NOT inherit font from the shadow host — the UA
+     stylesheet sets one on them, which beats inheritance. Must be explicit
+     here or the button silently falls back to the system font. */
+  font-family: inherit;
   position: relative;
   display: flex;
   align-items: center;

package/lib/styles/calendar-month.js

@@ -42,7 +42,7 @@ export const calendarMonthStyles = `
   gap: 0;
   padding: 0.75rem;
   border-radius: var(--ty-radius-md);
-  font-family: system-ui, sans-serif;
+  font-family: inherit;
   user-select: none;
   width: var(--calendar-width, fit-content);
   min-width: 280px;

package/lib/styles/calendar-navigation.d.ts

@@ -1,2 +1,2 @@
 /** Calendar Navigation Styles */
-export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
+export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: inherit;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";

package/lib/styles/calendar-navigation.js

@@ -33,7 +33,7 @@ export const calendarNavigationStyles = `
   align-items: center;
   justify-content: space-between;
   padding: var(--nav-padding);
-  font-family: system-ui, sans-serif;
+  font-family: inherit;
   user-select: none;
   width: var(--nav-width, var(--nav-default-width));
   box-sizing: border-box;

package/lib/styles/calendar.d.ts

@@ -2,4 +2,4 @@
  * Calendar Orchestration Styles
  * Simple container for navigation + month display
  */
-export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: system-ui, sans-serif;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";
+export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";

package/lib/styles/calendar.js

@@ -4,7 +4,7 @@ export const calendarStyles = `
   flex-direction: column;
   gap: 0.125rem;
   box-sizing: border-box;
-  font-family: system-ui, sans-serif;
+  font-family: inherit;
 }
 
 @media (max-width: 320px) {

package/lib/styles/date-picker.js

@@ -31,7 +31,7 @@ export const datePickerStyles = `
   display: block;
   width: auto;
   min-width: 200px;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
 
   /* Theming tokens — date-picker stub. Thin shim over --ty-input-*: override
      these to retheme just the date-picker trigger, not other inputs. */
@@ -123,7 +123,7 @@ export const datePickerStyles = `
   color: var(--ty-date-picker-color);
   border: 1px solid var(--date-picker-accent, var(--ty-date-picker-border));
   border-radius: var(--ty-date-picker-radius);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   font-weight: var(--ty-font-normal);
   line-height: var(--ty-line-height-tight);
@@ -341,7 +341,7 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   border-radius: var(--ty-radius-sm);
   background: var(--ty-input-bg);
   color: var(--ty-calendar-time-input-color);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   font-variant-numeric: tabular-nums;
   text-align: center;

package/lib/styles/file-upload.d.ts

@@ -1 +1 @@
-export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";

package/lib/styles/file-upload.js

@@ -1,7 +1,7 @@
 export const fileUploadStyles = `
 :host {
   display: block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   width: 100%;
 }
 

package/lib/styles/icon.d.ts

@@ -1,2 +1,2 @@
 /** Icon Component Styles */
-export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";
+export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a\n     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full\n     chip) inherits the parent's line-height strut and renders taller than wide\n     \u2014 a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an\n     icon inline with text, make the *text wrapper* inline-flex instead. */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* In a named slot the icon sits alongside text (button start/end), so inline\n   layout is what the host expects there. */\n:host([slot]) {\n  display: inline-flex;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";

package/lib/styles/icon.js

@@ -1,7 +1,12 @@
 export const iconStyles = `
 :host {
   /* Display & Layout - CRITICAL: No containment to prevent paint deferral */
-  display: inline-flex;
+  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a
+     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full
+     chip) inherits the parent's line-height strut and renders taller than wide
+     — a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an
+     icon inline with text, make the *text wrapper* inline-flex instead. */
+  display: flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
@@ -50,6 +55,12 @@ export const iconStyles = `
   display: block;
 }
 
+/* In a named slot the icon sits alongside text (button start/end), so inline
+   layout is what the host expects there. */
+:host([slot]) {
+  display: inline-flex;
+}
+
 :host(.icon-xs) {
   width: 0.75em;
   height: 0.75em;

package/lib/styles/input.js

@@ -29,7 +29,7 @@ export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
 :host {
   display: block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   width: 100%;
 }
 
@@ -178,6 +178,7 @@ export const inputStyles = `
 
 input {
   /* Linear-paired typography */
+  font-family: inherit;
   flex: 1;
   min-width: 0;
   box-sizing: border-box;

package/lib/styles/option.d.ts

@@ -1,2 +1,2 @@
 /** Option Component Styles */
-export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";
+export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";

package/lib/styles/option.js

@@ -14,7 +14,7 @@ export const optionStyles = `
 
   /* Linear-paired typography */
   color: var(--ty-text);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);

package/lib/styles/radio.js

@@ -31,7 +31,7 @@ ${inputStyles}
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   color: var(--ty-color-text);
 }
 

package/lib/styles/select-base.js

@@ -31,7 +31,7 @@ export const selectBaseStyles = `
 :host {
   display: block;
   width: 100%;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   --mobile-border-color: var(--ty-border, #5858587d);
 }
 
@@ -115,6 +115,7 @@ export const selectBaseStyles = `
 }
 
 .dropdown-search-input {
+  font-family: inherit;
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
@@ -122,7 +123,7 @@ export const selectBaseStyles = `
   color: var(--input-color, var(--ty-input-color));
   border: 1px solid var(--input-border, var(--ty-input-border));
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
@@ -184,7 +185,7 @@ export const selectBaseStyles = `
   color: var(--input-color, var(--ty-input-color));
   border: 1px solid var(--select-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
@@ -623,6 +624,7 @@ export const selectBaseStyles = `
 }
 
 .dropdown-mode-mobile .mobile-search-input {
+  font-family: inherit;
   flex: 1;
   min-width: 0;
   box-sizing: border-box;
@@ -631,7 +633,7 @@ export const selectBaseStyles = `
   border: 2px solid;
   border-color: var(--mobile-border-color);
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);

package/lib/styles/tabs.d.ts

@@ -2,4 +2,4 @@
  * Tabs Component Styles — ty-tabs container: top/bottom placement, animated
  * active marker, carousel viewport. Customizable via CSS Parts (::part).
  */
-export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n  /* For absolute positioned marker */\n  \n  /* Default minimal styling - customize via ::part(buttons-container) */\n  border-bottom: 1px solid var(--ty-border);\n  background: transparent;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot=\"marker\"])) .default-marker {\n  display: none;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  min-width: 120px;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-button.overflow-hidden {\n  display: none;\n}\n\n/* Overflow \"more\" trigger + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  width: 40px;\n  min-width: 40px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  width: var(--tabs-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n";
+export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n  /* For absolute positioned marker */\n  \n  /* Default minimal styling - customize via ::part(buttons-container) */\n  border-bottom: 1px solid var(--ty-border);\n  background: transparent;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot=\"marker\"])) .default-marker {\n  display: none;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  min-width: 120px;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-button.overflow-hidden {\n  display: none;\n}\n\n/* Overflow \"more\" trigger + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  width: 40px;\n  min-width: 40px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  /* Carousel page width. --tabs-page-width is the measured pixel width, set by\n     the ResizeObserver for percentage-width tabs so every panel is exactly one\n     page wide. It is deliberately NOT --tabs-width: that one sizes :host, and\n     feeding a measured pixel value back into the host's own width is a\n     self-referential loop (see setupResizeObserver). */\n  width: var(--tabs-page-width, var(--tabs-width, 100%));\n  height: 100%;\n  flex-shrink: 0;\n}\n";

package/lib/styles/tabs.js

@@ -204,7 +204,12 @@ export const tabsStyles = `
 }
 
 ::slotted(ty-tab) {
-  width: var(--tabs-width, 100%);
+  /* Carousel page width. --tabs-page-width is the measured pixel width, set by
+     the ResizeObserver for percentage-width tabs so every panel is exactly one
+     page wide. It is deliberately NOT --tabs-width: that one sizes :host, and
+     feeding a measured pixel value back into the host's own width is a
+     self-referential loop (see setupResizeObserver). */
+  width: var(--tabs-page-width, var(--tabs-width, 100%));
   height: 100%;
   flex-shrink: 0;
 }

package/lib/styles/textarea.d.ts

@@ -2,4 +2,4 @@
  * Styles for ty-textarea component
  * Enhanced textarea with auto-resize functionality
  */
-export declare const textareaStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\ntextarea {\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  outline: none;\n\n  min-height: 80px;\n  padding: 12px 12px;\n\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px 10px;\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px 10px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.md {\n  min-height: 80px;\n  padding: 12px 12px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px 14px;\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px 16px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\ntextarea {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out);\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
+export declare const textareaStyles = "\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\ntextarea {\n  font-family: inherit;\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  outline: none;\n\n  min-height: 80px;\n  padding: 12px 12px;\n\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px 10px;\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px 10px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.md {\n  min-height: 80px;\n  padding: 12px 12px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px 14px;\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px 16px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\ntextarea {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out);\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";

package/lib/styles/textarea.js

@@ -1,7 +1,7 @@
 export const textareaStyles = `
 :host {
   display: block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   width: 100%;
 }
 
@@ -117,6 +117,7 @@ export const textareaStyles = `
 /* Error state is reflected on .textarea-wrapper (see above). */
 
 textarea {
+  font-family: inherit;
   /* Borderless — the .textarea-wrapper owns the border/background now. */
   box-sizing: border-box;
   width: 100%;