tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/styles/tab.d.ts

@@ -1,5 +1,4 @@
 /**
  * Tab Component Styles
  */
-export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
-//# sourceMappingURL=tab.d.ts.map
+export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";

package/lib/styles/tab.js

@@ -1,6 +1,3 @@
-/**
- * Tab Component Styles
- */
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const tabStyles = `
 :host {
@@ -41,11 +38,9 @@ export const tabStyles = `
   display: none;
 }
 
-/* Show scrollbar on hover */
 .tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {
   opacity: 1;
 }
 
 ${customScrollbarStyles}
 `;
-//# sourceMappingURL=tab.js.map

package/lib/styles/tabs.d.ts

@@ -1,13 +1,5 @@
 /**
- * Tabs Component Styles
- *
- * Styles for the ty-tabs container component including:
- * - Flexbox layout with top/bottom placement
- * - Tab buttons with hover and active states
- * - Animated marker that follows active tab
- * - Carousel viewport with transform animations
- * - Responsive design with prefers-reduced-motion support
- * - Fully customizable via CSS Parts (::part)
+ * 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/* Bottom placement reverses the order */\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* ===================================== */\n/* Tab Buttons Container */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\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/* Bottom placement moves border to top */\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* ===================================== */\n/* Marker Wrapper */\n/* Expose as CSS Part for custom marker styling */\n/* ===================================== */\n\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 - simple underline */\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/* User's marker element fills the wrapper */\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* ===================================== */\n/* Tab Buttons */\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/* ===================================== */\n/* Overflow \"more\" trigger + menu */\n/* ===================================== */\n\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/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\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/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\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/* Respect user's motion preferences */\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/* ===================================== */\n/* Slotted Tab Panels */\n/* ===================================== */\n\n::slotted(ty-tab) {\n  width: var(--tabs-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n";
-//# sourceMappingURL=tabs.d.ts.map
+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

@@ -1,14 +1,3 @@
-/**
- * Tabs Component Styles
- *
- * Styles for the ty-tabs container component including:
- * - Flexbox layout with top/bottom placement
- * - Tab buttons with hover and active states
- * - Animated marker that follows active tab
- * - Carousel viewport with transform animations
- * - Responsive design with prefers-reduced-motion support
- * - Fully customizable via CSS Parts (::part)
- */
 export const tabsStyles = `
 :host {
   display: block;
@@ -26,16 +15,11 @@ export const tabsStyles = `
   box-sizing: border-box;
 }
 
-/* Bottom placement reverses the order */
 .tabs-container[data-placement="bottom"] {
   flex-direction: column-reverse;
 }
 
-/* ===================================== */
-/* Tab Buttons Container */
-/* Expose as CSS Part for full styling control */
-/* ===================================== */
-
+/* Tab buttons container — exposed as a CSS Part for full styling control */
 .tab-buttons {
   display: flex;
   gap: 0;
@@ -48,17 +32,12 @@ export const tabsStyles = `
   background: transparent;
 }
 
-/* Bottom placement moves border to top */
 .tabs-container[data-placement="bottom"] .tab-buttons {
   border-bottom: none;
   border-top: 1px solid var(--ty-border);
 }
 
-/* ===================================== */
-/* Marker Wrapper */
-/* Expose as CSS Part for custom marker styling */
-/* ===================================== */
-
+/* Marker wrapper — exposed as a CSS Part for custom marker styling */
 .marker-wrapper {
   position: absolute;
   z-index: 0;
@@ -71,7 +50,6 @@ export const tabsStyles = `
     top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
 }
 
-/* Default marker - simple underline */
 .default-marker {
   position: absolute;
   bottom: 0;
@@ -87,7 +65,6 @@ export const tabsStyles = `
   display: none;
 }
 
-/* User's marker element fills the wrapper */
 ::slotted([slot="marker"]) {
   display: block;
   width: 100%;
@@ -95,10 +72,6 @@ export const tabsStyles = `
   box-sizing: border-box;
 }
 
-/* ===================================== */
-/* Tab Buttons */
-/* ===================================== */
-
 .tab-button {
   min-width: 120px;
   padding: 6px 12px;
@@ -140,10 +113,7 @@ export const tabsStyles = `
   display: none;
 }
 
-/* ===================================== */
 /* Overflow "more" trigger + menu */
