@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/{TextArea/TextArea.svelte → TextArea.svelte}

@@ -1,10 +1,16 @@
 <script lang="ts">
-  import Icon from "../Icon/Icon.svelte";
-  import { faCopy } from "@fortawesome/free-solid-svg-icons";
+  import ContentCopy from "~icons/mdi/content-copy";
   import type { HTMLTextareaAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, resolveScalar, type Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
   import { DEV } from "esm-env";
 
-  interface Props extends HTMLTextareaAttributes {
+  type TextAreaCopy = "none" | "selection" | "button";
+
+  // Omit the native `oncopy` DOM handler — we repurpose it as a copy-button callback (see below),
+  // the same way TabStrip omits the native `onselect`.
+  interface Props extends Omit<HTMLTextareaAttributes, "oncopy"> {
     value?: string;
     lines?: string[];
     class?: string;
@@ -16,10 +22,62 @@
     minRows?: number;
     maxRows?: number;
     lineHeightRem?: number;
+    size?: Responsive<Size>;
+    /** Colour axis — tints the border + placeholder with the SAME calc as Input (token @ 30% at rest,
+     *  55% on hover/focus, mixed toward transparent). No `secondary`/`-strong` special case. */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline (border → transparent). */
+    borderless?: boolean;
     required?: boolean;
-    allowCopy?: boolean;
+    /** How the text can be copied — one exclusive mode:
+     *  `'selection'` (default) — copy via native text selection only, no button;
+     *  `'button'` — also show the copy-to-clipboard button;
+     *  `'none'` — copying disabled: no button and the text is not selectable.
+     *  Orthogonal to `readonly`/`disabled` (all other behaviour unchanged). */
+    copy?: TextAreaCopy;
+    /** Fires after the copy button successfully writes to the clipboard, with the copied text.
+     *  Lets a consumer confirm the copy (e.g. `oncopy={() => toast.success('Copied to clipboard')}`).
+     *  Not called for native selection-copy, only the `copy="button"` action. */
+    oncopy?: (text: string) => void;
   }
 
+  // Border + placeholder colour by variant — IDENTICAL formula to Input (one calc for every variant):
+  // token @ --ui-tint-border (30%) at rest, token @ 55% on hover/focus, mixed toward transparent.
+  const borderVariantClass: Record<Variant, string> = {
+    secondary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)]",
+    primary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)]",
+    danger:
+      "[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)]",
+    info: "[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)]",
+    success:
+      "[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)]",
+    warning:
+      "[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)]",
+    neutral:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+    ghost:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+  };
+  const placeholderVariantClass: Record<Variant, string> = {
+    secondary:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]",
+    primary:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)]",
+    danger:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)]",
+    info: "placeholder:[color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)]",
+    success:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)]",
+    warning:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)]",
+    neutral:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+    ghost:
+      "placeholder:[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+  };
+
   let {
     value = $bindable(),
     lines = $bindable(),
@@ -32,13 +90,27 @@
     disabled = false,
     minRows = 3,
     maxRows,
-    lineHeightRem = 1.5,
+    lineHeightRem,
+    size = "md",
+    variant = "secondary",
+    borderless = false,
     required = false,
-    allowCopy = $bindable(true),
+    copy = "selection",
+    oncopy,
     readonly = false,
     ...restProps
   }: Props = $props();
 
+  // Size axis (see types/sizes.ts): text size, wrapper padding, and the line-height the autosize
+  // math keys off (so smaller sizes aren't airy). An explicit lineHeightRem still wins.
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const padMap: Record<Size, string> = { sm: "py-0.5 px-2", md: "py-1 px-2", lg: "py-2 px-3" };
+  const textClass = $derived(responsiveClasses(size, textMap));
+  const padClass = $derived(responsiveClasses(size, padMap));
+  // Autosize math is JS-numeric (not a class), so it keys off the base tier of a responsive size.
+  const lhMap: Record<Size, number> = { sm: 1.25, md: 1.5, lg: 1.75 };
+  const effLineHeightRem = $derived(lineHeightRem ?? lhMap[resolveScalar(size, "md")]);
+
   let textareaElement = $state<HTMLTextAreaElement>();
   let containerElement = $state<HTMLDivElement>();
   let isDragging = $state(false);
