@ni/nimble-components 11.5.0 → 11.6.0

package/dist/esm/patterns/dropdown/styles.js

@@ -24,10 +24,7 @@ export const styles = css `
     :host::before {
         content: '';
         position: absolute;
-        bottom: calc(
-            var(--ni-private-hover-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
+        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
         justify-self: center;

package/dist/esm/patterns/dropdown/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;;;;;;;;yBAerC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;+BAIP,SAAS;;;;;;;;;;YAU5B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;+BAOpC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;+BAIP,SAAS;;;;;;;;;;YAU5B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;+BAOpC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}

package/dist/esm/patterns/dropdown/types.d.ts

@@ -3,3 +3,9 @@ export declare const DropdownPosition: {
     readonly below: "below";
 };
 export declare type DropdownPosition = typeof DropdownPosition[keyof typeof DropdownPosition];
+export declare const DropdownAppearance: {
+    readonly underline: "underline";
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export declare type DropdownAppearance = typeof DropdownAppearance[keyof typeof DropdownAppearance];

package/dist/esm/patterns/dropdown/types.js

@@ -3,4 +3,9 @@ export const DropdownPosition = {
     above: SelectPosition.above,
     below: SelectPosition.below
 };
+export const DropdownAppearance = {
+    underline: 'underline',
+    outline: 'outline',
+    block: 'block'
+};
 //# sourceMappingURL=types.js.map

package/dist/esm/patterns/dropdown/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;CACrB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;CACrB,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}

package/dist/esm/select/index.d.ts

@@ -1,13 +1,15 @@
 import { Select as FoundationSelect } from '@microsoft/fast-foundation';
+import { DropdownAppearance } from '../patterns/dropdown/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-select': Select;
     }
 }
 /**
- * A nimble-styed HTML select
+ * A nimble-styled HTML select
  */
 export declare class Select extends FoundationSelect {
+    appearance: DropdownAppearance;
     setPositioning(): void;
     slottedOptionsChanged(prev: Element[], next: Element[]): void;
     private maxHeightChanged;

package/dist/esm/select/index.js

@@ -1,10 +1,17 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
 import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
+import { DropdownAppearance } from '../patterns/dropdown/types';
 /**
- * A nimble-styed HTML select
+ * A nimble-styled HTML select
  */
 export class Select extends FoundationSelect {
+    constructor() {
+        super(...arguments);
+        this.appearance = DropdownAppearance.underline;
+    }
     // Workaround for https://github.com/microsoft/fast/issues/5123
     setPositioning() {
         if (!this.$fastController.isConnected) {
@@ -32,6 +39,9 @@ export class Select extends FoundationSelect {
         }
     }
 }
+__decorate([
+    attr
+], Select.prototype, "appearance", void 0);
 const nimbleSelect = Select.compose({
     baseName: 'select',
     baseClass: FoundationSelect,

package/dist/esm/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IACxC,+DAA+D;IAC/C,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAED,+DAA+D;IAC/C,qBAAqB,CACjC,IAAe,EACf,IAAe;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;IACL,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAEO,iCAAiC;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC1B,gCAAgC,EAChC,GAAG,IAAI,CAAC,SAAS,IAAI,CACxB,CAAC;SACL;IACL,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,sBAAsB,CAAC,IAAI;CACzC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAQhE;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QAEW,eAAU,GAAuB,kBAAkB,CAAC,SAAS,CAAC;IAqCzE,CAAC;IAnCG,+DAA+D;IAC/C,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAED,+DAA+D;IAC/C,qBAAqB,CACjC,IAAe,EACf,IAAe;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;IACL,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAEO,iCAAiC;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC1B,gCAAgC,EAChC,GAAG,IAAI,CAAC,SAAS,IAAI,CACxB,CAAC;SACL;IACL,CAAC;CACJ;AArCG;IADC,IAAI;0CACgE;AAuCzE,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,sBAAsB,CAAC,IAAI;CACzC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/select/styles.js

@@ -1,6 +1,40 @@
 import { css } from '@microsoft/fast-element';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { DropdownAppearance } from '../patterns/dropdown/types';
+import { borderWidth, controlHeight, borderRgbPartialColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${dropdownStyles}
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
+            .control {
+                padding-top: ${borderWidth};
+                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
+                padding-right: ${borderWidth};
+            }
+
+            :host([disabled]) .control {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+        `), appearanceBehavior(DropdownAppearance.outline, css `
+            .control {
+                border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+            }
+
+            :host(.invalid) .errortext {
+                top: calc(${controlHeight} - ${borderWidth});
+            }
+        `), appearanceBehavior(DropdownAppearance.block, css `
+            .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
+                padding-right: ${borderWidth};
+                padding-bottom: calc(${borderWidth});
+                border-bottom: ${borderWidth}
+                    rgba(${borderRgbPartialColor}, 0.07);
+            }
+
+            :host([disabled]) .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;CACnB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EACH,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;CACnB,CAAC,aAAa,CACP,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;+BAEgB,WAAW;qCACL,WAAW,MAAM,eAAe;iCACpC,WAAW;;;;qCAIP,qBAAqB;;SAEjD,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;0BAEW,WAAW,eAAe,qBAAqB;;;;4BAI7C,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE0B,qBAAqB;qCACzB,WAAW,MAAM,eAAe;iCACpC,WAAW;uCACL,WAAW;iCACjB,WAAW;2BACjB,qBAAqB;;;;yCAIP,qBAAqB;;SAErD,CACA,CACJ,CAAC"}

package/dist/esm/select/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Types of dropdown appearance.
+ * @public
+ */
+export { DropdownAppearance } from '../patterns/dropdown/types';

package/dist/esm/select/types.js

@@ -0,0 +1,6 @@
+/**
+ * Types of dropdown appearance.
+ * @public
+ */
+export { DropdownAppearance } from '../patterns/dropdown/types';
+//# sourceMappingURL=types.js.map

package/dist/esm/select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/select/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.5.0",
+  "version": "11.6.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",