@ni/nimble-components 11.0.1 → 11.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/all-components-bundle.js +184 -124
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +184 -124
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/menu-button/template.js +1 -1
  6. package/dist/esm/menu-button/template.js.map +1 -1
  7. package/dist/esm/number-field/styles.js +53 -20
  8. package/dist/esm/number-field/styles.js.map +1 -1
  9. package/dist/esm/select/styles.js +78 -29
  10. package/dist/esm/select/styles.js.map +1 -1
  11. package/dist/esm/text-field/styles.js +54 -75
  12. package/dist/esm/text-field/styles.js.map +1 -1
  13. package/package.json +1 -1
package/dist/esm/menu-button/template.js CHANGED
@@ -10,7 +10,7 @@ export const template = context => html `
10
10
  <${context.tagFor(ToggleButton)}
11
11
  part="button"
12
12
  appearance="${x => x.appearance}"
13
- content-hidden="${x => x.contentHidden}"
13
+ ?content-hidden="${x => x.contentHidden}"
14
14
  ?checked="${x => x.open}"
15
15
  ?disabled="${x => x.disabled}"
16
16
  aria-haspopup="true"
package/dist/esm/menu-button/template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EAEP,IAAI,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAwD,OAAO,CAAC,EAAE,CAAC,IAAI,CAAY;;iBAEvF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;;0BAEb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;UAC9B,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;6CAKA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;gBAE9F,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;SACrC,CACJ;;CAEJ,CAAC"}
1
+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EAEP,IAAI,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAwD,OAAO,CAAC,EAAE,CAAC,IAAI,CAAY;;iBAEvF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;;0BAEb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;+BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;UAC9B,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;6CAKA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;gBAE9F,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;SACrC,CACJ;;CAEJ,CAAC"}
package/dist/esm/number-field/styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont } from '../theme-provider/design-tokens';
3
+ import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-block')}
6
6
 
@@ -10,6 +10,7 @@ export const styles = css `
10
10
  user-select: none;
11
11
  color: ${bodyFontColor};
12
12
  height: calc(${labelHeight} + ${controlHeight});
13
+ --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
13
14
  }
14
15
 
15
16
  :host([disabled]) {
@@ -17,32 +18,71 @@ export const styles = css `
17
18
  cursor: default;
18
19
  }
19
20
 
21
+ .label {
22
+ display: flex;
23
+ color: ${controlLabelFontColor};
24
+ font: ${controlLabelFont};
25
+ }
26
+
20
27
  .root {
21
28
  box-sizing: border-box;
22
29
  position: relative;
23
30
  display: flex;
24
31
  flex-direction: row;
32
+ justify-content: center;
25
33
  border-radius: 0px;
26
34
  border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
27
- padding-bottom: 1px;
28
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
35
+ gap: calc(${standardPadding} / 2);
36
+ }
37
+
38
+ .root:focus-within {
39
+ border-bottom-color: ${borderHoverColor};
40
+ }
41
+
42
+ :host([disabled]) .root,
43
+ :host([disabled]) .root:hover {
44
+ border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
45
+ }
46
+
47
+ .root::before {
48
+ ${ /* Empty string causes alignment issue */''}
49
+ content: ' ';
50
+ color: transparent;
51
+ width: 0px;
52
+ user-select: none;
53
+ }
54
+
55
+ .root::after {
56
+ content: '';
57
+ position: absolute;
58
+ bottom: calc(-1 * ${borderWidth});
59
+ width: 0px;
60
+ height: 0px;
61
+ border-bottom: ${borderHoverColor}
62
+ var(--ni-private-hover-indicator-width) solid;
63
+ transition: width ${smallDelay} ease-in;
29
64
  }
30
65
 
31
66
  @media (prefers-reduced-motion) {
32
- .root {
67
+ .root::after {
33
68
  transition-duration: 0s;
34
69
  }
35
70
  }
36
71
 
37
- .root:hover {
38
- border-bottom: 2px solid ${borderHoverColor};
39
- padding-bottom: 0px;
72
+ :host(.invalid) .root::after {
73
+ border-bottom-color: ${failColor};
40
74
  }
41
75
 
42
- :host([disabled]) .root,
43
- :host([disabled]) .root:hover {
44
- border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
45
- padding-bottom: 1px;
76
+ :host(:hover) .root::after {
77
+ width: 100%;
78
+ }
79
+
80
+ :host([disabled]:hover) .root::after {
81
+ width: 0px;
82
+ }
83
+
84
+ [part='start'] {
85
+ display: contents;
46
86
  }
47
87
 
48
88
  .control {
@@ -50,11 +90,10 @@ export const styles = css `
50
90
  font: inherit;
51
91
  background: transparent;
52
92
  color: inherit;
53
- height: 28px;
93
+ height: calc(${controlHeight} - ${borderWidth});
54
94
  width: 100%;
55
- margin-top: auto;
56
- margin-bottom: auto;
57
95
  border: none;
96
+ padding: 0px;
58
97
  }