@@ -50,14 +122,10 @@
   // Development warnings for prop conflicts and empty content
   if (DEV) {
     if (value !== undefined && lines !== undefined) {
-      console.warn(
-        "TextArea: Both value and lines provided. Using value, ignoring lines."
-      );
+      console.warn("TextArea: Both value and lines provided. Using value, ignoring lines.");
     }
     if (value === undefined && !lines) {
-      console.warn(
-        "TextArea: No content provided (value or lines). TextArea will be empty."
-      );
+      console.warn("TextArea: No content provided (value or lines). TextArea will be empty.");
     }
   }
 
@@ -67,7 +135,7 @@
 
   // Content precedence: value > lines
   let effectiveContent = $derived(
-    hasValueProp ? value : hasLinesProp ? lines?.join("\n") || "" : ""
+    hasValueProp ? value : hasLinesProp ? lines?.join("\n") || "" : "",
   );
 
   // Handle bidirectional binding for lines
@@ -81,11 +149,12 @@
   });
 
   // Enforce minimum rows and handle maxRows auto-sizing
-  const effectiveMinRows = Math.max(minRows, 2);
-  const effectiveMaxRows = maxRows ?? Infinity;
-  // disabled overrides both readonly and allowCopy
-  const effectiveReadonly = disabled ? true : readonly;
-  const effectiveAllowCopy = disabled ? false : allowCopy;
+  const effectiveMinRows = $derived(Math.max(minRows, 2));
+  const effectiveMaxRows = $derived(maxRows ?? Infinity);
+  // disabled overrides readonly + the copy mode. `button` shows the button; `none` also blocks selection.
+  const effectiveReadonly = $derived(disabled ? true : readonly);
+  const effectiveCopyable = $derived(disabled ? false : copy === "button");
+  const effectiveSelectable = $derived(disabled ? false : copy !== "none");
 
   // Calculate initial rows based on content
   // NOTE: This only counts explicit line breaks, not wrapped lines.
@@ -96,10 +165,7 @@
       // Count actual lines in the content (newline characters only)
       const lineCount = effectiveContent.split("\n").length;
       // Clamp between min and max
-      return Math.min(
-        Math.max(lineCount, effectiveMinRows, minRows),
-        effectiveMaxRows
-      );
+      return Math.min(Math.max(lineCount, effectiveMinRows, minRows), effectiveMaxRows);
     }
     // Default to minRows if no content
     return Math.max(minRows, effectiveMinRows);
