@ni/nimble-components 11.1.1 → 11.2.0

package/dist/all-components-bundle.js

@@ -19628,6 +19628,15 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 
+    /**
+     * Values for the 'appearance' property of the number field
+     */
+    const NumberFieldAppearance = {
+        underline: 'underline',
+        outline: 'outline',
+        block: 'block'
+    };
+
     const styles$b = css `
     ${display('inline-block')}
 
@@ -19651,6 +19660,10 @@
         font: ${controlLabelFont};
     }
 
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
@@ -19658,7 +19671,7 @@
         flex-direction: row;
         justify-content: center;
         border-radius: 0px;
-        border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         gap: calc(${standardPadding} / 2);
     }
 
@@ -19666,9 +19679,8 @@
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    :host([disabled]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     .root::before {
@@ -19717,7 +19729,7 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        height: calc(${controlHeight} - ${borderWidth});
+        height: ${controlHeight};
         width: 100%;
         border: none;
         padding: 0px;
@@ -19749,32 +19761,67 @@
 
     .controls {
         display: flex;
-        flex-direction: column;
-    }
-
-    .step-up,
-    .step-down {
-        display: inline-flex;
-        height: 15px;
-        width: 15px;
-        cursor: pointer;
+        flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
     }
 
-    .step-up svg,
-    .step-down svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        fill: ${borderColor};
+    .step-up-down-button {
+        ${controlHeight.cssCustomProperty}: 24px;
     }
-`;
+`.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
+            .root {
+                border-bottom-width: ${borderWidth};
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `), appearanceBehavior(NumberFieldAppearance.block, css `
+            .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root {
+                border-bottom-width: ${borderWidth};
+            }
+
+            :host([disabled]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `), appearanceBehavior(NumberFieldAppearance.outline, css `
+            .root {
+                border-width: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `));
 
     /**
      * A nimble-styled HTML number input
      */
     class NumberField extends NumberField$1 {
+        constructor() {
+            super(...arguments);
+            this.appearance = NumberFieldAppearance.underline;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
+            this.control.setAttribute('role', 'spinbutton');
+        }
     }
+    __decorate([
+        attr
+    ], NumberField.prototype, "appearance", void 0);
     /**
      * A function that returns a number-field registration for configuring the component with a DesignSystem.
      *
@@ -19791,8 +19838,28 @@
         shadowOptions: {
             delegatesFocus: true
         },
-        stepDownGlyph: arrowExpanderDown16X16.data,
-        stepUpGlyph: arrowExpanderUp16X16.data
+        stepDownGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Decrement"
+            <nimble-icon-minus-wide slot="start"></nimble-icon-minus-wide>
+        </nimble-button>
+    `,
+        stepUpGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Increment"
+            <nimble-icon-add slot="start"></nimble-icon-add>
+        </nimble-button>
+    `
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());