59
98
 
60
99
  .control:hover,
@@ -81,12 +120,6 @@ export const styles = css `
81
120
  color: ${bodyDisabledFontColor};
82
121
  }
83
122
 
84
- .label {
85
- display: flex;
86
- color: ${controlLabelFontColor};
87
- font: ${controlLabelFont};
88
- }
89
-
90
123
  .controls {
91
124
  display: flex;
92
125
  flex-direction: column;
package/dist/esm/number-field/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;;;;;;yBAUb,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBlD,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;;;;;;;;;;;kBAoBd,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;yBAUP,WAAW,eAAe,qBAAqB;oBACpD,eAAe;;;;+BAIJ,gBAAgB;;;;;yBAKtB,WAAW,UAAU,qBAAqB;;;;UAIzD,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;uBAoBjB,aAAa,MAAM,WAAW;;;;;;;;;;;;;;iBAcpC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;;;;;kBAoBpB,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
package/dist/esm/select/styles.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding } from '../theme-provider/design-tokens';
4
+ import { focusVisible } from '../utilities/style/focus';
4
5
  export const styles = css `
5
6
  ${display('inline-flex')}
6
7
 
@@ -10,35 +11,66 @@ export const styles = css `
10
11
  font: ${bodyFont};
11
12
  height: ${controlHeight};
12
13
  position: relative;
14
+ justify-content: center;
13
15
  user-select: none;
14
16
  min-width: 250px;
15
17
  outline: none;
16
18
  vertical-align: top;
19
+ --ni-private-hover-indicator-width: 2px;
20
+ --ni-private-focus-indicator-width: 1px;
21
+ --ni-private-indicator-lines-gap: 1px;
17
22
  }
18
23
 
19
- .listbox {
20
- box-sizing: border-box;
21
- display: inline-flex;
22
- flex-direction: column;
23
- left: 0;
24
- overflow-y: auto;
24
+ :host::before {
25
+ content: '';
25
26
  position: absolute;
26
- width: 100%;
27
- --ni-private-listbox-padding: 4px;
28
- max-height: calc(
29
- var(--ni-private-select-max-height) - 2 *
30
- var(--ni-private-listbox-padding)
27
+ bottom: calc(
28
+ var(--ni-private-hover-indicator-width) +
29
+ var(--ni-private-indicator-lines-gap)
31
30
  );
32
- z-index: 1;
33
- padding: var(--ni-private-listbox-padding);
34
- box-shadow: 0px 3px 3px ${popupBoxShadowColor};
35
- border: 1px solid ${popupBorderColor};
36
- background-color: ${applicationBackgroundColor};
37
- background-clip: padding-box;
31
+ width: 0px;
32
+ height: 0px;
33
+ justify-self: center;
34
+ border-bottom: ${borderHoverColor}
35
+ var(--ni-private-focus-indicator-width) solid;
36
+ transition: width ${smallDelay} ease-in;
38
37
  }
39
38
 
40
- .listbox[hidden] {
41
- display: none;
39
+ @media (prefers-reduced-motion) {
40
+ :host::before {
41
+ transition-duration: 0s;
42
+ }
43
+ }
44
+
45
+ :host(${focusVisible})::before {
46
+ width: 100%;
47
+ }
48
+
49
+ :host::after {
50
+ content: '';
51
+ position: absolute;
52
+ bottom: 0px;
53
+ width: 0px;
54
+ height: 0px;
55
+ justify-self: center;
56
+ border-bottom: ${borderHoverColor}
57
+ var(--ni-private-hover-indicator-width) solid;
58
+ transition: width ${smallDelay} ease-in;
59
+ }
60
+
61
+ @media (prefers-reduced-motion) {
62
+ :host::after {
63
+ transition-duration: 0s;
64
+ }
65
+ }
66
+
67
+ :host(:hover)::after,
68
+ :host(${focusVisible})::after {
69
+ width: 100%;
70
+ }
71
+
72
+ :host([disabled]:hover)::after {
73
+ width: 0px;
42
74
  }
43
75
 
44
76
  .control {
@@ -59,23 +91,40 @@ export const styles = css `
59
91
  }