@@ -137,18 +203,13 @@
   // Auto-resize functionality
   function updateHeight() {
     if (!textareaElement) return;
-    
-    
 
     // Get line height - calculate from the prop value, ensuring whole pixels
     if (lineHeight === 0) {
-      const rootFontSize = parseFloat(
-        getComputedStyle(document.documentElement).fontSize
-      );
+      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
       // Round to nearest whole pixel, then convert back to rem for consistency
-      lineHeight = Math.round(lineHeightRem * rootFontSize);
+      lineHeight = Math.round(effLineHeightRem * rootFontSize);
       actualLineHeightRem = lineHeight / rootFontSize;
-      
     }
 
     // Store current scroll position
@@ -157,24 +218,21 @@
     // Force browser reflow by completely resetting styles
     textareaElement.style.height = "";
     textareaElement.style.overflow = "";
-    
+
     // Force a layout reflow
     textareaElement.offsetHeight;
-    
+
     // Now set to auto for measurement
     textareaElement.style.height = "auto";
     textareaElement.style.overflow = "hidden";
-    
+
     // Force another reflow to ensure measurement is accurate
     const scrollHeight = textareaElement.scrollHeight;
 
     // Calculate rows needed
     const neededRows = Math.ceil(scrollHeight / lineHeight);
-    const actualRows = Math.min(
-      Math.max(neededRows, effectiveMinRows),
-      effectiveMaxRows
-    );
-    
+    const actualRows = Math.min(Math.max(neededRows, effectiveMinRows), effectiveMaxRows);
+
     // Update maxRows exceeded state
     maxRowsExceeded = neededRows > effectiveMaxRows;
 
@@ -195,8 +253,7 @@
           isScrollable = false;
         } else {
           // Only scrollable if content actually overflows the set height
-          isScrollable =
-            textareaElement.scrollHeight > textareaElement.clientHeight;
+          isScrollable = textareaElement.scrollHeight > textareaElement.clientHeight;
         }
       } else if (effectiveReadonly) {
         // Readonly textareas are never scrollable in our context
@@ -229,10 +286,7 @@
       setTimeout(() => updateHeight(), 0);
 
       // Check if mouse is already over the element on mount (scrollbar for readonly too)
-      if (
-        containerElement?.matches(":hover") ||
-        textareaElement?.matches(":hover")
-      ) {
+      if (containerElement?.matches(":hover") || textareaElement?.matches(":hover")) {
         hovered = true;
         updateScrollbar();
       }
@@ -246,14 +300,14 @@
   });
 
   let wrapperClasses = $derived.by(() => {
-    const base = "relative w-full rounded-md border-2 py-1 px-2";
+    const base = `relative w-full [border-radius:var(--ui-border-radius)] border ${padClass}`;
 
-    // Use new semantic color system matching Input
+    // Border colour from the variant map (same calc as Input); `borderless` → transparent (its own
+    // background), keeping the 1px box + focus outline.
+    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
     const themeStyles = [
       "bg-transparent",
-      "[border-color:var(--color-secondary)]",
-      "hover:[border-color:color-mix(in_srgb,var(--color-secondary)_80%,black)]",
-      "focus-within:[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)]",
+      frameStyles,
       "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
       "focus-within:[outline-offset:0px]",
     ].join(" ");
@@ -262,37 +316,34 @@
     let validationStyles = "";
     if (touched && !valid) {
       validationStyles =
-        "[border-color:var(--color-danger)] focus-within:[outline:2px_solid_color-mix(in_srgb,var(--color-danger)_70%,transparent)]";
+        "[border-color:var(--ui-color-error)] focus-within:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-error)_70%,transparent)]";
     }
 
-    // Disabled and readonly state
+    // Disabled state — borders are uniformly 1px, so no padding compensation is needed.
     const disabledStyles = disabled
-      ? "![background-color:color-mix(in_srgb,var(--color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--color-secondary)_50%,transparent)] !border !py-[calc(0.25rem+1px)] !px-[calc(0.5rem+1px)] cursor-not-allowed"
-      : effectiveReadonly
-        ? "[border-color:var(--color-secondary)] !border !py-[calc(0.25rem+1px)] !px-[calc(0.5rem+1px)]"
-        : "";
+      ? "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_50%,transparent)] cursor-not-allowed"
+      : "";
 
     return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
   });
 
   let textareaClasses = $derived.by(() => {
-    const base =
-      "w-full bg-transparent border-none outline-none text-sm resize-none custom-textarea";
+    const base = `w-full bg-transparent border-none outline-none ${textClass} resize-none custom-textarea`;
 
     // Use new semantic color system
     const themeStyles = [
-      "[color:var(--color-text)]",
-      "placeholder:[color:var(--color-secondary)]",
+      "[color:var(--ui-color-text)]",
+      placeholderVariantClass[variant],
       "disabled:bg-transparent",
-      "disabled:[color:color-mix(in_srgb,var(--color-text)_40%,transparent)]",
+      "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)]",
       "disabled:cursor-not-allowed",
     ].join(" ");
 
-    // Padding adjustment for copy icon
-    const padding = effectiveAllowCopy ? "pr-8" : "";
+    // Padding adjustment for the copy icon (only when the button is shown)
+    const padding = effectiveCopyable ? "pr-8" : "";
 
     // Cursor style based on allowCopy
-    const cursor = effectiveAllowCopy ? "" : "cursor-default";
+    const cursor = effectiveSelectable ? "" : "cursor-default";
 
     return `${base} ${themeStyles} ${padding} ${cursor} ${textareaClass}`.trim();
   });