-/* ===================================== */
-
 .tab-overflow-trigger {
   flex-shrink: 0;
   width: 40px;
@@ -206,11 +176,7 @@ export const tabsStyles = `
   cursor: not-allowed;
 }
 
-/* ===================================== */
-/* Panels Viewport */
-/* Expose as CSS Part for panels container styling */
-/* ===================================== */
-
+/* Panels viewport — exposed as a CSS Part */
 .panels-viewport {
   position: relative;
   flex: 1;
@@ -220,17 +186,13 @@ export const tabsStyles = `
   /* Allows flex child to shrink */
 }
 
-/* ===================================== */
-/* Panels Wrapper (slides horizontally) */
-/* ===================================== */
-
+/* Panels wrapper slides horizontally */
 .panels-wrapper {
   display: flex;
   height: 100%;
   transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
 }
 
-/* Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
   .panels-wrapper {
     transition-duration: 0ms !important;
@@ -241,14 +203,14 @@ export const tabsStyles = `
   }
 }
 
-/* ===================================== */
-/* Slotted Tab Panels */
-/* ===================================== */
-
 ::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;
 }
 `;
-//# sourceMappingURL=tabs.js.map

package/lib/styles/tag.d.ts

@@ -1,6 +1,2 @@
-/**
- * Tag Component Styles
- * PORTED FROM: clj/ty/components/tag.css
- */
+/** Tag Component Styles */
 export declare const tagStyles: string;
-//# sourceMappingURL=tag.d.ts.map

package/lib/styles/tag.js

@@ -1,13 +1,6 @@
-/**
- * Tag Component Styles
- * PORTED FROM: clj/ty/components/tag.css
- */
 import { FLAVORS } from '../types/common.js';
-/* Neutral maps to text/border tokens instead of flavor tokens, so it is
-   written out by hand in the template below. */
 const COLOR_FLAVORS = FLAVORS.filter((f) => f !== 'neutral');
 const tagFlavor = (f) => `
-/* ----- ${f.toUpperCase()} ----- */
 :host([flavor="${f}"]) {
   --tag-bg: var(--ty-bg-${f});
   --tag-color: var(--ty-color-${f});
@@ -35,22 +28,15 @@ const tagFlavor = (f) => `
 }
 `;
 export const tagStyles = `
-/* Tag Component Styles using centralized ty.variables.css */
-
-/* Host element */
-
-/* Hidden attribute support */
 :host([hidden]) {
   display: none !important;
 }
 
-/* Main container */
 .tag-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--ty-spacing-1);
-  /* Default pill shape - can be overridden */
   border-radius: var(--ty-radius-full);
   /* Mode-flipped weight dial (tyrell.css): 440 light / 400 dark. Chips are
      labels, not actions — they run lighter than buttons. Override with
@@ -68,7 +54,6 @@ export const tagStyles = `
   letter-spacing: var(--ty-tracking-xs);          /* -0.013em */
   min-height: 28px;
 
-  /* Transitions using centralized values */
   transition: var(--ty-transition-all);
 
   /* Colors via custom properties — override on :host for full control */
@@ -78,7 +63,6 @@ export const tagStyles = `
   border-color: var(--tag-border-color, var(--ty-border));
 }
 
-/* Non-pill variant - rectangular with rounded corners */
 :host([pill="false"]) .tag-container,
 :host([not-pill]) .tag-container {
   border-radius: var(--ty-radius-md);
@@ -109,14 +93,12 @@ export const tagStyles = `
   outline: none;
 }
 
-/* Disabled state */
 .tag-container[aria-disabled="true"] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* Slot containers */
 .tag-start,
 .tag-content,
 .tag-end {
@@ -131,7 +113,6 @@ export const tagStyles = `
   min-width: 0;
 }
 
-/* Dismiss button */
 .tag-dismiss {
   display: inline-flex;
   align-items: center;
@@ -145,7 +126,6 @@ export const tagStyles = `
   transition: var(--ty-transition-all);
   opacity: 0.7;
   flex-shrink: 0;
-  /* Default MD dismiss button size */
   width: var(--ty-spacing-4);
   /* 16px */
   height: var(--ty-spacing-4);
@@ -161,7 +141,6 @@ export const tagStyles = `
   height: 100%;
 }
 
-/* Size variants - override defaults */
 :host([size="xs"]) .tag-container {
   padding: 0 0.375rem;                            /* 0 6px */
   font-size: var(--ty-font-xs);                   /* 12px */
@@ -190,8 +169,7 @@ export const tagStyles = `
   margin-left: var(--ty-spacing-2);
 }
 