60
92
 
61
93
  :host(.open:not(:hover)) .control {
62
- border-bottom: ${borderWidth} solid ${borderHoverColor};
63
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
64
- }
65
-
66
- :host(:hover) .control {
67
- border-bottom: 2px solid ${borderHoverColor};
68
- padding-bottom: 0px;
69
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
94
+ border-bottom-color: ${borderHoverColor};
70
95
  }
71
96
 
72
97
  :host([disabled]) .control,
73
98
  :host([disabled]) .control:hover {
74
- border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
75
- padding-bottom: 1px;
99
+ border-bottom-color: ${bodyDisabledFontColor};
76
100
  color: ${bodyDisabledFontColor};
77
101
  }
78
102
 
103
+ .listbox {
104
+ box-sizing: border-box;
105
+ display: inline-flex;
106
+ flex-direction: column;
107
+ left: 0;
108
+ overflow-y: auto;
109
+ position: absolute;
110
+ width: 100%;
111
+ --ni-private-listbox-padding: ${smallPadding};
112
+ max-height: calc(
113
+ var(--ni-private-select-max-height) - 2 *
114
+ var(--ni-private-listbox-padding)
115
+ );
116
+ z-index: 1;
117
+ padding: var(--ni-private-listbox-padding);
118
+ box-shadow: 0px 3px 3px ${popupBoxShadowColor};
119
+ border: 1px solid ${popupBorderColor};
120
+ background-color: ${applicationBackgroundColor};
121
+ background-clip: padding-box;
122
+ }
123
+
124
+ .listbox[hidden] {
125
+ display: none;
126
+ }
127
+
79
128
  :host([open][position='above']) .listbox {
80
129
  border-bottom-left-radius: 0;
81
130
  border-bottom-right-radius: 0;
package/dist/esm/select/styles.js.map CHANGED
@@ -1 +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,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,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;;kCAuBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;yBAe7B,WAAW,UAAU,qBAAqB;;;;;;;;;;;yBAW1C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,qBAAqB;;iBAElD,qBAAqB;;;;;;;;;;;;;;kBAcpB,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
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,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,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;yBAsBN,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;yBAWC,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;;;;;+BAWpC,gBAAgB;;;;;+BAKhB,qBAAqB;iBACnC,qBAAqB;;;;;;;;;;;wCAWE,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/text-field/styles.js CHANGED
@@ -15,6 +15,10 @@ export const styles = css `
15
15
  --webkit-user-select: none;
16
16
  color: ${bodyFontColor};
17
17
  height: calc(${labelHeight} + ${controlHeight});
18
+ --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
19
+ --ni-private-height-within-border: calc(
20
+ ${controlHeight} - 2 * ${borderWidth}
21
+ );
18
22
  }
19
23
 
20
24
  :host([disabled]) {
@@ -38,22 +42,10 @@ export const styles = css `
38
42
  flex-direction: row;
39
43
  border-radius: 0px;
40
44
  font: inherit;
41
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
42
45
  align-items: center;
43
- --ni-private-hover-bottom-border-width: 2px;
46
+ justify-content: center;
44
47
  border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
45
- border-bottom-width: var(--ni-private-bottom-border-width);
46
48
  gap: calc(${standardPadding} / 2);
47
- padding-bottom: calc(
48
- var(--ni-private-hover-bottom-border-width) -
49
- var(--ni-private-bottom-border-width)
50
- );
51
- }
52
-
53
- @media (prefers-reduced-motion) {
54
- .root {
55
- transition-duration: 0s;
56
- }
57
49
  }
