tyrell-components 1.0.0-TC23 → 1.0.0-TC25

package/lib/styles/tag.js

@@ -194,7 +194,7 @@ export const tagStyles = `
 /* ----- PRIMARY ----- */
 :host([flavor="primary"]) {
   --tag-bg: var(--ty-bg-primary);
-  --tag-color: var(--ty-color-primary-strong);
+  --tag-color: var(--ty-color-primary);
   --tag-border-color: var(--ty-border-primary);
 }
 :host([flavor="primary+"]) {
@@ -221,7 +221,7 @@ export const tagStyles = `
 /* ----- SECONDARY ----- */
 :host([flavor="secondary"]) {
   --tag-bg: var(--ty-bg-secondary);
-  --tag-color: var(--ty-color-secondary-strong);
+  --tag-color: var(--ty-color-secondary);
   --tag-border-color: var(--ty-border-secondary);
 }
 :host([flavor="secondary+"]) {
@@ -248,7 +248,7 @@ export const tagStyles = `
 /* ----- SUCCESS ----- */
 :host([flavor="success"]) {
   --tag-bg: var(--ty-bg-success);
-  --tag-color: var(--ty-color-success-strong);
+  --tag-color: var(--ty-color-success);
   --tag-border-color: var(--ty-border-success);
 }
 :host([flavor="success+"]) {
@@ -275,7 +275,7 @@ export const tagStyles = `
 /* ----- DANGER ----- */
 :host([flavor="danger"]) {
   --tag-bg: var(--ty-bg-danger);
-  --tag-color: var(--ty-color-danger-strong);
+  --tag-color: var(--ty-color-danger);
   --tag-border-color: var(--ty-border-danger);
 }
 :host([flavor="danger+"]) {
@@ -302,7 +302,7 @@ export const tagStyles = `
 /* ----- WARNING ----- */
 :host([flavor="warning"]) {
   --tag-bg: var(--ty-bg-warning);
-  --tag-color: var(--ty-color-warning-strong);
+  --tag-color: var(--ty-color-warning);
   --tag-border-color: var(--ty-border-warning);
 }
 :host([flavor="warning+"]) {

package/lib/styles/textarea.d.ts

@@ -2,5 +2,5 @@
  * 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.textarea-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\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 for textareas */\ntextarea.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n  /* Base appearance \u2014 elegant and minimal like input */\n  box-sizing: border-box;\n  width: 100%;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: 6px;\n  background: var(--input-bg, var(--ty-input-bg));\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  transition: all 0.15s ease-in-out;\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/* Focus state - elegant blue glow like input */\ntextarea: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  background: var(--input-bg, var(--ty-input-bg));\n}\n\n/* Hover state - subtle feedback */\ntextarea:hover:not(:disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Disabled state - refined opacity */\ntextarea:disabled {\n  cursor: not-allowed;\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  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:\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:\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";
+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: 6px;\n  background: var(--input-bg, var(--ty-input-bg));\n  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:\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:\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

package/lib/styles/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,muQAwV1B,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,ipTA0X1B,CAAA"}

package/lib/styles/textarea.js

@@ -18,19 +18,78 @@ export const textareaStyles = `
   /* For absolute positioned dummy element */
 }
 
+/* Bordered container — owns the border + active state (composer layout):
+   header (top slot) · textarea (borderless) · footer (bottom slot). */
 .textarea-wrapper {
   position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 1px solid var(--input-border, var(--ty-input-border));
+  border-radius: 6px;
+  background: var(--input-bg, var(--ty-input-bg));
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing
+   to a footer button doesn't make the whole field look focused. */
+.textarea-wrapper:has(textarea:focus) {
+  border-color: var(--input-border-focus, var(--ty-input-border-focus));
+  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+}
+
+/* Error + disabled reflected from the inner textarea (both in shadow DOM, so
+   :has is reliable here — unlike slotted content). */
+.textarea-wrapper:has(textarea.error) {
+  border-color: var(--ty-color-danger);
+  background: var(--ty-bg-danger-soft);
+}
+.textarea-wrapper:has(textarea.error):has(textarea:focus) {
+  border-color: var(--ty-color-danger-bold);
+}
+.textarea-wrapper:has(textarea:disabled) {
+  opacity: 0.5;
+  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
+  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
 }
 
-/* Custom scrollbar track positioning within textarea border */
-.textarea-wrapper .ty-scrollbar-track-y {
+/* Scroll region wraps just the textarea so the custom scrollbar never overlaps
+   the header/footer. */
+.textarea-scroll {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+/* Custom scrollbar track positioned to the scroll region (textarea edges) */
+.textarea-scroll .ty-scrollbar-track-y {
   top: 2px;
   right: 2px;
   bottom: 2px;
   border-radius: 0 4px 4px 0;
 }
 
+/* Header / footer slot regions — zero footprint until they have content
+   (the component toggles .has-content via slotchange). footer defaults to
+   space-between so "tools … submit" works; a single wide button fills it. */
+.textarea-header,
+.textarea-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.textarea-footer { justify-content: space-between; }
+.textarea-header.has-content {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));
+}
+.textarea-footer.has-content {
+  padding: 6px 10px;
+  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));
+}
+
 /* ===== LABEL STYLING ===== */
 
 .ty-field-label {
@@ -64,26 +123,17 @@ export const textareaStyles = `
   padding-left: 12px;
 }
 
-/* Error state for textareas */
-textarea.error {
-  border-color: var(--ty-color-danger);
-  background: var(--ty-bg-danger-soft);
-}
-
-textarea.error:focus {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
-}
+/* Error state is reflected on .textarea-wrapper (see above). */
 
 /* ===== TEXTAREA BASE STYLING ===== */
 
 textarea {
-  /* Base appearance — elegant and minimal like input */
+  /* Borderless — the .textarea-wrapper owns the border/background now. */
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--input-border, var(--ty-input-border));
-  border-radius: 6px;
-  background: var(--input-bg, var(--ty-input-bg));
+  flex: 1 1 auto;
+  border: none;
+  background: transparent;
   color: var(--input-color, var(--ty-input-color));
   font-family: inherit;
   /* Linear-paired typography */
@@ -91,7 +141,6 @@ textarea {
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
   font-weight: var(--ty-font-normal);
-  transition: all 0.15s ease-in-out;
   outline: none;
 
   /* Default size (md) - refined spacing */
@@ -117,24 +166,9 @@ textarea {
   display: none;
 }
 
-/* Focus state - elegant blue glow like input */
-textarea:focus {
-  border-color: var(--input-border-focus, var(--ty-input-border-focus));
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
-  background: var(--input-bg, var(--ty-input-bg));
-}
-
-/* Hover state - subtle feedback */
-textarea:hover:not(:disabled) {
-  border-color: var(--input-border-hover, var(--ty-input-border-hover));
-}
-
-/* Disabled state - refined opacity */
+/* Disabled — visual state lives on the wrapper; just the cursor/text here. */
 textarea:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
-  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
-  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
   color: var(--input-disabled-color, var(--ty-input-disabled-color));
 }
 

package/lib/styles/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwV7B,CAAA"}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0X7B,CAAA"}

package/lib/version.d.ts

@@ -4,5 +4,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC23";
+export declare const VERSION = "1.0.0-TC25";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -7,5 +7,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export const VERSION = '1.0.0-TC23';
+export const VERSION = '1.0.0-TC25';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC23",
+  "version": "1.0.0-TC25",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [
@@ -140,11 +140,19 @@
     "build:dev:watch": "vite build --config vite.config.dev.ts --watch",
     "build": "npm run build:lib && npm run build:cdn",
     "prepublishOnly": "npm run build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "npm run build:lib && wtr",
+    "test:watch": "wtr --watch"
   },
   "devDependencies": {
+    "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@types/mocha": "^10.0.10",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-chrome": "^0.18.1",
     "autoprefixer": "^10.4.27",
+    "axe-core": "^4.12.1",
     "typescript": "^5.7.0",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.5.4"