-/* MD is now the default - no need for explicit [size="md"] selector */
-/* All default styles above apply to MD size (min-height: 24px) */
+/* MD is the default — no explicit [size="md"] selector needed */
 
 :host([size="lg"]) .tag-container {
   padding: 0 var(--ty-spacing-3);                 /* 0 12px */
@@ -221,15 +199,13 @@ export const tagStyles = `
   margin-left: var(--ty-spacing-4);
 }
 
-/* ===== FLAVOR VARIANTS =====
-   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.
+/* Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.
    Append '+' to flavor for a stronger shade (mild background, strong color),
    or '-' for a softer shade (soft background, base color).
    Generated per flavor above; neutral diverges (text/border tokens) and
    stays hand-written below. */
 
 ${COLOR_FLAVORS.map(tagFlavor).join('')}
-/* ----- NEUTRAL ----- */
 :host([flavor="neutral"]) {
   --tag-color: var(--ty-text-bold);
   --tag-bg: var(--ty-bg-neutral-soft);
@@ -257,7 +233,6 @@ ${COLOR_FLAVORS.map(tagFlavor).join('')}
   box-shadow: 0 0 0 3px var(--ty-border-soft);
 }
 
-/* Slotted content styling */
 .tag-start ::slotted(*),
 .tag-content ::slotted(*),
 .tag-end ::slotted(*) {
@@ -265,7 +240,6 @@ ${COLOR_FLAVORS.map(tagFlavor).join('')}
   align-items: center;
 }
 
-/* Icon sizing for slotted icons */
 .tag-start ::slotted(ty-icon),
 .tag-end ::slotted(ty-icon) {
   width: 1em;
@@ -273,7 +247,6 @@ ${COLOR_FLAVORS.map(tagFlavor).join('')}
   flex-shrink: 0;
 }
 
-/* Count/badge styling using centralized spacing */
 .tag-end ::slotted(.count) {
   display: inline-flex;
   align-items: center;
@@ -292,7 +265,6 @@ ${COLOR_FLAVORS.map(tagFlavor).join('')}
   flex-shrink: 0;
 }
 
-/* Special handling for long text content */
 .tag-content {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -305,4 +277,3 @@ ${COLOR_FLAVORS.map(tagFlavor).join('')}
 
 /* Dark mode is handled automatically by the centralized variables */
 `;
-//# sourceMappingURL=tag.js.map

package/lib/styles/textarea.d.ts

@@ -2,5 +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/* ===== LABEL STYLING ===== */\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 indicator - using SVG icon instead of CSS */\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 STYLING ===== */\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\n/* ===== TEXTAREA BASE STYLING ===== */\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  /* Default size (md) - refined spacing */\n  min-height: 80px;\n  /* Larger than input for multiline */\n  padding: 12px 12px;\n  /* Slightly larger padding for text areas */\n\n  /* Auto-resize specific styles */\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n  /* Disable manual resize by default */\n\n  /* Ensure consistent text wrapping */\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\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\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/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\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  /* Ensure it has the same text behavior as textarea */\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\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\n/* Small */\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\n/* Medium (default) */\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\n/* Large */\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\n/* Extra Large */\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\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\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\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\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  /* Smooth height changes */\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/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
-//# sourceMappingURL=textarea.d.ts.map
+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,11 +1,7 @@
-/**
- * Styles for ty-textarea component
- * Enhanced textarea with auto-resize functionality
- */
 export const textareaStyles = `
 :host {
   display: block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   width: 100%;
 }
 
@@ -90,8 +86,6 @@ export const textareaStyles = `
   border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));
 }
 
-/* ===== LABEL STYLING ===== */
-
 .ty-field-label {
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
@@ -102,7 +96,6 @@ export const textareaStyles = `
   padding-left: 12px;
 }
 
-/* Required indicator - using SVG icon instead of CSS */
 .required-icon {
   display: inline-flex;
   align-items: center;
@@ -112,8 +105,6 @@ export const textareaStyles = `
   vertical-align: middle;
 }
 