58
50
 
59
51
  :host(.invalid) .root {
@@ -68,21 +60,6 @@ export const styles = css `
68
60
  border-color: rgba(${borderRgbPartialColor}, 0.1);
69
61
  }
70
62
 
71
- .root:hover {
72
- --ni-private-bottom-border-width: var(
73
- --ni-private-hover-bottom-border-width
74
- );
75
- border-bottom-color: ${borderHoverColor};
76
- }
77
-
78
- :host([readonly]) .root:hover {
79
- --ni-private-bottom-border-width: 1px;
80
- }
81
-
82
- :host([disabled]) .root:hover {
83
- --ni-private-bottom-border-width: 1px;
84
- }
85
-
86
63
  .root:focus-within {
87
64
  border-bottom-color: ${borderHoverColor};
88
65
  }
@@ -130,10 +107,7 @@ export const styles = css `
130
107
  background: transparent;
131
108
  color: inherit;
132
109
  padding: 0px;
133
- height: calc(
134
- ${controlHeight} - ${borderWidth} -
135
- var(--ni-private-hover-bottom-border-width)
136
- );
110
+ height: ${controlHeight};
137
111
  width: 100%;
138
112
  margin-top: auto;
139
113
  margin-bottom: auto;
@@ -177,6 +151,36 @@ export const styles = css `
177
151
  display: contents;
178
152
  }
179
153
 
154
+ [part='end']::after {
155
+ content: '';
156
+ position: absolute;
157
+ bottom: calc(-1 * ${borderWidth});
158
+ width: 0px;
159
+ height: 0px;
160
+ border-bottom: ${borderHoverColor}
161
+ var(--ni-private-hover-indicator-width) solid;
162
+ transition: width ${smallDelay} ease-in;
163
+ }
164
+
165
+ @media (prefers-reduced-motion) {
166
+ [part='end']::after {
167
+ transition-duration: 0s;
168
+ }
169
+ }
170
+
171
+ :host(.invalid) [part='end']::after {
172
+ border-bottom-color: ${failColor};
173
+ }
174
+
175
+ :host(:hover) [part='end']::after {
176
+ width: 100%;
177
+ }
178
+
179
+ :host([disabled]:hover) [part='end']::after,
180
+ :host([readonly]:hover) [part='end']::after {
181
+ width: 0px;
182
+ }
183
+
180
184
  .error-content {
181
185
  display: none;
182
186
  }
@@ -232,46 +236,33 @@ export const styles = css `
232
236
  }
233
237
  `.withBehaviors(appearanceBehavior(TextFieldAppearance.underline, css `
234
238
  .root {
235
- --ni-private-bottom-border-width: 1px;
239
+ border-bottom-width: ${borderWidth};
240
+ }
241
+
242
+ .control {
243
+ height: var(--ni-private-height-within-border);
236
244
  padding-top: ${borderWidth};
237
245
  padding-left: ${borderWidth};
238
246
  padding-right: ${borderWidth};
239
247
  }
