@nyaruka/temba-components 0.41.7 → 0.42.0

package/src/button/Button.ts

@@ -17,7 +17,7 @@ export class Button extends LitElement {
         background-image: var(--button-bg-img);
         color: var(--button-text);
         box-shadow: var(--button-shadow);
-        transition: all 100ms ease-in;
+        transition: all calc(var(--transition-speed) / 2) ease-in;
       }
 
       .button-container {
@@ -26,7 +26,7 @@ export class Button extends LitElement {
         display: block;
         border-radius: var(--curvature);
         outline: none;
-        transition: background ease-in 200ms;
+        transition: background ease-in var(--transition-speed);
         user-select: none;
         -webkit-user-select: none;
         text-align: center;
@@ -61,7 +61,7 @@ export class Button extends LitElement {
         padding: var(--button-y) var(--button-x);
         border-radius: var(--curvature);
         border: 1px solid transparent;
-        transition: all ease-in 200ms;
+        transition: var(--transition-speed);
         background: var(--button-mask);
       }
 

package/src/charcount/CharCount.ts

@@ -51,10 +51,11 @@ export class CharCount extends RapidElement {
         transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)
           var(--transition-speed);
         visibility: hidden;
-        margin-top: 5px;
-        right: 0px;
+        margin-top: var(--temba-charcount-summary-margin-top);
+        right: var(--temba-charcount-summary-right);
+        bottom: var(--temba-charcount-summary-bottom);
         text-align: left;
-        position: absolute;
+        position: var(--temba-charcount-summary-position);
         z-index: 1000;
       }
 
@@ -86,7 +87,7 @@ export class CharCount extends RapidElement {
         display: inline-block;
         padding: 2px 6px;
         border-radius: var(--curvature);
-        margin-top: 4px;
+        margin-top: var(--temba-charcount-counts-margin-top);
       }
 
       .segments {

package/src/completion/Completion.ts

@@ -115,6 +115,9 @@ export class Completion extends FormElement {
   @property({ type: String })
   counter: string;
 
+  @property({ type: Boolean })
+  autogrow = false;
+
   private hiddenElement: HTMLInputElement;
   private query: string;
 
@@ -258,6 +261,7 @@ export class Completion extends FormElement {
             @input=${this.handleInput}
             @blur=${this.handleOptionCanceled}
             .value=${this.value}
+            ?autogrow=${this.autogrow}
             ?textarea=${this.textarea}
             ?submitOnEnter=${this.submitOnEnter}
           >