-/* ===== ERROR MESSAGE STYLING ===== */
-
 .error-message {
   font-size: var(--ty-font-xs);
   line-height: var(--ty-leading-xs);
@@ -125,9 +116,8 @@ export const textareaStyles = `
 
 /* Error state is reflected on .textarea-wrapper (see above). */
 
-/* ===== TEXTAREA BASE STYLING ===== */
-
 textarea {
+  font-family: inherit;
   /* Borderless — the .textarea-wrapper owns the border/background now. */
   box-sizing: border-box;
   width: 100%;
@@ -143,19 +133,13 @@ textarea {
   font-weight: var(--ty-font-normal);
   outline: none;
 
-  /* Default size (md) - refined spacing */
   min-height: 80px;
-  /* Larger than input for multiline */
   padding: 12px 12px;
-  /* Slightly larger padding for text areas */
 
-  /* Auto-resize specific styles */
   overflow: hidden;
   /* Hide scrollbars since we're auto-resizing */
   resize: none;
-  /* Disable manual resize by default */
 
-  /* Ensure consistent text wrapping */
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -172,15 +156,11 @@ textarea:disabled {
   color: var(--input-disabled-color, var(--ty-input-disabled-color));
 }
 
-/* Placeholder styling - subtle and elegant */
 textarea::placeholder {
   color: var(--input-placeholder, var(--ty-input-placeholder));
   font-weight: 400;
 }
 
-/* ===== RESIZE CONTROL OPTIONS ===== */
-
-/* Allow manual resizing */
 textarea.resize-both {
   resize: both;
 }
@@ -202,8 +182,6 @@ textarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {
   resize: none;
 }
 
-/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */
-
 .textarea-dummy {
   /* Hidden element that measures text height */
   position: absolute !important;
@@ -217,14 +195,10 @@ textarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {
   pointer-events: none !important;
   z-index: -1 !important;
 
-  /* Ensure it has the same text behavior as textarea */
   word-wrap: break-word !important;
   overflow-wrap: break-word !important;
 }
 
-/* ===== SIZE MODIFIERS ===== */
-
-/* Extra Small */
 textarea.xs {
   min-height: 64px;
   padding: 8px 10px;
@@ -233,7 +207,6 @@ textarea.xs {
   letter-spacing: var(--ty-tracking-xs);
 }
 
-/* Small */
 textarea.sm {
   min-height: 72px;
   padding: 10px 10px;
@@ -242,7 +215,6 @@ textarea.sm {
   letter-spacing: var(--ty-tracking-sm);
 }
 
-/* Medium (default) */
 textarea.md {
   min-height: 80px;
   padding: 12px 12px;
@@ -251,7 +223,6 @@ textarea.md {
   letter-spacing: var(--ty-tracking-sm);
 }
 
-/* Large */
 textarea.lg {
   min-height: 96px;
   padding: 14px 14px;
@@ -260,7 +231,6 @@ textarea.lg {
   letter-spacing: var(--ty-tracking-base);
 }
 
-/* Extra Large */
 textarea.xl {
   min-height: 112px;
   padding: 16px 16px;
@@ -269,21 +239,17 @@ textarea.xl {
   letter-spacing: var(--ty-tracking-lg);
 }
 
-/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
-
 textarea:focus-visible {
   outline: none;
   /* We use box-shadow instead */
 }
 
-/* High contrast mode support */
 @media (prefers-contrast: high) {
   textarea {
     border-width: 2px;
   }
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   textarea {
     transition: none;
@@ -294,9 +260,6 @@ textarea:focus-visible {
   }
 }
 
-/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */
-
-/* Scale down on smaller containers using container queries */
 @container (max-width: 480px) {
   textarea.lg {
     font-size: var(--ty-font-sm);
@@ -354,16 +317,12 @@ textarea:focus-visible {
   }
 }
 
-/* ===== ANIMATION AND TRANSITIONS ===== */
-
-/* Smooth height transitions for auto-resize */
 textarea {
   transition: var(--ty-local-transition,
     border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out,
     background-color 0.15s ease-in-out,
     height 0.1s ease-out);
-  /* Smooth height changes */
 }
 
 /* Disable height transition on focus to avoid jarring effect */
@@ -374,11 +333,9 @@ textarea:focus {
     background-color 0.15s ease-in-out);
 }
 
-/* For users who prefer reduced motion, disable height transitions */
 @media (prefers-reduced-motion: reduce) {
   textarea {
     transition: none;
   }
 }
 `;
-//# sourceMappingURL=textarea.js.map

package/lib/styles/tooltip.d.ts

@@ -8,4 +8,3 @@
  */
 import type { StyleContent } from '../types/common.js';
 export declare const tooltipStyles: StyleContent;
-//# sourceMappingURL=tooltip.d.ts.map

package/lib/styles/tooltip.js

@@ -1,18 +1,8 @@
-/**
- * Tooltip Styles
- *
- * The tooltip popover is created in document.body (top-layer Popover API)
- * and styled inline by the component — see applyFlavorStyles() in
- * components/tooltip.ts. The shadow root only needs the host to not affect
- * layout.
- */
 export const tooltipStyles = {
     id: 'ty-tooltip',
     css: `
-/* Tooltip host element - display contents to not affect layout */
 :host {
   display: contents;
 }
 `,
 };
-//# sourceMappingURL=tooltip.js.map