@threadlabs/looma 0.25.0 → 0.25.1

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

@@ -1,5 +1,6 @@
 <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="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>
@@ -46,6 +47,17 @@
       --_ui-default-input-focus-outline: none;
       --_ui-default-input-radius: 0;
       --_ui-default-input-surface: transparent;
+      --_ui-default-textarea-border-width: 0;
+      --_ui-default-textarea-border: transparent;
+      --_ui-default-textarea-border-hover: transparent;
+      --_ui-default-textarea-focus-border: transparent;
+      --_ui-default-textarea-invalid-border: transparent;
+      --_ui-default-textarea-invalid-focus-shadow: none;
+      --_ui-default-textarea-shadow: none;
+      --_ui-default-textarea-focus-shadow: none;
+      --_ui-default-textarea-focus-outline: none;
+      --_ui-default-textarea-radius: 0;
+      --_ui-default-textarea-surface: transparent;
 
       display: flex;
       align-items: stretch;
@@ -79,13 +91,13 @@
       }
     }
 
-    :host:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :user-invalid)) {
+    :host:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :user-invalid)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
 
     /* The ring shows when the field's input would show its own: when it is focus-visible, which a
        text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-    :host:has(.field input:focus-visible) {
+    :host:has(.field :is(input, textarea):focus-visible) {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-control-inset),
@@ -96,7 +108,7 @@
       border-color: var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
-    :host:has(input:is([aria-invalid="true"], :user-invalid):focus-visible) {
+    :host:has(:is(input, textarea):is([aria-invalid="true"], :user-invalid):focus-visible) {
       box-shadow: var(
         --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
@@ -110,14 +122,14 @@
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
-      :host:has(input:focus-visible) {
+      :host:has(:is(input, textarea):focus-visible) {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: var(--ui-border-width);
       }
     }
 
     :host([disabled]),
-    :host:has(input:disabled) {
+    :host:has(:is(input, textarea):disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       box-shadow: none;
       cursor: not-allowed;
@@ -172,6 +184,23 @@
       padding-inline: var(--ui-space-1);
     }
 
+    /* Multiline text owns the first row; its action remains inside the same frame below it. */
+    :host([multiline]) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+
+    :host([multiline]) .field {
+      grid-column: 2;
+    }
+
+    :host([multiline]) .action {
+      grid-column: 1 / -1;
+      justify-content: end;
+      padding: var(--ui-space-2);
+      padding-block-start: 0;
+    }
+
     .affix:empty,
     .action:empty {
       display: none;

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

@@ -21,7 +21,7 @@ function connect(host) {
   let described = null;
   const warned = new Set();
   const wire = () => {
-    const input = element.querySelector(".field input");
+    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);
       if (text) affix.setAttribute("aria-hidden", "true");
@@ -50,7 +50,7 @@ function connect(host) {
   };
   // Click, not pointerdown: a tap's click is a user activation, so a touch keyboard opens.
   const onClick = (event) => {
-    if (pressedAround(event) && !host.props.disabled.value) element.querySelector(".field input")?.focus();
+    if (pressedAround(event) && !host.props.disabled.value) element.querySelector(".field :is(input, textarea)")?.focus();
   };
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);

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

@@ -26,6 +26,30 @@
   ></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-textarea-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-focus-outline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-surface {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-textarea-focus-shadow {
       syntax: "*";
       inherits: false;
@@ -58,13 +82,14 @@
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
-      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
+        var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
+      border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
+      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+      box-shadow: var(--ui-textarea-shadow, var(--_ui-default-textarea-shadow, var(--ui-control-inset)));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -83,29 +108,32 @@
     }
 
     :host:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:user-invalid) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-textarea-border-hover, var(--_ui-default-textarea-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
-      outline: none;
-      box-shadow: var(--ui-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+      border-color: var(--ui-textarea-focus-border, var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
+      outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
+      box-shadow: var(--ui-textarea-focus-shadow, var(--_ui-default-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+      border-color: var(--ui-textarea-invalid-border, var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-          in srgb,
-          var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-          transparent
+        var(
+          --_ui-default-textarea-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+            in srgb,
+            var(--ui-textarea-invalid-border, var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))) 22%,
+            transparent
+          )
         )
       );
     }