@kenlo/sds-design-system 1.1.1 → 1.1.2

package/components/Input/Input.css

@@ -391,19 +391,50 @@
 .sds-input__hint--disabled { color: var(--color-neutral-40); }
 /* ── Textbox (textarea) variant ── */
 .sds-input--textbox {
-  height: auto;
+  height: var(--sds-textarea-height, auto);
   min-height: var(--sds-textarea-min-height, 114px);
   align-items: flex-start;
-  resize: vertical;
   overflow: hidden;
 }
-/* Field: fixed padding-top — guarantees constant height regardless of state */
+/* Field: fixed padding-top — guarantees constant height regardless of state.
+   The textarea runs down to the bottom border, as in KDLS: past the last row the start of
+   the next line shows cut at the edge, so a longer text reads as one that goes on. */
 .sds-input--textbox .sds-input__field {
   min-height: 0;
   padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-3);
+  padding-bottom: 0;
   align-self: stretch;
 }
+/* The target grows with the corner radius so the rounded corner never eats into its 24px,
+   and the grip moves in with it so it stays inside the curve. */
+.sds-input__resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  height: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0 max(var(--spacing-1), calc(var(--radius-md) * 0.3)) max(var(--spacing-1), calc(var(--radius-md) * 0.3)) 0;
+  box-sizing: border-box;
+  color: var(--color-neutral-50);
+  cursor: ns-resize;
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  transition: color 120ms ease;
+}
+.sds-input__resize-handle:hover,
+.sds-input--resizing .sds-input__resize-handle {
+  color: var(--color-primary-50-solid);
+}
+.sds-input__resize-handle:focus-visible {
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-input--resizing {
+  user-select: none;
+}
 .sds-input--textbox .sds-input__label {
   top: 26px;
   transform: translateY(-50%);
@@ -420,14 +451,22 @@
   font-size: var(--font-size-label-sm);
   line-height: var(--lh-label-sm);
 }
+/* The textarea also runs over half of the field's right padding, so its scrollbar sits 8px
+   from the right border instead of 16px inside the text's room, as in KDLS. The gutter is
+   kept even without a bar, so the text ends at the same place with or without one. Its own
+   8px at the end is the bottom room, reached when it scrolls to the end. */
 .sds-input__native--textarea {
+  box-sizing: border-box;
   padding-top: 0;
-  padding-bottom: 0;
+  padding-right: 0;
+  padding-bottom: var(--spacing-2);
   resize: none;
   flex: 1;
   line-height: var(--lh-body-md);
   overflow-y: auto;
-  width: 100%;
+  scrollbar-gutter: stable;
+  width: calc(100% + var(--spacing-2));
+  margin-right: calc(-1 * var(--spacing-2));
 }
 /* ── Dark mode ── */
 [data-theme="dark"] .sds-input__country {

package/components/Input/input.marko

@@ -47,6 +47,9 @@ import { assertInputType, assertFeedback, assertWidth, formatValue, nativeTypeFo
 import { validateOnFor, SUBMIT_EVENT } from "../Form/form-context.js";
 import { rehyphenate } from "../../foundations/attrs.js";
 
+static const TEXTBOX_LINE = 24;
+static const TEXTBOX_CHROME = 42;
+
 class {
   onCreate(input) {
     this.state = {
@@ -56,6 +59,8 @@ class {
       showPassword: false,
       error: null,
       touched: false,
+      textboxHeight: null,
+      resizing: false,
     };
   }
 
@@ -137,9 +142,58 @@ class {
   }
 
   onDestroy() {
+    this.stopResize?.();
     this.getEl("field-root")?.removeEventListener(SUBMIT_EVENT, this.onFormSubmit);
   }
 
+  get textboxMinHeight() {
+    return (this.input.rows ?? 3) * TEXTBOX_LINE + TEXTBOX_CHROME;
+  }
+
+  clampTextboxHeight(value) {
+    return Math.max(this.textboxMinHeight, Math.round(value));
+  }
+
+  currentTextboxHeight() {
+    return this.state.textboxHeight
+      ?? (this.getEl("box")?.getBoundingClientRect().height || this.textboxMinHeight);
+  }
+
+  startResize(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = this.currentTextboxHeight();
+    this.state.resizing = true;
+
+    const onMove = (moveEvent) => {
+      this.state.textboxHeight = this.clampTextboxHeight(startHeight + moveEvent.clientY - startY);
+    };
+    const onUp = () => {
+      this.stopResize = null;
+      this.state.resizing = false;
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.removeEventListener("pointercancel", onUp);
+    };
+    this.stopResize = onUp;
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.addEventListener("pointercancel", onUp);
+  }
+
+  resizeByKey(event) {
+    const keys = {
+      ArrowDown: () => this.currentTextboxHeight() + TEXTBOX_LINE,
+      ArrowUp: () => this.currentTextboxHeight() - TEXTBOX_LINE,
+      Home: () => this.textboxMinHeight,
+    };
+    const next = keys[event.key];
+    if (!next) return;
+    event.preventDefault();
+    this.state.textboxHeight = this.clampTextboxHeight(next());
+  }
+
   get currentValue() {
     return this.input.value !== undefined ? this.input.value : this.state.value;
   }
@@ -306,6 +360,7 @@ $ {
     // KDLS marks only the textbox. A modifier per type produced ten classes no rule
     // matched — dead weight in every field's class attribute.
     type === "textbox" ? "sds-input--textbox" : "",
+    state.resizing ? "sds-input--resizing" : "",
     effectiveFeedback !== "none" ? `sds-input--feedback-${effectiveFeedback}` : "",
     disabled ? "sds-input--disabled" : "",
     loading ? "sds-input--loading" : "",
@@ -348,9 +403,13 @@ $ {
     // that reads it and lost the line that writes it. 24px a line plus the 42px the label
     // and padding take, which is KDLS's arithmetic.
     <div
+      key="box"
       class=fieldBoxClass
       aria-busy=(loading ? "true" : null)
-      style=(isTextarea ? `--sds-textarea-min-height: ${rows * 24 + 42}px` : null)
+      style=(isTextarea
+        ? `--sds-textarea-min-height: ${component.textboxMinHeight}px`
+          + (state.textboxHeight !== null ? `; --sds-textarea-height: ${state.textboxHeight}px` : "")
+        : null)
     >
       <if(showsCountry)>
         <!-- The flag opens the list and the dial code sits beside it, which is the whole
@@ -465,6 +524,24 @@ $ {
         </button>
       </if>
 
+      <if(isTextarea && !disabled)>
+        <div
+          class="sds-input__resize-handle"
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Redimensionar campo"
+          aria-valuemin=component.textboxMinHeight
+          aria-valuenow=(state.textboxHeight ?? component.textboxMinHeight)
+          tabindex="0"
+          on-pointerdown("startResize")
+          on-keydown("resizeByKey")
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M9 1L1 9M9 5L5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </if>
+
       <if(showsIncrementer)>
         <div class="sds-input__spinner">
           <button type="button" class="sds-input__spinner-btn" tabindex="-1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/sds-design-system",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "SDS, the Site Design System \u2014 Marko 5 components for Kenlo's public products (Site, Landing Page, Blog)",
   "license": "UNLICENSED",
   "repository": {