tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/styles/tag.js

@@ -2,278 +2,225 @@ import { FLAVORS } from '../types/common.js';
 const COLOR_FLAVORS = FLAVORS.filter((f) => f !== 'neutral');
 const tagFlavor = (f) => `
 :host([flavor="${f}"]) {
-  --tag-bg: var(--ty-bg-${f});
-  --tag-color: var(--ty-color-${f});
-  --tag-border-color: var(--ty-border-${f});
+--tag-bg: var(--ty-bg-${f});
+--tag-color: var(--ty-color-${f});
+--tag-border-color: var(--ty-border-${f});
 }
 :host([flavor="${f}+"]) {
-  --tag-bg: var(--ty-bg-${f}-bold);
-  --tag-color: var(--ty-color-${f}-strong);
-  --tag-border-color: var(--ty-color-${f});
+--tag-bg: var(--ty-bg-${f}-bold);
+--tag-color: var(--ty-color-${f}-strong);
+--tag-border-color: var(--ty-color-${f});
 }
 :host([flavor="${f}-"]) {
-  --tag-bg: var(--ty-bg-${f}-soft);
-  --tag-color: var(--ty-color-${f});
-  --tag-border-color: var(--ty-border-${f});
+--tag-bg: var(--ty-bg-${f}-soft);
+--tag-color: var(--ty-color-${f});
+--tag-border-color: var(--ty-border-${f});
 }
 :host([flavor="${f}"]) .tag-container[tabindex]:hover,
 :host([flavor="${f}+"]) .tag-container[tabindex]:hover,
 :host([flavor="${f}-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-${f}-bold);
+background: var(--ty-bg-${f}-bold);
 }
 :host([flavor="${f}"]) .tag-container[tabindex]:focus,
 :host([flavor="${f}+"]) .tag-container[tabindex]:focus,
 :host([flavor="${f}-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-${f}-faint);
+box-shadow: 0 0 0 3px var(--ty-color-${f}-faint);
 }
 `;
 export const tagStyles = `
 :host([hidden]) {
-  display: none !important;
+display: none !important;
 }
-
 .tag-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ty-spacing-1);
-  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
-     --ty-weight-label at any scope. */
-  font-weight: var(--ty-weight-label, 440);
-  text-align: center;
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-
-  /* Default MD size — anchor at 28px, even +4 steps for other sizes */
-  padding: 0 0.625rem;                            /* 0 10px */
-  font-size: var(--ty-font-xs);                   /* 14px */
-  line-height: var(--ty-leading-xs);              /* 21px */
-  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */
-  min-height: 28px;
-
-  transition: var(--ty-transition-all);
-
-  /* Colors via custom properties — override on :host for full control */
-  background: var(--tag-bg, transparent);
-  color: var(--tag-color, var(--ty-text));
-  border: 1px solid;
-  border-color: var(--tag-border-color, var(--ty-border));
-}
-
+display: flex;
+align-items: center;
+justify-content: center;
+gap: var(--ty-spacing-1);
+border-radius: var(--ty-radius-full);
+font-weight: var(--ty-weight-label, 440);
+text-align: center;
+white-space: nowrap;
+user-select: none;
+box-sizing: border-box;
+padding: 0 0.625rem;                            
+font-size: var(--ty-font-xs);                   
+line-height: var(--ty-leading-xs);              
+letter-spacing: var(--ty-tracking-xs);          
+min-height: 28px;
+transition: var(--ty-transition-all);
+background: var(--tag-bg, transparent);
+color: var(--tag-color, var(--ty-text));
+border: 1px solid;
+border-color: var(--tag-border-color, var(--ty-border));
+}
 :host([pill="false"]) .tag-container,
 :host([not-pill]) .tag-container {
-  border-radius: var(--ty-radius-md);
-  /* 6px instead of full pill */
+border-radius: var(--ty-radius-md);
 }
-
-/* Tags with value attribute but NOT selected should be clickable */
 :host([value]:not([selected])) .tag-container:not([aria-disabled="true"]) {
-  cursor: pointer;
+cursor: pointer;
 }
-
 :host([selected]) .tag-container:not([aria-disabled="true"]) {
-  cursor: initial;
+cursor: initial;
 }
-
 .tag-container[tabindex]:not([aria-disabled="true"]):hover {
-  background: var(--ty-bg-neutral-soft);
-  transform: translateY(-1px);
-  box-shadow: var(--ty-shadow-sm);
+background: var(--ty-bg-neutral-soft);
+transform: translateY(-1px);
+box-shadow: var(--ty-shadow-sm);
 }
-
 .tag-container[tabindex]:not([aria-disabled="true"]):active {
-  transform: translateY(0);
-  box-shadow: var(--ty-shadow-sm);
+transform: translateY(0);
+box-shadow: var(--ty-shadow-sm);
 }
-
 .tag-container[tabindex]:focus {
-  outline: none;
+outline: none;
 }
-
 .tag-container[aria-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
+opacity: 0.6;
+cursor: not-allowed;
+pointer-events: none;
 }
-
 .tag-start,
 .tag-content,
 .tag-end {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
 }
-
 .tag-content {
-  flex: 1;
-  min-width: 0;
+flex: 1;
+min-width: 0;
 }
-
 .tag-dismiss {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  color: currentColor;
-  cursor: pointer;
-  border-radius: var(--ty-radius-full);
-  transition: var(--ty-transition-all);
-  opacity: 0.7;
-  flex-shrink: 0;
-  width: var(--ty-spacing-4);
-  /* 16px */
-  height: var(--ty-spacing-4);
-}
-
+display: inline-flex;
+align-items: center;
+justify-content: center;
+padding: 0;
+background: none;
+border: none;
+color: currentColor;
+cursor: pointer;
+border-radius: var(--ty-radius-full);
+transition: var(--ty-transition-all);
+opacity: 0.7;
+flex-shrink: 0;
+width: var(--ty-spacing-4);
+height: var(--ty-spacing-4);
+}
 .tag-dismiss:hover {
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.1);
+opacity: 1;
+background: rgba(0, 0, 0, 0.1);
 }
-
 .tag-dismiss svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
 :host([size="xs"]) .tag-container {
-  padding: 0 0.375rem;                            /* 0 6px */
-  font-size: var(--ty-font-xs);                   /* 12px */
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  min-height: 20px;
+padding: 0 0.375rem;                            
+font-size: var(--ty-font-xs);                   
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+min-height: 20px;
 }
-
 :host([size="xs"]) .tag-dismiss {
-  width: var(--ty-spacing-3);
-  height: var(--ty-spacing-3);
-  margin-left: var(--ty-spacing-2);
+width: var(--ty-spacing-3);
+height: var(--ty-spacing-3);
+margin-left: var(--ty-spacing-2);
 }
-
 :host([size="sm"]) .tag-container {
-  padding: 0 var(--ty-spacing-2);                 /* 0 8px */
-  font-size: var(--ty-font-xs);                   /* 12px */
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  min-height: 24px;
+padding: 0 var(--ty-spacing-2);                 
+font-size: var(--ty-font-xs);                   
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+min-height: 24px;
 }
-
 :host([size="sm"]) .tag-dismiss {
-  width: var(--ty-spacing-3);
-  height: var(--ty-spacing-3);
-  margin-left: var(--ty-spacing-2);
+width: var(--ty-spacing-3);
+height: var(--ty-spacing-3);
+margin-left: var(--ty-spacing-2);
 }
-
-/* MD is the default — no explicit [size="md"] selector needed */
-
 :host([size="lg"]) .tag-container {
-  padding: 0 var(--ty-spacing-3);                 /* 0 12px */
-  font-size: var(--ty-font-sm);                   /* 14px */
-  line-height: var(--ty-leading-sm);              /* 21px */
-  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */
-  min-height: 32px;
+padding: 0 var(--ty-spacing-3);                 
+font-size: var(--ty-font-sm);                   
+line-height: var(--ty-leading-sm);              
+letter-spacing: var(--ty-tracking-sm);          
+min-height: 32px;
 }
-
 :host([size="lg"]) .tag-dismiss {
-  width: var(--ty-spacing-5);
-  height: var(--ty-spacing-5);
-  margin-left: var(--ty-spacing-4);
+width: var(--ty-spacing-5);
+height: var(--ty-spacing-5);
+margin-left: var(--ty-spacing-4);
 }
-
 :host([size="xl"]) .tag-container {
-  padding: 0 0.875rem;                            /* 0 14px */
-  font-size: var(--ty-font-sm);                   /* 14px */
-  line-height: var(--ty-leading-sm);              /* 21px */
-  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */
-  min-height: 36px;
+padding: 0 0.875rem;                            
+font-size: var(--ty-font-sm);                   
+line-height: var(--ty-leading-sm);              
+letter-spacing: var(--ty-tracking-sm);          
+min-height: 36px;
 }
-
 :host([size="xl"]) .tag-dismiss {
-  width: var(--ty-spacing-5);
-  height: var(--ty-spacing-5);
-  margin-left: var(--ty-spacing-4);
-}
-
-/* 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. */
-
+width: var(--ty-spacing-5);
+height: var(--ty-spacing-5);
+margin-left: var(--ty-spacing-4);
+}
 ${COLOR_FLAVORS.map(tagFlavor).join('')}
 :host([flavor="neutral"]) {
-  --tag-color: var(--ty-text-bold);
-  --tag-bg: var(--ty-bg-neutral-soft);
-  --tag-border-color: var(--ty-border-bold);
+--tag-color: var(--ty-text-bold);
+--tag-bg: var(--ty-bg-neutral-soft);
+--tag-border-color: var(--ty-border-bold);
 }
-
 :host([flavor="neutral+"]) {
-  --tag-bg: var(--ty-bg-neutral-bold);
-  --tag-color: var(--ty-text-bold);
-  --tag-border-color: var(--ty-border-strong);
+--tag-bg: var(--ty-bg-neutral-bold);
+--tag-color: var(--ty-text-bold);
+--tag-border-color: var(--ty-border-strong);
 }
 :host([flavor="neutral-"]) {
-  --tag-bg: var(--ty-bg-neutral-soft);
-  --tag-color: var(--ty-text-soft);
-  --tag-border-color: var(--ty-border);
+--tag-bg: var(--ty-bg-neutral-soft);
+--tag-color: var(--ty-text-soft);
+--tag-border-color: var(--ty-border);
 }
 :host([flavor="neutral"]) .tag-container[tabindex]:hover,
 :host([flavor="neutral+"]) .tag-container[tabindex]:hover,
 :host([flavor="neutral-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-neutral-soft);
+background: var(--ty-bg-neutral-soft);
 }
 :host([flavor="neutral"]) .tag-container[tabindex]:focus,
 :host([flavor="neutral+"]) .tag-container[tabindex]:focus,
 :host([flavor="neutral-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-border-soft);
+box-shadow: 0 0 0 3px var(--ty-border-soft);
 }
-
 .tag-start ::slotted(*),
 .tag-content ::slotted(*),
 .tag-end ::slotted(*) {
-  display: flex;
-  align-items: center;
+display: flex;
+align-items: center;
 }
-
 .tag-start ::slotted(ty-icon),
 .tag-end ::slotted(ty-icon) {
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
+width: 1em;
+height: 1em;
+flex-shrink: 0;
 }
-
 .tag-end ::slotted(.count) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--ty-spacing-6);
-  /* 24px */
-  height: var(--ty-spacing-5);
-  /* 20px */
-  padding: 0 var(--ty-spacing-2);
-  /* 0 8px */
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: var(--ty-radius-full);
-  font-size: var(--ty-font-xs);
-  font-weight: var(--ty-font-semibold);
-  line-height: var(--ty-line-height-none);
-  flex-shrink: 0;
-}
-
+display: inline-flex;
+align-items: center;
+justify-content: center;
+min-width: var(--ty-spacing-6);
+height: var(--ty-spacing-5);
+padding: 0 var(--ty-spacing-2);
+background: rgba(0, 0, 0, 0.1);
+border-radius: var(--ty-radius-full);
+font-size: var(--ty-font-xs);
+font-weight: var(--ty-font-semibold);
+line-height: var(--ty-line-height-none);
+flex-shrink: 0;
+}
 .tag-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
+overflow: hidden;
+text-overflow: ellipsis;
 }
-
 :host([data-type="user"]) .tag-container {
-  min-width: var(--ty-spacing-20);
-  /* 80px for user tags */
+min-width: var(--ty-spacing-20);
 }
-
-/* Dark mode is handled automatically by the centralized variables */
 `;

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: 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";
+export declare const textareaStyles = "\n\n:host {\n  --ty-field-height: var(--ty-size-sm, 2rem);\n  --ty-field-pad-x: 10px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 5px;\n  /* Text that sits OUTSIDE the field box (label, error message) has to line up\n     with the value INSIDE it. The value is inset by the wrapper's 1px border\n     plus --ty-field-pad-x; outside text only ever cleared the padding, so it\n     started exactly 1px to the left of the value it labelled \u2014 at every rung,\n     on every field. Resolved per rung: the calc reads whichever --ty-field-pad-x\n     is winning on the host. */\n  --ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);\n  --ty-field-control: 24px;\n  --ty-field-icon: 16px;\n}\n\n:host([size=\"xs\"]) {\n  --ty-field-height: var(--ty-size-xs, 1.75rem);\n  --ty-field-pad-x: 8px;\n  --ty-field-font: var(--ty-font-xs);\n  --ty-field-leading: 16px;\n  --ty-field-tracking: var(--ty-tracking-xs);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 4px;\n  --ty-field-control: 20px;\n  --ty-field-icon: 14px;\n}\n\n:host([size=\"md\"]) {\n  --ty-field-height: var(--ty-size-md, 2.25rem);\n  --ty-field-pad-x: 12px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 28px;\n  --ty-field-icon: 18px;\n}\n\n:host([size=\"lg\"]) {\n  --ty-field-height: var(--ty-size-lg, 2.5rem);\n  --ty-field-pad-x: 14px;\n  --ty-field-font: var(--ty-font-base);\n  --ty-field-leading: 24px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 32px;\n  --ty-field-icon: 20px;\n}\n\n:host([size=\"xl\"]) {\n  --ty-field-height: var(--ty-size-xl, 2.75rem);\n  --ty-field-pad-x: 16px;\n  --ty-field-font: var(--ty-font-lg);\n  --ty-field-leading: 28px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-base);\n  --ty-field-label-leading: var(--ty-leading-base);\n  --ty-field-label-gap: 8px;\n  --ty-field-control: 36px;\n  --ty-field-icon: 22px;\n}\n\n/* Narrow viewports drop the two biggest rungs one step \u2014 same ladder, no\n   component-specific overrides.\n\n   A stepped-down rung must carry the WHOLE rung: --ty-field-control is the\n   in-field button box (ty-copy's copy button, the date-picker's icon), and it\n   sets the wrapper's content height. Leave it at the original rung and the\n   field ends up taller than --ty-field-height \u2014 the ladder silently breaks on\n   exactly one component. */\n@media (max-width: 640px) {\n  :host([size=\"lg\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-lg, 2.5rem);\n    --ty-field-pad-x: 14px;\n    --ty-field-font: var(--ty-font-base);\n    --ty-field-leading: 24px;\n    --ty-field-control: 32px;\n    --ty-field-icon: 20px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n}\n\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-field-label-font);\n  line-height: var(--ty-field-label-leading);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: var(--ty-field-label-gap);\n  padding-left: var(--ty-field-outer-pad-x);\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: var(--ty-field-outer-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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 var(--ty-field-pad-x);\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";