@@ -300,8 +351,7 @@
   let copyIconClasses = $derived.by(() => {
     const base =
       "absolute top-0 right-0 w-8 h-8 flex items-center justify-center flex-shrink-0 select-none z-20";
-    const interactive =
-      "cursor-pointer focus:outline-none transition-colors group";
+    const interactive = "cursor-pointer focus:outline-none transition-colors group";
 
     return `${base} ${interactive}`.trim();
   });
@@ -324,7 +374,7 @@
   }
 
   function handleFocus(event: FocusEvent) {
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       // Prevent focus when allowCopy is false
       event.preventDefault();
       if (textareaElement) {
@@ -341,7 +391,7 @@
     if (!effectiveContent) return;
     try {
       await navigator.clipboard.writeText(effectiveContent);
-      // In a real app, you might show a toast notification here
+      oncopy?.(effectiveContent);
     } catch (err) {
       console.error("Failed to copy text: ", err);
     }
@@ -372,7 +422,7 @@
 
   // Prevent text selection when allowCopy is false
   function handleSelectStart(event: Event) {
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       event.preventDefault();
       return false;
     }
@@ -380,14 +430,14 @@
 
   // Additional handlers for comprehensive text selection prevention
   function handleDragStart(event: DragEvent) {
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       event.preventDefault();
       return false;
     }
   }
 
   function handleContextMenu(event: MouseEvent) {
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       event.preventDefault();
       return false;
     }
@@ -397,7 +447,7 @@
     // Handle restProps mousedown first
     if (restProps.onmousedown) restProps.onmousedown(event as any);
 
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       // Prevent clicking inside entirely - no focus, no selection
       event.preventDefault();
       event.stopPropagation();
@@ -408,12 +458,9 @@
     // Handle restProps keydown first
     if (restProps.onkeydown) restProps.onkeydown(event as any);
 
-    if (!effectiveAllowCopy) {
+    if (!effectiveSelectable) {
       // Prevent Ctrl+A (select all) and other selection shortcuts
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        (event.key === "a" || event.key === "A")
-      ) {
+      if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) {
         event.preventDefault();
         return false;
       }
@@ -454,16 +501,11 @@
       return;
     }
 
-    const visibleRatio =
-      textareaElement.clientHeight / textareaElement.scrollHeight;
+    const visibleRatio = textareaElement.clientHeight / textareaElement.scrollHeight;
     const trackHeight = textareaElement.clientHeight;
-    thumbHeight = Math.max(
-      20,
-      Math.min(trackHeight, visibleRatio * trackHeight)
-    );
+    thumbHeight = Math.max(20, Math.min(trackHeight, visibleRatio * trackHeight));
 
-    const maxScrollTop =
-      textareaElement.scrollHeight - textareaElement.clientHeight;
+    const maxScrollTop = textareaElement.scrollHeight - textareaElement.clientHeight;
     if (maxScrollTop > 0) {
       const scrollRatio = textareaElement.scrollTop / maxScrollTop;
       const availableTrackHeight = trackHeight - thumbHeight;
@@ -485,9 +527,7 @@
       const currentScroll = textareaElement.scrollTop;
 
       // Calculate the nearest line boundary (ensure whole pixels)
-      const nearestLineScroll = Math.round(
-        Math.round(currentScroll / lineHeight) * lineHeight
-      );
+      const nearestLineScroll = Math.round(Math.round(currentScroll / lineHeight) * lineHeight);
 
       // Only adjust if we're more than 0.5px away from a line boundary
       // Use a smaller threshold to reduce bounce but still snap effectively
@@ -515,8 +555,7 @@
 
     // Check if the scroll would stay within textarea bounds
     const currentScroll = textareaElement.scrollTop;
-    const maxScrollTop =
-      textareaElement.scrollHeight - textareaElement.clientHeight;
+    const maxScrollTop = textareaElement.scrollHeight - textareaElement.clientHeight;
     const scrollingDown = event.deltaY > 0;
     const scrollingUp = event.deltaY < 0;
 
@@ -544,10 +583,7 @@
     const currentLine = Math.round(currentScroll / lineHeight);
 
     // Calculate new line position
-    const newLine = Math.max(
-      0,
-      currentLine + (scrollDelta > 0 ? linesPerStep : -linesPerStep)
-    );
+    const newLine = Math.max(0, currentLine + (scrollDelta > 0 ? linesPerStep : -linesPerStep));
     const newScrollTop = newLine * lineHeight;
 
     // Apply bounds checking
@@ -574,12 +610,11 @@
     const deltaY = event.clientY - dragStartY;
     const trackHeight = textareaElement.clientHeight - thumbHeight;
     const scrollRatio = deltaY / trackHeight;
-    const maxScrollTop =
-      textareaElement.scrollHeight - textareaElement.clientHeight;
+    const maxScrollTop = textareaElement.scrollHeight - textareaElement.clientHeight;
 
     textareaElement.scrollTop = Math.max(
       0,
-      Math.min(maxScrollTop, dragStartScrollTop + scrollRatio * maxScrollTop)
+      Math.min(maxScrollTop, dragStartScrollTop + scrollRatio * maxScrollTop),
     );
   }
 
@@ -595,7 +630,7 @@
 
   // Initialize window dimensions
   $effect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       windowWidth = window.innerWidth;
       windowHeight = window.innerHeight;
 
@@ -604,8 +639,8 @@
         windowHeight = window.innerHeight;
       };
 
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
     }
   });
 