240
-
241
- :host([disabled]) .root {
242
- border-color: rgba(${borderRgbPartialColor}, 0.1);
243
- }
244
-
245
- :host([disabled]) .root:hover {
246
- --ni-private-bottom-border-width: 1px;
247
- }
248
248
  `), appearanceBehavior(TextFieldAppearance.block, css `
249
249
  .root {
250
250
  background-color: rgba(${borderRgbPartialColor}, 0.1);
251
- --ni-private-bottom-border-width: 0px;
252
- padding-top: ${borderWidth};
253
- padding-left: ${borderWidth};
254
- padding-right: ${borderWidth};
255
251
  }
256
252
 
257
- .root:focus-within {
258
- --ni-private-bottom-border-width: 1px;
259
- }
260
-
261
- .root:focus-within:hover {
262
- --ni-private-bottom-border-width: var(
263
- --ni-private-hover-bottom-border-width
264
- );
253
+ .control {
254
+ padding-left: ${borderWidth};
255
+ padding-right: ${borderWidth};
265
256
  }
266
257
 
258
+ .root:focus-within,
267
259
  :host(.invalid) .root {
268
- --ni-private-bottom-border-width: 1px;
260
+ border-bottom-width: ${borderWidth};
269
261
  }
270
262
 
271
- :host(.invalid) .root:hover {
272
- --ni-private-bottom-border-width: var(
273
- --ni-private-hover-bottom-border-width
274
- );
263
+ .root:focus-within .control,
264
+ :host(.invalid) .control {
265
+ height: calc(${controlHeight} - ${borderWidth});
275
266
  }
276
267
 
277
268
  :host([readonly]) .root {
@@ -282,28 +273,20 @@ export const styles = css `
282
273
  :host([disabled]) .root {
283
274
  background-color: rgba(${borderRgbPartialColor}, 0.07);
284
275
  }
285
-
286
- :host([disabled]) .root:hover {
287
- --ni-private-bottom-border-width: 0px;
288
- }
289
-
290
- :host(.invalid[disabled]) .root {
291
- --ni-private-bottom-border-width: 1px;
292
- }
293
276
  `), appearanceBehavior(TextFieldAppearance.outline, css `
294
277
  .root {
295
- --ni-private-bottom-border-width: 1px;
296
278
  border-width: ${borderWidth};
297
- border-bottom-width: var(--ni-private-bottom-border-width);
279
+ }
280
+
281
+ .control {
282
+ height: var(--ni-private-height-within-border);
298
283
  }
299
284
 
300
285
  :host(.invalid) .errortext {
301
286
  top: calc(${controlHeight} - ${borderWidth});
302
287
  }
303
288
  `), appearanceBehavior(TextFieldAppearance.frameless, css `
304
- .root {
305
- --ni-private-bottom-border-width: 0px;
306
- padding-top: ${borderWidth};
289
+ .control {
307
290
  padding-left: ${borderWidth};
308
291
  padding-right: ${borderWidth};
309
292
  }
@@ -311,10 +294,6 @@ export const styles = css `
311
294
  :host([readonly]) .root {
312
295
  border-color: transparent;
313
296
  }
314
-
315
- .root:hover {
316
- --ni-private-bottom-border-width: 0px;
317
- }
318
297
  `), themeBehavior(css `
319
298
  ${'' /* Light theme */}
320
299
  .control::-ms-reveal {
package/dist/esm/text-field/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;oBAElC,eAAe;;;;;;;;;;;;;;+BAcJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;cA0BxC,aAAa,MAAM,WAAW;;;;;;;;;;;;;;;;;;UAkBlC;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGQ,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGS,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGQ,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;;;;+BAIJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBpC,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;;;+BAKnB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;+BAKnB,aAAa,MAAM,WAAW;;;;yCAIpB,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;;;;;;4BAQf,aAAa,MAAM,WAAW;;SAEjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "11.0.1",
3
+ "version": "11.0.4",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",