@ni/nimble-components 18.8.4 → 18.9.0

package/dist/all-components-bundle.min.js

@@ -2979,17 +2979,13 @@ const Dp=no.tagFor(Lp),zp="underline",Bp="outline",Np="block",Zp=ft`
         color: ${Ur};
         width: 100%;
         position: absolute;
-        top: ${ta};
+        bottom: calc(-1 * ${uc});
         left: 0px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
-    :host([error-visible][readonly]:not([disabled])) .error-text {
-        top: calc(${ta} - ${na});
-    }
-
     :host([error-visible]) .error-text:empty {
         display: none;
     }
@@ -5752,6 +5748,7 @@ class kw extends _e{}const Sw=kw.compose({baseName:"tabs-toolbar",template:Cw,st
 no.getOrCreate().withPrefix("nimble").register(Sw()),no.tagFor(kw)
 const _w="outline",Iw="block",Mw=ft`
     ${bn("inline-flex")}
+    ${qp}
 
     :host {
         font: ${yl};
@@ -5760,6 +5757,7 @@ const _w="outline",Iw="block",Mw=ft`
         color: ${xl};
         flex-direction: column;
         vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${na} + 1px);
     }
 
     :host([disabled]) {
@@ -5776,10 +5774,47 @@ const _w="outline",Iw="block",Mw=ft`
         color: ${Ll};
     }
 
+    .container {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        height: 100%;
+        width: 100%;
+    }
+
+    .container::after {
+        content: ' ';
+        position: absolute;
+        bottom: calc(-1 * ${na});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${Kr}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${Cc} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${Ur};
+    }
+
+    :host(:hover) .container::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .container::after,
+    :host([readonly]:hover) .container::after {
+        width: 0px;
+    }
+
     .control {
         -webkit-appearance: none;
         font: inherit;
-        width: 100%;
         flex-grow: 1;
         outline: none;
         box-sizing: border-box;
@@ -5788,8 +5823,12 @@ const _w="outline",Iw="block",Mw=ft`
         border-radius: 0px;
         align-items: flex-end;
         border: ${na} solid transparent;
+        min-width: 100px;
+        min-height: calc(${sa} + ${oa});
         padding: 8px;
-        transition: box-shadow ${Cc}, border ${Cc};
+        ${""}
+        padding-right: calc(${sa});
+        margin: 0px;
         resize: none;
     }
 
@@ -5799,13 +5838,8 @@ const _w="outline",Iw="block",Mw=ft`
         }
     }
 
-    .control:hover {
-        border-color: ${Kr};
-        box-shadow: 0px 0px 0px 1px ${Kr};
-    }
-
     .control:focus-within {
-        border-color: ${Kr};
+        border-bottom-color: ${Kr};
     }
 
     .control[readonly],
@@ -5814,23 +5848,22 @@ const _w="outline",Iw="block",Mw=ft`
     .control[disabled],
     .control[disabled]:hover {
         border-color: rgba(${jr}, 0.1);
-        box-shadow: none;
     }
 
-    .control::placeholder {
-        color: ${Tl};
+    :host([error-visible]) .control {
+        border-bottom-color: ${Ur};
     }
 
-    .control[disabled]::placeholder {
-        color: ${Ll};
+    :host([error-visible]) .control[readonly]:hover:focus-within {
+        border-bottom-color: ${Ur};
     }
 
-    :host([cols]) .control {
-        width: auto;
+    .control::placeholder {
+        color: ${Tl};
     }
 
-    :host([rows]) .control {
-        flex: none;
+    .control[disabled]::placeholder {
+        color: ${Ll};
     }
 
     :host([resize='both']) .control {
@@ -5842,6 +5875,17 @@ const _w="outline",Iw="block",Mw=ft`
     :host([resize='vertical']) .control {
         resize: vertical;
     }
+
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: calc(${oa} / 2);
+        right: var(--ni-private-scrollbar-width);
+    }
 `.withBehaviors(Dc(_w,ft`
             .control {
                 border-color: rgba(${jr}, 0.3);
@@ -5860,21 +5904,21 @@ const _w="outline",Iw="block",Mw=ft`
                 border-color: transparent;
                 background-color: rgba(${jr}, 0.1);
             }
+
+            :host([error-visible][disabled]) .control {
+                border-bottom-color: ${Ur};
+            }
         `))
-class Rw extends Xo{constructor(){super(...arguments),this.appearance=_w}}t([nt],Rw.prototype,"appearance",void 0)
-const Aw=Rw.compose({baseName:"text-area",baseClass:Xo,template:(t,e)=>G`
-    <template
-        class="
-            ${t=>t.readOnly?"readonly":""}
-            ${t=>t.resize!==Wo?`resize-${t.resize}`:""}"
+class Rw extends Xo{constructor(){super(...arguments),this.appearance=_w,this.errorVisible=!1,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.onResize())),this.resizeObserver.observe(this)}disconnectedCallback(){this.resizeObserver?.disconnect()}onTextAreaInput(){this.handleTextInput(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(t,e){super.valueChanged(t,e),this.queueUpdateScrollbarWidth()}onResize(){this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,u.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}}t([nt],Rw.prototype,"appearance",void 0),t([nt({attribute:"error-text"})],Rw.prototype,"errorText",void 0),t([nt({attribute:"error-visible",mode:"boolean"})],Rw.prototype,"errorVisible",void 0),t([f],Rw.prototype,"scrollbarWidth",void 0)
+const Aw=Rw.compose({baseName:"text-area",baseClass:Xo,template:()=>G`
+    <label
+        part="label"
+        for="control"
+        class="${t=>t.defaultSlottedNodes?.length?"label":"label label__hidden"}"
     >
-        <label
-            part="label"
-            for="control"
-            class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"
-        >
-            <slot ${Tt("defaultSlottedNodes")}></slot>
-        </label>
+        <slot ${Tt("defaultSlottedNodes")}></slot>
+    </label>
+    <div class="container">
         <textarea
             part="control"
             class="control"
@@ -5912,11 +5956,17 @@ const Aw=Rw.compose({baseName:"text-area",baseClass:Xo,template:(t,e)=>G`
             aria-owns="${t=>t.ariaOwns}"
             aria-relevant="${t=>t.ariaRelevant}"
             aria-roledescription="${t=>t.ariaRoledescription}"
-            @input="${(t,e)=>t.handleTextInput()}"
+            @input="${t=>t.onTextAreaInput()}"
             @change="${t=>t.handleChange()}"
             ${_t("control")}
         ></textarea>
-    </template>
+        <${dp}
+            severity="error"
+            class="error-icon ${t=>t.scrollbarWidth>=0?"scrollbar-width-calculated":""}"
+            style="--ni-private-scrollbar-width: ${t=>t.scrollbarWidth}px;"
+        ></${dp}>
+        ${Tp}
+    </div>
 `,styles:Mw,shadowOptions:{delegatesFocus:!0}})
 no.getOrCreate().withPrefix("nimble").register(Aw()),no.tagFor(Rw)
 const Ow="underline",Ew="outline",Fw="block",Vw="frameless",Hw=ft`