@threadlabs/looma 0.12.0 → 0.12.1

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

@@ -6,6 +6,7 @@
     <span class="affix"><slot name="prefix"></slot></span>
     <span class="field"><slot></slot></span>
     <span class="affix"><slot name="suffix"></slot></span>
+    <span class="action"><slot name="action"></slot></span>
   </div>
   <style>
     /* An input with fixed text before or after it, such as a domain after a site's name
@@ -13,7 +14,9 @@
        focus ring around the input and its affixes together; the input inside drops its own through
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
        affixes are plain text beside the input, so name the input with a label that says what the
-       whole value is. */
+       whole value is. The action slot takes one button at the end, inside the border, for the one
+       thing the field is for ("Continue" after a site's address), so it reads as the field's action
+       and not the form's. */
     :host {
       --ui-input-border: transparent;
       --ui-input-border-hover: transparent;
@@ -43,7 +46,8 @@
       border-color: var(--ui-text-secondary);
     }
 
-    :host:focus-within {
+    /* The field's focus, not the action's: a focused button draws its own ring. */
+    :host:has(.field :focus) {
       border-color: var(--ui-accent-solid);
       box-shadow:
         var(--ui-control-inset),
@@ -76,7 +80,15 @@
       white-space: nowrap;
     }
 
-    .affix:empty {
+    .action {
+      display: flex;
+      flex: none;
+      align-items: stretch;
+      padding: var(--ui-space-1);
+    }
+
+    .affix:empty,
+    .action:empty {
       display: none;
     }