@@ -658,25 +693,22 @@
       {...restProps}
       class={textareaClasses}
       style="line-height: {actualLineHeightRem ||
-        lineHeightRem}rem; margin: 0; padding: 0; vertical-align: top; {effectiveReadonly
+        effLineHeightRem}rem; margin: 0; padding: 0; vertical-align: top; {effectiveReadonly
         ? ''
-        : 'scroll-snap-type: y mandatory; scroll-padding: 0; overscroll-behavior: contain;'}{effectiveAllowCopy
+        : 'scroll-snap-type: y mandatory; scroll-padding: 0; overscroll-behavior: contain;'}{effectiveSelectable
         ? ''
         : ' user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;'}"
       rows={initialRows}
       {disabled}
       readonly={effectiveReadonly}
       {required}
-      tabindex={effectiveAllowCopy ? undefined : -1}
+      tabindex={effectiveSelectable ? undefined : -1}
       aria-invalid={touched && !valid ? "true" : "false"}
-      aria-describedby={touched &&
-      !valid &&
-      typeof validationResult === "string"
+      aria-describedby={touched && !valid && typeof validationResult === "string"
         ? "textarea-error"
-        : undefined}
-    ></textarea>
+        : undefined}></textarea>
 
-    {#if effectiveAllowCopy && effectiveContent}
+    {#if effectiveCopyable && effectiveContent}
       <div
         class={copyIconClasses}
         onclick={copyToClipboard}
@@ -689,9 +721,8 @@
         style="user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;"
         title="Copy to clipboard"
       >
-        <Icon
-          icon={faCopy}
-          class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors"
+        <ContentCopy
+          class="w-4 h-4 [color:var(--ui-color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--ui-color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors"
         />
       </div>
     {/if}
@@ -699,7 +730,7 @@
     <!-- Custom scrollbar thumb -->
     {#if showScrollbar()}
       <div
-        class="absolute right-1 [background-color:var(--color-secondary)] rounded cursor-pointer hover:[background-color:color-mix(in_srgb,var(--color-secondary)_90%,black)] transition-colors z-10"
+        class="absolute right-1 [background-color:var(--ui-color-secondary)] rounded cursor-pointer hover:[background-color:color-mix(in_srgb,var(--ui-color-secondary)_90%,black)] transition-colors z-10"
         style="top: {thumbTop + 4}px; height: {thumbHeight}px; width: 6px;"
         onmousedown={handleThumbMouseDown}
         role="scrollbar"
@@ -709,7 +740,7 @@
           ? Math.round(
               (textareaElement.scrollTop /
                 (textareaElement.scrollHeight - textareaElement.clientHeight)) *
-                100
+                100,
             )
           : 0}
         aria-valuemin="0"

package/dist/components/TextArea.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type TextAreaCopy = "none" | "selection" | "button";
+interface Props extends Omit<HTMLTextareaAttributes, "oncopy"> {
+    value?: string;
+    lines?: string[];
+    class?: string;
+    textareaClass?: string;
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLTextAreaElement;
+    minRows?: number;
+    maxRows?: number;
+    lineHeightRem?: number;
+    size?: Responsive<Size>;
+    /** Colour axis — tints the border + placeholder with the SAME calc as Input (token @ 30% at rest,
+     *  55% on hover/focus, mixed toward transparent). No `secondary`/`-strong` special case. */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline (border → transparent). */
+    borderless?: boolean;
+    required?: boolean;
+    /** How the text can be copied — one exclusive mode:
+     *  `'selection'` (default) — copy via native text selection only, no button;
+     *  `'button'` — also show the copy-to-clipboard button;
+     *  `'none'` — copying disabled: no button and the text is not selectable.
+     *  Orthogonal to `readonly`/`disabled` (all other behaviour unchanged). */
+    copy?: TextAreaCopy;
+    /** Fires after the copy button successfully writes to the clipboard, with the copied text.
+     *  Lets a consumer confirm the copy (e.g. `oncopy={() => toast.success('Copied to clipboard')}`).
+     *  Not called for native selection-copy, only the `copy="button"` action. */
+    oncopy?: (text: string) => void;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched" | "lines">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/components/ThemeSelector.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import Select from "./Select.svelte";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  // Shared axes, forwarded to the underlying Select (and the label text tracks size).
+  let { size = "md", variant }: { size?: Responsive<Size>; variant?: Variant } = $props();
+  const labelText: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const labelClass = $derived(responsiveClasses(size, labelText));
+
+  const options = [
+    { label: "Auto (System)", value: "auto" },
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+  ];
+
+  const themeClasses = {
+    light: "theme-light",
+    dark: "theme-dark",
+  };
+
+  let selectedTheme = $state("auto");
+
+  // Load saved theme on mount
+  $effect(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("svelte-ui-theme");
+      if (savedTheme && options.some((opt) => opt.value === savedTheme)) {
+        selectedTheme = savedTheme;
+      }
+    }
+  });
+
+  // Apply theme to <html> (documentElement) — NOT <body>.
+  // The theme tokens (incl. --ui-color-hover/active) are defined at :root, and app.html's pre-hydration
+  // script forces the class onto <html>. If we applied it to <body> instead, <html> would stay on the
+  // system @media(prefers-color-scheme) path, so tokens that reference other tokens (--ui-color-hover =
+  // color-mix(var(--ui-color-text)…)) would resolve against the WRONG theme at :root and inherit down
+  // stale (e.g. a white hover-tint on a light page → invisible hover). Keep the class on :root.
+  function applyTheme(themeValue: string) {
+    const body = document.body;
+    const html = document.documentElement;
+
+    // Remove all existing theme classes from both body and html (clear any stray body class too)
+    Object.values(themeClasses).forEach((className) => {
+      body.classList.remove(className);
+      html.classList.remove(className);
+    });
+
+    // Add the selected theme class to <html>
+    const themeClass = themeClasses[themeValue as keyof typeof themeClasses];
+    if (themeClass) {
+      html.classList.add(themeClass);
+    }
+
+    // Save theme to localStorage
+    if (typeof window !== "undefined") {
+      localStorage.setItem("svelte-ui-theme", themeValue);
+    }
+  }
+
+  // Apply theme when selection changes
+  $effect(() => {
+    applyTheme(selectedTheme);
+  });
+</script>
+
+<div class="flex items-center gap-2">
+  <label for="theme-selector" class="{labelClass} font-medium text-[var(--ui-color-text)]"
+    >Theme:</label
+  >
+  <Select
+    bind:value={selectedTheme}
+    {options}
+    {size}
+    {variant}
+    placeholder="Select theme..."
+    class="w-40"
+  />
+</div>

package/dist/components/ThemeSelector.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    size?: Responsive<Size>;
+    variant?: Variant;
+};
+declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;