@threadlabs/looma 0.25.1 → 0.25.2

package/components/ui-input-group/ui-input-group.html

@@ -1,6 +1,9 @@
 <template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
     <prop name="multiline" type="boolean" default="false">Groups a Textarea with an action below its text inside the shared frame.</prop>
+    <prop name="actionPosition" type="keyword" values="below, top-end" default="below"
+    >In a multiline group, below keeps the action under the text. top-end places it inside the textarea at its upper end and reserves text padding for its
+      measured width.</prop>
     <prop name="prefixKind" type="keyword" values="text, icon" default="text"
     >Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.</prop>
     <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
@@ -201,6 +204,24 @@
       padding-block-start: 0;
     }
 
+    /* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+       so a translated label or pending indicator cannot cover what the person types. */
+    :host([multiline][actionPosition="top-end"]) {
+      --_ui-default-textarea-padding-inline-end: calc(var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3));
+    }
+
+    :host([multiline][actionPosition="top-end"]) .field {
+      grid-row: 1;
+    }
+
+    :host([multiline][actionPosition="top-end"]) .action {
+      grid-column: 2;
+      grid-row: 1;
+      align-self: start;
+      justify-self: end;
+      padding: var(--ui-space-2);
+    }
+
     .affix:empty,
     .action:empty {
       display: none;

package/components/ui-input-group/ui-input-group.js

@@ -20,7 +20,22 @@ function connect(host) {
   let owned = [];
   let described = null;
   const warned = new Set();
+  let action = null;
+  const measureAction = () => {
+    const width = action?.getBoundingClientRect().width ?? 0;
+    element.style.setProperty("--_ui-input-group-action-inline-size", `${width}px`);
+  };
+  // Observe the actual slot surface rather than estimating a label's width. This also catches
+  // pending indicators, font loading, touch target sizing and translated labels.
+  const actionObserver = new ResizeObserver(measureAction);
   const wire = () => {
+    const nextAction = element.querySelector(":scope > .action");
+    if (action !== nextAction) {
+      if (action) actionObserver.unobserve(action);
+      action = nextAction;
+      if (action) actionObserver.observe(action);
+    }
+    measureAction();
     const input = element.querySelector(".field :is(input, textarea)");
     const affixes = Array.from(element.querySelectorAll(":scope > .affix")).filter((affix) => {
       const text = affix.textContent.trim() !== "" && !affix.querySelector(INTERACTIVE);
@@ -61,6 +76,8 @@ function connect(host) {
   wire();
   return () => {
     observer.disconnect();
+    actionObserver.disconnect();
+    element.style.removeProperty("--_ui-input-group-action-inline-size");
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
   };

package/components/ui-textarea/ui-textarea.html

@@ -70,6 +70,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-textarea-padding-inline-end {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       box-sizing: border-box;
@@ -80,6 +84,7 @@
       margin: 0;
       --_padding-block: var(--ui-space-2);
       padding: var(--ui-space-2) var(--ui-space-3);
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3)));
       appearance: none;
       resize: vertical;
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
@@ -148,12 +153,14 @@
     :host([size="sm"]) {
       --_padding-block: var(--ui-space-1);
       padding: var(--ui-space-1) var(--ui-space-2);
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2)));
       font-size: var(--ui-font-size-sm);
     }
 
     :host([size="lg"]) {
       --_padding-block: var(--ui-space-3);
       padding: var(--ui-space-3) var(--ui-space-4);
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4)));
       font-size: var(--ui-font-size-md);
     }